Made consistent design for landing page and login. Landing page has all the text and design.
Added language support for english and german (swappable)
This commit is contained in:
+176
-49
@@ -1,66 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="{{ initial_language }}">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Solver App{% endblock %}</title>
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
|
||||
{% block head_extra %}{% endblock %}
|
||||
<title data-i18n="meta.title">8-Damen- und 8-Tuerme Solver</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/index.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>
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="navbar">
|
||||
<div class="container">
|
||||
<h1 class="logo">SolverApp</h1>
|
||||
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/dashboard">Solver</a>
|
||||
|
||||
{% if session.get('user_id') %}
|
||||
<a href="/dashboard">Dashboard</a>
|
||||
<a href="/logout">Logout</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('login.login') }}">Login</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Flash messages -->
|
||||
<main class="container">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="flash-container">
|
||||
{% for category, message in messages %}
|
||||
<div class="flash {{ category }}">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
<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>
|
||||
|
||||
<!-- Page Content -->
|
||||
{% block content %}{% endblock %}
|
||||
<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>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<p>© {{ 2026 }} SolverApp</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JS -->
|
||||
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
<script>
|
||||
window.LANDING_INITIAL_LANGUAGE = "{{ initial_language }}";
|
||||
</script>
|
||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user