197 lines
9.8 KiB
HTML
197 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ initial_language }}">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title data-i18n="meta.title">8-Damen- und 8-Tuerme Solver</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/footer.css') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<header class="landing-nav">
|
|
<a class="brand" href="{{ url_for('main.home') }}">
|
|
<span class="brand-mark">♛</span>
|
|
<span data-i18n="nav.brand">8-Damen- und 8-Tuerme Solver</span>
|
|
</a>
|
|
|
|
<nav class="landing-links">
|
|
<a href="#problem" data-i18n="nav.problem">Problem</a>
|
|
<a href="#features" data-i18n="nav.features">Features</a>
|
|
<a href="#journey" data-i18n="nav.journey">Ablauf</a>
|
|
<button class="lang-switch" id="langSwitch" type="button" aria-label="Sprache wechseln">DE</button>
|
|
<a class="nav-cta secondary" href="{{ url_for('login.login') }}" data-i18n="nav.login">Login</a>
|
|
<a class="nav-cta" href="{{ url_for('login.register') }}" data-i18n="nav.signup">Create Account</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="hero-copy">
|
|
<p class="eyebrow" data-i18n="hero.eyebrow">Interaktives Lernen mit Strategie, Logik und Backtracking
|
|
</p>
|
|
<h1 data-i18n="hero.title">Entdecke das Acht-Damen- und Acht-Türme-Problem.</h1>
|
|
<p class="hero-text" data-i18n="hero.text">
|
|
Diese App macht aus einem klassischen Informatik- und Mathematikproblem ein interaktives Erlebnis:
|
|
Setze Damen oder Türme, verfolge den Solver Schritt für Schritt, miss deine Zeit und speichere
|
|
clevere Zwischenstände.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<a class="hero-button primary" href="{{ url_for('login.register') }}"
|
|
data-i18n="hero.primaryCta">Jetzt starten</a>
|
|
<a class="hero-button secondary" href="{{ url_for('login.login') }}"
|
|
data-i18n="hero.secondaryCta">Bereits Account? Login</a>
|
|
</div>
|
|
|
|
<div class="hero-facts">
|
|
<article>
|
|
<strong data-i18n="hero.fact1Title">Skalierbar</strong>
|
|
<span data-i18n="hero.fact1Text">Brettgrösse flexibel anpassen</span>
|
|
</article>
|
|
<article>
|
|
<strong data-i18n="hero.fact2Title">Schritt für Schritt</strong>
|
|
<span data-i18n="hero.fact2Text">Solver mit Animation</span>
|
|
</article>
|
|
<article>
|
|
<strong data-i18n="hero.fact3Title">Save-Points</strong>
|
|
<span data-i18n="hero.fact3Text">Zeit und Fortschritt behalten</span>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-visual">
|
|
<div class="board-showcase" id="heroBoard" aria-hidden="true"></div>
|
|
<div class="floating-card solver-card">
|
|
<p class="floating-label" data-i18n="hero.solverLabel">Solver</p>
|
|
<p class="floating-value" data-i18n="hero.solverValue">Backtracking live</p>
|
|
</div>
|
|
<div class="floating-card timer-card">
|
|
<p class="floating-label" data-i18n="hero.challengeLabel">Challenge</p>
|
|
<p class="floating-value" data-i18n="hero.challengeValue">Zeit und Schritte messen</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="info-band" id="problem">
|
|
<div class="info-band-inner">
|
|
<p class="eyebrow" data-i18n="problem.eyebrow">Warum dieses Problem spannend ist</p>
|
|
<h2 data-i18n="problem.title">Die Acht-Damen- und Acht-Tuerme-Probleme sind mehr als Schachrätsel.</h2>
|
|
<p data-i18n="problem.text">
|
|
Beim Acht-Damen-Problem suchst du eine Anordnung von acht Damen auf einem Schachbrett, sodass sich
|
|
keine zwei Damen schlagen. Beim Acht-Türme-Problem gilt dieselbe Idee für Türme, nur mit
|
|
einfacheren Konfliktregeln. Beide Aufgaben zeigen, wie Mustererkennung, systematische Suche und
|
|
Backtracking funktionieren.
|
|
<br><br>
|
|
Gerade beim Damenproblem wird schnell sichtbar, warum Strategie wichtig ist: Es gibt unzählige
|
|
mögliche Platzierungen, aber nur sehr wenige wirklich gültige Lösungen. Genau das macht diese
|
|
App spannend, weil man nicht nur das Ergebnis sieht, sondern auch den Weg dorthin.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="feature-section" id="features">
|
|
<div class="section-heading">
|
|
<p class="eyebrow" data-i18n="features.eyebrow">Was die Applikation bietet</p>
|
|
<h2 data-i18n="features.title">Von der Idee bis zur gelösten Stellung.</h2>
|
|
</div>
|
|
|
|
<div class="feature-grid">
|
|
<article class="feature-card">
|
|
<span class="feature-icon">♟</span>
|
|
<h3 data-i18n="features.card1Title">Interaktives Brett</h3>
|
|
<p data-i18n="features.card1Text">Setze Damen oder Tuerme direkt auf dem Brett und prüfe, ob deine
|
|
Anordnung konfliktfrei ist.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<span class="feature-icon">⚙</span>
|
|
<h3 data-i18n="features.card2Title">Solver mit Animation</h3>
|
|
<p data-i18n="features.card2Text">Beobachte den Lösungsweg Schritt für Schritt und verstehe, wie
|
|
Backtracking arbeitet.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<span class="feature-icon">⏱</span>
|
|
<h3 data-i18n="features.card3Title">Zeit und Schritte</h3>
|
|
<p data-i18n="features.card3Text">Miss deinen Fortschritt während des Spiels und vergleiche
|
|
unterschiedliche Versuche.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<span class="feature-icon">💾</span>
|
|
<h3 data-i18n="features.card4Title">Save-Points</h3>
|
|
<p data-i18n="features.card4Text">Speichere Zwischenstaende mit Notizen, Zeiten und Schrittzahl für
|
|
späteres Weiterarbeiten.</p>
|
|
</article>
|
|
|
|
<article class="feature-card">
|
|
<span class="feature-icon">▦</span>
|
|
<h3 data-i18n="features.card5Title">Skalierbare Bretter</h3>
|
|
<p data-i18n="features.card5Text">Passe die Brettgrösse an und erkunde die Probleme nicht nur auf
|
|
dem klassischen 8x8-Brett.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="journey-section" id="journey">
|
|
<div class="section-heading">
|
|
<p class="eyebrow" data-i18n="journey.eyebrow">So funktioniert dein Einstieg</p>
|
|
<h2 data-i18n="journey.title">In wenigen Schritten vom ersten Besuch zur eigenen Lösung.</h2>
|
|
</div>
|
|
|
|
<div class="journey-grid">
|
|
<article class="journey-step">
|
|
<span class="step-number">01</span>
|
|
<h3 data-i18n="journey.step1Title">Account erstellen</h3>
|
|
<p data-i18n="journey.step1Text">Registriere dich und erhalte Zugang zu Dashboard, Save-Points und
|
|
deinem Fortschritt.</p>
|
|
</article>
|
|
|
|
<article class="journey-step">
|
|
<span class="step-number">02</span>
|
|
<h3 data-i18n="journey.step2Title">Spielmodus wählen</h3>
|
|
<p data-i18n="journey.step2Text">Arbeite mit Damen oder Türmen und passe die Brettgrösse deinem Ziel
|
|
an.</p>
|
|
</article>
|
|
|
|
<article class="journey-step">
|
|
<span class="step-number">03</span>
|
|
<h3 data-i18n="journey.step3Title">Lösen oder analysieren</h3>
|
|
<p data-i18n="journey.step3Text">Teste eigene Ideen oder lass dir die Lösung visuell vom Solver
|
|
lösen lassen, dabei wird 1:1
|
|
gezeigt wie der Solver vorgeht.</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta-section">
|
|
<div class="cta-panel">
|
|
<p class="eyebrow" data-i18n="cta.eyebrow">Bereit für den ersten Versuch?</p>
|
|
<h2 data-i18n="cta.title">Mach aus einem bekannten Problem ein sichtbares Lernerlebnis.</h2>
|
|
<p data-i18n="cta.text">
|
|
Starte mit einem Account, speichere deine Zwischenstände und finde heraus, wie schnell du eine
|
|
konfliktfreie Lösung erreichst.
|
|
</p>
|
|
|
|
<div class="hero-actions">
|
|
<a class="hero-button primary" href="{{ url_for('login.register') }}"
|
|
data-i18n="cta.primaryCta">Create Account</a>
|
|
<a class="hero-button secondary" href="{{ url_for('login.login') }}"
|
|
data-i18n="cta.secondaryCta">Login</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
{% include "partials/footer.html" %}
|
|
|
|
<script>
|
|
window.LANDING_INITIAL_LANGUAGE = "{{ initial_language }}";
|
|
</script>
|
|
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
|
</body>
|
|
|
|
</html>
|