mirror of
https://github.com/shadoll/dev.shadoll.git
synced 2026-08-28 03:26:56 +00:00
354 lines
15 KiB
HTML
354 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="devpage" />
|
||
<title>devpage</title>
|
||
<!-- mobile browser UI theming -->
|
||
<meta name="theme-color" id="themeColorMeta" content="#4d22b3">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="#4d22b3">
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500&display=swap" rel="stylesheet" />
|
||
|
||
<!-- Styles (order matters: base → gradient → modal → icons → logo → guide → population) -->
|
||
<link rel="stylesheet" href="src/styles/main.css" />
|
||
<link rel="stylesheet" href="src/styles/gradient.css" />
|
||
<link rel="stylesheet" href="src/styles/modal.css" />
|
||
<link rel="stylesheet" href="src/styles/icons.css" />
|
||
<link rel="stylesheet" href="src/styles/logo.css" />
|
||
<link rel="stylesheet" href="src/styles/guide.css" />
|
||
<link rel="stylesheet" href="src/styles/population.css" />
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ── Evolution stage (icon entities mount here) ──────── -->
|
||
<div class="evolution-container" id="evolutionContainer" aria-hidden="true"></div>
|
||
|
||
<!-- ── Settings trigger ─────────────────────────────────── -->
|
||
<button class="settings-btn icon-btn" id="settingsBtn" aria-label="Open settings" aria-haspopup="dialog">
|
||
#
|
||
</button>
|
||
|
||
<!-- ── Population monitor trigger (top-right, below settings) ── -->
|
||
<button
|
||
class="population-btn icon-btn"
|
||
id="populationBtn"
|
||
aria-label="Open population monitor"
|
||
aria-expanded="false"
|
||
aria-controls="populationPanel"
|
||
>⊕</button>
|
||
|
||
<!-- ── Population monitor panel ─────────────────────────── -->
|
||
<aside
|
||
class="pop-panel"
|
||
id="populationPanel"
|
||
aria-hidden="true"
|
||
aria-label="Population monitor"
|
||
>
|
||
<div class="pop-panel__header">
|
||
<p class="pop-panel__title">population</p>
|
||
<div class="pop-panel__meta">
|
||
<span class="pop-panel__total">0</span>
|
||
<span class="pop-panel__uptime">0:00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Species section (dynamically populated by JS) -->
|
||
<div class="pop-section">
|
||
<p class="pop-section__label">species</p>
|
||
<div id="popSpecies"></div>
|
||
</div>
|
||
|
||
<!-- Spawn section (dynamically populated by JS) -->
|
||
<div class="pop-section">
|
||
<p class="pop-section__label">spawn</p>
|
||
<div id="popSpawn"></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ── Main content area (grows with future features) ───── -->
|
||
<main class="page-main" id="pageMain"></main>
|
||
|
||
<!-- ── Evolution guide button (bottom-right) ─────────────── -->
|
||
<button
|
||
class="guide-btn icon-btn"
|
||
id="guideBtn"
|
||
aria-label="Open evolution guide"
|
||
aria-expanded="false"
|
||
aria-controls="guidePanel"
|
||
>ℹ</button>
|
||
|
||
<!-- ── Evolution guide panel (interactions reference only) ── -->
|
||
<aside
|
||
class="guide-panel"
|
||
id="guidePanel"
|
||
aria-hidden="true"
|
||
aria-label="Evolution guide"
|
||
>
|
||
<div class="guide-panel__header">
|
||
<p class="guide-panel__title">evolution guide</p>
|
||
<span class="guide-panel__uptime">0:00</span>
|
||
</div>
|
||
|
||
<!-- Interactions -->
|
||
<div class="guide-section">
|
||
<p class="guide-section__label">interactions</p>
|
||
<ul class="guide-rules">
|
||
<li class="guide-rule">
|
||
<span class="guide-entity__icon" data-guide-icon="bug"></span>
|
||
<span class="guide-rule__op">+</span>
|
||
<span class="guide-entity__icon" data-guide-icon="cell"></span>
|
||
<span class="guide-rule__op">→</span>
|
||
<span class="guide-entity__icon" data-guide-icon="virus-filled"></span>
|
||
<span class="guide-rule__desc">bug infects</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-entity__icon" data-guide-icon="bug"></span>
|
||
<span class="guide-rule__op">+</span>
|
||
<span class="guide-entity__icon" data-guide-icon="virus-filled"></span>
|
||
<span class="guide-rule__op">→</span>
|
||
<span class="guide-entity__icon" data-guide-icon="cell"></span>
|
||
<span class="guide-rule__desc">bug cures virus</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-entity__icon" data-guide-icon="virus-filled"></span>
|
||
<span class="guide-rule__op">+</span>
|
||
<span class="guide-entity__icon" data-guide-icon="cell"></span>
|
||
<span class="guide-rule__op">→</span>
|
||
<span class="guide-rule__pct">90%</span>
|
||
<span class="guide-rule__desc">virus kills</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-entity__icon" data-guide-icon="virus-filled"></span>
|
||
<span class="guide-rule__op">+</span>
|
||
<span class="guide-entity__icon" data-guide-icon="cell"></span>
|
||
<span class="guide-rule__op">→</span>
|
||
<span class="guide-entity__icon" data-guide-icon="bacteria"></span>
|
||
<span class="guide-rule__pct">10%</span>
|
||
<span class="guide-rule__desc">mutation</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-entity__icon" data-guide-icon="bacteria"></span>
|
||
<span class="guide-rule__op">×</span>
|
||
<span class="guide-entity__icon" data-guide-icon="virus-filled"></span>
|
||
<span class="guide-rule__desc">bacteria immune</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- DNA mutations reference -->
|
||
<div class="guide-section">
|
||
<p class="guide-section__label">dna mutations</p>
|
||
<ul class="guide-rules">
|
||
<li class="guide-rule">
|
||
<span class="guide-rule__desc" style="color:rgba(255,255,255,0.55)">cell</span>
|
||
<span class="guide-rule__op" style="font-size:0.7rem">·</span>
|
||
<span class="guide-rule__desc"><span style="color:rgba(255,255,255,0.55)">speed</span> — moves faster</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-rule__desc" style="color:rgba(255,255,255,0.55)">cell</span>
|
||
<span class="guide-rule__op" style="font-size:0.7rem">·</span>
|
||
<span class="guide-rule__desc"><span style="color:rgba(255,255,255,0.55)">resistance</span> — lower kill chance</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-rule__desc" style="color:rgba(255,255,255,0.55)">cell</span>
|
||
<span class="guide-rule__op" style="font-size:0.7rem">·</span>
|
||
<span class="guide-rule__desc"><span style="color:rgba(255,255,255,0.55)">shield</span> — blocks frontal attacks</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-rule__desc" style="color:rgba(255,255,255,0.55)">cell</span>
|
||
<span class="guide-rule__op" style="font-size:0.7rem">·</span>
|
||
<span class="guide-rule__desc"><span style="color:rgba(255,255,255,0.55)">division rate</span> — divides faster</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-rule__desc" style="color:#ff4d6d">virus</span>
|
||
<span class="guide-rule__op" style="font-size:0.7rem">·</span>
|
||
<span class="guide-rule__desc"><span style="color:rgba(255,255,255,0.55)">hunt speed</span> — moves faster</span>
|
||
</li>
|
||
<li class="guide-rule">
|
||
<span class="guide-rule__desc" style="color:#ff4d6d">virus</span>
|
||
<span class="guide-rule__op" style="font-size:0.7rem">·</span>
|
||
<span class="guide-rule__desc"><span style="color:rgba(255,255,255,0.55)">lethality</span> — higher kill chance</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="guide-footer">
|
||
<button class="guide-reset-btn" id="guideResetBtn">restart evolution</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- ── Settings modal ──────────────────────────────────── -->
|
||
<div
|
||
class="modal-overlay"
|
||
id="modalOverlay"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="modalTitle"
|
||
aria-hidden="true"
|
||
>
|
||
<div class="modal">
|
||
|
||
<div class="modal-header">
|
||
<span class="modal-title" id="modalTitle">settings</span>
|
||
<button class="modal-close" id="modalClose" aria-label="Close settings">×</button>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
|
||
<!-- ── background ──────────────────────────── -->
|
||
<div class="settings-section">
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="colorPicker">background colour</label>
|
||
<div class="color-input-wrapper">
|
||
<input type="color" id="colorPicker" value="#4d22b3" class="color-picker" />
|
||
<span class="color-value" id="colorValue">#4d22b3</span>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="speedSlider">gradient speed</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="speedValue">2</span>
|
||
<span class="slider-label">slow</span>
|
||
<input type="range" id="speedSlider" min="1" max="10" value="2" class="slider" />
|
||
<span class="slider-label">fast</span>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<span class="setting-label">gradient rotation</span>
|
||
<div class="toggle-wrapper">
|
||
<span class="toggle-label">off</span>
|
||
<label class="toggle" for="rotationToggle" aria-label="Toggle gradient rotation">
|
||
<input type="checkbox" id="rotationToggle" />
|
||
<span class="toggle-track">
|
||
<span class="toggle-thumb"></span>
|
||
</span>
|
||
</label>
|
||
<span class="toggle-label">on</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── elements ────────────────────────────── -->
|
||
<div class="settings-section">
|
||
<p class="settings-section__label">elements</p>
|
||
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="moveSpeedSlider">movement speed</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="moveSpeedValue">5</span>
|
||
<span class="slider-label">slow</span>
|
||
<input type="range" id="moveSpeedSlider" min="1" max="50" value="5" class="slider" />
|
||
<span class="slider-label">fast</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="spawnRateSlider">spawn rate</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="spawnRateValue">5</span>
|
||
<span class="slider-label">rare</span>
|
||
<input type="range" id="spawnRateSlider" min="1" max="10" value="5" class="slider" />
|
||
<span class="slider-label">frequent</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="virusKillSlider">virus lethality</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="virusKillValue">90%</span>
|
||
<span class="slider-label">0%</span>
|
||
<input type="range" id="virusKillSlider" min="0" max="100" value="90" class="slider" />
|
||
<span class="slider-label">100%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="bugChanceSlider">bug rarity</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="bugChanceValue">8%</span>
|
||
<span class="slider-label">0%</span>
|
||
<input type="range" id="bugChanceSlider" min="0" max="100" value="8" class="slider" />
|
||
<span class="slider-label">100%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="bugCountSlider">bug number</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="bugCountValue">2</span>
|
||
<span class="slider-label">0</span>
|
||
<input type="range" id="bugCountSlider" min="0" max="10" value="2" class="slider" />
|
||
<span class="slider-label">10</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── logo ─────────────────────────────── -->
|
||
<div class="settings-section">
|
||
<p class="settings-section__label">logo</p>
|
||
|
||
<div class="setting-group">
|
||
<span class="setting-label">letter hit count</span>
|
||
<div class="toggle-wrapper">
|
||
<span class="toggle-label">off</span>
|
||
<label class="toggle" for="letterHitCountToggle" aria-label="Show letter hit counts">
|
||
<input type="checkbox" id="letterHitCountToggle" />
|
||
<span class="toggle-track">
|
||
<span class="toggle-thumb"></span>
|
||
</span>
|
||
</label>
|
||
<span class="toggle-label">on</span>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<span class="setting-label">detach number</span>
|
||
<div class="toggle-wrapper">
|
||
<span class="toggle-label">off</span>
|
||
<label class="toggle" for="letterThresholdToggle" aria-label="Show detach thresholds">
|
||
<input type="checkbox" id="letterThresholdToggle" />
|
||
<span class="toggle-track">
|
||
<span class="toggle-thumb"></span>
|
||
</span>
|
||
</label>
|
||
<span class="toggle-label">on</span>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="thresholdMinInput">min detach</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="thresholdMinValue">50</span>
|
||
<span class="slider-label">0</span>
|
||
<input type="range" id="thresholdMinInput" min="0" max="5000" value="50" class="slider" />
|
||
<span class="slider-label">5000</span>
|
||
</div>
|
||
</div>
|
||
<div class="setting-group">
|
||
<label class="setting-label" for="thresholdMaxInput">max detach</label>
|
||
<div class="slider-wrapper">
|
||
<span class="slider-current" id="thresholdMaxValue">100</span>
|
||
<span class="slider-label">0</span>
|
||
<input type="range" id="thresholdMaxInput" min="0" max="5000" value="100" class="slider" />
|
||
<span class="slider-label">5000</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="reset-btn" id="resetBtn">reset to defaults</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── App entry point (ES module) ─────────────────────── -->
|
||
<script type="module" src="src/js/main.js"></script>
|
||
|
||
</body>
|
||
</html>
|