264 lines
13 KiB
HTML
264 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Дизайн: Стандартный дизайн. Сохраняй все пять CSS; подробности в design.md. -->
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Страница в кармане — помощник ведение Instagram</title>
|
||
<link rel="stylesheet" href="design-system/kt-ai-fonts.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-tokens.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-components.css">
|
||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||
<link rel="stylesheet" href="design-system/vibe-theme.css">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.vibe-highlight { font-weight: 700; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<strong>Страница в кармане</strong>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#tools">Инструменты</a>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#rules">Правила</a>
|
||
<a class="kt-ai-btn" data-variant="primary" href="#start">Начать</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1>Страница в кармане:<br><span class="vibe-highlight">ведение Instagram без хаоса</span></h1>
|
||
<p class="kt-ai-hero-sub">Чек-листы, идеи контента и правила в одном месте — чтобы не думать «что сегодня выкладывать», а просто делать.</p>
|
||
<div class="kt-ai-hero-actions">
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#start">Собрать свой набор</a>
|
||
<a class="kt-ai-btn" data-size="lg" href="#tools">Смотреть инструменты</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="start" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Соберите свой набор за 30 секунд</h2>
|
||
<p>Выберите, что вы ведёте и что важнее всего — внизу появятся подходящие чек-листы и идеи. Всё сохраняется в браузере.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-field">
|
||
<label for="goal">Цель страницы</label>
|
||
<select id="goal" class="kt-ai-select">
|
||
<option value="">Выберите цель</option>
|
||
<option value="clients">Привлечь клиентов</option>
|
||
<option value="followers">Увеличить аудиторию</option>
|
||
<option value="sales">Продавать в директ</option>
|
||
<option value="brand">Развить бренд</option>
|
||
<option value="fun">Поделиться хобби</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-field">
|
||
<label for="niche">Ниша</label>
|
||
<select id="niche" class="kt-ai-select">
|
||
<option value="">Выберите нишу</option>
|
||
<option value="blogger">Личный бренд / блогер</option>
|
||
<option value="shop">Магазин / услуги</option>
|
||
<option value="food">Еда и кафе</option>
|
||
<option value="fitness">Фитнес и спорт</option>
|
||
<option value="travel">Путешествия</option>
|
||
<option value="education">Образование / курсы</option>
|
||
<option value="other">Другое</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-card">
|
||
<div class="kt-ai-field">
|
||
<label for="frequency">Как часто публикуете</label>
|
||
<select id="frequency" class="kt-ai-select">
|
||
<option value="">Выберите частоту</option>
|
||
<option value="daily">Каждый день</option>
|
||
<option value="3">3 раза в неделю</option>
|
||
<option value="2">2 раза в неделю</option>
|
||
<option value="weekly">1 раз в неделю</option>
|
||
<option value="rare">Вспышками</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="kt-ai-card" id="start-result" hidden style="margin-top:var(--kt-ai-space-7)">
|
||
<h3 style="margin:0 0 var(--kt-ai-space-3)">Ваш стартовый совет</h3>
|
||
<p id="start-advice" class="kt-ai-hero-sub" style="margin:0 0 var(--kt-ai-space-4)"></p>
|
||
<div class="kt-ai-prog" aria-hidden="true"><div class="kt-ai-prog-bar" id="start-prog-bar"></div></div>
|
||
<div id="start-cta-row" class="kt-ai-hero-actions" style="justify-content:flex-start;margin-top:var(--kt-ai-space-5)"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="tools" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Инструменты в одном месте</h2>
|
||
<p>Всё, что обычно разбросано по заметкам: чек-лист перед публикацией, банк идей, правила оформления.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="3" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<h3>Чек-лист перед публикацией</h3>
|
||
<p>9 пунктов: от хештегов до времени поста. Отмечайте — прогресс сохраняется.</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="sm" href="#checklist" style="margin-top:var(--kt-ai-space-4)">Открыть</a>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>24 идеи постов</h3>
|
||
<p>Готовые темы под вашу нишу — чтобы не думать, что выкладывать сегодня.</p>
|
||
<a class="kt-ai-btn" data-variant="ghost" data-size="sm" href="#ideas" style="margin-top:var(--kt-ai-space-4)">Взять идею</a>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Правила оформления</h3>
|
||
<p>Кавер, подпись, хештеги, сторис — как оформить, чтобы выглядело профессионально.</p>
|
||
<a class="kt-ai-btn" data-variant="ghost" data-size="sm" href="#rules" style="margin-top:var(--kt-ai-space-4)">Смотреть</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="checklist" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Чек-лист перед публикацией</h2>
|
||
<p id="checklist-progress">Отмечайте пункты — прогресс сохраняется в этом браузере.</p>
|
||
</div>
|
||
<div class="kt-ai-card" style="margin-top:var(--kt-ai-space-7)">
|
||
<ul id="checklist-list" class="kt-ai-checklist" style="list-style:none;margin:0;padding:0"></ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="ideas" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>24 идеи постов</h2>
|
||
<p>Нажмите на карточку — идея зачтётся, и вы её больше не увидите до сброса. Идеи подбираются под нишу.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" id="ideas-grid" style="margin-top:var(--kt-ai-space-9)"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="rules" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Правила оформления</h2>
|
||
<p>Короткие правила, которые делают страницу аккуратной и профессиональной.</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="2" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<h3>Первое впечатление</h3>
|
||
<p>Аватар, ник и био читают за 5 секунд. Ник — короткий и понятный, био — одна фраза: кто вы и какую пользу несёте. Ссылка — рабочая.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Кавер поста</h3>
|
||
<p>Один стиль на обложки: одинаковый шрифт, одна цветовая пара. Из ленты за 3 секунды должно считаться, о чём пост.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Подпись</h3>
|
||
<p>Структура: крючок в первой строке → суть → вопрос или призыв в конце. Абзацы — короткие, без «простыней» текста.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Хештеги</h3>
|
||
<p>5–15 по теме, 3 уровня: крупные, средние, узкие. Один и тот же список не используйте дважды подряд.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Сторис</h3>
|
||
<p>Сторис — про жизнь, пост — про ценность. Опросы, вопросы, «до/после» — что угодно, чтобы диалог шёл.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Ответы на комментарии</h3>
|
||
<p>Первый час — золотое время. Отвечайте на каждый комментарий в первые 60 минут: алгоритм и люди это любят.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" class="kt-ai-section" data-divider="true">
|
||
<div class="kt-ai-wrap">
|
||
<div class="kt-ai-section-head">
|
||
<h2>Частые вопросы</h2>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="1" style="margin-top:var(--kt-ai-space-9)">
|
||
<article class="kt-ai-tile">
|
||
<h3>Это бесплатно?</h3>
|
||
<p>Да. Сайт работает в браузере, ничего устанавливать не нужно. Прогресс чек-листа и выбранные идеи сохраняются в вашем браузере.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Для чего это, если есть приложения для планирования?</h3>
|
||
<p>Для тех, кто ведёт страницу сам и не хочет платить за инструменты. Здесь — только рабочие списки и правила, без аккаунтов и подписок.</p>
|
||
</article>
|
||
<article class="kt-ai-tile">
|
||
<h3>Обновятся ли идеи постов?</h3>
|
||
<p>В первой версии — фиксированный список из 24 идей. Если нужно больше — напишите, что добавить, и список расширим.</p>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="cta" class="kt-ai-cta">
|
||
<div class="kt-ai-wrap">
|
||
<h2>Ведите страницу спокойно</h2>
|
||
<p>Сохраните страницу в закладки — чек-лист и идеи всегда под рукой, прогресс не потеряется.</p>
|
||
<a class="kt-ai-btn" data-variant="primary" data-size="lg" href="#start">Начать заново</a>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot">
|
||
<span>© 2026 Страница в кармане</span>
|
||
<span class="kt-ai-spacer"></span>
|
||
<span>Помощник ведения Instagram</span>
|
||
</footer>
|
||
|
||
<style>
|
||
.kt-ai-checklist li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
padding: 12px 4px;
|
||
border-bottom: 1px solid var(--kt-ai-border);
|
||
font-size: 15px;
|
||
line-height: 1.5;
|
||
cursor: pointer;
|
||
}
|
||
.kt-ai-checklist li:last-child { border-bottom: none; }
|
||
.kt-ai-checklist input {
|
||
width: 18px; height: 18px;
|
||
margin-top: 2px;
|
||
accent-color: var(--kt-ai-primary);
|
||
cursor: pointer;
|
||
flex-shrink: 0;
|
||
}
|
||
.kt-ai-checklist li.done span {
|
||
text-decoration: line-through;
|
||
color: var(--kt-ai-fg-muted);
|
||
}
|
||
.kt-ai-checklist li.done { opacity: .75; }
|
||
.kt-ai-prog {
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: var(--kt-ai-border);
|
||
overflow: hidden;
|
||
margin-top: var(--kt-ai-space-5);
|
||
}
|
||
.kt-ai-prog-bar {
|
||
height: 100%;
|
||
width: 0%;
|
||
background: var(--kt-ai-primary);
|
||
border-radius: 999px;
|
||
transition: width .25s ease;
|
||
}
|
||
.idea-card { cursor: pointer; transition: border-color .15s ease; }
|
||
.idea-card:hover { border-color: var(--kt-ai-primary); }
|
||
.idea-card.taken { opacity: .45; text-decoration: line-through; }
|
||
</style>
|
||
|
||
<script src="script.js" defer></script>
|
||
</body>
|
||
</html>
|