Hugging Face's logo

Spaces:
a40login
/
strayo-v2
Running

App Files Community
a40login commited on
Commit
84a9fd0
·
verified ·
1 Parent(s): eceb15e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +880 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Strayo V2
3
- emoji: 🏃
4
- colorFrom: pink
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: strayo-v2
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,880 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Strayography - Professionelle Fotografie von Markus Falkenhagen</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Montserrat', sans-serif;
14
+ color: #333;
15
+ }
16
+
17
+ h1, h2, h3, h4 {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .hero {
22
+ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--hero-image);
23
+ background-size: cover;
24
+ background-position: center;
25
+ background-attachment: fixed;
26
+ }
27
+
28
+ .gallery-item {
29
+ transition: all 0.3s ease;
30
+ position: relative;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .gallery-item:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
37
+ }
38
+
39
+ .gallery-item .overlay {
40
+ position: absolute;
41
+ bottom: 0;
42
+ left: 0;
43
+ right: 0;
44
+ background: rgba(0, 0, 0, 0.7);
45
+ color: white;
46
+ padding: 1rem;
47
+ transform: translateY(100%);
48
+ transition: transform 0.3s ease;
49
+ }
50
+
51
+ .gallery-item:hover .overlay {
52
+ transform: translateY(0);
53
+ }
54
+
55
+ .service-card {
56
+ transition: all 0.3s ease;
57
+ border: 1px solid #eee;
58
+ }
59
+
60
+ .service-card:hover {
61
+ transform: translateY(-5px);
62
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
63
+ }
64
+
65
+ .testimonial-card {
66
+ background: rgba(255, 255, 255, 0.95);
67
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
68
+ }
69
+
70
+ .form-input {
71
+ border-bottom: 2px solid #ddd;
72
+ transition: all 0.3s ease;
73
+ background: transparent;
74
+ }
75
+
76
+ .form-input:focus {
77
+ border-bottom-color: #4F46E5;
78
+ outline: none;
79
+ }
80
+
81
+ .animate-float {
82
+ animation: float 6s ease-in-out infinite;
83
+ }
84
+
85
+ @keyframes float {
86
+ 0%, 100% {
87
+ transform: translateY(0);
88
+ }
89
+ 50% {
90
+ transform: translateY(-10px);
91
+ }
92
+ }
93
+
94
+ .price-slider::-webkit-slider-thumb {
95
+ -webkit-appearance: none;
96
+ appearance: none;
97
+ width: 20px;
98
+ height: 20px;
99
+ border-radius: 50%;
100
+ background: #4F46E5;
101
+ cursor: pointer;
102
+ }
103
+
104
+ .modal {
105
+ transition: opacity 0.3s ease, visibility 0.3s ease;
106
+ }
107
+
108
+ .page {
109
+ display: none;
110
+ }
111
+
112
+ .page.active {
113
+ display: block;
114
+ animation: fadeIn 0.5s ease;
115
+ }
116
+
117
+ @keyframes fadeIn {
118
+ from { opacity: 0; }
119
+ to { opacity: 1; }
120
+ }
121
+
122
+ .nav-link.active {
123
+ color: #4F46E5;
124
+ font-weight: 600;
125
+ }
126
+ </style>
127
+ </head>
128
+ <body class="bg-gray-50">
129
+ <!-- Navigation -->
130
+ <nav class="bg-white shadow-md fixed w-full z-50">
131
+ <div class="container mx-auto px-6 py-4">
132
+ <div class="flex justify-between items-center">
133
+ <div class="flex items-center">
134
+ <i class="fas fa-mountain text-2xl text-indigo-600 mr-2"></i>
135
+ <span class="font-bold text-xl text-gray-800">Strayography</span>
136
+ </div>
137
+ <div class="hidden md:flex items-center space-x-8">
138
+ <a href="#home" class="nav-link text-gray-800 hover:text-indigo-600 transition active" data-page="home">Home</a>
139
+ <a href="#about" class="nav-link text-gray-800 hover:text-indigo-600 transition" data-page="about">Über mich</a>
140
+ <a href="#portfolio" class="nav-link text-gray-800 hover:text-indigo-600 transition" data-page="portfolio">Portfolio</a>
141
+ <a href="#services" class="nav-link text-gray-800 hover:text-indigo-600 transition" data-page="services">Dienstleistungen</a>
142
+ <a href="#workshops" class="nav-link text-gray-800 hover:text-indigo-600 transition" data-page="workshops">Workshops</a>
143
+ <a href="#contact" class="nav-link text-gray-800 hover:text-indigo-600 transition" data-page="contact">Kontakt</a>
144
+ </div>
145
+ <div class="md:hidden">
146
+ <button class="outline-none mobile-menu-button">
147
+ <svg class="w-6 h-6 text-gray-800" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
148
+ <path d="M4 6h16M4 12h16M4 18h16"></path>
149
+ </svg>
150
+ </button>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ <!-- Mobile menu -->
155
+ <div class="hidden mobile-menu bg-white shadow-lg">
156
+ <div class="container mx-auto px-6 py-4">
157
+ <a href="#home" class="nav-link block py-3 text-gray-800 hover:text-indigo-600 transition active" data-page="home">Home</a>
158
+ <a href="#about" class="nav-link block py-3 text-gray-800 hover:text-indigo-600 transition" data-page="about">Über mich</a>
159
+ <a href="#portfolio" class="nav-link block py-3 text-gray-800 hover:text-indigo-600 transition" data-page="portfolio">Portfolio</a>
160
+ <a href="#services" class="nav-link block py-3 text-gray-800 hover:text-indigo-600 transition" data-page="services">Dienstleistungen</a>
161
+ <a href="#workshops" class="nav-link block py-3 text-gray-800 hover:text-indigo-600 transition" data-page="workshops">Workshops</a>
162
+ <a href="#contact" class="nav-link block py-3 text-gray-800 hover:text-indigo-600 transition" data-page="contact">Kontakt</a>
163
+ </div>
164
+ </div>
165
+ </nav>
166
+
167
+ <!-- Home Page -->
168
+ <section id="home" class="page active hero min-h-screen flex items-center justify-center text-white pt-20" style="--hero-image: url('https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')">
169
+ <div class="container mx-auto px-6 text-center">
170
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Visuelle Geschichten, die bewegen</h1>
171
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Professionelle Fotografie und Videografie für besondere Momente in den Bergen und darüber hinaus</p>
172
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
173
+ <button onclick="showPage('portfolio')" class="bg-indigo-600 text-white font-semibold px-8 py-3 rounded-full hover:bg-indigo-700 transition duration-300">
174
+ Portfolio entdecken <i class="fas fa-images ml-2"></i>
175
+ </button>
176
+ <button onclick="showPage('contact')" class="bg-white text-gray-800 font-semibold px-8 py-3 rounded-full hover:bg-gray-100 transition duration-300">
177
+ Kontakt aufnehmen <i class="fas fa-envelope ml-2"></i>
178
+ </button>
179
+ </div>
180
+ <div class="mt-16 animate-float">
181
+ <a href="#about" onclick="showPage('about')" class="text-white">
182
+ <i class="fas fa-chevron-down text-2xl"></i>
183
+ </a>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ <!-- About Page -->
189
+ <section id="about" class="page py-20 bg-white">
190
+ <div class="container mx-auto px-6">
191
+ <div class="flex flex-col md:flex-row items-center">
192
+ <div class="md:w-1/2 mb-10 md:mb-0">
193
+ <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Markus Falkenhagen" class="rounded-lg shadow-xl w-full h-auto max-w-md mx-auto">
194
+ </div>
195
+ <div class="md:w-1/2 md:pl-12">
196
+ <h2 class="text-3xl font-bold mb-6">Die Geschichte hinter Strayography</h2>
197
+ <p class="text-gray-600 mb-4">Hallo, ich bin Markus Falkenhagen, professioneller Fotograf und Gründer von Strayography mit Sitz im wunderschönen Allgäu. Meine Reise begann mit einer Leidenschaft für das Festhalten besonderer Momente und entwickelte sich zu einer lebenslangen Berufung.</p>
198
+ <p class="text-gray-600 mb-6">Nach meinem Studium und einer inspirierenden Weltreise fand ich meine Heimat in den Bergen. Hier verbinde ich meine Liebe zur Natur mit meiner kreativen Arbeit. Mein Stil ist authentisch, emotional und von der rauen Schönheit der alpinen Landschaften geprägt.</p>
199
+ <div class="flex flex-wrap gap-4 mb-6">
200
+ <div class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">
201
+ <i class="fas fa-globe text-indigo-600 mr-2"></i> Weltweite Erfahrung
202
+ </div>
203
+ <div class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">
204
+ <i class="fas fa-camera text-indigo-600 mr-2"></i> Professionelle Ausrüstung
205
+ </div>
206
+ <div class="bg-indigo-100 text-indigo-800 px-4 py-2 rounded-full">
207
+ <i class="fas fa-heart text-indigo-600 mr-2"></i> Individuelle Betreuung
208
+ </div>
209
+ </div>
210
+ <button onclick="showPage('services')" class="bg-indigo-600 text-white px-6 py-3 rounded-full hover:bg-indigo-700 transition duration-300">
211
+ Meine Dienstleistungen <i class="fas fa-arrow-right ml-2"></i>
212
+ </button>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Portfolio Page -->
219
+ <section id="portfolio" class="page py-20 bg-gray-100">
220
+ <div class="container mx-auto px-6">
221
+ <h2 class="text-3xl font-bold text-center mb-6">Mein Portfolio</h2>
222
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Eine Auswahl meiner Arbeiten in verschiedenen Kategorien. Jedes Bild erzählt eine einzigartige Geschichte.</p>
223
+
224
+ <div class="flex justify-center mb-8">
225
+ <div class="inline-flex rounded-md shadow-sm">
226
+ <button onclick="filterGallery('all')" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-indigo-600 text-white">
227
+ Alle
228
+ </button>
229
+ <button onclick="filterGallery('astro')" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50">
230
+ Astrofotografie
231
+ </button>
232
+ <button onclick="filterGallery('mountains')" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50">
233
+ Berge
234
+ </button>
235
+ <button onclick="filterGallery('winter')" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50">
236
+ Winter
237
+ </button>
238
+ <button onclick="filterGallery('travel')" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-white text-gray-700 hover:bg-gray-50">
239
+ Reisen
240
+ </button>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 gallery-container">
245
+ <!-- Portfolio Item 1 -->
246
+ <div class="gallery-item rounded-lg overflow-hidden astro">
247
+ <img src="https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1794&q=80" alt="Milchstraße über den Bergen" class="w-full h-64 object-cover">
248
+ <div class="overlay">
249
+ <h3 class="font-semibold">Milchstraße über den Bergen</h3>
250
+ <p class="text-sm">Astrofotografie</p>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Portfolio Item 2 -->
255
+ <div class="gallery-item rounded-lg overflow-hidden mountains">
256
+ <img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Bergpanorama im Sommer" class="w-full h-64 object-cover">
257
+ <div class="overlay">
258
+ <h3 class="font-semibold">Bergpanorama im Sommer</h3>
259
+ <p class="text-sm">Berge</p>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Portfolio Item 3 -->
264
+ <div class="gallery-item rounded-lg overflow-hidden winter">
265
+ <img src="https://images.unsplash.com/photo-1518604666860-9ed391f76460?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Winterliche Berglandschaft" class="w-full h-64 object-cover">
266
+ <div class="overlay">
267
+ <h3 class="font-semibold">Winterliche Berglandschaft</h3>
268
+ <p class="text-sm">Winter</p>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Portfolio Item 4 -->
273
+ <div class="gallery-item rounded-lg overflow-hidden astro">
274
+ <img src="https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1794&q=80" alt="Sternenhimmel über dem See" class="w-full h-64 object-cover">
275
+ <div class="overlay">
276
+ <h3 class="font-semibold">Sternenhimmel über dem See</h3>
277
+ <p class="text-sm">Astrofotografie</p>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Portfolio Item 5 -->
282
+ <div class="gallery-item rounded-lg overflow-hidden travel">
283
+ <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Sonnenuntergang in der Wüste" class="w-full h-64 object-cover">
284
+ <div class="overlay">
285
+ <h3 class="font-semibold">Sonnenuntergang in der Wüste</h3>
286
+ <p class="text-sm">Reisen</p>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Portfolio Item 6 -->
291
+ <div class="gallery-item rounded-lg overflow-hidden mountains">
292
+ <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Alpengipfel im Morgenlicht" class="w-full h-64 object-cover">
293
+ <div class="overlay">
294
+ <h3 class="font-semibold">Alpengipfel im Morgenlicht</h3>
295
+ <p class="text-sm">Berge</p>
296
+ </div>
297
+ </div>
298
+ </div>
299
+
300
+ <div class="text-center mt-12">
301
+ <a href="https://unsplash.com/@strayography" target="_blank" class="inline-flex items-center bg-white text-gray-800 font-semibold px-6 py-3 rounded-full hover:bg-gray-100 transition duration-300">
302
+ Kostenlose Stockfotos auf Unsplash <i class="fas fa-external-link-alt ml-2"></i>
303
+ </a>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <!-- Services Page -->
309
+ <section id="services" class="page py-20 bg-white">
310
+ <div class="container mx-auto px-6">
311
+ <h2 class="text-3xl font-bold text-center mb-6">Meine Dienstleistungen</h2>
312
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Ich biete maßgeschneiderte Fotografie- und Videografie-Lösungen für verschiedene Anlässe und Bedürfnisse.</p>
313
+
314
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
315
+ <!-- Service 1 -->
316
+ <div class="service-card bg-white p-8 rounded-lg text-center">
317
+ <div class="bg-indigo-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6">
318
+ <i class="fas fa-calendar-alt text-indigo-600 text-2xl"></i>
319
+ </div>
320
+ <h3 class="text-xl font-semibold mb-4">Eventfotografie</h3>
321
+ <p class="text-gray-600 mb-4">Professionelle Dokumentation Ihrer Veranstaltungen, Konzerte oder Firmenevents mit einzigartigen Bildern, die Stimmung und Emotionen einfangen.</p>
322
+ <p class="font-bold text-lg mb-4">ab 500€</p>
323
+ <button onclick="showPage('contact')" class="bg-indigo-600 text-white px-4 py-2 rounded-full text-sm hover:bg-indigo-700 transition duration-300">
324
+ Anfragen
325
+ </button>
326
+ </div>
327
+
328
+ <!-- Service 2 -->
329
+ <div class="service-card bg-white p-8 rounded-lg text-center">
330
+ <div class="bg-indigo-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6">
331
+ <i class="fas fa-video text-indigo-600 text-2xl"></i>
332
+ </div>
333
+ <h3 class="text-xl font-semibold mb-4">Videoproduktion</h3>
334
+ <p class="text-gray-600 mb-4">High-Quality Videos für Ihr Unternehmen, Produkt oder besondere Anlässe. Von Konzept bis Postproduktion - alles aus einer Hand.</p>
335
+ <p class="font-bold text-lg mb-4">ab 800€</p>
336
+ <button onclick="showPage('contact')" class="bg-indigo-600 text-white px-4 py-2 rounded-full text-sm hover:bg-indigo-700 transition duration-300">
337
+ Anfragen
338
+ </button>
339
+ </div>
340
+
341
+ <!-- Service 3 -->
342
+ <div class="service-card bg-white p-8 rounded-lg text-center">
343
+ <div class="bg-indigo-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6">
344
+ <i class="fas fa-ring text-indigo-600 text-2xl"></i>
345
+ </div>
346
+ <h3 class="text-xl font-semibold mb-4">Hochzeitsfotografie</h3>
347
+ <p class="text-gray-600 mb-4">Emotionale und authentische Bilder Ihres großen Tages. Diskret und professionell begleite ich Sie durch alle wichtigen Momente.</p>
348
+ <p class="font-bold text-lg mb-4">ab 1.200€</p>
349
+ <button onclick="showPage('contact')" class="bg-indigo-600 text-white px-4 py-2 rounded-full text-sm hover:bg-indigo-700 transition duration-300">
350
+ Anfragen
351
+ </button>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="mt-12 text-center">
356
+ <button onclick="showPage('workshops')" class="bg-white text-indigo-600 border-2 border-indigo-600 font-semibold px-6 py-3 rounded-full hover:bg-indigo-50 transition duration-300">
357
+ Entdecken Sie meine Astrofotografie-Workshops <i class="fas fa-arrow-right ml-2"></i>
358
+ </button>
359
+ </div>
360
+ </div>
361
+ </section>
362
+
363
+ <!-- Workshops Page -->
364
+ <section id="workshops" class="page py-20 bg-gray-100">
365
+ <div class="container mx-auto px-6">
366
+ <div class="flex flex-col md:flex-row">
367
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8">
368
+ <h2 class="text-3xl font-bold mb-6">Astrofotografie Workshops</h2>
369
+ <p class="text-gray-600 mb-6">Entdecken Sie mit mir die Faszination der Astrofotografie in den malerischen Berglandschaften des Allgäus. In meinen Workshops lernen Sie, wie Sie atemberaubende Aufnahmen des Nachthimmels erstellen.</p>
370
+
371
+ <h3 class="text-xl font-semibold mb-4">Was Sie lernen werden:</h3>
372
+ <ul class="text-gray-600 mb-6 space-y-2">
373
+ <li class="flex items-start">
374
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
375
+ <span>Grundlagen der Astrofotografie und notwendige Ausrüstung</span>
376
+ </li>
377
+ <li class="flex items-start">
378
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
379
+ <span>Kameraeinstellungen für perfekte Sternenaufnahmen</span>
380
+ </li>
381
+ <li class="flex items-start">
382
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
383
+ <span>Komposition und Planung von Nachtaufnahmen</span>
384
+ </li>
385
+ <li class="flex items-start">
386
+ <i class="fas fa-check text-indigo-600 mt-1 mr-2"></i>
387
+ <span>Nachbearbeitung mit Lightroom and Photoshop</span>
388
+ </li>
389
+ </ul>
390
+
391
+ <h3 class="text-xl font-semibold mb-4">Workshop-Formate:</h3>
392
+ <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
393
+ <div class="bg-white p-4 rounded-lg shadow-sm">
394
+ <h4 class="font-semibold mb-2">Einzel-Workshop</h4>
395
+ <p class="text-gray-600 text-sm">Persönliche Betreuung, individuelles Tempo</p>
396
+ <p class="font-bold mt-2">ab 300€</p>
397
+ </div>
398
+ <div class="bg-white p-4 rounded-lg shadow-sm">
399
+ <h4 class="font-semibold mb-2">Gruppen-Workshop</h4>
400
+ <p class="text-gray-600 text-sm">Max. 6 Teilnehmer, gemeinsames Lernen</p>
401
+ <p class="font-bold mt-2">ab 150€ p.P.</p>
402
+ </div>
403
+ </div>
404
+
405
+ <button onclick="showPage('contact')" class="bg-indigo-600 text-white px-6 py-3 rounded-full hover:bg-indigo-700 transition duration-300">
406
+ Workshop buchen <i class="fas fa-calendar-check ml-2"></i>
407
+ </button>
408
+ </div>
409
+
410
+ <div class="md:w-1/2">
411
+ <div class="bg-white p-6 rounded-lg shadow-md">
412
+ <h3 class="text-xl font-semibold mb-4 text-center">Preis-Kalkulator</h3>
413
+ <p class="text-gray-600 text-center mb-6">Erhalten Sie eine unverbindliche Preisindikation für Ihren Astrofotografie-Workshop.</p>
414
+
415
+ <div class="space-y-6">
416
+ <div>
417
+ <label for="workshop-type" class="block text-gray-700 mb-2">Workshop-Typ</label>
418
+ <select id="workshop-type" class="form-input w-full px-4 py-2">
419
+ <option value="single">Einzel-Workshop</option>
420
+ <option value="group">Gruppen-Workshop</option>
421
+ </select>
422
+ </div>
423
+
424
+ <div id="participants-container" class="hidden">
425
+ <label for="participants" class="block text-gray-700 mb-2">Anzahl Teilnehmer</label>
426
+ <input type="range" id="participants" min="2" max="6" value="2" class="w-full price-slider">
427
+ <div class="flex justify-between text-sm text-gray-600 mt-1">
428
+ <span>2</span>
429
+ <span>3</span>
430
+ <span>4</span>
431
+ <span>5</span>
432
+ <span>6</span>
433
+ </div>
434
+ </div>
435
+
436
+ <div>
437
+ <label for="duration" class="block text-gray-700 mb-2">Dauer</label>
438
+ <select id="duration" class="form-input w-full px-4 py-2">
439
+ <option value="half">Halber Tag (4 Std.)</option>
440
+ <option value="full">Ganzer Tag (8 Std.)</option>
441
+ <option value="weekend">Wochenende (2 Tage)</option>
442
+ </select>
443
+ </div>
444
+
445
+ <div>
446
+ <label for="location" class="block text-gray-700 mb-2">Ort</label>
447
+ <select id="location" class="form-input w-full px-4 py-2">
448
+ <option value="kempten">Kempten/Allgäu (inklusive)</option>
449
+ <option value="other">Anderer Ort (Aufpreis)</option>
450
+ </select>
451
+ </div>
452
+
453
+ <div class="bg-indigo-50 p-4 rounded-lg">
454
+ <h4 class="font-semibold text-indigo-800 mb-2">Geschätzter Preis:</h4>
455
+ <p id="price-estimate" class="text-2xl font-bold text-indigo-600">300€</p>
456
+ <p class="text-sm text-gray-600 mt-2">Dies ist eine unverbindliche Schätzung. Für ein genaues Angebot kontaktieren Sie mich bitte.</p>
457
+ </div>
458
+
459
+ <button onclick="showPage('contact')" class="w-full bg-indigo-600 text-white px-4 py-3 rounded-full hover:bg-indigo-700 transition duration-300">
460
+ Jetzt anfragen
461
+ </button>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- Testimonials Section -->
470
+ <section class="py-20 bg-indigo-900 text-white">
471
+ <div class="container mx-auto px-6">
472
+ <h2 class="text-3xl font-bold text-center mb-12">Was meine Kunden sagen</h2>
473
+
474
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
475
+ <!-- Testimonial 1 -->
476
+ <div class="testimonial-card p-8 rounded-lg">
477
+ <div class="flex items-center mb-4">
478
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Anna Müller" class="w-12 h-12 rounded-full mr-4">
479
+ <div>
480
+ <h4 class="font-semibold">Anna Müller</h4>
481
+ <p class="text-sm text-gray-600">Hochzeitsfotografie</p>
482
+ </div>
483
+ </div>
484
+ <p class="italic text-gray-700">"Markus hat unsere Hochzeit fotografiert und wir sind überglücklich mit den Ergebnissen! Er hat jeden besonderen Moment eingefangen, ohne aufdringlich zu sein. Die Bilder sind einfach magisch!"</p>
485
+ <div class="mt-4 text-yellow-500">
486
+ <i class="fas fa-star"></i>
487
+ <i class="fas fa-star"></i>
488
+ <i class="fas fa-star"></i>
489
+ <i class="fas fa-star"></i>
490
+ <i class="fas fa-star"></i>
491
+ </div>
492
+ </div>
493
+
494
+ <!-- Testimonial 2 -->
495
+ <div class="testimonial-card p-8 rounded-lg">
496
+ <div class="flex items-center mb-4">
497
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas Schmidt" class="w-12 h-12 rounded-full mr-4">
498
+ <div>
499
+ <h4 class="font-semibold">Thomas Schmidt</h4>
500
+ <p class="text-sm text-gray-600">Firmen-Event</p>
501
+ </div>
502
+ </div>
503
+ <p class="italic text-gray-700">"Die Fotos für unser Firmen-Event haben unsere Erwartungen bei weitem übertroffen. Markus versteht es perfekt, die richtige Stimmung zu kreieren und unser Unternehmen professionell darzustellen."</p>
504
+ <div class="mt-4 text-yellow-500">
505
+ <i class="fas fa-star"></i>
506
+ <i class="fas fa-star"></i>
507
+ <i class="fas fa-star"></i>
508
+ <i class="fas fa-star"></i>
509
+ <i class="fas fa-star"></i>
510
+ </div>
511
+ </div>
512
+
513
+ <!-- Testimonial 3 -->
514
+ <div class="testimonial-card p-8 rounded-lg">
515
+ <div class="flex items-center mb-4">
516
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Lisa Wagner" class="w-12 h-12 rounded-full mr-4">
517
+ <div>
518
+ <h4 class="font-semibold">Lisa Wagner</h4>
519
+ <p class="text-sm text-gray-600">Astrofotografie Workshop</p>
520
+ </div>
521
+ </div>
522
+ <p class="italic text-gray-700">"Der Astrofotografie-Workshop mit Markus war unglaublich lehrreich! Endlich verstehe ich, wie man atemberaubende Aufnahmen des Nachthimmels macht. Absolute Empfehlung!"</p>
523
+ <div class="mt-4 text-yellow-500">
524
+ <i class="fas fa-star"></i>
525
+ <i class="fas fa-star"></i>
526
+ <i class="fas fa-star"></i>
527
+ <i class="fas fa-star"></i>
528
+ <i class="fas fa-star"></i>
529
+ </div>
530
+ </div>
531
+ </div>
532
+ </div>
533
+ </section>
534
+
535
+ <!-- Contact Page -->
536
+ <section id="contact" class="page py-20 bg-white">
537
+ <div class="container mx-auto px-6">
538
+ <div class="flex flex-col md:flex-row">
539
+ <div class="md:w-1/2 mb-10 md:mb-0">
540
+ <h2 class="text-3xl font-bold mb-6">Lass uns connecten</h2>
541
+ <p class="text-gray-600 mb-8">Haben Sie Fragen zu meinen Dienstleistungen oder möchten Sie einen Termin vereinbaren? Füllen Sie das Formular aus oder kontaktieren Sie mich direkt.</p>
542
+
543
+ <div class="space-y-6">
544
+ <div class="flex items-start">
545
+ <i class="fas fa-map-marker-alt text-indigo-600 mt-1 mr-4"></i>
546
+ <div>
547
+ <h4 class="font-semibold">Standort</h4>
548
+ <p class="text-gray-600">Kempten, Allgäu</p>
549
+ </div>
550
+ </div>
551
+
552
+ <div class="flex items-start">
553
+ <i class="fas fa-envelope text-indigo-600 mt-1 mr-4"></i>
554
+ <div>
555
+ <h4 class="font-semibold">Email</h4>
556
+ <a href="mailto:info@strayography.de" class="text-gray-600 hover:text-indigo-600 transition">info@strayography.de</a>
557
+ </div>
558
+ </div>
559
+
560
+ <div class="flex items-start">
561
+ <i class="fas fa-phone text-indigo-600 mt-1 mr-4"></i>
562
+ <div>
563
+ <h4 class="font-semibold">Telefon</h4>
564
+ <a href="tel:+49123456789" class="text-gray-600 hover:text-indigo-600 transition">+49 123 456789</a>
565
+ </div>
566
+ </div>
567
+ </div>
568
+
569
+ <div class="mt-8">
570
+ <h4 class="font-semibold mb-4">Folgen Sie mir</h4>
571
+ <div class="flex space-x-4">
572
+ <a href="#" target="_blank" class="bg-gray-100 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 transition duration-300">
573
+ <i class="fab fa-instagram text-gray-700"></i>
574
+ </a>
575
+ <a href="#" target="_blank" class="bg-gray-100 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 transition duration-300">
576
+ <i class="fab fa-facebook-f text-gray-700"></i>
577
+ </a>
578
+ <a href="https://unsplash.com/@strayography" target="_blank" class="bg-gray-100 w-10 h-10 rounded-full flex items-center justify-center hover:bg-gray-200 transition duration-300">
579
+ <i class="fab fa-unsplash text-gray-700"></i>
580
+ </a>
581
+ </div>
582
+ </div>
583
+ </div>
584
+
585
+ <div class="md:w-1/2 md:pl-12">
586
+ <form id="contactForm" class="space-y-6">
587
+ <div>
588
+ <label for="name" class="block text-gray-700 mb-2">Name *</label>
589
+ <input type="text" id="name" class="form-input w-full px-4 py-2" required>
590
+ </div>
591
+
592
+ <div>
593
+ <label for="email" class="block text-gray-700 mb-2">Email *</label>
594
+ <input type="email" id="email" class="form-input w-full px-4 py-2" required>
595
+ </div>
596
+
597
+ <div>
598
+ <label for="subject" class="block text-gray-700 mb-2">Betreff</label>
599
+ <input type="text" id="subject" class="form-input w-full px-4 py-2">
600
+ </div>
601
+
602
+ <div>
603
+ <label for="service" class="block text-gray-700 mb-2">Interesse an</label>
604
+ <select id="service" class="form-input w-full px-4 py-2">
605
+ <option value="">Bitte auswählen</option>
606
+ <option value="event">Eventfotografie</option>
607
+ <option value="video">Videoproduktion</option>
608
+ <option value="wedding">Hochzeitsfotografie</option>
609
+ <option value="workshop">Astrofotografie Workshop</option>
610
+ <option value="other">Andere Anfrage</option>
611
+ </select>
612
+ </div>
613
+
614
+ <div>
615
+ <label for="message" class="block text-gray-700 mb-2">Nachricht *</label>
616
+ <textarea id="message" rows="4" class="form-input w-full px-4 py-2" required></textarea>
617
+ </div>
618
+
619
+ <button type="submit" class="w-full bg-indigo-600 text-white px-6 py-3 rounded-full hover:bg-indigo-700 transition duration-300">
620
+ Nachricht senden <i class="fas fa-paper-plane ml-2"></i>
621
+ </button>
622
+ </form>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ </section>
627
+
628
+ <!-- Footer -->
629
+ <footer class="bg-gray-900 text-white py-12">
630
+ <div class="container mx-auto px-6">
631
+ <div class="flex flex-col md:flex-row justify-between items-center">
632
+ <div class="mb-6 md:mb-0">
633
+ <div class="flex items-center">
634
+ <i class="fas fa-mountain text-2xl text-indigo-400 mr-2"></i>
635
+ <span class="font-bold text-xl">Strayography</span>
636
+ </div>
637
+ <p class="mt-2 text-gray-400">Professionelle Fotografie & Videografie</p>
638
+ </div>
639
+
640
+ <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8 text-center md:text-left">
641
+ <a href="#" class="text-gray-400 hover:text-white transition">Impressum</a>
642
+ <a href="#" class="text-gray-400 hover:text-white transition">Datenschutz</a>
643
+ <a href="#" class="text-gray-400 hover:text-white transition">AGB</a>
644
+ </div>
645
+ </div>
646
+
647
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
648
+ <p>&copy; 2023 Strayography by Markus Falkenhagen. Alle Rechte vorbehalten.</p>
649
+ </div>
650
+ </div>
651
+ </footer>
652
+
653
+ <!-- Image Modal -->
654
+ <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center p-4 modal">
655
+ <div class="relative max-w-4xl w-full">
656
+ <button onclick="closeModal()" class="absolute -top-10 right-0 text-white text-2xl hover:text-indigo-400 transition">
657
+ <i class="fas fa-times"></i>
658
+ </button>
659
+ <img id="modalImage" src="" alt="" class="w-full h-auto max-h-screen object-contain">
660
+ <div class="text-white mt-2 text-center">
661
+ <h3 id="modalTitle" class="font-semibold"></h3>
662
+ <p id="modalCategory" class="text-sm text-gray-300"></p>
663
+ </div>
664
+ </div>
665
+ </div>
666
+
667
+ <!-- Success Modal -->
668
+ <div id="successModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden flex items-center justify-center p-4 modal">
669
+ <div class="bg-white p-8 rounded-lg max-w-md w-full mx-4 text-center">
670
+ <div class="bg-green-100 w-20 h-20 mx-auto rounded-full flex items-center justify-center mb-6">
671
+ <i class="fas fa-check text-green-500 text-3xl"></i>
672
+ </div>
673
+ <h3 class="text-2xl font-bold mb-4">Vielen Dank!</h3>
674
+ <p class="text-gray-600 mb-6">Ihre Nachricht wurde erfolgreich versendet. Ich werde mich in Kürze bei Ihnen melden.</p>
675
+ <button onclick="closeModal()" class="bg-indigo-600 text-white px-6 py-3 rounded-full hover:bg-indigo-700 transition duration-300">
676
+ Schließen
677
+ </button>
678
+ </div>
679
+ </div>
680
+
681
+ <script>
682
+ // Mobile menu toggle
683
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
684
+ const mobileMenu = document.querySelector('.mobile-menu');
685
+
686
+ mobileMenuButton.addEventListener('click', () => {
687
+ mobileMenu.classList.toggle('hidden');
688
+ });
689
+
690
+ // Page navigation system
691
+ function showPage(pageId) {
692
+ // Hide all pages
693
+ document.querySelectorAll('.page').forEach(page => {
694
+ page.classList.remove('active');
695
+ });
696
+
697
+ // Show selected page
698
+ const targetPage = document.getElementById(pageId);
699
+ if (targetPage) {
700
+ targetPage.classList.add('active');
701
+
702
+ // Scroll to top of the page
703
+ window.scrollTo({
704
+ top: 0,
705
+ behavior: 'smooth'
706
+ });
707
+
708
+ // Update URL hash
709
+ window.location.hash = pageId;
710
+
711
+ // Update active nav link
712
+ document.querySelectorAll('.nav-link').forEach(link => {
713
+ link.classList.remove('active');
714
+ if (link.getAttribute('data-page') === pageId) {
715
+ link.classList.add('active');
716
+ }
717
+ });
718
+ }
719
+
720
+ // Close mobile menu if open
721
+ mobileMenu.classList.add('hidden');
722
+ }
723
+
724
+ // Initialize page based on URL hash
725
+ function initPage() {
726
+ const hash = window.location.hash.substring(1);
727
+ const validPages = ['home', 'about', 'portfolio', 'services', 'workshops', 'contact'];
728
+
729
+ if (hash && validPages.includes(hash)) {
730
+ showPage(hash);
731
+ } else {
732
+ showPage('home');
733
+ }
734
+ }
735
+
736
+ // Gallery filtering
737
+ function filterGallery(category) {
738
+ const galleryItems = document.querySelectorAll('.gallery-item');
739
+
740
+ galleryItems.forEach(item => {
741
+ if (category === 'all' || item.classList.contains(category)) {
742
+ item.style.display = 'block';
743
+ } else {
744
+ item.style.display = 'none';
745
+ }
746
+ });
747
+ }
748
+
749
+ // Open image modal
750
+ function openModal(imgSrc, title, category) {
751
+ document.getElementById('modalImage').src = imgSrc;
752
+ document.getElementById('modalTitle').textContent = title;
753
+ document.getElementById('modalCategory').textContent = category;
754
+ document.getElementById('imageModal').classList.remove('hidden');
755
+ document.body.style.overflow = 'hidden';
756
+ }
757
+
758
+ // Close any modal
759
+ function closeModal() {
760
+ document.querySelectorAll('.modal').forEach(modal => {
761
+ modal.classList.add('hidden');
762
+ });
763
+ document.body.style.overflow = 'auto';
764
+ }
765
+
766
+ // Setup gallery item clicks
767
+ document.querySelectorAll('.gallery-item').forEach(item => {
768
+ item.addEventListener('click', function() {
769
+ const imgSrc = this.querySelector('img').src;
770
+ const title = this.querySelector('.overlay h3').textContent;
771
+ const category = this.querySelector('.overlay p').textContent;
772
+ openModal(imgSrc, title, category);
773
+ });
774
+ });
775
+
776
+ // Price calculator logic
777
+ const workshopType = document.getElementById('workshop-type');
778
+ const participantsContainer = document.getElementById('participants-container');
779
+ const participants = document.getElementById('participants');
780
+ const duration = document.getElementById('duration');
781
+ const location = document.getElementById('location');
782
+ const priceEstimate = document.getElementById('price-estimate');
783
+
784
+ function updatePriceEstimate() {
785
+ let price = 0;
786
+
787
+ // Base price based on workshop type
788
+ if (workshopType.value === 'single') {
789
+ price = 300;
790
+ participantsContainer.classList.add('hidden');
791
+ } else {
792
+ price = 150 * parseInt(participants.value);
793
+ participantsContainer.classList.remove('hidden');
794
+ }
795
+
796
+ // Duration multiplier
797
+ if (duration.value === 'full') {
798
+ price *= 1.8;
799
+ } else if (duration.value === 'weekend') {
800
+ price *= 3.5;
801
+ }
802
+
803
+ // Location surcharge
804
+ if (location.value === 'other') {
805
+ price += 100;
806
+ }
807
+
808
+ priceEstimate.textContent = `${Math.round(price)}€`;
809
+ }
810
+
811
+ // Event listeners for price calculator
812
+ workshopType.addEventListener('change', updatePriceEstimate);
813
+ participants.addEventListener('input', updatePriceEstimate);
814
+ duration.addEventListener('change', updatePriceEstimate);
815
+ location.addEventListener('change', updatePriceEstimate);
816
+
817
+ // Initialize price calculator
818
+ updatePriceEstimate();
819
+
820
+ // Form submission
821
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
822
+ e.preventDefault();
823
+
824
+ // Here you would normally send the form data to a server
825
+ // For this example, we'll just show the success modal
826
+
827
+ // Webhook simulation (would be an actual fetch request in production)
828
+ const formData = {
829
+ name: document.getElementById('name').value,
830
+ email: document.getElementById('email').value,
831
+ subject: document.getElementById('subject').value,
832
+ service: document.getElementById('service').value,
833
+ message: document.getElementById('message').value
834
+ };
835
+
836
+ console.log('Form data to be sent:', formData);
837
+
838
+ // In a real implementation, you would do something like:
839
+ /*
840
+ fetch('YOUR_WEBHOOK_URL', {
841
+ method: 'POST',
842
+ headers: {
843
+ 'Content-Type': 'application/json',
844
+ },
845
+ body: JSON.stringify(formData),
846
+ })
847
+ .then(response => response.json())
848
+ .then(data => {
849
+ console.log('Success:', data);
850
+ openSuccessModal();
851
+ })
852
+ .catch((error) => {
853
+ console.error('Error:', error);
854
+ alert('Es gab ein Problem beim Senden Ihrer Nachricht. Bitte versuchen Sie es später erneut.');
855
+ });
856
+ */
857
+
858
+ // For this demo, we'll just show success
859
+ document.getElementById('successModal').classList.remove('hidden');
860
+ document.body.style.overflow = 'hidden';
861
+
862
+ // Reset form
863
+ this.reset();
864
+ });
865
+
866
+ // Close modals when clicking outside
867
+ window.addEventListener('click', function(e) {
868
+ if (e.target.classList.contains('modal')) {
869
+ closeModal();
870
+ }
871
+ });
872
+
873
+ // Initialize the page when DOM is loaded
874
+ document.addEventListener('DOMContentLoaded', initPage);
875
+
876
+ // Handle back/forward navigation
877
+ window.addEventListener('hashchange', initPage);
878
+ </script>
879
+ <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=a40login/strayo-v2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
880
+ </html>
prompts.txt ADDED
File without changes