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-f58762056086de79.html
+242
View File
@@ -0,0 +1,242 @@
<!doctype html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echoes of the Shore | A Cozy Narrative Adventure</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
<style>
:root {
--primary: #e63946;
--accent: #f1faee;
}
body {
font-family: 'Inter', sans-serif;
background-color: #0a0f14;
color: #e2e8f0;
}
h1, h2, h3, .font-serif {
font-family: 'DM+Serif+Display', serif;
}
.glass {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.hero-gradient {
background: linear-gradient(to bottom, rgba(10, 15, 20, 0) 0%, rgba(10, 15, 20, 1) 100%);
}
.btn-glow:hover {
box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
transform: translateY(-2px);
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.reveal {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body class="antialiased">
<!-- Navigation -->
<nav class="fixed w-full z-50 px-6 py-4 flex justify-between items-center glass">
<div class="text-2xl font-serif font-bold tracking-tighter text-white">E.O.S</div>
<div class="hidden md:flex space-x-8 text-sm font-medium uppercase tracking-widest">
<a href="#story" class="hover:text-rose-500 transition">Story</a>
<a href="#gameplay" class="hover:text-rose-500 transition">Gameplay</a>
<a href="#gallery" class="hover:text-rose-500 transition">Gallery</a>
<a href="#contact" class="hover:text-rose-500 transition">Join Us</a>
</div>
<a href="#" class="bg-rose-600 hover:bg-rose-700 text-white px-6 py-2 rounded-full text-sm font-bold transition duration-300">WISHLIST NOW</a>
</nav>
<!-- Hero Section -->
<header class="relative h-screen flex items-center justify-center overflow-hidden">
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" alt="An open book resting on a cozy blanket by the window, creating a warm and serene reading atmosphere." class="absolute w-full h-full object-cover scale-105" style="filter: brightness(0.6);">
<div class="absolute inset-0 hero-gradient"></div>
<div class="relative z-10 text-center px-4 max-w-4xl">
<span class="inline-block px-3 py-1 mb-6 border border-white/30 rounded-full text-xs uppercase tracking-[0.3em] bg-white/10 animate-bounce">Coming to Steam & Switch</span>
<h1 class="text-6xl md:text-9xl font-bold mb-6 leading-none text-white">Echoes of the Shore</h1>
<p class="text-lg md:text-2xl mb-10 text-gray-300 max-w-2xl mx-auto font-light leading-relaxed">
A hand-painted narrative journey about memory, loss, and the secrets hidden beneath the tide of a sleepy coastal village.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<button class="btn-glow bg-rose-600 text-white px-10 py-4 rounded-lg text-lg font-bold transition-all duration-300">Pre-Order Early Access</button>
<button class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white px-10 py-4 rounded-lg text-lg font-bold border border-white/20 transition-all">Watch Trailer</button>
</div>
</div>
<div class="absolute bottom-8 left-8 text-[10px] text-white/40 uppercase tracking-widest">
Photo by <a href="https://www.pexels.com/photo/an-open-book-on-a-gray-blanket-7879385/" class="underline">William Choquette</a> on Pexels
</div>
</header>
<!-- Story Section -->
<section id="story" class="py-24 px-6 md:px-20 bg-[#0d1218]">
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
<div class="reveal">
<h2 class="text-4xl md:text-6xl mb-8 text-rose-400">The Village Remembers.</h2>
<p class="text-gray-400 leading-relaxed mb-6 text-lg">
In the village of Oakhaven, the fog doesn't just hide the land—it holds the echoes of what was lost. You play as Elara, a lighthouse keeper returning to her ancestral home after decades away.
</p>
<p class="text-gray-400 leading-relaxed mb-8 text-lg">
Explore interconnected locations, from the salt-crusted pier to the whispering lighthouse tower. Every door you open and every lantern you light reveals a fragment of a shared history.
</p>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 glass rounded-lg">
<h4 class="font-bold text-white mb-1">Hand-Painted</h4>
<p class="text-xs text-gray-500">Every environment is a unique piece of digital art.</p>
</div>
<div class="p-4 glass rounded-lg">
<h4 class="font-bold text-white mb-1">Choice Driven</h4>
<p class="text-xs text-gray-500">Your decisions ripple through the village's fate.</p>
</div>
</div>
</div>
<div class="relative reveal">
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" alt="Game concept art" class="rounded-2xl shadow-2xl border border-white/10 rotate-2">
<div class="absolute -bottom-6 -left-6 bg-rose-600 p-8 rounded-xl shadow-xl">
<p class="text-3xl font-serif italic">"A masterpiece of atmosphere."</p>
<p class="text-xs mt-2 opacity-80">— Indie Gaming Weekly</p>
</div>
</div>
</div>
</section>
<!-- Features/Gameplay -->
<section id="gameplay" class="py-24 bg-[#0a0f14] overflow-hidden">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20">
<h2 class="text-4xl md:text-6xl mb-4">Experience the Tide</h2>
<p class="text-gray-500 max-w-xl mx-auto">Immersive mechanics designed to pull you deeper into Oakhaven's mysteries.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="reveal p-8 glass rounded-3xl hover:bg-white/5 transition">
<div class="w-12 h-12 bg-rose-600/20 flex items-center justify-center rounded-full mb-6">
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.747 0-3.332.477-4.5 1.253"></path></svg>
</div>
<h3 class="text-2xl mb-4">Dynamic Weather</h3>
<p class="text-gray-400 text-sm leading-relaxed">The fog, rain, and moonlight aren't just visual. They affect visibility, sound, and which secrets you can uncover.</p>
</div>
<div class="reveal p-8 glass rounded-3xl hover:bg-white/5 transition" style="transition-delay: 0.2s;">
<div class="w-12 h-12 bg-rose-600/20 flex items-center justify-center rounded-full mb-6">
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
</div>
<h3 class="text-2xl mb-4">Narrative Dialogue</h3>
<p class="text-gray-400 text-sm leading-relaxed">Engage in deep, branching conversations. Every choice impacts the village's social fabric and your own standing.</p>
</div>
<div class="reveal p-8 glass rounded-3xl hover:bg-white/5 transition" style="transition-delay: 0.4s;">
<div class="w-12 h-12 bg-rose-600/20 flex items-center justify-center rounded-full mb-6">
<svg class="w-6 h-6 text-rose-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 00-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="text-2xl mb-4">Soulful Soundtrack</h3>
<p class="text-gray-400 text-sm leading-relaxed">A generative ambient score that adapts to your location and the intensity of your exploration.</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section id="gallery" class="py-24 bg-black px-6">
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-end mb-12">
<div>
<h2 class="text-4xl md:text-6xl mb-2">Sneak Peeks</h2>
<p class="text-gray-500">Visualizing the atmosphere of Oakhaven.</p>
</div>
<a href="#" class="hidden md:block text-rose-500 border-b border-rose-500 pb-1 hover:text-rose-400 transition">View full devlog</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Interior">
</div>
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Landscape">
</div>
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Characters">
</div>
<div class="h-64 bg-gray-900 rounded-xl overflow-hidden group">
<img src="https://images.pexels.com/photos/7879385/pexels-photo-7879385.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=627&amp;w=1200" class="w-full h-full object-cover group-hover:scale-110 transition duration-500" alt="Village">
</div>
</div>
</div>
</section>
<!-- Newsletter/CTA -->
<section id="contact" class="py-32 px-6 bg-rose-900/20 border-y border-rose-900/30">
<div class="max-w-3xl mx-auto text-center">
<h2 class="text-4xl md:text-6xl mb-6">Stay in the Loop</h2>
<p class="text-gray-300 mb-10 text-lg">Join our community and get exclusive development updates, concept art, and early-bird discounts.</p>
<form class="flex flex-col sm:flex-row gap-4">
<input type="email" placeholder="Enter your email" class="flex-1 px-6 py-4 rounded-lg bg-white/5 border border-white/10 focus:outline-none focus:border-rose-500 text-white">
<button class="bg-rose-600 px-10 py-4 rounded-lg font-bold hover:bg-rose-700 transition">Sign Up</button>
</form>
<p class="mt-6 text-xs text-gray-500">We respect your privacy. No spam, only updates.</p>
</div>
</section>
<!-- Footer -->
<footer class="py-12 px-6 border-t border-white/5 text-center">
<div class="flex justify-center space-x-6 mb-8">
<a href="#" class="text-gray-400 hover:text-white transition">Twitter</a>
<a href="#" class="text-gray-400 hover:text-white transition">Discord</a>
<a href="#" class="text-gray-400 hover:text-white transition">Instagram</a>
<a href="#" class="text-gray-400 hover:text-white transition">YouTube</a>
</div>
<p class="text-gray-600 text-sm">© 2024 Echoes of the Shore Studio. All rights reserved.</p>
</footer>
<script>
// Simple Intersection Observer for "Reveal" animation
document.addEventListener('DOMContentLoaded', () => {
const observerOptions = {
threshold: 0.1
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('active');
}
});
}, observerOptions);
document.querySelectorAll('.reveal').forEach(el => {
observer.observe(el);
});
// Smooth scroll behavior for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});
});
});
</script>
<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 94.94s</div></body>
</html>