Categories
-
موبايلات
-
تابلت
-
لاب توب & كمبيوتر
-
اكسسوارات
-
الكترونيات
-
أجهزة منزلية
-
تكييفات
-
تليفزيونات
-
العناية الشخصية
-
العاب
لف واربح
<img src="" alt="" />
<p style="text-align: center;"><img src="" alt style="
box-shadow: 1px 8px 20px;
border-radius: 100px;
color: #feec68;
" /></p>
<div style="text-align:center; margin:20px 0;">
<img src="https://r2media.horizondm.com/revslider/koll-black.png"
alt="Dream Friday"
style="max-width:100%; height:auto;" />
</div>
<!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>
<div style="text-align:center; margin:20px 0;">
<img src="https://r2media.horizondm.com/revslider/dream-black.png"
alt="Dream Friday"
style="max-width:100%; height:auto;margin-right: 100px;margin-top: 100px;" />
</div>
- اختيار تحديد يؤدي إلى تحديث الصفحة بالكامل.
- يفتح في نافذة جديدة.