olzhasus/ya-zagruzil-fayl-vibe42-digi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Опубликовано через кнопку

Browse Source
This commit is contained in:
olzhasus 2026-09-15 15:27:19 +00:00
parent 7588919871
commit e2bcd92a85
2 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru" data-theme="dark"> <html lang="ru" data-theme="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
@ -12,10 +12,13 @@
a.kt-ai-btn { text-decoration: none; } a.kt-ai-btn { text-decoration: none; }
.step { display: none; } .step { display: none; }
.step.active { display: block; } .step.active { display: block; }
.kt-ai-hero { padding: var(--kt-ai-space-16) 0 var(--kt-ai-space-12); } .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 { .role-poster {
position: relative; position: relative;
background: var(--kt-ai-card-bg); background: white;
border: 1px solid var(--kt-ai-border); border: 1px solid var(--kt-ai-border);
border-radius: var(--kt-ai-radius-2xl); border-radius: var(--kt-ai-radius-2xl);
padding: var(--kt-ai-space-8); padding: var(--kt-ai-space-8);
@ -25,9 +28,17 @@
min-height: 280px; min-height: 280px;
display: flex; display: flex;
flex-direction: column; 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:hover { transform: translateY(-8px); border-color: var(--kt-ai-primary); }
.role-poster.selected { outline: 2px solid var(--kt-ai-primary); }
.role-poster::before { .role-poster::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--role-accent, var(--kt-ai-primary)); background: var(--role-accent, var(--kt-ai-primary));
@ -37,13 +48,14 @@
background: var(--role-accent, var(--kt-ai-primary)); background: var(--role-accent, var(--kt-ai-primary));
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
margin-bottom: var(--kt-ai-space-5); margin-bottom: var(--kt-ai-space-5);
flex-shrink: 0;
} }
.role-icon svg { width: 28px; height: 28px; color: white; } .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-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; } .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; } .product-card { cursor: pointer; transition: all 0.3s ease; background: white; border: 1px solid var(--kt-ai-border); }
.product-card:hover { transform: translateY(-4px); } .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); } .product-card.selected { outline: 2px solid var(--kt-ai-primary); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.product-icon { .product-icon {
width: 48px; height: 48px; border-radius: var(--kt-ai-radius-lg); width: 48px; height: 48px; border-radius: var(--kt-ai-radius-lg);
background: var(--kt-ai-primary); background: var(--kt-ai-primary);
@ -83,42 +95,42 @@
<p>Выберите роль — мы подберем подходящие сервисы</p> <p>Выберите роль — мы подберем подходящие сервисы</p>
</div> </div>
<div class="kt-ai-grid" data-cols="4" style="gap: var(--kt-ai-space-6)"> <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-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-icon"><svg class="kt-icon"><use href="#rocket"></use></svg></div>
<div class="role-title">Предприниматель</div> <div class="role-title">Предприниматель</div>
<div class="role-desc">Создаю бизнес-инструменты для роста и автоматизации</div> <div class="role-desc">Создаю бизнес-инструменты для роста и автоматизации</div>
</div> </div>
<div class="role-poster" data-role="it" style="--role-accent: var(--kt-ai-primary)"> <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-icon"><svg class="kt-icon"><use href="#tool"></use></svg></div>
<div class="role-title">IT-специалист</div> <div class="role-title">IT-специалист</div>
<div class="role-desc">Разрабатываю решения для коллег и клиентов</div> <div class="role-desc">Разрабатываю решения для коллег и клиентов</div>
</div> </div>
<div class="role-poster" data-role="hr" style="--role-accent: var(--kt-ai-primary)"> <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-icon"><svg class="kt-icon"><use href="#users"></use></svg></div>
<div class="role-title">HR</div> <div class="role-title">HR</div>
<div class="role-desc">Подбираю таланты и развиваю команду</div> <div class="role-desc">Подбираю таланты и развиваю команду</div>
</div> </div>
<div class="role-poster" data-role="marketing" style="--role-accent: var(--kt-ai-primary)"> <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-icon"><svg class="kt-icon"><use href="#megaphone"></use></svg></div>
<div class="role-title">Маркетолог</div> <div class="role-title">Маркетолог</div>
<div class="role-desc">Продвигаю продукты и создаю контент</div> <div class="role-desc">Продвигаю продукты и создаю контент</div>
</div> </div>
<div class="role-poster" data-role="student" style="--role-accent: var(--kt-ai-primary)"> <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-icon"><svg class="kt-icon"><use href="#book"></use></svg></div>
<div class="role-title">Студент</div> <div class="role-title">Студент</div>
<div class="role-desc">Учусь и создаю проекты для портфолио</div> <div class="role-desc">Учусь и создаю проекты для портфолио</div>
</div> </div>
<div class="role-poster" data-role="creator" style="--role-accent: var(--kt-ai-primary)"> <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-icon"><svg class="kt-icon"><use href="#sparkles"></use></svg></div>
<div class="role-title">Creator</div> <div class="role-title">Creator</div>
<div class="role-desc">Создаю контент для соцсетей и блогов</div> <div class="role-desc">Создаю контент для соцсетей и блогов</div>
</div> </div>
<div class="role-poster" data-role="beginner" style="grid-column: span 2; --role-accent: var(--kt-ai-primary)"> <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-icon"><svg class="kt-icon"><use href="#lightbulb"></use></svg></div>
<div class="role-title">Просто хочу попробовать</div> <div class="role-title">Просто хочу попробовать</div>
<div class="role-desc">Любопытно создать свой первый AI-сервис</div> <div class="role-desc">Любопытно создать свой первый AI-сервис</div>
</div> </div>
<div class="role-poster" data-role="custom" style="--role-accent: var(--kt-ai-primary)"> <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-icon"><svg class="kt-icon"><use href="#settings"></use></svg></div>
<div class="role-title">Своя идея</div> <div class="role-title">Своя идея</div>
<div class="role-desc">Хочу создать уникальный продукт с нуля</div> <div class="role-desc">Хочу создать уникальный продукт с нуля</div>

BIN
screenshot-20260915-202532.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB