Shake to Win

<html lang="ar"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Shake to Win</title> <style> :root{ --accent:#ff6b6b; --bg:#0f1724; --card:#0b1220; } html,body{height:100%;margin:0;font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;direction:rtl;background:linear-gradient(180deg,#021124 0%, #051423 100%);color:#e6eef8} .wrap{max-width:900px;margin:36px auto;padding:20px} .hero{display:flex;gap:20px;align-items:center} .phone{flex:0 0 220px;height:380px;border-radius:28px;background:linear-gradient(180deg,#071429,#673ab7);box-shadow:0 10px 30px rgba(2,6,23,.8),inset 0 2px 12px rgba(255,255,255,.02);display:flex;align-items:center;justify-content:center} .phone .screen{width:85%;height:88%;background:linear-gradient(180deg,#042033,#081424);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#ffffff} h1{font-size:20px;margin:0 0 6px} p{margin:6px 0 0;color:#bcd4ea} .controls{margin-top:14px;text-align:center} button{background:var(--accent);border:none;padding:10px 14px;border-radius:10px;color:white;font-weight:600;cursor:pointer} button.secondary{background:transparent;border:1px solid rgba(255,255,255,.08)} .modal-wrap{position:fixed;inset:0;display:grid;place-items:center;padding:20px;z-index:40;pointer-events:none} .modal{width:100%;max-width:420px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));backdrop-filter:blur(6px);border-radius:18px;padding:22px;box-shadow:0 20px 60px rgba(2,6,23,.7);transform:translateY(20px) scale(.98);opacity:0;transition:all .35s;pointer-events:auto} .modal.show{transform:translateY(0) scale(1);opacity:1} .gift{display:flex;align-items:center;gap:14px} .gift .box{width:88px;height:88px;background:linear-gradient(180deg,#ffd5d5,#ff9ba6);border-radius:10px;display:grid;place-items:center;position:relative;overflow:visible} .ribbon{position:absolute;left:8px;top:6px;width:72px;height:16px;background:rgba(255,255,255,.3);border-radius:6px} .gift .content{flex:1} .code{margin-top:10px;font-size:20px;font-weight:700;letter-spacing:1px;background:linear-gradient(90deg,#0b1220,#10202e);padding:10px;border-radius:10px;display:flex;justify-content:space-between;align-items:center} .small{font-size:13px;color:#ffffff} @keyframes pop{0%{transform:translateY(10px) scale(.98)}50%{transform:translateY(-10px) scale(1.05)}100%{transform:translateY(0) scale(1)}} .box.pop{animation:pop .7s cubic-bezier(.2,.9,.3,1)} .notice{margin-top:12px;font-size:13px;color:#e1f1ff} @media (max-width:640px){.hero{flex-direction:column}.phone{width:220px;height:360px}} </style> </head> <body> <div class="wrap"> <div class="hero"> <div class="phone"> <div class="screen"> <div style="text-align:center"> <div style="font-size:28px;font-weight:700;font-family:cairo;">هز الموبايل</div> <div style="margin-top:6px;font-family:cairo" class="small">هز الموبايل للحصول على الهدية أو كود الخصم</div> </div> </div> </div> <div style="flex:1"> <h1 style="text-align:center;color:white;">Shake to Win - حرك الموبايل و أكسب هديتك</h1> <p style="text-align:center;">هز الموبايل و هيظهرلك (popup) بالكود أو الجائزة اللي كسبتها.</p> <div class="controls"> <button id="request-perm">تفعيل حساس الحركة (مطلوب لأيفون)</button> </div> <div class="notice">ملاحظة: على أجهزة iOS قد تحتاج للسماح بحركة الجهاز يدوياً.</div> </div> </div> </div> <!-- Modal --> <div class="modal-wrap" id="modalWrap" aria-hidden="true"> <div class="modal" id="modal"> <div class="gift"> <div class="box" id="boxIcon"> <img src="https://scontent.fcai19-2.fna.fbcdn.net/v/t39.30808-6/574064175_1230029802489283_2207055537640357369_n.jpg?_nc_cat=1&ccb=1-7&_nc_sid=6ee11a&_nc_ohc=EI2qAvXgLGkQ7kNvwGGVjKN&_nc_oc=AdlVUWwBu7YtqYLFbaQILigPzG8p7xGMbobhh_Dpr5z6yEPKNSg9CEzRcF6G5KJCpwI&_nc_zt=23&_nc_ht=scontent.fcai19-2.fna&_nc_gid=ez4gkWkFG8Gw1tW1ySO9zg&oh=00_AfiqvRXnkDgC1YGM9ZA-sFX7SJ42CNauOXbLusJWKg_lWw&oe=690FE5BE" width="70" /> </div> <div class="content"> <div id="prizeTitle" style="font-weight:800">تهانينا! ربحت</div> <div class="small" id="prizeDesc">كود خصم 10% على الطلب التالي</div> <div class="code" id="codeRow"> <div id="codeText">PROMO10</div> <button id="copyBtn">نسخ</button> </div> </div> </div> <div style="text-align:end;margin-top:14px"> <button id="closeBtn" class="secondary">إغلاق</button> </div> </div> </div> <script> // جميع الجوائز الأصلية const SHAKES = [ {title: 'كسبت خصم علي الموبايل', desc: 'احصل على خصم 3% بحد أقصى 300 جنية', code: 'DFMOB300'}, {title: 'كسبت خصم علي الاب توب', desc: 'احصل على خصم 3% على أى لاب توب', code: 'DFLAB3'}, {title: 'كسبت خصم على اكسسوار الكمبيوتر', desc: 'احصل على خصم 10% على أى اكسسوار كمبيوتر', code: 'DFACC10'}, {title: 'كسبت خصم على الطابعات او الشاشات', desc: 'احصل على خصم 3% على أى طابعة أو شاشة', code: 'DFPM3'}, {title: 'كسبت خصم على الأجهزة المنزلية الكبيرة', desc: 'أحصل على خصم 3% بحد أقصى 300 جنية على أى جهاز منزلى كبير', code: 'DFMDA300'}, {title: 'كسبت خصم على الأجهزة المنزلية الصغيرة', desc: 'أحصل على خصم 3% على أى جهاز منزلي صغير', code: 'DFSDA3'}, {title: 'كسبت خصم على التليفزيونات', desc: 'أحصل على خصم 5% بحد أقصى 500 جنية على التليفزيونات', code: 'DFTV500'}, {title: 'كسبت خصم علي التكيفات', desc: 'أحصل على خصم 5% بحد أقصي 400 جنية علي التكيفات', code: 'DFAIR400'}, {title: 'كسبت خصم علي الايربودز و الساعت الذكية', desc: 'أحصل على خصم 3% بحد أقصى 300 جنية عند شرائك أي ايربودز أو ساعة ذكية', code: 'DFWER300'} ]; const THRESHOLD = 16; // حساسية الهز const TIMEOUT = 2000; // وقت منع التكرار بالثواني const ONE_DAY = 24 * 60 * 60 * 1000; // 24 ساعة بالمللي ثانية const modalWrap = document.getElementById('modalWrap'); const modal = document.getElementById('modal'); const boxIcon = document.getElementById('boxIcon'); const prizeTitle = document.getElementById('prizeTitle'); const prizeDesc = document.getElementById('prizeDesc'); const codeText = document.getElementById('codeText'); const copyBtn = document.getElementById('copyBtn'); const closeBtn = document.getElementById('closeBtn'); const requestBtn = document.getElementById('request-perm'); let lastShake = 0; function showModal(prize){ prizeTitle.textContent = prize.title; prizeDesc.textContent = prize.desc; codeText.textContent = prize.code; modalWrap.setAttribute('aria-hidden','false'); modal.classList.add('show'); boxIcon.classList.add('pop'); if(navigator.vibrate) navigator.vibrate(200); } function hideModal(){ modal.classList.remove('show'); modalWrap.setAttribute('aria-hidden','true'); boxIcon.classList.remove('pop'); } closeBtn.onclick = hideModal; modalWrap.onclick = e => { if(e.target===modalWrap) hideModal(); }; copyBtn.onclick = async ()=>{ await navigator.clipboard.writeText(codeText.textContent); copyBtn.textContent='تم النسخ'; setTimeout(()=>copyBtn.textContent='نسخ',1200); }; let last = {x:null,y:null,z:null}; function handleMotion(e){ const acc = e.accelerationIncludingGravity || {x:0,y:0,z:0}; const {x,y,z} = acc; if(last.x===null){ last={x,y,z}; return; } const dx=x-last.x, dy=y-last.y, dz=z-last.z; const magnitude=Math.sqrt(dx*dx+dy*dy+dz*dz); if(magnitude>THRESHOLD){ const now=Date.now(); if(now-lastShake>TIMEOUT){ lastShake=now; onShakeDetected(); } } last={x,y,z}; } function onShakeDetected(){ const data = JSON.parse(localStorage.getItem('shake_won')) || null; const now = Date.now(); // لو عنده جائزة ولسه ممرش 24 ساعة if(data && now - data.time < ONE_DAY){ alert('لقد حصلت على جائزتك بالفعل! يمكنك المحاولة مرة أخرى بعد 24 ساعة.'); return; } // اختيار جائزة جديدة const prize = SHAKES[Math.floor(Math.random()*SHAKES.length)]; showModal(prize); localStorage.setItem('shake_won', JSON.stringify({ prize, time: now })); } async function requestMotionPermission(){ if(typeof DeviceMotionEvent!=='undefined' && typeof DeviceMotionEvent.requestPermission==='function'){ const s = await DeviceMotionEvent.requestPermission(); if(s==='granted'){ window.addEventListener('devicemotion',handleMotion); } }else{ window.addEventListener('devicemotion',handleMotion); } requestBtn.textContent='مفعل ✅'; requestBtn.disabled=true; } requestBtn.onclick=requestMotionPermission; window.addEventListener('devicemotion', handleMotion); </script> </body> </html>