<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>末日終端 v0.35.0 - 模組化</title>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<style>
body { background: #0a0a0a; color: #00ff41; font-family: 'Courier New', monospace; margin:0; padding:20px; }
.container { max-width: 650px; margin:auto; border:1px solid #00ff41; padding:20px; position: relative; }
.top-bar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.top-bar .stat-item { display: flex; align-items: center; gap: 4px; }
.top-bar .highlight { color: #fff; font-weight: bold; }
.version { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: #555; }
h2 { display: none; }
input, select { background:#000; border:1px solid #00ff41; color:#00ff41; width:100%; padding:10px; margin:10px 0; box-sizing:border-box; }
button { background:#00ff41; color:#000; border:none; width:100%; padding:12px; cursor:pointer; font-weight:bold; margin-top:5px; }
button:hover { background:#00cc33; }
button:disabled { background:#222; color:#444; }
.quick-actions { display:flex; gap:10px; margin:10px 0; justify-content:center; flex-wrap:wrap; }
.small-btn { width:80px; height:80px; background:#050505; border:1px solid #00ff41; color:#00ff41; font-size:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px; margin:0; }
.small-btn:hover { background:#111; }
.small-btn span { font-size:20px; margin-bottom:4px; }
.sub-actions { display:flex; gap:10px; justify-content:center; margin:10px 0; flex-wrap:wrap; }
.sub-btn { width:70px; height:50px; background:#111; border:1px solid #00ff41; color:#00ff41; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sub-btn:hover { background:#222; }
#log-window { height:250px; overflow-y:auto; border:1px solid #222; padding:10px; margin:10px 0; background:rgba(0,255,65,0.03); font-size:14px; line-height:1.6; white-space:pre-wrap; }
.panel { margin:15px 0; border:1px solid #333; padding:10px; background:#050505; display:none; }
.attr-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid #111; }
.attr-name { cursor:pointer; color:#00ff41; }
.attr-name:hover { color:#fff; }
.attr-controls { display:flex; gap:5px; align-items:center; }
.attr-controls button { width:25px; height:25px; padding:0; font-size:14px; line-height:1; }
.attr-info { color:#888; font-size:12px; margin-left:10px; }
.remaining-points { text-align:right; margin-bottom:10px; font-weight:bold; }
.inv-item { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #111; padding:6px 0; font-size:14px; }
.inv-item button { width:auto; padding:2px 8px; font-size:12px; margin-left:4px; }
.sell-btn { background:#ff4d4d; color:white; }
.equip-btn { background:#4488ff; color:white; }
.unequip-btn { background:#ffaa00; color:black; }
.use-btn { background:#00aa66; color:white; }
.pagination { display:flex; justify-content:center; gap:10px; margin:10px 0; }
.pagination button { width:auto; padding:5px 15px; background:#222; color:#00ff41; border:1px solid #00ff41; }
.shop-item { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #111; padding:6px 0; }
.buy-btn { background:#00cc66; color:black; }
.adventure-card { display:flex; justify-content:space-between; align-items:center; padding:10px; border:1px solid #333; margin:8px 0; cursor:pointer; background:#050505; }
.adventure-card:hover { background:#111; border-color:#00ff41; }
.adventure-card .zone-name { font-size:16px; font-weight:bold; }
.adventure-card .zone-level { color:#888; font-size:13px; }
.adventure-card .zone-go { color:#00ff41; font-size:18px; }
.skill-row, .preset-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #111; gap:5px; flex-wrap:wrap; }
.skill-row .skill-info { flex:1; }
.skill-row .skill-name { font-weight:bold; }
.skill-row .skill-detail { font-size:12px; color:#888; }
.skill-row .skill-value { font-size:16px; color:#fff; }
.preset-row select { width:auto; padding:3px; background:#000; color:#00ff41; border:1px solid #00ff41; }
.preset-row input { width:60px; padding:3px; background:#000; color:#00ff41; border:1px solid #00ff41; }
.preset-row button { width:auto; padding:2px 8px; font-size:12px; }
.remove-btn { background:#ff4d4d; color:white; }
.progress-bar { width:100%; height:20px; background:#222; border:1px solid #00ff41; margin:10px 0; }
.progress-fill { height:100%; background:#00ff41; width:0%; transition: width 0.1s linear; }
.modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); align-items:center; justify-content:center; z-index:1000; }
.modal-content { background:#050505; border:1px solid #00ff41; padding:20px; max-width:400px; width:90%; color:#00ff41; font-family:'Courier New', monospace; }
.modal-content h3 { margin:0 0 15px; }
.modal-content .attr-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #111; }
.modal-content button { margin-top:15px; width:100%; }
.panel-title { font-weight:bold; margin-bottom:8px; border-bottom:1px solid #333; padding-bottom:5px; }
.equip-item { cursor:pointer; padding:5px 0; border-bottom:1px solid #111; }
.equip-item:hover { background:#111; }
/* 战报样式 */
.report-item { padding:8px 0; border-bottom:1px solid #222; }
.report-header { display:flex; justify-content:space-between; align-items:center; }
.report-actions { display:flex; gap:8px; margin-top:5px; }
.report-actions button { width:auto; padding:3px 10px; font-size:12px; }
.favorite-btn { background:none; border:1px solid #f1c40f; color:#f1c40f; }
.favorite-btn.active { background:#f1c40f; color:#000; }
.report-detail { margin-top:10px; padding:10px; background:#0a0a0a; border:1px solid #333; display:none; }
.report-detail pre { white-space:pre-wrap; font-family:'Courier New', monospace; color:#00dd33; }
</style>
</head>
<body>
<div class="container" id="main-container">
<h2>TERMINAL v0.35.0</h2>
<div class="version">v0.35.0</div>
<div id="auth-ui">
<input type="email" id="email" placeholder="衛星通訊 Email...">
<input type="password" id="password" placeholder="接入密鑰 Password...">
<button onclick="handleLogin()">同步生物識別 (登錄)</button>
<div id="login-msg" style="color:#ff4d4d; text-align:center;"></div>
</div>
<div id="create-panel" class="panel">
<div class="panel-title">🧬 角色創建 (總點數40)</div>
<input type="text" id="new-nickname" placeholder="輸入你的角色名字...">
<div class="remaining-points">可分配點數：<span id="remain-points">0</span></div>
<div id="attr-list"></div>
<button onclick="createCharacter()">創建角色</button>
</div>
<div id="game-ui" style="display:none;">
<div class="top-bar" id="top-bar">
<div class="stat-item">代號 <span id="p-name" class="highlight">--</span></div>
<div class="stat-item">Lv.<span id="p-lvl" class="highlight">--</span></div>
<div class="stat-item">EXP <span id="p-exp" class="highlight">0</span></div>
<div class="stat-item">💰 <span id="p-gold" class="highlight">0</span></div>
<div class="stat-item">❤️ <span id="p-hp" class="highlight">--</span></div>
<div class="stat-item">💧 <span id="p-mp" class="highlight">--</span></div>
</div>
<div class="sub-actions" id="char-submenu" style="display:none;">
<button class="sub-btn" onclick="openHeroPanel()">📋 屬性</button>
<button class="sub-btn" onclick="openEquipPanel()">🛡️ 裝備</button>
<button class="sub-btn" onclick="openSkillsPanel()">📜 技能</button>
<button class="sub-btn" onclick="openPresetPanel()">⚔️ 策略</button>
</div>
<div id="hero-panel" class="panel"></div>
<div id="equip-panel" class="panel"></div>
<div id="skills-panel" class="panel"></div>
<div id="preset-panel" class="panel">
<div class="panel-title">⚔️ 戰鬥策略預設</div>
<div style="margin-bottom:8px;"><label>方案名稱：</label><input type="text" id="preset-name" value="默認方案" style="width:60%; padding:4px;"></div>
<div style="margin-bottom:8px;"><label>站位：</label><select id="preset-position" style="width:40%; padding:4px;"><option value="front">前排</option><option value="back">後排</option></select></div>
<div id="preset-actions-list"></div>
<button class="sub-btn" onclick="addPresetRound()" style="width:100%; margin-top:5px;">+ 添加回合行動</button>
<div style="margin-top:10px; display:flex; gap:10px;"><button class="sub-btn" onclick="savePreset()">💾 保存</button><button class="sub-btn" onclick="loadPresets()">📂 載入</button></div>
</div>
<div id="reports-panel" class="panel">
<div class="panel-title">📋 歷史戰報</div>
<div id="reports-list"></div>
<div class="pagination" id="reports-pagination"></div>
</div>
<div id="adventure-panel" class="panel"></div>
<div id="adventure-confirm" class="panel">
<div class="panel-title">⚔️ 冒險確認</div>
<div id="confirm-zone-info"></div>
<div style="margin:10px 0;"><label>使用預設方案：</label><span id="confirm-preset-status" style="color:#888;">未載入</span></div>
<div style="display:flex; gap:10px; margin-top:10px;"><button class="sub-btn" onclick="openPresetFromConfirm()">調整策略</button><button class="sub-btn" onclick="startAdventure()">出發探索</button></div>
</div>
<div id="log-window"></div>
<div id="progress-container" style="display:none;"><div class="progress-bar"><div id="progress-fill" class="progress-fill"></div></div></div>
<div id="inventory-ui" class="panel"><div id="inventory-list"></div><div class="pagination" id="inv-pagination"></div></div>
<div id="shop-panel" class="panel"><div id="shop-list"></div></div>
<div class="quick-actions">
<button class="small-btn" id="char-btn" onclick="toggleCharMenu()"><span>📋</span>人物</button>
<button class="small-btn" onclick="toggleInventory()"><span>📦</span>背包</button>
<button class="small-btn" onclick="toggleShop()"><span>🛒</span>商店</button>
<button class="small-btn" onclick="toggleAdventure()"><span>🗺️</span>冒險</button>
<button class="small-btn" onclick="toggleReports()"><span>📋</span>戰報</button>
</div>
<button onclick="handleLogout()" style="background:#330000; color:#ff4d4d; margin-top:20px;">離線 (登出)</button>
</div>
</div>
<div id="item-modal" class="modal"><div class="modal-content" id="item-modal-content"></div></div>
<!-- 按依赖顺序加载 JS -->
<script src="js/config.js"></script>
<script src="js/core.js"></script>
<script src="js/auth.js"></script>
<script src="js/create.js"></script>
<script src="js/hero-panel.js"></script>
<script src="js/equip-panel.js"></script>
<script src="js/skills.js"></script>
<script src="js/preset.js"></script>
<script src="js/inventory.js"></script>
<script src="js/shop.js"></script>
<script src="js/adventure.js"></script>
<script src="js/reports.js"></script>
<script src="js/ui.js"></script>
<script src="js/broadcast.js"></script>
</body>
</html>