Categories
-
Mobile
-
Tablet
-
Laptop & Computer
-
Accessories
-
Electronics
-
Home Appliances
-
Air Conditioners
-
TVs
-
Personal Care
-
Gaming
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>
- Choosing a selection results in a full page refresh.
- Opens in a new window.