1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / eltorofashions_spin /
Filename : index.php
back
<?php
session_start();
require "db.php";

if (!isset($_SESSION['username']) || !isset($_SESSION['number'])) {
    header("Location: userlogin.php");
    exit();
}

$offers = [];
$totalProb = 0;
$sql = "SELECT offer_name, color, probability FROM offers WHERE status = 0";
$res = $conn->query($sql);
if ($res && $res->num_rows > 0) {
    while ($row = $res->fetch_assoc()) {
        $row['offer_name']  = $row['offer_name'] ?? 'Mystery';
        $row['color']       = $row['color'] ?? '#8b5cf6';
        $row['probability'] = (float)($row['probability'] ?? 0);
        $offers[] = $row;
        $totalProb += (float)$row['probability'];
    }
}
$conn->close();

if ($totalProb <= 0 && count($offers) > 0) {
    $equal = 100 / count($offers);
    foreach ($offers as &$o) $o['probability'] = $equal;
    $totalProb = 100;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neon Spin</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/zarocknz/javascript-winwheel/Winwheel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
<style>
:root {
  --bg: #080c12;
  --card: #0f141d;
  --ink: #e9f0fb;
  --muted: #8ea0b8;
  --accent: #00f6ff;
  --danger: #ff3265;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  --glow: 0 0 25px rgba(0, 246, 255, 0.55);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(1000px 700px at 50% -10%, #141b28, #080c12 70%);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
}

header {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  position: relative;
}

.brand {
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--accent);
  text-shadow: var(--glow);
  font-size: 1.5rem; /* Adjusted for mobile */
}

.user {
  font-size: 12px; /* Adjusted for mobile */
  color: var(--muted);
}

/* Menu drawer */
.menu-btn {
  background: none;
  border: none;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}

.menu-drawer {
  display: none;
  position: absolute;
  top: 50px;
  right: 14px;
  background: var(--card);
  border: 1px solid rgba(0, 246, 255, 0.25);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 50;
}

.menu-drawer a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}

.menu-drawer a:hover {
  background: rgba(0, 246, 255, 0.1);
}

.wheel-wrap {
  position: relative;
  margin: auto;
  width: min(500px, 92vw);
  height: min(500px, 92vw);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 0 20px rgba(0, 246, 255, 0.2), 0 0 50px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at 30% 30%, rgba(0, 246, 255, 0.07), transparent 60%);
}

canvas {
  display: block;
  width: 100% !important; /* Ensure canvas scales */
  height: 100% !important;
}

.pointer {
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%) rotate(0deg);
  width: 0;
  height: 0;
  z-index: 5;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 32px solid var(--danger);
  filter: drop-shadow(0 0 8px rgba(255, 50, 101, 0.7));
}

.controls {
  margin-top: 28px;
}

.btn {
  background: linear-gradient(180deg, var(--accent), #00a2a8);
  color: #000;
  font-weight: 800;
  padding: 14px 26px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.3px;
  font-size: 18px;
  box-shadow: 0 8px 22px rgba(0, 246, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.15s;
}

.btn:active {
  transform: scale(0.95);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  z-index: 40;
}

.modal-backdrop.show {
  display: block;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border: 1px solid rgba(0, 246, 255, 0.25);
  border-radius: 16px;
  box-shadow: var(--shadow), var(--glow);
  width: min(90vw, 420px);
  z-index: 41;
  display: none;
  text-align: center;
  padding: 28px 20px;
}

.modal.show {
  display: block;
  animation: pop 0.35s ease;
}

@keyframes pop {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.winner {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 10px;
  text-shadow: 0 0 15px rgba(0, 246, 255, 0.6);
}

.hint {
  font-size: 14px;
  color: var(--muted);
}

.close-btn {
  margin-top: 20px;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 50, 101, 0.45);
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 600px) {
  body {
    padding: 10px;
  }

  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
    margin-bottom: 15px;
  }

  .brand,
  .user {
    margin: 5px 0;
  }

  .user {
    order: 2;
  }

  .menu-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
  }

  .menu-drawer {
    top: 60px;
    right: 10px;
  }

  .wheel-wrap {
    width: 95vw;
    height: 95vw;
    max-width: 400px;
    max-height: 400px;
    margin-top: 20px;
  }

  .pointer {
    top: -20px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 24px solid var(--danger);
  }

  .btn {
    padding: 12px 20px;
    font-size: 16px;
  }
}

