753 lines
38 KiB
HTML
753 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">
|
||
<meta name="description" content="Champions of Luneraria - Der kompetitive 3-Lane Autobattler (3 vs. 3). Taktische MOBA-Tiefe trifft deterministische Tower-Defense. Unity 6 URP, C#-Simulation und volles Glutpakt-Heer.">
|
||
<meta name="theme-color" content="#030508">
|
||
<title>Champions of Luneraria · Offizieller 3-Lane Autobattler</title>
|
||
|
||
<!-- Studio Grade Stylesheet -->
|
||
<link rel="stylesheet" href="assets/css/style.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- A11y Skip Link -->
|
||
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
||
|
||
<!-- Ambient Dynamic Mouse Light -->
|
||
<div class="cursor-ambient-glow" aria-hidden="true"></div>
|
||
|
||
<!-- Header / Navigation -->
|
||
<header class="site-header" role="banner">
|
||
<div class="container nav-container">
|
||
<a href="#" class="brand-wrapper" aria-label="Champions of Luneraria Startseite">
|
||
<div class="brand-emblem">
|
||
<svg class="brand-emblem-svg" viewBox="0 0 42 42" fill="none">
|
||
<circle cx="21" cy="21" r="19" stroke="#38e8d8" stroke-width="2" stroke-dasharray="8 4" opacity="0.8" />
|
||
<polygon points="21,5 35,21 21,37 7,21" fill="#08203c" stroke="#38e8d8" stroke-width="1.8" />
|
||
<circle cx="21" cy="21" r="5" fill="#38e8d8" />
|
||
</svg>
|
||
</div>
|
||
<div class="brand-text-block">
|
||
<span class="brand-title">Luneraria <span>3v3</span></span>
|
||
<span class="brand-tagline">Competitive Autobattler</span>
|
||
</div>
|
||
</a>
|
||
|
||
<nav role="navigation" aria-label="Hauptnavigation">
|
||
<ul class="nav-menu">
|
||
<li><a href="#radar" class="nav-link">3-Lane Karte</a></li>
|
||
<li><a href="#zyklus" class="nav-link">Rundenzyklus</a></li>
|
||
<li><a href="#helden" class="nav-link">Champions</a></li>
|
||
<li><a href="#armee" class="nav-link">Glutpakt-Heer</a></li>
|
||
<li><a href="#cinema" class="nav-link">Gameplay</a></li>
|
||
<li><a href="#galerie" class="nav-link">Galerie</a></li>
|
||
<li><a href="#download" class="nav-link">Download</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
<div class="nav-controls">
|
||
<button id="btnAudioSynth" class="btn-audio-synth" aria-pressed="false" aria-label="Atmosphärischen Synthesizer umschalten">
|
||
<div class="equalizer-bars" aria-hidden="true">
|
||
<span class="eq-bar"></span>
|
||
<span class="eq-bar"></span>
|
||
<span class="eq-bar"></span>
|
||
<span class="eq-bar"></span>
|
||
</div>
|
||
<span class="audio-label">Atmosphäre</span>
|
||
</button>
|
||
|
||
<a href="https://col-admin.stickelbroeck.com" target="_blank" rel="noopener" class="btn-cyan-ghost" style="padding: 9px 16px; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 6px;">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
|
||
<span>Schaltzentrale</span>
|
||
</a>
|
||
|
||
<a href="#download" class="btn-gold-sheen">
|
||
<span>Spielen</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Hauptinhalt -->
|
||
<main id="main-content">
|
||
|
||
<!-- 1. Hero Stage (Cinematic Triple-A) -->
|
||
<section class="hero-stage" aria-labelledby="hero-headline">
|
||
<div class="hero-video-wrapper">
|
||
<video class="hero-bg-video" autoplay muted loop playsinline preload="auto">
|
||
<source src="assets/video/turmkampf.mp4" type="video/mp4">
|
||
</video>
|
||
</div>
|
||
<div class="hero-vignette-overlay" aria-hidden="true"></div>
|
||
<canvas id="heroParticleCanvas" class="hero-canvas" aria-hidden="true"></canvas>
|
||
|
||
<div class="container hero-inner-content">
|
||
<div class="studio-kicker">
|
||
<span class="kicker-live-dot" aria-hidden="true"></span>
|
||
Meilenstein U5.5 · Unity 6 URP · Volles Glutpakt-Heer
|
||
</div>
|
||
|
||
<h1 id="hero-headline" class="hero-epic-headline">
|
||
Champions of <span class="gradient-accent">Luneraria</span>
|
||
</h1>
|
||
|
||
<p class="hero-lead-paragraph">
|
||
Der autoritative <strong>3-Lane Autobattler</strong> (3 gegen 3).
|
||
Kombiniere tiefgreifende MOBA-Makrostrategie mit deterministischer Tower-Defense.
|
||
Plane verdeckt im Team, rüste Champions mit Artefakten aus und stürze den Mondherz-Ancient der Feinde.
|
||
</p>
|
||
|
||
<div class="hero-actions-cluster">
|
||
<a href="#download" class="btn-gold-sheen">
|
||
<span>Kostenlos Herunterladen</span>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||
<polyline points="7 10 12 15 17 10"></polyline>
|
||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||
</svg>
|
||
</a>
|
||
|
||
<a href="#cinema" class="btn-cyan-ghost">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||
</svg>
|
||
<span>Gameplay Trailer</span>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Hero KPI Ribbon -->
|
||
<div class="hero-kpi-bar animate-on-scroll">
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">3 <span class="kpi-highlight">vs</span> 3</div>
|
||
<span class="kpi-subtext">Team-Autobattler</span>
|
||
</div>
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">20 <span class="kpi-highlight">Hz</span></div>
|
||
<span class="kpi-subtext">C# Regelkern</span>
|
||
</div>
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">16 <span class="kpi-highlight">+ 2</span></div>
|
||
<span class="kpi-subtext">Türme & Ancients</span>
|
||
</div>
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">120<span class="kpi-highlight">+</span></div>
|
||
<span class="kpi-subtext">FPS bei 110+ Units</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2. Tactical Radar 3-Lane Map Visualizer -->
|
||
<section id="radar" class="section-boundary" aria-labelledby="radar-section-title">
|
||
<div class="container">
|
||
<div class="heading-block animate-on-scroll">
|
||
<span class="eyebrow-tag">Taktische Lage</span>
|
||
<h2 id="radar-section-title" class="main-section-heading">Das Schlachtfeld von Luneraria</h2>
|
||
<p class="section-body-text">
|
||
Exakte Spiegelsymmetrie zwischen Team Blau und Team Rot. Drei Höhenstufen,
|
||
eine zentrale Kluft und die umkämpfte Bossgrotte auf der Hauptachse.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="tactical-radar-wrapper animate-on-scroll">
|
||
<!-- Interactive SVG Radar -->
|
||
<div id="radarScreenContainer" class="radar-screen-viewport"></div>
|
||
|
||
<!-- Dossier Inspector Panel -->
|
||
<div class="radar-side-console">
|
||
<div class="radar-target-dossier">
|
||
<div class="dossier-header-row">
|
||
<h3 id="dossierTitle" class="dossier-title">Mid-Lane (Zentralplattform)</h3>
|
||
<span id="dossierBadge" class="dossier-badge">Direkte Offensive</span>
|
||
</div>
|
||
|
||
<!-- Miniature Screenshot Thumbnail of the selected landmark -->
|
||
<div style="width: 100%; height: 130px; border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--border-glass);">
|
||
<img id="dossierPreviewImg" src="assets/img/hero-overview.png" alt="Landmark Vorschau" style="width: 100%; height: 100%; object-fit: cover;">
|
||
</div>
|
||
|
||
<div class="dossier-stats-grid">
|
||
<div class="dossier-stat-row">
|
||
<span class="dossier-stat-label">Länge</span>
|
||
<span id="dossierLength" class="dossier-stat-val">61,16 Meter</span>
|
||
</div>
|
||
<div class="dossier-stat-row">
|
||
<span class="dossier-stat-label">Höhenprofil</span>
|
||
<span id="dossierElevation" class="dossier-stat-val">Plateau (0 m)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p id="dossierDesc" class="dossier-description">
|
||
Die kürzeste und blutigste Route. Führt geradlinig über die uralte Runensteinplattform direkt über die Symmetriekluft. Der Verlust der beiden Mid-Türme legt sofort die Flanken zur eigenen Basis frei.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Tactical Zone Selectors -->
|
||
<div class="radar-selector-stack" role="tablist" aria-label="Kartenbereiche anwählen">
|
||
<button class="radar-zone-btn is-active" data-target="mid" role="tab" aria-selected="true">
|
||
<span>Mid-Lane (Zentrum)</span>
|
||
<span class="btn-side-pill">61 m</span>
|
||
</button>
|
||
<button class="radar-zone-btn" data-target="top" role="tab" aria-selected="false">
|
||
<span>Top-Lane (Hochland)</span>
|
||
<span class="btn-side-pill">97 m</span>
|
||
</button>
|
||
<button class="radar-zone-btn" data-target="bot" role="tab" aria-selected="false">
|
||
<span>Bottom-Lane (Delta)</span>
|
||
<span class="btn-side-pill">97 m</span>
|
||
</button>
|
||
<button class="radar-zone-btn" data-target="grotto" role="tab" aria-selected="false">
|
||
<span>Bossgrotte „Mondschlund“</span>
|
||
<span class="btn-side-pill">Superboss</span>
|
||
</button>
|
||
<button class="radar-zone-btn" data-target="blue_ancient" role="tab" aria-selected="false">
|
||
<span>Blauer Ancient (West)</span>
|
||
<span class="btn-side-pill">Basis Blau</span>
|
||
</button>
|
||
<button class="radar-zone-btn" data-target="red_ancient" role="tab" aria-selected="false">
|
||
<span>Roter Ancient (Ost)</span>
|
||
<span class="btn-side-pill">Basis Rot</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3. Interactive Battle Flow (Rundenzyklus Timeline) -->
|
||
<section id="zyklus" class="section-boundary" aria-labelledby="flow-section-title">
|
||
<div class="container">
|
||
<div class="heading-block animate-on-scroll">
|
||
<span class="eyebrow-tag">Der Match-Rhythmus</span>
|
||
<h2 id="flow-section-title" class="main-section-heading">Der 5-Phasen-Rundenzyklus</h2>
|
||
<p class="section-body-text">
|
||
Kein unüberlegtes Dauerklicken. Jede Runde verlangt wirtschaftliches Weitblick, präzise Aufstellung
|
||
und mutige Entscheidungen bei der Bossjagd.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flow-interactive-wrapper animate-on-scroll">
|
||
<!-- Step Selector Column -->
|
||
<div class="flow-step-selector" role="tablist" aria-label="Rundenphasen durchschalten">
|
||
<button class="flow-step-btn is-active" data-step="1" role="tab" aria-selected="true">
|
||
<span class="step-num-badge">01</span>
|
||
<div class="step-btn-content">
|
||
<h4>Geheime Aufstellung</h4>
|
||
<p>Verdeckte Truppenwahl & Ökonomie</p>
|
||
</div>
|
||
</button>
|
||
|
||
<button class="flow-step-btn" data-step="2" role="tab" aria-selected="false">
|
||
<span class="step-num-badge">02</span>
|
||
<div class="step-btn-content">
|
||
<h4>Simultaner Aufmarsch</h4>
|
||
<p>Formationsbildung bei Rundenstart</p>
|
||
</div>
|
||
</button>
|
||
|
||
<button class="flow-step-btn" data-step="3" role="tab" aria-selected="false">
|
||
<span class="step-num-badge">03</span>
|
||
<div class="step-btn-content">
|
||
<h4>Deterministischer Clash</h4>
|
||
<p>20 Hz Kollision, Fokusfeuer & Rüstung</p>
|
||
</div>
|
||
</button>
|
||
|
||
<button class="flow-step-btn" data-step="4" role="tab" aria-selected="false">
|
||
<span class="step-num-badge">04</span>
|
||
<div class="step-btn-content">
|
||
<h4>Mondschlund-Expedition</h4>
|
||
<p>Superboss besiegen & Lane entsenden</p>
|
||
</div>
|
||
</button>
|
||
|
||
<button class="flow-step-btn" data-step="5" role="tab" aria-selected="false">
|
||
<span class="step-num-badge">05</span>
|
||
<div class="step-btn-content">
|
||
<h4>Der Ancient-Sturz</h4>
|
||
<p>16 Türme in Ruinen & Match-Ende</p>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Dynamic Stage Preview Box -->
|
||
<div class="flow-stage-display">
|
||
<div class="flow-stage-image-box">
|
||
<img id="flowStageImg" src="assets/img/planung-hud.jpg" alt="Vorschau der aktuellen Spielphase">
|
||
</div>
|
||
<div class="flow-stage-text-box">
|
||
<h3 id="flowStageTitle" class="flow-stage-title">Phase 1: Die Geheime Aufstellung</h3>
|
||
<p id="flowStageDesc" class="flow-stage-desc">
|
||
Wähle Truppen im HUD, investiere in Einkommen und positioniere deine Einheiten auf den Aufmarschfeldern deiner Lane. Bis zum Signal der Schlacht bleibt deine Aufstellung für die Feinde unsichtbar.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 4. Champions & Helden Roster -->
|
||
<section id="helden" class="section-boundary" aria-labelledby="roster-section-title">
|
||
<div class="container">
|
||
<div class="heading-block animate-on-scroll">
|
||
<span class="eyebrow-tag">Elite-Einheiten</span>
|
||
<h2 id="roster-section-title" class="main-section-heading">Die Champions von Luneraria</h2>
|
||
<p class="section-body-text">
|
||
Jeder Spieler wählt seinen Champion. Statte Items wie die Glutklinge aus,
|
||
schalte Talente frei und konfiguriere die Auslösebedingung deines Ultimates.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="roster-card-container animate-on-scroll">
|
||
<!-- Hero Tabs -->
|
||
<div class="roster-tab-row" role="tablist" aria-label="Helden auswählen">
|
||
<button class="roster-tab-btn is-active" data-champion="sylvara" role="tab" aria-selected="true">Sylvara (Mondklinge)</button>
|
||
<button class="roster-tab-btn" data-champion="brunhild" role="tab" aria-selected="false">Brunhild (Walküre)</button>
|
||
<button class="roster-tab-btn" data-champion="funkenlanze" role="tab" aria-selected="false">Funkenlanze (Glutpakt)</button>
|
||
</div>
|
||
|
||
<div class="roster-stage-grid">
|
||
<div class="roster-portrait-frame">
|
||
<img id="rosterImg" src="assets/img/held-kampf.jpg" alt="Sylvara im Kampf">
|
||
<div class="roster-portrait-overlay">
|
||
<p id="rosterQuote" class="roster-hero-quote">
|
||
„Zwei Klingen, ein Sprung – und die hintere Reihe verstummt vor dem ersten Zauber.“
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="roster-details-column">
|
||
<span id="rosterBadge" class="roster-class-tag">Elfen · Assassine / Flankenspringerin</span>
|
||
<h3 id="rosterName" class="roster-hero-name">Sylvara, die Mondklinge</h3>
|
||
|
||
<div id="rosterAbilityStack" class="hero-abilities-stack">
|
||
<div class="hero-ability-card">
|
||
<div class="ability-card-head">
|
||
<span class="ability-title">Schattensprung</span>
|
||
<span class="ability-key-pill">Passiv</span>
|
||
</div>
|
||
<p class="ability-description-text">Springt beim ersten Angriff der Runde direkt in die gegnerische Backline auf verwundbare Fernkämpfer.</p>
|
||
</div>
|
||
|
||
<div class="hero-ability-card">
|
||
<div class="ability-card-head">
|
||
<span class="ability-title">Mondsichel-Wurf</span>
|
||
<span class="ability-key-pill">Skill 1</span>
|
||
</div>
|
||
<p class="ability-description-text">Schleudert rotierende Mondklingen durch Gegnerketten, die auf dem Rückweg magischen Schnittschaden verursachen.</p>
|
||
</div>
|
||
|
||
<div class="hero-ability-card">
|
||
<div class="ability-card-head">
|
||
<span class="ability-title">Mondsicheltanz</span>
|
||
<span class="ability-key-pill">Ultimate</span>
|
||
</div>
|
||
<p class="ability-description-text">Wirbelt mit blendendem Mondlicht durch bis zu 5 Ziele. Löst bedingungsgesteuert aus, sobald ein Fernkämpfer isoliert ist.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 5. Das Glutpakt-Heer (Armee-Inspektor) -->
|
||
<section id="armee" class="section-boundary" aria-labelledby="army-section-title">
|
||
<div class="container">
|
||
<div class="heading-block animate-on-scroll">
|
||
<span class="eyebrow-tag">Fraktions-Arsenal</span>
|
||
<h2 id="army-section-title" class="main-section-heading">Das Glutpakt-Heer (U5.5)</h2>
|
||
<p class="section-body-text">
|
||
Alle zehn Einheiten der vulkanischen Glutpakt-Armee wurden in Meilenstein U5.5 komplett auf
|
||
Meshy-Figuren mit automatischer LOD-Generierung und GPU-Batched-Skinning gehoben.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="army-filter-bar animate-on-scroll">
|
||
<button class="army-filter-btn is-active" data-filter="all">Alle Einheiten</button>
|
||
<button class="army-filter-btn" data-filter="melee">Nahkämpfer</button>
|
||
<button class="army-filter-btn" data-filter="ranged">Fernkämpfer</button>
|
||
<button class="army-filter-btn" data-filter="siege">Belagerung & Magie</button>
|
||
</div>
|
||
|
||
<div class="army-grid">
|
||
<!-- g01 Kohlenbeißer -->
|
||
<article class="unit-inspected-card animate-on-scroll" data-category="melee">
|
||
<div class="unit-render-holder">
|
||
<img src="assets/img/fig-kohlenbeisser.jpg" alt="Kohlenbeißer 3D Render" loading="lazy">
|
||
<span class="unit-tier-badge">Tier 1</span>
|
||
<div class="unit-crest-token">
|
||
<img src="assets/icons/unit_g01_kohlenbeisser_icon.png" alt="Kohlenbeißer Icon" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="unit-body-details">
|
||
<h3 class="unit-headline">Kohlenbeißer</h3>
|
||
<span class="unit-subtype-tag">Schwarm-Nahkämpfer</span>
|
||
<p class="unit-summary-text">
|
||
Zieht in Überzahl in die vorderste Reihe. Seine glutdurchzogene Steinhaut absorbiert Schnittschaden und erzeugt stetigen Druck auf schwache Linien.
|
||
</p>
|
||
<div class="unit-parameters-bar">
|
||
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 20 Gold</span>
|
||
<span class="param-pill"><img src="assets/icons/type_damage_blade.png" alt="Schaden"> Klinge</span>
|
||
<span class="param-pill"><img src="assets/icons/type_armor_light.png" alt="Rüstung"> Leicht</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- g04 Basaltbastion -->
|
||
<article class="unit-inspected-card animate-on-scroll" data-category="melee">
|
||
<div class="unit-render-holder">
|
||
<img src="assets/img/fig-basaltbastion.jpg" alt="Basaltbastion 3D Render" loading="lazy">
|
||
<span class="unit-tier-badge">Tier 4</span>
|
||
<div class="unit-crest-token">
|
||
<img src="assets/icons/unit_g04_basaltbastion_icon.png" alt="Basaltbastion Icon" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="unit-body-details">
|
||
<h3 class="unit-headline">Basaltbastion</h3>
|
||
<span class="unit-subtype-tag">Massiver Frontpanzer</span>
|
||
<p class="unit-summary-text">
|
||
Ein titanischer Block aus magmatischem Basalt. Hält selbst schwerstem Turmbeschuss stand und schützt Fernkämpfer vor feindlichen Flanken.
|
||
</p>
|
||
<div class="unit-parameters-bar">
|
||
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 110 Gold</span>
|
||
<span class="param-pill"><img src="assets/icons/type_damage_pulse.png" alt="Schaden"> Puls</span>
|
||
<span class="param-pill"><img src="assets/icons/type_armor_heavy.png" alt="Rüstung"> Schwer</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- g05 Funkenlanze -->
|
||
<article class="unit-inspected-card animate-on-scroll" data-category="melee">
|
||
<div class="unit-render-holder">
|
||
<img src="assets/img/fig-funkenlanze.jpg" alt="Funkenlanze 3D Render" loading="lazy">
|
||
<span class="unit-tier-badge">Tier 5 / Heldin</span>
|
||
<div class="unit-crest-token">
|
||
<img src="assets/icons/unit_g05_funkenlanze_icon.png" alt="Funkenlanze Icon" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="unit-body-details">
|
||
<h3 class="unit-headline">Funkenlanze</h3>
|
||
<span class="unit-subtype-tag">Präzisions-Kriegerin</span>
|
||
<p class="unit-summary-text">
|
||
Trägt eine eigenständig geriggte Lanze mit flüssiger Glutspitze. Durchsticht Reihen gepanzerter Truppen und dient als Vorlage für Heldenklassen.
|
||
</p>
|
||
<div class="unit-parameters-bar">
|
||
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 145 Gold</span>
|
||
<span class="param-pill"><img src="assets/icons/type_damage_pierce.png" alt="Schaden"> Stoß</span>
|
||
<span class="param-pill"><img src="assets/icons/type_armor_heavy.png" alt="Rüstung"> Schwer</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- g06 Glasballiste -->
|
||
<article class="unit-inspected-card animate-on-scroll" data-category="siege">
|
||
<div class="unit-render-holder">
|
||
<img src="assets/img/fig-glasballiste.jpg" alt="Glasballiste 3D Render" loading="lazy">
|
||
<span class="unit-tier-badge">Tier 6</span>
|
||
<div class="unit-crest-token">
|
||
<img src="assets/icons/unit_g06_glasballiste_icon.png" alt="Glasballiste Icon" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="unit-body-details">
|
||
<h3 class="unit-headline">Glasballiste</h3>
|
||
<span class="unit-subtype-tag">Belagerungsmaschine</span>
|
||
<p class="unit-summary-text">
|
||
Feuert geschmolzene Glasbolzen über extreme Reichweite. Richtet verheerenden Bonusschaden an feindlichen Türmen und Ancients an.
|
||
</p>
|
||
<div class="unit-parameters-bar">
|
||
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 180 Gold</span>
|
||
<span class="param-pill"><img src="assets/icons/type_damage_pierce.png" alt="Schaden"> Stoß</span>
|
||
<span class="param-pill"><img src="assets/icons/type_armor_light.png" alt="Rüstung"> Leicht</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- g08 Kraterrufer -->
|
||
<article class="unit-inspected-card animate-on-scroll" data-category="ranged">
|
||
<div class="unit-render-holder">
|
||
<img src="assets/img/fig-kraterrufer.jpg" alt="Kraterrufer 3D Render" loading="lazy">
|
||
<span class="unit-tier-badge">Tier 8</span>
|
||
<div class="unit-crest-token">
|
||
<img src="assets/icons/unit_g08_kraterrufer_icon.png" alt="Kraterrufer Icon" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="unit-body-details">
|
||
<h3 class="unit-headline">Kraterrufer</h3>
|
||
<span class="unit-subtype-tag">Magma-Schamane</span>
|
||
<p class="unit-summary-text">
|
||
Beschwört feurige Risse unter gegnerischen Einheitenbündeln. Exzellent geeignet gegen dichte Heere und zersplitterte Angriffsreihen.
|
||
</p>
|
||
<div class="unit-parameters-bar">
|
||
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 220 Gold</span>
|
||
<span class="param-pill"><img src="assets/icons/type_damage_pulse.png" alt="Schaden"> Puls</span>
|
||
<span class="param-pill"><img src="assets/icons/type_armor_aether.png" alt="Rüstung"> Äther</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- g09 Herdhüter -->
|
||
<article class="unit-inspected-card animate-on-scroll" data-category="siege">
|
||
<div class="unit-render-holder">
|
||
<img src="assets/img/fig-herdhueter.jpg" alt="Herdhüter 3D Render" loading="lazy">
|
||
<span class="unit-tier-badge">Tier 9</span>
|
||
<div class="unit-crest-token">
|
||
<img src="assets/icons/unit_g09_herdhueter_icon.png" alt="Herdhüter Icon" loading="lazy">
|
||
</div>
|
||
</div>
|
||
<div class="unit-body-details">
|
||
<h3 class="unit-headline">Herdhüter</h3>
|
||
<span class="unit-subtype-tag">Aura-Unterstützer</span>
|
||
<p class="unit-summary-text">
|
||
Kanalisiert stetige Wärmeströme auf verbündete Truppen, die das Kampftempo steigern und feindliche Verlangsamungen negieren.
|
||
</p>
|
||
<div class="unit-parameters-bar">
|
||
<span class="param-pill"><img src="assets/icons/res_gold.png" alt="Gold"> 260 Gold</span>
|
||
<span class="param-pill"><img src="assets/icons/type_damage_pulse.png" alt="Schaden"> Puls</span>
|
||
<span class="param-pill"><img src="assets/icons/type_armor_heavy.png" alt="Rüstung"> Schwer</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 6. Gameplay Cinema Theater -->
|
||
<section id="cinema" class="section-boundary" aria-labelledby="cinema-title">
|
||
<div class="container">
|
||
<div class="heading-block animate-on-scroll">
|
||
<span class="eyebrow-tag">Im Gefecht</span>
|
||
<h2 id="cinema-title" class="main-section-heading">Echte Gameplay-Aufnahmen</h2>
|
||
<p class="section-body-text">
|
||
Direkt aufgezeichnet aus dem Unity 6 URP-Player auf macOS Apple Silicon.
|
||
Volle PBR-Materialien, Hit-VFX, Turm-Bolzen und der Boss-Einsturz.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="cinema-theater-box animate-on-scroll">
|
||
<video id="cinemaVideoPlayer" controls playsinline poster="assets/img/hero-overview.png">
|
||
<source src="assets/video/turmkampf.mp4" type="video/mp4">
|
||
</video>
|
||
<div class="cinema-controls-bar">
|
||
<span id="cinemaTitleText" class="cinema-title-text">Szene 1: Turmkampf & Belagerung</span>
|
||
<div class="cinema-scene-picker">
|
||
<button class="scene-btn is-active" data-src="assets/video/turmkampf.mp4" data-title="Szene 1: Turmkampf & Belagerung">Turmkampf</button>
|
||
<button class="scene-btn" data-src="assets/video/bossbegegnung.mp4" data-title="Szene 2: Bossgrotte Mondschlund & Schlundkrone">Bossgrotte</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 7. Screenshot Mosaic & Lightbox -->
|
||
<section id="galerie" class="section-boundary" aria-labelledby="gallery-section-title">
|
||
<div class="container">
|
||
<div class="heading-block animate-on-scroll">
|
||
<span class="eyebrow-tag">Visuals</span>
|
||
<h2 id="gallery-section-title" class="main-section-heading">Galerie der Schlacht</h2>
|
||
<p class="section-body-text">
|
||
Klicke auf die Aufnahmen für hochauflösende 1080p-Ansichten.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="gallery-mosaic-grid">
|
||
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Mid-Lane Übersicht">
|
||
<img src="assets/img/hero-overview.png" alt="Mid-Lane Übersicht in Unity URP" loading="lazy">
|
||
<div class="mosaic-hover-overlay">
|
||
<span class="mosaic-label">Mid-Lane Übersicht · URP Shading</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Mondherz-Ancient">
|
||
<img src="assets/img/ancient.png" alt="Mondherz-Ancient Kristall" loading="lazy">
|
||
<div class="mosaic-hover-overlay">
|
||
<span class="mosaic-label">Mondherz-Ancient Kristall</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Bossgrotte Mondschlund">
|
||
<img src="assets/img/bosskampf.jpg" alt="Bossgrotte Mondschlund" loading="lazy">
|
||
<div class="mosaic-hover-overlay">
|
||
<span class="mosaic-label">Bossgrotte Mondschlund</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Turmfamilie">
|
||
<img src="assets/img/tuerme.png" alt="Grenzwacht- und Bastionstürme" loading="lazy">
|
||
<div class="mosaic-hover-overlay">
|
||
<span class="mosaic-label">Grenzwacht- & Bastionstürme</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Aufmarsch der Armeen">
|
||
<img src="assets/img/aufmarsch.jpg" alt="Simultaner Aufmarsch der Einheiten" loading="lazy">
|
||
<div class="mosaic-hover-overlay">
|
||
<span class="mosaic-label">Simultaner Rundenaufmarsch</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mosaic-shot-card animate-on-scroll" tabindex="0" role="button" aria-label="Screenshot vergrößern: Responsives HUD">
|
||
<img src="assets/img/planung-hud.jpg" alt="Ingame-HUD UI Toolkit" loading="lazy">
|
||
<div class="mosaic-hover-overlay">
|
||
<span class="mosaic-label">UI Toolkit Ingame-HUD</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 8. Architecture & Engineering Benchmark -->
|
||
<section class="section-boundary" aria-labelledby="tech-bench-title">
|
||
<div class="container">
|
||
<div class="heading-block animate-on-scroll">
|
||
<span class="eyebrow-tag">Studio Engineering</span>
|
||
<h2 id="tech-bench-title" class="main-section-heading">Deterministische Performance</h2>
|
||
<p class="section-body-text">
|
||
Keine Desyncs, kein Würfelglück. Gebaut nach den höchsten technischen Maßstäben
|
||
moderner E-Sport-Architektur.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="hero-kpi-bar animate-on-scroll" style="margin-bottom: 2rem;">
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">457 / 457</div>
|
||
<span class="kpi-subtext">Tests Bestanden</span>
|
||
</div>
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">0.00 Dev</div>
|
||
<span class="kpi-subtext">Golden-Parität zu Godot</span>
|
||
</div>
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">< 0.1 ms</div>
|
||
<span class="kpi-subtext">C# Simulationsschritt</span>
|
||
</div>
|
||
<div class="kpi-cell">
|
||
<div class="kpi-metric">Native TCP</div>
|
||
<span class="kpi-subtext">20 Snapshots / Sekunde</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 9. Platform Download & Requirements Matrix -->
|
||
<section id="download" class="section-boundary" aria-labelledby="download-fortress-title">
|
||
<div class="container">
|
||
<div class="download-fortress-box animate-on-scroll">
|
||
<div class="heading-block" style="margin-bottom: 2.5rem;">
|
||
<span class="eyebrow-tag">Jetzt Einsteigen</span>
|
||
<h2 id="download-fortress-title" class="main-section-heading">Spiele die Aktuelle Demo</h2>
|
||
<p class="section-body-text">
|
||
Frei verfügbar für Entwickler, Tester und Strategie-Pioniere. Nativ kompiliert für moderne Plattformen.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Platform Selector Switch -->
|
||
<div class="platform-switch-row" role="tablist" aria-label="Plattform auswählen">
|
||
<button class="platform-select-btn is-active" data-platform="mac" role="tab" aria-selected="true">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.85c.66-.82 1.11-1.96.99-3.1-.96.04-2.12.64-2.8 1.44-.6.69-1.12 1.83-1 2.95 1.07.08 2.15-.47 2.81-1.29z"/></svg>
|
||
<span>macOS (Apple Silicon)</span>
|
||
</button>
|
||
|
||
<button class="platform-select-btn" data-platform="win" role="tab" aria-selected="false">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.951-1.801"/></svg>
|
||
<span>Windows 11 (x64 / ARM)</span>
|
||
</button>
|
||
|
||
<button class="platform-select-btn" data-platform="linux" role="tab" aria-selected="false">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a5 5 0 0 0-5 5v3a5 5 0 0 0 10 0V7a5 5 0 0 0-5-5zm-7 13c0 3.31 3.13 6 7 6s7-2.69 7-6c0-2-2-4-5-5h-4c-3 1-5 3-5 5z"/></svg>
|
||
<span>Linux (Fedora / Ubuntu)</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="spec-and-cta-grid">
|
||
<div class="spec-breakdown-card">
|
||
<div class="spec-table">
|
||
<div class="spec-row">
|
||
<span class="spec-label">Betriebssystem</span>
|
||
<span id="specOS" class="spec-value">macOS 14 Sonoma (empfohlen: macOS 15+)</span>
|
||
</div>
|
||
<div class="spec-row">
|
||
<span class="spec-label">Grafikchip</span>
|
||
<span id="specGPU" class="spec-value">Apple Silicon (M1 / M2 / M3 / M4 / M5) oder Metal-GPU</span>
|
||
</div>
|
||
<div class="spec-row">
|
||
<span class="spec-label">Arbeitsspeicher</span>
|
||
<span id="specRAM" class="spec-value">8 GB RAM (empfohlen: 16 GB)</span>
|
||
</div>
|
||
<div class="spec-row">
|
||
<span class="spec-label">Festplattenspeicher</span>
|
||
<span id="specStorage" class="spec-value">350 MB freier Speicherplatz</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="cta-package-card">
|
||
<span style="font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 700;">Paket-Bezeichnung</span>
|
||
<div id="specPackageName" style="font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #fff;">
|
||
ChampionsOfLuneraria-macOS-universal.zip
|
||
</div>
|
||
<a href="../dist/luneraria/" class="btn-gold-sheen" style="width: 100%;">
|
||
<span>Paket Herunterladen</span>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||
<polyline points="7 10 12 15 17 10"></polyline>
|
||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||
</svg>
|
||
</a>
|
||
<span style="font-size: 0.78rem; color: var(--text-muted);">
|
||
Inklusive Offline-Modus, Bot-Gegner & lokaler Loopback-Lobby
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- Studio Lightbox Modal -->
|
||
<div id="studioLightboxModal" class="studio-lightbox-modal" role="dialog" aria-modal="true" aria-label="Screenshot Vollansicht">
|
||
<div class="lightbox-frame">
|
||
<button id="lightboxCloseTrigger" class="lightbox-close-trigger" aria-label="Schließen">×</button>
|
||
<div class="lightbox-viewport">
|
||
<img id="lightboxActiveImg" src="" alt="Screenshot Detailansicht">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Studio Footer -->
|
||
<footer class="studio-footer" role="contentinfo">
|
||
<div class="container">
|
||
<div class="footer-top-row">
|
||
<div>
|
||
<span style="font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: 0.08em;">CHAMPIONS OF LUNERARIA</span>
|
||
<p style="font-size: 0.82rem; color: var(--text-muted); margin-top: 4px;">Competitive 3-Lane Autobattler · Powered by Unity 6.3 LTS & C# Core</p>
|
||
</div>
|
||
|
||
<button id="btnScrollTop" class="btn-up-arrow">
|
||
<span>Nach oben</span>
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<line x1="12" y1="19" x2="12" y2="5"></line>
|
||
<polyline points="5 12 12 5 19 12"></polyline>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="footer-bottom-row">
|
||
<p>© 2026 Champions of Luneraria. Alle Rechte vorbehalten.</p>
|
||
<div style="display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--lunar-cyan);">
|
||
<span style="width: 7px; height: 7px; background: var(--lunar-cyan); border-radius: 50%; display: inline-block;"></span>
|
||
Lokaler Server aktiv auf Port 8088
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Scripts -->
|
||
<script src="assets/js/audio.js"></script>
|
||
<script src="assets/js/map.js"></script>
|
||
<script src="assets/js/main.js"></script>
|
||
</body>
|
||
</html>
|