Ronny Mueller
1273 lines
38 KiB
HTML
1273 lines
38 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
|
||
<title>WM 2026 Tippspiel – Home v2</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
||
<style>
|
||
/* ── Design Tokens: "The Stadium Elite" ─────────────────── */
|
||
:root {
|
||
--bg: #0A0E1A;
|
||
--surface-low: #0F1524;
|
||
--surface-mid: #151D30;
|
||
--surface-high: #1C2640;
|
||
--surface-top: #232E4A;
|
||
|
||
--primary: #4BB7F8;
|
||
--primary-dim: #39A9EA;
|
||
--primary-glow: rgba(75,183,248,0.18);
|
||
--primary-aura: rgba(75,183,248,0.08);
|
||
|
||
--gold: #FEAE32;
|
||
--gold-dim: #E09820;
|
||
--gold-glow: rgba(254,174,50,0.20);
|
||
--gold-aura: rgba(254,174,50,0.08);
|
||
|
||
--cyan: #69DAFF;
|
||
--green: #00E676;
|
||
--red: #FF3D5A;
|
||
|
||
--text-1: #F0F6FF;
|
||
--text-2: #8A9BBF;
|
||
--text-3: #4A5A7A;
|
||
|
||
--font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
|
||
--font-body: 'Inter', system-ui, sans-serif;
|
||
|
||
--radius-sm: 12px;
|
||
--radius-md: 18px;
|
||
--radius-lg: 24px;
|
||
--radius-xl: 32px;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
|
||
|
||
html, body {
|
||
background: #050810;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
padding: 32px 16px 48px;
|
||
}
|
||
|
||
/* ── Phone Shell ────────────────────────────────────────── */
|
||
.phone {
|
||
width: 393px;
|
||
min-height: 852px;
|
||
background: var(--bg);
|
||
border-radius: 52px;
|
||
border: 8px solid #161B2E;
|
||
box-shadow:
|
||
0 0 0 1px rgba(75,183,248,0.08),
|
||
0 48px 120px rgba(0,0,0,0.85),
|
||
inset 0 1px 0 rgba(255,255,255,0.05);
|
||
overflow: hidden;
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.phone::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 12px; left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 110px; height: 32px;
|
||
background: #0D1020;
|
||
border-radius: 16px;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* ── Status Bar ─────────────────────────────────────────── */
|
||
.status-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 50px 28px 10px;
|
||
font-family: var(--font-body);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--text-2);
|
||
}
|
||
|
||
/* ── Top Bar ────────────────────────────────────────────── */
|
||
.top-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 4px 20px 16px;
|
||
}
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.brand-logo {
|
||
width: 34px; height: 34px;
|
||
background: linear-gradient(135deg, var(--primary), #2a6fa8);
|
||
border-radius: 10px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
box-shadow: 0 4px 12px var(--primary-glow), inset 0 1px 0 rgba(255,255,255,0.2);
|
||
}
|
||
.brand-text {
|
||
font-family: var(--font-display);
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: var(--text-1);
|
||
letter-spacing: -0.3px;
|
||
}
|
||
.brand-text span { color: var(--primary); }
|
||
.notif-btn {
|
||
width: 38px; height: 38px;
|
||
background: var(--surface-mid);
|
||
border-radius: 12px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 16px;
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
|
||
cursor: pointer;
|
||
position: relative;
|
||
}
|
||
.notif-dot {
|
||
position: absolute;
|
||
top: 7px; right: 7px;
|
||
width: 7px; height: 7px;
|
||
background: var(--gold);
|
||
border-radius: 50%;
|
||
border: 1.5px solid var(--bg);
|
||
}
|
||
|
||
/* ── Scrollable Body ────────────────────────────────────── */
|
||
.scroll-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
padding-bottom: 90px;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.scroll-body::-webkit-scrollbar { display: none; }
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
HERO: Countdown Card
|
||
═══════════════════════════════════════════════════════════ */
|
||
.hero-countdown {
|
||
margin: 0 16px 20px;
|
||
background: linear-gradient(145deg, #1A2540 0%, #0F1828 60%, #0A1220 100%);
|
||
border-radius: var(--radius-xl);
|
||
padding: 22px 22px 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* Luminous shadow – primary tint, not black */
|
||
box-shadow:
|
||
0 10px 32px rgba(0,0,0,0.4),
|
||
0 2px 8px rgba(75,183,248,0.08),
|
||
inset 0 1px 0 rgba(75,183,248,0.12);
|
||
}
|
||
/* Glossy top-left edge highlight */
|
||
.hero-countdown::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
border-radius: var(--radius-xl);
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
/* Gold gradient top stripe */
|
||
.hero-countdown::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--gold), var(--primary), transparent);
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
}
|
||
.hero-eyebrow {
|
||
font-family: var(--font-body);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: var(--gold);
|
||
text-transform: uppercase;
|
||
letter-spacing: 2px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.hero-title {
|
||
font-family: var(--font-display);
|
||
font-size: 28px;
|
||
font-weight: 900;
|
||
color: var(--text-1);
|
||
line-height: 1.05;
|
||
letter-spacing: -1px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.hero-title-gold {
|
||
font-family: var(--font-display);
|
||
font-size: 28px;
|
||
font-weight: 900;
|
||
color: var(--gold);
|
||
line-height: 1.05;
|
||
letter-spacing: -1px;
|
||
margin-bottom: 18px;
|
||
}
|
||
/* Trophy ghost */
|
||
.hero-trophy {
|
||
position: absolute;
|
||
right: 18px; top: 14px;
|
||
font-size: 64px;
|
||
opacity: 0.12;
|
||
transform: rotate(8deg);
|
||
filter: sepia(1) saturate(3) hue-rotate(10deg);
|
||
pointer-events: none;
|
||
}
|
||
/* Countdown tiles */
|
||
.countdown-tiles {
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: flex-start;
|
||
}
|
||
.cd-tile {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.cd-val {
|
||
min-width: 54px;
|
||
padding: 10px 8px;
|
||
background: rgba(0,0,0,0.35);
|
||
border-radius: var(--radius-sm);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255,255,255,0.08),
|
||
inset 0 -1px 0 rgba(0,0,0,0.3);
|
||
font-family: var(--font-display);
|
||
font-size: 26px;
|
||
font-weight: 900;
|
||
color: var(--text-1);
|
||
text-align: center;
|
||
letter-spacing: -1px;
|
||
line-height: 1;
|
||
}
|
||
.cd-label {
|
||
font-family: var(--font-body);
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
.cd-sep {
|
||
font-family: var(--font-display);
|
||
font-size: 22px;
|
||
font-weight: 900;
|
||
color: var(--text-3);
|
||
padding-top: 8px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
STATS ROW – 4 Glossy Tiles
|
||
═══════════════════════════════════════════════════════════ */
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 10px;
|
||
margin: 0 16px 20px;
|
||
}
|
||
.stat-tile {
|
||
background: var(--surface-mid);
|
||
border-radius: var(--radius-md);
|
||
padding: 16px 14px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 10px 25px rgba(0,0,0,0.25),
|
||
inset 0 1px 0 rgba(255,255,255,0.07),
|
||
inset 1px 0 0 rgba(255,255,255,0.04);
|
||
cursor: default;
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
}
|
||
.stat-tile:active { transform: scale(0.97); }
|
||
/* Glossy sheen */
|
||
.stat-tile::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 50%;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
|
||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||
pointer-events: none;
|
||
}
|
||
.stat-tile.primary-glow {
|
||
box-shadow:
|
||
0 10px 25px rgba(0,0,0,0.25),
|
||
0 0 0 1px rgba(75,183,248,0.12),
|
||
inset 0 1px 0 rgba(75,183,248,0.15),
|
||
0 4px 20px rgba(75,183,248,0.08);
|
||
}
|
||
.stat-tile.gold-glow {
|
||
box-shadow:
|
||
0 10px 25px rgba(0,0,0,0.25),
|
||
0 0 0 1px rgba(254,174,50,0.12),
|
||
inset 0 1px 0 rgba(254,174,50,0.15),
|
||
0 4px 20px rgba(254,174,50,0.08);
|
||
}
|
||
.stat-label {
|
||
font-family: var(--font-body);
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
margin-bottom: 6px;
|
||
}
|
||
.stat-val {
|
||
font-family: var(--font-display);
|
||
font-size: 32px;
|
||
font-weight: 900;
|
||
color: var(--text-1);
|
||
line-height: 1;
|
||
letter-spacing: -1px;
|
||
}
|
||
.stat-val.blue { color: var(--primary); }
|
||
.stat-val.gold { color: var(--gold); }
|
||
.stat-val.green { color: var(--green); }
|
||
.stat-sub {
|
||
font-family: var(--font-body);
|
||
font-size: 10px;
|
||
color: var(--text-3);
|
||
margin-top: 4px;
|
||
}
|
||
.stat-icon {
|
||
position: absolute;
|
||
right: 12px; top: 12px;
|
||
font-size: 20px;
|
||
opacity: 0.25;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
SECTION HEADER
|
||
═══════════════════════════════════════════════════════════ */
|
||
.sec-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px 12px;
|
||
}
|
||
.sec-title {
|
||
font-family: var(--font-display);
|
||
font-size: 16px;
|
||
font-weight: 800;
|
||
color: var(--text-1);
|
||
letter-spacing: -0.3px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.sec-title::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 3px; height: 16px;
|
||
background: var(--primary);
|
||
border-radius: 2px;
|
||
box-shadow: 0 0 8px var(--primary-glow);
|
||
}
|
||
.sec-link {
|
||
font-family: var(--font-body);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
cursor: pointer;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
UPCOMING MATCH CARDS – horizontal scroll
|
||
═══════════════════════════════════════════════════════════ */
|
||
.match-scroll {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 0 16px 4px;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
margin-bottom: 24px;
|
||
}
|
||
.match-scroll::-webkit-scrollbar { display: none; }
|
||
|
||
.match-card {
|
||
flex-shrink: 0;
|
||
width: 260px;
|
||
background: var(--surface-mid);
|
||
border-radius: var(--radius-lg);
|
||
padding: 16px;
|
||
scroll-snap-align: start;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 10px 25px rgba(0,0,0,0.3),
|
||
inset 0 1px 0 rgba(255,255,255,0.07);
|
||
transition: transform 0.15s, box-shadow 0.15s;
|
||
}
|
||
.match-card:active { transform: scale(0.97); }
|
||
/* Glossy top sheen */
|
||
.match-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0;
|
||
height: 45%;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
|
||
pointer-events: none;
|
||
}
|
||
.match-card.has-tip {
|
||
box-shadow:
|
||
0 10px 25px rgba(0,0,0,0.3),
|
||
0 0 0 1px rgba(75,183,248,0.2),
|
||
inset 0 1px 0 rgba(75,183,248,0.15),
|
||
0 4px 24px rgba(75,183,248,0.10);
|
||
}
|
||
.mc-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 14px;
|
||
}
|
||
.mc-group {
|
||
font-family: var(--font-body);
|
||
font-size: 9px;
|
||
font-weight: 700;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.2px;
|
||
}
|
||
.mc-live-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
background: var(--red);
|
||
color: white;
|
||
font-family: var(--font-body);
|
||
font-size: 8px;
|
||
font-weight: 800;
|
||
padding: 2px 7px;
|
||
border-radius: 20px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
box-shadow: 0 2px 8px rgba(255,61,90,0.4);
|
||
}
|
||
.mc-live-badge::before {
|
||
content:''; width:5px; height:5px;
|
||
background: white; border-radius:50%;
|
||
animation: blink 1s infinite;
|
||
}
|
||
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.2} }
|
||
|
||
.mc-teams {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 14px;
|
||
}
|
||
.mc-team {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex: 1;
|
||
}
|
||
/* Flag container — glossy square */
|
||
.flag-box {
|
||
width: 52px; height: 52px;
|
||
background: var(--surface-high);
|
||
border-radius: 14px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 30px;
|
||
box-shadow:
|
||
0 4px 12px rgba(0,0,0,0.3),
|
||
inset 0 1px 0 rgba(255,255,255,0.10),
|
||
inset 0 -1px 0 rgba(0,0,0,0.2);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.flag-box::before {
|
||
content:'';
|
||
position:absolute;
|
||
top:0;left:0;right:0;height:40%;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent);
|
||
border-radius: 14px 14px 0 0;
|
||
pointer-events:none;
|
||
}
|
||
.mc-team .tname {
|
||
font-family: var(--font-body);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
color: var(--text-2);
|
||
text-align: center;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.mc-vs {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
.mc-vs-circle {
|
||
width: 28px; height: 28px;
|
||
background: var(--surface-high);
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: var(--font-body);
|
||
font-size: 9px;
|
||
font-weight: 800;
|
||
color: var(--text-3);
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
|
||
}
|
||
.mc-vs-date {
|
||
font-family: var(--font-body);
|
||
font-size: 9px;
|
||
color: var(--text-3);
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
/* CTA Button on card */
|
||
.mc-cta {
|
||
width: 100%;
|
||
padding: 10px;
|
||
border: none;
|
||
border-radius: 12px;
|
||
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dim) 100%);
|
||
color: white;
|
||
font-family: var(--font-display);
|
||
font-size: 12px;
|
||
font-weight: 800;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.8px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 4px 14px rgba(75,183,248,0.35),
|
||
inset 0 1px 0 rgba(255,255,255,0.25);
|
||
transition: all 0.15s;
|
||
}
|
||
.mc-cta::before {
|
||
content:'';
|
||
position:absolute;
|
||
top:0;left:0;right:0;height:50%;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent);
|
||
pointer-events:none;
|
||
}
|
||
.mc-cta:active { transform: scale(0.97); box-shadow: 0 2px 8px rgba(75,183,248,0.25); }
|
||
.mc-cta.tipped {
|
||
background: linear-gradient(135deg, var(--surface-high) 0%, var(--surface-mid) 100%);
|
||
color: var(--primary);
|
||
box-shadow: 0 0 0 1px rgba(75,183,248,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
|
||
}
|
||
.mc-tip-label {
|
||
font-family: var(--font-body);
|
||
font-size: 9px;
|
||
color: var(--primary);
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-top: 6px;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
LETZTE AUSWERTUNGEN – horizontal results
|
||
═══════════════════════════════════════════════════════════ */
|
||
.results-scroll {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 0 16px 4px;
|
||
overflow-x: auto;
|
||
margin-bottom: 24px;
|
||
}
|
||
.results-scroll::-webkit-scrollbar { display: none; }
|
||
|
||
.result-card {
|
||
flex-shrink: 0;
|
||
width: 128px;
|
||
background: var(--surface-mid);
|
||
border-radius: var(--radius-md);
|
||
padding: 12px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 8px 20px rgba(0,0,0,0.25),
|
||
inset 0 1px 0 rgba(255,255,255,0.06);
|
||
}
|
||
.result-card::before {
|
||
content:'';
|
||
position:absolute;
|
||
top:0;left:0;right:0;height:3px;
|
||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||
}
|
||
.result-card.correct::before { background: var(--green); box-shadow: 0 0 8px rgba(0,230,118,0.5); }
|
||
.result-card.tendency::before { background: var(--primary); box-shadow: 0 0 8px rgba(75,183,248,0.5); }
|
||
.result-card.wrong::before { background: var(--red); box-shadow: 0 0 8px rgba(255,61,90,0.5); }
|
||
.result-card.correct { box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,230,118,0.1), inset 0 1px 0 rgba(0,230,118,0.1); }
|
||
.result-card.tendency { box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(75,183,248,0.1), inset 0 1px 0 rgba(75,183,248,0.1); }
|
||
.result-card.wrong { box-shadow: 0 8px 20px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,61,90,0.1), inset 0 1px 0 rgba(255,61,90,0.08); }
|
||
|
||
.rc-flags { font-size: 20px; margin-bottom: 6px; letter-spacing: 2px; }
|
||
.rc-teams { font-family: var(--font-body); font-size: 9px; color: var(--text-3); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
|
||
.rc-scores {
|
||
display: flex; align-items: center; gap: 4px; margin-bottom: 8px;
|
||
}
|
||
.rc-tip { font-family: var(--font-display); font-size: 15px; font-weight: 900; color: var(--text-2); }
|
||
.rc-arrow { font-size: 10px; color: var(--text-3); }
|
||
.rc-res { font-family: var(--font-display); font-size: 15px; font-weight: 900; color: var(--text-1); }
|
||
.rc-pts {
|
||
font-family: var(--font-body);
|
||
font-size: 10px; font-weight: 800;
|
||
padding: 3px 8px; border-radius: 8px; display: inline-block;
|
||
}
|
||
.correct .rc-pts { background: rgba(0,230,118,0.12); color: var(--green); }
|
||
.tendency .rc-pts { background: rgba(75,183,248,0.12); color: var(--primary); }
|
||
.wrong .rc-pts { background: rgba(255,61,90,0.10); color: var(--red); }
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
OFFICE TOP 3 – Podium style (like Stitch leaderboard)
|
||
═══════════════════════════════════════════════════════════ */
|
||
.top3-podium {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
margin: 0 16px 16px;
|
||
padding: 20px 12px 12px;
|
||
background: var(--surface-low);
|
||
border-radius: var(--radius-xl);
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 8px 24px rgba(0,0,0,0.3),
|
||
inset 0 1px 0 rgba(255,255,255,0.05);
|
||
}
|
||
.top3-podium::before {
|
||
content:'';
|
||
position:absolute;
|
||
top:0;left:0;right:0;height:3px;
|
||
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
||
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
||
}
|
||
.podium-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6px;
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
.podium-item.first {
|
||
margin-bottom: 10px;
|
||
}
|
||
.podium-avatar {
|
||
width: 44px; height: 44px;
|
||
border-radius: 50%;
|
||
background: var(--surface-high);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: var(--font-display);
|
||
font-size: 14px; font-weight: 900;
|
||
color: var(--text-2);
|
||
box-shadow:
|
||
0 4px 12px rgba(0,0,0,0.3),
|
||
inset 0 1px 0 rgba(255,255,255,0.10);
|
||
position: relative;
|
||
}
|
||
.podium-item.first .podium-avatar {
|
||
width: 54px; height: 54px;
|
||
font-size: 17px;
|
||
background: linear-gradient(135deg, #2a2000, #1a1500);
|
||
color: var(--gold);
|
||
box-shadow:
|
||
0 0 0 2px var(--gold),
|
||
0 6px 20px rgba(254,174,50,0.35),
|
||
inset 0 1px 0 rgba(255,255,255,0.12);
|
||
}
|
||
.podium-crown {
|
||
position: absolute;
|
||
top: -16px;
|
||
font-size: 18px;
|
||
filter: drop-shadow(0 2px 4px rgba(254,174,50,0.6));
|
||
}
|
||
.medal-badge {
|
||
position: absolute;
|
||
bottom: -3px; right: -3px;
|
||
width: 18px; height: 18px;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 10px;
|
||
border: 1.5px solid var(--bg);
|
||
}
|
||
.medal-badge.gold { background: var(--gold); }
|
||
.medal-badge.silver { background: #9BA4B4; }
|
||
.medal-badge.bronze { background: #CD7F32; }
|
||
.podium-name {
|
||
font-family: var(--font-body);
|
||
font-size: 10px; font-weight: 700;
|
||
color: var(--text-2);
|
||
text-align: center;
|
||
max-width: 80px;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.podium-item.first .podium-name { color: var(--text-1); font-size: 11px; }
|
||
.podium-pts {
|
||
font-family: var(--font-display);
|
||
font-size: 13px; font-weight: 900;
|
||
color: var(--text-3);
|
||
}
|
||
.podium-item.first .podium-pts { color: var(--gold); font-size: 15px; }
|
||
|
||
/* ─── Leaderboard List ──────────────────────────────────── */
|
||
.rank-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin: 0 16px 16px;
|
||
}
|
||
.rank-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
background: var(--surface-mid);
|
||
border-radius: var(--radius-md);
|
||
padding: 12px 14px;
|
||
box-shadow:
|
||
0 4px 12px rgba(0,0,0,0.2),
|
||
inset 0 1px 0 rgba(255,255,255,0.05);
|
||
position: relative;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: transform 0.1s;
|
||
}
|
||
.rank-row:active { transform: scale(0.99); }
|
||
.rank-row.me {
|
||
box-shadow:
|
||
0 4px 12px rgba(0,0,0,0.2),
|
||
0 0 0 1px rgba(75,183,248,0.25),
|
||
inset 0 1px 0 rgba(75,183,248,0.15),
|
||
0 0 20px rgba(75,183,248,0.06);
|
||
}
|
||
/* Glossy sheen on rows */
|
||
.rank-row::before {
|
||
content:'';
|
||
position:absolute;
|
||
top:0;left:0;right:0;height:50%;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent);
|
||
pointer-events:none;
|
||
}
|
||
.rr-num {
|
||
font-family: var(--font-body);
|
||
font-size: 12px; font-weight: 700;
|
||
color: var(--text-3);
|
||
width: 20px; text-align: center;
|
||
}
|
||
.rr-avatar {
|
||
width: 36px; height: 36px;
|
||
border-radius: 50%;
|
||
background: var(--surface-high);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-family: var(--font-display);
|
||
font-size: 12px; font-weight: 800;
|
||
color: var(--text-2);
|
||
flex-shrink: 0;
|
||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
|
||
}
|
||
.rank-row.me .rr-avatar {
|
||
background: linear-gradient(135deg, var(--primary), #2a7ab8);
|
||
color: white;
|
||
box-shadow: 0 2px 8px rgba(75,183,248,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
|
||
}
|
||
.rr-info { flex: 1; }
|
||
.rr-name {
|
||
font-family: var(--font-body);
|
||
font-size: 13px; font-weight: 700;
|
||
color: var(--text-1);
|
||
line-height: 1;
|
||
margin-bottom: 2px;
|
||
}
|
||
.rr-dept {
|
||
font-family: var(--font-body);
|
||
font-size: 10px; color: var(--text-3);
|
||
}
|
||
.me-tag {
|
||
font-size: 9px;
|
||
color: var(--primary);
|
||
font-weight: 700;
|
||
margin-left: 4px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.me-cta {
|
||
font-size: 9px; font-weight: 800;
|
||
color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px;
|
||
display: block;
|
||
margin-top: 1px;
|
||
}
|
||
.rr-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 4px;
|
||
}
|
||
.rr-pts {
|
||
font-family: var(--font-display);
|
||
font-size: 18px; font-weight: 900;
|
||
color: var(--text-1); line-height: 1;
|
||
}
|
||
.rank-row.me .rr-pts { color: var(--primary); }
|
||
.rr-trend {
|
||
font-size: 11px; font-weight: 700;
|
||
}
|
||
.rr-trend.up { color: var(--green); }
|
||
.rr-trend.down { color: var(--red); }
|
||
.rr-trend.eq { color: var(--text-3); }
|
||
|
||
/* ── Bottom Navigation ─────────────────────────────────── */
|
||
.bottom-nav {
|
||
position: absolute;
|
||
bottom: 0; left: 0; right: 0;
|
||
height: 80px;
|
||
background: rgba(10,14,26,0.80);
|
||
backdrop-filter: blur(20px);
|
||
-webkit-backdrop-filter: blur(20px);
|
||
border-top: 1px solid rgba(75,183,248,0.08);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-around;
|
||
padding: 12px 0 0;
|
||
z-index: 50;
|
||
}
|
||
.nav-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
padding: 6px 16px;
|
||
cursor: pointer;
|
||
min-width: 60px;
|
||
position: relative;
|
||
transition: transform 0.1s;
|
||
}
|
||
.nav-item:active { transform: scale(0.92); }
|
||
.nav-icon { font-size: 20px; }
|
||
.nav-label {
|
||
font-family: var(--font-body);
|
||
font-size: 9px; font-weight: 700;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.8px;
|
||
}
|
||
.nav-item.active .nav-label { color: var(--gold); }
|
||
/* Gold dot indicator */
|
||
.nav-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -8px; left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 18px; height: 3px;
|
||
background: var(--gold);
|
||
border-radius: 2px 2px 0 0;
|
||
box-shadow: 0 0 8px var(--gold-glow);
|
||
}
|
||
.nav-badge {
|
||
position: absolute;
|
||
top: 2px; right: 8px;
|
||
background: var(--red);
|
||
color: white;
|
||
font-size: 8px; font-weight: 800;
|
||
width: 15px; height: 15px;
|
||
border-radius: 50%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border: 1.5px solid var(--bg);
|
||
box-shadow: 0 2px 6px rgba(255,61,90,0.4);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="phone">
|
||
|
||
<!-- Status Bar -->
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<span style="letter-spacing:2px">●●●● 5G</span>
|
||
<span>🔋 87%</span>
|
||
</div>
|
||
|
||
<!-- Top Bar -->
|
||
<div class="top-bar">
|
||
<div class="brand">
|
||
<div class="brand-logo">⚽</div>
|
||
<span class="brand-text">WM <span>2026</span> Tippspiel</span>
|
||
</div>
|
||
<div class="notif-btn">
|
||
🔔
|
||
<div class="notif-dot"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Scrollable Content -->
|
||
<div class="scroll-body">
|
||
|
||
<!-- ── HERO: Countdown ─────────────────────────────── -->
|
||
<div class="hero-countdown">
|
||
<div class="hero-trophy">🏆</div>
|
||
<div class="hero-eyebrow">The Countdown Begins</div>
|
||
<div class="hero-title">WM 2026</div>
|
||
<div class="hero-title-gold">WORLD CUP FINALS</div>
|
||
<div class="countdown-tiles">
|
||
<div class="cd-tile">
|
||
<div class="cd-val" id="cd-days">69</div>
|
||
<div class="cd-label">Days</div>
|
||
</div>
|
||
<div class="cd-sep">:</div>
|
||
<div class="cd-tile">
|
||
<div class="cd-val" id="cd-hrs">14</div>
|
||
<div class="cd-label">Hrs</div>
|
||
</div>
|
||
<div class="cd-sep">:</div>
|
||
<div class="cd-tile">
|
||
<div class="cd-val" id="cd-min">08</div>
|
||
<div class="cd-label">Min</div>
|
||
</div>
|
||
<div class="cd-sep">:</div>
|
||
<div class="cd-tile">
|
||
<div class="cd-val" id="cd-sec">33</div>
|
||
<div class="cd-label">Sec</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── STATS GRID ──────────────────────────────────── -->
|
||
<div class="stats-grid">
|
||
<div class="stat-tile primary-glow">
|
||
<div class="stat-icon">⚡</div>
|
||
<div class="stat-label">Points</div>
|
||
<div class="stat-val blue">12</div>
|
||
<div class="stat-sub">+3 letzte Runde</div>
|
||
</div>
|
||
<div class="stat-tile gold-glow">
|
||
<div class="stat-icon">🏆</div>
|
||
<div class="stat-label">Global Rank</div>
|
||
<div class="stat-val gold">#7</div>
|
||
<div class="stat-sub">Top 15% Overall</div>
|
||
</div>
|
||
<div class="stat-tile">
|
||
<div class="stat-icon">🎯</div>
|
||
<div class="stat-label">Exact Hits</div>
|
||
<div class="stat-val green">4</div>
|
||
<div class="stat-sub">Perfect Predictions</div>
|
||
</div>
|
||
<div class="stat-tile">
|
||
<div class="stat-icon">📋</div>
|
||
<div class="stat-label">Total Tips</div>
|
||
<div class="stat-val">18</div>
|
||
<div class="stat-sub">von 104 Spielen</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── UPCOMING MATCHES ────────────────────────────── -->
|
||
<div class="sec-header">
|
||
<span class="sec-title">Upcoming Matches</span>
|
||
<span class="sec-link">View All →</span>
|
||
</div>
|
||
<div class="match-scroll">
|
||
|
||
<!-- Match Card 1: offen -->
|
||
<div class="match-card">
|
||
<div class="mc-top">
|
||
<span class="mc-group">Gruppe B · Match 15</span>
|
||
</div>
|
||
<div class="mc-teams">
|
||
<div class="mc-team">
|
||
<div class="flag-box">🇩🇪</div>
|
||
<span class="tname">Germany</span>
|
||
</div>
|
||
<div class="mc-vs">
|
||
<div class="mc-vs-circle">VS</div>
|
||
<div class="mc-vs-date">14. Jun<br/>21:00</div>
|
||
</div>
|
||
<div class="mc-team">
|
||
<div class="flag-box">🇪🇸</div>
|
||
<span class="tname">Spain</span>
|
||
</div>
|
||
</div>
|
||
<button class="mc-cta">Tipp abgeben</button>
|
||
</div>
|
||
|
||
<!-- Match Card 2: getippt -->
|
||
<div class="match-card has-tip">
|
||
<div class="mc-top">
|
||
<span class="mc-group">Gruppe C · Match 18</span>
|
||
</div>
|
||
<div class="mc-teams">
|
||
<div class="mc-team">
|
||
<div class="flag-box">🇧🇷</div>
|
||
<span class="tname">Brazil</span>
|
||
</div>
|
||
<div class="mc-vs">
|
||
<div class="mc-vs-circle">VS</div>
|
||
<div class="mc-vs-date">15. Jun<br/>18:00</div>
|
||
</div>
|
||
<div class="mc-team">
|
||
<div class="flag-box">🇫🇷</div>
|
||
<span class="tname">France</span>
|
||
</div>
|
||
</div>
|
||
<button class="mc-cta tipped">✏ Tipp: 2:1</button>
|
||
<div class="mc-tip-label">✅ Tipp gespeichert</div>
|
||
</div>
|
||
|
||
<!-- Match Card 3: Live -->
|
||
<div class="match-card">
|
||
<div class="mc-top">
|
||
<span class="mc-group">Gruppe A · Match 6</span>
|
||
<span class="mc-live-badge">Live 67'</span>
|
||
</div>
|
||
<div class="mc-teams">
|
||
<div class="mc-team">
|
||
<div class="flag-box">🇦🇷</div>
|
||
<span class="tname">Argentina</span>
|
||
</div>
|
||
<div class="mc-vs">
|
||
<div class="mc-vs-circle" style="background:var(--red);color:white;font-size:14px;font-weight:900">2:0</div>
|
||
<div class="mc-vs-date" style="color:var(--red)">Laufend</div>
|
||
</div>
|
||
<div class="mc-team">
|
||
<div class="flag-box">🇨🇦</div>
|
||
<span class="tname">Canada</span>
|
||
</div>
|
||
</div>
|
||
<button class="mc-cta" style="background:linear-gradient(135deg,var(--surface-high),var(--surface-mid));color:var(--text-3);box-shadow:none;cursor:default">Läuft · Mein Tipp: 3:0</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ── LETZTE ERGEBNISSE ───────────────────────────── -->
|
||
<div class="sec-header">
|
||
<span class="sec-title">Letzte Ergebnisse</span>
|
||
</div>
|
||
<div class="results-scroll">
|
||
<div class="result-card correct">
|
||
<div class="rc-flags">🇩🇪🇯🇵</div>
|
||
<div class="rc-teams">GER vs JPN</div>
|
||
<div class="rc-scores">
|
||
<span class="rc-tip">2:1</span>
|
||
<span class="rc-arrow">→</span>
|
||
<span class="rc-res">2:1</span>
|
||
</div>
|
||
<span class="rc-pts">+3 Pkt ✓✓</span>
|
||
</div>
|
||
<div class="result-card tendency">
|
||
<div class="rc-flags">🇧🇷🇫🇷</div>
|
||
<div class="rc-teams">BRA vs FRA</div>
|
||
<div class="rc-scores">
|
||
<span class="rc-tip">1:0</span>
|
||
<span class="rc-arrow">→</span>
|
||
<span class="rc-res">2:0</span>
|
||
</div>
|
||
<span class="rc-pts">+1 Pkt ✓</span>
|
||
</div>
|
||
<div class="result-card wrong">
|
||
<div class="rc-flags">🇦🇷🇲🇽</div>
|
||
<div class="rc-teams">ARG vs MEX</div>
|
||
<div class="rc-scores">
|
||
<span class="rc-tip">0:1</span>
|
||
<span class="rc-arrow">→</span>
|
||
<span class="rc-res">2:0</span>
|
||
</div>
|
||
<span class="rc-pts">0 Pkt ✗</span>
|
||
</div>
|
||
<div class="result-card correct">
|
||
<div class="rc-flags">🇵🇹🇺🇸</div>
|
||
<div class="rc-teams">POR vs USA</div>
|
||
<div class="rc-scores">
|
||
<span class="rc-tip">3:1</span>
|
||
<span class="rc-arrow">→</span>
|
||
<span class="rc-res">3:1</span>
|
||
</div>
|
||
<span class="rc-pts">+3 Pkt ✓✓</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── OFFICE TOP 3 ────────────────────────────────── -->
|
||
<div class="sec-header">
|
||
<span class="sec-title">Office Top 3</span>
|
||
<span class="sec-link" style="color:var(--gold)">Full Leaderboard →</span>
|
||
</div>
|
||
<div class="top3-podium">
|
||
<!-- 2nd -->
|
||
<div class="podium-item second">
|
||
<div class="podium-avatar">
|
||
MH
|
||
<div class="medal-badge silver">2</div>
|
||
</div>
|
||
<div class="podium-name">Markus H.</div>
|
||
<div class="podium-pts">18 Pkt</div>
|
||
</div>
|
||
<!-- 1st -->
|
||
<div class="podium-item first">
|
||
<div class="podium-avatar">
|
||
<div class="podium-crown">👑</div>
|
||
SW
|
||
<div class="medal-badge gold">1</div>
|
||
</div>
|
||
<div class="podium-name">Sandra W.</div>
|
||
<div class="podium-pts">21 Pkt</div>
|
||
</div>
|
||
<!-- 3rd -->
|
||
<div class="podium-item third">
|
||
<div class="podium-avatar">
|
||
JB
|
||
<div class="medal-badge bronze">3</div>
|
||
</div>
|
||
<div class="podium-name">Julia B.</div>
|
||
<div class="podium-pts">16 Pkt</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rank list ab Platz 4 + ich -->
|
||
<div class="rank-list">
|
||
<div class="rank-row">
|
||
<span class="rr-num">4.</span>
|
||
<div class="rr-avatar">TK</div>
|
||
<div class="rr-info">
|
||
<div class="rr-name">Thomas K.</div>
|
||
<div class="rr-dept">Einkauf</div>
|
||
</div>
|
||
<div class="rr-right">
|
||
<span class="rr-pts">15</span>
|
||
<span class="rr-trend up">▲</span>
|
||
</div>
|
||
</div>
|
||
<div class="rank-row">
|
||
<span class="rr-num">5.</span>
|
||
<div class="rr-avatar">AS</div>
|
||
<div class="rr-info">
|
||
<div class="rr-name">Anna S.</div>
|
||
<div class="rr-dept">HR</div>
|
||
</div>
|
||
<div class="rr-right">
|
||
<span class="rr-pts">13</span>
|
||
<span class="rr-trend eq">–</span>
|
||
</div>
|
||
</div>
|
||
<div class="rank-row">
|
||
<span class="rr-num">6.</span>
|
||
<div class="rr-avatar">KM</div>
|
||
<div class="rr-info">
|
||
<div class="rr-name">Klaus M.</div>
|
||
<div class="rr-dept">IT</div>
|
||
</div>
|
||
<div class="rr-right">
|
||
<span class="rr-pts">13</span>
|
||
<span class="rr-trend up">▲</span>
|
||
</div>
|
||
</div>
|
||
<!-- ICH -->
|
||
<div class="rank-row me">
|
||
<span class="rr-num" style="color:var(--primary);font-weight:900">7.</span>
|
||
<div class="rr-avatar">RK</div>
|
||
<div class="rr-info">
|
||
<div class="rr-name">Ronny K. <span class="me-tag">(Ich)</span></div>
|
||
<div class="rr-dept">IT · <span class="me-cta">Aufholjagd! ↑</span></div>
|
||
</div>
|
||
<div class="rr-right">
|
||
<span class="rr-pts">12</span>
|
||
<span class="rr-trend up">▲</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Punkte sichern CTA -->
|
||
<div style="margin: 0 16px 32px">
|
||
<div style="
|
||
background: var(--surface-low);
|
||
border-radius: var(--radius-lg);
|
||
padding: 16px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
|
||
">
|
||
<div>
|
||
<div style="font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--text-1);margin-bottom:4px">Punkte sichern!</div>
|
||
<div style="font-family:var(--font-body);font-size:11px;color:var(--text-3)">Tippe die nächsten Spiele und klettere nach oben.</div>
|
||
</div>
|
||
<button style="
|
||
flex-shrink:0;
|
||
padding: 10px 16px;
|
||
background: linear-gradient(135deg, var(--primary), var(--primary-dim));
|
||
border: none; border-radius: 12px;
|
||
font-family: var(--font-display);
|
||
font-size: 12px; font-weight: 800;
|
||
color: white; cursor: pointer;
|
||
box-shadow: 0 4px 14px rgba(75,183,248,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
position: relative; overflow: hidden;
|
||
">Tippen</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /scroll-body -->
|
||
|
||
<!-- Bottom Navigation -->
|
||
<nav class="bottom-nav">
|
||
<div class="nav-item active" data-page="home">
|
||
<span class="nav-icon">🏠</span>
|
||
<span class="nav-label">Home</span>
|
||
</div>
|
||
<div class="nav-item" data-page="spielplan" style="position:relative">
|
||
<span class="nav-icon">📅</span>
|
||
<span class="nav-label">Spielplan</span>
|
||
<span class="nav-badge">3</span>
|
||
</div>
|
||
<div class="nav-item" data-page="rangliste">
|
||
<span class="nav-icon">📊</span>
|
||
<span class="nav-label">Rangliste</span>
|
||
</div>
|
||
<div class="nav-item" data-page="gruppen">
|
||
<span class="nav-icon">🗂</span>
|
||
<span class="nav-label">Gruppen</span>
|
||
</div>
|
||
<div class="nav-item" data-page="profil">
|
||
<span class="nav-icon">👤</span>
|
||
<span class="nav-label">Profil</span>
|
||
</div>
|
||
</nav>
|
||
|
||
</div><!-- /phone -->
|
||
|
||
<script>
|
||
// Live Countdown
|
||
function tick() {
|
||
const wm = new Date('2026-06-11T19:00:00Z');
|
||
const now = new Date();
|
||
const diff = Math.max(0, wm - now);
|
||
const d = Math.floor(diff / 86400000);
|
||
const h = Math.floor((diff % 86400000) / 3600000);
|
||
const m = Math.floor((diff % 3600000) / 60000);
|
||
const s = Math.floor((diff % 60000) / 1000);
|
||
const pad = n => String(n).padStart(2,'0');
|
||
document.getElementById('cd-days').textContent = pad(d);
|
||
document.getElementById('cd-hrs').textContent = pad(h);
|
||
document.getElementById('cd-min').textContent = pad(m);
|
||
document.getElementById('cd-sec').textContent = pad(s);
|
||
}
|
||
tick();
|
||
setInterval(tick, 1000);
|
||
|
||
// Nav click highlight (demo)
|
||
document.querySelectorAll('.nav-item').forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
|
||
item.classList.add('active');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|