-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmuchacho-catering.html
465 lines (418 loc) · 20.3 KB
/
muchacho-catering.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electric Events ⚡︎ Catering Quote Builder</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="scripts.js" defer></script>
<!-- Add Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="EE-logo-mark.png">
<meta property="og:title" content="Electric Events ⚡︎ Catering Quote Builder">
<meta property="og:description" content="Build your custom catering quote for your next event with Electric Events.">
<meta property="og:image" content="Ladybird-catering-og.jpg">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Electric Events ⚡︎ Catering Quote Builder">
<meta name="twitter:description" content="Build your custom catering quote for your next event with Electric Events.">
<meta name="twitter:image" content="Ladybird-catering-og.jpg">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: 'rgb(255, 199, 0)', // Yellow
secondary: '#2d3748',
background: 'rgb(249, 234, 209',
surface: 'rgb(240, 76, 37)', // Slightly lighter black for cards
},
fontFamily: {
'heading': ['"Bebas Neue"', 'cursive'],
'sans': ['"DM Sans"', 'sans-serif'],
}
}
}
}
</script>
<style>
/* Keep only essential custom styles that aren't easily achieved with Tailwind */
.quantity-input {
width: 60px;
padding: 0.25rem;
border: none;
border-radius: 0.25rem;
background-color: #fff;
color: #000;
}
.main-wrapper,.your-event {
position: relative;
}
body {
background-color:#000;
}
.your-event:before {
position: absolute;
content: "";
top: 3%;
height: 140px;
width: 140px;
transform: rotate(18deg);
right: 3%;
background:url(muchacho-badge.png) no-repeat center center;
background-size: cover;
opacity: 1;
}
nav {
position: relative;
z-index: 333333;
}
.main-wrapper:before {
position: absolute;
content: "";
top: -64px;
height: 600px;
width: 100%;
left: 0;
background:url(muchacho-cover.jpg ) no-repeat center center;
background-size: cover;
z-index: -1;
opacity: 0.8;
background-attachment: fixed;
}
@media (max-width: 768px) {
.main-wrapper:before {
height: 440px;
background-attachment: scroll;
top: -104px;
}
}
.quantity-input:focus {
border-color: rgb(255, 199, 0);
outline: none;
ring-color: rgb(255, 199, 0);
}
/* Update button styles */
button,
input[type="submit"],
.btn {
background-color: rgb(255, 199, 0);
color: black;
font-weight: 500;
}
button:hover,
input[type="submit"]:hover,
.btn:hover {
background-color: rgb(230, 180, 0);
}
@media (max-width: 768px) {
.item-description {
display: none;
}
/* Add this to hide table headers on mobile */
thead {
display: none;
}
}
/* Add styles for headings and labels */
h1, h2, label, th {
font-family: 'Bebas Neue', cursive;
letter-spacing: 0.05em;
}
/* Add styles for the sticky bar animation */
.sticky-bar {
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
}
.sticky-bar.visible {
transform: translateY(0);
}
@keyframes wobble {
0% { transform: rotate(0deg); }
25% { transform: rotate(-10deg); }
50% { transform: rotate(10deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.wobble-animation {
animation: wobble 1s ease-in-out;
animation-iteration-count: 1;
}
/* Add hover animation */
#wobbleLogo:hover {
animation: wobble 1s ease-in-out;
cursor: pointer;
}
/* Add this class when you want to trigger the animation */
.wobble-active {
animation: wobble 1s ease-in-out;
}
/* Add base font for body */
body {
font-family: 'DM Sans', sans-serif;
}
/* Remove top margin from all inputs */
input, textarea {
margin-top: 0 !important;
}
/* Adjust the spacing in the input containers */
.space-y-3 > * + * {
margin-top: 0;
}
/* Update all table tbody elements */
.divide-y.divide-none {
border-top-width: 0;
border-bottom-width: 0;
}
/* Remove divider lines between rows */
.divide-y > :not([hidden]) ~ :not([hidden]) {
border: none !important;
}
</style>
</head>
<body class="bg-background text-white min-h-screen pb-20 muchacho-menu">
<!-- Update the navigation -->
<nav>
<div class="max-w-6xl mx-auto px-4 sm:px-6">
<div class="flex flex-col md:flex-row items-center justify-between py-4 md:h-16 gap-4 md:gap-0">
<!-- Logo -->
<div class="flex-shrink-0">
<a href="https://www.electriceventsatl.com/" target="_blank" rel="noopener noreferrer">
<img src="EE-wordmark.png" alt="Electric Events Logo" class="h-4">
</a>
</div>
<!-- Navigation Links -->
<div class="flex space-x-8">
<a href="index.html" class="text-white hover:text-primary font-heading text-xl">Ladybird</a>
<a href="muchacho-catering.html" class="text-white hover:text-primary font-heading text-xl">Muchacho</a>
<a href="#" class="text-white hover:text-primary font-heading text-xl" style="display: none;">Beverage</a>
</div>
</div>
</div>
</nav>
<div class="main-wrapper" style="position: relative;background-color: #000000;z-index: 100;margin-bottom: 600px;" class="pt-8">
<!-- Add centered header section -->
<div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
<div class="flex flex-col items-center mb-7">
<img src="muchacho-logo.png"
alt="Muchacho Logo"
class="w-[300px] md:w-[400px] mb-6 mt-10">
<h1 class="text-3xl font-heading text-primary">Catering Quote Builder</h1>
</div>
</div>
<!-- Main content container -->
<div class="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8">
<!-- Contact & Delivery Section -->
<div class="bg-surface your-event rounded-lg shadow-sm p-8 mb-8">
<h2 class="text-4xl font-heading text-primary mb-8">Your Event</h2>
<div class="grid grid-cols-1 gap-8">
<!-- Contact Info Row -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="space-y-3">
<label for="contactName" class="block text-lg font-heading mb-2">Contact Name</label>
<input type="text"
id="contactName"
required
class="w-full rounded-md border-gray-700 bg-background text-black shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
<div class="space-y-3">
<label for="contactEmail" class="block text-lg font-heading mb-2">Email Address</label>
<input type="email"
id="contactEmail"
required
pattern="[^@\s]+@[^@\s]+\.[^@\s]+"
title="Please enter a valid email address"
class="w-full rounded-md border-gray-700 bg-backgroun shadow-sm text-black focus:border-primary focus:ring-primary p-3">
</div>
<div class="space-y-3">
<label for="contactPhone" class="block text-lg font-heading mb-2">Phone Number</label>
<input type="tel"
id="contactPhone"
required
pattern="[0-9\s\-\(\)]+"
title="Please enter a valid phone number"
class="w-full rounded-md border-gray-700 bg-background shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
</div>
<!-- Delivery Info Row -->
<div class="space-y-3">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-3">
<div class="md:col-span-3">
<label for="locationStreet" class="block text-lg font-heading text-white mb-2">Delivery Address</label>
<input type="text"
id="locationStreet"
required
placeholder="Street Address"
class="w-full rounded-md border-gray-700 bg-background text-black shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<input type="text"
id="locationCity"
required
placeholder="City"
class="w-full rounded-md border-gray-700 bg-background text-black shadow-sm focus:border-primary focus:ring-primary p-3">
<input type="text"
id="locationZip"
required
pattern="\d{5}(-\d{4})?"
title="Please enter a valid ZIP code (e.g., 12345 or 12345-6789)"
placeholder="ZIP Code"
class="w-full rounded-md border-gray-700 bg-background text-black shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
</div>
<!-- Update the Party Size and Dropoff Time Row -->
<div class="flex flex-col md:flex-row gap-8">
<!-- Date and Time -->
<div class="flex gap-4 w-fit">
<div class="w-[150px]">
<label for="dropoffDate" class="block text-lg font-heading text-white mb-2">Event Date</label>
<input type="date"
id="dropoffDate"
required
class="w-full rounded-md border-gray-700 bg-background text-black shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
<div class="w-[150px]">
<label for="dropoffTime" class="block text-lg font-heading text-white mb-2">Dropoff Time</label>
<input type="time"
id="dropoffTime"
min="05:00"
max="24:00"
required
value="15:00"
class="w-full rounded-md border-gray-700 bg-background text-black shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
</div>
<!-- Party Size -->
<div class="space-y-3">
<label class="block text-lg font-heading text-white mb-2">Party Size</label>
<div class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-8">
<div class="flex items-center space-x-4">
<input type="radio" id="exactSize" name="partySizeType" value="exact" checked
class="w-5 h-5">
<label for="exactSize" class="text-lg font-heading text-white">Exact</label>
<input type="number" id="exactPartySize" min="1"
class="w-24 text-black rounded-md border-gray-700 text-black bg-backgroundtext-black shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
<div class="flex items-center space-x-4">
<input type="radio" id="rangeSize" name="partySizeType" value="range"
class="w-5 h-5 text-black">
<label for="rangeSize" class="text-lg font-heading">Range</label>
<input type="number" id="partySizeMin" min="1" placeholder="Min" disabled
class="w-24 rounded-md border-gray-700 bg-background text-black shadow-sm focus:border-primary focus:ring-primary p-3">
<span class="text-white">-</span>
<input type="number" id="partySizeMax" min="1" placeholder="Max" disabled
class="w-24 rounded-md border-gray-700 bg-backgroundtext-black shadow-sm focus:border-primary focus:ring-primary p-3">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Sections -->
<div class="space-y-8">
<!-- Mains Section -->
<div class="bg-surface rounded-lg shadow-sm p-4 md:p-8 mb-8">
<h2 class="text-4xl md:text-7xl font-heading text-primary mb-8">Package Options</h2>
<div id="mainsMenu" class="space-y-6">
<!-- Menu items will be inserted here -->
</div>
</div>
<!-- Sides Section -->
<div class="bg-surface rounded-lg shadow-sm p-4 md:p-8 mb-8">
<h2 class="text-4xl md:text-7xl font-heading text-primary mb-8">A la Carte & Sides</h2>
<div id="sidesMenu" class="space-y-6">
<!-- Menu items will be inserted here -->
</div>
</div>
<!-- Comments Section -->
<div class="bg-surface rounded-lg shadow-sm p-8">
<h2 class="text-4xl font-heading text-primary mb-2">Additional Comments</h2>
<div class="space-y-3">
<label for="comments" class="block text-md text-white mb-3">Need something else? Let us know:</label>
<textarea id="comments"
rows="4"
class="w-full rounded-md border-gray-700 bg-background text-white shadow-sm focus:border-primary focus:ring-primary p-3" placeholder="We are happy to hear what you need even if it's not on our menu."></textarea>
</div>
</div>
</div>
<!-- Sticky total section -->
<div class="fixed bottom-0 left-0 right-0 bg-surface border-t border-gray-800 shadow-lg">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<form id="orderForm" class="contents">
<!-- Add hidden fields for Web3Forms -->
<input type="hidden" name="access_key" value="f890e702-fef2-4b76-84bf-0e5bf3262032">
<input type="hidden" name="from_name" id="from_name">
<input type="hidden" name="subject" id="email_subject">
<input type="checkbox" class="hidden" style="display:none" name="botcheck">
<div class="py-4 flex justify-between items-center">
<span class="text-3xl font-heading text-white">Total:</span>
<div class="flex items-center gap-6">
<span id="totalPrice" class="text-3xl font-heading text-primary">$0.00</span>
<button type="submit"
id="submitButton"
disabled
class="bg-primary text-black px-8 py-3 rounded-lg font-heading text-xl hover:bg-opacity-90 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed min-w-[100px] justify-center">
<span>Submit Quote</span>
<svg id="submitSpinner" class="hidden animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</button>
</div>
</div>
</form>
</div>
</div>
<!-- Add padding to the bottom of the body to prevent content from being hidden behind sticky total -->
</div>
<footer class="py-20 text-center">
<div class="flex flex-col items-center max-w-4xl mx-auto px-4">
<img src="EE-logo-mark.png"
alt="Electric Events Logo"
class="w-[200px] mb-8"
id="wobbleLogo">
<h1 class="text-4xl font-heading text-primary mb-6">
Atlanta's Full-Service Events & Catering Group
</h1>
<p class="text-white">
Talk to a human at
<a href="mailto:hello@electriceventsatl.com"
class="text-primary hover:underline">hello@electriceventsatl.com</a>
or call us at
<a href="tel:4159932431"
class="text-primary hover:underline">415-993-2431</a>
</p>
</div>
</footer>
</div>
<!-- Update the footer image div -->
<div class="w-full mt-10" style="position: fixed;height:600px;bottom:0;left:0;right:0">
<img src="muchacho-footer.png"
alt="Muchacho Footer"
style="position:absolute;bottom:0;left:0;right:0;width:100%;height:100%;object-fit:cover">
</div>
<script>
const logo = document.getElementById('wobbleLogo');
let isAnimating = false;
function wobbleLogo() {
if (!isAnimating) {
isAnimating = true;
logo.classList.add('wobble-animation');
setTimeout(() => {
logo.classList.remove('wobble-animation');
isAnimating = false;
}, 1000);
}
}
// Initial wobble
wobbleLogo();
// Wobble every minute
setInterval(wobbleLogo, 60000);
</script>
</body>
</html>