<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Flappy U.F.O.</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Titan+One&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>

<body>

<div class="background">
  <div class="blob blob-one"></div>
  <div class="blob blob-two"></div>
  <div class="blob blob-three"></div>
</div>

<!-- ================= AUTH ================= -->

<section id="authScreen" class="auth-screen">

  <div class="auth-card">

    <div class="auth-ufo">🛸</div>

    <h1>Flappy U.F.O.</h1>
    <p>made by Jathavan</p>

    <div class="auth-tabs">
      <button id="loginTab" class="auth-tab active">🔐 Login</button>
      <button id="signupTab" class="auth-tab">✨ Sign Up</button>
    </div>

    <form id="loginForm">

      <label>Username</label>
      <input id="loginUsername" type="text" placeholder="Enter username" required>

      <label>Password</label>
      <input id="loginPassword" type="password" placeholder="Enter password" required>

      <button class="main-button" type="submit">
        🚀 Login
      </button>

    </form>

    <form id="signupForm" class="hidden">

      <label>Username</label>
      <input id="signupUsername" type="text" maxlength="20" placeholder="Choose a username" required>

      <label>Password</label>
      <input id="signupPassword" type="password" placeholder="Create a password" required>

      <label>Confirm Password</label>
      <input id="signupConfirm" type="password" placeholder="Confirm password" required>

      <button class="main-button" type="submit">
        ✨ Create Account
      </button>

    </form>

    <div id="authMessage"></div>

  </div>

</section>


<!-- ================= GAME APP ================= -->

