Update index.html

index.html

@@ -6,11 +6,18 @@
 <title>Spin & Load Wheel</title>
 
 <style>
+  :root {
+    --dark-blue: #002D62; /* Used for dark slices and center */
+    --light-blue: #B0E0E6; /* Used for light slices */
+    --red-pointer: #DC143C; /* Used for the pointer */
+    --border-color: #A9A9A9; /* Light border/outline color */
+  }
+
   body {
     margin: 0;
     font-family: Arial, sans-serif;
-    background: #111;
-    color: #fff;
+    background: #E0FFFF; /* Very light blue background */
+    color: var(--dark-blue);
     height: 100vh;
     display: flex;
     justify-content: center;
@@ -21,6 +28,7 @@
   .container {
     width: 90%;
     max-width: 400px;
+    padding: 20px;
   }
 
   .info {
@@ -28,17 +36,20 @@
     font-size: 16px;
     line-height: 22px;
     opacity: 0.9;
+    color: var(--dark-blue);
   }
 
+  /* --- Wheel Styling to Match Image --- */
   .wheel {
     width: 300px;
     height: 300px;
     border-radius: 50%;
-    border: 10px solid #fff;
+    border: 5px solid var(--border-color); /* Outer ring */
     position: relative;
     overflow: hidden;
-    transition: transform 2.2s cubic-bezier(.12,.66,.11,1.23); /* ✅ Faster spin */
+    transition: transform 3s cubic-bezier(.12,.66,.11,1.23); /* Adjusted speed for a better visual spin */
     margin: auto;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   }
 
   .slice {
@@ -52,35 +63,90 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 14px;
+    font-size: 20px; /* Larger symbols */
     font-weight: bold;
-    border: 1px solid #222;
+    /* Removed border for a cleaner look like the image */
+  }
+
+  /* 10 Slices with alternating colors */
+  .slice:nth-child(odd) { 
+    background: var(--dark-blue); 
+    color: white;
+  }
+  .slice:nth-child(even) { 
+    background: var(--light-blue);
+    color: var(--dark-blue); /* Dark text on light slice */
+  }
+
+  /* Rotate slices for 10 segments (360/10 = 36 degrees per slice) */
+  /* Skew is used to make the triangular shape */
+  .slice:nth-child(1) { transform: rotate(0deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(2) { transform: rotate(36deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(3) { transform: rotate(72deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(4) { transform: rotate(108deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(5) { transform: rotate(144deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(6) { transform: rotate(180deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(7) { transform: rotate(216deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(8) { transform: rotate(252deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(9) { transform: rotate(288deg) skewY(-54deg) rotate(18deg); }
+  .slice:nth-child(10) { transform: rotate(324deg) skewY(-54deg) rotate(18deg); }
+  
+  /* Centered "PLAY" button */
+  .center-circle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    background-color: white;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10;
+    border: 5px solid var(--dark-blue);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--dark-blue);
+  }
+
+  /* Outer dots/markers (simplified for CSS) */
+  .outer-ring-dots {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    pointer-events: none;
+    /* A simple dashed border can simulate the dots */
+    /* You could also use pseudoelements and more complex CSS for individual dots */
   }
 
-  .slice:nth-child(1) { background: #FF5722; transform: rotate(0deg) skewY(-54deg); }
-  .slice:nth-child(2) { background: #FFC107; transform: rotate(72deg) skewY(-54deg); }
-  .slice:nth-child(3) { background: #03A9F4; transform: rotate(144deg) skewY(-54deg); }
-  .slice:nth-child(4) { background: #8BC34A; transform: rotate(216deg) skewY(-54deg); }
-  .slice:nth-child(5) { background: #9C27B0; transform: rotate(288deg) skewY(-54deg); }
 
   .pointer {
     width: 0; height: 0;
-    border-left: 20px solid transparent;
-    border-right: 20px solid transparent;
-    border-bottom: 35px solid yellow;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-bottom: 20px solid var(--red-pointer); /* Red pointer like the image */
     margin: auto;
-    margin-bottom: 10px;
+    margin-bottom: 5px; /* Move closer to the wheel */
+    z-index: 20;
   }
 
   button {
     margin-top: 25px;
     font-size: 20px;
     padding: 12px 25px;
-    background: #4caf50;
+    background: var(--dark-blue); /* Spin button color */
     border: none;
     border-radius: 8px;
     color: white;
     cursor: pointer;
+    display: none; /* Hide the SPIN button, use the center-circle for interaction */
   }
   button:disabled {
     background: #333;
@@ -91,7 +157,27 @@
     margin-top: 20px;
     font-size: 18px;
     display: none;
+    color: var(--dark-blue);
+  }
+
+  .try-your-luck {
+    margin-top: 20px;
+    font-size: 14px;
+    opacity: 0.7;
+    position: relative;
+    padding-top: 10px;
+  }
+  .try-your-luck:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 1px;
+    background: var(--dark-blue);
   }
+
 </style>
 </head>
 
@@ -101,30 +187,47 @@
 
   <p class="info">
     ⚡ For load balancing we add this to handle high traffic.<br>
-    ✅ Just click on SPIN to unlock the main site!
+    ✅ Click **PLAY** to unlock the main site!
   </p>
 
   <div class="pointer"></div>
   <div class="wheel" id="wheel">
-    <div class="slice">love.com</div>
-    <div class="slice">love1.com</div>
-    <div class="slice">love2.com</div>
-    <div class="slice">love3.com</div>
-    <div class="slice">love4.com</div>
+    <div class="slice">$$</div>
+    <div class="slice">%</div>
+    <div class="slice">$$</div>
+    <div class="slice">%</div>
+    <div class="slice">$$</div>
+    <div class="slice">%</div>
+    <div class="slice">$$</div>
+    <div class="slice">%</div>
+    <div class="slice">$$</div>
+    <div class="slice">%</div>
+    
+    <div class="center-circle" onclick="spinWheel()" id="centerBtn">PLAY</div>
   </div>
+  
+  <p class="try-your-luck">
+    TRY YOUR LUCK
+  </p>
 
-  <button id="btn" onclick="spinWheel()">SPIN</button>
-  <p id="message"></p>
+  <button id="btn" style="display: none;">SPIN</button> <p id="message"></p>
 
 </div>
 
 <script>
+// The array needs 10 items to match the 10 slices, 
+// even though only 5 unique sites are available.
 const sites = [
-  "https://www.love.com",
-  "https://www.love1.com",
-  "https://www.love2.com",
-  "https://www.love3.com",
-  "https://www.love4.com"
+  "https://www.love.com",  // Index 0 ($$)
+  "https://www.love1.com", // Index 1 (%)
+  "https://www.love2.com", // Index 2 ($$)
+  "https://www.love3.com", // Index 3 (%)
+  "https://www.love4.com", // Index 4 ($$)
+  "https://www.love.com",  // Index 5 (%)
+  "https://www.love1.com", // Index 6 ($$)
+  "https://www.love2.com", // Index 7 (%)
+  "https://www.love3.com", // Index 8 ($$)
+  "https://www.love4.com"  // Index 9 (%)
 ];
 
 let spinning = false;
@@ -135,27 +238,42 @@ function spinWheel() {
 
   const wheel = document.getElementById("wheel");
   const message = document.getElementById("message");
-  const btn = document.getElementById("btn");
+  const centerBtn = document.getElementById("centerBtn");
 
-  btn.disabled = true;
+  // Disable the center button
+  centerBtn.style.pointerEvents = 'none'; 
+  centerBtn.textContent = '...';
 
   const index = Math.floor(Math.random() * sites.length);
+  const totalSlices = sites.length; // 10
+  const degreePerSlice = 360 / totalSlices; // 36 degrees
 
-  /* ✅ More rotations but faster */
-  const degrees = 360 * 10 + (360 - index * 72) - 36;
+  /* Calculate the degrees:
+    1. 360 * 10: Ensures many rotations for visual effect.
+    2. (360 - index * degreePerSlice): Positions the wheel to land the selected slice at the top (under the pointer).
+    3. - (degreePerSlice / 2): Adjusts for the pointer pointing to the center of the slice, not the edge (36/2 = 18 degrees).
+  */
+  const degrees = 360 * 10 + (360 - index * degreePerSlice) - (degreePerSlice / 2);
   wheel.style.transform = `rotate(${degrees}deg)`;
 
   message.style.display = "block";
   message.textContent = "🎡 Fast spinning…";
 
-  /* ✅ Quicker redirect */
+  /* Redirect after the transition completes */
   setTimeout(() => {
     const selected = sites[index];
     message.textContent = "Redirecting to " + selected;
-    window.location.href = selected;
-  }, 2500); // ✅ Just 2.5s total
+    // window.location.href = selected; // Uncomment this for live redirect
+    console.log("Redirecting to: " + selected); // Log for testing
+    
+    // Reset state for re-spin (if not redirecting)
+    spinning = false;
+    centerBtn.style.pointerEvents = 'auto';
+    centerBtn.textContent = 'PLAY';
+    
+  }, 3000); // 3 seconds to match the CSS transition duration
 }
 </script>
 
 </body>
-</html>
+</html>