Обновлённый дизайн в стиле Anchor: постеры ролей, тёмная тема, карточки продуктов
This commit is contained in:
parent
69b107073e
commit
7588919871
197
index.html
197
index.html
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru" data-theme="auto">
|
||||
<html lang="ru" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
@ -10,14 +10,52 @@
|
||||
<link rel="stylesheet" href="design-system/kt-ai-page.css">
|
||||
<style>
|
||||
a.kt-ai-btn { text-decoration: none; }
|
||||
.product-card { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
|
||||
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--kt-ai-shadow); }
|
||||
.product-card.selected { outline: 2px solid var(--kt-ai-primary); }
|
||||
.step { display: none; }
|
||||
.step.active { display: block; }
|
||||
.role-chip { cursor: pointer; }
|
||||
.role-chip.selected { background: var(--kt-ai-primary); 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; }
|
||||
.kt-ai-hero { padding: var(--kt-ai-space-16) 0 var(--kt-ai-space-12); }
|
||||
.role-poster {
|
||||
position: relative;
|
||||
background: var(--kt-ai-card-bg);
|
||||
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;
|
||||
}
|
||||
.role-poster:hover { transform: translateY(-8px); border-color: var(--kt-ai-primary); }
|
||||
.role-poster.selected { outline: 2px solid var(--kt-ai-primary); }
|
||||
.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);
|
||||
}
|
||||
.role-icon svg { width: 28px; height: 28px; color: white; }
|
||||
.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.5; flex-grow: 1; }
|
||||
.product-card { cursor: pointer; transition: all 0.3s ease; }
|
||||
.product-card:hover { transform: translateY(-4px); }
|
||||
.product-card.selected { outline: 2px solid var(--kt-ai-primary); }
|
||||
.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>
|
||||
@ -32,102 +70,132 @@
|
||||
|
||||
<section class="kt-ai-hero" data-align="center">
|
||||
<div class="kt-ai-wrap">
|
||||
<h1>Создай свой AI-сервис за 60 минут</h1>
|
||||
<p class="kt-ai-hero-sub">Выбери продукт, настрой под себя и получи готовый промт для Vibe AI</p>
|
||||
<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">
|
||||
|
||||
<!-- Шаг 1: Выбор роли -->
|
||||
<div id="step1" class="step active">
|
||||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
|
||||
<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="3" style="gap: var(--kt-ai-space-4); justify-content: center;">
|
||||
<div class="kt-ai-chip role-chip" data-role="entrepreneur">Предприниматель</div>
|
||||
<div class="kt-ai-chip role-chip" data-role="it">IT-специалист</div>
|
||||
<div class="kt-ai-chip role-chip" data-role="hr">HR</div>
|
||||
<div class="kt-ai-chip role-chip" data-role="marketing">Маркетолог</div>
|
||||
<div class="kt-ai-chip role-chip" data-role="student">Студент</div>
|
||||
<div class="kt-ai-chip role-chip" data-role="creator">Creator</div>
|
||||
<div class="kt-ai-chip role-chip" data-role="beginner" style="grid-column: span 3">Просто хочу попробовать</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: var(--kt-ai-primary)">
|
||||
<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: var(--kt-ai-primary)">
|
||||
<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: var(--kt-ai-primary)">
|
||||
<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: var(--kt-ai-primary)">
|
||||
<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: var(--kt-ai-primary)">
|
||||
<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: var(--kt-ai-primary)">
|
||||
<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: var(--kt-ai-primary)">
|
||||
<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: var(--kt-ai-primary)">
|
||||
<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>
|
||||
|
||||
<!-- Шаг 2: Выбор продукта -->
|
||||
<div id="step2" class="step">
|
||||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#rocket"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">AI Trip Planner</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Персональный маршрут путешествия по бюджету, интересам и типу отдыха</p>
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#chart"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">Smart Budget</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Анализ бюджета: доходы, расходы, прогноз и рекомендации</p>
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#book"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">AI Learning Coach</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">План обучения: язык, программирование, любой навык</p>
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#users"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">HR Candidate Matcher</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Сопоставление резюме и вакансии: % соответствия, риски, вопросы</p>
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#sparkles"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">AI Content Studio</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Контент-план, идеи, Reels, посты для соцсетей</p>
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#lightbulb"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">Business Idea Analyzer</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Анализ бизнес-идеи: аудитория, риски, монетизация</p>
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#calendar"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">Event Planner</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Программа мероприятия, расписание, маршрут участника</p>
|
||||
<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">
|
||||
<svg class="kt-icon kt-icon-lg" style="color: var(--kt-ai-primary)"><use href="#checklist"></use></svg>
|
||||
<h3 style="margin-top: var(--kt-ai-space-4)">Smart Task Planner</h3>
|
||||
<p style="color: var(--kt-ai-fg-muted)">Приоритизация задач, планирование расписания</p>
|
||||
<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-6)">
|
||||
<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>
|
||||
|
||||
<!-- Шаг 3: Кастомизация -->
|
||||
<div id="step3" class="step">
|
||||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
|
||||
<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>
|
||||
@ -162,9 +230,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Шаг 4: Результат -->
|
||||
<div id="step4" class="step">
|
||||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-9)">
|
||||
<div class="kt-ai-section-head" style="text-align: center; margin-bottom: var(--kt-ai-space-12)">
|
||||
<h2>Ваш промт готов!</h2>
|
||||
<p>Скопируйте или откройте в Vibe AI</p>
|
||||
</div>
|
||||
@ -188,10 +255,11 @@
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="kt-ai-wrap kt-ai-pagefoot" style="margin-top: var(--kt-ai-space-12)">
|
||||
<span>© 2026 Vibe42 × Digital Bridge</span>
|
||||
<span class="kt-ai-spacer"></span>
|
||||
<span>Создай свой AI-сервис за 60 минут</span>
|
||||
<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>
|
||||
@ -361,17 +429,15 @@ AI-фичи:
|
||||
}
|
||||
};
|
||||
|
||||
// Роли
|
||||
document.querySelectorAll('.role-chip').forEach(chip => {
|
||||
chip.addEventListener('click', () => {
|
||||
document.querySelectorAll('.role-chip').forEach(c => c.classList.remove('selected'));
|
||||
chip.classList.add('selected');
|
||||
selectedRole = chip.dataset.role;
|
||||
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'));
|
||||
@ -393,9 +459,7 @@ function generatePrompt() {
|
||||
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}
|
||||
|
||||
---
|
||||
@ -413,22 +477,19 @@ function generatePrompt() {
|
||||
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('Промт скопирован в буфер обмена!');
|
||||
});
|
||||
navigator.clipboard.writeText(text).then(() => alert('Промт скопирован!'));
|
||||
}
|
||||
|
||||
function resetWizard() {
|
||||
selectedRole = null;
|
||||
selectedProduct = null;
|
||||
document.querySelectorAll('.role-chip, .product-card').forEach(el => el.classList.remove('selected'));
|
||||
document.querySelectorAll('.role-poster, .product-card').forEach(el => el.classList.remove('selected'));
|
||||
document.querySelectorAll('input').forEach(i => i.value = '');
|
||||
goToStep(1);
|
||||
}
|
||||
|
||||
BIN
screenshot-20260915-201927.png
Normal file
BIN
screenshot-20260915-201927.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 MiB |
Loading…
Reference in New Issue
Block a user