203 lines
11 KiB
HTML
203 lines
11 KiB
HTML
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Global Match – Start</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=Fredoka:wght@500;700&family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root{
|
||
/* Farben ans Design angepasst */
|
||
--teal-900:#0a2a35; /* sehr dunkelblau-grün */
|
||
--teal-700:#0f4a57; /* tiefes Petrol */
|
||
--teal-500:#127a8a; /* Mittel-Teal */
|
||
--teal-300:#27a7b8; /* helleres Blaugrün */
|
||
--gold-400:#f6c04e; /* warmes Gold */
|
||
--gold-500:#ffcf5f; /* helleres Gold */
|
||
--ink:#0a1a22; /* fast schwarz, bläulich */
|
||
--card:#0d2d37cc; /* Glas/Kartenhintergrund */
|
||
--text:#eaf7fb; /* fast weiß */
|
||
--shadow: 0 15px 50px rgba(0,0,0,.35);
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html,body{height:100%}
|
||
body{
|
||
margin:0; font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
|
||
background: radial-gradient(1200px 800px at 70% -10%, #174058 0%, var(--teal-900) 60%) fixed;
|
||
color:var(--text);
|
||
overflow:hidden;
|
||
}
|
||
|
||
/* Sterne im Hintergrund */
|
||
.stars, .stars:after{
|
||
content:""; position:absolute; inset:0; pointer-events:none; background-repeat:repeat; background-size:600px 600px;
|
||
background-image: radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,.7) 40%, transparent 41%),
|
||
radial-gradient(1.5px 1.5px at 200px 120px, rgba(255,255,255,.4) 40%, transparent 41%),
|
||
radial-gradient(1.5px 1.5px at 340px 260px, rgba(255,255,255,.6) 40%, transparent 41%),
|
||
radial-gradient(2px 2px at 520px 420px, rgba(255,255,255,.5) 40%, transparent 41%),
|
||
radial-gradient(1.5px 1.5px at 560px 90px, rgba(255,255,255,.35) 40%, transparent 41%);
|
||
animation: twinkle 12s linear infinite;
|
||
}
|
||
.stars:after{ transform:scale(1.6); opacity:.6; filter:blur(.3px); animation-duration:18s }
|
||
@keyframes twinkle{ from{background-position:0 0} to{background-position:600px 600px} }
|
||
|
||
/* Container */
|
||
.wrap{ position:relative; z-index:10; height:100%; display:grid; place-items:center; padding: clamp(16px, 3vw, 40px); }
|
||
|
||
.card{
|
||
width:min(920px, 92vw); text-align:center; padding:clamp(20px, 4vw, 40px);
|
||
background: linear-gradient(180deg, #0f3040cc 0%, #0a2732cc 100%);
|
||
border:2px solid rgba(255,255,255,.08); border-radius:28px; box-shadow:var(--shadow);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
/* Logo/Title */
|
||
.brand{ display:inline-grid; gap:.6rem; justify-items:center; margin-bottom: clamp(16px, 3vw, 22px); }
|
||
.logo{
|
||
display:flex; align-items:center; justify-content:center; gap:12px;
|
||
font-family:"Fredoka", sans-serif; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
|
||
filter: drop-shadow(0 8px 0 rgba(0,0,0,.25));
|
||
}
|
||
.logo-top{ font-size: clamp(40px, 8vw, 68px); color:#2ad0e1; text-shadow: 0 3px 0 #08303b, 0 10px 28px rgba(0,0,0,.6); }
|
||
.logo-bottom{ font-size: clamp(36px, 7vw, 62px); color:var(--gold-500); text-shadow: 0 3px 0 #1a2b35, 0 10px 28px rgba(0,0,0,.6); margin-top:-12px; }
|
||
|
||
.subtitle{ opacity:.9; font-size: clamp(14px, 2.2vw, 18px); margin-top:.2rem }
|
||
|
||
/* Auswahl */
|
||
.controls{ display:grid; gap:18px; place-items:center; margin: clamp(10px, 3vw, 22px) 0; }
|
||
|
||
.segmented{
|
||
display:inline-flex; background:#08232d; border:2px solid #0b3a48; border-radius:16px; overflow:hidden;
|
||
}
|
||
.segmented input{ display:none }
|
||
.segmented label{
|
||
padding:12px 18px; cursor:pointer; min-width:128px; font-weight:800; letter-spacing:.3px;
|
||
color:#b7e5ec; transition:.25s transform ease, .25s background, .25s color;
|
||
}
|
||
.segmented label:hover{ transform:translateY(-1px) }
|
||
.segmented input:checked + label{
|
||
background: linear-gradient(180deg, #21a8bb 0%, #11788a 100%);
|
||
color:#06151a;
|
||
}
|
||
|
||
.start{
|
||
--h: clamp(46px, 5.4vw, 58px);
|
||
height:var(--h); padding:0 28px; border-radius:18px; font-weight:900; font-size:clamp(16px, 2.4vw, 20px);
|
||
border:0; cursor:pointer; letter-spacing:.4px; color:#0b1a1f;
|
||
background: linear-gradient(180deg, var(--gold-500), var(--gold-400));
|
||
box-shadow: 0 10px 0 #b48a2c, 0 18px 30px rgba(0,0,0,.35);
|
||
transition: transform .06s ease, box-shadow .06s ease, filter .2s;
|
||
}
|
||
.start:active{ transform:translateY(3px); box-shadow:0 7px 0 #b48a2c, 0 10px 20px rgba(0,0,0,.35) }
|
||
.start:disabled{ filter:grayscale(.5) brightness(.75); cursor:not-allowed }
|
||
|
||
/* Wellen – 4 Layer, parallax & endloses "Schwimmen" */
|
||
.start:active{transform:translateY(3px);box-shadow:0 7px 0 #b48a2c,0 10px 20px rgba(0,0,0,.35)}
|
||
|
||
.waves{position:absolute;bottom:0;left:0;width:100%;height:52vh;overflow:hidden;/* weiche Oberkante gegen Spitzen */-webkit-mask-image:linear-gradient(to top, black 92%, transparent 100%);mask-image:linear-gradient(to top, black 92%, transparent 100%);}
|
||
.wave{position:absolute;bottom:0;left:0;width:220%;height:100%;background-repeat:repeat-x;background-size:50% 100%;animation:swim var(--dur) linear infinite;filter:blur(.2px);}
|
||
|
||
/* Einheitlich fließende Wellen, gleiche Höhe und Übergang */
|
||
.wave.one{--dur:36s;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200" preserveAspectRatio="none"><path fill="%230b3a48" d="M0 120 C 150 80, 300 160, 450 120 S 750 80, 900 120 S 1050 160, 1200 120 V200 H0 Z"/></svg>');opacity:.9;z-index:1;}
|
||
.wave.two{--dur:28s;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200" preserveAspectRatio="none"><path fill="%23115869" d="M0 120 C 150 85, 300 155, 450 120 S 750 85, 900 120 S 1050 155, 1200 120 V200 H0 Z"/></svg>');opacity:.85;z-index:2;mix-blend-mode:screen;}
|
||
.wave.three{--dur:22s;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200" preserveAspectRatio="none"><path fill="%2327a7b8" d="M0 120 C 150 90, 300 150, 450 120 S 750 90, 900 120 S 1050 150, 1200 120 V200 H0 Z"/></svg>');opacity:.9;z-index:3;mix-blend-mode:screen;}
|
||
.wave.four{--dur:18s;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200" preserveAspectRatio="none"><path fill="%23f6c04e" d="M0 120 C 150 95, 300 145, 450 120 S 750 95, 900 120 S 1050 145, 1200 120 V200 H0 Z"/></svg>');opacity:.82;z-index:4;}
|
||
|
||
@keyframes swim{from{transform:translateX(0)}to{transform:translateX(-50%)}}to{transform:translateX(-50%)}}
|
||
|
||
footer{position:absolute;bottom:10px;left:0;right:0;text-align:center;opacity:.7;font-size:12px;z-index:5;}
|
||
|
||
/* Kleine leuchtende Kugeln (Planeten) */
|
||
.orb{ position:absolute; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fff8 0, #fff2 12%, #fbe38b 20%, #f6c04e 55%, #c79226 100%); box-shadow:0 0 40px #f6c04e55; filter:saturate(120%); }
|
||
.orb.one{ width:26vmin; height:26vmin; right:8vw; top:10vh; opacity:.9; animation: float 12s ease-in-out infinite }
|
||
.orb.two{ width:10vmin; height:10vmin; left:6vw; bottom:38vh; opacity:.8; animation: float 16s ease-in-out infinite reverse }
|
||
@keyframes float{ 0%,100%{ transform: translateY(-6px)} 50%{ transform: translateY(6px)} }
|
||
|
||
footer{ position:absolute; bottom:10px; left:0; right:0; text-align:center; opacity:.7; font-size:12px }
|
||
|
||
/* Responsiveness tweak */
|
||
@media (max-width:520px){ .segmented label{ min-width:110px; padding:10px 14px } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="stars"></div>
|
||
<div class="orb one"></div>
|
||
<div class="orb two"></div>
|
||
|
||
<main class="wrap">
|
||
<section class="card" role="region" aria-labelledby="title">
|
||
<div class="brand">
|
||
<!-- Logo als Text – du kannst hier optional ein PNG/SVG einfügen -->
|
||
<div class="logo" aria-hidden="true">
|
||
<div class="logo-top">GL
|
||
<svg width="52" height="52" viewBox="0 0 100 100" style="vertical-align:middle">
|
||
<defs><radialGradient id="g" cx="50%" cy="35%" r="60%"><stop offset="0%" stop-color="#9ee7ef"/><stop offset="100%" stop-color="#127a8a"/></radialGradient></defs>
|
||
<circle cx="50" cy="50" r="46" fill="url(#g)" stroke="#08303b" stroke-width="6"/>
|
||
<path d="M40 30l8 6-3 8-10 4 1 6 7 3 2 10-9 3-8-6 2-9 5-5-2-6 7-5zM60 28l10 4-2 6 6 8-6 4-8-2-3-6 3-6zM64 60l6 4-2 8-8 4-6-4 2-6 8-6z" fill="#0a2a35" fill-opacity=".6"/>
|
||
</svg>
|
||
BAL</div>
|
||
<div class="logo-bottom">MATCH</div>
|
||
</div>
|
||
<p id="title" class="subtitle">Finde Länder & Hauptstädte – allein oder im Duell!</p>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<div class="segmented" role="radiogroup" aria-label="Spielerzahl wählen">
|
||
<input type="radio" name="players" id="p1" value="1" checked>
|
||
<label for="p1">1 Spieler</label>
|
||
<input type="radio" name="players" id="p2" value="2">
|
||
<label for="p2">2 Spieler</label>
|
||
</div>
|
||
<button class="start" id="startBtn" aria-label="Spiel starten">Start</button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Wellen-Layer unten -->
|
||
<div class="waves">
|
||
<div class="wave one"></div>
|
||
<div class="wave two"></div>
|
||
<div class="wave three"></div>
|
||
<div class="wave four"></div>
|
||
</div>
|
||
|
||
<footer>© <span id="y"></span> Global Match</footer>
|
||
|
||
<script>
|
||
// Jahr in Footer
|
||
document.getElementById('y').textContent = new Date().getFullYear();
|
||
|
||
// Start-Button: weiterleiten zum Spiel (game.html anpassen)
|
||
document.getElementById('startBtn').addEventListener('click', () => {
|
||
const players = document.querySelector('input[name="players"]:checked').value;
|
||
// Falls du eine andere Zielseite nutzt, ersetze "game.html"
|
||
window.location.href = `game.html?players=${players}`;
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
<!-- ... dein kompletter <head> & <body> wie bisher ... -->
|
||
|
||
<script>
|
||
// Jahr im Footer
|
||
document.getElementById('y').textContent = new Date().getFullYear();
|
||
|
||
// Start-Button → Backend ruft Pygame
|
||
document.getElementById('startBtn').addEventListener('click', async () => {
|
||
const players = document.querySelector('input[name="players"]:checked').value;
|
||
try {
|
||
const res = await fetch(`/start?players=${players}`);
|
||
// Optional: kleine Info für Nutzer
|
||
alert('Spiel wird gestartet! Schau nach dem Pygame-Fenster.');
|
||
} catch (e) {
|
||
alert('Konnte das Spiel nicht starten. Läuft der Server?');
|
||
console.error(e);
|
||
}
|
||
});
|
||
</script>
|