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-f497869668920964.html
+193
View File
@@ -0,0 +1,193 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaffeemacher Handwerkskunst | Artisan Coffee Roaster</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Custom Tailwind Configuration */
:root {
--color-primary: #6D4C41; /* Deep Coffee Brown */
--color-secondary: #A1887F; /* Lighter Roast/Tan */
--color-accent: #FFB300; /* Warm Gold/Amber for highlights */
--color-background: #F5F5F5; /* Off-White/Light Grey */
}
body {
font-family: 'Merriweather', serif; /* A classic, sturdy feel */
background-color: var(--color-background);
color: #333;
}
.btn-primary {
background-color: var(--color-primary);
transition: background-color 0.3s, transform 0.1s;
}
.btn-primary:hover {
background-color: #4E342E; /* Darker Brown on hover */
transform: translateY(-1px);
}
.header-glow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.roaster-card {
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.roaster-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
/* Subtle pulse animation for the CTA */
@keyframes pulse-glow {
0% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(255, 179, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 179, 0, 0); }
}
.pulse-cta {
animation: pulse-glow 3s infinite;
}
</style>
<!-- Using Merriweather via Google Fonts for robust typography -->
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header & Navigation -->
<header class="bg-white shadow-lg sticky top-0 z-50">
<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">
<a href="#" class="text-3xl font-extrabold text-[var(--color-primary)] tracking-tight header-glow">
Kaffeemacher
</a>
<p class="text-xs text-gray-600 mt-[-5px]">Handwerkliche Röste aus Bayern</p>
</div>
<nav class="flex space-x-8">
<a href="#philosophy" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Philosophie</a>
<a href="#shop" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Shop</a>
<a href="#about" class="text-gray-700 hover:text-[var(--color-primary)] px-3 py-2 rounded-md font-medium transition duration-150 focus:outline-none focus:text-[var(--color-primary)]">Über Uns</a>
<a href="#" class="btn-primary text-white px-4 py-2 rounded-full text-sm shadow-md focus:outline-none focus:ring-2 focus:ring-amber-500">Bestellen</a>
</nav>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="relative bg-cover bg-center h-[70vh] flex items-center justify-center"
style="background-image: url('https://images.unsplash.com/photo-1517237452248-6a5d855165f9?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
<!-- Overlay for dramatic contrast -->
<div class="absolute inset-0 bg-black opacity-40"></div>
<div class="relative text-center px-4 z-10">
<h1 class="text-6xl md:text-8xl font-black text-white mb-4 leading-tight uppercase">
Die Seele des Kaffees
</h1>
<p class="text-xl md:text-2xl text-gray-200 mb-8 font-serif">
Handverlesene Bohnen, mit Leidenschaft geröstet.
</p>
<a href="#shop" class="btn-primary bg-amber-600 text-white text-lg px-10 py-4 rounded-full uppercase tracking-widest focus:outline-none focus:ring-4 focus:ring-amber-300 pulse-cta">
Jetzt Entdecken
</a>
</div>
</section>
<!-- Philosophy Section -->
<section id="philosophy" class="py-20 sm:py-28 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-5xl font-bold text-[var(--color-primary)] mb-4 tracking-tight">
Unsere Philosophie
</h2>
<p class="text-xl text-gray-600 mb-12 max-w-3xl mx-auto">
Wir glauben an die Würde der Bohne. Von der sorgfältigen Auswahl der Ernte bis zum perfekten Röstdunkel – jeder Schritt ist eine Hommage an das Handwerk.
</p>
<div class="grid md:grid-cols-3 gap-10">
<!-- Feature 1 -->
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
<p class="text-5xl text-[var(--color-accent)] mb-3">🌿</p>
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Ursprung</h3>
<p class="text-gray-600">Wir pflegen direkte Beziehungen zu kleinen, ethischen Farmen. Qualität beginnt am Ursprungsort.</p>
</div>
<!-- Feature 2 -->
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
<p class="text-5xl text-[var(--color-accent)] mb-3">🔥</p>
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Röstkunst</h3>
<p class="text-gray-600">Unsere Rösterführung ist ein Dialog. Wir finden den einzigartigen Charakter jeder Bohne durch Präzision.</p>
</div>
<!-- Feature 3 -->
<div class="p-8 bg-white border-t-8 border-[var(--color-secondary)] rounded-xl shadow-lg roaster-card">
<p class="text-5xl text-[var(--color-accent)] mb-3">☕</p>
<h3 class="text-2xl font-bold text-[var(--color-primary)] mb-3">Genuss</h3>
<p class="text-gray-600">Das Ziel ist der Moment: ein samtiges, komplexes Geschmackserlebnis in jeder Tasse.</p>
</div>
</div>
</div>
</section>
<!-- Shop/Products Section -->
<section id="shop" class="py-20 sm:py-28 bg-[var(--color-background)]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-5xl font-bold text-[var(--color-primary)] mb-3">Unsere aktuellen Sorten</h2>
<p class="text-xl text-gray-600">Entdecken Sie die Vielfalt unserer sorgfältig gerösteten Kaffeebohnen.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<!-- Product 1: Espresso Roast -->
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1571697788936-3c9c97e8e38d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
<div class="p-6 text-center">
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Intensiver Espresso</h3>
<p class="text-sm text-gray-500 mb-3">Röstgrad: Dunkel | Ursprung: Zentralamerika</p>
<p class="text-gray-700 mb-4 font-medium">Ein kräftiger, dunkler Geschmack, perfekt für Ihren Morgenritual.</p>
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
In den Warenkorb
</button>
</div>
</div>
<!-- Product 2: Light Roast Filter -->
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1552218893-635f4945c3d8?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
<div class="p-6 text-center">
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Zarter Filterkaffee</h3>
<p class="text-sm text-gray-500 mb-3">Röstgrad: Hell | Ursprung: Äthiopien</p>
<p class="text-gray-700 mb-4 font-medium">Ein aromareicher, fruchtiger Charakter. Erwachen Sie sanft und elegant.</p>
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
In den Warenkorb
</button>
</div>
</div>
<!-- Product 3: Medium Roast Blend -->
<div class="bg-white rounded-xl shadow-2xl overflow-hidden border-b-4 border-[var(--color-primary)] roaster-card">
<div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1554284685-282b8a98a15d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');"></div>
<div class="p-6 text-center">
<h3 class="text-3xl font-extrabold text-[var(--color-primary)] mb-1">Harmonie Blend</h3>
<p class="text-sm text-gray-500 mb-3">Röstgrad: Mittel | Ursprung: Mischung</p>
<p class="text-gray-700 mb-4 font-medium">Der perfekte Allrounder. Ausbalanciert, cremig und unverfälscht.</p>
<button class="btn-primary bg-amber-600 text-white w-full py-3 rounded-lg text-lg focus:outline-none focus:ring-4 ring-amber-300">
In den Warenkorb
</button>
</div>
</div>
</div>
</div>
</section>
<!-- About/Process Section (More detailed content) -->
<section id="about" class="py-20 sm:py-28 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid lg:grid-cols-2 gap-12 items-center">
<!-- Image/Visual Focus -->
<div class="lg:sticky lg:top-20">
<img src="https://images.unsplash.com/photo-1483313376688-2b12e843a522?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Handwerker beim Röstvorgang"
class="rounded-3xl shadow-2xl transform transition duration-500 hover:scale-[1.02] w-full h-auto">
</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 29.93s</div>