Software Which Stands By You
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Spin Countdown</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <style> body { font-family: 'Poppins', sans-serif; background: #121212; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; user-select: none; text-align: center; } .container { position: relative; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; max-width: 100%; padding: 0 10px; } .segment { width: 70px; height: 100px; background: #222; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; color: white; box-shadow: 0 0 6px #00ff99; text-align: center; padding: 5px; } .segment.win { background: #FFD700; color: #000; box-shadow: 0 0 10px #FFD700; } .arrow { position: absolute; top: -25px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 20px solid #00ff99; transition: left 0.3s ease; } button { padding: 12px 30px; font-weight: 600; font-size: 16px; background: #00ff99; border: none; border-radius: 10px; color: #000; cursor: pointer; } button:disabled { background: #005522; cursor: not-allowed; } .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); background: #1e1e1e; padding: 30px 40px; border-radius: 15px; color: white; text-align: center; z-index: 999; transition: transform 0.3s ease-in-out; box-shadow: 0 0 20px rgba(0, 255, 150, 0.5); } .popup.show { transform: translate(-50%, -50%) scale(1); } .popup h2 { margin: 0 0 10px; } .popup button { background: #00ff99; color: black; padding: 10px 20px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; margin-top: 15px; } .popup button:hover { background: #00cc7a; } .spin-count { margin-top: 15px; font-weight: 600; font-size: 14px; color: #00ff99; } .end-message { margin-top: 10px; color: #ff5555; font-size: 15px; display: none; } </style> </head> <body> <div class="container" id="container"> <div class="segment win">1 Sunmax Token</div> <div class="segment">Try Again</div> <div class="segment">Try Again</div> <div class="segment">Try Again</div> <div class="segment">Try Again</div> <div class="segment">Try Again</div> <div class="segment">Try Again</div> <div class="segment">Try Again</div> <div class="arrow" id="arrow"></div> </div> <button id="spinBtn">Spin Now</button> <div class="spin-count"