268 lines
12 KiB
HTML
268 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Age of Dwarves — Magic Civilization Episode 1</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div class="hero-content">
|
||
<h1>Age of Dwarves</h1>
|
||
<p class="tagline">The 4X where every opponent thinks differently.</p>
|
||
<p class="subtitle">Fight learned neural nets. Fight scripted clan personalities. Mix and match them in any slot.</p>
|
||
<a href="#" class="cta-primary">Wishlist on Steam</a>
|
||
<p class="availability">Coming soon to Steam, App Store, and Google Play.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TWO MINDS, ONE ENGINE -->
|
||
<section class="two-minds">
|
||
<h2>Two Minds, One Engine</h2>
|
||
<p class="section-intro">Choose how your enemies think.</p>
|
||
|
||
<div class="minds-comparison">
|
||
<div class="mind learned">
|
||
<h3>Learned</h3>
|
||
<div class="mind-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="32" cy="32" r="28" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<circle cx="20" cy="24" r="4" fill="currentColor"/>
|
||
<circle cx="32" cy="20" r="4" fill="currentColor"/>
|
||
<circle cx="44" cy="24" r="4" fill="currentColor"/>
|
||
<circle cx="24" cy="40" r="3" fill="currentColor"/>
|
||
<circle cx="32" cy="44" r="3" fill="currentColor"/>
|
||
<circle cx="40" cy="40" r="3" fill="currentColor"/>
|
||
<line x1="20" y1="24" x2="24" y2="40" stroke="currentColor" stroke-width="1.5"/>
|
||
<line x1="20" y1="24" x2="32" y2="20" stroke="currentColor" stroke-width="1.5"/>
|
||
<line x1="32" y1="20" x2="44" y2="24" stroke="currentColor" stroke-width="1.5"/>
|
||
<line x1="44" y1="24" x2="40" y2="40" stroke="currentColor" stroke-width="1.5"/>
|
||
<line x1="32" y1="44" x2="24" y2="40" stroke="currentColor" stroke-width="1.5"/>
|
||
<line x1="32" y1="44" x2="40" y2="40" stroke="currentColor" stroke-width="1.5"/>
|
||
</svg>
|
||
</div>
|
||
<ul class="mind-traits">
|
||
<li>Self-taught through self-play</li>
|
||
<li>Adaptive and hard to read</li>
|
||
<li>Finds novel strategies</li>
|
||
</ul>
|
||
<p class="mind-cta">Evolves as you play</p>
|
||
</div>
|
||
|
||
<div class="mind-picker">
|
||
<div class="picker-label">Slot 1</div>
|
||
<div class="picker-controls">
|
||
<label class="radio-label">
|
||
<input type="radio" name="slot1" value="learned" checked>
|
||
<span class="radio-indicator learned"></span> Learned
|
||
</label>
|
||
<label class="radio-label">
|
||
<input type="radio" name="slot1" value="scripted">
|
||
<span class="radio-indicator scripted"></span> Scripted
|
||
</label>
|
||
</div>
|
||
<div id="slot1-preview" class="picker-preview learned">Neural net trained on 50k games vs MCTS</div>
|
||
|
||
<div class="picker-label">Slot 2</div>
|
||
<div class="picker-controls">
|
||
<label class="radio-label">
|
||
<input type="radio" name="slot2" value="scripted" checked>
|
||
<span class="radio-indicator scripted"></span> Scripted
|
||
</label>
|
||
<label class="radio-label">
|
||
<input type="radio" name="slot2" value="learned">
|
||
<span class="radio-indicator learned"></span> Learned
|
||
</label>
|
||
</div>
|
||
<div id="slot2-preview" class="picker-preview scripted">Blackhammer: warmonger with personality</div>
|
||
|
||
<div class="picker-label">Slots 3–4</div>
|
||
<div class="picker-controls">
|
||
<label class="radio-label">
|
||
<input type="radio" name="slots34" value="learned">
|
||
<span class="radio-indicator learned"></span> Learned
|
||
</label>
|
||
<label class="radio-label">
|
||
<input type="radio" name="slots34" value="scripted" checked>
|
||
<span class="radio-indicator scripted"></span> Scripted
|
||
</label>
|
||
</div>
|
||
<div id="slots34-preview" class="picker-preview scripted">Goldvein & Ironhold: traders and fortress-builders</div>
|
||
</div>
|
||
|
||
<div class="mind scripted">
|
||
<h3>Scripted</h3>
|
||
<div class="mind-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M 16 28 L 24 20 L 32 28 L 24 36 Z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<path d="M 32 28 L 40 20 L 48 28 L 40 36 Z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<line x1="24" y1="36" x2="24" y2="44" stroke="currentColor" stroke-width="2"/>
|
||
<line x1="40" y1="36" x2="40" y2="44" stroke="currentColor" stroke-width="2"/>
|
||
<rect x="18" y="44" width="5" height="8" fill="currentColor"/>
|
||
<rect x="37" y="44" width="5" height="8" fill="currentColor"/>
|
||
<circle cx="32" cy="10" r="3" fill="currentColor"/>
|
||
</svg>
|
||
</div>
|
||
<ul class="mind-traits">
|
||
<li>Hand-tuned MCTS heuristics</li>
|
||
<li>6 named clans with personalities</li>
|
||
<li>Predictable enough to learn</li>
|
||
</ul>
|
||
<p class="mind-cta">Know thy enemy</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- SIX CLANS -->
|
||
<section class="clans">
|
||
<h2>Six Dwarven Clans</h2>
|
||
<p class="section-intro">Each with their own strategic personality.</p>
|
||
|
||
<div class="clans-grid">
|
||
<div class="clan-card ironhold">
|
||
<div class="clan-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<rect x="16" y="18" width="32" height="28" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<rect x="20" y="22" width="6" height="8" fill="currentColor"/>
|
||
<rect x="38" y="22" width="6" height="8" fill="currentColor"/>
|
||
<rect x="20" y="32" width="6" height="8" fill="currentColor"/>
|
||
<rect x="38" y="32" width="6" height="8" fill="currentColor"/>
|
||
<line x1="24" y1="46" x2="40" y2="46" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Ironhold</h3>
|
||
<div class="clan-axes">
|
||
<div class="axis">Production: ████████ 90%</div>
|
||
<div class="axis">Defense: ██████████ 95%</div>
|
||
<div class="axis">Expansion: ██ 20%</div>
|
||
</div>
|
||
<p class="clan-strategy">The fortress-builder. Grows tall, walls up, survives anything.</p>
|
||
</div>
|
||
|
||
<div class="clan-card blackhammer">
|
||
<div class="clan-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M32 16 L40 28 L36 28 L44 40 L32 40 L20 40 L28 28 L24 28 Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
||
<circle cx="32" cy="48" r="6" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Blackhammer</h3>
|
||
<div class="clan-axes">
|
||
<div class="axis">Aggression: ██████████ 100%</div>
|
||
<div class="axis">Military: ██████████ 95%</div>
|
||
<div class="axis">Diplomacy: ██ 15%</div>
|
||
</div>
|
||
<p class="clan-strategy">The warmonger. Always has a grudge, always has an army.</p>
|
||
</div>
|
||
|
||
<div class="clan-card goldvein">
|
||
<div class="clan-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="24" cy="28" r="5" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<circle cx="40" cy="28" r="5" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<circle cx="32" cy="42" r="5" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<path d="M 24 33 L 32 37" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M 40 33 L 32 37" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M 32 47 L 36 50 M 32 47 L 28 50" stroke="currentColor" stroke-width="1.5"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Goldvein</h3>
|
||
<div class="clan-axes">
|
||
<div class="axis">Trade: ██████████ 100%</div>
|
||
<div class="axis">Diplomacy: ████████ 85%</div>
|
||
<div class="axis">Military: ████ 35%</div>
|
||
</div>
|
||
<p class="clan-strategy">The merchant. Buys friends, sells widgets, counts gold.</p>
|
||
</div>
|
||
|
||
<div class="clan-card deepforge">
|
||
<div class="clan-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<circle cx="32" cy="32" r="18" fill="none" stroke="currentColor" stroke-width="2"/>
|
||
<circle cx="32" cy="32" r="12" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||
<circle cx="32" cy="32" r="6" fill="currentColor"/>
|
||
<line x1="32" y1="14" x2="32" y2="20" stroke="currentColor" stroke-width="1.5"/>
|
||
<line x1="32" y1="44" x2="32" y2="50" stroke="currentColor" stroke-width="1.5"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Deepforge</h3>
|
||
<div class="clan-axes">
|
||
<div class="axis">Self-Sufficiency: ██████████ 100%</div>
|
||
<div class="axis">Technology: ████████ 80%</div>
|
||
<div class="axis">Expansion: ██ 20%</div>
|
||
</div>
|
||
<p class="clan-strategy">The isolationist. Goes tall, ignores neighbors, perfects craft.</p>
|
||
</div>
|
||
|
||
<div class="clan-card runesmith">
|
||
<div class="clan-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M 32 14 L 38 22 L 46 22 L 40 28 L 43 36 L 32 31 L 21 36 L 24 28 L 18 22 L 26 22 Z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
||
<path d="M 32 40 L 32 50" stroke="currentColor" stroke-width="2"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Runesmith</h3>
|
||
<div class="clan-axes">
|
||
<div class="axis">Science: ██████████ 100%</div>
|
||
<div class="axis">Balance: ████████ 85%</div>
|
||
<div class="axis">Expansion: ████ 50%</div>
|
||
</div>
|
||
<p class="clan-strategy">The scholar. Leads in tech, spreads knowledge, plays balanced.</p>
|
||
</div>
|
||
|
||
<div class="clan-card skyforge">
|
||
<div class="clan-icon">
|
||
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M 32 12 L 28 20 L 22 20 L 28 25 L 24 33 L 32 28 L 40 33 L 36 25 L 42 20 L 36 20 Z" fill="currentColor"/>
|
||
<path d="M 32 36 L 28 44 L 22 44 L 28 49 L 24 57 L 32 52 L 40 57 L 36 49 L 42 44 L 36 44 Z" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Skyforge</h3>
|
||
<div class="clan-axes">
|
||
<div class="axis">Technology Speed: ██████████ 100%</div>
|
||
<div class="axis">Innovation: ████████ 90%</div>
|
||
<div class="axis">Production: ██ 25%</div>
|
||
</div>
|
||
<p class="clan-strategy">The tech rusher. First to everything, spreads thin, chases breakthroughs.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MOD THE AI -->
|
||
<section class="mod-ai">
|
||
<h2>Mod the AI</h2>
|
||
<p class="section-intro">New clans and learned models come to Steam Workshop.</p>
|
||
<div class="mod-teaser">
|
||
<p>Create your own scripted clan via JSON. Train a new neural net against the six. Upload to Workshop. The community votes with subscriptions.</p>
|
||
<p class="mod-note">Post-launch feature. Age of Dwarves ships with six scripted clans and a trained neural net baseline.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer class="footer">
|
||
<div class="footer-content">
|
||
<h3>Age of Dwarves</h3>
|
||
<p>Episode 1 of Magic Civilization</p>
|
||
<div class="platforms">
|
||
<div class="platform">
|
||
<strong>Steam</strong>
|
||
<p>Wishlist now, play on Windows & Linux</p>
|
||
</div>
|
||
<div class="platform">
|
||
<strong>App Store</strong>
|
||
<p>iPad & Mac, post-launch</p>
|
||
</div>
|
||
<div class="platform">
|
||
<strong>Google Play</strong>
|
||
<p>Android, post-launch</p>
|
||
</div>
|
||
</div>
|
||
<p class="footer-note">Coming soon. No web version — native only.</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|