mirror of
https://github.com/wasrusgen/wasrusgen1-crm.git
synced 2026-06-03 15:44:45 +00:00
294 lines
23 KiB
HTML
294 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Елена · Триада методологий — @wasrusgen1 | КОНСАЛТИНГ</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||
:root{--primary:#047857;--dark:#064E3B;--mid:#10B981;--light:#ECFDF5;--ink:#0F0F1A;--bg:#F5F6F8;--white:#fff;--border:#E5E7EB;--text:#1A1A2E;--muted:#6B7280;--deep:#022C22}
|
||
html,body{height:100%;overflow:hidden}
|
||
body{font-family:'Inter',sans-serif;background:var(--ink);color:var(--text)}
|
||
.deck{height:100vh;width:100vw;position:relative}
|
||
.slide{position:absolute;inset:0;padding:64px 80px;display:none;flex-direction:column;background:var(--bg);opacity:0;transition:opacity .35s}
|
||
.slide.active{display:flex;opacity:1}
|
||
.slide.dark{background:var(--ink);color:#fff}
|
||
.slide.gradient{background:linear-gradient(145deg,var(--deep) 0%,var(--dark) 45%,var(--primary) 100%);color:#fff}
|
||
.s-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:14px}
|
||
.slide.dark .s-label,.slide.gradient .s-label{color:var(--mid)}
|
||
.s-title{font-family:'Montserrat';font-weight:800;font-size:42px;letter-spacing:-1.5px;color:var(--ink);margin-bottom:14px;line-height:1.1}
|
||
.slide.dark .s-title,.slide.gradient .s-title{color:#fff}
|
||
.s-sub{font-size:18px;color:var(--muted);max-width:760px;line-height:1.55;margin-bottom:40px}
|
||
.slide.dark .s-sub,.slide.gradient .s-sub{color:rgba(255,255,255,.7)}
|
||
.s-body{flex:1;display:flex;flex-direction:column;justify-content:center}
|
||
|
||
/* Cover */
|
||
.cover-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:100px;padding:8px 16px;font-size:13px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:36px;backdrop-filter:blur(8px)}
|
||
.cover-h1{font-family:'Montserrat';font-weight:900;font-size:64px;color:#fff;letter-spacing:-2.5px;line-height:1.05;margin-bottom:20px;max-width:900px}
|
||
.cover-h1 em{font-style:normal;color:var(--mid)}
|
||
.cover-sub{font-size:20px;color:rgba(255,255,255,.65);max-width:680px;line-height:1.5;margin-bottom:48px}
|
||
.cover-logo{position:absolute;bottom:64px;left:80px;display:flex;align-items:center;gap:14px}
|
||
.cover-logo-ic{width:44px;height:44px;background:var(--primary);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Montserrat';font-weight:900;color:#fff;font-size:22px}
|
||
.cover-logo-stack{display:flex;flex-direction:column;line-height:1}
|
||
.cover-logo-handle{font-family:'Montserrat';font-weight:500;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.5);margin-bottom:4px}
|
||
.cover-logo-name{font-family:'Montserrat';font-weight:700;font-size:22px;letter-spacing:-.5px;color:rgba(255,255,255,.92)}
|
||
|
||
/* Layers / triad */
|
||
.layers{display:flex;flex-direction:column;gap:16px;max-width:920px}
|
||
.layer{display:flex;align-items:center;gap:24px;background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:22px 28px;position:relative;overflow:hidden}
|
||
.layer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px}
|
||
.layer.l1::before{background:#6366F1}.layer.l2::before{background:var(--primary)}.layer.l3::before{background:#F59E0B}
|
||
.layer-n{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-family:'Montserrat';font-weight:900;font-size:24px;color:#fff;flex-shrink:0}
|
||
.layer.l1 .layer-n{background:#6366F1}.layer.l2 .layer-n{background:var(--primary)}.layer.l3 .layer-n{background:#F59E0B}
|
||
.layer-body{flex:1}
|
||
.layer-name{font-family:'Montserrat';font-weight:800;font-size:20px;color:var(--ink);margin-bottom:3px}
|
||
.layer-q{font-size:14px;color:var(--muted)}
|
||
.layer-feeds{font-size:12px;font-weight:700;color:var(--primary);background:var(--light);border-radius:8px;padding:8px 14px;white-space:nowrap;flex-shrink:0}
|
||
|
||
/* Flow boxes */
|
||
.flow{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
|
||
.fbox{flex:1;min-width:160px;background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:20px;text-align:center}
|
||
.fbox.accent{background:var(--ink);color:#fff;border:none}
|
||
.fbox-ic{font-size:30px;margin-bottom:10px}
|
||
.fbox-t{font-family:'Montserrat';font-weight:800;font-size:16px;margin-bottom:6px}
|
||
.fbox-d{font-size:13px;color:var(--muted);line-height:1.4}
|
||
.fbox.accent .fbox-d{color:rgba(255,255,255,.6)}
|
||
.farrow{display:flex;align-items:center;color:var(--mid);font-size:24px;font-weight:800}
|
||
|
||
/* Table */
|
||
.ptable{width:100%;border-collapse:collapse;background:var(--white);border-radius:14px;overflow:hidden;border:1.5px solid var(--border)}
|
||
.ptable th{background:var(--light);padding:14px 18px;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--primary)}
|
||
.ptable td{padding:14px 18px;border-top:1px solid var(--border);font-size:15px;color:#374151}
|
||
.ptable td.c{text-align:center;font-size:18px}
|
||
.ptable tr:hover td{background:#fafbfc}
|
||
.tick{color:var(--primary);font-weight:800}.dash{color:#cbd5e1}
|
||
|
||
/* Cards grid */
|
||
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||
.card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:26px}
|
||
.card-ic{width:52px;height:52px;border-radius:13px;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
|
||
.card-t{font-family:'Montserrat';font-weight:800;font-size:18px;color:var(--ink);margin-bottom:8px}
|
||
.card-d{font-size:14px;color:var(--muted);line-height:1.5}
|
||
|
||
/* Big stat */
|
||
.stats{display:flex;gap:48px;margin-top:20px}
|
||
.stat-v{font-family:'Montserrat';font-weight:900;font-size:56px;color:var(--mid);letter-spacing:-2px;line-height:1}
|
||
.stat-l{font-size:14px;color:rgba(255,255,255,.6);margin-top:8px}
|
||
|
||
/* IDEF0 mini */
|
||
.idef-demo{display:grid;grid-template-columns:auto 1fr auto;gap:10px;max-width:560px;margin:0 auto;align-items:center}
|
||
.idef-c-row,.idef-m-row{grid-column:2;text-align:center}
|
||
.idef-tag{display:inline-block;font-size:12px;font-weight:600;padding:5px 12px;border-radius:8px;margin:2px}
|
||
.tag-c{background:#FEF3C7;color:#92400E}.tag-i{background:#EFF6FF;color:#1E40AF}.tag-o{background:#ECFDF5;color:#047857}.tag-m{background:#F5F3FF;color:#6D28D9}
|
||
.idef-fn{background:var(--white);border:2.5px solid var(--primary);border-radius:14px;padding:24px;text-align:center;font-family:'Montserrat';font-weight:800;font-size:17px;color:var(--dark)}
|
||
|
||
/* Checkpoints */
|
||
.cps{display:flex;flex-direction:column;gap:12px;max-width:760px}
|
||
.cp{display:flex;align-items:center;gap:16px;background:var(--white);border:1.5px solid var(--border);border-radius:13px;padding:16px 22px}
|
||
.cp-n{width:40px;height:40px;border-radius:50%;background:#FEF2F2;border:2px solid #FECACA;color:#DC2626;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:18px}
|
||
.cp-t{font-size:15px;font-weight:600;color:var(--text)}
|
||
|
||
/* Nav */
|
||
.nav{position:fixed;bottom:28px;right:36px;display:flex;align-items:center;gap:14px;z-index:100}
|
||
.nav-btn{width:46px;height:46px;border-radius:50%;background:var(--primary);border:none;color:#fff;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(4,120,87,.35);transition:background .15s,transform .15s}
|
||
.nav-btn:hover{background:var(--dark);transform:translateY(-1px)}
|
||
.counter{position:fixed;bottom:36px;left:36px;font-size:13px;font-weight:600;color:rgba(255,255,255,.5);z-index:100}
|
||
.progress{position:fixed;top:0;left:0;height:3px;background:var(--mid);z-index:100;transition:width .35s}
|
||
.kbd-hint{position:fixed;bottom:36px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(255,255,255,.35);z-index:100}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="progress" id="prog"></div>
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- 1 COVER -->
|
||
<section class="slide gradient active">
|
||
<div class="cover-tag">@wasrusgen1 · КОНСАЛТИНГ · Архитектура продукта</div>
|
||
<h1 class="cover-h1">От хаоса в бизнесе<br>до <em>ТЗ для разработчика</em></h1>
|
||
<p class="cover-sub">Как Елена превращает интервью с клиентом в готовое техническое задание на программу. Триада методологий моделирования бизнеса.</p>
|
||
<div class="cover-logo"><div class="cover-logo-ic">@</div><div class="cover-logo-stack"><span class="cover-logo-handle">@wasrusgen1</span><span class="cover-logo-name">КОНСАЛТИНГ</span></div></div>
|
||
</section>
|
||
|
||
<!-- 2 PROBLEM -->
|
||
<section class="slide">
|
||
<div class="s-label">Проблема клиента</div>
|
||
<div class="s-title">Клиент приходит с хаосом</div>
|
||
<p class="s-sub">Малый и средний бизнес говорит одно и то же — тремя разными способами.</p>
|
||
<div class="s-body">
|
||
<div class="cards">
|
||
<div class="card"><div class="card-ic">🌀</div><div class="card-t">«У меня бардак»</div><div class="card-d">Не понимаю что происходит, всё в голове и заметках, нет управленческой картины</div></div>
|
||
<div class="card"><div class="card-ic">⚙️</div><div class="card-t">«Хочу автоматизировать»</div><div class="card-d">Есть процесс, который надо ускорить и оцифровать — но не знаю как подступиться</div></div>
|
||
<div class="card"><div class="card-ic">📈</div><div class="card-t">«Хочу расти»</div><div class="card-d">Упёрся в потолок, работаю много — денег мало, без системы дальше нельзя</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3 RESULT -->
|
||
<section class="slide dark">
|
||
<div class="s-label">Что клиент получает</div>
|
||
<div class="s-title">Не совет — готовое ТЗ на программу</div>
|
||
<p class="s-sub">Конечный артефакт — техническое задание для разработчика: экраны, данные, архитектура. Программа, в которой будет работать его компания.</p>
|
||
<div class="s-body">
|
||
<div class="flow">
|
||
<div class="fbox"><div class="fbox-ic">🎙️</div><div class="fbox-t">Интервью</div><div class="fbox-d">Елена слушает</div></div>
|
||
<div class="farrow">→</div>
|
||
<div class="fbox"><div class="fbox-ic">🗺️</div><div class="fbox-t">Модель бизнеса</div><div class="fbox-d">3 слоя методологий</div></div>
|
||
<div class="farrow">→</div>
|
||
<div class="fbox"><div class="fbox-ic">🖥️</div><div class="fbox-t">Проект ПО</div><div class="fbox-d">Экраны + данные</div></div>
|
||
<div class="farrow">→</div>
|
||
<div class="fbox accent"><div class="fbox-ic">📋</div><div class="fbox-t">ТЗ</div><div class="fbox-d">Разработчику</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4 TRIAD -->
|
||
<section class="slide">
|
||
<div class="s-label">Ядро методологии</div>
|
||
<div class="s-title">Триада — три слоя одной модели</div>
|
||
<p class="s-sub">Не три отдельных схемы. Каждый слой отвечает на свой вопрос и питает свою часть ТЗ.</p>
|
||
<div class="s-body">
|
||
<div class="layers">
|
||
<div class="layer l1"><div class="layer-n">1</div><div class="layer-body"><div class="layer-name">Business Model Canvas</div><div class="layer-q">ЗАЧЕМ бизнес, для кого, как зарабатывает — стратегический слой</div></div><div class="layer-feeds">→ Часть A · Контекст</div></div>
|
||
<div class="layer l2"><div class="layer-n">2</div><div class="layer-body"><div class="layer-name">IDEF0</div><div class="layer-q">КАК устроена работа: функции, данные, роли — функциональный слой</div></div><div class="layer-feeds">→ Части B, C · Модули, данные</div></div>
|
||
<div class="layer l3"><div class="layer-n">3</div><div class="layer-body"><div class="layer-name">VSM · Value Stream Mapping</div><div class="layer-q">ГДЕ теряется время и деньги, что автоматизировать первым — поток ценности</div></div><div class="layer-feeds">→ Часть F · Приоритеты</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5 IDEF0 detail -->
|
||
<section class="slide">
|
||
<div class="s-label">Слой 2 · Ядро</div>
|
||
<div class="s-title">IDEF0 — функция как ICOM</div>
|
||
<p class="s-sub">Каждый узел бизнеса описывается строго: что преобразуется, что управляет, что выходит, кто выполняет. Эта структура напрямую мапится в проект программы.</p>
|
||
<div class="s-body">
|
||
<div class="idef-demo">
|
||
<div class="idef-c-row"><span class="idef-tag tag-c">Нормы · регламенты · ТЗ</span><div style="font-size:11px;color:#92400E;margin-top:2px">CONTROL ↓ управляет</div></div>
|
||
<div class="idef-tag tag-i" style="grid-column:1;justify-self:end">INPUT →<br>сырьё, данные</div>
|
||
<div class="idef-fn">Раскроить ткань</div>
|
||
<div class="idef-tag tag-o" style="grid-column:3;justify-self:start">→ OUTPUT<br>результат</div>
|
||
<div class="idef-m-row"><div style="font-size:11px;color:#6D28D9;margin-bottom:2px">MECHANISM ↑ кто/чем</div><span class="idef-tag tag-m">люди · оборудование · ПО</span></div>
|
||
</div>
|
||
<div style="text-align:center;margin-top:36px;font-size:15px;color:var(--muted)">Input → <b style="color:var(--ink)">поля формы</b> · Control → <b style="color:var(--ink)">бизнес-правила</b> · Output → <b style="color:var(--ink)">что показывает</b> · Mechanism → <b style="color:var(--ink)">роли и доступы</b></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6 SELECT -->
|
||
<section class="slide">
|
||
<div class="s-label">Выбор методологии</div>
|
||
<div class="s-title">Елена подбирает слои под бизнес</div>
|
||
<p class="s-sub">Распознаёт тип бизнеса на интервью и применяет нужный набор. Руслан утверждает выбор.</p>
|
||
<div class="s-body">
|
||
<table class="ptable">
|
||
<tr><th>Тип бизнеса</th><th style="text-align:center">Canvas</th><th style="text-align:center">IDEF0</th><th style="text-align:center">VSM</th><th>Почему</th></tr>
|
||
<tr><td><b>Блогер / эксперт</b></td><td class="c"><span class="tick">✓</span></td><td class="c" style="color:#9ca3af;font-size:13px">лёгкий</td><td class="c"><span class="dash">—</span></td><td>Нет производства, важна монетизация</td></tr>
|
||
<tr><td><b>Услуги</b></td><td class="c"><span class="tick">✓</span></td><td class="c"><span class="tick">✓</span></td><td class="c"><span class="dash">—</span></td><td>Процессы + стратегия</td></tr>
|
||
<tr><td><b>Производство</b></td><td class="c"><span class="tick">✓</span></td><td class="c"><span class="tick">✓</span></td><td class="c"><span class="tick">✓</span></td><td>Поток материала критичен</td></tr>
|
||
<tr><td><b>Торговля</b></td><td class="c"><span class="tick">✓</span></td><td class="c"><span class="tick">✓</span></td><td class="c"><span class="tick">✓</span></td><td>Логистика, оборачиваемость</td></tr>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7 PIPELINE -->
|
||
<section class="slide dark">
|
||
<div class="s-label">Полная картина</div>
|
||
<div class="s-title">От интервью к ТЗ</div>
|
||
<div class="s-body">
|
||
<div style="max-width:880px;margin:0 auto;text-align:center">
|
||
<div style="font-family:Montserrat;font-weight:800;font-size:17px;color:var(--mid);margin-bottom:8px">🎙️ ИНТЕРВЬЮ → Елена анализирует</div>
|
||
<div style="color:rgba(255,255,255,.4);margin-bottom:18px">↓ ✋ «Это производство → нужны все 3 слоя» — Руслан утверждает</div>
|
||
<div style="display:flex;gap:14px;justify-content:center;margin-bottom:18px">
|
||
<div style="flex:1;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:12px;padding:16px"><b style="color:#a5b4fc">CANVAS</b><div style="font-size:12px;color:rgba(255,255,255,.5);margin-top:4px">стратегия</div></div>
|
||
<div style="flex:1;background:rgba(16,185,129,.15);border:1px solid rgba(16,185,129,.3);border-radius:12px;padding:16px"><b style="color:var(--mid)">IDEF0</b><div style="font-size:12px;color:rgba(255,255,255,.5);margin-top:4px">функции</div></div>
|
||
<div style="flex:1;background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:16px"><b style="color:#fbbf24">VSM</b><div style="font-size:12px;color:rgba(255,255,255,.5);margin-top:4px">поток</div></div>
|
||
</div>
|
||
<div style="color:rgba(255,255,255,.4);margin-bottom:18px">↓ собираются в единый документ</div>
|
||
<div style="background:linear-gradient(135deg,var(--dark),var(--primary));border-radius:14px;padding:22px;font-family:Montserrat;font-weight:800;font-size:20px">📋 ФИНАЛЬНОЕ ТЗ → Разработчик / SaaS</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8 TZ STRUCTURE -->
|
||
<section class="slide">
|
||
<div class="s-label">Финальный артефакт</div>
|
||
<div class="s-title">Структура ТЗ · 6 частей</div>
|
||
<p class="s-sub">Каждая часть питается своим источником. На каждой — контрольная точка Руслана.</p>
|
||
<div class="s-body">
|
||
<div class="cards" style="grid-template-columns:repeat(3,1fr);gap:14px">
|
||
<div class="card" style="padding:20px"><div class="card-t" style="font-size:16px"><span style="color:var(--primary)">A</span> · Бизнес-контекст</div><div class="card-d">Резюме, цель, роли, IDEF0</div></div>
|
||
<div class="card" style="padding:20px"><div class="card-t" style="font-size:16px"><span style="color:var(--primary)">B</span> · Функц. требования</div><div class="card-d">Модули, экраны, правила</div></div>
|
||
<div class="card" style="padding:20px"><div class="card-t" style="font-size:16px"><span style="color:var(--primary)">C</span> · Модель данных</div><div class="card-d">ERD, таблицы, примеры</div></div>
|
||
<div class="card" style="padding:20px"><div class="card-t" style="font-size:16px"><span style="color:var(--primary)">D</span> · Экраны</div><div class="card-d">WebApp + Telegram MiniApp</div></div>
|
||
<div class="card" style="padding:20px"><div class="card-t" style="font-size:16px"><span style="color:var(--primary)">E</span> · Тех. архитектура</div><div class="card-d">БД, серверы, мощности · SaaS</div></div>
|
||
<div class="card" style="padding:20px"><div class="card-t" style="font-size:16px"><span style="color:var(--primary)">F</span> · План реализации</div><div class="card-d">MVP, трудозатраты, бюджет</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 9 CONTROL -->
|
||
<section class="slide">
|
||
<div class="s-label">Принцип контроля</div>
|
||
<div class="s-title">Елена предлагает — Руслан решает</div>
|
||
<p class="s-sub">Не автономный AI. Human-in-the-loop: на каждой части Елена останавливается и показывает результат. Контроль за реализатором.</p>
|
||
<div class="s-body">
|
||
<div class="cps">
|
||
<div class="cp"><div class="cp-n">1</div><div class="cp-t">Верно ли понят бизнес и роли?</div></div>
|
||
<div class="cp"><div class="cp-n">2</div><div class="cp-t">Утверждение набора модулей</div></div>
|
||
<div class="cp"><div class="cp-n">3</div><div class="cp-t">Утверждение модели данных</div></div>
|
||
<div class="cp"><div class="cp-n">4</div><div class="cp-t">Утверждение экранов и UX</div></div>
|
||
<div class="cp"><div class="cp-n">5</div><div class="cp-t">Утверждение технической архитектуры</div></div>
|
||
<div class="cp"><div class="cp-n">6</div><div class="cp-t">Финальное ТЗ — готово к разработке</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 10 STATUS -->
|
||
<section class="slide gradient">
|
||
<div class="s-label">Что уже работает</div>
|
||
<div class="s-title">MVP запущен</div>
|
||
<p class="s-sub">Живая Елена ведёт интервью и строит IDEF0-модель в реальном времени. Не мокап — рабочая система.</p>
|
||
<div class="s-body">
|
||
<div class="stats">
|
||
<div><div class="stat-v">✓</div><div class="stat-l">Чат-интервью<br>в реальном времени</div></div>
|
||
<div><div class="stat-v">IDEF0</div><div class="stat-l">ICOM + декомпозиция<br>+ анализ стрелок</div></div>
|
||
<div><div class="stat-v">3</div><div class="stat-l">слоя методологии<br>триада</div></div>
|
||
<div><div class="stat-v">6</div><div class="stat-l">частей<br>финального ТЗ</div></div>
|
||
</div>
|
||
<div style="margin-top:48px;font-size:15px;color:rgba(255,255,255,.6)">Следующее: селектор методологий · Canvas-билдер · VSM-билдер · генератор ТЗ · мокапы WebApp + MiniApp</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="progress" id="prog"></div>
|
||
<div class="counter"><span id="cur">1</span> / <span id="tot">10</span></div>
|
||
<div class="kbd-hint">← → или пробел для навигации</div>
|
||
<div class="nav">
|
||
<button class="nav-btn" onclick="go(-1)">‹</button>
|
||
<button class="nav-btn" onclick="go(1)">›</button>
|
||
</div>
|
||
|
||
<script>
|
||
const slides=[...document.querySelectorAll('.slide')];
|
||
let cur=0;
|
||
document.getElementById('tot').textContent=slides.length;
|
||
function show(i){
|
||
slides[cur].classList.remove('active');
|
||
cur=Math.max(0,Math.min(slides.length-1,i));
|
||
slides[cur].classList.add('active');
|
||
document.getElementById('cur').textContent=cur+1;
|
||
document.getElementById('prog').style.width=((cur+1)/slides.length*100)+'%';
|
||
}
|
||
function go(d){show(cur+d)}
|
||
document.addEventListener('keydown',e=>{
|
||
if(e.key==='ArrowRight'||e.key===' ')go(1);
|
||
if(e.key==='ArrowLeft')go(-1);
|
||
if(e.key==='Home')show(0);
|
||
if(e.key==='End')show(slides.length-1);
|
||
});
|
||
show(0);
|
||
</script>
|
||
</body>
|
||
</html>
|