@media (max-width: 400px) {
  .brand {
    font-size: 1.25rem;
  }

  .modal {
    width: 95vw;
    padding: 20px 15px;
  }

  .winner {
    font-size: 18px;
  }

  .hint {
    font-size: 12px;
  }

  .close-btn {
    padding: 10px 18px;
    font-size: 14px;
  }
}
</style>
</head>
<body>
<header>
  <div class="brand">Neon Spin</div>
  <div class="user"><?= htmlspecialchars($_SESSION['username']) ?> • <?= htmlspecialchars($_SESSION['number']) ?></div>
  <button class="menu-btn" onclick="toggleMenu()">☰</button>
  <div id="menuDrawer" class="menu-drawer">
    <a href="admin.php">Admin</a>
    <a href="logout.php">Logout</a>
  </div>
</header>

<div class="wheel-wrap">
  <canvas id="wheelCanvas" width="500" height="500"></canvas>
  <div class="pointer"></div>
</div>

<div class="controls">
  <button id="spinBtn" class="btn">🎰 Spin</button>
</div>

<div class="modal-backdrop" id="modalBackdrop"></div>
<div class="modal" id="resultModal">
  <div class="winner" id="winnerText">You won!</div>
  <p class="hint" id="saveHint">Saving your result…</p>
  <button class="close-btn" id="closeModal">Close</button>
</div>

<script>
const phpOffers = <?= json_encode($offers, JSON_UNESCAPED_UNICODE) ?>;
const totalProb = <?= (float)$totalProb ?>;

// Build segments
const segments = phpOffers.map(o=>{
  const pct = totalProb>0 ? parseFloat(o.probability)/totalProb : 1/phpOffers.length;
  return { text:o.offer_name, fillStyle:o.color, size:Math.max(0.001,pct*360) };
});

const wheel = new Winwheel({
  canvasId:'wheelCanvas',
  numSegments:segments.length,
  segments:segments,
  outerRadius:240,
  innerRadius:60, // reduced inner circle
  lineWidth:2,
  strokeStyle:'#111',
  textFontFamily:'Arial Black, sans-serif',
  textFontSize:16,
  textFillStyle:'#fff',
  textAlignment:'outer',
  textMargin:18,
  pins:{ number:Math.max(segments.length*3,24), fillStyle:'#00f6ff', outerRadius:2.5, responsive:true },
  animation:{
    type:'spinToStop', duration:6, spins:9, easing:'Power4.easeOut',
    callbackFinished:onSpinFinished, callbackSound:tickSound, soundTrigger:'pin'
  }
});

// Tick sound
let audioCtx;
function tickSound(){
  try{
    audioCtx=audioCtx||new(window.AudioContext||window.webkitAudioContext)();
    const o=audioCtx.createOscillator(); const g=audioCtx.createGain();
    o.type='square'; o.frequency.value=900; g.gain.value=0.02;
    o.connect(g); g.connect(audioCtx.destination); o.start();
    setTimeout(()=>o.stop(),18);
  }catch(e){}
}

const spinBtn=document.getElementById('spinBtn');
const modal=document.getElementById('resultModal');
const backdrop=document.getElementById('modalBackdrop');
const winnerText=document.getElementById('winnerText');
const saveHint=document.getElementById('saveHint');
const closeModal=document.getElementById('closeModal');
let spinning=false;

spinBtn.addEventListener('click',()=>{
  if(spinning) return;
  spinning=true; spinBtn.disabled=true;
  wheel.stopAnimation(false); wheel.rotationAngle=0; wheel.draw();
  wheel.startAnimation();
});

function onSpinFinished(seg){
  const prize = seg?.text||'No Prize';
  //console.log(prize);
  winnerText.textContent=`🎉 You won: ${prize}`;
  saveHint.textContent="Saving your result…";
  showModal();

  confetti({particleCount:150, spread:90, origin:{y:0.6}});
  confetti({particleCount:80, angle:60, spread:55, origin:{x:0}});
  confetti({particleCount:80, angle:120, spread:55, origin:{x:1}});

  // Save result
  fetch('save_spin.php',{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({
      name:"<?= $_SESSION['username'] ?>",
      number:"<?= $_SESSION['number'] ?>",
      offer_won:prize
    })
  })
  .then(r=>r.text())
  .then(res=>saveHint.textContent=res)
  .catch(()=>saveHint.textContent="Save failed.");

  spinning=false;
  spinBtn.disabled=false;
}

function showModal(){ modal.classList.add('show'); backdrop.classList.add('show'); }
function hideModal(){ modal.classList.remove('show'); backdrop.classList.remove('show'); }
closeModal.addEventListener('click',hideModal);
backdrop.addEventListener('click',hideModal);

// Menu drawer
function toggleMenu(){
  const drawer=document.getElementById('menuDrawer');
  drawer.style.display = drawer.style.display==='block'?'none':'block';
}
window.onclick=function(e){
  if(!e.target.closest('.menu-btn') && !e.target.closest('.menu-drawer')){
    document.getElementById('menuDrawer').style.display='none';
  }
}
</script>
</body>
</html>