1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6 <meta name="description" content="Play a free California-themed 4X strategy game in your browser. Settle cities, research technologies, reform civics, conduct diplomacy, and pursue four victory paths."> 7 <meta name="robots" content="index, follow, max-image-preview:large"> 8 <link rel="canonical" href="https://civilization-california-edition.vercel.app/"> 9 <meta name="apple-mobile-web-app-capable" content="yes"> 10 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 11 <meta name="theme-color" content="#2c2c2c"> 12 <title>Civilization: California Edition | Free 4X Browser Game</title> 13 <meta property="og:type" content="website"> 14 <meta property="og:site_name" content="Civilization: California Edition"> 15 <meta property="og:title" content="Civilization: California Edition | Free 4X Browser Game"> 16 <meta property="og:description" content="Build a California civilization through city management, research, civics, diplomacy, and four victory paths. Play free in your browser."> 17 <meta property="og:url" content="https://civilization-california-edition.vercel.app/"> 18 <meta property="og:image" content="https://civilization-california-edition.vercel.app/civilization-california-social.png"> 19 <meta property="og:image:width" content="1200"> 20 <meta property="og:image:height" content="630"> 21 <meta name="twitter:card" content="summary_large_image"> 22 <meta name="twitter:title" content="Civilization: California Edition | Free 4X Browser Game"> 23 <meta name="twitter:description" content="Build the Golden State in a free turn-based 4X strategy game; no account or download required."> 24 <meta name="twitter:image" content="https://civilization-california-edition.vercel.app/civilization-california-social.png"> 25
25<script type="application/ld+json">{"@context":"https://schema.org","@type":"VideoGame","name":"Civilization: California Edition","url":"https://civilization-california-edition.vercel.app/","description":"A free California-themed 4X strategy game with city management, research, civics, diplomacy, and four victory paths.","applicationCategory":"Game","operatingSystem":"Web Browser","gamePlatform":"Web browser","genre":["4X","Turn-based strategy"],"playMode":"SinglePlayer","isAccessibleForFree":true,"creator":{"@type":"Person","name":"Kyle Langford","url":"https://www.kylelangford.org/"},"image":"https://civilization-california-edition.vercel.app/civilization-california-social.png"}</script>
25 26
26<script defer src="/_vercel/insights/script.js"></script>
26 27
27<script defer src="/_vercel/speed-insights/script.js"></script>
27 28 <link rel="stylesheet" href="styles.css"> 29</head> 30<body> 31 <div id="game-container"> 32 <div id="hud"> 33 <div id="turn-info"> 34 <h1 id="game-title">Civilization: California Edition</h1> 35 <div id="turn-year"> 36 <span id="turn-number">Turn: 1</span> 37 <span id="year">4000 BC</span> 38 </div> 39 <div id="civ-name">California Republic</div> 40 </div> 41 <div id="resources"> 42 <span>ð° Gold: <span id="gold">100</span> <small id="gold-rate">(+0)</small></span> 43 <span>ð¬ Science: <span id="science">0</span>/turn</span> 44 <span>ð Culture: <span id="culture">0</span></span> 45 <label id="commerce-control" for="research-rate">Research <strong id="research-rate-label">60%</strong> 46 <input type="range" id="research-rate" min="0" max="100" step="10" value="60"> 47 </label> 48 </div> 49 <div id="game-controls"> 50 <a class="game-control-link" href="guide.html">How to Play</a> 51 <a class="game-control-link" href="challenge.html">Daily Challenge</a> 52 <button id="share-btn" type="button">Share</button> 53 <button id="save-btn">Save</button> 54 <button id="load-btn">Load</button> 55 <button id="end-turn-btn">End Turn</button> 56 <div id="audio-controls"> 57 <button id="mute-btn" title="Toggle original audio" aria-label="Toggle original audio">ð</button> 58 <label title="Ambient volume">Amb <input type="range" id="music-volume" min="0" max="100" value="50" aria-label="Ambient volume"></label> 59 <label title="Sound effects volume">SFX <input type="range" id="sound-volume" min="0" max="100" value="70" aria-label="Sound effects volume"></label> 60 </div> 61 </div> 62 <div id="daily-challenge-status" hidden aria-live="polite"> 63 <strong>Daily challenge</strong> 64 <span id="daily-challenge-label">Shared starting map · complete three turns</span> 65 </div> 66 </div> 67 <div id="game-board"> 68 <canvas id="map-canvas"></canvas> 69 </div> 70 <div id="info-panel"> 71 <details style="padding: 12px; border-bottom: 1px solid #64748b;"> 72 <summary style="cursor: pointer;">New here? Make your first turn count.</summary> 73 <p>Select a tile to explore the map. Select your city to review production, then open Tech to choose research. Use End Turn when you are ready to see what changes.</p> 74 <a href="guide.html">
74Read the beginner's guide</a> 75 </details> 76 <div id="tabs"> 77 <button class="tab-button active" data-tab="tile">Info</button> 78 <button class="tab-button" data-tab="city">City</button> 79 <button class="tab-button" data-tab="tech">Tech</button> 80 <button class="tab-button" data-tab="civics">Civics</button> 81 <button class="tab-button" data-tab="diplomacy">Diplomacy</button> 82 <button class="tab-button" data-tab="chronicle">Chronicle</button> 83 <button class="tab-button" data-tab="victory">Victory</button> 84 </div> 85 86 <div id="tab-content"> 87 <div id="tile-tab" class="tab-panel active"> 88 <h3>Tile Information</h3> 89 <div id="tile-info">Click a tile to see details</div> 90 <div id="unit-actions" style="display: none;"> 91 <h4>Unit Actions</h4> 92 <div id="action-buttons"></div> 93 </div> 94 </div> 95 96 <div id="city-tab" class="tab-panel"> 97 <h3>City Management</h3> 98 <div id="city-info">Select one of your cities</div> 99 <div id="building-actions" style="display: none;"> 100 <h4>Production</h4> 101 <div id="building-list"></div> 102 </div> 103 </div> 104 105 <div id="tech-tab" class="tab-panel"> 106 <h3>Technology Tree</h3> 107 <div id="current-research"> 108 <div id="research-info">No research selected</div> 109 <div id="research-progress"></div> 110 </div> 111 <div id="available-techs"> 112 <h4>Available to Research</h4> 113 <div id="tech-list"></div> 114 </div> 115 <div id="researched-techs"> 116 <h4>Researched</h4> 117 <div id="researched-list"></div> 118 </div> 119 </div> 120 121 <div id="diplomacy-tab" class="tab-panel"> 122 <h3>Foreign Advisor</h3> 123 <p class="panel-intro">Attitude unlocks open borders and trade-route commerce. War closes every route.</p> 124 <div id="diplomacy-list"></div> 125 </div> 126 127 <div id="civics-tab" class="tab-panel"> 128 <h3>Civics Advisor</h3> 129 <p class="panel-intro">Choose among five forms of public life. Adopt several changes in one reform; cities then lose one turn of yields to anarchy.</p> 130 <div id="civics-list"></div> 131 <p id="civics-status" class="civics-status" role="status"></p> 132 <button type="button" id="reform-civics-btn">Reform civics</button> 133 </div> 134 135 <div id="chronicle-tab" class="tab-panel"> 136 <h3>California Chronicle</h3> 137 <p class="panel-intro">A concise record of growth, research, diplomacy, and conflict.</p> 138 <ol id="chronicle-list"></ol> 139 </div> 140 141 <div id="victory-tab" class="tab-panel"> 142 <h3>Victory Progress</h3> 143 <div id="victory-progress"> 144 <div><strong>Domination:</strong> Control all cities <span id="domination-progress">0/4</span></div> 145 <div><strong>Cultural:</strong> Achieve 100 culture <span id="cultural-progress">0/100</span></div> 146 <div><strong>Scientific:</strong> Research Silicon Valley <span id="scientific-progress">Not Started</span></div> 147 <div><strong>Economic:</strong> Amass 1000 gold <span id="economic-progress">100/1000</span></div> 148 </div> 149 </div> 150 </div> 151 </div> 152 </div> 153 154 <div id="tooltip"></div> 155 <div id="toast-container"></div> 156 <span id="share-status" class="visually-hidden" role="status" aria-l
156ive="polite"></span> 157 158
158<script src="growth.js"></script>
158 159
159<script src="game.js"></script>
159 160
160<script defer src="https://www.kylelangford.org/growth.js" data-site="civilization-california" data-primary-event="game_started"></script>
160 161</body> 162</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.