<section id="app" class="app hidden">

  <!-- SIDEBAR -->

  <aside class="sidebar">

    <div class="brand">

      <div class="brand-icon">🛸</div>

      <div>
        <h2>Flappy U.F.O.</h2>
        <small>made by Jathavan</small>
      </div>

    </div>


    <div class="user-preview">

      <div id="sidebarVehicle" class="vehicle-icon">🛸</div>

      <div class="user-preview-info">

        <div id="sidebarUsername" class="username rainbow-text">
          Player
        </div>

        <div id="sidebarRole" class="role">
          Player
        </div>

      </div>

    </div>


    <nav>

      <button class="nav-button active" data-page="stats">
        <span>📊</span>
        <b>Stats</b>
      </button>

      <button class="nav-button" data-page="play">
        <span>🎮</span>
        <b>Play</b>
      </button>

      <button class="nav-button" data-page="shop">
        <span>🛒</span>
        <b>Shop</b>
      </button>

      <button class="nav-button" data-page="leaderboard">
        <span>🏆</span>
        <b>Leaderboard</b>
      </button>

      <button class="nav-button" data-page="settings">
        <span>⚙️</span>
        <b>Settings</b>
      </button>

      <button id="staffNav" class="nav-button hidden" data-page="staff">
        <span>🛡️</span>
        <b>Staff Panel</b>
      </button>

      <button class="nav-button" data-page="credits">
        <span>ℹ️</span>
        <b>Credits</b>
      </button>

    </nav>


    <div class="sidebar-bottom">

      <div class="coins">
        🪙 <span id="sidebarCoins">0</span>
      </div>

      <button id="logoutButton" class="logout-button">
        🚪 Logout
      </button>

    </div>

  </aside>


  <!-- MAIN -->

  <main class="main">

    <!-- ================= STATS ================= -->

    <section id="page-stats" class="page active">

      <div class="page-title">
        <div>
          <span>YOUR PROFILE</span>
          <h1>Stats</h1>
          <p>Your Flappy U.F.O. account.</p>
        </div>
      </div>


      <div class="profile-card">

        <div id="statsVehicle" class="large-ufo">🛸</div>

        <div class="profile-info">

          <div id="statsUsername" class="big-username">
            Player
          </div>

          <div id="statsRole" class="big-role">
            Player
          </div>

          <div id="statsCustomRole" class="custom-title hidden"></div>

          <div class="level-row">

            <span>Level <b id="statsLevel">1</b></span>

            <span id="xpText">0 / 100 XP</span>

          </div>

          <div class="xp-bar">
            <div id="xpFill" class="xp-fill"></div>
          </div>

        </div>

      </div>


      <div class="stats-grid">

        <div class="stat-card">
          <span>🏆</span>
          <small>Highest Score</small>
          <strong id="statHighScore">0</strong>
        </div>

        <div class="stat-card">
          <span>🪙</span>
          <small>Coins</small>
          <strong id="statCoins">0</strong>
        </div>

        <div class="stat-card">
          <span>🎮</span>
          <small>Games Played</small>
          <strong id="statGames">0</strong>
        </div>

        <div class="stat-card">
          <span>📈</span>
          <small>Total Score</small>
          <strong id="statTotalScore">0</strong>
        </div>

        <div class="stat-card">
          <span>⭐</span>
          <small>Average Score</small>
          <strong id="statAverage">0</strong>
        </div>

        <div class="stat-card">
          <span>🛸</span>
          <small>UFOs Owned</small>
          <strong id="statUFOs">1</strong>
        </div>

      </div>


      <div class="two-column">

        <div class="glass-card">

          <h3>🎒 Current Loadout</h3>

          <div class="loadout-item">

            <div id="loadoutUFO" class="loadout-icon">🛸</div>

            <div>
              <small>UFO</small>
              <b id="loadoutUFOName">Default UFO</b>
            </div>

          </div>

          <div class="loadout-item">

            <div class="loadout-icon">🚀</div>

            <div>
              <small>Rocket Ship</small>
              <b id="loadoutRocketName">Default Rocket</b>
            </div>

          </div>

        </div>


        <div class="glass-card">

          <h3>👤 Account</h3>

          <div class="account-line">
            <span>Role</span>
            <b id="accountRole">Player</b>
          </div>

          <div class="account-line">
            <span>Custom title</span>
            <b id="accountCustomRole">None</b>
          </div>

          <div class="account-line">
            <span>Username colour</span>
            <b id="statsColor">Default</b>
          </div>

        </div>

      </div>

    </section>


    <!-- ================= PLAY ================= -->

    <section id="page-play" class="page">

      <div class="page-title">
        <div>
          <span>GAME</span>
          <h1>Play</h1>
          <p>Fly your U.F.O. through the pillars!</p>
        </div>
      </div>

      <div class="game-card">

        <div class="game-top">

          <div>
            Score:
            <strong id="gameScore">0</strong>
          </div>

          <div>
            Best:
            <strong id="gameBest">0</strong>
          </div>

        </div>

        <canvas id="gameCanvas" width="900" height="500"></canvas>

        <div id="gameOverlay" class="game-overlay">

          <div>

            <div class="game-ufo">🛸</div>

            <h2>Ready to Fly?</h2>

            <p>Press SPACE, click, or tap!</p>

            <button id="startGameButton" class="main-button">
              🚀 PLAY
            </button>

          </div>

        </div>

      </div>

    </section>


    <!-- ================= SHOP ================= -->

    <section id="page-shop" class="page">

      <div class="page-title">

        <div>
          <span>CUSTOMIZATION</span>
          <h1>Shop</h1>
          <p>Spend coins without losing your high score.</p>
        </div>

        <div class="shop-balance">
          🪙 <span id="shopCoins">0</span>
        </div>

      </div>


      <div class="shop-tabs">

        <button class="shop-tab active" data-shop="ufo">
          🛸 UFOs
        </button>

        <button class="shop-tab" data-shop="rocket">
          🚀 Rocket Ships
        </button>

        <button class="shop-tab" data-shop="colors">
          🌈 Username Colours
        </button>

      </div>


      <div id="shopGrid" class="shop-grid"></div>

    </section>


    <!-- ================= LEADERBOARD ================= -->

    <section id="page-leaderboard" class="page">

      <div class="page-title">

        <div>
          <span>TOP PLAYERS</span>
          <h1>Leaderboard</h1>
          <p>Top 10 accounts on this browser.</p>
        </div>

      </div>


      <div class="leaderboard-tabs">

        <button class="leader-tab active" data-board="score">
          🏆 Score
        </button>

        <button class="leader-tab" data-board="coins">
          🪙 Coins
        </button>

        <button class="leader-tab" data-board="level">
          ⭐ Level
        </button>

      </div>


      <div id="leaderboardList" class="leaderboard-list"></div>

    </section>


    <!-- ================= SETTINGS ================= -->

    <section id="page-settings" class="page">

      <div class="page-title">
        <div>
          <span>ACCOUNT</span>
          <h1>Settings</h1>
          <p>Customize your account.</p>
        </div>
      </div>


      <div class="settings-grid">

        <div class="glass-card">

          <h3>👤 Username</h3>

          <input id="newUsername" placeholder="New username">

          <button id="changeUsernameButton" class="main-button">
            Save Username
          </button>

        </div>


        <div class="glass-card">

          <h3>🔐 Password</h3>

          <input id="newPassword" type="password" placeholder="New password">

          <button id="changePasswordButton" class="main-button">
            Change Password
          </button>

        </div>


        <div class="glass-card">

          <h3>🏷️ Custom Role / Title</h3>

          <p class="setting-description">
            Add your own title, such as:
            <b>Silly Goober/Moderator</b>
          </p>

          <input
            id="customRoleInput"
            maxlength="30"
            placeholder="Example: Silly Goober"
          >

          <button id="saveCustomRole" class="main-button">
            Save Custom Title
          </button>

          <button id="removeCustomRole" class="danger-button">
            Remove Custom Title
          </button>

        </div>


        <div class="glass-card">

          <h3>🌈 Username Colour</h3>

          <div id="colorPreview" class="color-preview">
            🛸 Player
          </div>

          <button
            class="main-button"
            data-page-jump="shop"
            data-shop-jump="colors"
          >
            Open Colour Shop
          </button>

        </div>

      </div>

    </section>


    <!-- ================= STAFF ================= -->

    <section id="page-staff" class="page">

      <div class="page-title">

        <div>
          <span>STAFF ONLY</span>
          <h1>🛡️ Staff Panel</h1>
          <p>Manage players and their accounts.</p>
        </div>

      </div>


      <div class="staff-grid">

        <!-- PLAYER MANAGEMENT -->

        <div class="glass-card staff-card">

          <h3>👤 Player Management</h3>

          <input
            id="staffUsername"
            placeholder="Target username"
          >

          <button id="staffFindButton" class="main-button">
            🔎 Find Player
          </button>

          <div id="staffTargetInfo" class="staff-target hidden"></div>

          <button id="staffViewStats" class="secondary-button hidden">
            📊 View Stats
          </button>

        </div>


        <!-- BAN -->

        <div class="glass-card staff-card">

          <h3>🚫 Ban / Unban</h3>

          <p>
            Enter a username above first.
          </p>

          <button id="banButton" class="danger-button">
            🚫 Ban Player
          </button>

          <button id="unbanButton" class="secondary-button">
            ✅ Unban Player
          </button>

        </div>


        <!-- REWARDS -->

        <div class="glass-card staff-card">

          <h3>🎁 Give Rewards</h3>

          <label>Coins</label>

          <input
            id="giveCoinsAmount"
            type="number"
            min="0"
            placeholder="Amount"
          >

          <button id="giveCoinsButton" class="main-button">
            🪙 Give Coins
          </button>


          <label>Score</label>

          <input
            id="giveScoreAmount"
            type="number"
            min="0"
            placeholder="Amount"
          >

          <button id="giveScoreButton" class="main-button">
            🏆 Give Score
          </button>

        </div>


        <!-- LEVEL -->

        <div class="glass-card staff-card">

          <h3>⭐ Set Level</h3>

          <input
            id="setLevelAmount"
            type="number"
            min="1"
            max="999"
            placeholder="Level"
          >

          <button id="setLevelButton" class="main-button">
            ⭐ Set Level
          </button>

        </div>


        <!-- ROLES -->

        <div class="glass-card staff-card">

          <h3>👑 Role Management</h3>

          <select id="staffRoleSelect">

            <option value="Player">Player</option>

            <option value="Moderator">Moderator</option>

            <option value="Co-Owner">Co-Owner</option>

            <option value="Owner">Owner</option>

          </select>

          <button id="giveRoleButton" class="main-button">
            👑 Give / Set Role
          </button>

          <button id="removeRoleButton" class="danger-button">
            ❌ Remove Role
          </button>

          <p class="setting-description">
            Owner can give any role.
            Co-Owner can manage Moderators.
            Moderators cannot give roles.
          </p>

        </div>


        <!-- CUSTOM ROLE -->

        <div class="glass-card staff-card">

          <h3>🏷️ Custom Title</h3>

          <input
            id="staffCustomRole"
            maxlength="30"
            placeholder="Example: Silly Goober"
          >

          <button id="staffSetCustomRole" class="main-button">
            🏷️ Set Custom Title
          </button>

          <button id="staffRemoveCustomRole" class="danger-button">
            Remove Custom Title
          </button>

        </div>

      </div>

    </section>


    <!-- ================= CREDITS ================= -->

    <section id="page-credits" class="page">

      <div class="page-title">

        <div>
          <span>THE TEAM</span>
          <h1>Credits</h1>
          <p>The people behind Flappy U.F.O.</p>
        </div>

      </div>


      <div class="credits-grid">

        <div class="credit-card">
          <div>👑</div>
          <h2>JathavanSC</h2>
          <span>Owner</span>
        </div>

        <div class="credit-card">
          <div>💎</div>
          <h2>LoshahiPlayz</h2>
          <span>Co-Owner</span>
        </div>

        <div class="credit-card">
          <div>🛡️</div>
          <h2>Dilojan03</h2>
          <span>Moderator</span>
        </div>

        <div class="credit-card">
          <div>🌐</div>
          <h2>Neocities</h2>
          <span>Website Partner</span>
        </div>

      </div>

    </section>

  </main>

</section>


<div id="toast"></div>

<script src="script.js"></script>

</body>
</html>