<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG Clicker Game</title>
    <link rel="stylesheet" href="/css/style.css">
</head>

<body>
    <div class="game-container">
        <header>
            <h1>RPG Clicker Game</h1>
        </header>

        <main class="main-content">
            <div class="left-panel">
                <div class="character-info">
                    <h2 id="character-name">Hero</h2>
                    <div class="stat-box">
                        <p>Level: <span id="level">1</span></p>
                        <p>HP: <span id="character-hp">100</span>/100</p>
                        <p>Attack Power: <span id="attack-power">10</span></p>
                    </div>
                </div>
                <div class="upgrades">
                    <h3>Upgrades</h3>
                    <div class="upgrade-box">
                        <button id="upgrade-attack">Upgrade Attack (Cost: <span id="upgrade-cost">10</span>)</button>
                    </div>
                    <div class="upgrade-box">
                        <button id="upgrade-health">Upgrade Health (Cost: <span
                                id="upgrade-health-cost">15</span>)</button>
                    </div>
                </div>
            </div>

            <div class="battle-area">
                <div class="map-container">
                    <div class="map" id="map-container"></div>
                </div>
                <div class="enemy">
                    <img id="enemy-image" src="" alt="Enemy" style="max-height: 200px;">
                    <div class="health-bar">
                        <div id="enemy-health"></div>
                    </div>
                    <p id="enemy-hp">HP: 5/5</p>
                    <button id="attack-button">Press K to Attack!</button>
                </div>
            </div>
        </main>

        <footer>
            <div class="stats-footer">
                <div class="footer-info">
                    <p>Gold: <span id="gold">0</span></p>
                    <p>Time Left: <span id="timer">30</span>s</p>
                </div>
            </div>
        </footer>
    </div>

    <script src="/js/game.js"></script>
</body>

</html>