512 lines
27 KiB
HTML
512 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru" data-theme="light">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Digital Bridge — Генератор AI-сервисов</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">
|
||
<style>
|
||
a.kt-ai-btn { text-decoration: none; }
|
||
.step { display: none; }
|
||
.step.active { display: block; }
|
||
.kt-ai-hero {
|
||
padding: var(--kt-ai-space-16) 0 var(--kt-ai-space-12);
|
||
background: linear-gradient(180deg, var(--kt-ai-bg-soft) 0%, var(--kt-ai-bg) 100%);
|
||
}
|
||
.role-poster {
|
||
position: relative;
|
||
background: white;
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-2xl);
|
||
padding: var(--kt-ai-space-8);
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
overflow: hidden;
|
||
min-height: 280px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
||
}
|
||
.role-poster:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.1);
|
||
border-color: var(--role-accent, var(--kt-ai-primary));
|
||
}
|
||
.role-poster.selected {
|
||
outline: 2px solid var(--role-accent, var(--kt-ai-primary));
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
||
}
|
||
.role-poster::before {
|
||
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
|
||
background: var(--role-accent, var(--kt-ai-primary));
|
||
}
|
||
.role-icon {
|
||
width: 64px; height: 64px; border-radius: var(--kt-ai-radius-xl);
|
||
background: var(--role-accent, var(--kt-ai-primary));
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: var(--kt-ai-space-5);
|
||
flex-shrink: 0;
|
||
}
|
||
.role-icon svg { width: 32px; height: 32px; color: white; flex-shrink: 0; }
|
||
.role-title { font-size: var(--kt-ai-text-xl); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); margin-bottom: var(--kt-ai-space-3); }
|
||
.role-desc { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); line-height: 1.6; flex-grow: 1; }
|
||
.product-card { cursor: pointer; transition: all 0.3s ease; background: white; border: 1px solid var(--kt-ai-border); }
|
||
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
|
||
.product-card.selected { outline: 2px solid var(--kt-ai-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
|
||
.product-icon {
|
||
width: 48px; height: 48px; border-radius: var(--kt-ai-radius-lg);
|
||
background: var(--kt-ai-primary);
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-bottom: var(--kt-ai-space-4);
|
||
}
|
||
.product-icon svg { width: 24px; height: 24px; color: white; }
|
||
.prompt-output {
|
||
background: var(--kt-ai-bg-soft); padding: var(--kt-ai-space-6); border-radius: var(--kt-ai-radius-xl);
|
||
font-family: var(--kt-ai-font-mono); font-size: var(--kt-ai-text-sm); white-space: pre-wrap;
|
||
border: 1px solid var(--kt-ai-border); max-height: 400px; overflow-y: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="kt-ai-pagehead">
|
||
<div class="kt-ai-wrap kt-ai-pagehead-in">
|
||
<a class="kt-ai-brand" href="#"><img src="design-system/brand/kt-ai-logo.png" alt="Vibe42" height="22"> <span>Digital Bridge</span></a>
|
||
<span class="kt-ai-spacer"></span>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="#" onclick="resetWizard()">Начать заново</a>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="kt-ai-hero" data-align="center">
|
||
<div class="kt-ai-wrap">
|
||
<h1 style="max-width: 720px; margin: 0 auto">Создай свой AI-сервис за 60 минут</h1>
|
||
<p class="kt-ai-hero-sub" style="max-width: 560px; margin: var(--kt-ai-space-4) auto 0">Выбери роль, настрой продукт и получи готовый промт для Vibe AI</p>
|
||
</div>
|
||
</section>
|
||
|
||
<main class="kt-ai-wrap" style="padding: var(--kt-ai-space-12) 0">
|
||
|
||
<div id="step1" class="step active">
|
||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
|
||
<h2>Кто вы?</h2>
|
||
<p>Выберите роль — мы подберем подходящие сервисы</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="4" style="gap: var(--kt-ai-space-6)">
|
||
<div class="role-poster" data-role="entrepreneur" style="--role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#rocket"></use></svg></div>
|
||
<div class="role-title">Предприниматель</div>
|
||
<div class="role-desc">Создаю бизнес-инструменты для роста и автоматизации</div>
|
||
</div>
|
||
<div class="role-poster" data-role="it" style="--role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#tool"></use></svg></div>
|
||
<div class="role-title">IT-специалист</div>
|
||
<div class="role-desc">Разрабатываю решения для коллег и клиентов</div>
|
||
</div>
|
||
<div class="role-poster" data-role="hr" style="--role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#users"></use></svg></div>
|
||
<div class="role-title">HR</div>
|
||
<div class="role-desc">Подбираю таланты и развиваю команду</div>
|
||
</div>
|
||
<div class="role-poster" data-role="marketing" style="--role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#megaphone"></use></svg></div>
|
||
<div class="role-title">Маркетолог</div>
|
||
<div class="role-desc">Продвигаю продукты и создаю контент</div>
|
||
</div>
|
||
<div class="role-poster" data-role="student" style="--role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#book"></use></svg></div>
|
||
<div class="role-title">Студент</div>
|
||
<div class="role-desc">Учусь и создаю проекты для портфолио</div>
|
||
</div>
|
||
<div class="role-poster" data-role="creator" style="--role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#sparkles"></use></svg></div>
|
||
<div class="role-title">Creator</div>
|
||
<div class="role-desc">Создаю контент для соцсетей и блогов</div>
|
||
</div>
|
||
<div class="role-poster" data-role="beginner" style="grid-column: span 2; --role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#lightbulb"></use></svg></div>
|
||
<div class="role-title">Просто хочу попробовать</div>
|
||
<div class="role-desc">Любопытно создать свой первый AI-сервис</div>
|
||
</div>
|
||
<div class="role-poster" data-role="custom" style="--role-accent: linear-gradient(135deg, var(--kt-ai-primary), var(--kt-ai-primary-dark, #0059b3))">
|
||
<div class="role-icon"><svg class="kt-icon"><use href="#settings"></use></svg></div>
|
||
<div class="role-title">Своя идея</div>
|
||
<div class="role-desc">Хочу создать уникальный продукт с нуля</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="step2" class="step">
|
||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
|
||
<h2>Выберите сервис</h2>
|
||
<p>8 готовых AI-решений под вашу задачу</p>
|
||
</div>
|
||
<div class="kt-ai-grid" data-cols="2" style="gap: var(--kt-ai-space-6)">
|
||
<article class="kt-ai-card product-card" data-product="trip">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#rocket"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">AI Trip Planner</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Персональный маршрут путешествия по бюджету, интересам и типу отдыха</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-product="budget">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#chart"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">Smart Budget</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Анализ бюджета: доходы, расходы, прогноз и рекомендации</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-product="learning">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#book"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">AI Learning Coach</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">План обучения: язык, программирование, любой навык</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-product="hr">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#users"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">HR Candidate Matcher</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Сопоставление резюме и вакансии: % соответствия, риски, вопросы</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-product="content">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#sparkles"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">AI Content Studio</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Контент-план, идеи, Reels, посты для соцсетей</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-product="idea">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#lightbulb"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">Business Idea Analyzer</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Анализ бизнес-идеи: аудитория, риски, монетизация</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-product="event">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#calendar"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">Event Planner</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Программа мероприятия, расписание, маршрут участника</p>
|
||
</div>
|
||
</article>
|
||
<article class="kt-ai-card product-card" data-product="task">
|
||
<div class="kt-ai-card-body">
|
||
<div class="product-icon"><svg class="kt-icon"><use href="#checklist"></use></svg></div>
|
||
<h3 style="margin-bottom: var(--kt-ai-space-2)">Smart Task Planner</h3>
|
||
<p style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Приоритизация задач, планирование расписания</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div style="text-align: center; margin-top: var(--kt-ai-space-8)">
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="goToStep(1)">← Назад</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="step3" class="step">
|
||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
|
||
<h2 id="productTitle">Настройка сервиса</h2>
|
||
<p>Ответьте на 4 вопроса для персонализации</p>
|
||
</div>
|
||
<div class="kt-ai-card" style="max-width: 640px; margin: 0 auto">
|
||
<div class="kt-ai-card-body">
|
||
<div class="kt-ai-field">
|
||
<label>Для кого приложение? (целевая аудитория)</label>
|
||
<input class="kt-ai-input" id="q1" placeholder="Например: для туристов-одиночек 25-35 лет">
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top: var(--kt-ai-space-6)">
|
||
<label>Что важнее всего в этом сервисе?</label>
|
||
<input class="kt-ai-input" id="q2" placeholder="Например: скорость подбора вариантов">
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top: var(--kt-ai-space-6)">
|
||
<label>Какой стиль интерфейса предпочитаете?</label>
|
||
<select class="kt-ai-select" id="q3">
|
||
<option>Минимализм (светлый)</option>
|
||
<option>Тёмная тема</option>
|
||
<option>Яркий и современный</option>
|
||
<option>Строгий деловой</option>
|
||
</select>
|
||
</div>
|
||
<div class="kt-ai-field" style="margin-top: var(--kt-ai-space-6)">
|
||
<label>Что нужно персонализировать? (конкретная функция)</label>
|
||
<input class="kt-ai-input" id="q4" placeholder="Например: добавить фильтр по бюджету">
|
||
</div>
|
||
<div style="margin-top: var(--kt-ai-space-8); display: flex; gap: var(--kt-ai-space-4)">
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="goToStep(2)">← Назад</button>
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="generatePrompt()">Создать промт →</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="step4" class="step">
|
||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
|
||
<h2>Ваш промт готов!</h2>
|
||
<p>Скопируйте или откройте в Vibe AI</p>
|
||
</div>
|
||
<div class="kt-ai-card" style="max-width: 800px; margin: 0 auto">
|
||
<div class="kt-ai-card-body">
|
||
<div class="prompt-output" id="promptOutput"></div>
|
||
<div style="margin-top: var(--kt-ai-space-6); display: flex; gap: var(--kt-ai-space-4); flex-wrap: wrap">
|
||
<button class="kt-ai-btn" data-variant="primary" onclick="copyPrompt()">
|
||
<svg class="kt-icon" style="margin-right: var(--kt-ai-space-2)"><use href="#copy"></use></svg>
|
||
Копировать промт
|
||
</button>
|
||
<a class="kt-ai-btn" data-variant="ghost" href="https://code.vibe42.kz" target="_blank">
|
||
<svg class="kt-icon" style="margin-right: var(--kt-ai-space-2)"><use href="#external"></use></svg>
|
||
Открыть Vibe AI
|
||
</a>
|
||
<button class="kt-ai-btn" data-variant="ghost" onclick="goToStep(3)">← Назад</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top: var(--kt-ai-space-12); padding: var(--kt-ai-space-8) 0; border-top: 1px solid var(--kt-ai-divider)">
|
||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||
<span style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">© 2026 Vibe42 × Digital Bridge</span>
|
||
<span style="color: var(--kt-ai-fg-muted); font-size: var(--kt-ai-text-sm)">Создай свой AI-сервис за 60 минут</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="design-system/icons/kt-ai-icons.js"></script>
|
||
<script>
|
||
let selectedRole = null;
|
||
let selectedProduct = null;
|
||
let selectedProductTitle = null;
|
||
|
||
const productPrompts = {
|
||
trip: {
|
||
title: 'AI Trip Planner',
|
||
base: `Создай веб-приложение "AI Trip Planner" — персональный планировщик путешествий.
|
||
|
||
Функционал:
|
||
- Форма ввода: бюджет (тенге), количество дней, тип отдыха (пляжный/активный/культурный/природа), интересы (теги)
|
||
- Генерация маршрута по дням с активностями, временем, стоимостью
|
||
- Карта с точками (используй статические координаты или заглушки)
|
||
- Экспорт маршрута в PDF/текст
|
||
- Сохранение в localStorage
|
||
|
||
AI-фичи:
|
||
- Рекомендации мест на основе интересов
|
||
- Оптимизация бюджета
|
||
- Советы по сезону и погоде
|
||
|
||
Дизайн: минималистичный, с крупными карточками локаций, прогресс-бар бюджета.
|
||
|
||
ВАЖНО: Не использовать внешние API (Google Maps, погодные). Все данные — моковые или генерируемые AI. Публикация в локальном git как веб-страница.`
|
||
},
|
||
budget: {
|
||
title: 'Smart Budget',
|
||
base: `Создай веб-приложение "Smart Budget" — умный анализ личных финансов.
|
||
|
||
Функционал:
|
||
- Ввод: ежемесячный доход, постоянные расходы (аренда, коммуналка, еда), переменные расходы, финансовая цель
|
||
- Визуализация: круговая диаграмма расходов, прогноз накоплений
|
||
- Таблица расходов по категориям
|
||
- Рекомендации по оптимизации
|
||
|
||
AI-фичи:
|
||
- Анализ паттернов трат
|
||
- Персональные советы по экономии
|
||
- Прогноз достижения цели
|
||
|
||
Дизайн: светлый, с акцентами на цифрах, dashboard-стиль.
|
||
|
||
ВАЖНО: Без подключения банковских API. Все расчёты локально. Публикация в локальном git.`
|
||
},
|
||
learning: {
|
||
title: 'AI Learning Coach',
|
||
base: `Создай веб-приложение "AI Learning Coach" — персональный тренер по обучению.
|
||
|
||
Функционал:
|
||
- Выбор навыка (язык/программирование/дизайн/другое)
|
||
- Ввод: текущий уровень, цель, часов в неделю, дедлайн
|
||
- Генерация пошагового плана на недели
|
||
- Трекер прогресса
|
||
- Библиотека ресурсов (ссылки-заглушки)
|
||
|
||
AI-фичи:
|
||
- Адаптация плана под прогресс
|
||
- Генерация практических заданий
|
||
- Мотивационные сообщения
|
||
|
||
Дизайн: дружелюбный, с прогресс-барами, чек-листами.
|
||
|
||
ВАЖНО: Без внешних LMS. Все данные локально в localStorage. Публикация в git.`
|
||
},
|
||
hr: {
|
||
title: 'HR Candidate Matcher',
|
||
base: `Создай веб-приложение "HR Candidate Matcher" — анализ соответствия кандидата вакансии.
|
||
|
||
Функционал:
|
||
- Два текстовых поля: описание вакансии, резюме кандидата
|
||
- Расчёт % соответствия
|
||
- Список сильных сторон
|
||
- Список рисков и слабых мест
|
||
- Генерация вопросов для интервью
|
||
|
||
AI-фичи:
|
||
- Выделение ключевых навыков из текста
|
||
- Сравнение требований и опыта
|
||
- Рекомендации по развитию кандидата
|
||
|
||
Дизайн: строгий деловой, с цветовыми индикаторами (зелёный/жёлтый/красный).
|
||
|
||
ВАЖНО: Без интеграции с HH.kz. Анализ текста локально. Публикация в git.`
|
||
},
|
||
content: {
|
||
title: 'AI Content Studio',
|
||
base: `Создай веб-приложение "AI Content Studio" — студия контента для соцсетей.
|
||
|
||
Функционал:
|
||
- Ввод: сфера деятельности, целевая аудитория, цель (продажи/охват/лояльность)
|
||
- Генерация контент-плана на месяц (темы, форматы, даты)
|
||
- Идеи для Reels/TikTok (сценарии по 15-30 сек)
|
||
- Hooks для постов (цепляющие заголовки)
|
||
|
||
AI-фичи:
|
||
- Анализ трендов ниши
|
||
- Персонализация тональности (Tone of Voice)
|
||
- A/B тесты заголовков
|
||
|
||
Дизайн: яркий, креативный, с карточками идей.
|
||
|
||
ВАЖНО: Без подключения к Instagram/TikTok API. Контент генерируется AI. Публикация в git.`
|
||
},
|
||
idea: {
|
||
title: 'Business Idea Analyzer',
|
||
base: `Создай веб-приложение "Business Idea Analyzer" — анализ бизнес-идеи.
|
||
|
||
Функционал:
|
||
- Ввод: описание идеи (текст)
|
||
- Вывод: целевая аудитория, проблема, ценностное предложение
|
||
- Анализ рисков (список)
|
||
- Варианты монетизации
|
||
- Roadmap первых шагов
|
||
|
||
AI-фичи:
|
||
- Оценка потенциала рынка
|
||
- Анализ конкурентов (заглушки)
|
||
- Рекомендации по валидации
|
||
|
||
Дизайн: деловой, с инфографикой, step-by-step.
|
||
|
||
ВАЖНО: Без реальных рыночных данных. Анализ на основе AI. Публикация в git.`
|
||
},
|
||
event: {
|
||
title: 'Event Planner',
|
||
base: `Создай веб-приложение "Event Planner" — планировщик мероприятий.
|
||
|
||
Функционал:
|
||
- Ввод: тип события, количество участников, длительность, бюджет
|
||
- Генерация программы по времени
|
||
- Список активностей
|
||
- Персональный маршрут для участника
|
||
- Чек-лист подготовки
|
||
|
||
AI-фичи:
|
||
- Рекомендации спикеров/активностей
|
||
- Оптимизация тайминга
|
||
- Советы по вовлечению
|
||
|
||
Дизайн: календарь-сетка, timeline, карточки активностей.
|
||
|
||
ВАЖНО: Без интеграции с календарями. Все данные локально. Публикация в git.`
|
||
},
|
||
task: {
|
||
title: 'Smart Task Planner',
|
||
base: `Создай веб-приложение "Smart Task Planner" — умный планировщик задач.
|
||
|
||
Функционал:
|
||
- Ввод списка задач (текстом или по одной)
|
||
- Авто-приоритизация (Eisenhower Matrix)
|
||
- Оценка времени на задачу
|
||
- Рекомендуемое расписание на день/неделю
|
||
- Трекер выполнения
|
||
|
||
AI-фичи:
|
||
- Умная сортировка по срочности/важности
|
||
- Рекомендации по делегированию
|
||
- Анализ продуктивности
|
||
|
||
Дизайн: минимализм, канбан-доска, календарь.
|
||
|
||
ВАЖНО: Без интеграции с Trello/Notion. Локальное хранение. Публикация в git.`
|
||
}
|
||
};
|
||
|
||
document.querySelectorAll('.role-poster').forEach(poster => {
|
||
poster.addEventListener('click', () => {
|
||
document.querySelectorAll('.role-poster').forEach(p => p.classList.remove('selected'));
|
||
poster.classList.add('selected');
|
||
selectedRole = poster.dataset.role;
|
||
setTimeout(() => goToStep(2), 200);
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.product-card').forEach(card => {
|
||
card.addEventListener('click', () => {
|
||
document.querySelectorAll('.product-card').forEach(c => c.classList.remove('selected'));
|
||
card.classList.add('selected');
|
||
selectedProduct = card.dataset.product;
|
||
selectedProductTitle = productPrompts[selectedProduct].title;
|
||
document.getElementById('productTitle').textContent = `Настройка: ${selectedProductTitle}`;
|
||
setTimeout(() => goToStep(3), 200);
|
||
});
|
||
});
|
||
|
||
function goToStep(stepNum) {
|
||
document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
|
||
document.getElementById(`step${stepNum}`).classList.add('active');
|
||
}
|
||
|
||
function generatePrompt() {
|
||
const q1 = document.getElementById('q1').value || 'не указано';
|
||
const q2 = document.getElementById('q2').value || 'не указано';
|
||
const q3 = document.getElementById('q3').value;
|
||
const q4 = document.getElementById('q4').value || 'не указано';
|
||
const basePrompt = productPrompts[selectedProduct].base;
|
||
const customPrompt = `${basePrompt}
|
||
|
||
---
|
||
ПАРАМЕТРЫ КАСТОМИЗАЦИИ:
|
||
• Целевая аудитория: ${q1}
|
||
• Главный приоритет: ${q2}
|
||
• Стиль интерфейса: ${q3}
|
||
• Персонализация: ${q4}
|
||
|
||
---
|
||
ИНСТРУКЦИЯ ДЛЯ VIBE AI:
|
||
1. Создай приложение по описанию выше
|
||
2. Учти параметры кастомизации
|
||
3. Не используй внешние API и платные сервисы
|
||
4. Все данные сохраняй в localStorage или data.json
|
||
5. Опубликуй как веб-страницу в локальном git
|
||
6. Убедись, что приложение работает автономно`;
|
||
document.getElementById('promptOutput').textContent = customPrompt;
|
||
goToStep(4);
|
||
}
|
||
|
||
function copyPrompt() {
|
||
const text = document.getElementById('promptOutput').textContent;
|
||
navigator.clipboard.writeText(text).then(() => alert('Промт скопирован!'));
|
||
}
|
||
|
||
function resetWizard() {
|
||
selectedRole = null;
|
||
selectedProduct = null;
|
||
document.querySelectorAll('.role-poster, .product-card').forEach(el => el.classList.remove('selected'));
|
||
document.querySelectorAll('input').forEach(i => i.value = '');
|
||
goToStep(1);
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|