Hugging Face's logo

Spaces:
HelloSun
/
empire-web
Running

App Files Community
empire-web / index.html
HelloSun's picture
HelloSun
全面繁體中文化
31ac68f verified
Raw History Blame Contribute Delete
15.4 kB
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>帝國征途 · 回合制戰略</title>
<meta name="description" content="回合制戰略傳奇。集結軍隊、締結同盟，征服世界。" />
<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=Cinzel:wght@400;500;600;700;800&family=Cinzel+Decorative:wght@700;900&family=Inter:wght@300;400;500;600;700&family=Noto+Serif+TC:wght@400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<svg class="sprite" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
<symbol id="i-crown" viewBox="0 0 24 24"><path d="M3 8l4 4 5-7 5 7 4-4-2 11H5L3 8z"/><path d="M5 19h14"/></symbol>
<symbol id="i-gold" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.2"/><path d="M12 7.4l1.5 3 3.3.5-2.4 2.4.6 3.3-3-1.6-3 1.6.6-3.3-2.4-2.4 3.3-.5 1.5-3z"/></symbol>
<symbol id="i-food" viewBox="0 0 24 24"><path d="M12 21V9"/><path d="M12 9c-2.6 0-4.2-1.6-4.2-4.2C10.4 4.8 12 6.4 12 9zM12 9c2.6 0 4.2-1.6 4.2-4.2C13.6 4.8 12 6.4 12 9zM12 13.2c-2.6 0-4.2-1.6-4.2-4.2 2.6 0 4.2 1.6 4.2 4.2zM12 13.2c2.6 0 4.2-1.6 4.2-4.2-2.6 0-4.2 1.6-4.2 4.2zM12 17.4c-2.6 0-4.2-1.6-4.2-4.2 2.6 0 4.2 1.6 4.2 4.2zM12 17.4c2.6 0 4.2-1.6 4.2-4.2-2.6 0-4.2 1.6-4.2 4.2z"/></symbol>
<symbol id="i-wood" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="4.6" rx="2.3"/><rect x="3" y="13.4" width="18" height="4.6" rx="2.3"/><circle cx="7" cy="8.3" r="1.1"/><circle cx="7" cy="15.7" r="1.1"/></symbol>
<symbol id="i-stone" viewBox="0 0 24 24"><path d="M3.5 19l3-8.2 5.2-2.2 4.2 3.1 4.6 1-1.9 6.3H3.5z"/><path d="M6.5 10.8l5.2 3.2 4.2-2M11.7 14v5"/></symbol>
<symbol id="i-army" viewBox="0 0 24 24"><path d="M4 14.2a8 8 0 0116 0V16H4v-1.8z"/><path d="M3.4 16h17.2M12 6.2V4"/><path d="M12 6.2c2-2.2 4.2-1.2 5.4 1"/></symbol>
<symbol id="i-sword" viewBox="0 0 24 24"><path d="M18.4 2.6l3 3-9.2 9.2-3-3 9.2-9.2z"/><path d="M6.4 14.2l3.4 3.4M4 20l3.5-3.5"/><path d="M14.5 6.5l3 3"/></symbol>
<symbol id="i-shield" viewBox="0 0 24 24"><path d="M12 2.8l7.5 3v5.5c0 4.6-3.1 7.8-7.5 9.4-4.4-1.6-7.5-4.8-7.5-9.4V5.8l7.5-3z"/><path d="M9 12l2.2 2.2L15.4 10"/></symbol>
<symbol id="i-build" viewBox="0 0 24 24"><path d="M14.2 2.8l7 7-3 3-7-7 3-3z"/><path d="M11.2 8.8L3 17l4 4 8.2-8.2"/><path d="M6 19l-1 1"/></symbol>
<symbol id="i-scroll" viewBox="0 0 24 24"><path d="M7 4h11v14H7z"/><path d="M7 4a2.2 2.2 0 00-2.2 2.2V8h2.2M18 18a2.2 2.2 0 002.2-2.2V14H18"/><path d="M10 8h5M10 11.5h5M10 15h3"/></symbol>
<symbol id="i-dove" viewBox="0 0 24 24"><path d="M20.5 5.5c-3.2 0-5.4 1.1-7.2 3l-4 4.1c-1.9 2-2.8 3.1-3.2 5.2l4.2-1.9 3.1 3c4.3-1 7.6-5.2 7.6-10.4V5.5z"/><path d="M9.2 14.2L5 12.2"/></symbol>
<symbol id="i-handshake" viewBox="0 0 24 24"><path d="M2.6 12.1l4.2-4.2 5 3 5-3 4.6 4.6-5.3 6.2-4.3-3.1-4.3 3.1-4.9-6.6z"/><path d="M9.2 9.6l3 2.1 3-2.1"/></symbol>
<symbol id="i-trade" viewBox="0 0 24 24"><path d="M3.6 8h13.6l-3-3M20.4 16H6.8l3 3"/></symbol>
<symbol id="i-close" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
<symbol id="i-map" viewBox="0 0 24 24"><path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z"/><path d="M9 4v14M15 6v14"/></symbol>
<symbol id="i-save" viewBox="0 0 24 24"><path d="M5 3h11l3 3v15H5V3z"/><path d="M8 3v6h7V3M8 21v-7h8v7"/></symbol>
<symbol id="i-help" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.6 9.2a2.5 2.5 0 114 2.1c-.9.7-1.6 1.2-1.6 2.4"/><circle cx="12" cy="17.3" r=".6" fill="currentColor" stroke="none"/></symbol>
<symbol id="i-flag" viewBox="0 0 24 24"><path d="M5 21V4"/><path d="M5 4.5h12l-3 4 3 4H5"/></symbol>
<symbol id="i-skull" viewBox="0 0 24 24"><path d="M12 2.8a8 8 0 00-5 14.2v3.2h10v-3.2a8 8 0 00-5-14.2z"/><circle cx="9" cy="11" r="1.5"/><circle cx="15" cy="11" r="1.5"/><path d="M10 17h4M9.4 21v-2M14.6 21v-2"/></symbol>
<symbol id="i-spark" viewBox="0 0 24 24"><path d="M12 2l2.1 7.9L22 12l-7.9 2.1L12 22l-2.1-7.9L2 12l7.9-2.1L12 2z"/></symbol>
<symbol id="i-back" viewBox="0 0 24 24"><path d="M15 4.5l-7.5 7.5L15 19.5"/></symbol>
<symbol id="i-chevron" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></symbol>
<symbol id="t-plains" viewBox="0 0 24 24"><path d="M2.5 19.5c3.2-4.6 6.3-4.6 9.5 0M12 19.5c3.2-5.2 6.3-5.2 9.5 0"/><path d="M8 11.5V4M8 6.2c-2.2 0-3.4-1.2-3.4-3.2 2.2 0 3.4 1.2 3.4 3.2zM8 6.2c2.2 0 3.4-1.2 3.4-3.2-2.2 0-3.4 1.2-3.4 3.2z"/></symbol>
<symbol id="t-forest" viewBox="0 0 24 24"><path d="M12 2.5l5.4 7.4h-3l4.3 6.5H5.3l4.3-6.5h-3L12 2.5z"/><path d="M12 16.4V21.5"/></symbol>
<symbol id="t-mountain" viewBox="0 0 24 24"><path d="M2.5 19.5L9 7.5l3.7 6.1 2.6-4 6.2 9.9H2.5z"/><path d="M7.4 12.5l1.6 2.4 2.4-2.4"/></symbol>
<symbol id="t-city" viewBox="0 0 24 24"><path d="M3.5 21V8.5l3.2 2V6.2l3.2 2V3.5h4.2v4.7l3.2-2v4.3l3.2-2V21"/><path d="M3.5 21h17M9 21v-5.2h6V21"/></symbol>
<symbol id="c-legion" viewBox="0 0 24 24"><path d="M12 1.8l8.2 3v7.1c0 5-3.4 8.8-8.2 10.3-4.8-1.5-8.2-5.3-8.2-10.3V4.8l8.2-3z"/><path d="M8.5 9h7v5.4h-7z"/><path d="M6.8 19.2v-3.4h10.4v3.4"/></symbol>
<symbol id="c-leaf" viewBox="0 0 24 24"><path d="M20.5 3.5C10.5 3.5 5 8.5 5 15.6c0 2.3 1.2 4.9 1.2 4.9s1.8-7.4 12.3-11.5c-3.2 4.2-6.5 6.4-9.7 8.4"/></symbol>
<symbol id="c-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.2"/><path d="M12 1.5v3M12 19.5v3M1.5 12h3M19.5 12h3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M19.4 4.6l-2.1 2.1M6.7 17.3l-2.1 2.1"/></symbol>
<symbol id="c-eye" viewBox="0 0 24 24"><path d="M1.8 12S6 5.8 12 5.8 22.2 12 22.2 12 18 18.2 12 18.2 1.8 12 1.8 12z"/><circle cx="12" cy="12" r="3.2"/><circle cx="12" cy="12" r=".8" fill="currentColor" stroke="none"/></symbol>
<symbol id="c-snow" viewBox="0 0 24 24"><path d="M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9.2 4.5L12 7l2.8-2.5M9.2 19.5L12 17l2.8 2.5M4.4 10.2l3.6-.9-.9-3.6M19.6 13.8l-3.6.9.9 3.6M4.4 13.8l3.6.9-.9 3.6M19.6 10.2l-3.6-.9.9-3.6"/></symbol>
<symbol id="c-fang" viewBox="0 0 24 24"><path d="M4.5 2.8c2.4 6.2 3.4 10.4 2 18 3.4-2.4 4.7-4.9 5.5-9 1 4.1 2.3 6.6 5.7 9-1.4-7.6-.4-11.8 2-18-5.4 2.4-9.8 2.4-15.2 0z"/></symbol>
<symbol id="c-wave" viewBox="0 0 24 24"><path d="M2 8.5c2.5-2.5 4.5-2.5 7 0s4.5 2.5 7 0 4.5-2.5 6 0M2 13c2.5-2.5 4.5-2.5 7 0s4.5 2.5 7 0 4.5-2.5 6 0M2 17.5c2.5-2.5 4.5-2.5 7 0s4.5 2.5 7 0 4.5-2.5 6 0"/></symbol>
<symbol id="c-bolt" viewBox="0 0 24 24"><path d="M13.5 1.8L3.8 13.5h6.1L8.5 22.2 19 10.2h-6.2l.7-8.4z"/></symbol>
<symbol id="c-flame" viewBox="0 0 24 24"><path d="M12 2.2c.9 4.8 6 6.3 6 12.2a6 6 0 11-12 0c0-3 1.8-5.2 3.2-7.2.1 3 1 4.2 2.8 4.2-.9-4.1 0-7.1 0-9.2z"/></symbol>
<symbol id="c-mist" viewBox="0 0 24 24"><circle cx="12" cy="9" r="4"/><path d="M3 16.5c3-2.4 5.4-2.4 8.4 0s5.4 2.4 8.4 0M4.5 20c2.6-2 4.7-2 7.3 0s4.7 2 7.3 0"/></symbol>
<symbol id="c-scale" viewBox="0 0 24 24"><path d="M12 2.2a6.3 6.3 0 016.3 6.3v8.8a6.3 6.3 0 01-12.6 0V8.5A6.3 6.3 0 0112 2.2z"/><path d="M5.7 10.5h12.6M5.7 14.2h12.6M7.4 7.6h9.2"/></symbol>
<symbol id="c-skullcrest" viewBox="0 0 24 24"><path d="M12 2.3a7.8 7.8 0 00-4.9 13.9v3.1h9.8v-3.1A7.8 7.8 0 0012 2.3z"/><circle cx="9.2" cy="10.7" r="1.5"/><circle cx="14.8" cy="10.7" r="1.5"/><path d="M10 16h4M9.6 19.3v2.2M14.4 19.3v2.2"/></symbol>
</svg>
<div id="app">
<!-- ═══════════════ MENU ═══════════════ -->
<section id="screen-menu" class="screen active">
<div class="menu-bg" aria-hidden="true"></div>
<div class="menu-veil" aria-hidden="true"></div>
<div class="menu-embers" aria-hidden="true"></div>
<div class="menu-grid">
<div class="menu-copy">
<div class="crest-mark">
<svg class="ico"><use href="#i-crown"/></svg>
</div>
<p class="eyebrow">回合制戰略傳奇</p>
<h1 class="wordmark">帝國</h1>
<p class="wordmark-cn">征 途 無 疆</p>
<p class="tagline">集結軍隊，締結同盟。<br><em>征服世界。</em></p>
<div class="menu-actions">
<button id="btn-new" class="btn btn-primary btn-lg">
<svg class="ico"><use href="#i-sword"/></svg><span>新的征程<small>開啟新王朝</small></span>
</button>
<button id="btn-continue" class="btn btn-ghost btn-lg hidden">
<svg class="ico"><use href="#i-crown"/></svg><span>繼續王朝<small>重返王座</small></span>
</button>
<button id="btn-help" class="btn btn-quiet">遊戲指南</button>
</div>
<div class="menu-facts">
<span><b>2</b> 世界地圖</span><i></i><span><b>6</b> 勢力</span><i></i><span><b>3</b> 每回合行動</span>
</div>
</div>
<div class="menu-portrait">
<div class="portrait-frame">
<div class="portrait-img" style="background-image:url('assets/images/emperor.png')"></div>
<div class="portrait-vignette"></div>
<div class="portrait-plaque">
<span class="plaque-kicker">王 座 靜 候</span>
<span class="plaque-name">登 上 王 座</span>
</div>
<i class="corner tl"></i><i class="corner tr"></i><i class="corner bl"></i><i class="corner br"></i>
</div>
</div>
</div>
<footer class="menu-foot">
<span class="foot-line"></span>
<span>「權力不會自己走上王座」</span>
<span class="foot-line"></span>
</footer>
</section>
<!-- ═══════════════ SETUP ═══════════════ -->
<section id="screen-setup" class="screen">
<div class="setup-bg" aria-hidden="true"></div>
<header class="setup-head">
<button id="btn-setup-back" class="btn btn-icon" aria-label="返回"><svg class="ico"><use href="#i-back"/></svg></button>
<div class="setup-title">
<p class="eyebrow">開創你的帝國</p>
<h2>書寫你的王朝</h2>
</div>
<div class="steps">
<span class="step active"><b>I</b>世界</span><span class="step-line"></span>
<span class="step active"><b>II</b>勢力</span><span class="step-line"></span>
<span class="step active"><b>III</b>稱號</span>
</div>
</header>
<div class="setup-body">
<div class="setup-col setup-worlds">
<div class="section-label"><span>01</span> 選擇世界</div>
<div id="map-options" class="map-options"></div>
</div>
<div class="setup-col setup-factions">
<div class="section-label"><span>02</span> 選擇勢力</div>
<div id="faction-options" class="faction-options"></div>
</div>
<aside class="setup-col setup-identity">
<div class="section-label"><span>03</span> 你的傳奇</div>
<div class="identity-card">
<div class="identity-portrait">
<div class="identity-img"></div>
<div class="identity-badge" id="identity-crest"><svg class="ico"><use href="#c-legion"/></svg></div>
</div>
<div class="identity-fields">
<label>君主之名 <input id="in-leader" maxlength="20" placeholder="你的名字" autocomplete="off" /></label>
<label>國號 <input id="in-nation" maxlength="24" placeholder="你的帝國" autocomplete="off" /></label>
<label>格言 <input id="in-slogan" maxlength="40" placeholder="榮耀就在前方！" autocomplete="off" /></label>
</div>
</div>
<div id="setup-summary" class="setup-summary"></div>
<button id="btn-begin" class="btn btn-primary btn-block btn-lg" disabled>
<svg class="ico"><use href="#i-crown"/></svg><span>登基稱帝</span>
</button>
<p class="setup-hint">每回合有 3 個行動。征服所有疆域即可統治世界。</p>
</aside>
</div>
</section>
<!-- ═══════════════ GAME ═══════════════ -->
<section id="screen-game" class="screen">
<header class="topbar">
<button id="btn-game-menu" class="brand" title="返回主選單">
<svg class="ico crown"><use href="#i-crown"/></svg>
<span class="brand-word">帝國</span>
</button>
<div class="resources" id="resource-bar"></div>
<div class="turn-cluster">
<div class="turn-info">
<span class="turn-label">回合 <b id="turn-num">1</b></span>
<span class="action-pips" id="action-pips"></span>
</div>
<button id="btn-end-turn" class="btn btn-primary btn-end">
<span>結束回合</span><svg class="ico"><use href="#i-chevron"/></svg>
</button>
</div>
</header>
<div class="game-grid">
<aside class="side-left">
<div class="sovereign-card" id="sovereign-card"></div>
<div class="panel stats-panel" id="stats-panel"></div>
<div class="panel objective-panel" id="objective-panel"></div>
<div class="panel relations-panel">
<div class="panel-head"><h3>列強</h3><button class="mini-link" data-open="diplomacy">外交</button></div>
<div id="relations-list" class="relations-list"></div>
</div>
</aside>
<main class="map-panel">
<div class="map-head">
<div class="map-title">
<p class="eyebrow">戰爭地圖</p>
<h2 id="map-name">大陸王座</h2>
</div>
<div class="map-tools">
<div class="legend" id="map-legend"></div>
<button class="btn btn-icon" data-open="chronicle" title="編年史"><svg class="ico"><use href="#i-scroll"/></svg></button>
<button class="btn btn-icon" id="btn-save" title="存檔"><svg class="ico"><use href="#i-save"/></svg></button>
<button class="btn btn-icon" data-open="help" title="指南"><svg class="ico"><use href="#i-help"/></svg></button>
</div>
</div>
<div class="map-stage" id="map-stage">
<div class="map-parchment" aria-hidden="true"></div>
<div class="map-compass" aria-hidden="true">
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="34"/><path d="M50 8l6 34-6 8-6-8 6-34z"/><path d="M50 92l-6-34 6-8 6 8-6 34z"/><path d="M8 50l34-6 8 6-8 6-34-6z" opacity=".55"/><path d="M92 50l-34 6-8-6 8-6 34 6z" opacity=".55"/></svg>
<span>N</span>
</div>
<svg id="map-svg" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="世界地圖"></svg>
<div class="map-hint" id="map-hint">點選疆域以查看詳情</div>
<div class="map-tooltip" id="map-tooltip"></div>
</div>
<div class="map-foot">
<div class="turn-status" id="turn-status"></div>
<button class="chronicle-peek" data-open="chronicle">
<svg class="ico"><use href="#i-scroll"/></svg>
<span id="latest-log">你的故事從這裡開始……</span>
</button>
</div>
</main>
<aside class="side-right" id="council-panel"></aside>
</div>
</section>
<div id="modal-root" class="modal-root" aria-live="polite"></div>
<div id="toast-root" class="toast-root"></div>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>