feat: add landing page with service description and auth links
This commit is contained in:
apuc committed
1 parent
3d5915d930
commit
13db11e5a1
2 files changed
+281
-3
No files matched your search
@@ -155,9 +155,8 @@ def health():
|
|||||||
|
|
||||||
@app.get("/")
|
@app.get("/")
|
||||||
def root(request: Request):
|
def root(request: Request):
|
||||||
if request.session.get("user_id"):
|
# Посадочная страница с описанием сервиса
|
||||||
return RedirectResponse("/dashboard", status_code=303)
|
return render(request, "landing.html")
|
||||||
return RedirectResponse("/login", status_code=303)
|
|
||||||
|
|
||||||
|
|
||||||
# === РЕГИСТРАЦИЯ ===
|
# === РЕГИСТРАЦИЯ ===
|
||||||
|
|||||||
@@ -0,0 +1,279 @@
|
|||||||
|
<!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.">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #f4f5f7;
|
||||||
|
--surface: #ffffff;
|
||||||
|
--text: #1f2328;
|
||||||
|
--text-muted: #4b5563;
|
||||||
|
--accent: #2563eb;
|
||||||
|
--accent-hover: #1d4ed8;
|
||||||
|
--accent-soft: #eef2ff;
|
||||||
|
--border: #e2e5ea;
|
||||||
|
}
|
||||||
|
* { 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; }
|
||||||
|
.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; }
|
||||||
|
}
|
||||||
|
</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">
|
||||||
|
<a class="btn btn-ghost" href="/login">Войти</a>
|
||||||
|
<a class="btn btn-primary" href="/register">Регистрация</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in new issue
Block a user