Initial VTuber Awards implementation
This commit is contained in:
AzuTear
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>VTuber Star Awards</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=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-frame">
|
||||
<header class="topbar">
|
||||
<a class="brand" href="#home">
|
||||
<span class="brand-star">✦</span>
|
||||
<span class="brand-copy">
|
||||
<strong>VTUBER</strong>
|
||||
<small>STAR AWARDS</small>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<nav class="nav">
|
||||
<a href="#home" class="is-active">Home</a>
|
||||
<a href="#process">Ablauf</a>
|
||||
<a href="#featured">Kategorien</a>
|
||||
<a href="#archive">Gewinner</a>
|
||||
<a href="#faq">FAQ</a>
|
||||
<a href="#about">Ueber die Show</a>
|
||||
</nav>
|
||||
|
||||
<div class="topbar-actions">
|
||||
<button class="ghost-button" type="button">Anmelden</button>
|
||||
<button class="primary-button" type="button">Jetzt voten</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Die groesste Community-Auszeichnung</p>
|
||||
<h1>VTuber Star Awards</h1>
|
||||
<p class="hero-body">
|
||||
Feiere die talentiertesten VTuber, Creator und Momente des Jahres -
|
||||
gewaehlt von der Community, fuer die Community.
|
||||
</p>
|
||||
|
||||
<div class="hero-cta">
|
||||
<a class="primary-button" href="#nomination-cta">Jetzt nominieren</a>
|
||||
<a class="secondary-button" href="#voting-cta">Jetzt voten</a>
|
||||
</div>
|
||||
|
||||
<div class="show-meta">
|
||||
<p class="eyebrow muted">Die Show findet statt am</p>
|
||||
<h2>24. Januar 2026</h2>
|
||||
<p>Live auf YouTube & Twitch</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-art">
|
||||
<div class="hero-illustration">
|
||||
<div class="hero-placeholder" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="hero-signature">
|
||||
<span>Jayuhime</span>
|
||||
<small>Host of the Show</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="phase-panel" aria-label="Aktuelle Phase">
|
||||
<div class="phase-copy">
|
||||
<p class="eyebrow">Aktuelle Phase</p>
|
||||
<h3>Voting</h3>
|
||||
<p>
|
||||
Stimme in deinen Lieblingskategorien ab und unterstuetze deine
|
||||
Favoriten.
|
||||
</p>
|
||||
|
||||
<div class="timer">
|
||||
<div><strong>14</strong><span>Tage</span></div>
|
||||
<div><strong>07</strong><span>Std</span></div>
|
||||
<div><strong>32</strong><span>Min</span></div>
|
||||
<div><strong>45</strong><span>Sek</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phase-track">
|
||||
<div class="phase-step is-complete">
|
||||
<span>✓</span>
|
||||
<strong>Nominierung</strong>
|
||||
<small>01. Mai - 31. Mai</small>
|
||||
</div>
|
||||
<div class="phase-step is-active">
|
||||
<span>★</span>
|
||||
<strong>Voting</strong>
|
||||
<small>01. Jun - 30. Jun</small>
|
||||
</div>
|
||||
<div class="phase-step">
|
||||
<span>✉</span>
|
||||
<strong>Auswertung</strong>
|
||||
<small>01. Jul - 10. Jul</small>
|
||||
</div>
|
||||
<div class="phase-step">
|
||||
<span>🏆</span>
|
||||
<strong>Award Show</strong>
|
||||
<small>24. Januar 2026</small>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="process">
|
||||
<div class="section-title centered">
|
||||
<h2>So funktioniert's</h2>
|
||||
</div>
|
||||
|
||||
<div class="how-grid">
|
||||
<article class="how-card">
|
||||
<div class="how-icon">✒</div>
|
||||
<h3>1. Nominieren</h3>
|
||||
<p>Nominiere deine Favoriten in jeder Kategorie.</p>
|
||||
</article>
|
||||
<article class="how-card">
|
||||
<div class="how-icon">☑</div>
|
||||
<h3>2. Voten</h3>
|
||||
<p>Stimme ab und unterstuetze deine Lieblings-Creator.</p>
|
||||
</article>
|
||||
<article class="how-card">
|
||||
<div class="how-icon">✦</div>
|
||||
<h3>3. Ergebnisse</h3>
|
||||
<p>Die Community entscheidet - 100% deiner Stimme zaehlt.</p>
|
||||
</article>
|
||||
<article class="how-card">
|
||||
<div class="how-icon">🏆</div>
|
||||
<h3>4. Award Show</h3>
|
||||
<p>Feiere die Gewinner bei der grossen Live-Show.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="featured">
|
||||
<div class="section-title split">
|
||||
<h2>Gefeatured Kategorien</h2>
|
||||
<a href="#">Alle Kategorien ansehen →</a>
|
||||
</div>
|
||||
|
||||
<div class="category-grid" id="category-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="archive">
|
||||
<div class="section-title split">
|
||||
<h2>Gewinner Archiv</h2>
|
||||
<a href="#">Alle Jahre ansehen →</a>
|
||||
</div>
|
||||
|
||||
<div class="archive-panel">
|
||||
<aside class="archive-lead">
|
||||
<h3 id="archive-year-label">2025</h3>
|
||||
<p>
|
||||
Die letzten Gewinner. Sieh dir an, wer im letzten Jahr die
|
||||
Community begeistert hat.
|
||||
</p>
|
||||
<button class="primary-button" type="button">Archiv entdecken</button>
|
||||
</aside>
|
||||
|
||||
<div class="archive-content">
|
||||
<div class="year-pills" id="year-pills">
|
||||
<button class="year-pill is-active" data-year="2025">2025</button>
|
||||
<button class="year-pill" data-year="2024">2024</button>
|
||||
<button class="year-pill" data-year="2023">2023</button>
|
||||
<button class="year-pill" data-year="2022">2022</button>
|
||||
</div>
|
||||
<div class="winner-grid" id="winner-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta-row">
|
||||
<article class="cta-panel" id="nomination-cta">
|
||||
<div class="cta-copy">
|
||||
<p class="eyebrow">Nominieren</p>
|
||||
<h2>Nominiere pro Kategorie bis zu 3 VTuber.</h2>
|
||||
<ul>
|
||||
<li>Pro Kategorie nur 1 Nominierung fuer dieselbe Person</li>
|
||||
<li>Insgesamt nur 2 Nominierungen pro Person</li>
|
||||
<li>Live-Validierung & Feedback</li>
|
||||
</ul>
|
||||
<a class="primary-button" href="#">Jetzt nominieren</a>
|
||||
</div>
|
||||
<div class="placeholder-visual ballot-box">
|
||||
<div class="placeholder-card"></div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="cta-panel accent" id="voting-cta">
|
||||
<div class="cta-copy">
|
||||
<p class="eyebrow">Voten</p>
|
||||
<h2>Stimme in deinen Lieblingskategorien ab.</h2>
|
||||
<ul>
|
||||
<li>Nur 1 Stimme pro Kategorie</li>
|
||||
<li>Twitch Login erforderlich</li>
|
||||
<li>Videos, Clips & Songs ansehen</li>
|
||||
</ul>
|
||||
<a class="secondary-button" href="#">Jetzt voten</a>
|
||||
</div>
|
||||
<div class="placeholder-visual trophy-visual">
|
||||
<div class="trophy"></div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="section lower-grid" id="faq">
|
||||
<article class="faq-panel">
|
||||
<div class="section-title">
|
||||
<h2>Haeufige Fragen</h2>
|
||||
</div>
|
||||
<div class="faq-list" id="faq-list"></div>
|
||||
</article>
|
||||
|
||||
<article class="updates-panel" id="about">
|
||||
<div class="section-title">
|
||||
<h2>Bleib up to date</h2>
|
||||
</div>
|
||||
<p>
|
||||
Erhalte Updates zu Phasen, Regeln und der Show direkt in dein
|
||||
Postfach.
|
||||
</p>
|
||||
<div class="newsletter">
|
||||
<input type="email" placeholder="Deine E-Mail-Adresse" />
|
||||
<button class="primary-button" type="button">Abonnieren</button>
|
||||
</div>
|
||||
<div class="social-row">
|
||||
<span>Twitch</span>
|
||||
<span>YouTube</span>
|
||||
<span>X</span>
|
||||
<span>Instagram</span>
|
||||
<span>TikTok</span>
|
||||
<span>Discord</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<a class="brand compact" href="#home">
|
||||
<span class="brand-star">✦</span>
|
||||
<span class="brand-copy">
|
||||
<strong>VTUBER</strong>
|
||||
<small>STAR AWARDS</small>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="#">Impressum</a>
|
||||
<a href="#">Datenschutz</a>
|
||||
<a href="#">Kontakt</a>
|
||||
<a href="#">Media Kit</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-meta">© 2025 VTuber Star Awards. All rights reserved.</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="./script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user