<!DOCTYPE html>
<html>
<head>
  <title>Basit Eklenti</title>
  <style>
    /* Mevcut stilleriniz */
    body {
      width: 250px;
      padding: 10px;
      font-family: Arial, sans-serif;
      background-color: #1e1e1e;
      color: #e0e0e0;
    }
    .error {
      color: #ff4d4d;
    }
    .hidden {
      display: none;
    }
    .form-control {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      background-color: #2e2e2e;
      color: #e0e0e0;
      border: 1px solid #444;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    button {
      width: 100%;
      padding: 10px;
      margin: 5px 0;
      cursor: pointer;
      background-color: #007bff;
      color: #e0e0e0;
      border: none;
      border-radius: 4px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    button:hover {
      background-color: #0056b3;
    }
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      background-color: #2e2e2e;
      padding: 10px;
      border-bottom: 1px solid #444;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    .header img {
      width: 50px;
      height: auto;
      margin-right: 10px;
    }
    .header h2 {
      margin: 0;
      font-size: 18px;
    }
    .images {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      perspective: 1000px;
      margin-bottom: 20px; /* Buton ile resimler arasında boşluk */
    }
    .image-container {
      width: 100px;
      height: 100px;
      position: relative;
      transform-style: preserve-3d;
    }
    .images img {
      width: 100%;
      height: auto;
      position: absolute;
      backface-visibility: hidden;
    }
    #image1 {
      transform: rotateX(0deg);
    }
    #image2 {
      transform: rotateX(180deg);
    }
    @keyframes rotateCoin {
      0% {
        transform: rotateX(0deg);
      }
      100% {
        transform: rotateX(1800deg);
      }
    }
    .countdown {
      margin-top: 10px;
      font-size: 14px;
      color: #e0e0e0;
    }
  </style>
</head>
<body>
  <div id="loginDiv">
    <div class="header">
      <h2>Bloxluck Predictor</h2>
      <img src="assets/blox.png" alt="bloxluck">
    </div>
    <div id="loginForm">
      <input type="text" id="username" placeholder="Enter the Key" class="form-control" />
      <button id="submitBtn">Log In</button>
      <div id="message" class="error"></div>
    </div>
  </div>
  
  <div id="buttonsDiv" class="hidden">
    <div class="images">
      <div class="image-container" id="imageContainer">
        <img id="image1" src="assets/mavi.png" alt="Resim 1">
        <img id="image2" src="assets/kirmizi.png" alt="Resim 2">
      </div>
    </div>
    <button id="button1">Join Match</button>
    <span id="countdown" class="countdown"></span>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>