436 lines
25 KiB
HTML
436 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||
<title>Встреча 143 · Алекс × Леонид — выжимка и договорённости</title>
|
||
<style>
|
||
:root{
|
||
--bg:#0a0c12;
|
||
--bg2:#0e1120;
|
||
--ink:#f0eeff;
|
||
--mut:#9a97b8;
|
||
--dim:#6f6c8f;
|
||
--vio:#8b5cf6;
|
||
--vio2:#7c6cf5;
|
||
--cyan:#5eead4;
|
||
--amber:#fbbf24;
|
||
--card:rgba(255,255,255,.035);
|
||
--line:rgba(139,92,246,.28);
|
||
--serif:Georgia,"Times New Roman",serif;
|
||
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
|
||
--mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html,body{height:100%}
|
||
body{
|
||
background:var(--bg);
|
||
color:var(--ink);
|
||
font-family:var(--sans);
|
||
overflow:hidden;
|
||
-webkit-font-smoothing:antialiased;
|
||
text-rendering:optimizeLegibility;
|
||
}
|
||
/* ---------- ambient backdrop ---------- */
|
||
.bg{position:fixed;inset:0;z-index:0;pointer-events:none}
|
||
.bg::before{
|
||
content:"";position:absolute;inset:0;
|
||
background:
|
||
radial-gradient(60vw 60vw at 12% -10%, rgba(124,108,245,.20), transparent 62%),
|
||
radial-gradient(55vw 55vw at 105% 112%, rgba(94,234,212,.09), transparent 60%),
|
||
radial-gradient(70vw 40vw at 50% 120%, rgba(139,92,246,.10), transparent 65%),
|
||
linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
|
||
}
|
||
.bg::after{ /* film grain */
|
||
content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
|
||
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.6'/></svg>");
|
||
}
|
||
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
|
||
background:radial-gradient(120vw 90vh at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%)}
|
||
|
||
/* ---------- deck ---------- */
|
||
.deck{position:relative;z-index:2;height:100%}
|
||
.slide{
|
||
position:absolute;inset:0;
|
||
display:flex;flex-direction:column;justify-content:center;
|
||
padding:9vh 8vw 12vh;
|
||
opacity:0;transform:translateY(26px) scale(.985);
|
||
transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);
|
||
pointer-events:none;visibility:hidden;
|
||
}
|
||
.slide.active{opacity:1;transform:none;pointer-events:auto;visibility:visible}
|
||
.slide.prev{transform:translateY(-26px) scale(.985)}
|
||
|
||
.accent{position:absolute;top:0;left:0;right:0;height:6px;
|
||
background:linear-gradient(90deg,var(--vio) 0%,#a78bfa 38%,var(--cyan) 100%);
|
||
box-shadow:0 0 24px rgba(139,92,246,.55)}
|
||
.ghost{
|
||
position:absolute;right:4vw;bottom:2vh;z-index:-1;
|
||
font-weight:900;font-size:clamp(160px,30vw,420px);line-height:1;
|
||
color:transparent;-webkit-text-stroke:1.5px rgba(139,92,246,.13);
|
||
letter-spacing:-.04em;user-select:none}
|
||
|
||
.kicker{
|
||
display:inline-flex;align-items:center;gap:.6em;
|
||
font-size:clamp(11px,1.15vw,14px);font-weight:700;letter-spacing:.24em;
|
||
text-transform:uppercase;color:var(--vio2);margin-bottom:2.4vh;
|
||
}
|
||
.kicker::before{content:"";width:34px;height:2px;background:var(--vio);box-shadow:0 0 12px var(--vio)}
|
||
h1{font-size:clamp(38px,6.6vw,86px);font-weight:900;letter-spacing:-.03em;line-height:1.04}
|
||
h1 em{font-style:normal;background:linear-gradient(92deg,#a78bfa,var(--vio2) 55%,var(--cyan));
|
||
-webkit-background-clip:text;background-clip:text;color:transparent}
|
||
h2{font-size:clamp(28px,4vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.08;margin-bottom:3.6vh}
|
||
h2 .alt{color:var(--vio2)}
|
||
.sub{font-size:clamp(15px,1.6vw,21px);color:var(--mut);max-width:34em;line-height:1.55;margin-top:3vh}
|
||
|
||
.chips{display:flex;flex-wrap:wrap;gap:.7em;margin-top:4.5vh}
|
||
.chip{
|
||
font-family:var(--mono);font-size:clamp(11px,1.05vw,13px);color:var(--mut);
|
||
padding:.55em 1.1em;border:1px solid var(--line);border-radius:999px;
|
||
background:rgba(139,92,246,.07)}
|
||
.chip b{color:var(--ink);font-weight:600}
|
||
|
||
/* ---------- content blocks ---------- */
|
||
.grid{display:grid;gap:1.5vh 1.6vw}
|
||
.g2{grid-template-columns:repeat(2,1fr)}
|
||
.g3{grid-template-columns:repeat(3,1fr)}
|
||
@media(max-width:860px){.g2,.g3{grid-template-columns:1fr}}
|
||
|
||
.card{
|
||
background:var(--card);border:1px solid rgba(255,255,255,.07);
|
||
border-radius:18px;padding:2.6vh 1.6vw;position:relative;overflow:hidden;
|
||
backdrop-filter:blur(6px);
|
||
transition:border-color .3s,transform .3s;
|
||
}
|
||
.card:hover{border-color:var(--line);transform:translateY(-2px)}
|
||
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
|
||
background:linear-gradient(180deg,var(--vio),transparent 85%);opacity:.85}
|
||
.card h3{font-size:clamp(15px,1.45vw,19px);font-weight:700;margin-bottom:1vh;letter-spacing:-.01em}
|
||
.card p,.card li{font-size:clamp(13px,1.28vw,17px);color:var(--mut);line-height:1.62}
|
||
.card p b,.card li b{color:var(--ink);font-weight:600}
|
||
.tag{display:inline-block;font-family:var(--mono);font-size:clamp(10px,.95vw,12px);
|
||
color:var(--cyan);border:1px solid rgba(94,234,212,.3);border-radius:6px;
|
||
padding:.15em .6em;margin-bottom:1.2vh;letter-spacing:.06em}
|
||
.tag.v{color:#c4b5fd;border-color:rgba(139,92,246,.4)}
|
||
.tag.a{color:var(--amber);border-color:rgba(251,191,36,.35)}
|
||
|
||
ul.list{list-style:none;display:grid;gap:1.7vh}
|
||
ul.list li{
|
||
display:flex;gap:1em;align-items:flex-start;
|
||
font-size:clamp(14px,1.5vw,19px);color:var(--mut);line-height:1.6;
|
||
}
|
||
ul.list li::before{
|
||
content:"▸";color:var(--vio);font-size:1.05em;line-height:1.5;
|
||
text-shadow:0 0 14px rgba(139,92,246,.8);flex:0 0 auto}
|
||
ul.list b{color:var(--ink);font-weight:650}
|
||
ul.list .hl{color:var(--cyan)}
|
||
|
||
.quote{
|
||
margin-top:3.2vh;padding:2.4vh 2vw;border-left:3px solid var(--vio);
|
||
background:linear-gradient(90deg,rgba(139,92,246,.12),transparent 72%);
|
||
border-radius:0 14px 14px 0;
|
||
}
|
||
.quote p{font-family:var(--serif);font-style:italic;
|
||
font-size:clamp(17px,2.1vw,27px);line-height:1.45;color:#e4e0ff}
|
||
.quote cite{display:block;margin-top:1.2vh;font-style:normal;font-family:var(--mono);
|
||
font-size:clamp(10px,1vw,13px);color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
|
||
|
||
.num{display:flex;gap:1.1em;align-items:flex-start;padding:1.9vh 0;
|
||
border-bottom:1px dashed rgba(255,255,255,.09)}
|
||
.num:last-child{border-bottom:none}
|
||
.num i{
|
||
font-style:normal;font-family:var(--mono);flex:0 0 auto;
|
||
width:2.1em;height:2.1em;display:grid;place-items:center;border-radius:10px;
|
||
background:rgba(139,92,246,.16);border:1px solid var(--line);
|
||
color:#c4b5fd;font-size:clamp(12px,1.15vw,15px);font-weight:700}
|
||
.num h3{font-size:clamp(15px,1.5vw,19px);font-weight:700;margin-bottom:.5vh}
|
||
.num p{font-size:clamp(13px,1.3vw,16px);color:var(--mut);line-height:1.6}
|
||
.num b{color:var(--ink);font-weight:600}
|
||
|
||
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2vw;align-items:stretch}
|
||
@media(max-width:860px){.vs{grid-template-columns:1fr}.vs .vsx{display:none}}
|
||
.vs .card{height:100%}
|
||
.vs .who{font-family:var(--mono);font-size:clamp(10px,.95vw,12px);letter-spacing:.14em;
|
||
text-transform:uppercase;color:var(--vio2);margin-bottom:1.2vh}
|
||
.vsx{display:grid;place-items:center;color:var(--dim);font-size:clamp(18px,2vw,26px)}
|
||
|
||
.big{font-size:clamp(30px,4.6vw,64px);font-weight:900;letter-spacing:-.03em;line-height:1.1}
|
||
.big em{font-style:normal;color:var(--vio2)}
|
||
|
||
/* ---------- chrome ---------- */
|
||
.progress{position:fixed;left:0;bottom:0;height:3px;z-index:10;width:0;
|
||
background:linear-gradient(90deg,var(--vio),#a78bfa,var(--cyan));
|
||
box-shadow:0 0 14px rgba(139,92,246,.8);transition:width .45s ease}
|
||
.hud{position:fixed;right:2.2vw;bottom:3vh;z-index:10;display:flex;gap:.6em;align-items:center}
|
||
.hud .count{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.1em;margin-right:.8em}
|
||
.hud .count b{color:var(--mut);font-weight:600}
|
||
.hud button{
|
||
width:40px;height:40px;border-radius:12px;cursor:pointer;
|
||
border:1px solid var(--line);background:rgba(139,92,246,.1);color:#c4b5fd;
|
||
font-size:16px;display:grid;place-items:center;transition:.25s}
|
||
.hud button:hover{background:rgba(139,92,246,.25);color:#fff;transform:translateY(-1px)}
|
||
.hint{position:fixed;left:2.2vw;bottom:3vh;z-index:10;
|
||
font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.08em;opacity:.8}
|
||
.brand{position:fixed;top:2.6vh;right:2.2vw;z-index:10;
|
||
font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
|
||
.brand b{color:var(--vio2)}
|
||
.dots{position:fixed;right:1.4vw;top:50%;transform:translateY(-50%);z-index:10;
|
||
display:flex;flex-direction:column;gap:.55em}
|
||
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.16);cursor:pointer;transition:.3s}
|
||
.dots i.on{background:var(--vio);box-shadow:0 0 10px var(--vio);transform:scale(1.35)}
|
||
@media(max-width:700px){.dots{display:none}.hint{display:none}}
|
||
|
||
.end .sig{font-family:var(--mono);font-size:clamp(10px,1vw,13px);color:var(--dim);
|
||
letter-spacing:.18em;text-transform:uppercase;margin-top:5vh}
|
||
|
||
/* ---------- print ---------- */
|
||
@media print{
|
||
body{overflow:visible;background:#0a0c12}
|
||
.bg,.vignette,.hud,.hint,.dots,.progress,.brand{display:none!important}
|
||
.deck{height:auto}
|
||
.slide{position:relative;inset:auto;opacity:1!important;transform:none!important;
|
||
visibility:visible!important;pointer-events:auto;height:100vh;page-break-after:always}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg"></div><div class="vignette"></div>
|
||
<div class="brand">Simbiot · <b>Кооператив 42</b></div>
|
||
|
||
<div class="deck" id="deck">
|
||
|
||
<!-- 01 · TITLE -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">143</div>
|
||
<div class="kicker">Встреча 143 · 08.10.2026 · Jitsi + агент-визуализатор Simbiot</div>
|
||
<h1>Разговор<br>Алекса <em>× Леонида</em></h1>
|
||
<p class="sub">Выжимка двухсполовинойчасовой встречи: инфраструктура студии, пилот «мультик по рассказу», экономика локального инференса — и договорённости, которые фиксируем.</p>
|
||
<div class="chips">
|
||
<span class="chip"><b>~2.5</b> часа разговора</span>
|
||
<span class="chip"><b>8</b> тем</span>
|
||
<span class="chip"><b>4</b> договорённости</span>
|
||
<span class="chip">слайды рисовал агент <b>live</b></span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 02 · WHO -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">01</div>
|
||
<div class="kicker">Кто есть кто</div>
|
||
<h2>Два мира на одном звонке</h2>
|
||
<div class="grid g2">
|
||
<div class="card">
|
||
<div class="who tag v">Леонид</div>
|
||
<h3>Писатель · инвестор в deep-tech</h3>
|
||
<p>Давний знакомый студии. Инвестирует в deep-tech, в том числе <b>Anti-Aging Hero</b> с физиком Петром Федичевым. Дома — <b>DGX Spark 128GB</b> (€5000), на которой он гоняет CUDA-моделирование графов надёжности.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="tag">Алекс · студия</div>
|
||
<h3>Живая AI-инфраструктура</h3>
|
||
<p>Показал, чем студия отличается от классической: <b>агент-визуализатор звонков</b> (демо в реальном времени), собственный <b>роутер LM-провайдеров</b> и <b>RAG</b> по всем знаниям кооператива.</p>
|
||
</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>«Первый раз такое в моей практике… польза очевидна»</p>
|
||
<cite>Леонид — после демо агент-визуализатора</cite>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 03 · DEMO -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">02</div>
|
||
<div class="kicker">Демо инфраструктуры</div>
|
||
<h2>Что увидел Леонид <span class="alt">в прямом эфире</span></h2>
|
||
<ul class="list">
|
||
<li><span><b>Агент подключается к любому звонку</b> и рисует слайды по ходу разговора — задержка ~45 секунд (лимит генерации)</span></li>
|
||
<li><span><b>Роутер сам выбирает модель под контекст</b> — визуализация идёт на GLM 5.3 Flash</span></li>
|
||
<li><span><b>RAG по базе кооператива:</b> «он знает всё, что мы делаем» — агент отвечает со знанием всей истории студии</span></li>
|
||
<li><span>Инсайт Леонида из демо: <span class="hl">на его домашней коробочке можно крутить быструю генерацию</span> — музыку, картинки, мини-видео. Трек за минуту</span></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- 04 · PILOT -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">03</div>
|
||
<div class="kicker">Главный контакт встречи</div>
|
||
<h2>Пилот: <span class="alt">мультик по рассказу Леонида</span></h2>
|
||
<div class="grid g2">
|
||
<div class="card">
|
||
<div class="tag a">Что хочет Леонид</div>
|
||
<p><b>Мульт-адаптация своих рассказов</b> (10–15 минут). Готов финансово поддержать пилот: <b>токены — точно</b>, человеческий труд — обсудить. Ориентир бюджета — <b>«в пределах 1000»</b> на эксперимент.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="tag v">Что входит студия</div>
|
||
<p>Рассказ Леонида + <b>свобода интерпретации</b> («никаких пожеланий-ограничений»). Со стороны студии — партнёр уже строит <b>harness генерации мультиков</b>, видео-часть ведёт <b>Влад</b> (профессиональный видеомейкер + озвучка). Матч идеальный.</p>
|
||
</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>Первый шаг — аудиоспектакль: дешевле и предсказуемее. Затем видео.</p>
|
||
<cite>Дорожная карта пилота</cite>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 05 · METHOD -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">04</div>
|
||
<div class="kicker">Творческий метод Леонида</div>
|
||
<h2>Поучительно для <span class="alt">продуктовой линзы</span></h2>
|
||
<ul class="list">
|
||
<li><span><b>Хакатон ~2018:</b> обучали нейросеть на сольных песнях Леннона и Маккартни, затем классифицировали битловские — «десяток песен правильно заклассифицировали»</span></li>
|
||
<li><span><b>Пишет с ИИ:</b> по собственной оценке ~80% — его творчество, ~20% — ИИ. Честно маркирует <span class="hl">«made with AI»</span> на after.today</span></li>
|
||
<li><span><b>Бэкграунд-тезис:</b> «литературные негры» и мастерская Микеланджело — ИИ-ассистированное творчество не ново. <b>Нова честность.</b></span></li>
|
||
</ul>
|
||
<div class="quote">
|
||
<p>ИИ-ассистированное творчество не ново — нова честность.</p>
|
||
<cite>Леонид</cite>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 06 · HARDWARE -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">05</div>
|
||
<div class="kicker">Экономика локального инференса</div>
|
||
<h2>Спор о железе: <span class="alt">дом против облака</span></h2>
|
||
<div class="vs">
|
||
<div class="card">
|
||
<div class="who">Позиция Леонида</div>
|
||
<p><b>DGX Spark за ~1% стоимости дома</b> — нормальная цена за «домашний интеллект». Тренд: коробки станут достоянием домов.</p>
|
||
</div>
|
||
<div class="vsx">⚡</div>
|
||
<div class="card">
|
||
<div class="who">Позиция Алекса</div>
|
||
<p><b>Облачный always-on</b> — ок для большинства задач. Топовые модели для разработки софта всё равно выигрывают у локальных.</p>
|
||
</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>Сошлись на гибриде: локально — быстрая генерация (эскизы, музыка), облако — тяжёлые продуктовые задачи. У студии в планах собственный inference-сервер — в ~6 раз быстрее.</p>
|
||
<cite>Консенсус встречи</cite>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 07 · AI COMPANY -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">06</div>
|
||
<div class="kicker">Обмен тезисами</div>
|
||
<h2>Как строить <span class="alt">AI-компанию</span></h2>
|
||
<div class="grid g2">
|
||
<div class="card">
|
||
<div class="tag">Тезис Леонида</div>
|
||
<p><b>«Vision — говно, execution — всё»</b> (шутка из EPAM). Из короткого промпта не вырастает сложная система: 10 людей с одним промптом построят 10 одинаковых Uber'ов — вариабельность требует дополнительной информации.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="tag v">Тезис Алекса</div>
|
||
<p>Ядро студии — <b>AI-ядро, постоянно перестраивающее паттерны</b> (64 сейчас) при смене контекста. «Долгосрочно — самый большой актив». Строить бизнес на нейро-инфраструктуре с самого начала → затем автопилот. Незаменим только <b>«CEO-решатель»</b>.</p>
|
||
</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>«Я теперь понимаю, чем твоя студия отличается от классической — изюминка в AI-ядре»</p>
|
||
<cite>Леонид · метод deep-tech: продавать ценность сразу, не влюбляясь в R&D</cite>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 08 · DEALS -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">07</div>
|
||
<div class="kicker">Итоги встречи</div>
|
||
<h2>Договорённости — <span class="alt">что фиксируем</span></h2>
|
||
<div class="num"><i>1</i><div>
|
||
<h3>Пилот анимации по рассказу Леонида</h3>
|
||
<p>Леонид покрывает токены (ориентир до <b>1000</b>), студия делает: аудио → видео, ведёт Влад. Алекс вернётся с <b>конкретным предложением</b>.</p>
|
||
</div></div>
|
||
<div class="num"><i>2</i><div>
|
||
<h3>Формат разговора продолжается</h3>
|
||
<p>Леонид открыт к следующим сессиям со студией.</p>
|
||
</div></div>
|
||
<div class="num"><i>3</i><div>
|
||
<h3>Голоса и доли за прошлые инвестиции — вопрос закрыт</h3>
|
||
<p>Леонид отказался: «это была шутка», «инвестирую из философских соображений, не создавайте ожиданий». Давления нет.</p>
|
||
</div></div>
|
||
<div class="num"><i>4</i><div>
|
||
<h3>Следующий шаг Леонида</h3>
|
||
<p>Посмотрит 35-минутную презентацию студии и вернётся с фидбэком.</p>
|
||
</div></div>
|
||
</section>
|
||
|
||
<!-- 09 · NEXT -->
|
||
<section class="slide">
|
||
<div class="accent"></div><div class="ghost">08</div>
|
||
<div class="kicker">Action items</div>
|
||
<h2>Что студии делать <span class="alt">дальше</span></h2>
|
||
<ul class="list">
|
||
<li><span><b>Подготовить оффер по мульт-пилоту</b> — объём, этап аудиоспектакля, смета токенов. Алекс озвучит Леониду предметно.</span></li>
|
||
<li><span><b>Подключить партнёрский harness генерации мультиков</b> к задаче Леонида — как первый клиентский кейс.</span></li>
|
||
<li><span><b>Зафиксировать кейс «агент-визуализатор на реальном внешнем звонке»</b> — первое демо на живом стороннем человеке, положительный фидбэк.</span></li>
|
||
</ul>
|
||
<div class="quote">
|
||
<p>От живого демо на звонке — к первому платному пилоту по генерации контента.</p>
|
||
<cite>Смысл встречи 143</cite>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 10 · END -->
|
||
<section class="slide end">
|
||
<div class="accent"></div><div class="ghost">42</div>
|
||
<div class="kicker">Встреча 143 · 08.10.2026</div>
|
||
<div class="big">«Изюминка — <em>в AI-ядре»</em></div>
|
||
<p class="sub">Simbiot · Кооператив 42 · агент-визуализатор, LM-роутер, RAG по знаниям студии. Презентация собрана из выжимки разговора — тем же агентом, что рисовал слайды live.</p>
|
||
<div class="sig">← → навигация · F — во весь экран · P — печать/PDF</div>
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<div class="dots" id="dots"></div>
|
||
<div class="progress" id="prog"></div>
|
||
<div class="hud">
|
||
<span class="count" id="count"></span>
|
||
<button id="prev" title="Назад (←)">←</button>
|
||
<button id="next" title="Вперёд (→)">→</button>
|
||
</div>
|
||
<div class="hint">← → · свайп · F — фулскрин</div>
|
||
|
||
<script>
|
||
(function(){
|
||
var slides=[].slice.call(document.querySelectorAll('.slide'));
|
||
var dots=document.getElementById('dots'),prog=document.getElementById('prog'),cnt=document.getElementById('count');
|
||
var i=0,n=slides.length;
|
||
slides.forEach(function(_,k){var d=document.createElement('i');d.onclick=function(){go(k)};dots.appendChild(d);});
|
||
function pad(x){return (x<10?'0':'')+x}
|
||
function go(k){
|
||
k=Math.max(0,Math.min(n-1,k));
|
||
if(k===i&&slides[i].classList.contains('active'))return;
|
||
slides.forEach(function(s,j){
|
||
s.classList.toggle('active',j===k);
|
||
s.classList.toggle('prev',j<k);
|
||
});
|
||
i=k;
|
||
prog.style.width=((i+1)/n*100)+'%';
|
||
cnt.innerHTML='<b>'+pad(i+1)+'</b> / '+pad(n);
|
||
[].forEach.call(dots.children,function(d,j){d.classList.toggle('on',j===i)});
|
||
if(history.replaceState)history.replaceState(null,'','#'+(i+1));
|
||
}
|
||
document.getElementById('next').onclick=function(){go(i+1)};
|
||
document.getElementById('prev').onclick=function(){go(i-1)};
|
||
addEventListener('keydown',function(e){
|
||
if(e.key==='ArrowRight'||e.key==='PageDown'||e.key===' '){e.preventDefault();go(i+1)}
|
||
else if(e.key==='ArrowLeft'||e.key==='PageUp'){e.preventDefault();go(i-1)}
|
||
else if(e.key==='Home'){go(0)}
|
||
else if(e.key==='End'){go(n-1)}
|
||
else if(e.key==='f'||e.key==='F'||e.key==='а'||e.key==='А'){
|
||
if(document.fullscreenElement){document.exitFullscreen&&document.exitFullscreen()}
|
||
else{document.documentElement.requestFullscreen&&document.documentElement.requestFullscreen()}
|
||
}
|
||
});
|
||
var tx=null,ty=null;
|
||
addEventListener('touchstart',function(e){tx=e.touches[0].clientX;ty=e.touches[0].clientY},{passive:true});
|
||
addEventListener('touchend',function(e){
|
||
if(tx===null)return;
|
||
var dx=e.changedTouches[0].clientX-tx,dy=e.changedTouches[0].clientY-ty;
|
||
if(Math.abs(dx)>60&&Math.abs(dx)>Math.abs(dy)){go(dx<0?i+1:i-1)}
|
||
tx=null;
|
||
},{passive:true});
|
||
var h=parseInt((location.hash||'').replace('#',''),10);
|
||
go(isNaN(h)?0:h-1);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|