393 lines
19 KiB
HTML
393 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
|
||
<title>Vibe Coding Воркшоп — Казахтелеком</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="frame">
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<div class="nav-inner">
|
||
<a class="nav-logo" href="#top">
|
||
<span class="logo-mark">КТ</span>
|
||
<span class="logo-text">Vibe Workshop</span>
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="#intro" class="nav-link">Введение</a>
|
||
<a href="#tools" class="nav-link">Инструменты</a>
|
||
<a href="#schedule" class="nav-link">Программа</a>
|
||
<a href="#glossary" class="nav-link">Словарь</a>
|
||
<a href="#projects" class="nav-link">Проекты</a>
|
||
</div>
|
||
<a href="https://telecom.quest" target="_blank" rel="noopener" class="nav-cta">telecom.quest →</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- MAIN -->
|
||
<main id="top">
|
||
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="container hero-inner">
|
||
<span class="badge">Казахтелеком · Финансовый департамент · Полный день</span>
|
||
<h1 class="hero-title">
|
||
Воркшоп:<br>
|
||
<span class="underline-blue">Vibe Coding</span><br>
|
||
для финансистов
|
||
</h1>
|
||
<p class="hero-sub">
|
||
Сегодня ты напишешь своё первое рабочее приложение.<br>Без опыта программирования.
|
||
</p>
|
||
<div class="hero-meta">
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">8ч</div>
|
||
<div class="hero-stat-label">полный день</div>
|
||
</div>
|
||
<div class="hero-divider"></div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">1</div>
|
||
<div class="hero-stat-label">MVP на выходе</div>
|
||
</div>
|
||
<div class="hero-divider"></div>
|
||
<div class="hero-stat">
|
||
<div class="hero-stat-num">0</div>
|
||
<div class="hero-stat-label">строк кода вручную</div>
|
||
</div>
|
||
</div>
|
||
<a href="#intro" class="btn-primary">Начать →</a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 1: WHAT IS VIBE CODING -->
|
||
<section class="section" id="intro">
|
||
<div class="container two-col">
|
||
<div class="section-header">
|
||
<div class="section-label">01 — Введение</div>
|
||
<h2 class="section-title">Что такое<br><em>вайб-кодинг?</em></h2>
|
||
<p class="section-body">
|
||
Раньше между идеей и программой стоял разработчик, ТЗ и несколько месяцев ожидания.
|
||
Теперь — только точное описание задачи.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="before-after">
|
||
<div class="ba-card">
|
||
<div class="ba-label">Раньше</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon neg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><line x1="10" y1="6" x2="6" y2="10"/><line x1="6" y1="6" x2="10" y2="10"/>
|
||
</svg>
|
||
<span>Описываешь задачу разработчику</span>
|
||
</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon neg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><line x1="10" y1="6" x2="6" y2="10"/><line x1="6" y1="6" x2="10" y2="10"/>
|
||
</svg>
|
||
<span>Разработчик пишет ТЗ — итерация №1</span>
|
||
</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon neg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><line x1="10" y1="6" x2="6" y2="10"/><line x1="6" y1="6" x2="10" y2="10"/>
|
||
</svg>
|
||
<span>Согласование, правки, спринт</span>
|
||
</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon neg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><line x1="10" y1="6" x2="6" y2="10"/><line x1="6" y1="6" x2="10" y2="10"/>
|
||
</svg>
|
||
<span>Результат через 2–6 месяцев</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ba-card after">
|
||
<div class="ba-label after">Теперь</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon pos" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><polyline points="5,8 7,10 11,6"/>
|
||
</svg>
|
||
<span>Описываешь задачу словами в Claude</span>
|
||
</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon pos" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><polyline points="5,8 7,10 11,6"/>
|
||
</svg>
|
||
<span>Claude Code пишет код за секунды</span>
|
||
</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon pos" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><polyline points="5,8 7,10 11,6"/>
|
||
</svg>
|
||
<span>Ты проверяешь, даёшь обратную связь</span>
|
||
</div>
|
||
<div class="ba-row">
|
||
<svg class="ba-icon pos" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<circle cx="8" cy="8" r="7"/><polyline points="5,8 7,10 11,6"/>
|
||
</svg>
|
||
<span>Рабочий прототип за часы</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 2: WHY FINANCIERS -->
|
||
<section class="section" id="why">
|
||
<div class="container">
|
||
<div class="section-label">02 — Почему вы</div>
|
||
<h2 class="section-title">Ты уже умеешь<br><em>самое важное</em></h2>
|
||
<p class="section-body">
|
||
Финансисты — лучшие постановщики задач. Ваш язык — это уже готовый PRD.
|
||
Три навыка, которые у вас есть по умолчанию:
|
||
</p>
|
||
|
||
<div class="cards-3">
|
||
<div class="card">
|
||
<svg class="card-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="8" y="6" width="32" height="36" rx="3"/>
|
||
<line x1="16" y1="16" x2="32" y2="16"/>
|
||
<line x1="16" y1="22" x2="32" y2="22"/>
|
||
<line x1="16" y1="28" x2="24" y2="28"/>
|
||
</svg>
|
||
<div class="card-title">Описывать процессы</div>
|
||
<div class="card-desc">
|
||
Как вы закрываете период, как согласуете платёж — это уже структурированное описание задачи. Claude понимает именно такой язык.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<svg class="card-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||
<circle cx="24" cy="24" r="16"/>
|
||
<line x1="24" y1="16" x2="24" y2="24"/>
|
||
<line x1="24" y1="24" x2="30" y2="30"/>
|
||
</svg>
|
||
<div class="card-title">Видеть проблему</div>
|
||
<div class="card-desc">
|
||
Где данные расходятся, где Excel ломается, где теряется время — вы чувствуете это лучше любого разработчика. Эта экспертиза бесценна.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<svg class="card-icon" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="8,28 18,18 26,26 40,12"/>
|
||
<polyline points="34,12 40,12 40,18"/>
|
||
</svg>
|
||
<div class="card-title">Принимать результат</div>
|
||
<div class="card-desc">
|
||
Принять или отклонить — это ваша ключевая роль. Цифра правильная или нет — именно ваша экспертиза даёт качество итоговому продукту.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 3: TOOLS -->
|
||
<section class="section" id="tools">
|
||
<div class="container">
|
||
<div class="section-label">03 — Инструменты</div>
|
||
<h2 class="section-title">Три инструмента.<br><em>Один результат.</em></h2>
|
||
<p class="section-body">
|
||
Всё что нужно сегодня — уже настроено. Никаких установок, регистраций и ключей.
|
||
</p>
|
||
|
||
<div class="tools-grid">
|
||
<div class="tool-card">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="tool-name">Claude Desktop</div>
|
||
<div class="tool-role">
|
||
ИИ-помощник, который пишет код. Говоришь задачу — получаешь код. Исправляешь словами — получаешь новую версию.
|
||
</div>
|
||
<a href="https://claude.ai" target="_blank" rel="noopener" class="tool-link">
|
||
claude.ai
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<path d="M2 10L10 2M4 2h6v6"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="tool-card">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
|
||
</svg>
|
||
</div>
|
||
<div class="tool-name">VSCode на telecom.quest</div>
|
||
<div class="tool-role">
|
||
Редактор кода прямо в браузере. Не нужно ничего устанавливать — открываешь ссылку и работаешь. Код Claude сразу запускается здесь.
|
||
</div>
|
||
<a href="https://telecom.quest" target="_blank" rel="noopener" class="tool-link">
|
||
telecom.quest
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
||
<path d="M2 10L10 2M4 2h6v6"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="tool-card">
|
||
<div class="tool-icon-wrap">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||
<ellipse cx="12" cy="5" rx="9" ry="3"/>
|
||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
|
||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="tool-name">Sandbox КТ</div>
|
||
<div class="tool-role">
|
||
Тестовая среда с mock-данными, похожими на реальные данные КТ. Можно ломать, перезапускать. Реальные данные в полной безопасности.
|
||
</div>
|
||
<span class="tool-link" style="cursor:default;opacity:0.5">Настроено заранее</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 4: SCHEDULE -->
|
||
<section class="section" id="schedule">
|
||
<div class="container two-col">
|
||
<div class="section-header">
|
||
<div class="section-label">04 — Программа</div>
|
||
<h2 class="section-title">Что будет<br><em>сегодня</em></h2>
|
||
<p class="section-body">
|
||
Полный день поделён на блоки с чёткими результатами. К 17:00 — твой MVP задеплоен.
|
||
</p>
|
||
</div>
|
||
<div class="schedule" id="schedule-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 5: GLOSSARY -->
|
||
<section class="section" id="glossary">
|
||
<div class="container two-col">
|
||
<div class="section-header">
|
||
<div class="section-label">05 — Словарь</div>
|
||
<h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
|
||
<p class="section-body">
|
||
Семь слов, которые встретятся сегодня. Нажми на любое — увидишь объяснение
|
||
без технического жаргона.
|
||
</p>
|
||
</div>
|
||
<div class="glossary" id="glossary-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SECTION 6: PROJECTS -->
|
||
<section class="section" id="projects">
|
||
<div class="container">
|
||
<div class="section-label">06 — Твой проект</div>
|
||
<h2 class="section-title">Ты знаешь<br><em>боль изнутри</em></h2>
|
||
<p class="section-body">
|
||
Лучший проект — тот, где ты сам тратишь время впустую. Вот примеры из финансовых департаментов —
|
||
выбери ближайший или опиши свой.
|
||
</p>
|
||
<div class="projects-grid" id="projects-grid"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DARK CTA -->
|
||
<section class="section" style="border-top: none; padding-bottom: 64px;">
|
||
<div class="container">
|
||
<div class="dark-section">
|
||
<h2 class="dark-title">Запусти свой проект сегодня</h2>
|
||
<p class="dark-sub">
|
||
К концу дня — рабочий MVP в среде Казахтелеком. Первый шаг сделан.
|
||
</p>
|
||
<a href="https://telecom.quest" target="_blank" rel="noopener" class="dark-cta">
|
||
Открыть telecom.quest →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<span class="footer-copy">Казахтелеком · Финансовый департамент · Воркшоп по вайб-кодингу</span>
|
||
<div class="footer-links">
|
||
<a href="https://claude.ai" target="_blank" rel="noopener" class="footer-link">Claude Desktop</a>
|
||
<a href="https://telecom.quest" target="_blank" rel="noopener" class="footer-link">telecom.quest</a>
|
||
</div>
|
||
</footer>
|
||
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<script src="data/content.js"></script>
|
||
<script>
|
||
// Render schedule
|
||
const scheduleEl = document.getElementById('schedule-list');
|
||
SCHEDULE.forEach(item => {
|
||
const div = document.createElement('div');
|
||
div.className = 'sched-item' + (item.active ? ' active' : '') + (item.isBreak ? ' break' : '');
|
||
div.innerHTML = `
|
||
<span class="sched-time">${item.time}</span>
|
||
<span class="sched-dot"></span>
|
||
<div class="sched-content">
|
||
<div class="sched-title">${item.title}</div>
|
||
${item.desc ? `<div class="sched-desc">${item.desc}</div>` : ''}
|
||
${item.tags.length ? `<div class="sched-tags">${item.tags.map(t => `<span class="tag ${t === 'Ваш проект' || t === 'Финал' ? 'blue' : ''}">${t}</span>`).join('')}</div>` : ''}
|
||
</div>
|
||
`;
|
||
scheduleEl.appendChild(div);
|
||
});
|
||
|
||
// Render glossary
|
||
const glossaryEl = document.getElementById('glossary-list');
|
||
GLOSSARY.forEach(item => {
|
||
const div = document.createElement('div');
|
||
div.className = 'gloss-item';
|
||
div.innerHTML = `
|
||
<button class="gloss-trigger" aria-expanded="false">
|
||
<span class="gloss-term">${item.term}</span>
|
||
<span class="gloss-abbr">${item.abbr}</span>
|
||
<svg class="gloss-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round">
|
||
<polyline points="4,6 8,10 12,6"/>
|
||
</svg>
|
||
</button>
|
||
<div class="gloss-body" role="region">
|
||
<div class="gloss-inner">
|
||
<div class="gloss-text">${item.definition}</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
const btn = div.querySelector('.gloss-trigger');
|
||
btn.addEventListener('click', () => {
|
||
const isOpen = div.classList.contains('open');
|
||
document.querySelectorAll('.gloss-item.open').forEach(el => {
|
||
el.classList.remove('open');
|
||
el.querySelector('.gloss-trigger').setAttribute('aria-expanded', 'false');
|
||
});
|
||
if (!isOpen) {
|
||
div.classList.add('open');
|
||
btn.setAttribute('aria-expanded', 'true');
|
||
}
|
||
});
|
||
glossaryEl.appendChild(div);
|
||
});
|
||
|
||
// Render projects
|
||
const projectsEl = document.getElementById('projects-grid');
|
||
PROJECTS.forEach(item => {
|
||
const div = document.createElement('div');
|
||
div.className = 'project-card';
|
||
div.innerHTML = `
|
||
<div class="project-num">${item.num}</div>
|
||
<div class="project-title">${item.title}</div>
|
||
<div class="project-pain">"${item.pain}"</div>
|
||
<div class="project-tags">${item.tags.map(t => `<span class="tag">${t}</span>`).join('')}</div>
|
||
`;
|
||
projectsEl.appendChild(div);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|