445 lines
18 KiB
HTML
445 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ИИ Пресс-секретарь — умный контент для вашего бизнеса</title>
|
|
<meta name="description" content="ИИ Пресс-секретарь — сервис, который создаёт контент-план, генерирует посты и картинки для вашего бизнеса и публикует их в Telegram.">
|
|
|
|
<!-- OpenGraph -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:site_name" content="ИИ Пресс-секретарь">
|
|
<meta property="og:title" content="ИИ Пресс-секретарь — умный контент для вашего бизнеса">
|
|
<meta property="og:description" content="Создавайте контент-план, генерируйте посты и картинки для своего бизнеса и публикуйте их в Telegram — всё в одном сервисе.">
|
|
<meta property="og:url" content="https://press.my-dpr.ru/">
|
|
<meta property="og:image" content="https://press.my-dpr.ru/static/og-image.png">
|
|
<meta property="og:image:width" content="1536">
|
|
<meta property="og:image:height" content="1024">
|
|
<meta property="og:image:alt" content="ИИ Пресс-секретарь — сервис для генерации контента и публикации в Telegram">
|
|
<meta property="og:locale" content="ru_RU">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="ИИ Пресс-секретарь — умный контент для вашего бизнеса">
|
|
<meta name="twitter:description" content="Создавайте контент-план, генерируйте посты и картинки для своего бизнеса и публикуйте их в Telegram.">
|
|
<meta name="twitter:image" content="https://press.my-dpr.ru/static/og-image.png">
|
|
|
|
<script>
|
|
// Тёмная тема по умолчанию; светлая — по выбору пользователя (сохраняется в localStorage)
|
|
(function () {
|
|
try {
|
|
var saved = localStorage.getItem('theme');
|
|
if (saved === 'light') {
|
|
document.documentElement.setAttribute('data-theme', 'light');
|
|
}
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
<style>
|
|
/* Тёмная тема по умолчанию */
|
|
: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;
|
|
--surface: #ffffff;
|
|
--surface-2: #f1f3f6;
|
|
--text: #1f2328;
|
|
--text-muted: #4b5563;
|
|
--accent: #2563eb;
|
|
--accent-hover: #1d4ed8;
|
|
--accent-soft: #eef2ff;
|
|
--border: #e2e5ea;
|
|
--border-strong: #d1d5db;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.6;
|
|
}
|
|
.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
|
|
|
|
/* Header */
|
|
.header {
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 16px 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
.header-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
.brand-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
}
|
|
.header-actions { display: flex; align-items: center; gap: 12px; }
|
|
|
|
/* Бургер-меню (скрыто на десктопе) */
|
|
.burger {
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: transparent;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
}
|
|
.burger-line {
|
|
display: block;
|
|
width: 20px;
|
|
height: 2px;
|
|
background: var(--text);
|
|
border-radius: 2px;
|
|
transition: transform .2s ease, opacity .2s ease;
|
|
}
|
|
.burger.open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
|
.burger.open .burger-line:nth-child(2) { opacity: 0; }
|
|
.burger.open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
|
|
|
.mobile-menu {
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 12px 24px 16px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.mobile-menu.open { display: flex; }
|
|
.mobile-menu-link { text-align: center; }
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
border: none;
|
|
transition: background .15s ease;
|
|
}
|
|
.btn-primary { background: var(--accent); color: #fff; }
|
|
.btn-primary:hover { background: var(--accent-hover); }
|
|
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
|
|
.btn-ghost:hover { background: var(--accent-soft); }
|
|
|
|
/* Hero */
|
|
.hero {
|
|
padding: 80px 0 64px;
|
|
text-align: center;
|
|
}
|
|
.hero h1 {
|
|
font-size: 44px;
|
|
line-height: 1.15;
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero h1 span { color: var(--accent); }
|
|
.hero p {
|
|
font-size: 19px;
|
|
color: var(--text-muted);
|
|
max-width: 640px;
|
|
margin: 0 auto 32px;
|
|
}
|
|
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
|
|
|
|
/* Features */
|
|
.features {
|
|
padding: 40px 0 72px;
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
.feature {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 28px 24px;
|
|
}
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
background: var(--accent-soft);
|
|
color: var(--accent);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.feature h3 { font-size: 18px; margin-bottom: 8px; }
|
|
.feature p { color: var(--text-muted); font-size: 15px; }
|
|
|
|
/* How it works */
|
|
.how {
|
|
padding: 56px 0;
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.how h2 { text-align: center; font-size: 30px; margin-bottom: 40px; }
|
|
.steps {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 24px;
|
|
}
|
|
.step { text-align: center; padding: 0 12px; }
|
|
.step-num {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 14px;
|
|
}
|
|
.step h4 { margin-bottom: 6px; }
|
|
.step p { color: var(--text-muted); font-size: 15px; }
|
|
|
|
/* CTA */
|
|
.cta {
|
|
padding: 72px 0;
|
|
text-align: center;
|
|
}
|
|
.cta h2 { font-size: 30px; margin-bottom: 14px; }
|
|
.cta p { color: var(--text-muted); font-size: 17px; margin-bottom: 28px; }
|
|
|
|
/* Footer */
|
|
.footer {
|
|
padding: 24px 0;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--surface);
|
|
text-align: center;
|
|
color: var(--text-muted);
|
|
font-size: 14px;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.hero { padding: 48px 0 40px; }
|
|
.hero h1 { font-size: 32px; }
|
|
.hero p { font-size: 17px; }
|
|
|
|
/* Адаптивный хедер для мобильных: бургер-меню */
|
|
.header { padding: 12px 0; }
|
|
.header-inner { gap: 8px; }
|
|
.brand { gap: 8px; font-size: 16px; }
|
|
.brand-icon { width: 28px; height: 28px; font-size: 16px; }
|
|
.header-actions { gap: 8px; }
|
|
.theme-toggle { padding: 8px 10px; }
|
|
|
|
/* Скрываем кнопки "Войти" и "Регистрация" из хедера, показываем бургер */
|
|
.header-login, .header-register { display: none; }
|
|
.burger { display: flex; }
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
/* На очень узких экранах скрываем текст бренда */
|
|
.brand span:not(.brand-icon) { display: none; }
|
|
.brand { gap: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="container header-inner">
|
|
<a class="brand" href="/">
|
|
<span class="brand-icon">🤖</span>
|
|
<span>ИИ Пресс-секретарь</span>
|
|
</a>
|
|
<div class="header-actions">
|
|
<button type="button" class="btn btn-ghost theme-toggle" data-theme-toggle aria-label="Переключить тему">🌙</button>
|
|
<a class="btn btn-ghost header-login" href="/login"><span>Войти</span></a>
|
|
<a class="btn btn-primary header-register" href="/register">Регистрация</a>
|
|
<button type="button" class="burger" id="burgerBtn" aria-label="Открыть меню" aria-expanded="false">
|
|
<span class="burger-line"></span>
|
|
<span class="burger-line"></span>
|
|
<span class="burger-line"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<nav class="mobile-menu" id="mobileMenu">
|
|
<a class="btn btn-ghost mobile-menu-link" href="/login"><span>Войти</span></a>
|
|
<a class="btn btn-primary mobile-menu-link" href="/register">Регистрация</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>Ваш личный <span>ИИ Пресс-секретарь</span></h1>
|
|
<p>Создавайте контент-план, генерируйте посты и картинки для своего бизнеса и публикуйте их в Telegram — всё в одном сервисе.</p>
|
|
<div class="hero-actions">
|
|
<a class="btn btn-primary" href="/register">Начать бесплатно</a>
|
|
<a class="btn btn-ghost" href="/login">Войти в кабинет</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<div class="container">
|
|
<div class="features-grid">
|
|
<div class="feature">
|
|
<div class="feature-icon">✍️</div>
|
|
<h3>Генерация постов</h3>
|
|
<p>ИИ пишет готовые тексты для вашего бизнеса с учётом вашего медиа-образа и стиля.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">🎨</div>
|
|
<h3>Генерация картинок</h3>
|
|
<p>Создавайте иллюстрации к постам автоматически — без дизайнера и фотостока.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">📅</div>
|
|
<h3>Контент-план</h3>
|
|
<p>Планируйте публикации на неделю вперёд и следите за выполнением плана.</p>
|
|
</div>
|
|
<div class="feature">
|
|
<div class="feature-icon">📣</div>
|
|
<h3>Публикация в Telegram</h3>
|
|
<p>Публикуйте посты в свои каналы прямо из личного кабинета.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="how">
|
|
<div class="container">
|
|
<h2>Как это работает</h2>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-num">1</div>
|
|
<h4>Зарегистрируйтесь</h4>
|
|
<p>Создайте аккаунт в личном кабинете за пару минут.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<h4>Опишите медиа-образ</h4>
|
|
<p>Расскажите о своём бизнесе — ИИ подстроится под ваш стиль.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<h4>Генерируйте контент</h4>
|
|
<p>Создавайте посты, картинки и контент-план автоматически.</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">4</div>
|
|
<h4>Публикуйте</h4>
|
|
<p>Отправляйте готовые посты в свои Telegram-каналы.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta">
|
|
<div class="container">
|
|
<h2>Готовы начать?</h2>
|
|
<p>Зарегистрируйтесь и получите доступ к личному кабинету.</p>
|
|
<a class="btn btn-primary" href="/register">Зарегистрироваться</a>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="container">
|
|
© 2026 ИИ Пресс-секретарь · <a href="/login">Вход</a> · <a href="/register">Регистрация</a> · <a href="/dashboard">Кабинет</a>
|
|
</div>
|
|
</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]'));
|
|
});
|
|
|
|
// Бургер-меню
|
|
var burgerBtn = document.getElementById('burgerBtn');
|
|
var mobileMenu = document.getElementById('mobileMenu');
|
|
if (burgerBtn && mobileMenu) {
|
|
function toggleMenu(force) {
|
|
var isOpen = typeof force === 'boolean' ? force : !mobileMenu.classList.contains('open');
|
|
mobileMenu.classList.toggle('open', isOpen);
|
|
burgerBtn.classList.toggle('open', isOpen);
|
|
burgerBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
|
burgerBtn.setAttribute('aria-label', isOpen ? 'Закрыть меню' : 'Открыть меню');
|
|
}
|
|
burgerBtn.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
toggleMenu();
|
|
});
|
|
// Закрытие при клике по ссылке в меню
|
|
mobileMenu.addEventListener('click', function (e) {
|
|
if (e.target.closest('a')) toggleMenu(false);
|
|
});
|
|
// Закрытие при клике вне меню
|
|
document.addEventListener('click', function (e) {
|
|
if (mobileMenu.classList.contains('open') &&
|
|
!e.target.closest('.header-inner') &&
|
|
!e.target.closest('.mobile-menu')) {
|
|
toggleMenu(false);
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|