Hugging Face's logo

Spaces:
Ofirlap12
/
harvesttable
Running

App Files Community
Ofirlap12 commited on
Commit
50db872
·
verified ·
1 Parent(s): 6e999fb

Build a specialty food e-commerce site called "HarvestTable."

Browse files

Purpose: sell artisan foods, gift boxes, and gourmet ingredients.

Core Features:

- Hero with seasonal collection spotlight

- Product grid with dietary and origin filters

- Product detail with sourcing story and pairing suggestions

- Gift box builder with customization

- Footer with recipes and producer stories

Visual Vibes:

Soft gradients, elegant typography. Colors: olive green, warm beige, burgundy.

Files changed (3) hide show
  1. README.md +8 -5
  2. index.html +300 -19
  3. style.css +59 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Harvesttable
3
- emoji: 🦀
4
- colorFrom: pink
5
- colorTo: pink
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: HarvestTable
3
+ colorFrom: yellow
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,300 @@
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="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HarvestTable | Artisan Foods & Gift Boxes</title>
7
+ <meta name="description" content="Discover artisan foods, gourmet ingredients, and handcrafted gift boxes.">
8
+
9
+ <!-- Tailwind CSS -->
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+
12
+ <!-- Feather Icons -->
13
+ <script src="https://unpkg.com/feather-icons"></script>
14
+
15
+ <!-- Google Fonts: Playfair Display for headings, Lato for body -->
16
+ <link rel="preconnect" href="https://fonts.googleapis.com">
17
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
18
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet">
19
+
20
+ <!-- Tailwind Config for Custom Colors -->
21
+ <script>
22
+ tailwind.config = {
23
+ darkMode: 'class',
24
+ theme: {
25
+ extend: {
26
+ colors: {
27
+ olive: {
28
+ 100: '#e8ebdf',
29
+ 500: '#556b2f', // Olive Green
30
+ 700: '#3e4f22',
31
+ 900: '#2a3316',
32
+ },
33
+ beige: {
34
+ 100: '#fbf6e9', // Warm Beige
35
+ 200: '#f5f5dc',
36
+ 500: '#d2b48c',
37
+ },
38
+ burgundy: {
39
+ 500: '#800020', // Burgundy
40
+ 600: '#660019',
41
+ 900: '#33000d',
42
+ }
43
+ },
44
+ fontFamily: {
45
+ serif: ['"Playfair Display"', 'serif'],
46
+ sans: ['"Lato"', 'sans-serif'],
47
+ }
48
+ }
49
+ }
50
+ }
51
+ </script>
52
+
53
+ <link rel="stylesheet" href="style.css">
54
+ </head>
55
+ <body class="bg-stone-950 text-stone-200 font-sans antialiased selection:bg-burgundy-500 selection:text-white transition-colors duration-300">
56
+
57
+ <!-- Navigation -->
58
+ <nav class="fixed w-full z-50 top-0 bg-stone-950/90 backdrop-blur-md border-b border-stone-800">
59
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
60
+ <div class="flex justify-between items-center h-20">
61
+ <!-- Logo -->
62
+ <div class="flex-shrink-0 flex items-center cursor-pointer" onclick="window.scrollTo(0,0)">
63
+ <span class="font-serif text-2xl font-bold tracking-wider text-beige-200 italic">Harvest<span class="text-olive-500 not-italic">Table</span></span>
64
+ </div>
65
+
66
+ <!-- Desktop Menu -->
67
+ <div class="hidden md:flex space-x-8 items-center">
68
+ <a href="#shop" class="text-stone-300 hover:text-olive-500 transition-colors text-sm uppercase tracking-widest">Shop Artisan</a>
69
+ <a href="#builder" class="text-stone-300 hover:text-olive-500 transition-colors text-sm uppercase tracking-widest">Gift Boxes</a>
70
+ <a href="#stories" class="text-stone-300 hover:text-olive-500 transition-colors text-sm uppercase tracking-widest">Stories</a>
71
+ </div>
72
+
73
+ <!-- Icons -->
74
+ <div class="flex items-center space-x-6">
75
+ <button class="text-stone-300 hover:text-beige-200 transition-colors relative" onclick="toggleCart()">
76
+ <i data-feather="shopping-bag"></i>
77
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-burgundy-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center hidden">0</span>
78
+ </button>
79
+ <button class="md:hidden text-stone-300 hover:text-white">
80
+ <i data-feather="menu"></i>
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </nav>
86
+
87
+ <!-- Hero Section -->
88
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
89
+ <!-- Background Gradient/Image -->
90
+ <div class="absolute inset-0 bg-gradient-to-br from-stone-950 via-stone-900 to-olive-900/20 z-0"></div>
91
+ <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1542838132-92c53300491e?q=80&w=2574&auto=format&fit=crop')] bg-cover bg-center opacity-20 mix-blend-overlay z-0"></div>
92
+
93
+ <div class="relative z-10 text-center px-4 max-w-4xl mx-auto mt-16">
94
+ <span class="text-olive-500 uppercase tracking-[0.3em] text-sm font-bold mb-4 block animate-fade-in-up">From the Valley to Your Table</span>
95
+ <h1 class="font-serif text-5xl md:text-7xl font-bold text-beige-100 mb-6 leading-tight">
96
+ Curated Artisan <br> <span class="text-transparent bg-clip-text bg-gradient-to-r from-olive-400 to-burgundy-500">Gourmet Experiences</span>
97
+ </h1>
98
+ <p class="text-stone-400 text-lg md:text-xl mb-10 max-w-2xl mx-auto font-light">
99
+ Small-batch olive oils, aged balsamic vinegars, and hand-packed gift boxes featuring stories from the world's finest producers.
100
+ </p>
101
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
102
+ <a href="#builder" class="bg-olive-600 hover:bg-olive-500 text-white px-8 py-3 rounded-sm uppercase tracking-widest text-sm transition-all duration-300 shadow-lg shadow-olive-900/50">
103
+ Build a Gift Box
104
+ </a>
105
+ <a href="#shop" class="border border-beige-500 text-beige-200 hover:bg-beige-500 hover:text-stone-950 px-8 py-3 rounded-sm uppercase tracking-widest text-sm transition-all duration-300">
106
+ Shop Collection
107
+ </a>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Product Shop Section -->
113
+ <section id="shop" class="py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
114
+ <div class="flex flex-col md:flex-row justify-between items-end mb-12">
115
+ <div class="max-w-2xl">
116
+ <h2 class="font-serif text-4xl text-beige-100 mb-2">Seasonal Collection</h2>
117
+ <p class="text-stone-500">Handpicked selections for the discerning palate.</p>
118
+ </div>
119
+
120
+ <!-- Filters -->
121
+ <div class="flex flex-wrap gap-3 mt-6 md:mt-0" id="filters">
122
+ <button class="filter-btn active bg-olive-700 text-white px-4 py-2 text-xs uppercase tracking-wider rounded-sm" data-filter="all">All</button>
123
+ <button class="filter-btn bg-stone-800 text-stone-400 hover:bg-stone-700 px-4 py-2 text-xs uppercase tracking-wider rounded-sm transition-colors" data-filter="oil">Oils</button>
124
+ <button class="filter-btn bg-stone-800 text-stone-400 hover:bg-stone-700 px-4 py-2 text-xs uppercase tracking-wider rounded-sm transition-colors" data-filter="vinegar">Vinegars</button>
125
+ <button class="filter-btn bg-stone-800 text-stone-400 hover:bg-stone-700 px-4 py-2 text-xs uppercase tracking-wider rounded-sm transition-colors" data-filter="pasta">Pasta</button>
126
+ <button class="filter-btn bg-stone-800 text-stone-400 hover:bg-stone-700 px-4 py-2 text-xs uppercase tracking-wider rounded-sm transition-colors" data-filter="sweets">Sweets</button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Product Grid -->
131
+ <div id="product-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
132
+ <!-- Products injected via JS -->
133
+ </div>
134
+ </section>
135
+
136
+ <!-- Gift Box Builder -->
137
+ <section id="builder" class="py-24 bg-stone-900 relative overflow-hidden">
138
+ <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-burgundy-900/10 to-transparent pointer-events-none"></div>
139
+
140
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
141
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
142
+ <div>
143
+ <span class="text-burgundy-500 uppercase tracking-widest text-xs font-bold mb-2 block">Custom Creations</span>
144
+ <h2 class="font-serif text-4xl md:text-5xl text-beige-100 mb-6">The Harvest Box</h2>
145
+ <p class="text-stone-400 text-lg mb-8 font-light">
146
+ Create a personalized gift of culinary delights. Select 3 artisan items to fill our signature wooden crate.
147
+ </p>
148
+
149
+ <div class="bg-stone-950 p-6 border border-stone-800 rounded-sm mb-8">
150
+ <h3 class="font-serif text-xl text-beige-200 mb-4">Your Selection</h3>
151
+ <div id="box-contents" class="space-y-3 mb-6 min-h-[60px]">
152
+ <p class="text-stone-600 italic text-sm text-center py-4">Select items below to build your box...</p>
153
+ </div>
154
+ <div class="flex justify-between items-center border-t border-stone-800 pt-4">
155
+ <span class="text-stone-400 text-sm">Box Base: <span class="text-beige-200">Included</span></span>
156
+ <span class="text-2xl font-serif text-olive-400" id="box-total">$0.00</span>
157
+ </div>
158
+ </div>
159
+
160
+ <button onclick="addBoxToCart()" class="w-full bg-gradient-to-r from-burgundy-600 to-burgundy-500 hover:from-burgundy-500 hover:to-burgundy-400 text-white py-4 uppercase tracking-widest text-sm font-bold transition-all shadow-lg">
161
+ Add to Cart
162
+ </button>
163
+ </div>
164
+
165
+ <!-- Builder Items (Simplified selection for demo) -->
166
+ <div class="grid grid-cols-2 gap-4">
167
+ <div class="space-y-4">
168
+ <h4 class="text-stone-500 uppercase text-xs font-bold tracking-widest mb-2">Essentials</h4>
169
+ <!-- Builder Items List (Scrollable area) -->
170
+ <div id="builder-list" class="space-y-4 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
171
+ <!-- Items injected JS -->
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- Sourcing / Detail Modal (Hidden by default) -->
180
+ <div id="product-modal" class="fixed inset-0 z-[60] hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
181
+ <!-- Overlay -->
182
+ <div class="fixed inset-0 bg-stone-950/90 backdrop-blur-sm transition-opacity" onclick="closeModal()"></div>
183
+
184
+ <div class="fixed inset-0 z-10 overflow-y-auto">
185
+ <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
186
+ <div class="relative transform overflow-hidden rounded-sm bg-stone-900 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl border border-stone-800">
187
+
188
+ <!-- Modal Content -->
189
+ <div class="grid grid-cols-1 md:grid-cols-2">
190
+ <div class="h-64 md:h-auto bg-stone-800 relative">
191
+ <img id="modal-image" src="" alt="" class="absolute inset-0 w-full h-full object-cover">
192
+ </div>
193
+ <div class="p-8 md:p-12">
194
+ <button onclick="closeModal()" class="absolute top-4 right-4 text-stone-400 hover:text-white">
195
+ <i data-feather="x"></i>
196
+ </button>
197
+
198
+ <div class="flex items-center space-x-2 text-xs uppercase tracking-widest text-olive-500 mb-2">
199
+ <span id="modal-origin">Italy</span>
200
+ <span class="text-stone-600">|</span>
201
+ <span id="modal-type">Olive Oil</span>
202
+ </div>
203
+
204
+ <h3 id="modal-title" class="font-serif text-3xl text-beige-100 mb-2">Product Name</h3>
205
+ <p id="modal-price" class="text-xl text-stone-400 mb-6 font-light">$0.00</p>
206
+
207
+ <p id="modal-desc" class="text-stone-400 mb-6 leading-relaxed">
208
+ Product description goes here.
209
+ </p>
210
+
211
+ <!-- Pairing Suggestions -->
212
+ <div class="bg-stone-950 p-6 border-l-2 border-olive-600 mb-8">
213
+ <h4 class="font-serif text-lg text-beige-200 mb-2">Sourcing Story</h4>
214
+ <p id="modal-story" class="text-sm text-stone-500 italic">
215
+ Details about the producer.
216
+ </p>
217
+ </div>
218
+
219
+ <div class="flex gap-4">
220
+ <button onclick="addToCartFromModal()" class="flex-1 bg-olive-600 hover:bg-olive-500 text-white py-3 uppercase tracking-widest text-xs font-bold">
221
+ Add to Cart
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Pairing Section (Bottom of modal) -->
228
+ <div class="bg-stone-950/50 p-8 border-t border-stone-800">
229
+ <h4 class="text-beige-200 font-serif mb-4 flex items-center gap-2">
230
+ <i data-feather="link" class="w-4 h-4 text-burgundy-500"></i> Perfect Pairings
231
+ </h4>
232
+ <div id="modal-pairings" class="grid grid-cols-3 gap-4">
233
+ <!-- Pairings injected here -->
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Footer -->
242
+ <footer id="stories" class="bg-stone-950 border-t border-stone-900 pt-20 pb-10">
243
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
244
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
245
+ <!-- Brand -->
246
+ <div class="col-span-1 md:col-span-1">
247
+ <span class="font-serif text-2xl font-bold tracking-wider text-beige-200 italic block mb-6">Harvest<span class="text-olive-500 not-italic">Table</span></span>
248
+ <p class="text-stone-500 text-sm leading-relaxed">
249
+ Celebrating the art of artisanal eating. We partner directly with small-batch producers to bring you the world's finest flavors.
250
+ </p>
251
+ </div>
252
+
253
+ <!-- Recipes -->
254
+ <div class="col-span-1">
255
+ <h4 class="text-beige-200 font-serif text-lg mb-4">From the Kitchen</h4>
256
+ <ul class="space-y-3 text-sm text-stone-500">
257
+ <li><a href="#" class="hover:text-olive-400 transition-colors">Truffle Risotto with Aged Parmesan</a></li>
258
+ <li><a href="#" class="hover:text-olive-400 transition-colors">Balsamic Glazed Brussel Sprouts</a></li>
259
+ <li><a href="#" class="hover:text-olive-400 transition-colors">Fig & Prosciutto Flatbreads</a></li>
260
+ <li><a href="#" class="hover:text-olive-400 transition-colors">Dark Chocolate & Olive Oil Cake</a></li>
261
+ </ul>
262
+ </div>
263
+
264
+ <!-- Producers -->
265
+ <div class="col-span-1">
266
+ <h4 class="text-beige-200 font-serif text-lg mb-4">Producer Stories</h4>
267
+ <ul class="space-y-3 text-sm text-stone-500">
268
+ <li><a href="#" class="hover:text-olive-400 transition-colors">The 300-Year-Old Olive Grove</a></li>
269
+ <li><a href="#" class="hover:text-olive-400 transition-colors">Sustainable Honey in the Alps</a></li>
270
+ <li><a href="#" class="hover:text-olive-400 transition-colors">Artisan Pasta in Gragnano</a></li>
271
+ </ul>
272
+ </div>
273
+
274
+ <!-- Newsletter -->
275
+ <div class="col-span-1">
276
+ <h4 class="text-beige-200 font-serif text-lg mb-4">Join the Table</h4>
277
+ <p class="text-stone-500 text-sm mb-4">Exclusive recipes and early access to seasonal drops.</p>
278
+ <form class="flex gap-2">
279
+ <input type="email" placeholder="Email Address" class="bg-stone-900 border border-stone-800 text-stone-300 px-4 py-2 w-full focus:outline-none focus:border-olive-500 text-sm">
280
+ <button class="bg-stone-800 hover:bg-stone-700 text-white px-4 py-2">
281
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
282
+ </button>
283
+ </form>
284
+ </div>
285
+ </div>
286
+
287
+ <div class="border-t border-stone-900 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-stone-600">
288
+ <p>&copy; 2023 HarvestTable. All rights reserved.</p>
289
+ <div class="flex space-x-6 mt-4 md:mt-0">
290
+ <a href="#" class="hover:text-stone-400">Privacy Policy</a>
291
+ <a href="#" class="hover:text-stone-400">Terms of Service</a>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </footer>
296
+
297
+ <script src="script.js"></script>
298
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
299
+ </body>
300
+ </html>
style.css CHANGED
@@ -1,28 +1,69 @@
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ /* Custom Fonts logic handled in HTML */
6
+
7
+ /* Soft Gradients */
8
  body {
9
+ background-color: #0c0a09; /* stone-950 */
10
+ }
11
+
12
+ /* Scrollbar Styling */
13
+ .custom-scrollbar::-webkit-scrollbar {
14
+ width: 6px;
15
+ }
16
+
17
+ .custom-scrollbar::-webkit-scrollbar-track {
18
+ background: #1c1917;
19
+ }
20
+
21
+ .custom-scrollbar::-webkit-scrollbar-thumb {
22
+ background: #44403c;
23
+ border-radius: 3px;
24
  }
25
 
26
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
27
+ background: #56534e;
 
28
  }
29
 
30
+ /* Animations */
31
+ @keyframes fadeInUp {
32
+ from {
33
+ opacity: 0;
34
+ transform: translateY(20px);
35
+ }
36
+ to {
37
+ opacity: 1;
38
+ transform: translateY(0);
39
+ }
40
  }
41
 
42
+ .animate-fade-in-up {
43
+ animation: fadeInUp 0.8s ease-out forwards;
 
 
 
 
44
  }
45
 
46
+ /* Product Card Hover Effects */
47
+ .product-card {
48
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
49
  }
50
+
51
+ .product-card:hover {
52
+ transform: translateY(-5px);
53
+ box-shadow: 0 10px 20px -10px rgba(85, 107, 47, 0.15); /* olive-500 with opacity */
54
+ }
55
+
56
+ /* Modal Transitions */
57
+ #product-modal {
58
+ transition: opacity 0.3s ease;
59
+ }
60
+
61
+ #product-modal.hidden {
62
+ opacity: 0;
63
+ pointer-events: none;
64
+ }
65
+
66
+ /* Button Utilities */
67
+ .btn-primary {
68
+ @apply bg-olive-600 hover:bg-olive-500 text-white transition-colors;
69
+ }