Darkages
374 lines
20 KiB
HTML
374 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Celestial Hierarchy - Human Engine</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Hamburger Button -->
|
||
<button class="hamburger-btn" onclick="toggleSidePanel()">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
|
||
<!-- Overlay -->
|
||
<div class="overlay" id="overlay" onclick="closeSidePanel()"></div>
|
||
|
||
<!-- Side Panel (Hamburger Menu) -->
|
||
<div class="side-panel" id="sidePanel">
|
||
<div class="panel-header">
|
||
<h2>👼 Angelic Summoning</h2>
|
||
<button class="close-panel-btn" onclick="closeSidePanel()">×</button>
|
||
</div>
|
||
|
||
<div style="text-align: center; color: #888; margin-bottom: 20px;">View currencies in the Left Sidebar</div>
|
||
|
||
<!-- Panel Angel Cards -->
|
||
<div id="panel-angels-container">
|
||
<!-- Tier 1: Common Angels -->
|
||
<div class="angel-card unlocked" id="common-angel-panel-card">
|
||
<div class="tier-badge tier-common">Tier 1</div>
|
||
<div class="angel-name">Common Angel</div>
|
||
<div class="angel-count" id="panel-common-count">0</div>
|
||
<div class="angel-cost" id="panel-common-cost">Cost: 50 Prayers</div>
|
||
<div class="angel-buff">+1 Grace/sec each</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="common" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="common" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="common" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="common" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 2: Principalities -->
|
||
<div class="angel-card locked" id="principality-angel-panel-card">
|
||
<div class="tier-badge tier-principalities">Tier 2</div>
|
||
<div class="angel-name">Principalities Angel</div>
|
||
<div class="angel-count" id="panel-principality-count">0</div>
|
||
<div class="angel-cost" id="panel-principality-cost">Cost: 150 Grace</div>
|
||
<!-- CORRECTED: Unlocks based on Grace now -->
|
||
<div class="unlock-req">Requires 150 Grace to unlock Tier 2</div>
|
||
<div class="angel-buff">+10% nearby bonus</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="principality" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="principality" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="principality" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="principality" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 3: Powers -->
|
||
<div class="angel-card locked" id="power-angel-panel-card">
|
||
<div class="tier-badge tier-powers">Tier 3</div>
|
||
<div class="angel-name">Power Angel</div>
|
||
<div class="angel-count" id="panel-power-count">0</div>
|
||
<div class="angel-cost" id="panel-power-cost">Cost: 250 Sacred Vessels</div>
|
||
<div class="unlock-req">Requires 100 Sacred Vessels to unlock Tier 3</div>
|
||
<div class="angel-buff">+15% resource collection</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="power" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="power" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="power" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="power" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 4: Virtues -->
|
||
<div class="angel-card locked" id="virtue-angel-panel-card">
|
||
<div class="tier-badge tier-virtues">Tier 4</div>
|
||
<div class="angel-name">Virtue Angel</div>
|
||
<div class="angel-count" id="panel-virtue-count">0</div>
|
||
<div class="angel-cost" id="panel-virtue-cost">Cost: 400 Blessings</div>
|
||
<div class="unlock-req">Requires 150 Manna to unlock Tier 4</div>
|
||
<div class="angel-buff">+25% miracle chance</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="virtue" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="virtue" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="virtue" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="virtue" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 5: Dominions -->
|
||
<div class="angel-card locked" id="dominion-angel-panel-card">
|
||
<div class="tier-badge tier-dominions">Tier 5</div>
|
||
<div class="angel-name">Dominion Angel</div>
|
||
<div class="angel-count" id="panel-dominion-count">0</div>
|
||
<div class="angel-cost" id="panel-dominion-cost">Cost: 600 Souls</div>
|
||
<div class="unlock-req">Requires 200 Wisdom to unlock Tier 5</div>
|
||
<div class="angel-buff">+20% all output</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="dominion" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="dominion" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="dominion" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="dominion" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 6: Thrones -->
|
||
<div class="angel-card locked" id="throne-angel-panel-card">
|
||
<div class="tier-badge tier-thrones">Tier 6</div>
|
||
<div class="angel-name">Throne Angel</div>
|
||
<div class="angel-count" id="panel-throne-count">0</div>
|
||
<div class="angel-cost" id="panel-throne-cost">Cost: 800 Wisdom</div>
|
||
<div class="unlock-req">Requires 250 Miracles to unlock Tier 6</div>
|
||
<div class="angel-buff">+15% efficiency</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="throne" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="throne" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="throne" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="throne" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 7: Cherubim -->
|
||
<div class="angel-card locked premium-angel" id="cherub-angel-panel-card">
|
||
<div class="tier-badge tier-cherubim">Tier 7</div>
|
||
<div class="angel-name">Cherubim Guardian</div>
|
||
<div class="angel-count" id="panel-cherub-count">0</div>
|
||
<div class="angel-cost" id="panel-cherub-cost">Cost: 1000 Manna</div>
|
||
<div class="unlock-req">Requires 300 Auras to unlock Tier 7</div>
|
||
<div class="angel-buff">-25% spawn costs</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="cherub" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="cherub" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="cherub" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="cherub" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 8: Seraphim -->
|
||
<div class="angel-card locked premium-angel" id="seraph-angel-panel-card">
|
||
<div class="tier-badge tier-seraphim">Tier 8</div>
|
||
<div class="angel-name">Seraphim Fire Angel</div>
|
||
<div class="angel-count" id="panel-seraph-count">0</div>
|
||
<div class="angel-cost" id="panel-seraph-cost">Cost: 1500 Miracles</div>
|
||
<div class="unlock-req">Requires 350 Sacred Icons to unlock Tier 8</div>
|
||
<div class="angel-buff">+5x Prayer generation</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="seraph" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="seraph" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="seraph" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="seraph" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tier 9: Arch-Angels -->
|
||
<div class="angel-card locked premium-angel" id="archangel-angel-panel-card">
|
||
<div class="tier-badge tier-archangels">Tier 9</div>
|
||
<div class="angel-name">Arch-Angel (Michael/Gabriel)</div>
|
||
<div class="angel-count" id="panel-archangel-count">0</div>
|
||
<div class="angel-cost" id="panel-archangel-cost">Cost: 500 Sacred Icons</div>
|
||
<div class="unlock-req">Requires Tier 8 to unlock Tier 9</div>
|
||
<div class="angel-buff">10x+ Multiplier! Ultimate!</div>
|
||
<div class="quick-buys">
|
||
<button class="buy-option-btn" data-tier="archangel" data-qty="1">x1</button>
|
||
<button class="buy-option-btn" data-tier="archangel" data-qty="5">x5</button>
|
||
<button class="buy-option-btn" data-tier="archangel" data-qty="10">x10</button>
|
||
<button class="buy-option-btn" data-tier="archangel" data-qty="100">x100</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Game Content Wrapper -->
|
||
<div class="main-layout">
|
||
|
||
<!-- LEFT SIDEBAR: All Currencies -->
|
||
<aside class="sidebar">
|
||
<div class="currency-frame">
|
||
<h3>💎 Divine Currencies</h3>
|
||
|
||
<div class="currency-row humans-currency">
|
||
<span class="currency-name">Humans</span>
|
||
<span class="currency-amount" id="sidebar-humans-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row prayers-currency">
|
||
<span class="currency-name">Prayers</span>
|
||
<span class="currency-amount" id="sidebar-prayers-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row grace-currency">
|
||
<span class="currency-name">Grace</span>
|
||
<span class="currency-amount" id="sidebar-grace-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row vessel-currency">
|
||
<span class="currency-name">Vessels</span>
|
||
<span class="currency-amount" id="sidebar-vessel-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row scripture-currency">
|
||
<span class="currency-name">Scripture</span>
|
||
<span class="currency-amount" id="sidebar-scripture-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row blessing-currency">
|
||
<span class="currency-name">Blessings</span>
|
||
<span class="currency-amount" id="sidebar-blessing-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row manna-currency">
|
||
<span class="currency-name">Manna</span>
|
||
<span class="currency-amount" id="sidebar-manna-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row souls-currency">
|
||
<span class="currency-name">Souls</span>
|
||
<span class="currency-amount" id="sidebar-souls-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row wisdom-currency">
|
||
<span class="currency-name">Wisdom</span>
|
||
<span class="currency-amount" id="sidebar-wisdom-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row miracle-currency">
|
||
<span class="currency-name">Miracles</span>
|
||
<span class="currency-amount" id="sidebar-miracle-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row aura-currency">
|
||
<span class="currency-name">Auras</span>
|
||
<span class="currency-amount" id="sidebar-aura-display">0</span>
|
||
</div>
|
||
|
||
<div class="currency-row icon-currency">
|
||
<span class="currency-name">Icons</span>
|
||
<span class="currency-amount" id="sidebar-icon-display">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="production-info" style="margin-top: 20px;">
|
||
<h4>⚡ Metrics (per sec)</h4>
|
||
<div class="production-item">
|
||
<span>Prayers:</span>
|
||
<span id="prayer-click-rate">10.0</span>
|
||
</div>
|
||
<div class="production-item">
|
||
<span>Holy Power:</span>
|
||
<span id="holy-power">1000</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sound Toggle -->
|
||
<div class="sound-toggle">
|
||
<button id="sound-toggle-btn" class="sound-btn">🔊 Sound: <span id="sound-status">ON</span></button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- RIGHT GAME CONTENT -->
|
||
<main class="game-content">
|
||
<h1 style="color: #ffd700; text-align: center; margin-bottom: 10px;">🕊️ CELESTIAL HIERARCHY 🕊️</h1>
|
||
<p class="subtitle" style="text-align: center; color: #aaa; margin-bottom: 20px;">Ascend through the 9 Tiers of Heaven with 11 Currencies</p>
|
||
|
||
<!-- Tier Display Section -->
|
||
<div class="tier-display-section">
|
||
<h3>🌟 Angelic Tiers Unlocked</h3>
|
||
|
||
<div class="tiers-grid">
|
||
<div class="tier-card unlocked" id="tier-1-card">
|
||
<div class="tier-badge tier-common">Tier 1</div>
|
||
<div class="tier-name">Common Angels</div>
|
||
<div class="tier-count" id="common-count">0</div>
|
||
<div class="tier-desc">+1 Grace/sec | Cost: Prayers</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-2-card">
|
||
<div class="tier-badge tier-principalities">Tier 2</div>
|
||
<div class="tier-name">Principalities</div>
|
||
<div class="tier-count" id="principality-count">0</div>
|
||
<div class="tier-desc">+10% bonus | Cost: Grace (150 Grace unlock)</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-3-card">
|
||
<div class="tier-badge tier-powers">Tier 3</div>
|
||
<div class="tier-name">Powers</div>
|
||
<div class="tier-count" id="power-count">0</div>
|
||
<div class="tier-desc">+15% resource | Cost: Vessels (100 Vessels unlock)</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-4-card">
|
||
<div class="tier-badge tier-virtues">Tier 4</div>
|
||
<div class="tier-name">Virtues</div>
|
||
<div class="tier-count" id="virtue-count">0</div>
|
||
<div class="tier-desc">+25% miracle | Cost: Blessings (150 Manna unlock)</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-5-card">
|
||
<div class="tier-badge tier-dominions">Tier 5</div>
|
||
<div class="tier-name">Dominions</div>
|
||
<div class="tier-count" id="dominion-count">0</div>
|
||
<div class="tier-desc">+20% output | Cost: Souls (200 Wisdom unlock)</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-6-card">
|
||
<div class="tier-badge tier-thrones">Tier 6</div>
|
||
<div class="tier-name">Thrones</div>
|
||
<div class="tier-count" id="throness-count">0</div>
|
||
<div class="tier-desc">+15% efficiency | Cost: Wisdom (250 Miracles unlock)</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-7-card">
|
||
<div class="tier-badge tier-cherubim">Tier 7</div>
|
||
<div class="tier-name">Cherubim</div>
|
||
<div class="tier-count" id="cherub-count">0</div>
|
||
<div class="tier-desc">Cost Reduction | Cost: Manna (300 Auras unlock)</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-8-card">
|
||
<div class="tier-badge tier-seraphim">Tier 8</div>
|
||
<div class="tier-name">Seraphim</div>
|
||
<div class="tier-count" id="seraph-count">0</div>
|
||
<div class="tier-desc">+5x Prayer | Cost: Miracles (350 Icons unlock)</div>
|
||
</div>
|
||
|
||
<div class="tier-card locked" id="tier-9-card">
|
||
<div class="tier-badge tier-archangels">Tier 9</div>
|
||
<div class="tier-name">Arch-Angels</div>
|
||
<div class="tier-count" id="archangel-count">0</div>
|
||
<div class="tier-desc">10x+ Multiplier | Cost: Sacred Icons (Tier 8 unlock)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Prayer Section -->
|
||
<div class="prayer-section">
|
||
<h3>🙏 Human Summoning</h3>
|
||
<button id="prayer-btn" class="click-btn glow-btn">🔮 Pray for Humans (+10 Humans)</button>
|
||
</div>
|
||
|
||
<!-- Prestige Section -->
|
||
<div class="prestige-section">
|
||
<h3>🔯 Ascension (Prestige)</h3>
|
||
<p style="text-align: center; margin-bottom: 10px;">Reset progress for permanent bonuses!</p>
|
||
|
||
<button id="ascend-btn" class="buy-option-btn">Ascend to Heaven (Cost: 1 Virtue Point)</button>
|
||
|
||
<div class="multiplier-display">
|
||
✨ Global Bonus: <span id="global-multiplier">1.0</span>x
|
||
</div>
|
||
|
||
<div class="prestige-counter">
|
||
Ascensions: <span id="ascension-count">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="action-buttons">
|
||
<button id="save-btn" class="action-btn glow-btn save-btn">💾 Save</button>
|
||
<button id="load-btn" class="action-btn glow-btn load-btn">📂 Load</button>
|
||
<button id="new-btn" class="action-btn glow-btn new-btn">🆕 New Game</button>
|
||
</div>
|
||
|
||
<!-- Status -->
|
||
<div class="status-bar" id="status-display">Welcome to Celestial Hierarchy!</div>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="game.js"></script>
|
||
</body>
|
||
</html> |