Hugging Face's logo

Spaces:
spwotton
/
taverna2
Running

App Files Community
spwotton commited on
Commit
1ef1b05
·
verified ·
1 Parent(s): 912a92a

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +691 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Taverna2
3
- emoji: 🏆
4
- colorFrom: indigo
5
- colorTo: indigo
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: taverna2
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
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,691 @@
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="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Taverna in Bayview | Authentic Mediterranean Cuisine</title>
8
+ <meta name="description" content="Family-owned Mediterranean restaurant in Bayview serving fresh Greek & Italian classics since 2005." />
9
+ <link rel="canonical" href="https://tavernainbayview.com/" />
10
+ <!-- Open Graph / Twitter Card -->
11
+ <meta property="og:title" content="Taverna in Bayview" />
12
+ <meta property="og:description" content="Authentic Mediterranean flavors on the Bayview waterfront." />
13
+ <meta property="og:image" content="/og-cover.jpg" />
14
+ <meta property="og:url" content="https://tavernainbayview.com/" />
15
+ <meta name="twitter:card" content="summary_large_image" />
16
+
17
+ <!-- Tailwind -->
18
+ <script src="https://cdn.tailwindcss.com"></script>
19
+ <script>
20
+ tailwind.config = {
21
+ darkMode: 'class',
22
+ theme: {
23
+ extend: {
24
+ colors: {
25
+ brand: {
26
+ primary: '#f59e0b', // amber-500
27
+ dark: '#92400e' // amber-900
28
+ }
29
+ },
30
+ fontFamily: {
31
+ base: ['Inter','sans-serif'],
32
+ display: ['Playfair Display', 'serif']
33
+ }
34
+ }
35
+ }
36
+ }
37
+ </script>
38
+ <!-- Font Awesome -->
39
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-pq1pS4v..." crossorigin="anonymous" referrerpolicy="no-referrer" />
40
+ <!-- AOS Animation -->
41
+ <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css" />
42
+ <!-- Google Fonts -->
43
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
44
+ <!-- Favicon & Preload hero for LCP -->
45
+ <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
46
+ <link rel="preload" as="image" href="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1920&q=80" />
47
+
48
+ <!-- Custom tweaks not possible with Tailwind utility alone -->
49
+ <style>
50
+ .hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55);} /* overlay */
51
+ .menu-item:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,.15);} /* lift card */
52
+ .nav-link:after{content:"";display:block;height:2px;background:#f59e0b;width:0;transition:width .3s;}
53
+ .nav-link:hover:after{width:100%;}
54
+ .footer-link{@apply text-gray-400 hover:text-brand-primary transition-colors;}
55
+ .social-icon{@apply w-10 h-10 flex items-center justify-center rounded-full bg-gray-700 hover:bg-brand-primary text-white transition-colors;}
56
+ .form-input{@apply w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-brand-primary focus:border-brand-primary outline-none transition dark:bg-gray-800 dark:text-white;}
57
+ .scroll-top{@apply fixed bottom-8 right-8 w-12 h-12 flex items-center justify-center rounded-full bg-brand-primary text-white shadow-lg z-50 opacity-0 invisible transition-all duration-300;}
58
+ .scroll-top.active{@apply opacity-100 visible;}
59
+ .scroll-top:hover{@apply bg-brand-dark transform scale-110;}
60
+ .special-badge{@apply absolute -top-3 -right-3 bg-brand-primary text-white font-bold text-sm px-3 py-1 rounded-full shadow-md z-10;}
61
+ .floating-label{@apply absolute left-4 -top-2 px-2 bg-white dark:bg-gray-800 text-sm text-gray-500 transition-all duration-200 pointer-events-none;}
62
+ .form-group{@apply relative;}
63
+ input:focus + .floating-label,
64
+ textarea:focus + .floating-label,
65
+ input:not(:placeholder-shown) + .floating-label,
66
+ textarea:not(:placeholder-shown) + .floating-label{@apply -top-2 text-brand-primary text-xs;}
67
+ </style>
68
+ </head>
69
+ <body class="font-base bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
70
+ <!-- ================================================= HEADER -->
71
+ <header class="sticky top-0 z-50 bg-white/95 backdrop-blur shadow-md dark:bg-gray-800/95" data-aos="fade-down">
72
+ <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
73
+ <a href="#home" class="flex items-center gap-3">
74
+ <i class="fas fa-utensils text-3xl text-brand-primary"></i>
75
+ <span class="text-2xl font-bold">Taverna in Bayview</span>
76
+ </a>
77
+ <nav class="hidden md:flex gap-8">
78
+ <a href="#home" class="nav-link">Home</a>
79
+ <a href="#menu" class="nav-link">Menu</a>
80
+ <a href="#about" class="nav-link">About</a>
81
+ <a href="#gallery" class="nav-link">Gallery</a>
82
+ <a href="#contact" class="nav-link">Contact</a>
83
+ </nav>
84
+ <div class="flex items-center gap-4">
85
+ <button id="themeToggle" aria-label="Toggle dark mode" class="mr-3 text-xl">
86
+ <i class="far fa-moon"></i>
87
+ </button>
88
+ <a href="#contact" class="hidden md:block bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 px-6 rounded-full transition-transform hover:scale-105">
89
+ Reserve Now
90
+ </a>
91
+ <button id="mobile-menu-button" class="md:hidden text-2xl" aria-label="Open menu">
92
+ <i class="fas fa-bars"></i>
93
+ </button>
94
+ </div>
95
+ </div>
96
+ <nav id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 pb-4">
97
+ <a href="#home" class="block py-2 px-6 nav-link">Home</a>
98
+ <a href="#menu" class="block py-2 px-6 nav-link">Menu</a>
99
+ <a href="#about" class="block py-2 px-6 nav-link">About</a>
100
+ <a href="#gallery" class="block py-2 px-6 nav-link">Gallery</a>
101
+ <a href="#contact" class="block py-2 px-6 nav-link">Contact</a>
102
+ </nav>
103
+ </header>
104
+
105
+ <!-- ================================================= HERO -->
106
+ <section id="home" class="relative hero min-h-screen flex items-center justify-center text-center text-white bg-[url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=1920&q=80')] bg-cover bg-center" data-aos="fade">
107
+ <div class="relative z-10 max-w-3xl px-6">
108
+ <h1 class="text-5xl md:text-6xl font-extrabold mb-6 drop-shadow-lg font-display">Authentic Mediterranean Flavors</h1>
109
+ <p class="text-xl md:text-2xl mb-8">Experience the taste of the Mediterranean right here in Bayview</p>
110
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
111
+ <a href="#menu" class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">View Our Menu</a>
112
+ <a href="#contact" class="border-2 border-white hover:bg-white hover:text-gray-800 text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">Make a Reservation</a>
113
+ </div>
114
+ </div>
115
+ <div class="absolute bottom-8 left-0 right-0 flex justify-center">
116
+ <a href="#about" class="text-white text-3xl animate-bounce">
117
+ <i class="fas fa-chevron-down"></i>
118
+ </a>
119
+ </div>
120
+ </section>
121
+
122
+ <!-- ================================================= SPECIALS -->
123
+ <section class="py-16 bg-white dark:bg-gray-900">
124
+ <div class="max-w-7xl mx-auto px-6">
125
+ <div class="text-center mb-12" data-aos="fade-up">
126
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 font-display">Today's Specials</h2>
127
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Chef's selection of seasonal Mediterranean dishes</p>
128
+ </div>
129
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8" data-aos="fade-up" data-aos-delay="100">
130
+ <!-- Special 1 -->
131
+ <div class="relative bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg group">
132
+ <div class="absolute top-0 left-0 bg-brand-primary text-white px-4 py-1 font-bold">NEW</div>
133
+ <img src="https://images.unsplash.com/photo-1546069901-ba9599a8e63c?auto=format&fit=crop&w=800&q=80" alt="Lamb Souvlaki" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
134
+ <div class="p-6">
135
+ <div class="flex justify-between items-start mb-2">
136
+ <h3 class="text-xl font-bold">Lamb Souvlaki</h3>
137
+ <span class="text-brand-primary font-bold">$18.99</span>
138
+ </div>
139
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Tender marinated lamb skewers with roasted vegetables and tzatziki.</p>
140
+ <button class="w-full bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 rounded-lg transition">
141
+ Order Now
142
+ </button>
143
+ </div>
144
+ </div>
145
+ <!-- Special 2 -->
146
+ <div class="relative bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg group">
147
+ <div class="absolute top-0 left-0 bg-red-500 text-white px-4 py-1 font-bold">CHEF'S PICK</div>
148
+ <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=800&q=80" alt="Seafood Paella" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
149
+ <div class="p-6">
150
+ <div class="flex justify-between items-start mb-2">
151
+ <h3 class="text-xl font-bold">Seafood Paella</h3>
152
+ <span class="text-brand-primary font-bold">$22.99</span>
153
+ </div>
154
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Traditional Spanish rice dish with fresh seafood and saffron.</p>
155
+ <button class="w-full bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 rounded-lg transition">
156
+ Order Now
157
+ </button>
158
+ </div>
159
+ </div>
160
+ <!-- Special 3 -->
161
+ <div class="relative bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg group">
162
+ <img src="https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=800&q=80" alt="Eggplant Parmigiana" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
163
+ <div class="p-6">
164
+ <div class="flex justify-between items-start mb-2">
165
+ <h3 class="text-xl font-bold">Eggplant Parmigiana</h3>
166
+ <span class="text-brand-primary font-bold">$15.99</span>
167
+ </div>
168
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Layers of eggplant, tomato sauce, and melted mozzarella.</p>
169
+ <button class="w-full bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 rounded-lg transition">
170
+ Order Now
171
+ </button>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- ================================================= ABOUT -->
179
+ <section id="about" class="py-20 bg-gray-50 dark:bg-gray-950" data-aos="fade-up">
180
+ <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center gap-12">
181
+ <div class="md:w-1/2 space-y-6">
182
+ <h2 class="text-3xl md:text-4xl font-bold font-display">Our Story</h2>
183
+ <p class="text-gray-600 dark:text-gray-300">Founded in 2005, Taverna in Bayview brings the authentic flavors of the Mediterranean to your table. Our recipes have been passed down through generations, ensuring an unforgettable dining experience.</p>
184
+ <p class="text-gray-600 dark:text-gray-300">We source only the freshest ingredients, many imported directly from the Mediterranean region, to create dishes that transport you to the sunny coasts of Greece, Italy, and beyond.</p>
185
+ <div class="grid grid-cols-2 gap-4">
186
+ <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
187
+ <i class="fas fa-seedling text-brand-primary text-2xl mb-2"></i>
188
+ <h3 class="font-semibold">Fresh Ingredients</h3>
189
+ <p class="text-sm text-gray-600 dark:text-gray-300">Locally sourced & imported</p>
190
+ </div>
191
+ <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
192
+ <i class="fas fa-heart text-brand-primary text-2xl mb-2"></i>
193
+ <h3 class="font-semibold">Family Recipes</h3>
194
+ <p class="text-sm text-gray-600 dark:text-gray-300">Handed down for generations</p>
195
+ </div>
196
+ <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
197
+ <i class="fas fa-wine-glass-alt text-brand-primary text-2xl mb-2"></i>
198
+ <h3 class="font-semibold">Fine Wines</h3>
199
+ <p class="text-sm text-gray-600 dark:text-gray-300">Mediterranean selection</p>
200
+ </div>
201
+ <div class="bg-brand-primary/10 p-4 rounded-lg text-center hover:bg-brand-primary/20 transition">
202
+ <i class="fas fa-utensils text-brand-primary text-2xl mb-2"></i>
203
+ <h3 class="font-semibold">Authentic Cuisine</h3>
204
+ <p class="text-sm text-gray-600 dark:text-gray-300">Traditional preparation</p>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ <div class="md:w-1/2 relative">
209
+ <img src="https://images.unsplash.com/photo-1559847844-5315695dadae?auto=format&fit=crop&w=1280&q=80" alt="Mediterranean cuisine" class="rounded-lg shadow-lg w-full h-auto" loading="lazy" />
210
+ <div class="absolute -bottom-6 -right-6 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg w-3/4" data-aos="fade-left" data-aos-delay="300">
211
+ <h3 class="text-xl font-bold mb-2">Meet Our Chef</h3>
212
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Chef Andreas Papadopoulos brings 25 years of culinary expertise from Athens to Bayview.</p>
213
+ <a href="#" class="text-brand-primary font-semibold hover:underline">Read Bio →</a>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- ================================================= GALLERY -->
220
+ <section id="gallery" class="py-20 bg-white dark:bg-gray-900">
221
+ <div class="max-w-7xl mx-auto px-6">
222
+ <div class="text-center mb-12" data-aos="fade-up">
223
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 font-display">Our Gallery</h2>
224
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">A glimpse into our restaurant and culinary creations</p>
225
+ </div>
226
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" data-aos="fade-up" data-aos-delay="100">
227
+ <div class="group relative overflow-hidden rounded-lg shadow-lg">
228
+ <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=600&q=80" alt="Restaurant interior" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
229
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
230
+ <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
231
+ <i class="fas fa-search-plus text-xl"></i>
232
+ </button>
233
+ </div>
234
+ </div>
235
+ <div class="group relative overflow-hidden rounded-lg shadow-lg">
236
+ <img src="https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=600&q=80" alt="Dining area" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
237
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
238
+ <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
239
+ <i class="fas fa-search-plus text-xl"></i>
240
+ </button>
241
+ </div>
242
+ </div>
243
+ <div class="group relative overflow-hidden rounded-lg shadow-lg">
244
+ <img src="https://images.unsplash.com/photo-1517248135467-4dbc1a927541?auto=format&fit=crop&w=600&q=80" alt="Bar area" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
245
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
246
+ <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
247
+ <i class="fas fa-search-plus text-xl"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ <div class="group relative overflow-hidden rounded-lg shadow-lg">
252
+ <img src="https://images.unsplash.com/photo-1565557623262-b51c2513a641?auto=format&fit=crop&w=600&q=80" alt="Food presentation" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
253
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
254
+ <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
255
+ <i class="fas fa-search-plus text-xl"></i>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ <div class="group relative overflow-hidden rounded-lg shadow-lg">
260
+ <img src="https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=600&q=80" alt="Chef preparing food" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
261
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
262
+ <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
263
+ <i class="fas fa-search-plus text-xl"></i>
264
+ </button>
265
+ </div>
266
+ </div>
267
+ <div class="group relative overflow-hidden rounded-lg shadow-lg">
268
+ <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&w=600&q=80" alt="Outdoor seating" class="w-full h-64 object-cover transform group-hover:scale-110 transition duration-500">
269
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
270
+ <button class="bg-brand-primary hover:bg-brand-dark text-white p-3 rounded-full">
271
+ <i class="fas fa-search-plus text-xl"></i>
272
+ </button>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ <div class="text-center mt-12">
277
+ <button class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">
278
+ View Full Gallery
279
+ </button>
280
+ </div>
281
+ </div>
282
+ </section>
283
+
284
+ <!-- ================================================= MENU -->
285
+ <section id="menu" class="py-20 bg-gray-50 dark:bg-gray-950" data-aos="fade-up">
286
+ <div class="max-w-7xl mx-auto px-6">
287
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-6 font-display">Our Menu</h2>
288
+ <p class="text-center text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-12">Explore our selection of authentic Mediterranean dishes</p>
289
+
290
+ <div class="flex justify-center mb-12">
291
+ <div class="inline-flex rounded-md shadow-sm" role="group">
292
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-brand-primary text-white">
293
+ All Menu
294
+ </button>
295
+ <button type="button" class="px-4 py-2 text-sm font-medium bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
296
+ Appetizers
297
+ </button>
298
+ <button type="button" class="px-4 py-2 text-sm font-medium bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
299
+ Main Courses
300
+ </button>
301
+ <button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
302
+ Desserts
303
+ </button>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
308
+ <!-- Greek Salad -->
309
+ <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
310
+ <header class="flex justify-between items-center mb-4">
311
+ <h3 class="text-xl font-bold">Greek Salad</h3>
312
+ <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$9.99</span>
313
+ </header>
314
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Fresh tomatoes, cucumbers, red onion, feta cheese, and Kalamata olives, dressed with olive oil and oregano.</p>
315
+ <footer class="flex justify-between items-center">
316
+ <span class="text-brand-primary font-medium">Appetizer</span>
317
+ <button aria-label="Add Greek Salad" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
318
+ </footer>
319
+ </article>
320
+ <!-- Gyros Platter -->
321
+ <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
322
+ <header class="flex justify-between items-center mb-4">
323
+ <h3 class="text-xl font-bold">Gyros Platter</h3>
324
+ <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$14.99</span>
325
+ </header>
326
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Tender slices of seasoned meat with pita bread, tzatziki sauce, tomatoes, onions, and a side of Greek fries.</p>
327
+ <footer class="flex justify-between items-center">
328
+ <span class="text-brand-primary font-medium">Main Course</span>
329
+ <button aria-label="Add Gyros Platter" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
330
+ </footer>
331
+ </article>
332
+ <!-- Moussaka -->
333
+ <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
334
+ <header class="flex justify-between items-center mb-4">
335
+ <h3 class="text-xl font-bold">Moussaka</h3>
336
+ <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$16.99</span>
337
+ </header>
338
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Layers of eggplant, spiced ground meat, and creamy béchamel sauce, baked to perfection.</p>
339
+ <footer class="flex justify-between items-center">
340
+ <span class="text-brand-primary font-medium">Main Course</span>
341
+ <button aria-label="Add Moussaka" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
342
+ </footer>
343
+ </article>
344
+ <!-- Spanakopita -->
345
+ <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
346
+ <header class="flex justify-between items-center mb-4">
347
+ <h3 class="text-xl font-bold">Spanakopita</h3>
348
+ <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$8.50</span>
349
+ </header>
350
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Flaky phyllo dough filled with spinach, feta cheese, onions, and herbs.</p>
351
+ <footer class="flex justify-between items-center">
352
+ <span class="text-brand-primary font-medium">Appetizer</span>
353
+ <button aria-label="Add Spanakopita" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
354
+ </footer>
355
+ </article>
356
+ <!-- Grilled Octopus -->
357
+ <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
358
+ <header class="flex justify-between items-center mb-4">
359
+ <h3 class="text-xl font-bold">Grilled Octopus</h3>
360
+ <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$18.99</span>
361
+ </header>
362
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Tender octopus grilled to perfection, served with lemon, olive oil, and oregano.</p>
363
+ <footer class="flex justify-between items-center">
364
+ <span class="text-brand-primary font-medium">Main Course</span>
365
+ <button aria-label="Add Grilled Octopus" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
366
+ </footer>
367
+ </article>
368
+ <!-- Baklava -->
369
+ <article class="menu-item bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition duration-300">
370
+ <header class="flex justify-between items-center mb-4">
371
+ <h3 class="text-xl font-bold">Baklava</h3>
372
+ <span class="bg-brand-primary/20 text-brand-primary px-3 py-1 rounded-full text-sm font-semibold">$7.99</span>
373
+ </header>
374
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Sweet pastry made of layers of phyllo filled with chopped nuts and sweetened with syrup.</p>
375
+ <footer class="flex justify-between items-center">
376
+ <span class="text-brand-primary font-medium">Dessert</span>
377
+ <button aria-label="Add Baklava" class="text-brand-primary text-xl hover:text-brand-dark"><i class="fas fa-plus-circle"></i></button>
378
+ </footer>
379
+ </article>
380
+ </div>
381
+ <div class="text-center mt-12">
382
+ <a href="/full-menu.pdf" target="_blank" class="inline-block bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 px-8 rounded-full transition-transform hover:scale-105">
383
+ Download Full Menu ↗
384
+ </a>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- ================================================= TESTIMONIALS -->
390
+ <section class="py-20 bg-brand-primary/10" data-aos="fade-up">
391
+ <div class="max-w-7xl mx-auto px-6">
392
+ <h2 class="text-3xl md:text-4xl font-bold mb-16 text-center text-gray-800 dark:text-gray-100 font-display">What Our Guests Say</h2>
393
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
394
+ <figure class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="100">
395
+ <div class="flex mb-4 text-brand-primary">★★★★★</div>
396
+ <blockquote class="text-gray-600 dark:text-gray-300 mb-6">"The best Mediterranean food I've had outside of Greece! The moussaka is absolutely divine."</blockquote>
397
+ <figcaption class="flex items-center">
398
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-12 h-12 rounded-full mr-4" />
399
+ <div><span class="font-bold">Sarah J.</span><br /><span class="text-sm text-gray-500">Local Food Critic</span></div>
400
+ </figcaption>
401
+ </figure>
402
+ <figure class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="200">
403
+ <div class="flex mb-4 text-brand-primary">★★★★★</div>
404
+ <blockquote class="text-gray-600 dark:text-gray-300 mb-6">"Every dish is prepared with such care and authenticity. The grilled octopus is a must‑try!"</blockquote>
405
+ <figcaption class="flex items-center">
406
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Michael T." class="w-12 h-12 rounded-full mr-4" />
407
+ <div><span class="font-bold">Michael T.</span><br /><span class="text-sm text-gray-500">Regular Customer</span></div>
408
+ </figcaption>
409
+ </figure>
410
+ <figure class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md" data-aos="fade-up" data-aos-delay="300">
411
+ <div class="flex mb-4 text-brand-primary">★★★★☆</div>
412
+ <blockquote class="text-gray-600 dark:text-gray-300 mb-6">"The atmosphere is wonderful and the service is excellent. We come here for every special occasion."</blockquote>
413
+ <figcaption class="flex items-center">
414
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa M." class="w-12 h-12 rounded-full mr-4" />
415
+ <div><span class="font-bold">Lisa M.</span><br /><span class="text-sm text-gray-500">Bayview Resident</span></div>
416
+ </figcaption>
417
+ </figure>
418
+ </div>
419
+ </div>
420
+ </section>
421
+
422
+ <!-- ================================================= EVENTS -->
423
+ <section class="py-20 bg-white dark:bg-gray-900">
424
+ <div class="max-w-7xl mx-auto px-6">
425
+ <div class="text-center mb-12" data-aos="fade-up">
426
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 font-display">Upcoming Events</h2>
427
+ <p class="max-w-2xl mx-auto text-gray-600 dark:text-gray-300">Join us for special evenings of food, wine, and Mediterranean culture</p>
428
+ </div>
429
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
430
+ <!-- Event 1 -->
431
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg flex flex-col md:flex-row" data-aos="fade-right">
432
+ <div class="md:w-1/3 bg-brand-primary text-white p-6 flex flex-col items-center justify-center">
433
+ <div class="text-4xl font-bold">15</div>
434
+ <div class="text-xl uppercase">June</div>
435
+ <div class="mt-4 text-sm">7:00 PM</div>
436
+ </div>
437
+ <div class="md:w-2/3 p-6">
438
+ <h3 class="text-xl font-bold mb-2">Greek Wine Tasting</h3>
439
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Sample a selection of premium Greek wines paired with artisanal cheeses.</p>
440
+ <div class="flex justify-between items-center">
441
+ <span class="text-sm text-gray-500">$45 per person</span>
442
+ <button class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 px-4 rounded-full text-sm transition">
443
+ Reserve Spot
444
+ </button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ <!-- Event 2 -->
449
+ <div class="bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg flex flex-col md:flex-row" data-aos="fade-left">
450
+ <div class="md:w-1/3 bg-brand-primary text-white p-6 flex flex-col items-center justify-center">
451
+ <div class="text-4xl font-bold">22</div>
452
+ <div class="text-xl uppercase">June</div>
453
+ <div class="mt-4 text-sm">6:30 PM</div>
454
+ </div>
455
+ <div class="md:w-2/3 p-6">
456
+ <h3 class="text-xl font-bold mb-2">Live Bouzouki Night</h3>
457
+ <p class="text-gray-600 dark:text-gray-300 mb-4">Traditional Greek music performance while you enjoy our special meze platter.</p>
458
+ <div class="flex justify-between items-center">
459
+ <span class="text-sm text-gray-500">No cover charge</span>
460
+ <button class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-2 px-4 rounded-full text-sm transition">
461
+ Learn More
462
+ </button>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ <div class="text-center mt-12">
468
+ <button class="border-2 border-brand-primary text-brand-primary hover:bg-brand-primary hover:text-white font-bold py-3 px-8 rounded-full transition">
469
+ View All Events
470
+ </button>
471
+ </div>
472
+ </div>
473
+ </section>
474
+
475
+ <!-- ================================================= CONTACT -->
476
+ <section id="contact" class="py-20 bg-gray-50 dark:bg-gray-950" data-aos="fade-up">
477
+ <div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row gap-12">
478
+ <div class="md:w-1/2 space-y-8">
479
+ <h3 class="text-2xl font-bold font-display">Visit Us</h3>
480
+ <address class="not-italic space-y-4 text-gray-600 dark:text-gray-300">
481
+ <p><i class="fas fa-map-marker-alt text-brand-primary mr-2"></i>123 Mediterranean Way, Bayview, CA 94010</p>
482
+ <p><i class="fas fa-phone-alt text-brand-primary mr-2"></i>(123) 456-7890</p>
483
+ <p><i class="fas fa-envelope text-brand-primary mr-2"></i><a href="mailto:info@tavernainbayview.com" class="hover:underline">info@tavernainbayview.com</a></p>
484
+ </address>
485
+
486
+ <div class="relative h-96 rounded-lg overflow-hidden shadow-lg">
487
+ <iframe
488
+ src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.158217398083!2d-122.4194159242696!3d37.77492997185836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan%20Francisco%2C%20CA!5e0!3m2!1sen!2sus!4v1710000000000!5m2!1sen!2sus"
489
+ width="100%"
490
+ height="100%"
491
+ style="border:0;"
492
+ allowfullscreen=""
493
+ loading="lazy"
494
+ referrerpolicy="no-referrer-when-downgrade">
495
+ </iframe>
496
+ </div>
497
+
498
+ <h3 class="text-2xl font-bold font-display">Hours</h3>
499
+ <ul class="space-y-2 text-gray-600 dark:text-gray-300">
500
+ <li class="flex justify-between"><span>Mon – Thu</span><span>11 AM – 10 PM</span></li>
501
+ <li class="flex justify-between"><span>Fri & Sat</span><span>11 AM – 11 PM</span></li>
502
+ <li class="flex justify-between"><span>Sunday</span><span>10 AM – 9 PM</span></li>
503
+ </ul>
504
+ </div>
505
+ <div class="md:w-1/2">
506
+ <h3 class="text-2xl font-bold mb-6 font-display">Make a Reservation</h3>
507
+ <form class="grid grid-cols-1 gap-4" netlify>
508
+ <div class="form-group">
509
+ <input type="text" name="name" required class="form-input" placeholder=" " />
510
+ <label class="floating-label">Full Name</label>
511
+ </div>
512
+ <div class="form-group">
513
+ <input type="email" name="email" required class="form-input" placeholder=" " />
514
+ <label class="floating-label">Email</label>
515
+ </div>
516
+ <div class="form-group">
517
+ <input type="tel" name="phone" required class="form-input" placeholder=" " />
518
+ <label class="floating-label">Phone</label>
519
+ </div>
520
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
521
+ <div class="form-group">
522
+ <input type="date" name="date" class="form-input" required />
523
+ <label class="floating-label">Date</label>
524
+ </div>
525
+ <div class="form-group">
526
+ <input type="time" name="time" class="form-input" required />
527
+ <label class="floating-label">Time</label>
528
+ </div>
529
+ </div>
530
+ <div class="form-group">
531
+ <select name="guests" class="form-input">
532
+ <option value="" selected disabled hidden></option>
533
+ <option value="1">1 person</option>
534
+ <option value="2">2 people</option>
535
+ <option value="3">3 people</option>
536
+ <option value="4">4 people</option>
537
+ <option value="5">5 people</option>
538
+ <option value="6">6 + people</option>
539
+ </select>
540
+ <label class="floating-label">Guests</label>
541
+ </div>
542
+ <div class="form-group">
543
+ <textarea name="message" class="form-input" rows="3" placeholder=" "></textarea>
544
+ <label class="floating-label">Special Requests</label>
545
+ </div>
546
+ <button type="submit" class="bg-brand-primary hover:bg-brand-dark text-white font-bold py-3 rounded-lg transition transform hover:scale-105">
547
+ Reserve Now
548
+ </button>
549
+ </form>
550
+
551
+ <div class="mt-12">
552
+ <h3 class="text-2xl font-bold mb-6 font-display">Subscribe to Our Newsletter</h3>
553
+ <form class="flex">
554
+ <input type="email" placeholder="Your email" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-brand-primary dark:bg-gray-800">
555
+ <button type="submit" class="bg-brand-primary hover:bg-brand-dark text-white font-bold px-6 rounded-r-lg transition">
556
+ Subscribe
557
+ </button>
558
+ </form>
559
+ </div>
560
+ </div>
561
+ </div>
562
+ </section>
563
+
564
+ <!-- ================================================= FOOTER -->
565
+ <footer class="bg-gray-800 dark:bg-gray-950 text-white py-12" data-aos="fade">
566
+ <div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
567
+ <div>
568
+ <div class="flex items-center mb-4"><i class="fas fa-utensils text-3xl text-brand-primary mr-3"></i><h3 class="text-xl font-bold">Taverna in Bayview</h3></div>
569
+ <p class="text-gray-400">Bringing authentic Mediterranean flavors to Bayview since 2005.</p>
570
+ <div class="flex gap-4 mt-4">
571
+ <a href="#" aria-label="Facebook" class="social-icon"><i class="fab fa-facebook-f"></i></a>
572
+ <a href="#" aria-label="Instagram" class="social-icon"><i class="fab fa-instagram"></i></a>
573
+ <a href="#" aria-label="Twitter" class="social-icon"><i class="fab fa-twitter"></i></a>
574
+ </div>
575
+ </div>
576
+ <div>
577
+ <h4 class="font-bold mb-4">Quick Links</h4>
578
+ <nav class="space-y-2">
579
+ <a href="#home" class="footer-link">Home</a>
580
+ <a href="#menu" class="footer-link">Menu</a>
581
+ <a href="#about" class="footer-link">About Us</a>
582
+ <a href="#gallery" class="footer-link">Gallery</a>
583
+ <a href="#contact" class="footer-link">Contact</a>
584
+ </nav>
585
+ </div>
586
+ <div>
587
+ <h4 class="font-bold mb-4">Contact</h4>
588
+ <p class="text-gray-400">123 Mediterranean Way<br/>Bayview, CA 94010</p>
589
+ <p class="text-gray-400">(123) 456-7890</p>
590
+ <p><a href="mailto:info@tavernainbayview.com" class="text-gray-400 hover:text-brand-primary">info@tavernainbayview.com</a></p>
591
+ </div>
592
+ <div>
593
+ <h4 class="font-bold mb-4">Newsletter</h4>
594
+ <p class="text-gray-400 mb-4">Subscribe to receive updates on special events and promotions.</p>
595
+ <form class="flex">
596
+ <input type="email" placeholder="Your email" class="flex-grow px-4 py-2 rounded-l-lg bg-gray-700 text-white focus:outline-none">
597
+ <button type="submit" class="bg-brand-primary hover:bg-brand-dark px-4 rounded-r-lg">
598
+ <i class="fas fa-paper-plane"></i>
599
+ </button>
600
+ </form>
601
+ </div>
602
+ </div>
603
+ <div class="max-w-7xl mx-auto px-6 pt-8 mt-8 border-t border-gray-700 text-center text-gray-400 text-sm">
604
+ <p>&copy; 2023 Taverna in Bayview. All rights reserved.</p>
605
+ </div>
606
+ </footer>
607
+
608
+ <!-- Scroll to Top Button -->
609
+ <button id="scrollTop" class="scroll-top">
610
+ <i class="fas fa-arrow-up"></i>
611
+ </button>
612
+
613
+ <!-- Scripts -->
614
+ <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
615
+ <script>
616
+ // Initialize AOS animation
617
+ AOS.init({
618
+ duration: 800,
619
+ easing: 'ease-in-out',
620
+ once: true
621
+ });
622
+
623
+ // Mobile menu toggle
624
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
625
+ const mobileMenu = document.getElementById('mobile-menu');
626
+
627
+ mobileMenuButton.addEventListener('click', () => {
628
+ mobileMenu.classList.toggle('hidden');
629
+ });
630
+
631
+ // Dark mode toggle
632
+ const themeToggle = document.getElementById('themeToggle');
633
+ const html = document.documentElement;
634
+
635
+ // Check for saved user preference or system preference
636
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
637
+ html.classList.add('dark');
638
+ themeToggle.innerHTML = '<i class="far fa-sun"></i>';
639
+ } else {
640
+ html.classList.remove('dark');
641
+ themeToggle.innerHTML = '<i class="far fa-moon"></i>';
642
+ }
643
+
644
+ themeToggle.addEventListener('click', () => {
645
+ html.classList.toggle('dark');
646
+ if (html.classList.contains('dark')) {
647
+ localStorage.setItem('theme', 'dark');
648
+ themeToggle.innerHTML = '<i class="far fa-sun"></i>';
649
+ } else {
650
+ localStorage.setItem('theme', 'light');
651
+ themeToggle.innerHTML = '<i class="far fa-moon"></i>';
652
+ }
653
+ });
654
+
655
+ // Scroll to top button
656
+ const scrollTopButton = document.getElementById('scrollTop');
657
+
658
+ window.addEventListener('scroll', () => {
659
+ if (window.pageYOffset > 300) {
660
+ scrollTopButton.classList.add('active');
661
+ } else {
662
+ scrollTopButton.classList.remove('active');
663
+ }
664
+ });
665
+
666
+ scrollTopButton.addEventListener('click', () => {
667
+ window.scrollTo({
668
+ top: 0,
669
+ behavior: 'smooth'
670
+ });
671
+ });
672
+
673
+ // Form floating labels
674
+ document.querySelectorAll('.form-input').forEach(input => {
675
+ if (input.value) {
676
+ input.nextElementSibling.classList.add('-top-2', 'text-xs', 'text-brand-primary');
677
+ }
678
+
679
+ input.addEventListener('focus', () => {
680
+ input.nextElementSibling.classList.add('-top-2', 'text-xs', 'text-brand-primary');
681
+ });
682
+
683
+ input.addEventListener('blur', () => {
684
+ if (!input.value) {
685
+ input.nextElementSibling.classList.remove('-top-2', 'text-xs', 'text-brand-primary');
686
+ }
687
+ });
688
+ });
689
+ </script>
690
+ <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=spwotton/taverna2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
691
+ </html>
prompts.txt ADDED
File without changes