Add Action Plan, Что можно создать, Telegram community + expand glossary; Camunda optional
This commit is contained in:
parent
004c8a1920
commit
e3ddc7150d
382
index.html
382
index.html
@ -251,6 +251,142 @@ nav {
|
|||||||
.modal-submit:hover { background: var(--blue-hover); }
|
.modal-submit:hover { background: var(--blue-hover); }
|
||||||
.modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
.modal-submit:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||||
|
|
||||||
|
/* ── OPTIONAL BADGE on tool card ── */
|
||||||
|
.tool-card.optional { position: relative; opacity: 0.92; }
|
||||||
|
.tool-card .opt-badge {
|
||||||
|
position: absolute; top: 14px; right: 14px;
|
||||||
|
font-size: 0.6875rem; font-weight: 500;
|
||||||
|
padding: 2px 8px; border-radius: 6px;
|
||||||
|
background: rgba(0,0,0,0.06); color: var(--text-55);
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── ACTION PLAN ── */
|
||||||
|
.plan-flow {
|
||||||
|
margin-top: 40px;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.plan-flow { grid-template-columns: repeat(4, 1fr); align-items: stretch; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.plan-step {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 20px 18px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.plan-step-num {
|
||||||
|
font-size: 0.6875rem; font-weight: 500;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--blue);
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.plan-step-title {
|
||||||
|
font-size: 0.9375rem; font-weight: 500;
|
||||||
|
color: var(--text); line-height: 1.3;
|
||||||
|
}
|
||||||
|
.plan-step-desc {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-55); line-height: 1.5;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.plan-step code {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||||
|
background: var(--hover); padding: 1px 5px;
|
||||||
|
border-radius: 4px; font-size: 0.75rem; color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── CREATE CARDS ── */
|
||||||
|
.create-cards {
|
||||||
|
margin-top: 40px;
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
@media (min-width: 640px) { .create-cards { grid-template-columns: repeat(3, 1fr); } }
|
||||||
|
|
||||||
|
.create-card {
|
||||||
|
background: var(--card-neutral);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 28px 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
.create-card-icon {
|
||||||
|
width: 44px; height: 44px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
.create-card-icon svg { width: 22px; height: 22px; }
|
||||||
|
.create-card-title {
|
||||||
|
font-size: 0.9375rem; font-weight: 500;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
.create-card-desc {
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
color: var(--text-55); line-height: 1.5;
|
||||||
|
}
|
||||||
|
.create-card-example {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: var(--text-45);
|
||||||
|
font-style: italic;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── TELEGRAM ── */
|
||||||
|
.tg-block {
|
||||||
|
margin-top: 40px;
|
||||||
|
background: var(--card-neutral);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px 28px;
|
||||||
|
display: grid;
|
||||||
|
gap: 28px;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.tg-block { grid-template-columns: auto 1fr; padding: 40px; gap: 36px; }
|
||||||
|
}
|
||||||
|
.tg-qr {
|
||||||
|
background: #fff;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 12px;
|
||||||
|
width: 180px; height: 180px;
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.tg-qr svg { width: 100%; height: 100%; display: block; }
|
||||||
|
.tg-text-title {
|
||||||
|
font-size: 1.25rem; font-weight: 500;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
color: var(--text);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.tg-text-body {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
color: var(--text-55); line-height: 1.5;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.tg-cta {
|
||||||
|
display: inline-flex; align-items: center; gap: 6px;
|
||||||
|
background: var(--blue); color: #fff;
|
||||||
|
font-size: 0.875rem; font-weight: 500;
|
||||||
|
padding: 10px 18px; border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background 150ms ease;
|
||||||
|
}
|
||||||
|
.tg-cta:hover { background: var(--blue-hover); }
|
||||||
|
|
||||||
/* ── MAIN ── */
|
/* ── MAIN ── */
|
||||||
main {
|
main {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
@ -890,11 +1026,11 @@ footer {
|
|||||||
<span class="logo-text">Vibe Workshop</span>
|
<span class="logo-text">Vibe Workshop</span>
|
||||||
</a>
|
</a>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<a href="#intro" class="nav-link">Введение</a>
|
|
||||||
<a href="#tools" class="nav-link">Инструменты</a>
|
<a href="#tools" class="nav-link">Инструменты</a>
|
||||||
<a href="#schedule" class="nav-link">Программа</a>
|
<a href="#plan" class="nav-link">Action Plan</a>
|
||||||
|
<a href="#create" class="nav-link">Что создать</a>
|
||||||
<a href="#glossary" class="nav-link">Словарь</a>
|
<a href="#glossary" class="nav-link">Словарь</a>
|
||||||
<a href="#projects" class="nav-link">Проекты</a>
|
<a href="#telegram" class="nav-link">Сообщество</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-cta-group">
|
<div class="nav-cta-group">
|
||||||
<span id="nav-cdn" class="nav-cdn-chip" hidden title="Выйти"></span>
|
<span id="nav-cdn" class="nav-cdn-chip" hidden title="Выйти"></span>
|
||||||
@ -923,14 +1059,13 @@ footer {
|
|||||||
<!-- HERO -->
|
<!-- HERO -->
|
||||||
<section class="hero">
|
<section class="hero">
|
||||||
<div class="container hero-inner">
|
<div class="container hero-inner">
|
||||||
<span class="badge">Казахтелеком · Финансовый департамент · Полный день</span>
|
<span class="badge">Казахтелеком · Финансовый департамент · Для начинающих</span>
|
||||||
<h1 class="hero-title">
|
<h1 class="hero-title">
|
||||||
Воркшоп:<br>
|
|
||||||
<span class="underline-blue">Vibe Coding</span><br>
|
<span class="underline-blue">Vibe Coding</span><br>
|
||||||
для финансистов
|
для финансистов
|
||||||
</h1>
|
</h1>
|
||||||
<p class="hero-sub">
|
<p class="hero-sub">
|
||||||
Сегодня ты напишешь своё первое рабочее приложение.<br>Без опыта программирования.
|
Опиши свою боль словами — Claude напишет код. Запусти прямо здесь, в браузере.<br>Без опыта программирования.
|
||||||
</p>
|
</p>
|
||||||
<div class="hero-meta">
|
<div class="hero-meta">
|
||||||
<div class="hero-stat">
|
<div class="hero-stat">
|
||||||
@ -1074,13 +1209,13 @@ footer {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- SECTION 3: TOOLS -->
|
<!-- SECTION 3: WHAT YOU NEED -->
|
||||||
<section class="section" id="tools">
|
<section class="section" id="tools">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">03 — Инструменты</div>
|
<div class="section-label">03 — Что тебе понадобится</div>
|
||||||
<h2 class="section-title">Три инструмента.<br><em>Один результат.</em></h2>
|
<h2 class="section-title">Два инструмента.<br><em>Один опциональный.</em></h2>
|
||||||
<p class="section-body">
|
<p class="section-body">
|
||||||
Всё что нужно сегодня — уже настроено. Никаких установок, регистраций и ключей.
|
Установить — минут пять. Никаких регистраций корпоративных и API-ключей.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div class="tools-grid">
|
<div class="tools-grid">
|
||||||
@ -1090,12 +1225,12 @@ footer {
|
|||||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
<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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="tool-name">Claude Desktop</div>
|
<div class="tool-name">Claude</div>
|
||||||
<div class="tool-role">
|
<div class="tool-role">
|
||||||
ИИ-помощник, который пишет код. Говоришь задачу — получаешь код. Исправляешь словами — получаешь новую версию.
|
ИИ-помощник. Описываешь задачу словами — получаешь готовый план или код. Скачай приложение или используй в браузере.
|
||||||
</div>
|
</div>
|
||||||
<a href="https://claude.ai" target="_blank" rel="noopener" class="tool-link">
|
<a href="https://claude.ai/downloads" target="_blank" rel="noopener" class="tool-link">
|
||||||
claude.ai
|
claude.ai/downloads
|
||||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
||||||
<path d="M2 10L10 2M4 2h6v6"/>
|
<path d="M2 10L10 2M4 2h6v6"/>
|
||||||
</svg>
|
</svg>
|
||||||
@ -1108,31 +1243,144 @@ footer {
|
|||||||
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
|
<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="tool-name">VSCode на telecom.quest</div>
|
<div class="tool-name">VS Code в браузере</div>
|
||||||
<div class="tool-role">
|
<div class="tool-role">
|
||||||
Редактор кода прямо в браузере. Не нужно ничего устанавливать — открываешь ссылку и работаешь. Код Claude сразу запускается здесь.
|
Твой редактор кода и терминал. Кликнул «Войти» наверху — попал в свою папку. Никаких установок.
|
||||||
</div>
|
</div>
|
||||||
<a href="https://telecom.quest" target="_blank" rel="noopener" class="tool-link">
|
<a href="https://vibe.telecom.quest" class="tool-link">
|
||||||
telecom.quest
|
vibe.telecom.quest
|
||||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.7">
|
||||||
<path d="M2 10L10 2M4 2h6v6"/>
|
<path d="M2 10L10 2M4 2h6v6"/>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tool-card">
|
<div class="tool-card optional">
|
||||||
|
<span class="opt-badge">опционально</span>
|
||||||
<div class="tool-icon-wrap">
|
<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">
|
<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"/>
|
<rect x="3" y="3" width="7" height="7" rx="1"/>
|
||||||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
|
<rect x="14" y="3" width="7" height="7" rx="1"/>
|
||||||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
|
<rect x="3" y="14" width="7" height="7" rx="1"/>
|
||||||
|
<path d="M14 17.5h7M17.5 14v7"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="tool-name">Sandbox КТ</div>
|
<div class="tool-name">Camunda Modeler</div>
|
||||||
<div class="tool-role">
|
<div class="tool-role">
|
||||||
Тестовая среда с mock-данными, похожими на реальные данные КТ. Можно ломать, перезапускать. Реальные данные в полной безопасности.
|
Для тех, кто хочет рисовать bpmn-процессы руками. Если впервые слышишь про bpmn — пропусти, Claude нарисует за тебя.
|
||||||
|
</div>
|
||||||
|
<a href="https://camunda.com/download" target="_blank" rel="noopener" class="tool-link">
|
||||||
|
camunda.com/download
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION 4: ACTION PLAN -->
|
||||||
|
<section class="section" id="plan">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label">04 — Action Plan</div>
|
||||||
|
<h2 class="section-title">Четыре шага<br><em>до рабочего MVP</em></h2>
|
||||||
|
<p class="section-body">
|
||||||
|
От «у меня есть боль» до «вот работающее приложение». Каждый шаг занимает 10–30 минут.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="plan-flow">
|
||||||
|
<div class="plan-step">
|
||||||
|
<div class="plan-step-num">Шаг 1</div>
|
||||||
|
<div class="plan-step-title">Войди в свою папку</div>
|
||||||
|
<div class="plan-step-desc">
|
||||||
|
Кнопка <b>«Войти»</b> наверху → введи ФИО → откроется твой VS Code. В папке уже лежат <code>PRD.md</code>, <code>TRD.md</code>, <code>ZORRO.md</code>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="plan-step">
|
||||||
|
<div class="plan-step-num">Шаг 2</div>
|
||||||
|
<div class="plan-step-title">Опиши боль в PRD.md</div>
|
||||||
|
<div class="plan-step-desc">
|
||||||
|
Открой <code>PRD.md</code>. Простыми словами: что болит, кто пользователь, какой результат хочешь. Без терминов и кода.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="plan-step">
|
||||||
|
<div class="plan-step-num">Шаг 3</div>
|
||||||
|
<div class="plan-step-title">Получи TRD от Claude</div>
|
||||||
|
<div class="plan-step-desc">
|
||||||
|
Открой Claude. Приложи <code>PRD.md</code> + <code>ZORRO.md</code>. Скажи: «Сделай TRD на основе PRD и ZORRO». Результат сохрани в <code>TRD.md</code>.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="plan-step">
|
||||||
|
<div class="plan-step-num">Шаг 4</div>
|
||||||
|
<div class="plan-step-title">Запусти Claude Code</div>
|
||||||
|
<div class="plan-step-desc">
|
||||||
|
В терминале VS Code: <code>claude code</code>. Скажи «реализуй TRD.md». Через 10–20 минут — рабочий MVP в твоей папке.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION 5: WHAT YOU CAN CREATE -->
|
||||||
|
<section class="section" id="create">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label">05 — Что можно создать</div>
|
||||||
|
<h2 class="section-title">Три формата.<br><em>Под твою задачу.</em></h2>
|
||||||
|
<p class="section-body">
|
||||||
|
Большинство финансовых задач сводятся к трём типам решений. Выбери ближайший к твоей боли.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="create-cards">
|
||||||
|
<div class="create-card">
|
||||||
|
<div class="create-card-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2"/>
|
||||||
|
<path d="M3 9h18M9 21V9"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="create-card-title">Дашборд</div>
|
||||||
|
<div class="create-card-desc">
|
||||||
|
Веб-страница с цифрами и графиками из твоих таблиц. Обновляется сама. Можно открыть с телефона.
|
||||||
|
</div>
|
||||||
|
<div class="create-card-example">
|
||||||
|
Например: динамика затрат по департаментам за квартал.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="create-card">
|
||||||
|
<div class="create-card-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M21.5 12a9.5 9.5 0 1 1-3-7L21 4l-1 4-4-1"/>
|
||||||
|
<circle cx="12" cy="12" r="1"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="create-card-title">Telegram-бот</div>
|
||||||
|
<div class="create-card-desc">
|
||||||
|
Бот, которому пишешь команду — он отвечает или что-то делает. Может тыкаться в Excel, базы, отчёты.
|
||||||
|
</div>
|
||||||
|
<div class="create-card-example">
|
||||||
|
Например: «/курс USD» → актуальная разница vs. прошлая неделя.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="create-card">
|
||||||
|
<div class="create-card-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
||||||
|
<path d="M8 21h8M12 17v4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="create-card-title">Mini-приложение</div>
|
||||||
|
<div class="create-card-desc">
|
||||||
|
Страничка с формой для коллег. Они заполняют — у тебя автоматически собирается результат. Без таблиц и пересылки.
|
||||||
|
</div>
|
||||||
|
<div class="create-card-example">
|
||||||
|
Например: согласование командировки в один клик.
|
||||||
</div>
|
</div>
|
||||||
<span class="tool-link" style="cursor:default;opacity:0.5">Настроено заранее</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -1142,7 +1390,7 @@ footer {
|
|||||||
<section class="section" id="schedule">
|
<section class="section" id="schedule">
|
||||||
<div class="container two-col">
|
<div class="container two-col">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="section-label">04 — Программа</div>
|
<div class="section-label">06 — Программа первого занятия</div>
|
||||||
<h2 class="section-title">Что будет<br><em>сегодня</em></h2>
|
<h2 class="section-title">Что будет<br><em>сегодня</em></h2>
|
||||||
<p class="section-body">
|
<p class="section-body">
|
||||||
Полный день поделён на блоки с чёткими результатами. К 17:00 — твой MVP задеплоен.
|
Полный день поделён на блоки с чёткими результатами. К 17:00 — твой MVP задеплоен.
|
||||||
@ -1156,7 +1404,7 @@ footer {
|
|||||||
<section class="section" id="glossary">
|
<section class="section" id="glossary">
|
||||||
<div class="container two-col">
|
<div class="container two-col">
|
||||||
<div class="section-header">
|
<div class="section-header">
|
||||||
<div class="section-label">05 — Словарь</div>
|
<div class="section-label">07 — Словарь</div>
|
||||||
<h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
|
<h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
|
||||||
<p class="section-body">
|
<p class="section-body">
|
||||||
Семь слов, которые встретятся сегодня. Нажми на любое — увидишь объяснение
|
Семь слов, которые встретятся сегодня. Нажми на любое — увидишь объяснение
|
||||||
@ -1170,7 +1418,7 @@ footer {
|
|||||||
<!-- SECTION 6: PROJECTS -->
|
<!-- SECTION 6: PROJECTS -->
|
||||||
<section class="section" id="projects">
|
<section class="section" id="projects">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">06 — Твой проект</div>
|
<div class="section-label">08 — Твой проект</div>
|
||||||
<h2 class="section-title">Ты знаешь<br><em>боль изнутри</em></h2>
|
<h2 class="section-title">Ты знаешь<br><em>боль изнутри</em></h2>
|
||||||
<p class="section-body">
|
<p class="section-body">
|
||||||
Лучший проект — тот, где ты сам тратишь время впустую. Вот примеры из финансовых департаментов —
|
Лучший проект — тот, где ты сам тратишь время впустую. Вот примеры из финансовых департаментов —
|
||||||
@ -1180,27 +1428,54 @@ footer {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- SECTION: TELEGRAM COMMUNITY -->
|
||||||
|
<section class="section" id="telegram">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-label">09 — Сообщество</div>
|
||||||
|
<h2 class="section-title">Застрял?<br><em>Спрашивай в чате.</em></h2>
|
||||||
|
<p class="section-body">
|
||||||
|
Telegram-группа инноваторов КТ. Здесь делятся проектами, спрашивают и помогают друг другу. Заходи.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="tg-block">
|
||||||
|
<div class="tg-qr" aria-label="QR-код для Telegram-группы">
|
||||||
|
<svg viewBox="0 0 264 264" xmlns="http://www.w3.org/2000/svg"><g transform="scale(8)"><path fill="#fff" d="M0 0h33v33h-33z"/><path stroke="#000" fill="none" d="M2 2.5h7m3 0h3m1 0h2m1 0h4m1 0h7m-29 1h1m5 0h1m1 0h2m2 0h2m1 0h4m3 0h1m5 0h1m-29 1h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h1m3 0h3m1 0h1m1 0h3m1 0h1m-29 1h1m1 0h3m1 0h1m4 0h2m1 0h2m1 0h1m1 0h1m2 0h1m1 0h3m1 0h1m-29 1h1m1 0h3m1 0h1m5 0h2m2 0h1m2 0h1m2 0h1m1 0h3m1 0h1m-29 1h1m5 0h1m5 0h2m1 0h1m1 0h1m1 0h1m2 0h1m5 0h1m-29 1h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-19 1h3m2 0h1m1 0h1m1 0h1m-19 1h3m1 0h2m2 0h2m2 0h1m4 0h1m7 0h2m-28 1h3m1 0h2m1 0h1m1 0h1m1 0h1m1 0h3m2 0h1m1 0h1m1 0h4m2 0h1m-26 1h1m1 0h2m1 0h5m3 0h3m1 0h1m1 0h2m1 0h3m-28 1h3m4 0h1m1 0h3m2 0h2m2 0h3m3 0h1m3 0h1m-28 1h1m3 0h4m3 0h1m2 0h4m2 0h1m1 0h1m1 0h1m1 0h2m-24 1h1m3 0h2m1 0h2m5 0h2m1 0h2m1 0h2m1 0h1m-28 1h1m4 0h1m2 0h1m4 0h1m3 0h2m1 0h5m1 0h2m-29 1h1m2 0h2m4 0h5m6 0h2m2 0h2m1 0h2m-29 1h4m1 0h2m1 0h1m1 0h1m1 0h2m4 0h1m5 0h2m1 0h1m-26 1h1m1 0h2m1 0h1m1 0h2m6 0h2m-19 1h1m3 0h1m1 0h1m1 0h1m2 0h1m1 0h2m2 0h1m2 0h1m1 0h1m2 0h1m-23 1h1m3 0h2m1 0h1m2 0h6m1 0h3m2 0h2m1 0h1m-28 1h6m1 0h1m1 0h2m3 0h1m1 0h1m1 0h6m2 0h1m-20 1h3m1 0h3m1 0h5m3 0h2m1 0h1m-28 1h7m2 0h2m2 0h1m2 0h2m1 0h2m1 0h1m1 0h1m1 0h2m-28 1h1m5 0h1m1 0h3m4 0h1m2 0h1m1 0h1m3 0h1m2 0h1m-28 1h1m1 0h3m1 0h1m4 0h1m1 0h3m2 0h1m1 0h8m-28 1h1m1 0h3m1 0h1m1 0h1m1 0h2m7 0h1m4 0h1m1 0h2m-28 1h1m1 0h3m1 0h1m1 0h2m1 0h1m4 0h2m2 0h1m2 0h1m4 0h1m-29 1h1m5 0h1m1 0h1m1 0h1m2 0h1m1 0h1m3 0h1m2 0h1m1 0h2m1 0h1m-28 1h7m2 0h3m6 0h4m1 0h1m3 0h1"/></g></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="tg-text-title">Telegram-группа инноваторов</div>
|
||||||
|
<div class="tg-text-body">
|
||||||
|
Отсканируй QR или жми на кнопку. Можно показать свой проект, попросить помощь, прислать идею.
|
||||||
|
</div>
|
||||||
|
<a href="https://t.me/+gsFeUQf8t-Q4MjMy" target="_blank" rel="noopener" class="tg-cta">
|
||||||
|
Открыть в Telegram →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- DARK CTA -->
|
<!-- DARK CTA -->
|
||||||
<section class="section" style="border-top: none; padding-bottom: 64px;">
|
<section class="section" style="border-top: none; padding-bottom: 64px;">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="dark-section">
|
<div class="dark-section">
|
||||||
<h2 class="dark-title">Запусти свой проект сегодня</h2>
|
<h2 class="dark-title">Готов попробовать?</h2>
|
||||||
<p class="dark-sub">
|
<p class="dark-sub">
|
||||||
К концу дня — рабочий MVP в среде Казахтелеком. Первый шаг сделан.
|
Жми «Войти» наверху — введи своё имя — и через 5 секунд ты в своей папке с готовыми файлами.
|
||||||
</p>
|
</p>
|
||||||
<a href="https://telecom.quest" target="_blank" rel="noopener" class="dark-cta">
|
<button type="button" class="dark-cta" onclick="document.getElementById('nav-auth').click()" style="border:none;cursor:pointer;font-family:inherit">
|
||||||
Открыть telecom.quest →
|
Войти и начать →
|
||||||
</a>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- FOOTER -->
|
<!-- FOOTER -->
|
||||||
<footer>
|
<footer>
|
||||||
<span class="footer-copy">Казахтелеком · Финансовый департамент · Воркшоп по вайб-кодингу</span>
|
<span class="footer-copy">Казахтелеком · Движение инноваторов</span>
|
||||||
<div class="footer-links">
|
<div class="footer-links">
|
||||||
<a href="https://claude.ai" target="_blank" rel="noopener" class="footer-link">Claude Desktop</a>
|
<a href="https://claude.ai/downloads" target="_blank" rel="noopener" class="footer-link">Claude</a>
|
||||||
<a href="https://telecom.quest" target="_blank" rel="noopener" class="footer-link">telecom.quest</a>
|
<a href="https://git.telecom.quest" target="_blank" rel="noopener" class="footer-link">Gitea</a>
|
||||||
|
<a href="https://t.me/+gsFeUQf8t-Q4MjMy" target="_blank" rel="noopener" class="footer-link">Telegram</a>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
@ -1244,6 +1519,41 @@ const GLOSSARY = [
|
|||||||
term: 'Промпт',
|
term: 'Промпт',
|
||||||
abbr: 'Prompt',
|
abbr: 'Prompt',
|
||||||
definition: 'Твоя инструкция для Claude. Чем точнее описание — тем точнее результат. Хороший промпт = хороший PRD: контекст, задача, ограничения, критерий успеха. Всё что ты пишешь в Claude Desktop — это промпты.'
|
definition: 'Твоя инструкция для Claude. Чем точнее описание — тем точнее результат. Хороший промпт = хороший PRD: контекст, задача, ограничения, критерий успеха. Всё что ты пишешь в Claude Desktop — это промпты.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
term: 'Terminal',
|
||||||
|
abbr: 'Terminal',
|
||||||
|
definition: '<strong>Чёрный экран, куда пишут команды.</strong> В VS Code открывается снизу клавишей <code>Ctrl + `</code> (или через меню View → Terminal). Большинство магии происходит там — например, запуск <code>claude code</code>.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
term: 'Dream to be',
|
||||||
|
abbr: 'Dream',
|
||||||
|
definition: 'Самая лучшая версия твоего решения, как ты её видишь в идеале. Опиши её в PRD без оглядки на «реально ли это» — Claude сам подскажет, что упростить.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
term: 'Git',
|
||||||
|
abbr: 'Git',
|
||||||
|
definition: 'Хранилище версий проекта. Каждое изменение записывается с подписью «когда» и «кто». Можно вернуться к любой прошлой версии. В VS Code это панель слева <strong>«Source Control»</strong> — кнопкой Commit & Push отправляешь свою работу в kt-innovators на git.telecom.quest.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
term: 'CSV',
|
||||||
|
abbr: 'CSV',
|
||||||
|
definition: 'Текстовый файл табличных данных. Excel открывает его как обычную таблицу. Хорош тем, что его легко читает и человек, и Claude — отдай CSV ИИ и попроси «найди аномалии» / «построй график».'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
term: 'Markdown',
|
||||||
|
abbr: '.md',
|
||||||
|
definition: '<strong>Файл <code>.md</code></strong> — обычный текст с минимальным форматированием (заголовки, списки, ссылки). PRD.md, TRD.md, README.md — всё это markdown. Открывается в любом редакторе.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
term: 'Zorro',
|
||||||
|
abbr: 'Zorro',
|
||||||
|
definition: 'Внутренняя система КТ для исполнения bpmn-процессов. Туда твой MVP может подключиться, чтобы стать частью корпоративной автоматизации. Сегодня знать про неё не обязательно — Claude сам справится по файлу ZORRO.md.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
term: 'Camunda 7',
|
||||||
|
abbr: 'Camunda',
|
||||||
|
definition: 'Опциональный редактор bpmn-схем для тех, кто хочет рисовать процессы руками. Если впервые слышишь — пропусти, Claude нарисует схему за тебя.'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user