{"id":6771,"date":"2025-10-16T16:36:46","date_gmt":"2025-10-16T16:36:46","guid":{"rendered":"https:\/\/lashkarayjewels.shop\/?page_id=6771"},"modified":"2025-10-16T17:50:05","modified_gmt":"2025-10-16T17:50:05","slug":"6771-2","status":"publish","type":"page","link":"https:\/\/lashkarayjewels.shop\/?page_id=6771","title":{"rendered":"WEEKLY DISCOUNT SPIN WHEEL SEGMENT"},"content":{"rendered":"\n<!-- ===== SPIN WHEEL BLOCK START ===== -->\n\n<!-- \ud83c\udfb5 Music Toggle Button -->\n<button id=\"musicToggle\">\ud83c\udfb5 Music: ON<\/button>\n\n<style>\n:root{\n  --gold: #d4af37;\n  --gold-deep: #b68629;\n  --neon-glow: 0 0 14px rgba(212,175,55,0.95), 0 0 30px rgba(212,175,55,0.5);\n}\nhtml,body{height:100%;margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;}\nbody{\n  background: #000 url('https:\/\/lashkarayjewels.shop\/wp-content\/uploads\/2025\/10\/blackg.jpg') center\/cover no-repeat;\n  display:flex;\n  align-items:flex-start;\n  justify-content:center;\n  padding:20px;\n  color:#fff;\n}\n.page-wrap{\n  width:100%;\n  max-width:1100px;\n  display:grid;\n  grid-template-columns: 1fr;\n  gap:20px;\n  align-items:start;\n}\n.logo{grid-column:1 \/ -1; display:flex; justify-content:center; margin-bottom:6px;}\n.logo img{max-width:80%; height:auto; object-fit:contain;}\n.welcome-box {\n  background: rgba(255, 255, 255, 0.85);\n  border-radius: 12px;\n  padding: 20px;\n  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);\n  border: 4px solid #000;\n  position: relative;\n  top: 10px;\n}\n.welcome-box h2 {\n  margin: 0 0 12px 0;\n  font-size: 24px;\n  font-weight: 900;\n  text-transform: uppercase;\n  text-align: center;\n  background: linear-gradient(180deg, #fff6cc 0%, #d4af37 45%, #a67c00 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  text-shadow:0 1px 1px #fff8d6,0 2px 2px #d4af37,0 4px 4px rgba(0,0,0,0.4);\n  letter-spacing: 1px;\n}\n.welcome-box p {\n  margin: 10px 0 0;\n  font-size: 14px;\n  color: #222;\n  line-height: 1.5;\n  text-align: justify;\n}\n.wheel-area{\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  position:relative;\n  padding:10px;\n}\n.wheel-container{\n  position:relative;\n  width:90vw;\n  max-width:420px;\n  height:90vw;\n  max-height:420px;\n  display:flex;\n  align-items:center;\n  justify-content:center;\n}\n.wheel-outer{\n  position:absolute;\n  width:100%;\n  height:100%;\n  border-radius:50%;\n  box-shadow: var(--neon-glow);\n  border: 8px solid rgba(212,175,55,0.95);\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  pointer-events:none;\n}\n.wheel-arrow-ring { position: absolute; width: 110%; height: 110%; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; }\n.top-arrow { position: absolute; top: -12px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 20px solid rgba(255, 255, 255, 0.95); transform: translateY(6px); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)); z-index: 4; pointer-events: none; }\n#wheelcanvas{ border-radius:50%; width:100%; height:100%; background: transparent; }\n.spin-btn{ position:absolute; width:25%; max-width:120px; aspect-ratio:1\/1; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:5; cursor:pointer; transition: transform .12s ease; box-shadow: var(--neon-glow); border: 5px solid var(--gold); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0.35)); }\n.spin-btn:active{ transform: scale(.97); }\n.spin-btn .label{ font-weight:700; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,0.6); font-size:16px; text-align:center; }\n.result-box{\n  position:absolute;\n  bottom:-60px;\n  left:50%;\n  transform:translateX(-50%);\n  background: black;\n  padding:15px 20px;\n  border-radius:12px;\n  border: 3px solid white;\n  box-shadow:0 0 15px rgba(255,255,255,0.7),0 0 25px rgba(212,175,55,0.9),0 0 45px rgba(212,175,55,0.7);\n  color:#fff;\n  font-weight:700;\n  font-size:16px;\n  text-align:center;\n  display:none;\n  z-index:6;\n  width:80%;\n  max-width:380px;\n  animation: pop 0.4s ease;\n}\n.popup-warning {\n  position: fixed;\n  top: 25%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: black;\n  color: white;\n  padding: 20px 25px;\n  border: 3px solid white;\n  border-radius: 12px;\n  box-shadow:0 0 15px rgba(255,255,255,0.7),0 0 25px rgba(212,175,55,0.9),0 0 45px rgba(212,175,55,0.7);\n  font-size: 16px;\n  text-align: center;\n  display: none;\n  z-index: 10;\n  width:80%;\n  max-width:400px;\n  animation: pop 0.4s ease;\n}\n.result-box p { margin: 6px 0; line-height: 1.4; }\n@keyframes pop { 0% { transform: translateX(-50%) scale(0.8); opacity:0; } 100% { transform: translateX(-50%) scale(1); opacity:1; } }\n<\/style>\n\n<div class=\"page-wrap\">\n  <div class=\"logo\"><img decoding=\"async\" src=\"https:\/\/lashkarayjewels.shop\/wp-content\/uploads\/2025\/10\/ljlogo.PNG\" alt=\"Logo\" \/><\/div>\n  <div class=\"welcome-box\">\n    <h2>Welcome to &#8220;LASHKARAY JEWELS&#8221;!<\/h2>\n    <p>\n      Every month, our customers will receive special discount offers through this spinning wheel.\n      The customer who buys and refers the most people will be eligible to spin the wheel weekly.\n      <br><br>\n      Special Offer! New customers will be eligible to spin the wheel twice a week.\n      <br><br>\n      Note: Discounts apply only to combo deals and buckets. Single-product buyers are not eligible for this offer.\n    <\/p>\n  <\/div>\n\n  <div class=\"wheel-area\">\n    <div class=\"wheel-container\">\n      <div class=\"wheel-arrow-ring\"><div class=\"top-arrow\" id=\"topArrow\"><\/div><\/div>\n      <div class=\"wheel-outer\"><\/div>\n      <canvas id=\"wheelcanvas\" width=\"480\" height=\"480\"><\/canvas>\n      <div class=\"spin-btn\" id=\"spinBtn\"><div class=\"label\">SPIN<\/div><\/div>\n      <div class=\"result-box\" id=\"resultBox\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<div class=\"popup-warning\" id=\"popupWarning\">\n  <p>\u26a0\ufe0f You are not eligible for this wheel more than one time.<\/p>\n  <p>You will spin it next week.<\/p>\n<\/div>\n\n<!-- \ud83c\udfb5 Audio Elements -->\n<audio id=\"bgMusic\" src=\"https:\/\/lashkarayjewels.shop\/wp-content\/uploads\/2025\/10\/wheelbkgmusic.mp3\" loop><\/audio>\n<audio id=\"spinSound\" src=\"https:\/\/lashkarayjewels.shop\/wp-content\/uploads\/2025\/10\/spinningmusic.mp3\"><\/audio>\n<audio id=\"popupSound\" src=\"https:\/\/lashkarayjewels.shop\/wp-content\/uploads\/2025\/10\/popupsound.mp3\"><\/audio>\n\n<script>\n\/* ----- SPIN WHEEL JS ----- *\/\nconst segments = [\"5% Off\",\"Better luck next time\",\"8% Off\",\"No luck\",\"10% Off\",\"Unlucky this time\",\"15% Off\",\"No Discount\",\"20% Off\",\"Thumbs down\",\"25% Off\",\"Next time! Don't give up\"];\nconst colors = ['#161616','#1b1b1b','#151515','#1d1d1d','#141414','#1a1a1a','#131313','#1c1c1c','#101010','#171717','#0f0f0f','#151515'];\n\nconst canvas=document.getElementById('wheelcanvas');\nconst ctx=canvas.getContext('2d');\nconst size=canvas.width;\nconst cx=size\/2, cy=size\/2, radius=size\/2-10;\nconst segmentCount=segments.length;\nlet currentRotation=0;\n\nconst bgMusic=document.getElementById('bgMusic');\nconst spinSound=document.getElementById('spinSound');\nconst popupSound=document.getElementById('popupSound');\n\nlet bgStarted=false;\nfunction playBg(){ if(!bgStarted){ bgStarted=true; bgMusic.volume=0.4; bgMusic.play().catch(()=>{}); } }\nfunction stopBg(){ bgMusic.pause(); bgMusic.currentTime=0; }\nfunction playSpin(){ spinSound.volume=0.7; spinSound.play().catch(()=>{}); }\nfunction stopSpin(){ spinSound.pause(); spinSound.currentTime=0; }\nfunction playPopup(){ popupSound.volume=0.8; popupSound.play().catch(()=>{}); }\n\nfunction drawWheel(){\n  ctx.clearRect(0,0,size,size);\n  ctx.save();\n  ctx.translate(cx,cy);\n  for(let i=0;i<segmentCount;i++){\n    const start=i*2*Math.PI\/segmentCount - Math.PI\/2;\n    const end=start+2*Math.PI\/segmentCount;\n    ctx.beginPath();\n    ctx.moveTo(0,0);\n    ctx.arc(0,0,radius,start,end);\n    ctx.closePath();\n    ctx.fillStyle=colors[i%colors.length];\n    ctx.fill();\n    const neonGradient=ctx.createLinearGradient(0,0,100,0);\n    neonGradient.addColorStop(0,\"#FFD700\");\n    neonGradient.addColorStop(0.5,\"#FFF8B5\");\n    neonGradient.addColorStop(1,\"#FFD700\");\n    ctx.strokeStyle=neonGradient;\n    ctx.lineWidth=3;\n    ctx.shadowBlur=10;\n    ctx.shadowColor=\"gold\";\n    ctx.stroke();\n\n    ctx.save();\n    const angle=start+Math.PI\/segmentCount;\n    ctx.rotate(angle);\n    ctx.textAlign=\"center\";\n    ctx.fillStyle=\"#fff\";\n    ctx.font=\"bold 15px Arial\";\n    const textRadius=radius*0.75;\n    ctx.translate(textRadius,0);\n    ctx.rotate(Math.PI\/2);\n    wrapText(ctx,segments[i],0,0,90,16);\n    ctx.restore();\n  }\n  ctx.beginPath();\n  ctx.arc(0,0,radius+3,0,Math.PI*2);\n  ctx.strokeStyle=\"#FFD700\";\n  ctx.lineWidth=4;\n  ctx.shadowBlur=20;\n  ctx.shadowColor=\"gold\";\n  ctx.stroke();\n  ctx.restore();\n}\ndrawWheel();\n\nfunction wrapText(context,text,x,y,maxWidth,lineHeight){\n  const words=text.split(' '); let line='', yOffset=0;\n  for(let n=0;n<words.length;n++){\n    const testLine=line+words[n]+' ';\n    const metrics=context.measureText(testLine);\n    if(metrics.width>maxWidth && n>0){ context.fillText(line,x,y+yOffset); line=words[n]+' '; yOffset+=lineHeight; } else line=testLine;\n  }\n  context.fillText(line,x,y+yOffset);\n}\n\nlet isSpinning=false;\nconst spinBtn=document.getElementById('spinBtn');\nconst resultBox=document.getElementById('resultBox');\nconst popupWarning=document.getElementById('popupWarning');\n\nfunction rotateWheelTo(angleDeg,duration=4000,callback){\n  if(isSpinning)return;\n  isSpinning=true;\n  const start=performance.now();\n  const startRot=currentRotation;\n  const angleRad=angleDeg*Math.PI\/180;\n  const delta=angleRad-startRot;\n  function tick(ts){\n    const elapsed=ts-start;\n    const progress=Math.min(1,elapsed\/duration);\n    const ease=1-Math.pow(1-progress,3);\n    currentRotation=startRot+delta*ease;\n    drawRotated();\n    if(progress<1)requestAnimationFrame(tick);\n    else{isSpinning=false;if(callback)callback();}\n  }\n  requestAnimationFrame(tick);\n}\nfunction drawRotated(){canvas.style.transform=`rotate(${currentRotation}rad)`;}\n\nspinBtn.addEventListener('click',()=>{\n  playBg();\n  if(localStorage.getItem('hasSpun')==='true'){ playPopup(); popupWarning.style.display='block'; setTimeout(()=>{popupWarning.style.display='none';},5000); return; }\n  if(isSpinning)return;\n  stopBg(); playSpin();\n  const randomIndex=Math.floor(Math.random()*segmentCount);\n  const degreesPerSegment=360\/segmentCount;\n  const targetSegmentCenterDeg=randomIndex*degreesPerSegment;\n  const extraSpins=6+Math.floor(Math.random()*4);\n  const finalDeg=extraSpins*360-targetSegmentCenterDeg+(Math.random()*(degreesPerSegment-2)-(degreesPerSegment\/2-1));\n  rotateWheelTo(finalDeg,4500,()=>{\n    stopSpin(); playBg();\n    const normalized=((finalDeg%360)+360)%360;\n    const landedIndex=Math.round(normalized\/degreesPerSegment)%segmentCount;\n    const winnerIndex=((segmentCount-landedIndex))%segmentCount;\n    showResult(winnerIndex);\n    localStorage.setItem('hasSpun','true');\n  });\n});\n\nfunction showResult(index){\n  const prize=segments[index].toLowerCase();\n  let html=\"\";\n  if(prize.includes(\"off\")||prize.includes(\"free\")){ html=`<p>\ud83c\udf89 CONGRATULATIONS FOR YOUR WINNINGS!<\/p><p>Have a good day<\/p>`; }\n  else{ html=`<p>\ud83d\ude14 SO SAD, DON'T WORRY, BEST OF LUCK FOR THE NEXT TIME<\/p><p>We hope you will win your reward next time.<\/p>`; }\n  resultBox.innerHTML=html;\n  resultBox.style.display='block';\n  setTimeout(()=>{resultBox.style.display='none';},5500);\n}\n\ndocument.addEventListener('keydown',(e)=>{ if(e.code==='Space'){e.preventDefault();spinBtn.click();} });\n\nconst musicToggle=document.getElementById('musicToggle');\nlet musicEnabled=true;\nmusicToggle.addEventListener('click',()=>{\n  if(musicEnabled){ stopBg(); musicToggle.innerText=\"\ud83c\udfb5 Music: OFF\"; }\n  else{ playBg(); musicToggle.innerText=\"\ud83c\udfb5 Music: ON\"; }\n  musicEnabled=!musicEnabled;\n});\n<\/script>\n\n<!-- ===== SPIN WHEEL BLOCK END ===== -->\n\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfb5 Music: ON Welcome to &#8220;LASHKARAY JEWELS&#8221;! Every month, our customers will receive special discount offers through this spinning wheel&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6771","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"post-meta":{"_edit_lock":["1760637048:1"],"_edit_last":["1"],"site-container":["default"],"site-header-transparent":["default"],"site-page-header":["default"],"site-sidebar":["default"],"_elementor_template_type":["wp-page"],"_wp_page_template":["default"],"_elementor_version":["3.31.2"]},"_links":{"self":[{"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=\/wp\/v2\/pages\/6771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6771"}],"version-history":[{"count":4,"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=\/wp\/v2\/pages\/6771\/revisions"}],"predecessor-version":[{"id":6781,"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=\/wp\/v2\/pages\/6771\/revisions\/6781"}],"wp:attachment":[{"href":"https:\/\/lashkarayjewels.shop\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}