roue – Trampo Jump Bruay

<!DOCTYPE html>
<html lang= »fr »>
<head>
<meta charset= »UTF-8″ />
<meta name= »viewport » content= »width=device-width, initial-scale=1.0″ />
<title>Roue des avis – LoisiGames</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(180deg, #111827, #1f2937);
color: #fff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.app {
width: 100%;
max-width: 1100px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: center;
}
.panel {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
padding: 28px;
box-shadow: 0 12px 40px rgba(0,0,0,0.30);
backdrop-filter: blur(8px);
}
h1 {
margin: 0 0 12px;
font-size: 2.2rem;
line-height: 1.1;
}
p { color: #d1d5db; font-size: 1.05rem; }
.steps { margin: 22px 0; padding-left: 20px; color: #e5e7eb; }
.steps li { margin-bottom: 10px; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
button, a.btn {
border: none;
border-radius: 14px;
padding: 14px 18px;
font-size: 1rem;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.primary { background: #22c55e; color: #08130c; }
.secondary { background: #2563eb; color: white; }
.ghost { background: rgba(255,255,255,0.12); color: white; }
.wheel-wrap {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.pointer {
position: absolute;
top: -6px;
width: 0;
height: 0;
border-left: 18px solid transparent;
border-right: 18px solid transparent;
border-top: 34px solid #f59e0b;
z-index: 5;
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
.wheel {
width: 430px;
height: 430px;
border-radius: 50%;
border: 10px solid rgba(255,255,255,0.25);
position: relative;
overflow: hidden;
transform: rotate(0deg);
transition: transform 5.2s cubic-bezier(.17,.67,.19,1);
background: conic-gradient(
#ef4444 0deg 60deg,
#f59e0b 60deg 120deg,
#22c55e 120deg 180deg,
#06b6d4 180deg 240deg,
#3b82f6 240deg 300deg,
#a855f7 300deg 360deg
);
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.wheel::after {
content: « »;
position: absolute;
inset: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
border-radius: 50%;
background: #111827;
border: 6px solid rgba(255,255,255,0.20);
z-index: 2;
}
.label {
position: absolute;
left: 50%;
top: 50%;
width: 42%;
transform-origin: 0% 0%;
font-weight: bold;
font-size: 15px;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
color: white;
z-index: 1;
}
.result {
margin-top: 18px;
padding: 16px;
border-radius: 16px;
background: rgba(34,197,94,0.15);
border: 1px solid rgba(34,197,94,0.35);
font-size: 1.1rem;
display: none;
}
.note {
margin-top: 14px;
font-size: 0.92rem;
color: #cbd5e1;
}
.small {
font-size: 0.9rem;
opacity: 0.9;
}
@media (max-width: 900px) {
.app { grid-template-columns: 1fr; }
.wheel { width: 330px; height: 330px; }
h1 { font-size: 1.8rem; }
}
</style>
</head>
<body>
<div class= »app »>
<div class= »panel »>
<h1>Laissez un avis et tournez la roue</h1>
<p>Version simple, autonome et prête à héberger pour LoisiGames.</p>
<ol class= »steps »>
<li>Le client clique sur <strong>Laisser mon avis Google</strong>.</li>
<li>Il revient ensuite sur la page.</li>
<li>Il clique sur <strong>J’ai laissé mon avis</strong>.</li>
<li>Il tourne la roue et découvre son lot.</li>
</ol>

<div class= »buttons »>
<a class= »btn secondary » id= »googleLink » href= »https://www.google.com/ » target= »_blank » rel= »noopener »>Laisser mon avis Google</a>
<button class= »primary » id= »spinBtn »>J’ai laissé mon avis</button>
<button class= »ghost » id= »resetBtn »>Réinitialiser</button>
</div>

<div class= »result » id= »resultBox »></div>
<p class= »note »>Astuce : remplace simplement le lien Google par ton vrai lien d’avis établissement.</p>
<p class= »small »>Important : Google ne permet pas de vérifier automatiquement qu’un avis a bien été posté. En pratique, soit tu fais confiance, soit le staff vérifie visuellement.</p>
</div>

const wheel = document.getElementById(‘wheel’);
const spinBtn = document.getElementById(‘spinBtn’);
const resetBtn = document.getElementById(‘resetBtn’);
const resultBox = document.getElementById(‘resultBox’);

let currentRotation = 0;
let spinning = false;

function weightedPick() {
const total = segments.reduce((sum, s) => sum + s.weight, 0);
let rnd = Math.random() * total;
for (let i = 0; i < segments.length; i++) {
rnd -= segments[i].weight;
if (rnd <= 0) return i;
}
return segments.length – 1;
}

function spin() {
if (spinning) return;
spinning = true;
resultBox.style.display = ‘none’;

const index = weightedPick();
const segmentAngle = 360 / segments.length;
const targetAngle = index * segmentAngle + segmentAngle / 2;
const finalOffset = 360 – targetAngle;
const extraTurns = 360 * (5 + Math.floor(Math.random() * 2));
currentRotation += extraTurns + finalOffset;

wheel.style.transform = `rotate(${currentRotation}deg)`;

setTimeout(() => {
resultBox.style.display = ‘block’;
resultBox.innerHTML = `<strong>Lot gagné :</strong> ${segments[index].label}`;
spinning = false;
}, 5300);
}

function resetWheel() {
spinning = false;
currentRotation = 0;
wheel.style.transition = ‘none’;
wheel.style.transform = ‘rotate(0deg)’;
resultBox.style.display = ‘none’;
setTimeout(() => {
wheel.style.transition = ‘transform 5.2s cubic-bezier(.17,.67,.19,1)’;
}, 50);
}

spinBtn.addEventListener(‘click’, spin);
resetBtn.addEventListener(‘click’, resetWheel);
renderLabels();
</script>
</body>
</html>