لف واربح

<!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; width: 500px; } #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: 'cairo'; } @keyframes spinBtn { 0% { border:5px solid black; } 50% { border:5px solid red; } 100% { border:5px solid black; } } #spin-btn, #spin-arrow { max-width:145px; width:calc(100vw * .3); max-height:145px; height:calc(100vw * .3); border-radius:50%; display:inline-block; position:absolute; margin-bottom: 72px; } #spin-arrow { transition-timing-function: ease-in-out; transition:3s; } #spin-arrow:after { content:''; position:absolute; left:8px; top:12px; width:calc(100vw * .14167); max-width:85px; height:calc(100vw * .14167); max-height:85px; background-color:white; box-shadow:-5px -9px 10px rgb(255 0 0 / 91%); } /* 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="" alt="" /> <div id="spin-arrow"></div> <div id="spin-btn"><p>جرب دلوقتى<br><span style="font-size:36px;font-weight:900;color:#ff3b19">حظك</span><p></div> </div> <div id="lightestBlue" class="spin-offer"> <div class="spin-price item">DFSDA3</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 3% على أى جهاز منزلى صغير</div> <div class="spin-disc item"style="font-family: 'Cairo';">لما تستخدم كود الخصم (( DFSDA3 )) .. كود الخصم سارى حتى 30/11/2025 </div> </div> <div id="green" class="spin-offer"> <div class="spin-price item">DFPM3</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 3% على أى طابعة أو شاشة</div> <div class="spin-disc item"style="font-family: 'Cairo';">لما تستخدم كود الخصم (( DFPM3 )) .. كود الخصم سارى حتى 30/11/2025 </div> </div> <div id="gold" class="spin-offer"> <div class="spin-price item">DFMOB300</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 3% على أى موبايل</div> <div class="spin-disc item"style="font-family: 'Cairo';">بحد أقصى للخصم 300 جنية لما تستخدم كود الخصم (( DFMOB300 )) .. كود الخصم سارى حتى 30/11/2025</div> </div> <div id="orange" class="spin-offer"> <div class="spin-price item">DFMDA300</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 3% على أى جهاز منزلى كبير</div> <div class="spin-disc item"style="font-family: 'Cairo';">بحد أقصى للخصم 300 جنية لما تستخدم كود الخصم (( DFMDA300 )) .. كود الخصم سارى حتى 30/11/2025</div> </div> <div id="red" class="spin-offer"> <div class="spin-price item">DFTV500</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 5% على أى تليفزيون</div> <div class="spin-disc item"style="font-family: 'Cairo';">بحد أقصى للخصم 500 جنية لما تستخدم كود الخصم (( DFTV500 )) .. كود الخصم سارى حتى 30/11/2025</div> </div> <div id="maroon" class="spin-offer"> <div class="spin-price item">DFACC10</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 10% على اكسسوار الكمبيوتر</div> <div class="spin-disc item"style="font-family: 'Cairo';">لما تستخدم كود الخصم (( DFACC10 )) .. كود الخصم سارى حتى 30/11/2025</div> </div> <div id="darkblue" class="spin-offer"> <div class="spin-price item">DFWER300</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 3% على أى اير بودز أو ساعة ذكية</div> <div class="spin-disc item"style="font-family: 'Cairo';">بحد أقصى للخصم 300 جنية تستخدم كود الخصم (( DFWER300 )) .. كود الخصم سارى حتى 30/11/2025</div> </div> <div id="blue" class="spin-offer"> <div class="spin-price item">DFLAB3</div> <div class="spin-info item"style="font-family: 'Cairo';">مبروك كسبت خصم 3% على أى لاب توب</div> <div class="spin-disc item"style="font-family: 'Cairo';">لما تستخدم كود الخصم (( DFLAB3 )) .. كود الخصم سارى حتى 30/11/2025</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>

Categories

شبكات

كاميرا واي فاي

باب ذكي

إكسسوارات تصوير

سكوتر

ميزان

بروجيكتور

سمارت تاج

حلول أمنية

أنظمة صوت

منتجات كهربائية

بطارية

كونسول

يد تحكم

أسطوانات ألعاب

إكسسوارات جيمنج

لف واربح