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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Gemsee App</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://telegram.org/js/telegram-web-app.js?1"></script>
    <script src="app.js"></script>
</head>

<body>
    <div class="moon-container" id="moonContainer">
        <div class="moon">
            <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
        </div>
        <br />
        <span id="moonText">...</span>
        <br />
        <div class="progress2 progress-moved">
            <div class="progress-bar2">
            </div>
        </div>
    </div>
    <div class="container" id="mainContainer">
        <div class="mt-4 top-flex flex-row">
            <button class="top-btn"><img src="./images/BRONZE.png" width="20" height="20"> Bronze #Soon</button>
        </div>
        <div class="mt-3 d-flex flex-column rounded-border grey-color py-2 px-3">
            <span class="account-label">Gemsee balance</span>
            <span class="balance">
                <img src="./images/gem.png" width="30" height="30">
                <p id="blnc">0</p>
            </span>
        </div>

        <div class="mt-2 d-flex flex-row justify-content-between rounded-border plain-color px-3 py-4" id="popup-essence">
            <div class="d-flex flex-column">
                <span class="currency-name">Essence</span>
                <span class="currency-value"><img src="./images/drop.png" width="22" height="22"></span>
            </div>
            <div class="d-flex flex-column align-items-end">
                <span id="esnc">🧪 0</span>
                <span id="esncprcnt" style="color:#f5f4f1;">⚗️ 0 | 0%</span>
            </div>
        </div>

        <div class="mt-2 d-flex flex-row justify-content-between rounded-border plain-color px-3 py-4" id="popup-miner">
            <div class="d-flex flex-column">
                <span class="currency-name">Mining</span>
                <span class="currency-value"><img src="./images/pickaxe.png" width="20" height="20"></span>
            </div>
            <div class="d-flex flex-column align-items-end">
                <span id="mnglft">⌛ 0 mins</span>
                <span style="color:#f5f4f1;">left</span>
            </div>
        </div>

        <div class="mt-2 d-flex flex-row justify-content-between rounded-border plain-color px-3 py-4">
            <div class="d-flex flex-column">
                <span class="currency-name">Kingdoms</span>
                <span class="currency-value"><img src="./images/castle.png" width="20" height="20"></span>
            </div>
            <div class="d-flex flex-column align-items-end ">
                <span>🏰 Coming soon</span>
                <span style="color:#f5f4f1;">Coming soon</span>
            </div>
        </div>

        <div class="mt-2 d-flex flex-row justify-content-between rounded-border plain-color px-3 py-4">
            <div class = "button-container">
                <a href="#" class="menu-btn" id="frens-btn">
                    <i class="fas fa-handshake"></i>Frens
                </a>
                <span class="vertical-line"></span>
                <a href="#" class="menu-btn" id="boosts-btn">
                    <i class="fas fa-rocket"></i>Boosts
                </a>
                <span class="vertical-line"></span>
                <a href="#" class="menu-btn" style="opacity: 0.5;">
                    <i class="fas fa-gamepad" style="opacity: 0.5;"></i>Games 
                </a>
                <span class="vertical-line"></span>
                <a href="#" class="menu-btn" id="earn-btn">
                    <i class="fas fa-gem"></i>Earn
                </a>
            </div>
        </div>
    </div>
</body>

</html>