Update content for vibe2

- Add side announcement block (VIBECODING password)
- Replace section 03 with AI accounts registration (Claude, ChatGPT, Gemini)
- Simplify section 04 (Action Plan) language
- Rename Gitea to Git
- Remove Terminal, Zorro, Camunda 7 from glossary
- Clean Zorro/GITEA.md refs from other sections

index.html

@@ -1495,9 +1495,51 @@ footer {
   line-height: 1.5;
 }
 
+/* Side announcement */
+.vibe-announce {
+  position: fixed;
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 100;
+  background: var(--blue);
+  color: var(--text-on-blue);
+  padding: 16px 18px;
+  border-radius: 12px;
+  box-shadow: var(--shadow-card);
+  max-width: 200px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.vibe-announce-title {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-bottom: 6px;
+  letter-spacing: 0.06em;
+}
+.vibe-announce-pass {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 1.05rem;
+  font-weight: 600;
+  background: rgba(255,255,255,0.18);
+  padding: 6px 10px;
+  border-radius: 6px;
+  display: inline-block;
+  margin-top: 4px;
+  letter-spacing: 0.04em;
+}
+@media (max-width: 1200px) {
+  .vibe-announce { display: none; }
+}
+
 </style>
 </head>
 <body>
+  <aside class="vibe-announce" aria-label="Объявление">
+    <div class="vibe-announce-title">VIBECODING</div>
+    <div>Пароль:</div>
+    <div class="vibe-announce-pass">123456789</div>
+  </aside>
   <div class="frame">
 
     <!-- NAV -->
@@ -1722,13 +1764,13 @@ footer {
         </div>
       </section>
 
-      <!-- SECTION 3: WHAT YOU NEED -->
+      <!-- SECTION 3: REGISTER AI ACCOUNTS -->
       <section class="section" id="tools">
         <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">
-            Установить — минут пять. Никаких регистраций корпоративных и API-ключей.
+            До воркшопа создай бесплатные аккаунты в Claude, ChatGPT и Gemini. Можно через Google — 1 минута на каждый. Не нужно платить и не нужно API-ключи.
           </p>
 
           <div class="tools-grid">
@@ -1740,10 +1782,10 @@ footer {
               </div>
               <div class="tool-name">Claude</div>
               <div class="tool-role">
-                ИИ-помощник. Описываешь задачу словами — получаешь готовый план или код. Скачай приложение или используй в браузере.
+                Anthropic. Лучший для длинных описаний и для генерации кода. Основной инструмент на воркшопе.
               </div>
-              <a href="https://claude.ai/downloads" target="_blank" rel="noopener" class="tool-link">
+              <a href="https://claude.ai" target="_blank" rel="noopener" class="tool-link">
-                claude.ai/downloads
+                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>
@@ -1753,37 +1795,34 @@ footer {
             <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"/>
+                  <circle cx="12" cy="12" r="9"/>
+                  <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
                 </svg>
               </div>
-              <div class="tool-name">VS Code в браузере</div>
+              <div class="tool-name">ChatGPT</div>
               <div class="tool-role">
-                Твой редактор кода и терминал. Кликнул «Войти» наверху — попал в свою папку. Никаких установок.
+                OpenAI. Универсал. Хорош для брейншторма и быстрых ответов. Запасной канал, если Claude занят.
               </div>
-              <a href="https://vibe.telecom.quest" class="tool-link">
+              <a href="https://chatgpt.com" target="_blank" rel="noopener" class="tool-link">
-                vibe.telecom.quest
+                chatgpt.com
                 <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 optional">
+            <div class="tool-card">
-              <span class="opt-badge">опционально</span>
               <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">
-                  <rect x="3" y="3" width="7" height="7" rx="1"/>
+                  <path d="M12 2l2.5 7.5L22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5z"/>
-                  <rect x="14" y="3" width="7" height="7" rx="1"/>
-                  <rect x="3" y="14" width="7" height="7" rx="1"/>
-                  <path d="M14 17.5h7M17.5 14v7"/>
                 </svg>
               </div>
-              <div class="tool-name">Camunda Modeler</div>
+              <div class="tool-name">Gemini</div>
               <div class="tool-role">
-                Для тех, кто хочет рисовать bpmn-процессы руками. Если впервые слышишь про bpmn — пропусти, Claude нарисует за тебя.
+                Google. Силён в работе с Google-документами и таблицами. Удобен, если данные уже в Google Drive.
               </div>
-              <a href="https://camunda.com/download" target="_blank" rel="noopener" class="tool-link">
+              <a href="https://gemini.google.com" target="_blank" rel="noopener" class="tool-link">
-                camunda.com/download
+                gemini.google.com
                 <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>
@@ -1884,7 +1923,7 @@ footer {
           <div class="section-label">04 — Action Plan</div>
           <h2 class="section-title">Четыре шага<br><em>до рабочего MVP</em></h2>
           <p class="section-body">
-            От «у меня есть боль» до «вот работающее приложение». Каждый шаг занимает 10–30 минут.
+            От «у меня есть боль» до «вот работающее приложение». Каждый шаг — 10–30 минут.
           </p>
 
           <div class="plan-flow">
@@ -1892,23 +1931,23 @@ footer {
               <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>, <a href="GITEA.md" target="_blank"><code>GITEA.md</code></a>.
+                Нажми <b>«Войти»</b> наверху, введи ФИО — откроется твой редактор кода. Внутри уже готовый файл <code>PRD.md</code> (для идеи) и <code>TRD.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-title">Опиши свою задачу в PRD.md</div>
               <div class="plan-step-desc">
-                Открой <code>PRD.md</code>. Простыми словами: что болит, кто пользователь, какой результат хочешь. Без терминов и кода.
+                <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-title">Попроси Claude сделать TRD</div>
               <div class="plan-step-desc">
-                Открой Claude. Приложи <code>PRD.md</code> + <a href="GITEA.md" target="_blank"><code>GITEA.md</code></a>. Скажи: «Сделай TRD на основе PRD и GITEA». Результат сохрани в <code>TRD.md</code>.
+                Открой Claude, скинь свой <code>PRD.md</code> и попроси: «Сделай TRD по этому PRD». <code>TRD.md</code> — это твоя идея, переведённая на язык кода. Claude напишет, ты сохранишь.
               </div>
             </div>
 
@@ -1916,7 +1955,7 @@ footer {
               <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 в твоей папке.
+                В редакторе снизу открой строку для команд и напиши <code>claude code</code>. Скажи: «реализуй TRD.md». Через 10–20 минут — рабочее приложение в твоей папке.
               </div>
             </div>
           </div>
@@ -2028,7 +2067,7 @@ footer {
                 </svg>
               </div>
               <div class="eq-note-text">
-                <strong>Sandbox — официальная среда КТ.</strong> Mock-копия реальной инфраструктуры — Zorro, базы, очереди. Можно ломать и переделывать, ничего ценного не сломаешь.
+                <strong>Sandbox — официальная среда КТ.</strong> Mock-копия реальной инфраструктуры — базы, очереди, сервисы. Можно ломать и переделывать, ничего ценного не сломаешь.
               </div>
             </div>
             <div class="eq-note-item">
@@ -2039,7 +2078,7 @@ footer {
                 </svg>
               </div>
               <div class="eq-note-text">
-                <strong>Документация и помощь рядом.</strong> <a href="GITEA.md" target="_blank">GITEA.md</a> уже в твоей папке. Telegram-чат — для вопросов. Админы платформы — у тебя за плечом.
+                <strong>Документация и помощь рядом.</strong> Справочные файлы лежат в твоей папке. Telegram-чат — для вопросов. Админы платформы — у тебя за плечом.
               </div>
             </div>
           </div>
@@ -2066,7 +2105,7 @@ footer {
           <div class="section-label">08 — Словарь</div>
           <h2 class="section-title">Термины,<br><em>которые услышишь</em></h2>
           <p class="section-body">
-            14 слов, которые встретятся сегодня. Без технического жаргона. Листай стрелками или свайпом.
+            11 слов, которые встретятся сегодня. Без технического жаргона. Листай стрелками или свайпом.
           </p>
 
           <div class="glossary-slider">
@@ -2075,7 +2114,7 @@ footer {
               <button type="button" id="gloss-prev" class="gloss-nav-btn" aria-label="Назад">
                 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="10,3 5,8 10,13"/></svg>
               </button>
-              <span class="gloss-counter" id="gloss-counter">1 / 14</span>
+              <span class="gloss-counter" id="gloss-counter">1 / 11</span>
               <button type="button" id="gloss-next" class="gloss-nav-btn" aria-label="Вперёд">
                 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,3 11,8 6,13"/></svg>
               </button>
@@ -2130,7 +2169,7 @@ footer {
         <span class="footer-copy">Казахтелеком · Движение инноваторов</span>
         <div class="footer-links">
           <a href="https://claude.ai/downloads" target="_blank" rel="noopener" class="footer-link">Claude</a>
-          <a href="https://git.telecom.quest" target="_blank" rel="noopener" class="footer-link">Gitea</a>
+          <a href="https://git.telecom.quest" target="_blank" rel="noopener" class="footer-link">Git</a>
           <a href="https://t.me/+9UI8dt-60l8yMzJi" target="_blank" rel="noopener" class="footer-link">Telegram</a>
         </div>
       </footer>
@@ -2176,11 +2215,6 @@ const GLOSSARY = [
     abbr: 'Prompt',
     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',
@@ -2200,16 +2234,6 @@ const GLOSSARY = [
     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 сам справится по файлу <a href="GITEA.md" target="_blank">GITEA.md</a>.'
-  },
-  {
-    term: 'Camunda 7',
-    abbr: 'Camunda',
-    definition: 'Опциональный редактор bpmn-схем для тех, кто хочет рисовать процессы руками. Если впервые слышишь — пропусти, Claude нарисует схему за тебя.'
   }
 ];
 
@@ -2285,17 +2309,14 @@ const PROMPTS = [
   {
     step: 'Шаг 2',
     title: 'Сгенерируй TRD из PRD',
-    context: 'Когда PRD.md готов — попроси Claude перевести его в техническое задание. Зорро-документация ему уже доступна.',
+    context: 'Когда PRD.md готов — попроси Claude перевести его в техническое задание.',
-    body: `Прочитай два файла:
+    body: `Прочитай файл PRD.md (моя идея, написана простыми словами).
-- PRD.md (моя идея, написана простыми словами)
-- GITEA.md (справочник по Gitea Pages в Казахтелеком)
 
 Сгенерируй TRD.md — техническое задание для разработки MVP:
-- Какие сущности данных нужны
+- Какие данные нужны
-- Какие BPMN-процессы (если нужны)
-- Какие API-эндпоинты Zorro надо вызывать
 - Минимальный стек (HTML/CSS/JS, или Python+FastAPI, или Node.js — выбери проще)
 - Структура папок проекта
+- Как запускать
 
 Цель — рабочий MVP за час, не идеальная архитектура.
 Сохрани результат в TRD.md, заменив текущее содержимое файла.`