Spaces:

Frajosgro
/

homepage-melina

Running

App Files Files Community

Frajosgro commited on May 2

Commit

85d96a4

verified ·

1 Parent(s): 20027f3

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +497 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Homepage Melina
-emoji: 👁
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: homepage-melina
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,497 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pferdeausbildung - Individuelles Training für Jungpferde & Reiter</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .hero-gradient {
+            background: linear-gradient(135deg, rgba(139, 168, 129, 0.9) 0%, rgba(87, 117, 86, 0.9) 100%);
+        }
+        .card-hover:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .transition-all {
+            transition: all 0.3s ease;
+        }
+        .before-after-container {
+            position: relative;
+            height: 300px;
+            overflow: hidden;
+        }
+        .before-after-slider {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+        }
+        .before-image {
+            width: 50%;
+            background-image: url('https://images.unsplash.com/photo-1553284965-83fd3e82ab5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80');
+        }
+        .after-image {
+            width: 100%;
+            background-image: url('https://images.unsplash.com/photo-1553284965-5dd8352ff1bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
+        }
+        .slider-handle {
+            position: absolute;
+            left: 50%;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background-color: white;
+            cursor: ew-resize;
+            transform: translateX(-50%);
+        }
+        .slider-handle::before {
+            content: "";
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            background-color: white;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+        }
+        .gallery-item {
+            transition: all 0.3s ease;
+        }
+        .gallery-item:hover {
+            transform: scale(1.03);
+            z-index: 10;
+        }
+    </style>
+</head>
+<body class="font-sans bg-gray-50">
+    <!-- Header/Navigation -->
+    <header class="bg-white shadow-sm sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center">
+                <i class="fas fa-horse-head text-2xl text-green-700 mr-2"></i>
+                <span class="text-xl font-semibold text-green-800">Pferdeausbildung</span>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#services" class="text-green-700 hover:text-green-900 transition-all">Leistungen</a>
+                <a href="#philosophy" class="text-green-700 hover:text-green-900 transition-all">Philosophie</a>
+                <a href="#gallery" class="text-green-700 hover:text-green-900 transition-all">Galerie</a>
+                <a href="#contact" class="text-green-700 hover:text-green-900 transition-all">Kontakt</a>
+            </nav>
+            <button class="md:hidden text-green-700">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero-gradient text-white py-20 md:py-32">
+        <div class="container mx-auto px-4 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-6">Individuelle Pferdeausbildung</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Systematisch, strukturiert und pferdegerecht – für ein ausbalanciertes Pferd mit Freude an der Arbeit</p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#contact" class="bg-white text-green-800 font-semibold px-8 py-3 rounded-full hover:bg-gray-100 transition-all shadow-lg">
+                    Jetzt unverbindlich anfragen
+                </a>
+                <a href="#services" class="border-2 border-white text-white font-semibold px-8 py-3 rounded-full hover:bg-white hover:text-green-800 transition-all">
+                    Mehr erfahren
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Meine Leistungen</h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Service Card 1 -->
+                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
+                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-horse text-2xl text-green-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-green-800 mb-3">Jungpferdeausbildung</h3>
+                    <p class="text-gray-600 mb-4">Systematische und pferdegerechte Grundausbildung für junge Pferde, die eine solide Basis für ihre weitere Entwicklung legt.</p>
+                    <p class="text-gray-600">Strukturiertes Training mit Geduld und klaren Prozessen für ein vertrauensvolles, sicheres Pferd.</p>
+                </div>
+                <!-- Service Card 2 -->
+                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
+                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-user-tie text-2xl text-green-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-green-800 mb-3">Beritt & Reitunterricht</h3>
+                    <p class="text-gray-600 mb-4">Individueller Beritt für Ihr Pferd sowie stationärer und mobiler Reitunterricht für eine harmonische Partnerschaft.</p>
+                    <p class="text-gray-600">Anpassung an die Bedürfnisse von Pferd und Reiter für optimale Fortschritte.</p>
+                </div>
+                <!-- Service Card 3 -->
+                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
+                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-hands-helping text-2xl text-green-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-green-800 mb-3">Handarbeit & Doppellonge</h3>
+                    <p class="text-gray-600 mb-4">Förderung von Balance und Selbsthaltung durch gezielte Bodenarbeit ohne Reitergewicht.</p>
+                    <p class="text-gray-600">Ideal für Jungpferde und zur Korrektur von älteren Pferden.</p>
+                </div>
+                <!-- Service Card 4 -->
+                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
+                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-chair text-2xl text-green-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-green-800 mb-3">Sitzschulung</h3>
+                    <p class="text-gray-600 mb-4">Feine Hilfengebung und korrekte Einwirkung durch optimierten Reitersitz.</p>
+                    <p class="text-gray-600">Individuelle Korrekturen für eine bessere Kommunikation mit dem Pferd.</p>
+                </div>
+                <!-- Service Card 5 -->
+                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
+                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-tree text-2xl text-green-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-green-800 mb-3">Geländetraining</h3>
+                    <p class="text-gray-600 mb-4">Steigerung von Trittsicherheit, Mut und Alltagsroutine durch gezieltes Geländetraining.</p>
+                    <p class="text-gray-600">Vorbereitung auf Ausritte und Turniere in natürlicher Umgebung.</p>
+                </div>
+                <!-- Service Card 6 -->
+                <div class="bg-gray-50 rounded-xl p-6 shadow-md card-hover transition-all">
+                    <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
+                        <i class="fas fa-star text-2xl text-green-700"></i>
+                    </div>
+                    <h3 class="text-xl font-semibold text-green-800 mb-3">Individuelle Pakete</h3>
+                    <p class="text-gray-600 mb-4">Kombination verschiedener Leistungen für maßgeschneidertes Training.</p>
+                    <p class="text-gray-600">Gerne erstelle ich ein auf Ihr Pferd abgestimmtes Konzept.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Philosophy Section -->
+    <section id="philosophy" class="py-16 bg-green-50">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2">
+                    <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Pferd und Trainer"
+                         class="rounded-xl shadow-lg w-full h-auto">
+                </div>
+                <div class="lg:w-1/2">
+                    <h2 class="text-3xl font-bold text-green-800 mb-6">Meine Philosophie</h2>
+                    <p class="text-gray-700 mb-4 text-lg">
+                        Mein ganzheitlicher Trainingsansatz zielt darauf ab, ein tragfähiges, ausbalanciertes Pferd zu entwickeln, das Freude an der Arbeit hat.
+                    </p>
+                    <p class="text-gray-700 mb-6">
+                        Besonders bei Jungpferden lege ich Wert auf feine Kommunikation, klare Strukturen und geduldiges Vorgehen. Jeder Lernschritt wird sorgfältig aufgebaut, um das Pferd nicht zu überfordern und Vertrauen aufzubauen.
+                    </p>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <div class="bg-green-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-check text-green-700"></i>
+                            </div>
+                            <p class="text-gray-700"><strong>Individuell</strong> - Jedes Pferd erhält ein auf seine Bedürfnisse abgestimmtes Training.</p>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-green-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-check text-green-700"></i>
+                            </div>
+                            <p class="text-gray-700"><strong>Pferdegerecht</strong> - Respektvolle Ausbildung ohne Druck oder Gewalt.</p>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-green-100 p-2 rounded-full mr-4">
+                                <i class="fas fa-check text-green-700"></i>
+                            </div>
+                            <p class="text-gray-700"><strong>Nachhaltig</strong> - Solide Grundlagen für eine langfristige Entwicklung.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Before/After Section -->
+    <section class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Trainingserfolge</h2>
+            <div class="before-after-container rounded-xl shadow-xl">
+                <div class="before-after-slider before-image"></div>
+                <div class="before-after-slider after-image"></div>
+                <div class="slider-handle"></div>
+            </div>
+            <div class="mt-8 text-center">
+                <p class="text-gray-600 italic">"Aus einem unsicheren Jungpferd wird ein selbstbewusster Partner"</p>
+            </div>
+        </div>
+    </section>
+    <!-- Gallery Section -->
+    <section id="gallery" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center text-green-800 mb-12">Galerie & Impressionen</h2>
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1553284965-83fd3e82ab5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80"
+                         alt="Jungpferd Training"
+                         class="w-full h-48 object-cover">
+                </div>
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1553284965-5dd8352ff1bd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Beritt"
+                         class="w-full h-48 object-cover">
+                </div>
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Handarbeit"
+                         class="w-full h-48 object-cover">
+                </div>
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1605559421013-9a5dcde8b6d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Doppellonge"
+                         class="w-full h-48 object-cover">
+                </div>
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1605559420909-d37c5bb1ee50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Sitzschulung"
+                         class="w-full h-48 object-cover">
+                </div>
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1605559421013-9a5dcde8b6d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Geländetraining"
+                         class="w-full h-48 object-cover">
+                </div>
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1553284966-3e6ae56d0e41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Jungpferd"
+                         class="w-full h-48 object-cover">
+                </div>
+                <div class="gallery-item rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1553284966-3e6ae56d0e41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                         alt="Training"
+                         class="w-full h-48 object-cover">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-16 bg-green-800 text-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12">Kontakt</h2>
+            <div class="flex flex-col lg:flex-row gap-12">
+                <div class="lg:w-1/2">
+                    <h3 class="text-xl font-semibold mb-4">Kontaktinformationen</h3>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-4"></i>
+                            <div>
+                                <p class="font-medium">Standort</p>
+                                <p>Musterstraße 123, 12345 Musterstadt</p>
+                                <p class="text-green-200 mt-1">Einzugsgebiet: 50 km Umkreis</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <i class="fas fa-mobile-alt mt-1 mr-4"></i>
+                            <div>
+                                <p class="font-medium">Telefon</p>
+                                <p>+49 123 456789</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <i class="fas fa-envelope mt-1 mr-4"></i>
+                            <div>
+                                <p class="font-medium">E-Mail</p>
+                                <p>[email protected]</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <i class="fab fa-whatsapp mt-1 mr-4"></i>
+                            <div>
+                                <p class="font-medium">WhatsApp</p>
+                                <p>+49 123 456789</p>
+                                <a href="https://wa.me/49123456789" class="inline-block mt-2 bg-green-700 hover:bg-green-600 text-white px-4 py-2 rounded-full transition-all">
+                                    <i class="fab fa-whatsapp mr-2"></i> Nachricht senden
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="mt-8">
+                        <h3 class="text-xl font-semibold mb-4">Öffnungszeiten</h3>
+                        <div class="space-y-2">
+                            <p>Montag - Freitag: 8:00 - 18:00 Uhr</p>
+                            <p>Samstag: 9:00 - 14:00 Uhr</p>
+                            <p>Sonntag: nach Vereinbarung</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <h3 class="text-xl font-semibold mb-4">Kontaktformular</h3>
+                    <form class="space-y-4">
+                        <div>
+                            <label for="name" class="block mb-1">Name</label>
+                            <input type="text" id="name" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
+                        </div>
+                        <div>
+                            <label for="email" class="block mb-1">E-Mail</label>
+                            <input type="email" id="email" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
+                        </div>
+                        <div>
+                            <label for="phone" class="block mb-1">Telefon</label>
+                            <input type="tel" id="phone" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
+                        </div>
+                        <div>
+                            <label for="service" class="block mb-1">Interesse an</label>
+                            <select id="service" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white">
+                                <option value="">Bitte auswählen</option>
+                                <option value="jungpferde">Jungpferdeausbildung</option>
+                                <option value="beritt">Beritt</option>
+                                <option value="unterricht">Reitunterricht</option>
+                                <option value="handarbeit">Handarbeit & Doppellonge</option>
+                                <option value="sitzschulung">Sitzschulung</option>
+                                <option value="gelände">Geländetraining</option>
+                                <option value="sonstiges">Sonstiges</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label for="message" class="block mb-1">Nachricht</label>
+                            <textarea id="message" rows="4" class="w-full px-4 py-2 rounded-lg bg-green-900 border border-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 text-white"></textarea>
+                        </div>
+                        <button type="submit" class="w-full bg-green-600 hover:bg-green-500 text-white font-semibold px-6 py-3 rounded-lg transition-all shadow-lg">
+                            Nachricht senden
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Map Section -->
+    <div class="h-96 bg-gray-200">
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2427.123456789012!2d13.123456789012345!3d52.12345678901234!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNTLCsDA3JzI0LjQiTiAxM8KwMDcnMjQuNCJF!5e0!3m2!1sde!2sde!4v1234567890123!5m2!1sde!2sde"
+                width="100%"
+                height="100%"
+                style="border:0;"
+                allowfullscreen=""
+                loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade"></iframe>
+    </div>
+    <!-- Footer -->
+    <footer class="bg-green-900 text-white py-8">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-4 md:mb-0">
+                    <div class="flex items-center">
+                        <i class="fas fa-horse-head text-2xl mr-2"></i>
+                        <span class="text-xl font-semibold">Pferdeausbildung</span>
+                    </div>
+                    <p class="mt-2 text-green-300">Systematisch, strukturiert, pferdegerecht</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-white hover:text-green-300 transition-all">
+                        <i class="fab fa-facebook-f text-xl"></i>
+                    </a>
+                    <a href="#" class="text-white hover:text-green-300 transition-all">
+                        <i class="fab fa-instagram text-xl"></i>
+                    </a>
+                    <a href="#" class="text-white hover:text-green-300 transition-all">
+                        <i class="fab fa-whatsapp text-xl"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="border-t border-green-800 mt-8 pt-8 text-center text-green-300">
+                <p>&copy; 2023 Pferdeausbildung. Alle Rechte vorbehalten.</p>
+                <div class="mt-2 flex justify-center space-x-4">
+                    <a href="#" class="hover:text-white transition-all">Impressum</a>
+                    <a href="#" class="hover:text-white transition-all">Datenschutz</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Back to Top Button -->
+    <button id="backToTop" class="fixed bottom-8 right-8 bg-green-700 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
+        <i class="fas fa-arrow-up"></i>
+    </button>
+    <script>
+        // Back to Top Button
+        const backToTopButton = document.getElementById('backToTop');
+        window.addEventListener('scroll', () => {
+            if (window.pageYOffset > 300) {
+                backToTopButton.classList.remove('opacity-0', 'invisible');
+                backToTopButton.classList.add('opacity-100', 'visible');
+            } else {
+                backToTopButton.classList.remove('opacity-100', 'visible');
+                backToTopButton.classList.add('opacity-0', 'invisible');
+            }
+        });
+        backToTopButton.addEventListener('click', () => {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+        // Before/After Slider
+        const sliderHandle = document.querySelector('.slider-handle');
+        const beforeImage = document.querySelector('.before-image');
+        let isDragging = false;
+        sliderHandle.addEventListener('mousedown', () => {
+            isDragging = true;
+        });
+        document.addEventListener('mouseup', () => {
+            isDragging = false;
+        });
+        document.addEventListener('mousemove', (e) => {
+            if (!isDragging) return;
+            const container = document.querySelector('.before-after-container');
+            const containerRect = container.getBoundingClientRect();
+            let x = e.clientX - containerRect.left;
+            // Keep within bounds
+            x = Math.max(0, Math.min(x, containerRect.width));
+            const percent = (x / containerRect.width) * 100;
+            beforeImage.style.width = `${percent}%`;
+            sliderHandle.style.left = `${percent}%`;
+        });
+        // Mobile touch support for slider
+        sliderHandle.addEventListener('touchstart', () => {
+            isDragging = true;
+        });
+        document.addEventListener('touchend', () => {
+$0
+            isDragging = false;
+        });
+        document.addEventListener('touchmove', (e) => {
+            if (!isDragging) return;
+            const container = document.querySelector('.before-after-container');
+            const containerRect = container.getBoundingClientRect();
+            let x = e.touches[0].clientX - containerRect.left;
+            // Keep within bounds
+            x = Math.max(0, Math.min(x, containerRect.width));
+            const percent = (x / containerRect.width) * 100;
+            beforeImage.style.width = `${percent}%`;
+            sliderHandle.style.left = `${percent}%`;
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Frajosgro/homepage-melina" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes