christian/website-ai-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code structure and remove redundant changes

Browse Source
This commit is contained in:
christian
2026-07-12 18:16:31 +02:00
parent 23f20e4371
commit 80ee4cc892
101 changed files with 10541 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/seed-074661f321b70482.html
+216
View File
@@ -0,0 +1,216 @@
<!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">&copy; 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>