/
hamster75
/
Life
Обзор
Документация
Войти
/
hamster75
/
Life
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
6
CI/CD
Аналитика
Безопасность
master
index.html
97 строк
7 KB
Dmitry Smirnov
share icon
28 май 2026, 18:11
28 май 2026, 18:11
8f94dc7
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" /> <title>Вычислимая Инфузория</title> <link rel="stylesheet" href="css/styles.css" /> <link rel="icon" href="favicon.ico" type="image/x-icon"/> </head> <body> <div id="app"> <button id="btn-hamburger" title="Меню">☰</button> <div id="nav-panel"> <button data-action="save" title="Сохранить · Серверная часть отсутствует — операции выполняются через буфер обмена или локальные файлы">💾</button> <button data-action="load" title="Загрузить · Серверная часть отсутствует — операции выполняются через буфер обмена или локальные файлы">📂</button> <button data-action="palette" title="Палитра">🎨</button> <button data-action="library" title="Библиотека">📚</button> <button data-action="academy" title="Академия">🎓</button> <button data-action="settings" title="Настройки">⚙</button> <button data-action="help" title="Справка">?</button> <button data-action="share" title="Скопировать ссылку на текущее поле"><svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg></button> <button id="btn-theme" title="Переключить тему">☀</button> </div> <main id="canvas-area"> <canvas id="life-canvas"></canvas> <div id="canvas-hints"> <span id="canvas-hint-toggle"><kbd>H</kbd> — справка</span> <div id="mobile-status"> <svg id="ms-preview" xmlns="http://www.w3.org/2000/svg"></svg> <span id="ms-mode"></span> <span id="ms-hint">2× тап — переключить</span> <span id="ms-gen"></span> <button id="btn-algo-chip" title="Сменить алгоритм">S</button> </div> <div id="canvas-shortcut-overlay"> <div class="cso-row"><span class="cso-key"><kbd>ЛКМ</kbd></span><span class="cso-desc">рисовать / штамп (XOR)</span></div> <div class="cso-row"><span class="cso-key"><kbd>Колесо</kbd> · <kbd>+</kbd><span class="cso-sep">/</span><kbd>-</kbd></span><span class="cso-desc">масштаб</span></div> <div class="cso-row"><span class="cso-key"><kbd>СКМ</kbd> · <kbd>Пробел</kbd><span class="cso-sep">+</span><kbd>ЛКМ</kbd></span><span class="cso-desc">пан</span></div> <div class="cso-row"><span class="cso-key"><kbd>E</kbd><span class="cso-sep">/</span><kbd>D</kbd></span><span class="cso-desc">ластик / кисть</span></div> <div class="cso-row"><span class="cso-key"><kbd>S</kbd></span><span class="cso-desc">форма кисти (○ / □)</span></div> <div class="cso-row"><span class="cso-key"><kbd>[</kbd><span class="cso-sep">/</span><kbd>]</kbd></span><span class="cso-desc">размер кисти</span></div> <div class="cso-row"><span class="cso-key"><kbd>R</kbd></span><span class="cso-desc">повернуть паттерн</span></div> <div class="cso-row"><span class="cso-key"><kbd>F</kbd></span><span class="cso-desc">отразить паттерн</span></div> <div class="cso-row"><span class="cso-key"><kbd>V</kbd></span><span class="cso-desc">уместить в экран</span></div> <div class="cso-row"><span class="cso-key"><kbd>.</kbd></span><span class="cso-desc">один шаг</span></div> <div class="cso-row"><span class="cso-key"><kbd>Esc</kbd></span><span class="cso-desc">отменить паттерн / выделение</span></div> <div class="cso-row"><span class="cso-key"><kbd>M</kbd> · <kbd>Ctrl</kbd><span class="cso-sep">+</span><kbd>C</kbd><span class="cso-sep">/</span><kbd>X</kbd><span class="cso-sep">/</span><kbd>V</kbd> · <kbd>Del</kbd></span><span class="cso-desc">выделение · clipboard</span></div> <div class="cso-row"><span class="cso-key"><kbd>1</kbd><span class="cso-sep">–</span><kbd>3</kbd> · <kbd>0</kbd></span><span class="cso-desc">слой меток (цвет) · основной слой</span></div> <div class="cso-row"><span class="cso-key"><kbd>\</kbd></span><span class="cso-desc">показать / скрыть слой меток</span></div> <div class="cso-row cso-close"><span class="cso-key"><kbd>H</kbd></span><span class="cso-desc">скрыть</span></div> </div> </div> </main> <div id="algo-description"></div> <footer id="control-bar"> <div id="playback-controls"> <button id="btn-play" title="Запустить симуляцию">▶ Play</button> <button id="btn-pause" disabled title="Приостановить — Play продолжит с того же поколения">⏸ Пауза</button> <button id="btn-stop" disabled title="Остановить — следующий Play зафиксирует текущее поле как новую точку отсчёта">⏹ Стоп</button> <button id="btn-reset" title="Вернуть поле к состоянию на момент последнего Play">↺ Сброс</button> <button id="btn-clear" title="Стереть всё поле">⬜ Очистить</button> <button id="btn-mobile-speed" title="Скорость">⚡</button> </div> <div id="speed-control"> <label for="speed-slider">Скорость</label> <input id="speed-slider" type="range" min="1" max="20" value="5" /> <span id="speed-label">5</span> </div> <div id="algo-control"> <label for="algo-select">Алгоритм</label> <select id="algo-select"> <option value="sparse">Sparse (packed)</option> <option value="sparse-bi">Sparse (BigInt)</option> <option value="classic">Classic</option> <option value="hashlife">HashLife</option> </select> </div> <div id="step-control" style="display:none"> <label for="step-log2-slider" data-tip="Шаг HashLife: количество поколений за один тик. 2^0=1, 2^8=256, 2^20=1048576">Шаг 2^<span id="step-log2-label">0</span></label> <input id="step-log2-slider" type="range" min="0" max="20" value="0" /> </div> <div id="status-bar"> <span id="status-mode">Режим: редактирование</span> <span id="status-coord"></span> <span id="status-gen">Поколение: 0</span> <span id="status-pop"></span> <span id="computing-indicator" aria-label="вычисляется"></span> <span id="perf-counter"></span> </div> </footer> </div> <script type="module" src="js/main.js"></script> </body> </html>