applications/magicciv
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

docs(drafts): 📝 Update index.html content for site-a and site-b drafts to correct inaccuracies and improve clarity

Browse source 
Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
This commit is contained in:
autocommit 2026-05-17 18:23:56 -07:00
parent 34911ad08c
commit c28ac65ff7
2 changed files with 509 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

268
drafts/site-a/index.html Normal file
View file

@ -0,0 +1,268 @@
<!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>

241
drafts/site-b/index.html Normal file
View file

@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magic Civilization: Age of Dwarves</title>
<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=EB+Garamond:wght@400;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Hero -->
<section class="hero">
<div class="hero-backdrop">
<svg viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" class="hero-svg">
<defs>
<linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2a2420;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1a1512;stop-opacity:1" />
</linearGradient>
<pattern id="stoneTexture" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
<rect width="80" height="80" fill="#3a3228"/>
<circle cx="20" cy="20" r="2" fill="#4a4238" opacity="0.6"/>
<circle cx="60" cy="45" r="1.5" fill="#2a2220" opacity="0.5"/>
<circle cx="40" cy="70" r="2.5" fill="#4a4238" opacity="0.4"/>
</pattern>
</defs>
<rect width="1200" height="600" fill="url(#heroGrad)"/>
<rect width="1200" height="600" fill="url(#stoneTexture)" opacity="0.3"/>
<!-- Tectonic plate lines (decorative) -->
<path d="M 0 150 Q 300 120 600 150 T 1200 150" stroke="#8b7355" stroke-width="2" fill="none" opacity="0.4"/>
<path d="M 100 300 Q 400 280 700 300 T 1200 320" stroke="#a0826d" stroke-width="1.5" fill="none" opacity="0.3"/>
<!-- Mountains (simplified silhouette) -->
<polygon points="0,600 150,350 280,420 400,280 550,380 700,250 850,360 1000,200 1200,380 1200,600" fill="#3a3228" opacity="0.6"/>
</svg>
</div>
<div class="hero-content">
<h1>An age of stone, iron, and grudges.</h1>
<p class="hero-tagline">Six dwarven clans. One hexagonal world. Infinite turns of war and pride.</p>
<a href="#" class="btn btn-primary">Wishlist on Steam</a>
</div>
</section>
<!-- World Layers -->
<section class="world-layers">
<div class="container">
<h2>A world that lives before you arrive.</h2>
<p class="section-intro">From tectonic upheaval to emergent ecology, the mountain world of Age of Dwarves breathes with geological depth. Each layer builds the next.</p>
<div class="layers-stack">
<div class="layer">
<div class="layer-number">1</div>
<h3>Tectonic Plates</h3>
<p>Collision and rifting shape continents. Mountain ranges rise where plates collide; deep valleys form where they tear apart. The result: distinct geographic identity before a single unit spawns.</p>
<svg class="layer-icon" viewBox="0 0 100 100">
<rect x="10" y="40" width="80" height="50" fill="none" stroke="#a0826d" stroke-width="2"/>
<path d="M 20 50 L 40 30 L 60 50 L 80 25 L 95 50" stroke="#c9a876" stroke-width="2" fill="none"/>
<line x1="50" y1="20" x2="50" y2="80" stroke="#8b6f47" stroke-width="1" opacity="0.5" stroke-dasharray="4,4"/>
</svg>
</div>
<div class="layer">
<div class="layer-number">2</div>
<h3>Rivers & Hydrology</h3>
<p>Water flows downhill in six directions across each hex, carving valleys and pooling in lakes. Rivers shape settlement patterns and provide fresh water corridors—critical to survival.</p>
<svg class="layer-icon" viewBox="0 0 100 100">
<defs>
<linearGradient id="waterGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4a90c9;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#2c5aa0;stop-opacity:0.9" />
</linearGradient>
</defs>
<path d="M 50 10 Q 45 30 50 50 Q 48 70 55 90" stroke="url(#waterGrad)" stroke-width="3" fill="none" stroke-linecap="round"/>
<circle cx="35" cy="70" r="8" fill="url(#waterGrad)"/>
</svg>
</div>
<div class="layer">
<div class="layer-number">3</div>
<h3>Climate & Weather</h3>
<p>Latitude, continentality, and rain-shadow effects create climate bands. Warm lowlands meet frozen peaks. Droughts and storms emerge from seasonal cycles, affecting growth and migration.</p>
<svg class="layer-icon" viewBox="0 0 100 100">
<circle cx="50" cy="30" r="12" fill="#ffeb3b" opacity="0.9"/>
<path d="M 20 60 Q 25 50 30 60 Q 35 50 40 60 Q 45 50 50 60" stroke="#b0b0b0" stroke-width="2" fill="none" stroke-linecap="round"/>
<path d="M 50 75 Q 55 65 60 75 Q 65 65 70 75" stroke="#4a90c9" stroke-width="2" fill="none" stroke-linecap="round"/>
</svg>
</div>
<div class="layer">
<div class="layer-number">4</div>
<h3>Biomes</h3>
<p>Climate + terrain combine into distinct biomes: tundra, taiga, temperate forest, grassland, desert, swamp. Each supports different resources and fauna—shaping strategy from turn one.</p>
<svg class="layer-icon" viewBox="0 0 100 100">
<rect x="10" y="10" width="25" height="80" fill="#9cb5a3"/>
<rect x="35" y="20" width="25" height="70" fill="#a89968"/>
<rect x="60" y="15" width="30" height="75" fill="#7fa982"/>
<polygon points="20,50 25,40 30,50" fill="#4a7c59"/>
<polygon points="70,55 76,42 82,55" fill="#2d5a3d"/>
</svg>
</div>
<div class="layer">
<div class="layer-number">5</div>
<h3>Flora</h3>
<p>Trees, shrubs, and grasses emerge from biome conditions. Six tiers of flora—from humble grass to ancient groves—provide resources, cover, and habitat for fauna to follow.</p>
<svg class="layer-icon" viewBox="0 0 100 100">
<circle cx="25" cy="50" r="18" fill="#6b8e23"/>
<circle cx="25" cy="35" r="12" fill="#7ba428"/>
<rect x="22" y="70" width="6" height="20" fill="#6b5344"/>
<circle cx="70" cy="55" r="15" fill="#5a8c3a"/>
<circle cx="70" cy="42" r="10" fill="#6b9e4a"/>
<rect x="68" y="72" width="4" height="18" fill="#4a3a2a"/>
</svg>
</div>
<div class="layer">
<div class="layer-number">6</div>
<h3>Fauna & Ecology</h3>
<p>Animals emerge from flora. Herbivores graze meadows; predators stalk forests; scavengers pick clean the dead. A living food chain that shifts with seasons—creating challenges and opportunities.</p>
<svg class="layer-icon" viewBox="0 0 100 100">
<circle cx="30" cy="50" r="8" fill="#8b6f47"/>
<polygon points="30,38 32,48 28,48" fill="#8b6f47"/>
<circle cx="65" cy="45" r="10" fill="#6b5344"/>
<ellipse cx="68" cy="42" rx="12" ry="6" fill="#8b7355"/>
<circle cx="65" cy="60" r="5" fill="#4a4238"/>
</svg>
</div>
</div>
</div>
</section>
<!-- Clans -->
<section class="clans">
<div class="container">
<h2>Six clans. Six destinies.</h2>
<p class="section-intro">Each clan embodies a dwarven archetype—fortress, merchant, warrior, isolationist, scholar, and technologist. Their grudges become your war.</p>
<div class="clans-grid">
<div class="clan-card" style="--clan-color: #8b5a3c;">
<div class="clan-header">
<h3>Ironhold</h3>
<span class="clan-archetype">The Fortress</span>
</div>
<p>Master engineers of stone and mortar. Ironhold excels at defensive fortifications and siege warfare. Their settlements become impregnable bastions—but expansion comes slowly.</p>
</div>
<div class="clan-card" style="--clan-color: #c9a876;">
<div class="clan-header">
<h3>Goldvein</h3>
<span class="clan-archetype">The Merchant</span>
</div>
<p>Traders of ore, grain, and influence. Goldvein thrives on commerce and diplomatic routes. Their wealth buys allies—and armies. Grudges settled not with swords, but with markets.</p>
</div>
<div class="clan-card" style="--clan-color: #5a3a2a;">
<div class="clan-header">
<h3>Blackhammer</h3>
<span class="clan-archetype">The Warmonger</span>
</div>
<p>Aggressive, relentless, merciless. Blackhammer wages eternal war. Their warriors train harder, fight fiercer, and hold grudges longest. Territory is taken, not bargained for.</p>
</div>
<div class="clan-card" style="--clan-color: #3a3228;">
<div class="clan-header">
<h3>Deepforge</h3>
<span class="clan-archetype">The Isolationist</span>
</div>
<p>Seekers of the deep. Deepforge builds tall, not wide—tunneling ever downward to forgotten riches. They fear the surface world and defend their realm from all outsiders.</p>
</div>
<div class="clan-card" style="--clan-color: #7a6a5a;">
<div class="clan-header">
<h3>Runesmith</h3>
<span class="clan-archetype">The Scholar</span>
</div>
<p>Keepers of knowledge and craft. Runesmith advances technology faster than rivals, discovering powerful techniques and weapons. Wisdom is their greatest treasure.</p>
</div>
<div class="clan-card" style="--clan-color: #9a8a7a;">
<div class="clan-header">
<h3>Skyforge</h3>
<span class="clan-archetype">The Technologist</span>
</div>
<p>Innovators and dreamers. Skyforge pushes dwarven engineering to its limits—ever building, ever experimenting. Their ambition may outpace their stone-bound world.</p>
</div>
</div>
</div>
</section>
<!-- Episodic Future -->
<section class="future-ages">
<div class="container">
<h2>Three ages. One world. Infinite stories.</h2>
<p class="section-intro">Age of Dwarves is Episode 1. Two more civilizations rise. The world transforms.</p>
<div class="ages-grid">
<div class="age-card">
<h3>Age of Dwarves</h3>
<p class="age-status">Coming Soon</p>
<p>Stone, iron, and grudges. Six clans war across a living hex-grid world. No magic—only mountain wisdom and steel.</p>
</div>
<div class="age-card age-future">
<h3>Age of Kzzykt</h3>
<p class="age-status">Episode 2</p>
<p>Insectoid hive-minds emerge from the deep. Queens command colonies with instinctive intelligence. A race that thinks as one—and conquers like a swarm.</p>
</div>
<div class="age-card age-future">
<h3>Age of Elves</h3>
<p class="age-status">Episode 3</p>
<p>Four elemental races of elves discover the stars. Water, forest, high, and dark—each with unique magic and dominion. Space folds before their ambition.</p>
</div>
</div>
</div>
</section>
<!-- Availability -->
<footer class="footer">
<div class="container">
<h3>Coming to your platform.</h3>
<div class="platforms">
<a href="#" class="platform-badge">
<span class="platform-name">Steam</span>
</a>
<a href="#" class="platform-badge">
<span class="platform-name">App Store</span>
</a>
<a href="#" class="platform-badge">
<span class="platform-name">Google Play</span>
</a>
</div>
<p class="footer-note">No web release. Play native. Play true.</p>
<p class="copyright">&copy; 2026 Magic Civilization. All rights reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>