<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Roblox Bot Manager</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div id="container">
    <!-- Login Section -->
    <div id="login-container">
      <h2>Login</h2>
      <input type="text" id="username" placeholder="Enter Roblox Username">
      <button id="login-button">Login</button>
      <p id="error-message" class="error"></p>
    </div>

    <!-- Main Dashboard -->
    <div id="main-container" style="display: none;">
      <h2>Pixel Bot Panell</h2>

      <!-- Bots toggle -->
      <div class="toggle-section">
        <label>Bots</label>
        <label class="switch">
          <input type="checkbox" id="bots-toggle">
          <span class="slider"></span>
        </label>
        <span id="bots-status" class="status">Disabled</span>
      </div>

      <!-- Farming toggle -->
      <div class="toggle-section">
        <label>Farming</label>
        <label class="switch">
          <input type="checkbox" id="farming-toggle">
          <span class="slider"></span>
        </label>
        <span id="farming-status" class="status">Disabled</span>
      </div>

      <!-- AutoTrade toggle -->
      <div class="toggle-section">
        <label>AutoTrade</label>
        <label class="switch">
          <input type="checkbox" id="autotrade-toggle">
          <span class="slider"></span>
        </label>
        <span id="autotrade-status" class="status">Disabled</span>
      </div>

      <!-- AutoSell/Buy toggle -->
      <div class="toggle-section">
        <label>AutoSell/Buy</label>
        <label class="switch">
          <input type="checkbox" id="autosell-toggle">
          <span class="slider"></span>
        </label>
        <span id="autosell-status" class="status">Disabled</span>
      </div>

      <!-- Bot status -->
      <div class="info-section">
        <p>Bots Status: <span id="bot-status-overall" class="status-red">Disabled</span></p>
        <p>Sessions: <span id="session-count">10</span></p>
      </div>

      <!-- Webhook Input -->
      <div class="info-section">
        <label for="webhook-url">Webhook URL:</label>
        <input type="text" id="webhook-url" placeholder="Enter your webhook URL">
      </div>

      <!-- Webhook Profit Check -->
      <div class="info-section">
        <button id="profit-check">Webhook Profit Check</button>
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>
