Files
flowdeck/app/templates/landing.html
T
bruno b5207216f1 feat: v6.0.0 PWA offline support
- manifest + icones, service worker (precache, network-first, Background Sync)

- module client FlowOffline (IndexedDB, queue, delta, flush) + hook editeur

- endpoints /api/v2/sync/{delta,batch,status} + moteur de sync (conflits LWW/orpheline/copie offline)

- migrations offline_sync_queue + sync_version (triggers)

- UI offline (banner, badge sync, toasts, icone dirty) + doc /help

- tests pytest (sync, migrations, SW, offline) + E2E Playwright; bump 6.0.0
2026-09-18 13:05:40 -04:00

220 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% from '_icons.html' import fd_icon %}
<title>FlowDeck — All-in-one workspace</title>
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
<link rel="manifest" href="/static/manifest.json">
<meta name="theme-color" content="#191919">
<link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<style>
:root {
--bg: #191919;
--bg-card: #1e1e1e;
--text: #e0e0e0;
--text-dim: #999;
--accent: #2383E2;
--accent-hover: #2C8CEB;
--border: rgba(255,255,255,.06);
--radius: 12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
display:flex;
flex-direction:column;
}
/* Nav */
.landing-nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 32px;
border-bottom:1px solid var(--border);
}
.landing-logo{
font-size:20px;
font-weight:700;
display:flex;
align-items:center;
gap:8px;
text-decoration:none;
color:var(--text);
}
.landing-nav-actions{
display:flex;
gap:12px;
align-items:center;
}
.btn{
padding:10px 20px;
border-radius:8px;
font-size:14px;
font-weight:500;
cursor:pointer;
text-decoration:none;
border:none;
transition:all .15s;
}
.btn-primary{
background:var(--accent);
color:#fff;
}
.btn-primary:hover{background:var(--accent-hover);}
.btn-secondary{
background:transparent;
color:var(--text);
border:1px solid var(--border);
}
.btn-secondary:hover{background:rgba(255,255,255,.05);}
/* Hero */
.hero{
text-align:center;
padding:80px 32px 60px;
max-width:720px;
margin:0 auto;
}
.hero h1{
font-size:clamp(2rem,5vw,3.2rem);
font-weight:800;
letter-spacing:-.5px;
margin-bottom:16px;
line-height:1.2;
}
.hero .gradient-text{
background:linear-gradient(135deg,#2383E2,#6C5CE7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.hero p{
font-size:18px;
color:var(--text-dim);
line-height:1.6;
margin-bottom:32px;
}
.hero-actions{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}
.hero-actions .btn{
font-size:15px;
padding:12px 28px;
}
/* Features grid */
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:16px;
max-width:1000px;
margin:0 auto;
padding:0 32px 60px;
}
.feature-card{
background:var(--bg-card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:28px 24px;
transition:border-color .15s;
}
.feature-card:hover{border-color:rgba(255,255,255,.12);}
.feature-icon{font-size:28px;margin-bottom:12px;}
.feature-card h3{font-size:16px;font-weight:600;margin-bottom:8px;}
.feature-card p{font-size:14px;color:var(--text-dim);line-height:1.5;}
/* Footer */
.landing-footer{
margin-top:auto;
text-align:center;
padding:32px;
border-top:1px solid var(--border);
font-size:13px;
color:var(--text-dim);
}
</style>
</head>
<body>
<nav class="landing-nav">
<a href="/" class="landing-logo">
<span>{{ fd_icon("book",20) }}</span> FlowDeck
</a>
<div class="landing-nav-actions">
<a href="/auth/login?provider=local" class="btn btn-secondary">Log in</a>
<a href="/auth/register" class="btn btn-primary">Get started free</a>
</div>
</nav>
<section class="hero">
<h1>Your <span class="gradient-text">Notion-style</span> workspace,<br>self-hosted & integrated</h1>
<p>
Write, organize, and collaborate — with block-based editing,
Kanban boards, databases, and deep Gitea/GitHub integration.
All on your own server.
</p>
<div class="hero-actions">
<a href="/auth/register" class="btn btn-primary">Get started — it's free</a>
<a href="/auth/login?provider=local" class="btn btn-secondary">I already have an account</a>
</div>
</section>
<div class="features">
<div class="feature-card">
<div class="feature-icon">{{ fd_icon("edit",24) }}</div>
<h3>Block Editor</h3>
<p>Notion-style editor with slash commands, markdown shortcuts, headings, code blocks, to-dos, and more.</p>
</div>
<div class="feature-card">
<div class="feature-icon">{{ fd_icon("bar-chart",24) }}</div>
<h3>Kanban & Tables</h3>
<p>Visual project management with drag-drop boards, table views, and database collections.</p>
</div>
<div class="feature-card">
<div class="feature-icon">{{ fd_icon("link",24) }}</div>
<h3>Gitea & GitHub</h3>
<p>Browse repos, edit files, commit changes — all from your workspace sidebar.</p>
</div>
<div class="feature-card">
<div class="feature-icon">{{ fd_icon("globe",24) }}</div>
<h3>Publish to Web</h3>
<p>One-click publish any page to a public URL. Share with anyone, no account needed.</p>
</div>
<div class="feature-card">
<div class="feature-icon">{{ fd_icon("lock",24) }}</div>
<h3>Self-Hosted</h3>
<p>Your data stays on your server. No vendor lock-in, full control, Docker single-container deploy.</p>
</div>
<div class="feature-card">
<div class="feature-icon">{{ fd_icon("zap",24) }}</div>
<h3>Fast & Light</h3>
<p>Alpine.js + FastAPI + SQLite. No React bloat, no Node.js needed. Sub-100ms page loads.</p>
</div>
</div>
<footer class="landing-footer">
FlowDeck v4.0.1 — Open source · Self-hosted · Notion-compatible
</footer>
<script data-cfasync="false">
(function() {
if (!('serviceWorker' in navigator)) return;
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').catch(function() {});
});
})();
</script>
</body>
</html>