237 lines
13 KiB
HTML
237 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>ELARA - Neue Musik: "Stille Gewitter"</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
:root {
|
||
--color-primary: #8B0000; /* Deep Crimson */
|
||
--color-secondary: #FFD700; /* Gold Accent */
|
||
--color-background: #121212; /* Dark Charcoal */
|
||
}
|
||
body {
|
||
background-color: var(--color-background);
|
||
color: #e0e0e0;
|
||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||
}
|
||
.btn-primary {
|
||
background-color: var(--color-primary);
|
||
transition: background-color 0.3s, transform 0.1s;
|
||
box-shadow: 0 4px 15px rgba(139, 0, 0, 0.4);
|
||
}
|
||
.btn-primary:hover {
|
||
background-color: #a52a2a; /* Slightly lighter red on hover */
|
||
transform: translateY(-2px);
|
||
}
|
||
.btn-primary:focus {
|
||
outline: 3px solid #FFD700;
|
||
outline-offset: 2px;
|
||
}
|
||
/* Custom Typography Styling for high impact */
|
||
.display-font {
|
||
font-weight: 900;
|
||
letter-spacing: -0.05em;
|
||
text-transform: uppercase;
|
||
}
|
||
@keyframes pulse-glow {
|
||
0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
|
||
50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
|
||
100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
|
||
}
|
||
.animated-glow {
|
||
animation: pulse-glow 3s infinite ease-in-out;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="antialiased">
|
||
|
||
<!-- Header / Navigation -->
|
||
<header class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm border-b border-gray-800 shadow-lg">
|
||
<nav 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="text-2xl display-font text-white tracking-widest">
|
||
ELARA
|
||
</div>
|
||
<div class="space-x-4 hidden sm:flex">
|
||
<a href="#musik" class="text-sm font-medium text-gray-300 hover:text-red-600 transition duration-150 p-2">Musik</a>
|
||
<a href="#tour" class="text-sm font-medium text-gray-300 hover:text-red-600 transition duration-150 p-2">Tour</a>
|
||
<a href="#shop" class="text-sm font-medium text-gray-300 hover:text-red-600 transition duration-150 p-2">Shop</a>
|
||
</div>
|
||
<button class="sm:hidden text-gray-300 hover:text-red-500 focus:outline-none focus:text-white">
|
||
<svg class="w-6 h-6" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section id="hero" class="relative h-[70vh] flex items-center justify-center overflow-hidden border-b border-gray-800">
|
||
<!-- Background Visual Element (Simulated Abstract Noise/Texture) -->
|
||
<div class="absolute inset-0 bg-cover bg-center opacity-40" style="background-image: radial-gradient(circle at center, rgba(139, 0, 0, 0.1) 0%, transparent 60%);"></div>
|
||
|
||
<div class="relative text-center max-w-4xl px-4">
|
||
<p class="text-xl sm:text-2xl text-gray-400 mb-3 tracking-widest uppercase">NEU IST DA</p>
|
||
<h1 class="display-font text-7xl sm:text-8xl lg:text-9xl text-white leading-tight mb-6 drop-shadow-lg">
|
||
STILLE GEWITTER
|
||
</h1>
|
||
<h2 class="text-2xl sm:text-4xl text-red-400 font-light mb-8">
|
||
Das neue Album von Elara – Ein Klangbild der Intensität.
|
||
</h2>
|
||
|
||
<!-- CTA Button -->
|
||
<div class="flex justify-center space-x-4">
|
||
<a href="#preorder" class="btn-primary px-10 py-4 text-lg text-white uppercase rounded-lg shadow-xl focus:outline-none">
|
||
JETZT STREAMEN
|
||
</a>
|
||
<a href="#shop" class="bg-gray-700 border-2 border-gray-600 px-8 py-4 text-lg text-gray-200 uppercase rounded-lg hover:bg-gray-600 transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-500">
|
||
Merchandise
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Music Player/Drop Section -->
|
||
<section id="musik" class="py-20 lg:py-32 border-b border-gray-800">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<header class="text-center mb-12">
|
||
<h3 class="text-sm uppercase tracking-widest text-red-500 mb-2">Das Werk</h3>
|
||
<h2 class="display-font text-5xl lg:text-6xl text-white">
|
||
Stille Gewitter
|
||
</h2>
|
||
<p class="text-gray-500 mt-4 text-lg">Ein Werk über die Schönheit des Unerwarteten. Erfahren Sie mehr über die Schaffensperiode.</p>
|
||
</header>
|
||
|
||
<!-- Album Visualizer / Player Area -->
|
||
<div class="flex flex-col lg:flex-row items-center gap-10 bg-gray-900 p-6 lg:p-10 rounded-xl shadow-2xl border border-gray-700">
|
||
|
||
<!-- Album Art / Visual -->
|
||
<div class="lg:w-1/3 w-full flex justify-center">
|
||
<div class="w-full aspect-square bg-gray-800 border-4 border-red-800 overflow-hidden relative shadow-inner">
|
||
<!-- Simulated high-impact artwork -->
|
||
<div class="w-full h-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1501854140861-41332e1a5e0e?w=800&auto=format&fit=crop');"></div>
|
||
<div class="absolute inset-0 bg-black/30 flex items-center justify-center">
|
||
<p class="text-white text-2xl display-font opacity-70">Album Cover</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tracklist & Controls -->
|
||
<div class="lg:w-2/3 w-full">
|
||
<div id="tracklist" class="space-y-4">
|
||
<!-- Tracks are generated by JS for dynamic feel -->
|
||
</div>
|
||
|
||
<!-- Playback Controls -->
|
||
<div class="mt-10 pt-6 border-t border-gray-700">
|
||
<p class="text-sm uppercase text-red-500 mb-3">Interaktion</p>
|
||
<button id="playButton" class="btn-primary px-8 py-3 text-white text-lg rounded-lg focus:outline-none flex items-center">
|
||
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||
Wiedergabe starten
|
||
</button>
|
||
<p class="text-xs text-gray-500 mt-2">Klicken Sie auf ein Lied, um es anzuhören.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tour Dates Section -->
|
||
<section id="tour" class="py-20 lg:py-32 border-b border-gray-800">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<header class="text-center mb-12">
|
||
<h3 class="text-sm uppercase tracking-widest text-red-500 mb-2">Live-Erfahrung</h3>
|
||
<h2 class="display-font text-5xl lg:text-6xl text-white">
|
||
Tour: Stille Gewitter Tour 2024
|
||
</h2>
|
||
<p class="text-gray-500 mt-4 text-lg">Erlebe die Intensität live. Tickets sind limitiert.</p>
|
||
</header>
|
||
|
||
<!-- Tour Dates Grid -->
|
||
<div class="relative">
|
||
<div class="absolute left-0 top-0 bottom-0 w-1 bg-gray-700/50 lg:hidden"></div>
|
||
<div class="flex flex-col lg:flex-row gap-8">
|
||
|
||
<!-- Date List -->
|
||
<div class="lg:w-2/3 w-full">
|
||
<div class="space-y-6">
|
||
<div class="relative border-l-2 border-gray-700 ml-4 pl-10">
|
||
<div class="absolute left-0 top-0 h-6 w-6 bg-red-600 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-gray-900 z-10"></div>
|
||
<p class="text-lg font-semibold text-white mb-1">05. Oktober</p>
|
||
<p class="text-gray-300">Kölner Hallen, Köln</p>
|
||
</div>
|
||
<div class="relative border-l-2 border-gray-700 ml-4 pl-10">
|
||
<div class="absolute left-0 top-0 h-6 w-6 bg-red-600 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-gray-900 z-10"></div>
|
||
<p class="text-lg font-semibold text-white mb-1">21. Oktober</p>
|
||
<p class="text-gray-300">Berlin Kulturbrauerei, Berlin</p>
|
||
</div>
|
||
<div class="relative border-l-2 border-gray-700 ml-4 pl-10">
|
||
<div class="absolute left-0 top-0 h-6 w-6 bg-red-600 transform -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-gray-900 z-10"></div>
|
||
<p class="text-lg font-semibold text-white mb-1">14. November</p>
|
||
<p class="text-gray-300">Hamburg Elbvorhalle, Hamburg</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ticket CTA / Sidebar -->
|
||
<div class="lg:w-1/3 w-full">
|
||
<div class="bg-gray-800 p-6 rounded-xl border border-red-900/50 shadow-xl">
|
||
<h4 class="text-2xl display-font text-red-400 mb-4">Tickets sichern</h4>
|
||
<p class="text-gray-300 mb-6 text-sm">Sichern Sie sich Ihren Platz auf der Tour. Preise variieren je nach Venue und VIP-Option.</p>
|
||
<a href="#" class="btn-primary w-full text-center py-3 text-lg text-white uppercase rounded-lg focus:outline-none">
|
||
Jetzt Tickets kaufen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- Shop Section -->
|
||
<section id="shop" class="py-20 lg:py-32">
|
||
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<header class="text-center mb-12">
|
||
<h3 class="text-sm uppercase tracking-widest text-red-500 mb-2">Merchandise</h3>
|
||
<h2 class="display-font text-5xl lg:text-6xl text-white">
|
||
Shop Die Ästhetik
|
||
</h2>
|
||
<p class="text-gray-500 mt-4 text-lg">Trage die Stimmung von "Stille Gewitter" mit dir.</p>
|
||
</header>
|
||
|
||
<!-- Product Grid -->
|
||
<div id="productGrid" class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<!-- Products inserted by JS -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-black border-t border-gray-800 mt-10">
|
||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||
<div class="flex flex-wrap justify-between items-center border-b border-gray-800 pb-8 mb-8">
|
||
<div class="text-2xl display-font text-white tracking-widest">
|
||
ELARA
|
||
</div>
|
||
<div class="flex space-x-6">
|
||
<a href="#" class="text-gray-400 hover:text-red-500 transition duration-150 text-sm">Impressum</a>
|
||
<a href="#" class="text-gray-400 hover:text-red-500 transition duration-150 text-sm">Datenschutz</a>
|
||
<a href="#" class="text-gray-400 hover:text-red-500 transition duration-150 text-sm">Kontakt</a>
|
||
</div>
|
||
</div>
|
||
<div class="text-center text-gray-500 text-sm">
|
||
© 2024 Elara Musik. Alle Rechte vorbehalten. Erstellt mit Leidenschaft und Tailwind CSS.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
|
||
// --- 1. Track<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.35s</div> |