<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Le Twitch Game — Gagnants de la semaine</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root{
--bg-void:#05021a;
--bg-deep:#0b0530;
--violet-deep:#1a0a6b;
--violet-main:#4c1fe0;
--violet-bright:#8b5cf6;
--violet-glow:#a78bfa;
--ice:#e0d4ff;
--white:#ffffff;
--line:rgba(167,139,250,0.22);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
background:
radial-gradient(ellipse 900px 600px at 50% -10%, rgba(76,31,224,0.35), transparent 60%),
radial-gradient(ellipse 700px 500px at 90% 30%, rgba(139,92,246,0.12), transparent 60%),
var(--bg-void);
color:var(--ice);
font-family:'Inter',sans-serif;
min-height:100vh;
overflow-x:hidden;
}
.display{
font-family:'Anton',sans-serif;
text-transform:uppercase;
letter-spacing:0.01em;
}
/* ---------- Sparkle field ---------- */
.sparkle-layer{
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
opacity:0.55;
}
.sparkle{
position:absolute;
width:3px;height:3px;
background:var(--ice);
border-radius:50%;
box-shadow:0 0 6px 1px rgba(224,212,255,0.9);
animation:twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle{
0%,100%{opacity:0.15; transform:scale(0.8);}
50%{opacity:1; transform:scale(1.4);}
}
/* ---------- Header ---------- */
header{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
max-width:1180px;
margin:0 auto;
padding:28px 24px 0;
}
.brand{
display:flex;
align-items:center;
gap:12px;
}
.brand-mark{width:34px;height:34px; flex-shrink:0;}
.brand-name{
font-size:15px;
font-weight:800;
letter-spacing:0.06em;
color:var(--white);
text-transform:uppercase;
}
nav{display:flex; gap:28px;}
nav a{
color:var(--ice);
opacity:0.75;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:opacity 0.2s;
}
nav a:hover{opacity:1;}
/* ---------- Hero ---------- */
.hero{
position:relative;
z-index:2;
max-width:1180px;
margin:0 auto;
padding:64px 24px 40px;
display:grid;
grid-template-columns:1.1fr 0.9fr;
align-items:center;
gap:40px;
}
.eyebrow{
display:inline-flex;
align-items:center;
gap:8px;
font-size:12px;
font-weight:700;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--violet-glow);
background:rgba(139,92,246,0.1);
border:1px solid var(--line);
padding:7px 14px;
border-radius:100px;
margin-bottom:22px;
}
.eyebrow .dot{
width:6px;height:6px;
border-radius:50%;
background:var(--violet-glow);
box-shadow:0 0 8px var(--violet-glow);
animation:pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot{0%,100%{opacity:1;} 50%{opacity:0.3;}}
.hero h1{
font-size:clamp(40px,6vw,68px);
line-height:0.95;
color:var(--white);
margin-bottom:20px;
text-shadow:0 0 40px rgba(139,92,246,0.5);
}
.hero h1 .accent{
color:transparent;
background:linear-gradient(135deg, var(--violet-glow), var(--ice) 60%, var(--violet-bright));
-webkit-background-clip:text;
background-clip:text;
}
.hero p{
font-size:17px;
line-height:1.6;
color:var(--ice);
opacity:0.78;
max-width:480px;
margin-bottom:30px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
display:inline-flex;
align-items:center;
gap:8px;
font-family:'Inter',sans-serif;
font-weight:700;
font-size:14px;
padding:14px 26px;
border-radius:10px;
text-decoration:none;
cursor:pointer;
border:none;
transition:transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{
background:linear-gradient(135deg, var(--violet-main), var(--violet-bright));
color:var(--white);
box-shadow:0 8px 30px rgba(76,31,224,0.5);
}
.btn-primary:hover{box-shadow:0 8px 40px rgba(139,92,246,0.7);}
.btn-ghost{
background:rgba(255,255,255,0.04);
color:var(--ice);
border:1px solid var(--line);
}
.btn-ghost:hover{background:rgba(255,255,255,0.08);}
/* ---------- Diamond heart visual ---------- */
.gem-stage{
position:relative;
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:1;
}
.gem-glow{
position:absolute;
width:75%;
height:75%;
background:radial-gradient(circle, rgba(139,92,246,0.55), transparent 70%);
filter:blur(20px);
animation:breathe 4.5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1); opacity:0.7;} 50%{transform:scale(1.08); opacity:1;}}
.gem-svg{
position:relative;
width:88%;
z-index:1;
animation:float-gem 6s ease-in-out infinite;
}
@keyframes float-gem{0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-10px) rotate(0.6deg);}}
/* ---------- Current winner spotlight ---------- */
.panel{
position:relative;
z-index:2;
max-width:1180px;
margin:0 auto;
padding:0 24px 70px;
}
.spotlight-card{
background:linear-gradient(160deg, rgba(76,31,224,0.22), rgba(11,5,48,0.65));
border:1px solid var(--line);
border-radius:22px;
padding:38px 40px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:28px;
backdrop-filter:blur(8px);
}
.spotlight-gem{
width:74px; height:74px; flex-shrink:0;
}
.spotlight-label{
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.1em;
color:var(--violet-glow);
margin-bottom:8px;
}
.spotlight-name{
font-family:'Anton',sans-serif;
font-size:30px;
color:var(--white);
margin-bottom:6px;
text-shadow:0 0 24px rgba(139,92,246,0.55);
}
.spotlight-meta{
font-size:13.5px;
color:var(--ice);
opacity:0.65;
}
.spotlight-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:10px;
}
@media (max-width:760px){
.spotlight-card{grid-template-columns:1fr; text-align:center;}
.spotlight-gem{margin:0 auto;}
.spotlight-actions{align-items:center;}
}
/* ---------- Section shell ---------- */
section.block{
position:relative;
z-index:2;
max-width:1180px;
margin:0 auto;
padding:60px 24px;
}
.section-head{margin-bottom:36px;}
.section-tag{
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:0.12em;
color:var(--violet-glow);
margin-bottom:10px;
display:block;
}
.section-head h2{
font-size:clamp(28px,4vw,40px);
color:var(--white);
}
.section-head p.desc{
margin-top:10px;
color:var(--ice);
opacity:0.7;
font-size:15px;
max-width:560px;
}
/* ---------- Filters ---------- */
.filter-row{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:28px;
}
.filter-pill{
display:flex;
align-items:center;
gap:7px;
padding:9px 16px;
border-radius:100px;
border:1px solid var(--line);
background:rgba(255,255,255,0.03);
color:var(--ice);
font-size:13px;
font-weight:600;
cursor:pointer;
transition:all 0.15s;
}
.filter-pill svg{width:13px; height:13px;}
.filter-pill.active{
background:linear-gradient(135deg, var(--violet-main), var(--violet-bright));
border-color:transparent;
color:var(--white);
box-shadow:0 4px 18px rgba(76,31,224,0.5);
}
/* ---------- History ---------- */
.history-list{
display:flex;
flex-direction:column;
gap:14px;
}
.history-row{
display:grid;
grid-template-columns:auto 1fr auto auto;
align-items:center;
gap:18px;
background:rgba(255,255,255,0.025);
border:1px solid var(--line);
border-radius:14px;
padding:18px 22px;
transition:border-color 0.2s, transform 0.2s;
}
.history-row:hover{
border-color:rgba(167,139,250,0.5);
transform:translateX(3px);
}
@media (max-width:680px){
.history-row{grid-template-columns:1fr; gap:10px;}
}
.gem-bullet{width:38px; height:38px; flex-shrink:0;}
.history-main .winner-row-name{
font-size:17px;
font-weight:800;
color:var(--white);
margin-bottom:3px;
}
.history-main .week-range{
font-size:12.5px;
color:var(--ice);
opacity:0.55;
}
.platform-badge{
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
font-weight:700;
padding:7px 13px;
border-radius:100px;
white-space:nowrap;
}
.platform-badge svg{width:13px; height:13px;}
.badge-x{background:rgba(255,255,255,0.1); color:#fff;}
.badge-youtube{background:rgba(255,59,48,0.15); color:#ff5b53;}
.badge-tiktok{background:rgba(255,255,255,0.1); color:#fff;}
.badge-instagram{background:rgba(225,48,108,0.15); color:#f56fa1;}
.profile-link{
display:inline-flex;
align-items:center;
gap:6px;
font-size:13px;
font-weight:700;
color:var(--violet-glow);
text-decoration:none;
padding:8px 14px;
border:1px solid var(--line);
border-radius:100px;
transition:background 0.2s, color 0.2s;
white-space:nowrap;
}
.profile-link:hover{
background:rgba(139,92,246,0.15);
color:var(--white);
}
.profile-link svg{width:12px; height:12px;}
.empty-state{
text-align:center;
padding:50px 20px;
color:var(--ice);
opacity:0.5;
font-size:14px;
}
/* ---------- Footer ---------- */
footer{
position:relative;
z-index:2;
max-width:1180px;
margin:0 auto;
padding:40px 24px 50px;
border-top:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:14px;
}
footer .foot-left{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
color:var(--ice);
opacity:0.55;
}
footer .foot-links{display:flex; gap:18px;}
footer .foot-links a{
color:var(--ice);
opacity:0.6;
text-decoration:none;
font-size:13px;
transition:opacity 0.2s;
}
footer .foot-links a:hover{opacity:1;}
.accounts-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}
@media (max-width:760px){
.accounts-grid{grid-template-columns:repeat(2,1fr);}
.hero{grid-template-columns:1fr;}
}
.account-card{
background:rgba(255,255,255,0.025);
border:1px solid var(--line);
border-radius:18px;
padding:28px 20px;
text-align:center;
text-decoration:none;
transition:border-color 0.2s, transform 0.2s;
}
.account-card:hover{
border-color:rgba(167,139,250,0.5);
transform:translateY(-3px);
}
</style>
</head>
<body>
<div class="sparkle-layer" id="sparkleLayer"></div>
<header>
<div class="brand">
<svg class="brand-mark" viewBox="0 0 100 100" fill="none">
<path d="M50 88 L12 45 C2 33 5 14 22 8 C35 3 46 9 50 22 C54 9 65 3 78 8 C95 14 98 33 88 45 Z" fill="url(#gradMark)" stroke="#fff" stroke-width="1.5" opacity="0.95"/>
<defs>
<linearGradient id="gradMark" x1="0" y1="0" x2="100" y2="100">
<stop offset="0%" stop-color="#a78bfa"/>
<stop offset="100%" stop-color="#4c1fe0"/>
</linearGradient>
</defs>
</svg>
<span class="brand-name">Le Twitch Game</span>
</div>
<nav>
<a href="#historique">Gagnants</a>
<a href="#comptes">Comptes</a>
</nav>
</header>
<section class="hero">
<div>
<div class="eyebrow"><span class="dot"></span> Tirage au sort hebdomadaire</div>
<h1 class="display">Chaque semaine,<br>un follower<br><span class="accent">devient gagnant</span></h1>
<p>Un membre de la communauté est tiré au sort chaque semaine parmi les abonnés X, YouTube, TikTok et Instagram de Le Twitch Game. Retrouve ici tous les gagnants, semaine après semaine.</p>
<div class="hero-ctas">
<a href="#historique" class="btn btn-primary">Voir les gagnants</a>
<a href="#comptes" class="btn btn-ghost">Comment participer</a>
</div>
</div>
<div class="gem-stage">
<div class="gem-glow"></div>
<svg class="gem-svg" viewBox="0 0 400 360" fill="none">
<defs>
<linearGradient id="heroGem" x1="0" y1="0" x2="400" y2="360">
<stop offset="0%" stop-color="#c4b5fd"/>
<stop offset="45%" stop-color="#8b5cf6"/>
<stop offset="100%" stop-color="#3b0fb8"/>
</linearGradient>
</defs>
<path d="M200 350 L40 175 C10 140 18 80 65 60 C115 38 165 55 200 100 C235 55 285 38 335 60 C382 80 390 140 360 175 Z"
fill="url(#heroGem)" stroke="#ffffff" stroke-width="2" opacity="0.95"/>
<path d="M65 60 L120 175 L40 175 Z" fill="#ffffff" opacity="0.16"/>
<path d="M65 60 L150 130 L120 175 Z" fill="#ffffff" opacity="0.30"/>
<path d="M65 60 L150 130 L195 95 Z" fill="#ffffff" opacity="0.06"/>
<path d="M195 95 L150 130 L200 175 Z" fill="#ffffff" opacity="0.12"/>
<path d="M120 175 L150 130 L200 175 Z" fill="#ffffff" opacity="0.04"/>
<path d="M65 60 L100 40 L150 130 Z" fill="#ffffff" opacity="0.10"/>
<path d="M335 60 L280 175 L360 175 Z" fill="#ffffff" opacity="0.08"/>
<path d="M335 60 L250 130 L280 175 Z" fill="#ffffff" opacity="0.05"/>
<path d="M335 60 L250 130 L205 95 Z" fill="#ffffff" opacity="0.20"/>
<path d="M205 95 L250 130 L200 175 Z" fill="#ffffff" opacity="0.07"/>
<path d="M280 175 L250 130 L200 175 Z" fill="#ffffff" opacity="0.03"/>
<path d="M335 60 L300 40 L250 130 Z" fill="#ffffff" opacity="0.14"/>
<path d="M120 175 L200 175 L200 350 Z" fill="#ffffff" opacity="0.05"/>
<path d="M200 175 L280 175 L200 350 Z" fill="#ffffff" opacity="0.10"/>
<path d="M40 175 L120 175 L200 350 Z" fill="#ffffff" opacity="0.02"/>
<path d="M360 175 L280 175 L200 350 Z" fill="#000000" opacity="0.10"/>
<path d="M65 60 L100 40 L195 95 M335 60 L300 40 L205 95" stroke="#ffffff" stroke-width="1" opacity="0.35"/>
<path d="M40 175 L360 175" stroke="#ffffff" stroke-width="1" opacity="0.25"/>
<path d="M120 175 L200 350 M280 175 L200 350" stroke="#ffffff" stroke-width="1" opacity="0.2"/>
<g opacity="0.95">
<path d="M100 95 L106 113 L124 119 L106 125 L100 143 L94 125 L76 119 L94 113 Z" fill="#ffffff"/>
</g>
<g opacity="0.75">
<path d="M298 90 L302 102 L314 106 L302 110 L298 122 L294 110 L282 106 L294 102 Z" fill="#ffffff"/>
</g>
<circle cx="200" cy="305" r="3" fill="#fff" opacity="0.8"/>
</svg>
</div>
</section>
<div class="panel">
<div class="spotlight-card" id="spotlightCard">
<!-- filled by JS -->
</div>
</div>
<section class="block" id="historique">
<div class="section-head">
<span class="section-tag">Archive</span>
<h2 class="display">Tous les gagnants</h2>
<p class="desc">L'historique complet des tirages, semaine par semaine. Clique sur un profil pour aller féliciter le gagnant.</p>
</div>
<div class="filter-row" id="filterRow">
<div class="filter-pill active" data-filter="all">Toutes les plateformes</div>
<div class="filter-pill" data-filter="x">X</div>
<div class="filter-pill" data-filter="youtube">YouTube</div>
<div class="filter-pill" data-filter="tiktok">TikTok</div>
<div class="filter-pill" data-filter="instagram">Instagram</div>
</div>
<div class="history-list" id="historyList"></div>
</section>
<section class="block" id="comptes">
<div class="section-head">
<span class="section-tag">Participer</span>
<h2 class="display">Les comptes éligibles</h2>
<p class="desc">Suis ces comptes pour faire partie des prochains tirages. Un nouveau gagnant est annoncé chaque semaine.</p>
</div>
<div class="accounts-grid">
<a href="https://x.com/LeTwitchGame" target="_blank" rel="noopener" class="account-card">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:26px;height:26px;color:#fff;margin-bottom:10px;"><path d="M18.9 2H22l-7.6 8.7L23 22h-6.6l-5.2-6.8L5 22H1.9l8.1-9.3L1 2h6.7l4.7 6.2L18.9 2zm-2.3 18h1.8L7.5 4H5.6l11 16z"/></svg>
<div style="color:#fff; font-weight:700; font-size:14px;">X</div>
<div style="color:var(--ice); opacity:0.55; font-size:12px; margin-top:4px;">@LeTwitchGame</div>
</a>
<a href="https://www.youtube.com/@LeTwitchGame" target="_blank" rel="noopener" class="account-card">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:26px;height:26px;color:#ff5b53;margin-bottom:10px;"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.3 3.6z"/></svg>
<div style="color:#fff; font-weight:700; font-size:14px;">YouTube</div>
<div style="color:var(--ice); opacity:0.55; font-size:12px; margin-top:4px;">@LeTwitchGame</div>
</a>
<a href="https://www.tiktok.com/@letwitchgame_" target="_blank" rel="noopener" class="account-card">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:26px;height:26px;color:#fff;margin-bottom:10px;"><path d="M16.6 5.8a4.3 4.3 0 0 1-3-3.8h-3.1v13.4a2.6 2.6 0 1 1-1.8-2.5V9.5a5.8 5.8 0 1 0 5 5.7v-6a7.2 7.2 0 0 0 4.2 1.4V7.5a4.3 4.3 0 0 1-1.3-1.7z"/></svg>
<div style="color:#fff; font-weight:700; font-size:14px;">TikTok</div>
<div style="color:var(--ice); opacity:0.55; font-size:12px; margin-top:4px;">@letwitchgame_</div>
</a>
<a href="https://www.instagram.com/letwitchgame_/" target="_blank" rel="noopener" class="account-card">
<svg viewBox="0 0 24 24" fill="currentColor" style="width:26px;height:26px;color:#f56fa1;margin-bottom:10px;"><path d="M12 2.2c3.2 0 3.6 0 4.8.06 1.2.06 2 .25 2.7.53.7.27 1.3.65 1.9 1.25.6.6.98 1.2 1.25 1.9.28.7.47 1.5.53 2.7.06 1.2.06 1.6.06 4.8s0 3.6-.06 4.8c-.06 1.2-.25 2-.53 2.7a5 5 0 0 1-1.25 1.9 5 5 0 0 1-1.9 1.25c-.7.28-1.5.47-2.7.53-1.2.06-1.6.06-4.8.06s-3.6 0-4.8-.06c-1.2-.06-2-.25-2.7-.53a5 5 0 0 1-1.9-1.25 5 5 0 0 1-1.25-1.9c-.28-.7-.47-1.5-.53-2.7C2.2 15.6 2.2 15.2 2.2 12s0-3.6.06-4.8c.06-1.2.25-2 .53-2.7.27-.7.65-1.3 1.25-1.9a5 5 0 0 1 1.9-1.25c.7-.28 1.5-.47 2.7-.53C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.5 0-4.7.06-1 .05-1.6.22-2 .37-.5.2-.85.43-1.22.8-.37.37-.6.72-.8 1.22-.15.4-.32 1-.37 2C2.85 9.5 2.85 9.85 2.85 13s0 3.5.06 4.7c.05 1 .22 1.6.37 2 .2.5.43.85.8 1.22.37.37.72.6 1.22.8.4.15 1 .32 2 .37 1.2.06 1.55.06 4.7.06s3.5 0 4.7-.06c1-.05 1.6-.22 2-.37.5-.2.85-.43 1.22-.8.37-.37.6-.72.8-1.22.15-.4.32-1 .37-2 .06-1.2.06-1.55.06-4.7s0-3.5-.06-4.7c-.05-1-.22-1.6-.37-2-.2-.5-.43-.85-.8-1.22a3.2 3.2 0 0 0-1.22-.8c-.4-.15-1-.32-2-.37-1.2-.06-1.55-.06-4.7-.06zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm5.7-2.9a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z"/></svg>
<div style="color:#fff; font-weight:700; font-size:14px;">Instagram</div>
<div style="color:var(--ice); opacity:0.55; font-size:12px; margin-top:4px;">@letwitchgame_</div>
</a>
</div>
</section>
<footer>
<div class="foot-left">
<svg width="18" height="18" viewBox="0 0 100 100" fill="none">
<path d="M50 88 L12 45 C2 33 5 14 22 8 C35 3 46 9 50 22 C54 9 65 3 78 8 C95 14 98 33 88 45 Z" fill="url(#gradMark)" opacity="0.9"/>
</svg>
Le Twitch Game — Tirage au sort hebdomadaire
</div>
<div class="foot-links">
<a href="https://x.com/LeTwitchGame" target="_blank" rel="noopener">X</a>
<a href="https://www.youtube.com/@LeTwitchGame" target="_blank" rel="noopener">YouTube</a>
<a href="https://www.tiktok.com/@letwitchgame_" target="_blank" rel="noopener">TikTok</a>
<a href="https://www.instagram.com/letwitchgame_/" target="_blank" rel="noopener">Instagram</a>
</div>
</footer>
<script>
/* ======================================================================
LISTE DES GAGNANTS — À METTRE À JOUR CHAQUE SEMAINE
----------------------------------------------------------------------
Ajoute une nouvelle entrée en haut du tableau WINNERS ci-dessous
pour chaque tirage. Champs à remplir :
- winnerName : pseudo affiché du gagnant (sans le @)
- platform : "x" | "youtube" | "tiktok" | "instagram"
- profileUrl : lien direct vers le profil du gagnant
- weekStart : date de début de semaine, format "AAAA-MM-JJ"
- weekEnd : date de fin de semaine, format "AAAA-MM-JJ"
L'entrée la plus récente (date la plus haute) s'affiche automatiquement
en haut de l'historique et dans le bandeau "Gagnant de la semaine".
====================================================================== */
const WINNERS = [
{
winnerName: "pseudo_gagnant",
platform: "x",
profileUrl: "https://x.com/pseudo_gagnant",
weekStart: "2026-06-08",
weekEnd: "2026-06-14"
},
{
winnerName: "autre_gagnant",
platform: "instagram",
profileUrl: "https://www.instagram.com/autre_gagnant/",
weekStart: "2026-06-01",
weekEnd: "2026-06-07"
}
];
/* ====================================================================== */
/* ---------------- Sparkles ---------------- */
(function(){
const layer = document.getElementById('sparkleLayer');
const n = 26;
for(let i=0;i<n;i++){
const s = document.createElement('div');
s.className = 'sparkle';
s.style.left = Math.random()*100 + '%';
s.style.top = Math.random()*100 + '%';
s.style.animationDelay = (Math.random()*3.5) + 's';
s.style.animationDuration = (2.5 + Math.random()*3) + 's';
layer.appendChild(s);
}
})();
/* ---------------- Platform config ---------------- */
const PLATFORM_CONFIG = {
x: { label: 'X', badgeClass: 'badge-x', icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-7.6 8.7L23 22h-6.6l-5.2-6.8L5 22H1.9l8.1-9.3L1 2h6.7l4.7 6.2L18.9 2zm-2.3 18h1.8L7.5 4H5.6l11 16z"/></svg>' },
youtube: { label: 'YouTube', badgeClass: 'badge-youtube', icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.6 15.6V8.4l6.3 3.6z"/></svg>' },
tiktok: { label: 'TikTok', badgeClass: 'badge-tiktok', icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16.6 5.8a4.3 4.3 0 0 1-3-3.8h-3.1v13.4a2.6 2.6 0 1 1-1.8-2.5V9.5a5.8 5.8 0 1 0 5 5.7v-6a7.2 7.2 0 0 0 4.2 1.4V7.5a4.3 4.3 0 0 1-1.3-1.7z"/></svg>' },
instagram: { label: 'Instagram', badgeClass: 'badge-instagram', icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.2c3.2 0 3.6 0 4.8.06 1.2.06 2 .25 2.7.53.7.27 1.3.65 1.9 1.25.6.6.98 1.2 1.25 1.9.28.7.47 1.5.53 2.7.06 1.2.06 1.6.06 4.8s0 3.6-.06 4.8c-.06 1.2-.25 2-.53 2.7a5 5 0 0 1-1.25 1.9 5 5 0 0 1-1.9 1.25c-.7.28-1.5.47-2.7.53-1.2.06-1.6.06-4.8.06s-3.6 0-4.8-.06c-1.2-.06-2-.25-2.7-.53a5 5 0 0 1-1.9-1.25 5 5 0 0 1-1.25-1.9c-.28-.7-.47-1.5-.53-2.7C2.2 15.6 2.2 15.2 2.2 12s0-3.6.06-4.8c.06-1.2.25-2 .53-2.7.27-.7.65-1.3 1.25-1.9a5 5 0 0 1 1.9-1.25c.7-.28 1.5-.47 2.7-.53C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.5 0-4.7.06-1 .05-1.6.22-2 .37-.5.2-.85.43-1.22.8-.37.37-.6.72-.8 1.22-.15.4-.32 1-.37 2C2.85 9.5 2.85 9.85 2.85 13s0 3.5.06 4.7c.05 1 .22 1.6.37 2 .2.5.43.85.8 1.22.37.37.72.6 1.22.8.4.15 1 .32 2 .37 1.2.06 1.55.06 4.7.06s3.5 0 4.7-.06c1-.05 1.6-.22 2-.37.5-.2.85-.43 1.22-.8.37-.37.6-.72.8-1.22.15-.4.32-1 .37-2 .06-1.2.06-1.55.06-4.7s0-3.5-.06-4.7c-.05-1-.22-1.6-.37-2-.2-.5-.43-.85-.8-1.22a3.2 3.2 0 0 0-1.22-.8c-.4-.15-1-.32-2-.37-1.2-.06-1.55-.06-4.7-.06zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 1.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4zm5.7-2.9a1.2 1.2 0 1 1-2.4 0 1.2 1.2 0 0 1 2.4 0z"/></svg>' }
};
const GEM_PATH = `<path d="M200 350 L40 175 C10 140 18 80 65 60 C115 38 165 55 200 100 C235 55 285 38 335 60 C382 80 390 140 360 175 Z"
fill="url(#heroGem)" stroke="#ffffff" stroke-width="2" opacity="0.95"/>`;
function formatDateFR(dateStr){
if(!dateStr) return '';
const d = new Date(dateStr + 'T00:00:00');
return d.toLocaleDateString('fr-FR', { day:'numeric', month:'long', year:'numeric' });
}
function escapeHtml(str){
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
function weekLabelOf(entry){
return entry.weekStart && entry.weekEnd
? `Semaine du ${formatDateFR(entry.weekStart)} au ${formatDateFR(entry.weekEnd)}`
: 'Période non précisée';
}
/* ---------------- Sort newest first ---------------- */
const sortedWinners = [...WINNERS].sort((a,b) => new Date(b.weekStart) - new Date(a.weekStart));
/* ---------------- Spotlight (latest winner) ---------------- */
function renderSpotlight(){
const card = document.getElementById('spotlightCard');
if(!sortedWinners.length){
card.innerHTML = '<div class="empty-state">Aucun gagnant enregistré pour le moment. Le premier tirage arrive bientôt.</div>';
return;
}
const latest = sortedWinners[0];
const cfg = PLATFORM_CONFIG[latest.platform] || PLATFORM_CONFIG.x;
card.innerHTML = `
<svg class="spotlight-gem" viewBox="0 0 400 360" fill="none">${GEM_PATH}</svg>
<div>
<div class="spotlight-label">Gagnant de la semaine</div>
<div class="spotlight-name display">${escapeHtml(latest.winnerName)}</div>
<div class="spotlight-meta">${weekLabelOf(latest)} · Tiré au sort sur ${cfg.label}</div>
</div>
<div class="spotlight-actions">
<span class="platform-badge ${cfg.badgeClass}">${cfg.icon} ${cfg.label}</span>
<a class="profile-link" href="${latest.profileUrl}" target="_blank" rel="noopener">
Voir le profil
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
</a>
</div>
`;
}
/* ---------------- History list with filter ---------------- */
let activeFilter = 'all';
function renderHistory(){
const list = document.getElementById('historyList');
const filtered = activeFilter === 'all'
? sortedWinners
: sortedWinners.filter(w => w.platform === activeFilter);
if(!filtered.length){
list.innerHTML = '<div class="empty-state">Aucun gagnant pour cette plateforme pour le moment.</div>';
return;
}
list.innerHTML = filtered.map(entry => {
const cfg = PLATFORM_CONFIG[entry.platform] || PLATFORM_CONFIG.x;
return `
<div class="history-row">
<svg class="gem-bullet" viewBox="0 0 400 360" fill="none">${GEM_PATH}</svg>
<div class="history-main">
<div class="winner-row-name">${escapeHtml(entry.winnerName)}</div>
<div class="week-range">${weekLabelOf(entry)}</div>
</div>
<span class="platform-badge ${cfg.badgeClass}">${cfg.icon} ${cfg.label}</span>
<a class="profile-link" href="${entry.profileUrl}" target="_blank" rel="noopener">
Voir le profil
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
</a>
</div>
`;
}).join('');
}
document.querySelectorAll('.filter-pill').forEach(pill => {
pill.addEventListener('click', () => {
document.querySelectorAll('.filter-pill').forEach(p => p.classList.remove('active'));
pill.classList.add('active');
activeFilter = pill.dataset.filter;
renderHistory();
});
});
/* ---------------- Init ---------------- */
renderSpotlight();
renderHistory();
</script>
</body>
</html>