<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RPG UI</title>
    <link rel="stylesheet" href="ui.css">
</head>
<body>

<div class="game-container">
    <!-- Background game view -->
    <iframe class="game-view" src="https://youtube.com/"></iframe>

    <!-- Mini-map -->
    <div class="panel minimap-container" id="minimapPanel" data-tooltip="Mini-map: Click to enlarge, hover to highlight.">
        <div id="minimap"></div>
    </div>

    <!-- Health orb -->
    <div class="orb-wrapper orb-health">
        <div class="orb">
            <div class="orb-inner health"></div>
            <div class="orb-glow orb-health-glow"></div>
        </div>
        <div class="orb-value" id="healthValue">Life: 1234 / 1234</div>
    </div>

    <!-- Mana orb -->
    <div class="orb-wrapper orb-mana">
        <div class="orb">
            <div class="orb-inner mana"></div>
            <div class="orb-glow orb-mana-glow"></div>
        </div>
        <div class="orb-value" id="manaValue">Mana: 567 / 567</div>
    </div>

    <!-- Bottom UI -->
    <div class="bottom-bar">
        <div class="bar-frame">
            <div class="bottom-left-ui">
                <div class="gold-counter" data-tooltip="Your current gold.">
                    <div class="gold-icon"></div>
                    <span id="goldAmount">12,345</span>
                </div>

                <div class="menu-buttons">
                    <button class="menu-button" id="openInventory">Inventory</button>
                    <button class="menu-button">Character</button>
                    <button class="menu-button">Skills</button>
                </div>
            </div>

            <div class="belt-bar">
                <div class="belt-slot" data-tooltip="Minor Healing Potion">
                    <div class="belt-icon" style="background-image: linear-gradient(135deg, #b30000, #ff6666);"></div>
                    <div class="belt-key">1</div>
                    <div class="stack-count">10</div>
                </div>

                <div class="belt-slot" data-tooltip="Greater Healing Potion">
                    <div class="belt-icon" style="background-image: linear-gradient(135deg, #800000, #ff3333);"></div>
                    <div class="belt-key">2</div>
                    <div class="stack-count">5</div>
                </div>

                <div class="belt-slot" data-tooltip="Mana Potion">
                    <div class="belt-icon" style="background-image: linear-gradient(135deg, #0033aa, #66aaff);"></div>
                    <div class="belt-key">3</div>
                    <div class="stack-count">8</div>
                </div>

                <div class="belt-slot" data-tooltip="Town Portal Scroll">
                    <div class="belt-icon" style="background-image: linear-gradient(135deg, #444, #999);"></div>
                    <div class="belt-key">4</div>
                    <div class="stack-count">3</div>
                </div>
            </div>
        </div>

        <div class="bar-frame">
            <div class="skill-bar">
                <div class="skill-slot active" data-tooltip="Left-click skill: Cleave">
                    <div class="skill-icon" style="background-image: linear-gradient(135deg, #661111, #ff9933);"></div>
                    <div class="cooldown-overlay" style="transform: scaleY(0.2);"></div>
                    <div class="keybind">LMB</div>
                </div>

                <div class="skill-slot" data-tooltip="Right-click skill: Fireball">
                    <div class="skill-icon" style="background-image: linear-gradient(135deg, #aa3300, #ffcc66);"></div>
                    <div class="cooldown-overlay"></div>
                    <div class="keybind">RMB</div>
                </div>

                <div class="skill-slot" data-tooltip="Skill 1: Frost Nova">
                    <div class="skill-icon" style="background-image: linear-gradient(135deg, #003366, #66ccff);"></div>
                    <div class="cooldown-overlay" style="transform: scaleY(0.5);"></div>
                    <div class="keybind">Q</div>
                </div>

                <div class="skill-slot" data-tooltip="Skill 2: Lightning Strike">
                    <div class="skill-icon" style="background-image: linear-gradient(135deg, #4444aa, #ffff66);"></div>
                    <div class="cooldown-overlay"></div>
                    <div class="keybind">W</div>
                </div>

                <div class="skill-slot" data-tooltip="Skill 3: Shadow Step">
                    <div class="skill-icon" style="background-image: linear-gradient(135deg, #111111, #663399);"></div>
                    <div class="cooldown-overlay" style="transform: scaleY(0.3);"></div>
                    <div class="keybind">E</div>
                </div>

                <div class="skill-slot" data-tooltip="Skill 4: Holy Shield">
                    <div class="skill-icon" style="background-image: linear-gradient(135deg, #cccc99, #ffffcc);"></div>
                    <div class="cooldown-overlay"></div>
                    <div class="keybind">R</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Inventory Overlay -->
<div id="inventoryOverlay">
    <div id="inventoryWindow">
        <button id="closeInventory">X</button>
        <iframe id="inventoryFrame" src=""></iframe>
    </div>
</div>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="ui.js"></script>

</body>
</html>