Full document, spreadsheet, slideshow, and diagram tooling
feat: update landing page copy to explain Atmosphere Docs
Sign-in modal now explains what the product is: E2EE office suite for
AT Proto, local-first storage, AES-256-GCM encryption. Lists the six
editors and key privacy properties. Updated meta descriptions to match.
+37
-6
+25
src/css/app.css
+25
src/css/app.css
···
1755
1755
1756
1756
.username-modal {
1757
1757
overflow: visible;
1758
+
max-width: 440px;
1759
+
}
1760
+
.welcome-tagline {
1761
+
color: var(--color-text-secondary);
1762
+
font-size: 0.95rem;
1763
+
margin-bottom: var(--space-md);
1764
+
}
1765
+
.welcome-features {
1766
+
list-style: none;
1767
+
padding: 0;
1768
+
margin: 0 0 var(--space-lg);
1769
+
font-size: 0.85rem;
1770
+
color: var(--color-text-muted);
1771
+
line-height: 1.6;
1772
+
}
1773
+
.welcome-features li::before {
1774
+
content: "\2713\00a0";
1775
+
color: var(--color-accent);
1776
+
font-weight: 600;
1777
+
}
1778
+
.welcome-signin-label {
1779
+
font-size: 0.85rem;
1780
+
font-weight: 500;
1781
+
color: var(--color-text-secondary);
1782
+
margin-bottom: var(--space-sm);
1758
1783
}
1759
1784
.handle-input-wrapper {
1760
1785
position: relative;
+12
-6
src/index.html
+12
-6
src/index.html
···
4
4
<meta charset="UTF-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover">
6
6
<link rel="manifest" href="/manifest.json">
7
-
<meta name="description" content="E2EE collaborative docs and sheets. End-to-end encrypted, real-time collaboration.">
7
+
<meta name="description" content="End-to-end encrypted docs, sheets, slides, and more for the AT Protocol. Your data stays in your browser.">
8
8
<meta property="og:title" content="Atmosphere Docs">
9
-
<meta property="og:description" content="E2EE collaborative docs and sheets. End-to-end encrypted, real-time collaboration.">
9
+
<meta property="og:description" content="End-to-end encrypted docs, sheets, slides, and more for the AT Protocol. Your data stays in your browser.">
10
10
<meta property="og:type" content="website">
11
11
<meta property="og:image" content="/favicon.svg">
12
12
<title>Atmosphere Docs</title>
···
25
25
<span class="brand-name">Atmosphere</span>
26
26
<span class="brand-badge">E2EE</span>
27
27
<span style="flex:1"></span>
28
-
<span class="user-badge" id="user-badge" title="Click to change name" role="button" tabindex="0" aria-label="Change display name"></span>
28
+
<span class="user-badge" id="user-badge" title="Account" role="button" tabindex="0" aria-label="Account menu" style="display:none"></span>
29
29
<button class="theme-toggle" id="theme-toggle" title="Toggle dark mode" aria-label="Toggle dark mode"></button>
30
30
</div>
31
31
<div class="landing-actions">
···
145
145
</footer>
146
146
</main>
147
147
148
-
<!-- Username prompt modal -->
148
+
<!-- Sign-in modal -->
149
149
<div class="modal-backdrop" id="username-modal" style="display:none;">
150
150
<div class="modal username-modal" role="dialog" aria-modal="true" aria-labelledby="username-modal-title">
151
-
<h2 id="username-modal-title">Welcome to Atmosphere Docs</h2>
152
-
<p>Sign in with your Bluesky handle to get started.</p>
151
+
<h2 id="username-modal-title">Atmosphere Docs</h2>
152
+
<p class="welcome-tagline">End-to-end encrypted office suite for the AT Protocol ecosystem.</p>
153
+
<ul class="welcome-features">
154
+
<li>Documents, spreadsheets, slides, diagrams, forms, and calendar</li>
155
+
<li>Encrypted with AES-256-GCM — keys never leave your browser</li>
156
+
<li>All data stored locally — nothing is sent to a server</li>
157
+
</ul>
158
+
<p class="welcome-signin-label">Sign in with your Bluesky account</p>
153
159
<input type="text" class="username-input" id="username-input" placeholder="you.bsky.social" maxlength="100" autofocus />
154
160
<div class="username-modal-actions">
155
161
<button class="btn-secondary" id="username-skip">Skip</button>