feat: dark theme by default for landing page with theme toggle
This commit is contained in:
1 parent
13db11e5a1
commit
d82879798b
1 file changed
+54
@@ -5,16 +5,43 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>ИИ Пресс-секретарь — умный контент для вашего бизнеса</title>
|
<title>ИИ Пресс-секретарь — умный контент для вашего бизнеса</title>
|
||||||
<meta name="description" content="ИИ Пресс-секретарь — сервис, который создаёт контент-план, генерирует посты и картинки для вашего бизнеса и публикует их в Telegram.">
|
<meta name="description" content="ИИ Пресс-секретарь — сервис, который создаёт контент-план, генерирует посты и картинки для вашего бизнеса и публикует их в Telegram.">
|
||||||
|
<script>
|
||||||
|
// Тёмная тема по умолчанию; светлая — по выбору пользователя (сохраняется в localStorage)
|
||||||
|
(function () {
|
||||||
|
try {
|
||||||
|
var saved = localStorage.getItem('theme');
|
||||||
|
if (saved === 'light') {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
/* Тёмная тема по умолчанию */
|
||||||
:root {
|
:root {
|
||||||
|
--bg: #0f172a;
|
||||||
|
--surface: #1e293b;
|
||||||
|
--surface-2: #273449;
|
||||||
|
--text: #e2e8f0;
|
||||||
|
--text-muted: #94a3b8;
|
||||||
|
--accent: #60a5fa;
|
||||||
|
--accent-hover: #93c5fd;
|
||||||
|
--accent-soft: #1e3a5f;
|
||||||
|
--border: #334155;
|
||||||
|
--border-strong: #475569;
|
||||||
|
}
|
||||||
|
/* Светлая тема (по выбору пользователя) */
|
||||||
|
:root[data-theme="light"] {
|
||||||
--bg: #f4f5f7;
|
--bg: #f4f5f7;
|
||||||
--surface: #ffffff;
|
--surface: #ffffff;
|
||||||
|
--surface-2: #f1f3f6;
|
||||||
--text: #1f2328;
|
--text: #1f2328;
|
||||||
--text-muted: #4b5563;
|
--text-muted: #4b5563;
|
||||||
--accent: #2563eb;
|
--accent: #2563eb;
|
||||||
--accent-hover: #1d4ed8;
|
--accent-hover: #1d4ed8;
|
||||||
--accent-soft: #eef2ff;
|
--accent-soft: #eef2ff;
|
||||||
--border: #e2e5ea;
|
--border: #e2e5ea;
|
||||||
|
--border-strong: #d1d5db;
|
||||||
}
|
}
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
body {
|
body {
|
||||||
@@ -190,6 +217,7 @@
|
|||||||
<span>ИИ Пресс-секретарь</span>
|
<span>ИИ Пресс-секретарь</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
|
<button type="button" class="btn btn-ghost theme-toggle" data-theme-toggle aria-label="Переключить тему">🌙</button>
|
||||||
<a class="btn btn-ghost" href="/login">Войти</a>
|
<a class="btn btn-ghost" href="/login">Войти</a>
|
||||||
<a class="btn btn-primary" href="/register">Регистрация</a>
|
<a class="btn btn-primary" href="/register">Регистрация</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -275,5 +303,31 @@
|
|||||||
© 2026 ИИ Пресс-секретарь · <a href="/login">Вход</a> · <a href="/register">Регистрация</a> · <a href="/dashboard">Кабинет</a>
|
© 2026 ИИ Пресс-секретарь · <a href="/login">Вход</a> · <a href="/register">Регистрация</a> · <a href="/dashboard">Кабинет</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
function isDark() {
|
||||||
|
return document.documentElement.getAttribute('data-theme') !== 'light';
|
||||||
|
}
|
||||||
|
function setIcon(btn) {
|
||||||
|
if (btn) btn.textContent = isDark() ? '\u2600\uFE0F' : '\uD83C\uDF19';
|
||||||
|
}
|
||||||
|
document.addEventListener('click', function (e) {
|
||||||
|
var btn = e.target.closest('[data-theme-toggle]');
|
||||||
|
if (!btn) return;
|
||||||
|
if (isDark()) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'light');
|
||||||
|
try { localStorage.setItem('theme', 'light'); } catch (err) {}
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-theme');
|
||||||
|
try { localStorage.setItem('theme', 'dark'); } catch (err) {}
|
||||||
|
}
|
||||||
|
setIcon(btn);
|
||||||
|
});
|
||||||
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
setIcon(document.querySelector('[data-theme-toggle]'));
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in new issue
Block a user