<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pump Radar</title>
  <link rel="stylesheet" href="popup.css">
  <style>
   
  </style>
</head>

<body>


  <div class="container">
    <button class="close-btn" onclick="window.close()">&times;</button>

    <div id="logo">
      <img src="https://media.discordapp.net/attachments/1328026188353896468/1328033319031668867/file-8uMMgnHS9q1VuLi7N9jbEf-removebg-preview.png?ex=6791c128&is=67906fa8&hm=b649e5da115207f4967007d8ea7a10fd2f183162749a9a17dc61137a04d81bd3&=&format=webp&quality=lossless" alt="Pump Radar Logo">
      <h2 class="pump-radar-text">Aurora</h2>
    </div>

    <div id="welcome-message" class="hidden">
      <div class="welcome-container">
        <p>Welcome <span id="user-email">[User Email]</span>!</p>
      </div>
      <div class="plan-container">
        <h3>Active Plan</h3>
        <p>Time remaining : <span id="idkputanid">Loading...</span> </p>
      </div>
      <div id="claim-container">
        <label for="time-code">Add time</label>
        <input type="text" id="time-code" placeholder="Enter your code">   <br><br>
        <button id="claim-btn" class="button">Claim</button>
      </div>
      

      <br>
      <br>
      <button id="logout-btn" class="button">Logout</button>
    </div>

    <div id="time-container" class="hidden">
      <p id="remaining-time"></p>
    </div>
    <br>
  </div>

  <div id="auth-container">
    <form id="login-form" class="auth-form">
      <br>
      <div class="input-group">
        <label for="login-email">Email</label>
        <input type="email" id="login-email" required>
      </div>
      <div class="input-group">
        <label for="login-password">Password</label>
        <input type="password" id="login-password" required>
      </div>
      <button class="button" type="submit">log in</button><br>
      <br>
      <button class="button" id="create-account-btn" type="button">Create account</button>
      <p class="switch-form"> join the Aurora <a href="https://discord.gg/kYE4wVJSVg">Discord</a></p>
    </form>

    <form id="register-form" class="auth-form hidden">
      <h3>Register</h3>
      <div class="input-group">
        <label for="invitation-code">Invitation Code</label>
        <input type="text" id="invitation-code" required>
      </div>
      <div class="input-group">
        <label for="register-email">Email</label>
        <input type="email" id="register-email" required>
      </div>
      <div class="input-group">
        <label for="register-password">Password</label>
        <input type="password" id="register-password" required>
      </div>
      <div class="input-group">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" id="confirm-password" required>
      </div>
      <button class="button" type="submit">Register</button>
      <p class="switch-form">Already have an account? <a href="#" onclick="toggleForms()">Log in</a></p>
    </form>
    
  </div>

  <div class="status-indicator" id="status-indicator"></div>
  </div>

  <script src="popup.js"></script>
</body>
</html>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">