Files
hammerfest/public/collabora-draw/index.html
T
2026-09-30 16:19:00 -06:00

327 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collabora Draw · Federated Computer</title>
<meta name="description" content="Draw shapes and diagrams, add text, charts, and tables, and collaborate with others in your browser.">
<meta name="theme-color" content="#ffffff">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
</head>
<body id="top">
<a class="skip" href="#content">Skip to content</a>
<div class="page">
<aside class="rail">
<div class="rail-bar">
<a href="../" class="brand" aria-label="Federated Computer, home">
<img src="../images/logo.png" alt="Federated Computer" class="brand-logo" width="775" height="129">
</a>
<details class="menu">
<summary><span class="menu-word">Menu</span><span class="menu-glyph" aria-hidden="true"><i></i><i></i></span></summary>
<nav class="menu-panel" aria-label="Site">
<a href="../" class="menu-top">Home</a>
<a href="../solutions/" class="menu-top">Solutions</a>
<div class="menu-sub">
<a href="../solutions/open-source-apps/">Open-Source Apps</a><a href="../solutions/apps-and-ai-development/">Apps &#43; AI Development</a><a href="../solutions/ai-for-your-apps/">AI for Your Own Apps</a><a href="../solutions/full-stack/">The Full Stack</a><a href="../solutions/#compare">Compare All Four</a>
</div>
<a href="../product/" class="menu-top">Product</a>
<div class="menu-sub">
<a href="../product/federated-core/">Federated Core</a><a href="../product/software-library/">Software Library</a><a href="../product/agent-sandbox/">Agent Sandbox</a><a href="../product/data-controls/">Data &amp; Controls</a>
</div>
<a href="../ai-privacy-advantage/" class="menu-top">AI Privacy Advantage</a>
<a href="../pricing/" class="menu-top">Pricing</a>
<a href="../about/" class="menu-top">About</a>
<div class="menu-actions">
<a href="../start-now/" class="btn btn-primary">
<span class="btn-tile" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/></svg></span>
<span class="btn-label">Start Now</span>
</a>
<a href="../sign-in/" class="btn btn-secondary">Sign In<span class="arrow" aria-hidden="true">→</span></a>
</div>
</nav>
</details>
</div>
<nav class="nav nav-doors" aria-label="Site">
<a href="../">Home</a>
<a href="../solutions/">Solutions</a>
<a href="../product/">Product</a>
<a href="../ai-privacy-advantage/">AI Privacy Advantage</a>
<a href="../pricing/">Pricing</a>
<a href="../about/">About</a>
</nav>
<div class="rail-actions">
<a href="../start-now/" class="btn btn-primary btn-sm"><span class="btn-label">Start Now</span></a>
<a href="../sign-in/" class="rail-signin">Sign In</a>
</div>
</aside>
<main class="col" id="content" tabindex="-1">
<header class="hero hero-compact">
<p class="note" data-reveal><span class="note-live" aria-hidden="true"></span><span class="note-text">Software Library · Drawing</span></p>
<h1 class="statement" data-reveal style="--d:80ms">Draw from Collabora Draw</h1>
<p class="dek" data-reveal style="--d:140ms">Draw shapes and diagrams, add text, charts, and tables, and collaborate with others in your browser.</p>
<div class="actions" data-reveal style="--d:200ms">
<a href="../start-now/" class="btn btn-primary">
<span class="btn-tile" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/></svg></span>
<span class="btn-label">Start 7-Day Free Trial</span>
</a>
<a href="https://calcom.federated.computer/david/60-min-meeting" class="btn btn-secondary">Book a Demo<span class="arrow" aria-hidden="true">↗</span></a>
</div>
</header>
<section class="section" data-reveal>
<dl class="app-facts">
<div><dt>Replaces</dt><dd>Microsoft Draw, Google Drawings</dd></div>
<div><dt>Hosted plans</dt><dd>Included in Good, Better, and Best</dd></div>
<div><dt>Self-hosted</dt><dd>Any tier (Free includes up to 3 apps)</dd></div>
<div><dt>Project</dt><dd><a href="https://www.collaboraonline.com/draw/" target="_blank" rel="noopener">collaboraonline.com<span class="arrow" aria-hidden="true">↗</span></a></dd></div>
</dl>
<p class="app-facts-more"><a class="more" href="../pricing/">See pricing<span class="arrow" aria-hidden="true">→</span></a> <a class="more" href="../product/software-library/">Browse the Software Library<span class="arrow" aria-hidden="true">→</span></a></p>
</section>
<section class="section" data-reveal>
<div class="prose doc"><p>Draw shapes and diagrams, add text, charts and tables, insert fields and links. Comment and collaborate with others, then download as an image or PDF to insert into your documents and presentations.</p>
<p><img src="../images/apps/collabora/collabora-draw-1.png" alt="Collabora Draw screenshot"></p>
<p>Use through a web browser or you can edit drawings using LibreOffice Draw. Collabora Draw is installed uniquely for you on your own Federated Core. Your data is always secure, private.</p>
</div>
</section>
<aside class="cta" data-reveal>
<h2 class="cta-title">Run Collabora Draw on Federated</h2>
<p class="cta-text">Private, single-tenant, and integrated with the rest of your apps. Talk to us, or start your free trial.</p>
<div class="actions">
<a href="https://calcom.federated.computer/david/60-min-meeting" class="btn btn-primary">
<span class="btn-tile" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14" fill="none"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/></svg></span>
<span class="btn-label">Book a Demo</span>
</a>
<a href="../start-now/" class="btn btn-secondary">Start 7-Day Free Trial<span class="arrow" aria-hidden="true">→</span></a>
</div>
</aside>
<footer class="foot" data-reveal>
<div class="foot-brand">
<a href="../" class="foot-mark" aria-label="Federated Computer, home">
<img src="../images/logo.png" alt="Federated Computer" class="brand-logo" width="775" height="129">
</a>
<p class="foot-line">The open-source operating system for your business — and the private AI that runs on it.</p>
<span class="foot-place">Colorado Springs, Colorado</span>
<ul class="foot-social">
<li><a href="https://www.linkedin.com/company/federated-computer" target="_blank" rel="noopener">LinkedIn<span class="arrow" aria-hidden="true">↗</span></a></li><li><a href="https://x.com/federatedcomp" target="_blank" rel="noopener">X<span class="arrow" aria-hidden="true">↗</span></a></li>
</ul>
</div>
<div class="foot-grid">
<nav class="foot-group" aria-label="Solutions">
<span class="foot-head">Solutions</span>
<ul class="foot-links">
<li><a href="../solutions/open-source-apps/">Open-Source Apps</a></li>
<li><a href="../solutions/apps-and-ai-development/">Apps &#43; AI Development</a></li>
<li><a href="../solutions/ai-for-your-apps/">AI for Your Own Apps</a></li>
<li><a href="../solutions/full-stack/">The Full Stack</a></li>
<li><a href="../solutions/#compare">Compare All Four</a></li>
</ul>
</nav>
<nav class="foot-group" aria-label="Product">
<span class="foot-head">Product</span>
<ul class="foot-links">
<li><a href="../product/federated-core/">Federated Core</a></li>
<li><a href="../product/software-library/">Software Library</a></li>
<li><a href="../product/agent-sandbox/">Agent Sandbox</a></li>
<li><a href="../product/data-controls/">Data &amp; Controls</a></li>
<li><a href="../ai-privacy-advantage/">AI Privacy Advantage</a></li>
</ul>
</nav>
<nav class="foot-group" aria-label="Company">
<span class="foot-head">Company</span>
<ul class="foot-links">
<li><a href="../about/">About</a></li>
<li><a href="../about/#team">Team</a></li>
<li><a href="../about/#jobs">Jobs</a></li>
<li><a href="https://freescout.federated.computer/help/3593186542">Support</a></li>
</ul>
</nav>
<nav class="foot-group" aria-label="Get Started">
<span class="foot-head">Get Started</span>
<ul class="foot-links">
<li><a href="../start-now/">Start Now</a></li>
<li><a href="../sign-in/">Sign In</a></li>
<li><a href="../pricing/">Pricing</a></li>
</ul>
</nav>
</div>
<div class="foot-legal">
<span class="foot-copy">© 2026 Federated Computer, Inc. FedQ'd in Colorado Springs — built on Federated Computer by a team around the world.</span>
<a class="foot-policy" href="../privacy-policy/">Privacy Policy</a><a class="foot-policy" href="../terms-and-conditions/">Terms &amp; Conditions</a>
<a class="foot-top" href="#top">Back to top<span class="foot-up" aria-hidden="true">↑</span></a>
</div>
</footer>
</main>
</div>
<script>
(function () {
var root = document.documentElement;
if (!('IntersectionObserver' in window)) return;
root.classList.add('js');
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { e.target.classList.add('is-visible'); io.unobserve(e.target); }
});
}, { rootMargin: '0px 0px -8% 0px' });
document.querySelectorAll('[data-reveal]').forEach(function (el) { io.observe(el); });
var links = [].slice.call(document.querySelectorAll('.nav-here a'));
if (!links.length) return;
var targets = links.map(function (a) { return document.getElementById(decodeURIComponent(a.hash.slice(1))); });
var ticking = false;
function update() {
ticking = false;
var current = -1;
targets.forEach(function (t, i) { if (t && t.getBoundingClientRect().top < innerHeight * 0.3) current = i; });
links.forEach(function (a, i) {
if (i === current) a.setAttribute('aria-current', 'location'); else a.removeAttribute('aria-current');
});
}
addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(update); } }, { passive: true });
update();
})();
(function () {
function openPanel() {
var panel = location.hash && document.getElementById(decodeURIComponent(location.hash.slice(1)));
if (!panel || !panel.classList.contains('plan-panel')) return;
var i = [].indexOf.call(panel.parentNode.children, panel);
var radio = panel.closest('.plan-switch').querySelectorAll('.plan-radio')[i];
if (radio) { radio.checked = true; (panel.closest('.section') || panel).scrollIntoView(); }
}
addEventListener('hashchange', openPanel);
openPanel();
})();
</script>
</body>
</html>