قارن

<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>جرب<br><span style="font-size:36px;font-weight:900">حظك</span><p></div> </div> <div id="si-btn" class="si-offer-inner"> <a href="#">احجز هذه الخدمة الآن</a> </div> <div id="lightestBlue" class="spin-offer"> <div class="spin-title item">فحص بطارية مجاني</div> <div class="spin-price item">+ تركيب مجاني</div> <div class="spin-info item">مع شراء أي بطارية بديلة</div> <div class="spin-disc item">يجب تقديمه عند الوصول. لا يشمل بطاريات الهايبرد. عرض لعميل واحد. لا يوجد قيمة نقدية. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/2020.</div> </div> <div id="green" class="spin-offer"> <div class="spin-price item">خصم 15 دولار</div> <div class="spin-info item">على أي خدمة بقيمة 100 دولار أو أكثر</div> <div class="spin-disc item">يجب تقديمه عند الوصول. عرض لعميل واحد. لا يوجد قيمة نقدية. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/2020.</div> </div> <div id="gold" class="spin-offer"> <div class="spin-price item">خصم 10%</div> <div class="spin-info item">على أي صيانة مجدولة</div> <div class="spin-disc item">يجب تقديمه عند الوصول. عرض لعميل واحد. لا يشمل الإطارات وتغيير الزيت. لا يوجد قيمة نقدية. القيمة القصوى 100 دولار. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/2020.</div> </div> <div id="orange" class="spin-offer"> <div class="spin-price item">خصم 15 دولار</div> <div class="spin-info item">على أي خدمة بقيمة 100 دولار أو أكثر</div> <div class="spin-disc item">يجب تقديمه عند الوصول. عرض لعميل واحد. لا يوجد قيمة نقدية. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/2020.</div> </div> <div id="red" class="spin-offer"> <div class="spin-title item">فحص فرامل مجاني</div> <div class="spin-price item">+ خصم 10%</div> <div class="spin-info item">على أي خدمة فرامل موصى بها</div> <div class="spin-disc item">يجب تقديمه عند الوصول. عرض لعميل واحد. لا يوجد قيمة نقدية. القيمة القصوى 100 دولار. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/2020.</div> </div> <div id="maroon" class="spin-offer"> <div class="spin-price item">خصم 15 دولار</div> <div class="spin-info item">على أي خدمة بقيمة 100 دولار أو أكثر</div> <div class="spin-disc item">يجب تقديمه عند الوصول. عرض لعميل واحد. لا يوجد قيمة نقدية. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/2020.</div> </div> <div id="darkblue" class="spin-offer"> <div class="spin-price item">مجاناً</div> <div class="spin-info item">تعبئة الإطارات، تدوير الإطارات، فحص متعدد النقاط، وتعبئة السوائل<br>مع أي عملية تغيير زيت</div> <div class="spin-disc item">يجب تقديمه عند الوصول. عرض لعميل واحد. لا يوجد قيمة نقدية. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/2020.</div> </div> <div id="blue" class="spin-offer"> <div class="spin-price item">خصم 15 دولار</div> <div class="spin-info item">على أي خدمة بقيمة 100 دولار أو أكثر</div> <div class="spin-disc item">يجب تقديمه عند الوصول. عرض لعميل واحد. لا يوجد قيمة نقدية. لا تنطبق خصومات أخرى. راجع الوكيل للحصول على التفاصيل. ينتهي العرض في 15/01/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 = "تم استخدام اللف"; }, 3000); } spinBtn.addEventListener('click', spinToWin); </script> </body> </html>