Full document, spreadsheet, slideshow, and diagram tooling
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, viewport-fit=cover">
6 <link rel="manifest" href="/manifest.json">
7 <meta name="description" content="Atmosphere Office — slide presentations. All data stored locally in your browser.">
8 <meta property="og:title" content="Atmosphere Office — Slides">
9 <meta property="og:description" content="Atmosphere Office — slide presentations. All data stored locally in your browser.">
10 <meta property="og:type" content="website">
11 <meta property="og:image" content="/favicon.svg">
12 <title>Atmosphere Office — Slides</title>
13 <meta name="theme-color" content="#3a8a7a">
14 <link rel="icon" type="image/svg+xml" href="/favicon.svg">
15 <link rel="apple-touch-icon" href="/favicon.svg">
16 <link rel="stylesheet" href="../css/app.css">
17 <!-- Theme init — runs before paint to avoid FOUC. See #694. -->
18 <script src="/theme-init.js"></script>
19</head>
20<body>
21 <a class="skip-link" href="#main-content">Skip to content</a>
22 <div class="slides-app" id="app">
23 <!-- Top bar -->
24 <div class="app-topbar">
25 <a class="app-logo" href="/">Atmosphere</a>
26 <button class="btn-icon slides-panel-toggle" id="btn-toggle-slide-panel" title="Slide thumbnails" aria-label="Toggle slide thumbnails" aria-expanded="false">☰</button>
27 <input class="doc-title-input" id="deck-title" type="text" value="Untitled Presentation" spellcheck="false">
28 <span class="topbar-spacer"></span>
29 <div class="save-indicator saved" id="save-indicator">
30 <span class="save-dot save-dot--saved"></span>
31 <span id="save-text">Saved</span>
32 </div>
33 <div class="status-indicator" id="status">
34 <span class="status-dot connected" id="status-dot"></span>
35 <span id="status-text">Saved</span>
36 </div>
37 <button class="btn-secondary" id="btn-present" title="Present (F5)">▷ Present</button>
38 <button class="btn-secondary" id="btn-export" title="Export">Export</button>
39 <button class="btn-icon" id="btn-ai-chat" title="AI Chat (Cmd+Shift+L)">
40 <svg class="tb-icon" viewBox="0 0 16 16" style="width:16px;height:16px" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h12a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H5l-3 3V4a1 1 0 0 1 1-1z"/><circle cx="5.5" cy="7.5" r="0.5" fill="currentColor" stroke="none"/><circle cx="8" cy="7.5" r="0.5" fill="currentColor" stroke="none"/><circle cx="10.5" cy="7.5" r="0.5" fill="currentColor" stroke="none"/></svg>
41 </button>
42 </div>
43
44 <main class="slides-main" id="main-content">
45 <!-- Left: Slide panel (thumbnails) -->
46 <div class="slides-panel" id="slide-panel">
47 <div class="slides-thumbnail-list" id="thumbnail-list"></div>
48 <button class="slides-add-btn" id="btn-add-slide" title="Add slide">+ Slide</button>
49 </div>
50
51 <!-- Center: Canvas -->
52 <div class="slides-canvas-area" id="canvas-area">
53 <div class="slides-toolbar" id="slides-toolbar">
54 <select class="slides-layout-select" id="layout-select" title="Slide layout"></select>
55 <select class="slides-master-select" id="master-select" title="Master slide"></select>
56 <select class="slides-theme-select" id="theme-select" title="Theme"></select>
57 <select class="slides-transition-select" id="transition-select" title="Transition"></select>
58 <span class="toolbar-divider"></span>
59 <button class="btn-icon" id="btn-add-text" title="Add text">T</button>
60 <button class="btn-icon" id="btn-add-shape" title="Add shape">■</button>
61 <button class="btn-icon" id="btn-add-image" title="Add image">▣</button>
62 <button class="btn-icon" id="btn-add-video" title="Add video">▶</button>
63 <button class="btn-icon" id="btn-add-audio" title="Add audio">♫</button>
64 <button class="btn-icon" id="btn-delete-element" title="Delete selected">✕</button>
65 </div>
66 <div class="slides-canvas-wrapper">
67 <div class="slides-canvas" id="slide-canvas"></div>
68 </div>
69 </div>
70
71 <!-- Right: Notes & Animations panel -->
72 <div class="slides-notes-panel" id="notes-panel">
73 <div class="slides-panel-tabs" role="tablist" aria-label="Slide notes and animations">
74 <button class="slides-panel-tab slides-panel-tab--active" id="tab-notes" data-tab="notes" role="tab" aria-selected="true" aria-controls="tab-content-notes">Notes</button>
75 <button class="slides-panel-tab" id="tab-animations" data-tab="animations" role="tab" aria-selected="false" aria-controls="tab-content-animations">Animations</button>
76 </div>
77 <div class="slides-tab-content" id="tab-content-notes" role="tabpanel" aria-labelledby="tab-notes">
78 <textarea class="slides-notes-input" id="notes-input" placeholder="Add speaker notes..."></textarea>
79 </div>
80 <div class="slides-tab-content" id="tab-content-animations" role="tabpanel" aria-labelledby="tab-animations" style="display:none">
81 <div class="slides-anim-list" id="anim-list"></div>
82 <div class="slides-anim-controls" id="anim-controls" style="display:none">
83 <select id="anim-effect-select"></select>
84 <select id="anim-trigger-select">
85 <option value="onClick">On Click</option>
86 <option value="withPrevious">With Previous</option>
87 <option value="afterPrevious">After Previous</option>
88 </select>
89 <button class="btn-secondary btn-sm" id="btn-add-anim">+ Add</button>
90 </div>
91 <p class="slides-anim-hint" id="anim-hint">Select an element to add animations</p>
92 </div>
93 </div>
94 </main>
95
96 <!-- Presenter overlay (hidden) -->
97 <div class="presenter-overlay" id="presenter-overlay" style="display:none">
98 <div class="presenter-current" id="presenter-current"></div>
99 <div class="presenter-sidebar">
100 <div class="presenter-next" id="presenter-next">
101 <h4>Next Slide</h4>
102 <div class="presenter-next-preview" id="presenter-next-preview"></div>
103 </div>
104 <div class="presenter-notes" id="presenter-notes"></div>
105 <div class="presenter-controls">
106 <span class="presenter-timer" id="presenter-timer">00:00</span>
107 <span class="presenter-progress" id="presenter-progress">1 / 1</span>
108 <button class="btn-icon" id="btn-presenter-prev" title="Previous">◁</button>
109 <button class="btn-icon" id="btn-presenter-next" title="Next">▷</button>
110 <button class="btn-icon" id="btn-presenter-exit" title="Exit">✕</button>
111 </div>
112 </div>
113 </div>
114 </div>
115
116 <div class="version-badge">v%APP_VERSION%</div>
117 <script type="module" src="./main.ts"></script>
118 <script src="/sw-reload.js"></script>
119</body>
120</html>