Refactor code structure and remove redundant changes
This commit is contained in:
@@ -0,0 +1,168 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ECHO CHAMBER - Neue Single "Stiller Hafen"</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;600;800&family=Lora:wght@400;700&display=swap');
|
||||
|
||||
:root {
|
||||
--color-primary: #a0522d; /* Sienna/Erdtöne */
|
||||
--color-secondary: #f5f5dc; /* Beige/Sand */
|
||||
--color-dark: #1a1a1a;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
.heading-font {
|
||||
font-family: 'Lora', serif;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 4px 15px rgba(160, 82, 45, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(160, 82, 45, 0.6);
|
||||
}
|
||||
|
||||
/* Custom Hero Animation for subtle focus */
|
||||
.audio-player-container {
|
||||
transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
|
||||
}
|
||||
.audio-player-container:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="sticky top-0 bg-black/95 backdrop-blur-md border-b border-amber-900 z-50">
|
||||
<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 heading-font text-amber-900 font-bold tracking-widest">
|
||||
ECHO CHAMBER
|
||||
</div>
|
||||
<nav>
|
||||
<a href="#track" class="text-gray-300 hover:text-amber-900 transition duration-300 ml-6 hidden sm:inline-block">Veröffentlichung</a>
|
||||
<a href="#about" class="text-gray-300 hover:text-amber-900 transition duration-300 ml-6 hidden sm:inline-block">Über</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="min-h-screen">
|
||||
|
||||
<!-- Hero Section: Release Announcement -->
|
||||
<section id="track" class="py-20 md:py-32 bg-gray-900 border-b-8 border-amber-900">
|
||||
<div class="max-w-5xl mx-auto px-4 text-center">
|
||||
<h1 class="heading-font text-6xl md:text-8xl font-extrabold mb-4 text-amber-900 leading-tight tracking-tighter animate-pulse-slow">
|
||||
STILLER HAFEN
|
||||
</h1>
|
||||
<p class="text-xl md:text-3xl text-gray-400 mb-8 heading-font">
|
||||
Neue Single von ECHO CHAMBER – Jetzt überall hören
|
||||
</p>
|
||||
|
||||
<!-- Visual Element Placeholder: Album Art -->
|
||||
<div class="max-w-lg mx-auto shadow-2xl rounded-xl overflow-hidden mb-10 border-4 border-amber-900">
|
||||
<img src="https://images.unsplash.com/photo-1501688269928-e2707007d014?w=600&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Album Cover: Stiller Hafen - Minimalistische Darstellung von Wasser und Horizont"
|
||||
class="w-full h-auto object-cover transition duration-500 hover:scale-[1.02]">
|
||||
</div>
|
||||
|
||||
<!-- Music Player/CTA Block -->
|
||||
<div class="audio-player-container bg-gray-800 p-4 md:p-8 rounded-xl max-w-3xl mx-auto border-t-4 border-amber-900 shadow-lg">
|
||||
<h2 class="text-2xl heading-font mb-4 text-amber-900">Hören Sie an</h2>
|
||||
|
||||
<!-- Mockup Audio Player -->
|
||||
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center space-y-3">
|
||||
<p class="text-lg heading-font text-gray-300">Stiller Hafen (Single Edit)</p>
|
||||
<div class="w-full bg-gray-600 rounded-full h-2.5">
|
||||
<div class="bg-amber-900 h-2.5 rounded-full" style="width: 65%"></div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-full text-sm text-gray-400">
|
||||
<span>0:32 / 3:45</span>
|
||||
<div class="space-x-2">
|
||||
<span class="cursor-pointer hover:text-amber-900 transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M15 10l4.5-4.5L12 4l-4.5 4.5L15 10zM12 3a9 9 0 00-9 9c0 3.31 1.61 6.24 4 7.73V21h4v-2.27c2.39-1.49 4-4.42 4-7.73a9 9 0 00-9-9zm0 16a7 7 0 110-14 7 7 0 010 14z"></path></svg></span>
|
||||
<span class="cursor-pointer hover:text-amber-900 transition"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M13 17h-2v-4h2v4zm0-7h-2V7h2v4z"></path></svg></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex space-x-3 pt-3">
|
||||
<a href="#" class="flex-1 text-center py-3 text-white font-bold rounded-lg btn-primary bg-amber-900 hover:bg-amber-800 focus:outline-none focus:ring-4 focus:ring-amber-900 focus:ring-opacity-50">
|
||||
Spotify Hörerlebnis
|
||||
</a>
|
||||
<a href="#" class="flex-1 text-center py-3 text-gray-300 border-2 border-gray-600 rounded-lg hover:bg-gray-700 transition duration-300 focus:outline-none focus:ring-4 focus:ring-gray-700">
|
||||
Apple Music
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Artist Bio Section -->
|
||||
<section id="about" class="py-20 md:py-32 bg-gray-800">
|
||||
<div class="max-w-6xl mx-auto px-4 lg:px-8">
|
||||
<div class="grid md:grid-cols-2 gap-12 items-start">
|
||||
|
||||
<!-- Image/Visual Column -->
|
||||
<div class="order-2 md:order-1">
|
||||
<div class="relative overflow-hidden rounded-xl shadow-2xl transform hover:scale-[1.03] transition duration-500 border-4 border-gray-700">
|
||||
<img src="https://images.unsplash.com/photo-1534840918688-2f200f9e4458?w=800&auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Künstler Echo Chamber - In einer nachdenklichen Pose"
|
||||
class="w-full h-auto object-cover transition duration-500">
|
||||
<!-- Subtle overlay for mood -->
|
||||
<div class="absolute inset-0 bg-black/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Text Content Column -->
|
||||
<div class="order-1 md:order-2 pt-4">
|
||||
<h2 class="heading-font text-5xl md:text-6xl font-bold text-amber-900 mb-4 leading-snug">
|
||||
Die Klanglandschaft von ECHO CHAMBER
|
||||
</h2>
|
||||
<p class="text-xl text-gray-300 mb-6 leading-relaxed">
|
||||
ECHO CHAMBER navigiert durch die tiefen, resonierenden Klangräume der modernen Melancholie. Die Musik ist eine Reflexion über das urbane Leben, die Suche nach Ruhe inmitten des ständigen Rauschens und die Schönheit stiller Ankerpunkte.
|
||||
</p>
|
||||
|
||||
<div class="space-y-6">
|
||||
<p class="text-gray-300 text-lg leading-relaxed border-l-4 border-amber-900 pl-4">
|
||||
"Stiller Hafen" ist eine meditative Reise, die das Gefühl einfängt, wenn die Stadt nach Einbruch der Dunkelheit beginnt, ihre eigene, geheimnisvolle Ruhe zu finden. Die Produktion ist reich an organischen Texturen und tiefen, resonierenden Bässen, die den Hörer sanft in einen Zustand der Kontemplation versetzen sollen.
|
||||
</p>
|
||||
|
||||
<p class="text-gray-400 italic text-sm">
|
||||
"Ein Meisterwerk der atmosphärischen Klanggestaltung." – MusikMagazin.de
|
||||
</p>
|
||||
|
||||
<div class="mt-8 pt-4 border-t border-gray-700">
|
||||
<p class="text-lg font-semibold text-amber-900 mb-2">Diskografie Highlights:</p>
|
||||
<ul class="space-y-2 text-gray-300">
|
||||
<li class="hover:text-amber-900 transition cursor-pointer">Echoes of Dawn (EP)</li>
|
||||
<li class="hover:text-amber-900 transition cursor-pointer">Die leisen Strömungen (Album)</li>
|
||||
<li class="hover:text-amber-900 transition cursor-pointer font-bold">Stiller Hafen (Aktuell)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer/Social Section -->
|
||||
<footer class="bg-gray-950 border-t border-amber-900 py-10">
|
||||
<div class="max-w-7xl mx-auto px-4 text-center">
|
||||
<h3 class="heading-font text-3xl text-amber-900 mb-6">Bleiben Sie Verbunden</h3>
|
||||
|
||||
<div class="flex justify-center space-x-8 mb-8">
|
||||
<a href="#" class="text-gray-400 hover:text-amber-900 transition duration-300 transform hover:scale-110 focus:outline-none" aria-label="Instagram">
|
||||
<!-- Instagram Icon Placeholder -->
|
||||
<svg class="w-10 h-10" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07a8.27 8.27 0 014.85 4.85c.058.006.11.01.17.022.06.012.12.02.18.02 1.16 0 2.12-.06 3.1-.22 1.0-.16 1.88-.54 2.55-1.11c.54-.4.96-1.02 1.27-1.74.3-.72.3-1.53-.1-2.24-.4-.7-.93-1.38-1.62-1.82l-1.41-1.37c-.2-.19-.43-.27-.66-.27h-.02c-.23 0-.46.08-.66.27l-1.37 1.41c-.37.36-.63.81-.63 1.33v.01c0 .49.21 1 .63 1.33l1.41 1.37c.2-.19.43-.27.66-.27h.02c.23 0 .46-.08.66-.27zM12 18.84c-4.76 0-8.66-3.9-8.66-8.84 0-2.1.64-4.17 1.76-5.54l.01-.01c.2-.2.48-.32.8-.32h.02c.32 0 .6-.12.8-.32l.01-.01c.57-.62 1.43-1.04 2.48-1.04s1.91.42 2.48 1.04l.01.01c.2.2.48.32.8.32h.02c.32 0 .6-.12.8-.32l.01-.01c.57-.62 1.43-1.04 2.48-1.04s1.91.42 2.48 1.04l.01.01c.2.2.48.32.8.32h.02c.32 0 .6-.12.8-.32l.01-.01c.57-.62 1.43-1.04 2.48-1.04s1.91.42 2.48 1.04l.01.01c.2.2.48.32.8.<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.10s</div>
|
||||
Reference in New Issue
Block a user