Compare

<img src="" alt="" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Spin & Win</title> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <style> #spin-container { max-width:600px; margin:0 auto; } .spin-to-win { max-width:600px; } .spin-to-win img { width:100%; height:auto; } #spinner { display: inline-flex; align-items: center; justify-content: center; vertical-align:middle; position: relative; } #spin-btn { cursor:pointer; background:white; background-size:100% 100%; box-shadow:0 0 15px rgba(0,0,0,.25); animation:spinBtn 2s linear infinite; border:5px solid transparent; text-align:center; position:absolute; } #spin-btn p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; font-family: 'Montserrat', sans-serif; } @keyframes spinBtn { 0% { border:5px solid black; } 50% { border:5px solid red; } 100% { border:5px solid black; } } #spin-btn, #spin-arrow { max-width:180px; width:calc(100vw * .3); max-height:180px; height:calc(100vw * .3); border-radius:50%; display:inline-block; position:absolute; } #spin-arrow { transition-timing-function: ease-in-out; transition:3s; } #spin-arrow:after { content:''; position:absolute; left:2px; top:2px; width:calc(100vw * .14167); max-width:85px; height:calc(100vw * .14167); max-height:85px; background-color:white; box-shadow:-2px -2px 10px rgba(0,0,0,.25); } /* btn styles */ #si-btn { max-width: 320px; background:white; color:black; text-align:center; font-family:sans-serif; border-radius:15px; margin:0 auto 25px auto; padding:0px; filter:invert(1); opacity:0; } #si-btn a { color:inherit; text-decoration:none; display:inline-block; padding:20px 35px; } /* OFFER STYLES */ .spin-offer { max-width: 600px; padding:20px; border-radius:15px; text-align:center; font-size:24px; font-family:sans-serif; position:relative; display:none; vertical-align:middle; animation:spin 2s linear forwards; color:white; box-shadow:10px 10px 10px rgba(0,0,0,.25); margin-bottom:30px; } @keyframes spin { 0% { opacity:0; } 100% { opacity:1; } } .spin-offer .item { padding:10px; } .spin-price { font-size:60px; line-height:60px; padding-bottom:0px !important; } .spin-disc { font-size:12px; } </style> </head> <body> <div id="spin-container"> <div id="spinner" class="spin-to-win"> <img src="https://contentservice.mc.reyrey.net/image_v1.0.0/?id=e61fefdc-85d3-5145-9b3a-821b2ad47040&637115173847423178" /> <div id="spin-arrow"></div> <div id="spin-btn"><p>TRY YOUR<br><span style="font-size:36px;font-weight:900">LUCK</span><p></div> </div> <div id="si-btn" class="si-offer-inner"> <a href="#">SCHEDULE THIS SERVICE NOW</a> </div> <div id="lightestBlue" class="spin-offer"> <div class="spin-title item">FREE Battery Test</div> <div class="spin-price item">+ FREE</div> <div class="spin-info item">Installation with the purchase of any replacement battery</div> <div class="spin-disc item">Present upon arrival. Hybrid batteries excluded. One per customer. No cash value. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> <div id="green" class="spin-offer"> <div class="spin-price item">$15 OFF</div> <div class="spin-info item">Any Service of $100 or more</div> <div class="spin-disc item">Present upon arrival. One per customer. No cash value. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> <div id="gold" class="spin-offer"> <div class="spin-price item">10% OFF</div> <div class="spin-info item">Any Scheduled Maintenance</div> <div class="spin-disc item">Present upon arrival. One per customer. Excludes tires and oil changes. No cash value. Max value $100. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> <div id="orange" class="spin-offer"> <div class="spin-price item">$15 OFF</div> <div class="spin-info item">Any Service of $100 or more</div> <div class="spin-disc item">Present upon arrival. One per customer. No cash value. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> <div id="red" class="spin-offer"> <div class="spin-title item">FREE BRAKE INSPECTION</div> <div class="spin-price item">+ 10% OFF</div> <div class="spin-info item">Any Recommended Brake Service</div> <div class="spin-disc item">Present upon arrival. One per customer. No cash value. Max value $100. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> <div id="maroon" class="spin-offer"> <div class="spin-price item">$15 OFF</div> <div class="spin-info item">Any Service of $100 or more</div> <div class="spin-disc item">Present upon arrival. One per customer. No cash value. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> <div id="darkblue" class="spin-offer"> <div class="spin-price item">FREE</div> <div class="spin-info item">Tire Fill, Tire Rotation, Multi-Point Inspection, & Fluid Top-Off<br>With any oil change purchase</div> <div class="spin-disc item">Present upon arrival. One per customer. No cash value. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> <div id="blue" class="spin-offer"> <div class="spin-price item">$15 OFF</div> <div class="spin-info item">Any Service of $100 or more</div> <div class="spin-disc item">Present upon arrival. One per customer. No cash value. No further discounts apply. See dealer for details. Expires 01/15/2020.</div> </div> </div> <script> var angles = [22.5,67.5,112.5,157.5,202.5,247.5,292.5,337.5]; var colors = ["#2cc5d2","#38c88e","#fab320","#f97903","#ca2231","#79022c","#0a4366","#0a97d0"]; var spinBtn = document.querySelector('#spin-btn'); var spinArrow = document.querySelector('#spin-arrow'); var offerBtn = document.querySelector('#si-btn'); var spinOffer = document.querySelectorAll('.spin-offer'); var hasSpun = false; // ✅ علشان نمنع اللف مرتين function spinToWin() { if (hasSpun) return; // ✅ لو اتلفت خلاص متشتغلش تاني hasSpun = true; spinBtn.style.pointerEvents = "none"; spinBtn.style.animation = "none"; var num = Math.floor(Math.random() * spinOffer.length); spinArrow.style.transform = "rotate(" + ((360 * 5) + angles[num]) + "deg)"; spinOffer[num].style.background = colors[num]; setTimeout(function() { spinOffer[num].style.display = "inline-block"; offerBtn.style.opacity = "1"; offerBtn.style.transition = "1.5s"; spinBtn.style.pointerEvents = "none"; spinBtn.style.opacity = "0.6"; spinBtn.querySelector("p").innerHTML = "SPIN USED"; }, 3000); } spinBtn.addEventListener('click', spinToWin); </script> </body> </html>