655 lines
29 KiB
HTML
655 lines
29 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; }
|
||
|
||
/* Hero — светлый градиент */
|
||
.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%);
|
||
}
|
||
|
||
/* Постеры ролей — Anchor style с картинками */
|
||
.role-poster {
|
||
position: relative;
|
||
border-radius: var(--kt-ai-radius-2xl);
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||
min-height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border: 1px solid transparent;
|
||
}
|
||
.role-poster::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 0;
|
||
opacity: 0.15;
|
||
background-image: var(--poster-pattern);
|
||
background-size: cover;
|
||
background-position: center;
|
||
}
|
||
.role-poster > * {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.role-poster:hover {
|
||
transform: translateY(-10px) scale(1.02);
|
||
box-shadow: 0 20px 50px -15px rgba(0,0,0,0.25);
|
||
}
|
||
.role-poster.selected {
|
||
outline: 3px solid var(--poster-color, var(--kt-ai-primary));
|
||
transform: scale(1.02);
|
||
}
|
||
|
||
/* Фоновая картинка постера */
|
||
.poster-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
overflow: hidden;
|
||
}
|
||
.poster-bg img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
filter: brightness(0.9);
|
||
}
|
||
.poster-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(180deg, transparent 30%, var(--poster-color, var(--kt-ai-bg)) 90%);
|
||
}
|
||
|
||
/* Контент постера */
|
||
.poster-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
padding: var(--kt-ai-space-6);
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1;
|
||
margin-top: auto;
|
||
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 80%);
|
||
}
|
||
.poster-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--kt-ai-space-2);
|
||
padding: var(--kt-ai-space-2) var(--kt-ai-space-3);
|
||
border-radius: var(--kt-ai-radius-full);
|
||
font-size: var(--kt-ai-text-xs);
|
||
font-weight: var(--kt-ai-weight-medium);
|
||
color: white;
|
||
background: var(--poster-color, var(--kt-ai-primary));
|
||
align-self: flex-start;
|
||
margin-bottom: var(--kt-ai-space-3);
|
||
}
|
||
.poster-title {
|
||
font-size: var(--kt-ai-text-xl);
|
||
font-weight: var(--kt-ai-weight-bold);
|
||
color: white;
|
||
margin-bottom: var(--kt-ai-space-2);
|
||
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||
}
|
||
.poster-desc {
|
||
font-size: var(--kt-ai-text-sm);
|
||
color: rgba(255,255,255,0.85);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Карточки продуктов */
|
||
.product-card {
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
background: white;
|
||
border: 1px solid var(--kt-ai-border);
|
||
border-radius: var(--kt-ai-radius-xl);
|
||
overflow: hidden;
|
||
}
|
||
.product-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: 0 12px 32px -8px rgba(0,0,0,0.12);
|
||
border-color: var(--kt-ai-primary);
|
||
}
|
||
.product-card.selected {
|
||
outline: 2px solid var(--kt-ai-primary);
|
||
box-shadow: 0 12px 32px -8px rgba(0,112,214,0.2);
|
||
}
|
||
.product-header {
|
||
height: 120px;
|
||
background: var(--product-gradient, var(--kt-ai-primary));
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.product-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -40px;
|
||
left: -40px;
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
background: rgba(255,255,255,0.1);
|
||
}
|
||
.product-header svg {
|
||
width: 40px;
|
||
height: 40px;
|
||
color: white;
|
||
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
|
||
}
|
||
.product-body {
|
||
padding: var(--kt-ai-space-5);
|
||
}
|
||
.product-title {
|
||
font-size: var(--kt-ai-text-lg);
|
||
font-weight: var(--kt-ai-weight-semibold);
|
||
color: var(--kt-ai-fg);
|
||
margin-bottom: var(--kt-ai-space-2);
|
||
}
|
||
.product-desc {
|
||
font-size: var(--kt-ai-text-sm);
|
||
color: var(--kt-ai-fg-muted);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Промт вывод */
|
||
.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: 450px;
|
||
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="--poster-color: #10b981">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/400/300/business,office" alt="Предприниматель"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Бизнес</div>
|
||
<div class="poster-title">Предприниматель</div>
|
||
<div class="poster-desc">Создаю бизнес-инструменты для роста и автоматизации</div>
|
||
</div>
|
||
</div>
|
||
<div class="role-poster" data-role="it" style="--poster-color: #3b82f6">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/400/300/technology,code" alt="IT-специалист"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Технологии</div>
|
||
<div class="poster-title">IT-специалист</div>
|
||
<div class="poster-desc">Разрабатываю решения для коллег и клиентов</div>
|
||
</div>
|
||
</div>
|
||
<div class="role-poster" data-role="hr" style="--poster-color: #f59e0b">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/400/300/team,meeting" alt="HR"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Люди</div>
|
||
<div class="poster-title">HR</div>
|
||
<div class="poster-desc">Подбираю таланты и развиваю команду</div>
|
||
</div>
|
||
</div>
|
||
<div class="role-poster" data-role="marketing" style="--poster-color: #ec4899">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/400/300/marketing,social" alt="Маркетолог"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Контент</div>
|
||
<div class="poster-title">Маркетолог</div>
|
||
<div class="poster-desc">Продвигаю продукты и создаю контент</div>
|
||
</div>
|
||
</div>
|
||
<div class="role-poster" data-role="student" style="--poster-color: #8b5cf6">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/400/300/study,learning" alt="Студент"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Обучение</div>
|
||
<div class="poster-title">Студент</div>
|
||
<div class="poster-desc">Учусь и создаю проекты для портфолио</div>
|
||
</div>
|
||
</div>
|
||
<div class="role-poster" data-role="creator" style="--poster-color: #14b8a6">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/400/300/creative,content" alt="Creator"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Творчество</div>
|
||
<div class="poster-title">Creator</div>
|
||
<div class="poster-desc">Создаю контент для соцсетей и блогов</div>
|
||
</div>
|
||
</div>
|
||
<div class="role-poster" data-role="beginner" style="grid-column: span 2; --poster-color: #6b7280">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/800/300/startup,idea" alt="Новичок"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Начало</div>
|
||
<div class="poster-title">Просто хочу попробовать</div>
|
||
<div class="poster-desc">Любопытно создать свой первый AI-сервис</div>
|
||
</div>
|
||
</div>
|
||
<div class="role-poster" data-role="custom" style="--poster-color: #6366f1">
|
||
<div class="poster-bg"><img src="https://loremflickr.com/400/300/innovation,future" alt="Своя идея"></div>
|
||
<div class="poster-overlay"></div>
|
||
<div class="poster-content">
|
||
<div class="poster-badge">Уникально</div>
|
||
<div class="poster-title">Своя идея</div>
|
||
<div class="poster-desc">Хочу создать уникальный продукт с нуля</div>
|
||
</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="product-card" data-product="trip" style="--product-gradient: linear-gradient(135deg, #10b981, #059669)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#rocket"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">AI Trip Planner</h3>
|
||
<p class="product-desc">Персональный маршрут путешествия по бюджету, интересам и типу отдыха</p>
|
||
</div>
|
||
</article>
|
||
<article class="product-card" data-product="budget" style="--product-gradient: linear-gradient(135deg, #3b82f6, #2563eb)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#chart"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">Smart Budget</h3>
|
||
<p class="product-desc">Анализ бюджета: доходы, расходы, прогноз и рекомендации</p>
|
||
</div>
|
||
</article>
|
||
<article class="product-card" data-product="learning" style="--product-gradient: linear-gradient(135deg, #8b5cf6, #7c3aed)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#book"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">AI Learning Coach</h3>
|
||
<p class="product-desc">План обучения: язык, программирование, любой навык</p>
|
||
</div>
|
||
</article>
|
||
<article class="product-card" data-product="hr" style="--product-gradient: linear-gradient(135deg, #f59e0b, #d97706)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#users"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">HR Candidate Matcher</h3>
|
||
<p class="product-desc">Сопоставление резюме и вакансии: % соответствия, риски, вопросы</p>
|
||
</div>
|
||
</article>
|
||
<article class="product-card" data-product="content" style="--product-gradient: linear-gradient(135deg, #ec4899, #db2777)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#sparkles"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">AI Content Studio</h3>
|
||
<p class="product-desc">Контент-план, идеи, Reels, посты для соцсетей</p>
|
||
</div>
|
||
</article>
|
||
<article class="product-card" data-product="idea" style="--product-gradient: linear-gradient(135deg, #14b8a6, #0d9488)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#lightbulb"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">Business Idea Analyzer</h3>
|
||
<p class="product-desc">Анализ бизнес-идеи: аудитория, риски, монетизация</p>
|
||
</div>
|
||
</article>
|
||
<article class="product-card" data-product="event" style="--product-gradient: linear-gradient(135deg, #f97316, #ea580c)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#calendar"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">Event Planner</h3>
|
||
<p class="product-desc">Программа мероприятия, расписание, маршрут участника</p>
|
||
</div>
|
||
</article>
|
||
<article class="product-card" data-product="task" style="--product-gradient: linear-gradient(135deg, #6366f1, #4f46e5)">
|
||
<div class="product-header"><svg class="kt-icon"><use href="#checklist"></use></svg></div>
|
||
<div class="product-body">
|
||
<h3 class="product-title">Smart Task Planner</h3>
|
||
<p class="product-desc">Приоритизация задач, планирование расписания</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>
|