Skip to content

Commit 0f23dde

Browse files
thinkdjthinkdj
authored
Merge pull request #1 from thinkdj/session/agent_f612e8b7-fed0-484b-93a6-d92ea4f65e85
Inline styles and add dark mode toggle to maintenance page
2 parents 1885867 + 06c3b2d commit 0f23dde

File tree

2 files changed

+320
-105
lines changed

2 files changed

+320
-105
lines changed

‎index.html‎

Lines changed: 320 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en">
2+
<html lang="en" data-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -9,16 +9,330 @@
99
<meta name="theme-color" content="#000000">
1010
<meta name="author" content="thinkdj">
1111
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
12-
<link href="styles.css" rel="stylesheet">
12+
<style>
13+
/* ── CSS Variables ── */
14+
:root {
15+
--primary: #6366f1;
16+
--primary-glow: rgba(99, 102, 241, 0.25);
17+
--bg: #f0f4ff;
18+
--card-bg: #ffffff;
19+
--text-heading: #1e293b;
20+
--text-body: #64748b;
21+
--track-bg: #e2e8f0;
22+
--border: rgba(0,0,0,0.06);
23+
--shadow: 0 20px 60px -10px rgba(99,102,241,0.18), 0 4px 16px rgba(0,0,0,0.08);
24+
--toggle-bg: #e2e8f0;
25+
--toggle-icon-bg: #ffffff;
26+
--toggle-shadow: 0 2px 6px rgba(0,0,0,0.15);
27+
--radius: 20px;
28+
--transition: 0.3s ease;
29+
}
30+
31+
[data-theme="dark"] {
32+
--bg: #0d1117;
33+
--card-bg: #161b22;
34+
--text-heading: #f0f6fc;
35+
--text-body: #8b949e;
36+
--track-bg: #21262d;
37+
--border: rgba(255,255,255,0.06);
38+
--shadow: 0 20px 60px -10px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
39+
--toggle-bg: #30363d;
40+
--toggle-icon-bg: #6366f1;
41+
--toggle-shadow: 0 2px 6px rgba(0,0,0,0.4);
42+
}
43+
44+
/* ── Reset & Base ── */
45+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
46+
47+
html { height: 100%; }
48+
49+
body {
50+
min-height: 100vh;
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
55+
background-color: var(--bg);
56+
padding: clamp(1rem, 4vw, 2rem);
57+
transition: background-color var(--transition);
58+
position: relative;
59+
}
60+
61+
/* ── Background decoration ── */
62+
body::before {
63+
content: '';
64+
position: fixed;
65+
inset: 0;
66+
background:
67+
radial-gradient(ellipse 60% 50% at 20% 20%, var(--primary-glow), transparent),
68+
radial-gradient(ellipse 50% 40% at 80% 80%, var(--primary-glow), transparent);
69+
pointer-events: none;
70+
z-index: 0;
71+
transition: opacity var(--transition);
72+
}
73+
74+
/* ── Dark Mode Toggle ── */
75+
.theme-toggle {
76+
position: fixed;
77+
top: clamp(0.75rem, 2vw, 1.25rem);
78+
right: clamp(0.75rem, 2vw, 1.25rem);
79+
z-index: 100;
80+
background: var(--toggle-bg);
81+
border: 1px solid var(--border);
82+
border-radius: 50px;
83+
padding: 6px;
84+
cursor: pointer;
85+
display: flex;
86+
align-items: center;
87+
gap: 4px;
88+
box-shadow: var(--toggle-shadow);
89+
transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
90+
outline: none;
91+
}
92+
93+
.theme-toggle:focus-visible {
94+
outline: 2px solid var(--primary);
95+
outline-offset: 2px;
96+
}
97+
98+
.theme-toggle:hover {
99+
box-shadow: 0 4px 12px rgba(99,102,241,0.3);
100+
}
101+
102+
.toggle-icon {
103+
width: 32px;
104+
height: 32px;
105+
border-radius: 50%;
106+
background: var(--toggle-icon-bg);
107+
display: flex;
108+
align-items: center;
109+
justify-content: center;
110+
font-size: 16px;
111+
transition: background var(--transition), transform var(--transition);
112+
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
113+
}
114+
115+
.theme-toggle:hover .toggle-icon {
116+
transform: rotate(20deg);
117+
}
118+
119+
/* ── Card ── */
120+
.container {
121+
position: relative;
122+
z-index: 1;
123+
text-align: center;
124+
width: 100%;
125+
max-width: min(520px, 100%);
126+
padding: clamp(1.75rem, 5vw, 3rem) clamp(1.5rem, 5vw, 2.75rem);
127+
border-radius: var(--radius);
128+
background: var(--card-bg);
129+
border: 1px solid var(--border);
130+
box-shadow: var(--shadow);
131+
animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
132+
transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
133+
}
134+
135+
/* ── Logo / Emoji ── */
136+
.logo {
137+
font-size: clamp(2.5rem, 8vw, 3.5rem);
138+
margin-bottom: clamp(1rem, 3vw, 1.75rem);
139+
display: inline-block;
140+
animation: float 4s ease-in-out infinite;
141+
filter: drop-shadow(0 4px 12px var(--primary-glow));
142+
}
143+
144+
/* ── Badge ── */
145+
.badge {
146+
display: inline-flex;
147+
align-items: center;
148+
gap: 6px;
149+
background: var(--primary-glow);
150+
color: var(--primary);
151+
font-size: 0.72rem;
152+
font-weight: 600;
153+
letter-spacing: 0.08em;
154+
text-transform: uppercase;
155+
padding: 4px 12px;
156+
border-radius: 50px;
157+
margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
158+
}
159+
160+
.badge-dot {
161+
width: 6px;
162+
height: 6px;
163+
border-radius: 50%;
164+
background: var(--primary);
165+
animation: pulse 1.8s ease-in-out infinite;
166+
}
167+
168+
/* ── Heading ── */
169+
h1 {
170+
font-size: clamp(1.4rem, 4vw, 2rem);
171+
font-weight: 600;
172+
color: var(--text-heading);
173+
margin-bottom: clamp(0.75rem, 2vw, 1.1rem);
174+
line-height: 1.25;
175+
letter-spacing: -0.02em;
176+
transition: color var(--transition);
177+
}
178+
179+
/* ── Body text ── */
180+
p {
181+
font-size: clamp(0.875rem, 2.5vw, 1rem);
182+
color: var(--text-body);
183+
line-height: 1.7;
184+
margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
185+
transition: color var(--transition);
186+
}
187+
188+
/* ── Progress ── */
189+
.progress-container {
190+
width: 100%;
191+
height: 5px;
192+
background: var(--track-bg);
193+
border-radius: 99px;
194+
overflow: hidden;
195+
transition: background var(--transition);
196+
}
197+
198+
.progress-bar {
199+
height: 100%;
200+
width: 45%;
201+
background: linear-gradient(90deg, var(--primary), #818cf8);
202+
border-radius: 99px;
203+
animation: sweep 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
204+
}
205+
206+
/* ── Divider ── */
207+
.divider {
208+
width: 40px;
209+
height: 3px;
210+
background: linear-gradient(90deg, var(--primary), #818cf8);
211+
border-radius: 99px;
212+
margin: clamp(1.25rem, 3vw, 1.75rem) auto;
213+
}
214+
215+
/* ── Footer note ── */
216+
.footer-note {
217+
font-size: 0.78rem;
218+
color: var(--text-body);
219+
opacity: 0.7;
220+
margin-top: clamp(1.25rem, 3vw, 1.75rem);
221+
transition: color var(--transition);
222+
}
223+
224+
/* ── Keyframes ── */
225+
@keyframes fadeUp {
226+
from { opacity: 0; transform: translateY(28px) scale(0.97); }
227+
to { opacity: 1; transform: translateY(0) scale(1); }
228+
}
229+
230+
@keyframes float {
231+
0%, 100% { transform: translateY(0); }
232+
50% { transform: translateY(-10px); }
233+
}
234+
235+
@keyframes sweep {
236+
0% { transform: translateX(-120%); }
237+
100% { transform: translateX(320%); }
238+
}
239+
240+
@keyframes pulse {
241+
0%, 100% { opacity: 1; transform: scale(1); }
242+
50% { opacity: 0.5; transform: scale(0.75); }
243+
}
244+
245+
/* ── Responsive tweaks ── */
246+
@media (max-width: 400px) {
247+
.container { border-radius: 14px; }
248+
}
249+
250+
@media (min-width: 768px) {
251+
.container { max-width: 500px; }
252+
}
253+
254+
/* ── Reduced motion ── */
255+
@media (prefers-reduced-motion: reduce) {
256+
.logo, .progress-bar, .badge-dot { animation: none; }
257+
.container { animation: none; }
258+
}
259+
</style>
13260
</head>
14261
<body>
15-
<div class="container">
16-
<div class="logo">⌛</div>
262+
263+
<!-- Dark / Light mode toggle -->
264+
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode" title="Toggle dark mode">
265+
<span class="toggle-icon" id="toggleIcon">🌙</span>
266+
</button>
267+
268+
<div class="container" role="main">
269+
<div class="logo" aria-hidden="true">⌛</div>
270+
271+
<div class="badge">
272+
<span class="badge-dot"></span>
273+
In Progress
274+
</div>
275+
17276
<h1>We're making improvements</h1>
18-
<p>Our site is currently undergoing maintenance to improve your experience. Please check back soon.</p>
19-
<div class="progress-container">
277+
278+
<div class="divider" aria-hidden="true"></div>
279+
280+
<p>Our site is currently undergoing maintenance to improve your experience. We'll be back online shortly — thank you for your patience.</p>
281+
282+
<div class="progress-container" role="progressbar" aria-label="Maintenance progress" aria-valuetext="In progress">
20283
<div class="progress-bar"></div>
21284
</div>
285+
286+
<p class="footer-note">Expected downtime: a few hours</p>
22287
</div>
288+
289+
<script>
290+
(function () {
291+
const html = document.documentElement;
292+
const btn = document.getElementById('themeToggle');
293+
const icon = document.getElementById('toggleIcon');
294+
const STORAGE_KEY = 'theme-preference';
295+
296+
// Determine initial theme: stored preference → system preference → light
297+
function getSystemTheme() {
298+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
299+
}
300+
301+
function applyTheme(theme) {
302+
html.setAttribute('data-theme', theme);
303+
icon.textContent = theme === 'dark' ? '☀️' : '🌙';
304+
btn.setAttribute('aria-label', theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode');
305+
try { localStorage.setItem(STORAGE_KEY, theme); } catch (_) {}
306+
}
307+
308+
function getInitialTheme() {
309+
try {
310+
const stored = localStorage.getItem(STORAGE_KEY);
311+
if (stored === 'dark' || stored === 'light') return stored;
312+
} catch (_) {}
313+
return getSystemTheme();
314+
}
315+
316+
// Apply on load (no flash)
317+
applyTheme(getInitialTheme());
318+
319+
// Toggle on click
320+
btn.addEventListener('click', function () {
321+
const current = html.getAttribute('data-theme');
322+
applyTheme(current === 'dark' ? 'light' : 'dark');
323+
});
324+
325+
// Sync with OS preference changes (only if user hasn't manually set a preference)
326+
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
327+
try {
328+
if (!localStorage.getItem(STORAGE_KEY)) {
329+
applyTheme(e.matches ? 'dark' : 'light');
330+
}
331+
} catch (_) {
332+
applyTheme(e.matches ? 'dark' : 'light');
333+
}
334+
});
335+
})();
336+
</script>
23337
</body>
24338
</html>

0 commit comments

Comments
 (0)