idle-game/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cosmic Garden</title>
    <link rel="stylesheet" href="css/game.css">
</head>
<body>
    <div id="game-container">
        <!-- Header -->
        <header id="game-header">
            <h1>🌌 Cosmic Garden</h1>
            <div id="currency-display">
                <span id="stardust-count">0</span> ✨ Stardust
            </div>
            <div id="per-second">
                <span id="stardust-ps">0</span> ✨/sec
            </div>
            <!-- Golden Starbloom countdown badge -->
            <div id="golden-bloom-badge" class="golden-bloom-badge"></div>
        </header>

        <!-- Main Layout -->
        <div id="main-layout">
            <!-- Left Panel: Click Area -->
            <section id="click-panel">
                <h2>Harvest</h2>
                <div id="click-area">
                    <button id="harvest-btn" title="Click to collect stardust!">
                        <span class="btn-icon">✨</span>
                        <span class="btn-text">Collect Stardust</span>
                    </button>
                    <!-- Golden Starbloom random event appears here -->
                    <div id="golden-bloom-container"></div>
                </div>
                <div id="click-info">
                    <p>Click power: <span id="click-power">1</span> ✨</p>
                </div>
                <div id="total-clicks">
                    Total clicks: <span id="total-click-count">0</span>
                </div>
            </section>

            <!-- Center Panel: Buildings -->
            <section id="buildings-panel">
                <h2>Plants</h2>
                <div id="buildings-list"></div>
            </section>

            <!-- Right Panel: Upgrades & Achievements -->
            <aside id="side-panel">
                <div class="tabs">
                    <button class="tab-btn active" data-tab="upgrades">Upgrades</button>
                    <button class="tab-btn" data-tab="achievements">Achievements</button>
                    <button class="tab-btn" data-tab="stats">Stats</button>
                    <button class="tab-btn" data-tab="prestige">✦ Prestige</button>
                </div>

                <div id="upgrades-tab" class="tab-content active">
                    <h3>Upgrades</h3>
                    <div id="upgrades-list"></div>
                </div>

                <div id="achievements-tab" class="tab-content">
                    <h3>Achievements (0/31)</h3>
                    <div id="achievements-list"></div>
                </div>

                <div id="stats-tab" class="tab-content">
                    <h3>Statistics</h3>
                    <div id="stats-content"></div>
                </div>

                <div id="prestige-tab" class="tab-content">
                    <h3>✦ Prestige</h3>
                    <div id="prestige-info">
                        <div class="prestige-essence">
                            <span class="essence-icon">✦</span>
                            <span id="prestige-essence-count">0</span>
                            <span style="font-size:0.85rem; color:var(--text-secondary)">Stellar Essence</span>
                        </div>
                        <div class="prestige-multiplier">
                            Production bonus: <span id="prestige-multiplier">+0%</span>
                        </div>
                        <div class="prestige-next">
                            Next prestige: <span id="prestige-next-essence">0</span> ✦
                        </div>
                        <p style="font-size:0.8rem; color:var(--text-muted); margin:8px 0">
                            Requires 1M total stardust for the first ✦. Prestige resets
                            stardust, buildings and upgrades — but keeps essence and
                            prestige upgrades.
                        </p>
                        <button id="prestige-btn" class="prestige-btn" disabled>
                            ✦ Prestige
                        </button>
                    </div>
                    <h3 style="margin-top:15px">Prestige Upgrades</h3>
                    <div id="prestige-upgrades-list"></div>
                </div>
            </aside>
        </div>

        <!-- Footer: Controls -->
        <footer id="game-footer">
            <div class="footer-section">
                <span class="footer-label">Slot:</span>
                <button class="slot-btn" data-slot="0">1</button>
                <button class="slot-btn" data-slot="1">2</button>
                <button class="slot-btn" data-slot="2">3</button>
                <!-- Live one-line preview of the active slot; hover a slot button to preview it -->
                <span id="slot-preview" class="slot-preview" title="Hover a slot button to preview its contents"></span>
            </div>
            <div class="footer-section">
                <span class="footer-label">Auto:</span>
                <button id="autosave-btn" class="toggle-btn on">ON</button>
            </div>
            <div class="footer-section">
                <button id="save-btn">💾 Save</button>
                <button id="export-btn">📤 Export</button>
                <button id="import-btn">📥 Import</button>
                <button id="reset-btn">🗑️ Reset</button>
            </div>
            <span id="last-saved"></span>
        </footer>
    </div>

    <!-- Notification Container -->
    <div id="notifications"></div>

    <!-- Import Modal -->
    <div id="import-modal" class="modal hidden">
        <div class="modal-content">
            <h3>Import Save</h3>
            <p class="modal-hint">Paste your save data, then choose which slot to import into.</p>
            <textarea id="import-data" placeholder="Paste your save data here..."></textarea>
            <div class="import-slot-selector">
                <span class="import-slot-label">Import into slot:</span>
                <button class="slot-btn" data-import-slot="0">1</button>
                <button class="slot-btn" data-import-slot="1">2</button>
                <button class="slot-btn" data-import-slot="2">3</button>
            </div>
            <div class="modal-buttons">
                <button id="confirm-import">Import</button>
                <button id="cancel-import">Cancel</button>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="js/game.js"></script>
    <script src="js/saveSystem.js"></script>
    <script src="js/buildings.js"></script>
    <script src="js/upgrades.js"></script>
    <script src="js/achievements.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/stats.js"></script>
    <script src="js/particles.js"></script>
    <script src="js/audio.js"></script>
    <script src="js/prestige.js"></script>
    <script src="js/prestigeUI.js"></script>
    <script src="js/main.js"></script>
</body>
</html>