216 lines
12 KiB
HTML
216 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AURORA ECHOES - Indie Game Launch</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
/* Custom Font Styling for bold impact */
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Merriweather:wght@400;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Merriweather', serif;
|
|
background-color: #121212; /* Deep dark background */
|
|
color: #e0e0e0;
|
|
transition: background-color 0.5s ease;
|
|
}
|
|
|
|
.font-display {
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
.hero-bg {
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1506744038154-7191a89e4c8e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080'); /* Placeholder for moody, atmospheric art */
|
|
background-size: cover;
|
|
background-position: center;
|
|
min-height: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
/* Subtle Hover Effect for Interactivity */
|
|
.interactive-btn {
|
|
transition: all 0.3s ease-in-out;
|
|
box-shadow: 0 4px 15px rgba(255, 100, 100, 0.3);
|
|
}
|
|
|
|
.interactive-btn:hover {
|
|
transform: translateY(-3px) scale(1.02);
|
|
box-shadow: 0 8px 25px rgba(255, 100, 100, 0.6);
|
|
background-color: #ff6464;
|
|
}
|
|
|
|
/* Animated text glow on focus/hover for emphasis */
|
|
.glowing-title {
|
|
text-shadow: 0 0 5px rgba(255, 100, 100, 0.5), 0 0 15px rgba(255, 100, 100, 0.2);
|
|
animation: pulse-shadow 3s infinite alternate;
|
|
}
|
|
|
|
@keyframes pulse-shadow {
|
|
from {
|
|
text-shadow: 0 0 5px rgba(255, 100, 100, 0.3);
|
|
}
|
|
to {
|
|
text-shadow: 0 0 10px rgba(255, 100, 100, 0.6);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
|
|
<header class="sticky top-0 z-20 bg-gray-950/90 backdrop-blur-md shadow-lg border-b border-red-900">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
|
<div class="text-2xl font-display font-bold text-red-400 tracking-widest">
|
|
AURORA ECHOES
|
|
</div>
|
|
<nav>
|
|
<a href="#features" class="text-sm text-gray-300 hover:text-red-400 px-3 py-2 border-b-2 border-transparent hover:border-red-500 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Merkmale</a>
|
|
<a href="#media" class="text-sm text-gray-300 hover:text-red-400 px-3 py-2 border-b-2 border-transparent hover:border-red-500 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Trailer</a>
|
|
<a href="#preorder" class="text-sm text-gray-300 hover:text-red-400 px-3 py-2 border-b-2 border-transparent hover:border-red-500 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Vorbestellen</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<!-- Hero Section -->
|
|
<section class="hero-bg">
|
|
<div class="p-6 max-w-4xl mx-auto">
|
|
<h1 class="font-display text-6xl sm:text-7xl font-black text-white mb-4 tracking-tight glowing-title uppercase">
|
|
Aurora Echoes
|
|
</h1>
|
|
<p class="font-display text-xl sm:text-2xl text-gray-200 mb-8 italic">
|
|
Ein Abenteuer in den vergessenen Korridoren der Seele. Entdecke die Melodie der Stille.
|
|
</p>
|
|
<div class="flex justify-center space-x-4">
|
|
<a href="#preorder" class="interactive-btn font-display text-lg px-10 py-4 bg-red-600 text-white rounded-lg uppercase shadow-xl focus:outline-none focus:ring-4 focus:ring-red-400">
|
|
JETZT VORBESTELLEN
|
|
</a>
|
|
<a href="#media" class="interactive-btn font-display text-lg px-10 py-4 bg-gray-700/50 text-gray-200 rounded-lg uppercase border-2 border-gray-500 hover:border-red-400 focus:outline-none focus:ring-2 focus:ring-gray-400">
|
|
Trailer Ansehen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section id="features" class="py-20 lg:py-32 bg-gray-950">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16">
|
|
<h2 class="font-display text-5xl font-bold text-white mb-3 tracking-wider">
|
|
Die Welt von Aurora
|
|
</h2>
|
|
<p class="text-xl text-red-400 font-display">
|
|
Tiefe, Atmosphäre und emotionale Resonanz.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-10">
|
|
|
|
<!-- Feature 1 -->
|
|
<div class="bg-gray-800 p-8 rounded-xl shadow-2xl border-t-4 border-red-700 hover:shadow-red-900/50 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:border-red-400" tabindex="0">
|
|
<h3 class="font-display text-3xl font-bold text-red-400 mb-3">Resonanz-System</h3>
|
|
<p class="text-gray-300 text-lg">
|
|
Jede Interaktion verändert die Welt subtil. Das System erfasst Entscheidungen und spiegelt sie in der Landschaft wider, was zu einer einzigartigen Erfahrung führt.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="bg-gray-800 p-8 rounded-xl shadow-2xl border-t-4 border-red-700 hover:shadow-red-900/50 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:border-red-400" tabindex="0">
|
|
<h3 class="font-display text-3xl font-bold text-red-400 mb-3">Narrative Tiefe</h3>
|
|
<p class="text-gray-300 text-lg">
|
|
Kein geradliniger Pfad. Aurora Echoes präsentiert eine nicht-lineare Erzählung, die sich organisch aus Ihren Handlungen entwickelt und Charaktertiefe gewinnt.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="bg-gray-800 p-8 rounded-xl shadow-2xl border-t-4 border-red-700 hover:shadow-red-900/50 transition duration-300 transform hover:-translate-y-1 focus:outline-none focus:border-red-400" tabindex="0">
|
|
<h3 class="font-display text-3xl font-bold text-red-400 mb-3">Atmosphärisches Design</h3>
|
|
<p class="text-gray-300 text-lg">
|
|
Visuelle und auditive Kompositionen, die eine melancholische, aber majestätische Stimmung erzeugen. Musik ist ein integraler Bestandteil der Geschichte.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Media/Trailer Section -->
|
|
<section id="media" class="py-20 lg:py-32 bg-gray-900 border-t border-red-900">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="font-display text-5xl font-bold text-white mb-10">
|
|
Sehen Sie die Echoes
|
|
</h2>
|
|
|
|
<!-- Mock Video Player Container -->
|
|
<div class="relative w-full max-w-4xl mx-auto shadow-2xl rounded-lg overflow-hidden border-4 border-gray-700 group">
|
|
<!-- In a real build, this would be an embedded YouTube/Vimeo iframe -->
|
|
<div class="aspect-video bg-black flex items-center justify-center p-10">
|
|
<div class="text-center">
|
|
<svg class="w-24 h-24 mx-auto text-red-500 transition-transform duration-300 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M6 4l14 8-14 8V4z"></path>
|
|
</svg>
|
|
<p class="font-display text-xl mt-2 text-gray-400">TRAILER ANZEIGE HIER</p>
|
|
<p class="text-sm text-gray-500">(Klicken Sie auf den Button im Header für die Ansicht)</p>
|
|
</div>
|
|
</div>
|
|
<!-- Overlay for extra polish -->
|
|
<div class="absolute inset-0 bg-black/30 transition duration-500 group-hover:bg-black/10"></div>
|
|
</div>
|
|
<p class="mt-8 text-lg text-gray-400">
|
|
Tauchen Sie ein in die düsteren Gewässer von Aurora Echoes.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Preorder CTA Section -->
|
|
<section id="preorder" class="py-24 bg-gray-950 border-t border-b border-red-900">
|
|
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<h2 class="font-display text-6xl font-extrabold text-white mb-4 tracking-tight">
|
|
Sichern Sie sich Ihren Platz
|
|
</h2>
|
|
<p class="text-2xl text-red-400 mb-10 font-display">
|
|
Die Vorbestellphase startet in Kürze. Seien Sie der Erste, der die Stille bricht.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center gap-6 max-w-3xl mx-auto">
|
|
|
|
<!-- Option 1: Digital -->
|
|
<div class="bg-gray-800 p-6 rounded-lg flex-1 border-2 border-gray-700 hover:border-red-500 transition duration-300 shadow-lg text-center focus-within:ring-4 focus-within:ring-red-500">
|
|
<h4 class="font-display text-3xl font-bold text-red-300 mb-2">Digital Edition</h4>
|
|
<p class="text-4xl font-display font-bold text-white mb-4">49,99 €</p>
|
|
<button class="interactive-btn w-full py-3 bg-red-700 text-white font-semibold rounded-md uppercase focus:outline-none" tabindex="0">
|
|
Jetzt Reservieren
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Option 2: Deluxe -->
|
|
<div class="bg-gray-800 p-6 rounded-lg flex-1 border-2 border-gray-700 hover:border-red-500 transition duration-300 shadow-lg text-center focus-within:ring-4 focus-within:ring-red-500">
|
|
<h4 class="font-display text-3xl font-bold text-red-300 mb-2">Collector's Edition</h4>
|
|
<p class="text-4xl font-display font-bold text-white mb-4">79,99 €</p>
|
|
<button class="interactive-btn w-full py-3 bg-gray-700 text-white font-semibold rounded-md uppercase focus:outline-none" tabindex="0">
|
|
Limitierte Vorbestellung
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 text-center text-gray-400 text-sm">
|
|
<p>Geplante Veröffentlichung: Q4 2024. Informationen werden hier aktualisiert.</p>
|
|
<p class="mt-2">© 2024 Aurora Echoes Development Team</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-gray-950 border-t border-red-900 py-8">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-gray-500">
|
|
<div class="flex justify-center space-x-6 mb-4">
|
|
<a href="#" class="hover:text-red-400 transition duration-150 focus:outline-none">Twitter</a>
|
|
<a href="#" class="hover:text-red-400 transition duration-150 focus:outline-none">Discord</a>
|
|
<a href="#" class="hover:text-red-400 transition duration-150 focus:outline-none">Steam</a>
|
|
</div>
|
|
<p class="font-display text-lg">© Aurora Echoes. Alles Rechte vorbehalten.</p>
|
|
</div><div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 30.81s</div> |