Refactor code structure and remove redundant changes

This commit is contained in:
2026-07-12 18:16:31 +02:00
parent 23f20e4371
commit 80ee4cc892
101 changed files with 10541 additions and 2 deletions
+181
View File
@@ -0,0 +1,181 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starlight Echoes - Indie Game Launch</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom configuration for Tailwind to define unique colors/fonts */
:root {
--color-primary: #D90429; /* Deep Red/Crimson for urgency/passion */
--color-secondary: #3B82F6; /* Blue for contrast/calm */
--color-dark: #1F2937; /* Slate-800 for background depth */
}
body {
font-family: 'Inter', sans-serif;
background-color: #0f172a; /* Dark Blue-Gray background */
color: #e2e8f0;
}
.btn-primary {
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(217, 4, 41, 0.4);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(217, 4, 41, 0.6);
background-color: #c50026;
}
/* Subtle hover effect for feature cards */
.feature-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.3);
}
/* Custom gradient overlay for mood */
.hero-overlay {
background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.2)),
url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22627%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23111827%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20fill%3D%22%239CA3AF%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2236%22%3EHero%20image%20unavailable%3C%2Ftext%3E%3C%2Fsvg%3E') center/cover no-repeat;
}
</style>
<!-- Include Inter font via Google Fonts CDN if Tailwind doesn't handle it -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;500;700;900&display=swap" rel="stylesheet">
</head>
<body class="antialiased">
<!-- Navigation Bar -->
<header class="sticky top-0 z-20 bg-gray-900/90 backdrop-blur-sm shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex-shrink-0">
<span class="text-2xl font-black tracking-wider text-red-600">STARDUST</span>
</div>
<nav class="flex space-x-8">
<a href="#features" class="text-sm font-medium transition duration-150 hover:text-blue-400">Features</a>
<a href="#story" class="text-sm font-medium transition duration-150 hover:text-blue-400">The Lore</a>
<a href="#community" class="text-sm font-medium transition duration-150 hover:text-blue-400">Community</a>
</nav>
<div class="flex items-center space-x-4">
<a href="#" class="text-sm font-semibold text-white px-4 py-2 border border-white hover:bg-white hover:text-gray-900 transition duration-150 focus:outline-none focus:ring-2 focus:ring-red-500">Wishlist</a>
<a href="#download" class="btn-primary bg-red-600 text-white px-6 py-2 rounded-lg text-sm font-bold focus:outline-none focus:ring-4 focus:ring-red-300 shadow-red-500/50">Wishlist Now</a>
</div>
</div>
</div>
</header>
<main>
<!-- 1. Hero Section -->
<section class="hero-overlay relative h-[70vh] md:h-[90vh] flex items-center justify-center text-center shadow-xl" style="background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22627%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23111827%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20dominant-baseline%3D%22middle%22%20text-anchor%3D%22middle%22%20fill%3D%22%239CA3AF%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2236%22%3EHero%20image%20unavailable%3C%2Ftext%3E%3C%2Fsvg%3E');">
<div class="absolute inset-0 hero-overlay"></div>
<div class="relative z-10 p-6 max-w-4xl mx-auto">
<h1 class="text-6xl md:text-8xl font-extrabold text-white leading-tight mb-4 drop-shadow-lg tracking-tighter">
Starlight Echoes
</h1>
<p class="text-xl md:text-3xl text-gray-200 mb-10 font-light italic">
Navigate the forgotten constellations. A narrative adventure game of cosmic discovery and quiet reflection.
</p>
<div class="flex justify-center space-x-6 mb-8">
<a href="#preorder" class="btn-primary bg-red-600 text-white px-10 py-4 text-lg font-bold rounded-xl shadow-lg">
Wishlist on Steam
</a>
<a href="#features" class="bg-transparent border-2 border-white text-white px-10 py-4 text-lg font-bold rounded-xl hover:bg-white hover:text-gray-900 transition duration-300 focus:outline-none focus:ring-4 focus:ring-white/50">
View Trailer
</a>
</div>
<!-- Image Attribution -->
<div class="mt-8 text-sm text-white/70 flex justify-center items-center">
Photo by Pexels on <a href="https://www.pexels.com/" target="_blank" class="underline hover:text-white">Pexels</a>
</div>
</div>
</section>
<!-- 2. Core Pitch Section -->
<section id="pitch" class="py-20 bg-gray-900 border-t border-b border-red-700">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<span class="text-sm uppercase tracking-widest text-red-400 block mb-3">The Journey Begins</span>
<h2 class="text-5xl md:text-6xl font-black text-white mb-6 leading-snug">
Where Silence Speaks Louder Than Sound.
</h2>
<p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-10">
Starlight Echoes is a contemplative journey through a dying celestial map. Explore fragmented memories, solve intricate environmental puzzles, and uncover the true cost of stellar collapse.
</p>
<a href="#" class="btn-primary bg-blue-600 text-white px-8 py-3 text-lg font-semibold rounded-lg shadow-blue-500/50 focus:outline-none focus:ring-4 focus:ring-blue-300">
Read Full Synopsis
</a>
</div>
</section>
<!-- 3. Features Section -->
<section id="features" class="py-24 bg-gray-950">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<span class="text-red-500 text-sm uppercase tracking-widest block mb-2">Key Features</span>
<h2 class="text-5xl md:text-6xl font-extrabold text-white">
Crafted for Immersion.
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<!-- Feature Card 1 -->
<div class="feature-card p-8 bg-gray-800 rounded-xl border-t-4 border-red-600 shadow-2xl text-center">
<svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M9.663 17l.955-.955m4.673 0l-.955.955M4 12h16M4 8h16M4 4h16"></path></svg>
<h3 class="text-2xl font-bold text-white mb-3">Procedural Stellar Cartography</h3>
<p class="text-gray-400">Each sector of the galaxy is unique, generating infinite possibilities for discovery and unique environmental challenges.</p>
</div>
<!-- Feature Card 2 -->
<div class="feature-card p-8 bg-gray-800 rounded-xl border-t-4 border-red-600 shadow-2xl text-center">
<svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5s3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18s-3.332.477-4.5 1.253"></path></svg>
<h3 class="text-2xl font-bold text-white mb-3">Deep Narrative Resonance</h3>
<p class="text-gray-400">Engage with complex, emotionally driven storylines. Choices echo through the void, altering the fate of your stellar companions.</p>
</div>
<!-- Feature Card 3 -->
<div class="feature-card p-8 bg-gray-800 rounded-xl border-t-4 border-red-600 shadow-2xl text-center">
<svg class="w-12 h-12 mx-auto text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.938a6.002 6.002 0 00-6.721 6.721L12 17l2.618-2.618a6.002 6.002 0 00-6.721-6.721z"></path></svg>
<h3 class="text-2xl font-bold text-white mb-3">Atmospheric Soundscape</h3>
<p class="text-gray-400">Immerse yourself in a meticulously crafted soundscape. The ambient hum of deep space guides your emotional state.</p>
</div>
</div>
</div>
</section>
<!-- 4. Story/Lore Section -->
<section id="story" class="py-24 bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="md:flex md:space-x-12 items-center">
<!-- Image/Visual Element Area -->
<div class="md:w-1/2 mb-8 md:mb-0 relative overflow-hidden rounded-xl shadow-2xl">
<!-- Placeholder for a conceptual piece of art/visual asset -->
<div class="h-96 bg-gray-700 flex items-center justify-center p-8 text-center transform hover:scale-[1.02] transition duration-500">
<h3 class="text-3xl font-serif italic text-gray-300">Conceptual Art: The Nebula Core</h3>
</div>
<!-- Small decorative border/overlay -->
<div class="absolute inset-0 border-4 border-red-900/50 pointer-events-none"></div>
</div>
<!-- Text Content Area -->
<div class="md:w-1/2">
<span class="text-red-500 text-sm uppercase tracking-widest block mb-3">The Cosmic Narrative</span>
<h2 class="text-5xl font-extrabold text-white mb-6 leading-tight">
The Silence Between Stars.
</h2>
<p class="text-lg text-gray-300 mb-6 leading-relaxed">
You are the last Echo—a sentient fragment drifting through a galaxy where light itself is fading. Starlight Echoes is not about explosions; it is about the profound beauty found in decay. Each dead star holds a secret, a final message left by a civilization that dared to dream beyond the observable.
</p>
<p class="text-base text-gray-400 mb-8 italic border-l-4 border-red-500 pl-4">
"We seek not salvation, but understanding. We seek the quiet truth hidden in the void." - The Starlight Archives.
</p>
<a href="#" class="text-lg font-semibold text-red-400 hover:text-red-300 transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 inline-flex items-center">
Explore Lore Deep Dive &rarr;
</a><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 32.28s</div>