This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
<!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>