Hugging Face's logo

Spaces:
marrrrrr
/
website
Running

App Files Community
marrrrrr commited on
Commit
7d9a53d
·
verified ·
1 Parent(s): c78e584

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +759 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Website
3
- emoji: 🏢
4
- colorFrom: indigo
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: website
3
+ emoji: 🐳
4
+ colorFrom: green
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,759 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FreshEggs - Telur Segar Berkualitas</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
+ .hero-pattern {
11
+ background-image: url('https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .egg-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
19
+ }
20
+
21
+ .cart-item {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .cart-item:hover {
26
+ background-color: #f8fafc;
27
+ }
28
+
29
+ @keyframes bounce {
30
+ 0%, 100% { transform: translateY(0); }
31
+ 50% { transform: translateY(-10px); }
32
+ }
33
+
34
+ .bounce {
35
+ animation: bounce 2s infinite;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 font-sans">
40
+ <!-- Header/Navbar -->
41
+ <header class="bg-white shadow-sm sticky top-0 z-50">
42
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
43
+ <div class="flex items-center space-x-2">
44
+ <i class="fas fa-egg text-yellow-500 text-2xl"></i>
45
+ <h1 class="text-xl font-bold text-gray-800">Fresh<span class="text-yellow-500">Eggs</span></h1>
46
+ </div>
47
+
48
+ <nav class="hidden md:flex space-x-8">
49
+ <a href="#home" class="text-gray-800 hover:text-yellow-500 font-medium">Beranda</a>
50
+ <a href="#products" class="text-gray-800 hover:text-yellow-500 font-medium">Produk</a>
51
+ <a href="#about" class="text-gray-800 hover:text-yellow-500 font-medium">Tentang Kami</a>
52
+ <a href="#testimonials" class="text-gray-800 hover:text-yellow-500 font-medium">Testimoni</a>
53
+ <a href="#contact" class="text-gray-800 hover:text-yellow-500 font-medium">Kontak</a>
54
+ </nav>
55
+
56
+ <div class="flex items-center space-x-4">
57
+ <button id="cart-btn" class="relative">
58
+ <i class="fas fa-shopping-cart text-gray-700 text-xl"></i>
59
+ <span id="cart-count" class="absolute -top-2 -right-2 bg-yellow-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
60
+ </button>
61
+ <button class="md:hidden" id="mobile-menu-btn">
62
+ <i class="fas fa-bars text-gray-700 text-xl"></i>
63
+ </button>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Mobile Menu -->
68
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t">
69
+ <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
70
+ <a href="#home" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Beranda</a>
71
+ <a href="#products" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Produk</a>
72
+ <a href="#about" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Tentang Kami</a>
73
+ <a href="#testimonials" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Testimoni</a>
74
+ <a href="#contact" class="text-gray-800 hover:text-yellow-500 font-medium py-2">Kontak</a>
75
+ </div>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- Hero Section -->
80
+ <section id="home" class="hero-pattern bg-gray-900 bg-opacity-70 text-white py-20">
81
+ <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
82
+ <div class="md:w-1/2 mb-10 md:mb-0">
83
+ <h2 class="text-4xl md:text-5xl font-bold mb-4">Telur Segar <span class="text-yellow-400">Setiap Hari</span></h2>
84
+ <p class="text-lg mb-6">Dapatkan telur ayam berkualitas tinggi langsung dari peternak terpercaya. Segar, bergizi, dan harga terjangkau.</p>
85
+ <div class="flex space-x-4">
86
+ <a href="#products" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Beli Sekarang</a>
87
+ <a href="#about" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Tentang Kami</a>
88
+ </div>
89
+ </div>
90
+ <div class="md:w-1/2 flex justify-center">
91
+ <div class="relative">
92
+ <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Fresh Eggs" class="rounded-full h-64 w-64 object-cover border-4 border-yellow-400 shadow-xl bounce">
93
+ <div class="absolute -bottom-5 -right-5 bg-white text-gray-800 py-2 px-4 rounded-lg shadow-md">
94
+ <p class="font-bold">100% Alami</p>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Features Section -->
102
+ <section class="bg-white py-12">
103
+ <div class="container mx-auto px-4">
104
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
105
+ <div class="flex flex-col items-center text-center p-6 rounded-lg bg-gray-50 hover:bg-yellow-50 transition duration-300">
106
+ <div class="bg-yellow-100 p-4 rounded-full mb-4">
107
+ <i class="fas fa-leaf text-yellow-600 text-2xl"></i>
108
+ </div>
109
+ <h3 class="text-xl font-bold mb-2">Organik & Alami</h3>
110
+ <p class="text-gray-600">Telur dari ayam yang dipelihara secara alami tanpa bahan kimia berbahaya.</p>
111
+ </div>
112
+ <div class="flex flex-col items-center text-center p-6 rounded-lg bg-gray-50 hover:bg-yellow-50 transition duration-300">
113
+ <div class="bg-yellow-100 p-4 rounded-full mb-4">
114
+ <i class="fas fa-truck text-yellow-600 text-2xl"></i>
115
+ </div>
116
+ <h3 class="text-xl font-bold mb-2">Pengiriman Cepat</h3>
117
+ <p class="text-gray-600">Pesanan Anda akan dikirim dalam waktu 24 jam setelah pembelian.</p>
118
+ </div>
119
+ <div class="flex flex-col items-center text-center p-6 rounded-lg bg-gray-50 hover:bg-yellow-50 transition duration-300">
120
+ <div class="bg-yellow-100 p-4 rounded-full mb-4">
121
+ <i class="fas fa-medal text-yellow-600 text-2xl"></i>
122
+ </div>
123
+ <h3 class="text-xl font-bold mb-2">Kualitas Terbaik</h3>
124
+ <p class="text-gray-600">Setiap telur melalui proses seleksi ketat untuk memastikan kualitas terbaik.</p>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Products Section -->
131
+ <section id="products" class="py-16 bg-gray-50">
132
+ <div class="container mx-auto px-4">
133
+ <div class="text-center mb-12">
134
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Produk Kami</h2>
135
+ <p class="text-gray-600 max-w-2xl mx-auto">Pilih dari berbagai jenis telur segar berkualitas tinggi yang kami tawarkan</p>
136
+ </div>
137
+
138
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
139
+ <!-- Product 1 -->
140
+ <div class="bg-white rounded-xl shadow-md overflow-hidden egg-card transition duration-300">
141
+ <div class="relative">
142
+ <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Telur Ayam Kampung" class="w-full h-48 object-cover">
143
+ <div class="absolute top-2 right-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded">BEST SELLER</div>
144
+ </div>
145
+ <div class="p-6">
146
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Telur Ayam Kampung</h3>
147
+ <p class="text-gray-600 mb-4">Telur dari ayam kampung yang dipelihara secara alami, kaya nutrisi dan rendah kolesterol.</p>
148
+ <div class="flex justify-between items-center">
149
+ <span class="text-2xl font-bold text-gray-800">Rp 35.000</span>
150
+ <span class="text-sm text-gray-500">/ 10 butir</span>
151
+ </div>
152
+ <div class="mt-4 flex items-center">
153
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-l" onclick="updateQuantity('kampung', -1)">
154
+ <i class="fas fa-minus"></i>
155
+ </button>
156
+ <span id="kampung-qty" class="bg-gray-100 py-2 px-4">0</span>
157
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" onclick="updateQuantity('kampung', 1)">
158
+ <i class="fas fa-plus"></i>
159
+ </button>
160
+ <button onclick="addToCart('kampung', 'Telur Ayam Kampung', 35000, 'kampung-qty')" class="ml-auto bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
161
+ <i class="fas fa-cart-plus mr-2"></i> Tambah
162
+ </button>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Product 2 -->
168
+ <div class="bg-white rounded-xl shadow-md overflow-hidden egg-card transition duration-300">
169
+ <div class="relative">
170
+ <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Telur Ayam Negeri" class="w-full h-48 object-cover">
171
+ </div>
172
+ <div class="p-6">
173
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Telur Ayam Negeri</h3>
174
+ <p class="text-gray-600 mb-4">Telur ayam negeri segar dengan ukuran besar dan harga ekonomis untuk kebutuhan sehari-hari.</p>
175
+ <div class="flex justify-between items-center">
176
+ <span class="text-2xl font-bold text-gray-800">Rp 28.000</span>
177
+ <span class="text-sm text-gray-500">/ 10 butir</span>
178
+ </div>
179
+ <div class="mt-4 flex items-center">
180
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-l" onclick="updateQuantity('negeri', -1)">
181
+ <i class="fas fa-minus"></i>
182
+ </button>
183
+ <span id="negeri-qty" class="bg-gray-100 py-2 px-4">0</span>
184
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" onclick="updateQuantity('negeri', 1)">
185
+ <i class="fas fa-plus"></i>
186
+ </button>
187
+ <button onclick="addToCart('negeri', 'Telur Ayam Negeri', 28000, 'negeri-qty')" class="ml-auto bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
188
+ <i class="fas fa-cart-plus mr-2"></i> Tambah
189
+ </button>
190
+ </div>
191
+ </div>
192
+ </div>
193
+
194
+ <!-- Product 3 -->
195
+ <div class="bg-white rounded-xl shadow-md overflow-hidden egg-card transition duration-300">
196
+ <div class="relative">
197
+ <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Telur Omega 3" class="w-full h-48 object-cover">
198
+ <div class="absolute top-2 right-2 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded">PREMIUM</div>
199
+ </div>
200
+ <div class="p-6">
201
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Telur Omega 3</h3>
202
+ <p class="text-gray-600 mb-4">Telur dengan kandungan omega 3 tinggi yang baik untuk kesehatan jantung dan otak.</p>
203
+ <div class="flex justify-between items-center">
204
+ <span class="text-2xl font-bold text-gray-800">Rp 45.000</span>
205
+ <span class="text-sm text-gray-500">/ 10 butir</span>
206
+ </div>
207
+ <div class="mt-4 flex items-center">
208
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-l" onclick="updateQuantity('omega', -1)">
209
+ <i class="fas fa-minus"></i>
210
+ </button>
211
+ <span id="omega-qty" class="bg-gray-100 py-2 px-4">0</span>
212
+ <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-3 rounded-r" onclick="updateQuantity('omega', 1)">
213
+ <i class="fas fa-plus"></i>
214
+ </button>
215
+ <button onclick="addToCart('omega', 'Telur Omega 3', 45000, 'omega-qty')" class="ml-auto bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">
216
+ <i class="fas fa-cart-plus mr-2"></i> Tambah
217
+ </button>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="mt-12 text-center">
224
+ <button class="border-2 border-yellow-500 text-yellow-500 hover:bg-yellow-500 hover:text-white font-bold py-3 px-8 rounded-lg transition duration-300">
225
+ Lihat Semua Produk
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- About Section -->
232
+ <section id="about" class="py-16 bg-white">
233
+ <div class="container mx-auto px-4">
234
+ <div class="flex flex-col md:flex-row items-center">
235
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
236
+ <img src="https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3" alt="Peternakan Kami" class="rounded-lg shadow-xl w-full h-auto">
237
+ </div>
238
+ <div class="md:w-1/2">
239
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">Tentang FreshEggs</h2>
240
+ <p class="text-gray-600 mb-4">FreshEggs adalah usaha keluarga yang telah beroperasi sejak 2010, berkomitmen untuk menyediakan telur berkualitas tinggi kepada pelanggan kami.</p>
241
+ <p class="text-gray-600 mb-6">Kami memelihara ayam dengan cara yang alami dan berkelanjutan, memastikan setiap telur yang kami hasilkan tidak hanya lezat tetapi juga bergizi tinggi.</p>
242
+
243
+ <div class="grid grid-cols-2 gap-4 mb-6">
244
+ <div class="flex items-center">
245
+ <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
246
+ <span class="text-gray-700">100% Alami</span>
247
+ </div>
248
+ <div class="flex items-center">
249
+ <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
250
+ <span class="text-gray-700">Tanpa Hormon</span>
251
+ </div>
252
+ <div class="flex items-center">
253
+ <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
254
+ <span class="text-gray-700">Kandungan Nutrisi Tinggi</span>
255
+ </div>
256
+ <div class="flex items-center">
257
+ <i class="fas fa-check-circle text-yellow-500 mr-2"></i>
258
+ <span class="text-gray-700">Pengiriman Cepat</span>
259
+ </div>
260
+ </div>
261
+
262
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
263
+ Pelajari Lebih Lanjut
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- Testimonials Section -->
271
+ <section id="testimonials" class="py-16 bg-gray-50">
272
+ <div class="container mx-auto px-4">
273
+ <div class="text-center mb-12">
274
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Apa Kata Pelanggan Kami</h2>
275
+ <p class="text-gray-600 max-w-2xl mx-auto">Testimoni dari pelanggan yang puas dengan produk dan layanan kami</p>
276
+ </div>
277
+
278
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
279
+ <!-- Testimonial 1 -->
280
+ <div class="bg-white p-6 rounded-lg shadow-md">
281
+ <div class="flex items-center mb-4">
282
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4">
283
+ <div>
284
+ <h4 class="font-bold text-gray-800">Sarah Wijaya</h4>
285
+ <div class="flex text-yellow-400">
286
+ <i class="fas fa-star"></i>
287
+ <i class="fas fa-star"></i>
288
+ <i class="fas fa-star"></i>
289
+ <i class="fas fa-star"></i>
290
+ <i class="fas fa-star"></i>
291
+ </div>
292
+ </div>
293
+ </div>
294
+ <p class="text-gray-600">"Telur dari FreshEggs selalu segar dan enak. Keluarga saya sangat menyukainya. Pengiriman juga cepat dan tepat waktu."</p>
295
+ </div>
296
+
297
+ <!-- Testimonial 2 -->
298
+ <div class="bg-white p-6 rounded-lg shadow-md">
299
+ <div class="flex items-center mb-4">
300
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4">
301
+ <div>
302
+ <h4 class="font-bold text-gray-800">Budi Santoso</h4>
303
+ <div class="flex text-yellow-400">
304
+ <i class="fas fa-star"></i>
305
+ <i class="fas fa-star"></i>
306
+ <i class="fas fa-star"></i>
307
+ <i class="fas fa-star"></i>
308
+ <i class="fas fa-star"></i>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ <p class="text-gray-600">"Sebagai pemilik restoran, kualitas konsisten dari FreshEggs sangat membantu bisnis saya. Pelayanan mereka juga sangat baik."</p>
313
+ </div>
314
+
315
+ <!-- Testimonial 3 -->
316
+ <div class="bg-white p-6 rounded-lg shadow-md">
317
+ <div class="flex items-center mb-4">
318
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-12 h-12 rounded-full mr-4">
319
+ <div>
320
+ <h4 class="font-bold text-gray-800">Dewi Lestari</h4>
321
+ <div class="flex text-yellow-400">
322
+ <i class="fas fa-star"></i>
323
+ <i class="fas fa-star"></i>
324
+ <i class="fas fa-star"></i>
325
+ <i class="fas fa-star"></i>
326
+ <i class="fas fa-star-half-alt"></i>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ <p class="text-gray-600">"Saya sudah mencoba berbagai jenis telur mereka, semuanya enak dan segar. Khususnya telur omega 3, anak-anak saya suka sekali!"</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </section>
335
+
336
+ <!-- Contact Section -->
337
+ <section id="contact" class="py-16 bg-white">
338
+ <div class="container mx-auto px-4">
339
+ <div class="text-center mb-12">
340
+ <h2 class="text-3xl font-bold text-gray-800 mb-2">Hubungi Kami</h2>
341
+ <p class="text-gray-600 max-w-2xl mx-auto">Kami siap membantu Anda dengan pertanyaan atau pemesanan khusus</p>
342
+ </div>
343
+
344
+ <div class="flex flex-col md:flex-row">
345
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
346
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
347
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Informasi Kontak</h3>
348
+
349
+ <div class="space-y-4">
350
+ <div class="flex items-start">
351
+ <i class="fas fa-map-marker-alt text-yellow-500 mt-1 mr-4"></i>
352
+ <div>
353
+ <h4 class="font-bold text-gray-800">Alamat</h4>
354
+ <p class="text-gray-600">Jl. Telur Sejahtera No. 123, Jakarta Selatan</p>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="flex items-start">
359
+ <i class="fas fa-phone-alt text-yellow-500 mt-1 mr-4"></i>
360
+ <div>
361
+ <h4 class="font-bold text-gray-800">Telepon</h4>
362
+ <p class="text-gray-600">(021) 1234-5678</p>
363
+ <p class="text-gray-600">0812-3456-7890 (WhatsApp)</p>
364
+ </div>
365
+ </div>
366
+
367
+ <div class="flex items-start">
368
+ <i class="fas fa-envelope text-yellow-500 mt-1 mr-4"></i>
369
+ <div>
370
+ <h4 class="font-bold text-gray-800">Email</h4>
371
+ <p class="text-gray-600">info@fresheggs.com</p>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="flex items-start">
376
+ <i class="fas fa-clock text-yellow-500 mt-1 mr-4"></i>
377
+ <div>
378
+ <h4 class="font-bold text-gray-800">Jam Operasional</h4>
379
+ <p class="text-gray-600">Senin - Sabtu: 08.00 - 17.00 WIB</p>
380
+ <p class="text-gray-600">Minggu: Libur</p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="mt-6">
386
+ <h4 class="font-bold text-gray-800 mb-2">Ikuti Kami</h4>
387
+ <div class="flex space-x-4">
388
+ <a href="#" class="bg-gray-200 hover:bg-blue-600 hover:text-white text-blue-600 p-2 rounded-full transition duration-300">
389
+ <i class="fab fa-facebook-f"></i>
390
+ </a>
391
+ <a href="#" class="bg-gray-200 hover:bg-pink-600 hover:text-white text-pink-600 p-2 rounded-full transition duration-300">
392
+ <i class="fab fa-instagram"></i>
393
+ </a>
394
+ <a href="#" class="bg-gray-200 hover:bg-blue-400 hover:text-white text-blue-400 p-2 rounded-full transition duration-300">
395
+ <i class="fab fa-twitter"></i>
396
+ </a>
397
+ <a href="#" class="bg-gray-200 hover:bg-green-600 hover:text-white text-green-600 p-2 rounded-full transition duration-300">
398
+ <i class="fab fa-whatsapp"></i>
399
+ </a>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="md:w-1/2">
406
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
407
+ <h3 class="text-xl font-bold text-gray-800 mb-4">Kirim Pesan</h3>
408
+ <form id="contact-form">
409
+ <div class="mb-4">
410
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nama Lengkap</label>
411
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
412
+ </div>
413
+
414
+ <div class="mb-4">
415
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
416
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
417
+ </div>
418
+
419
+ <div class="mb-4">
420
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Nomor Telepon</label>
421
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
422
+ </div>
423
+
424
+ <div class="mb-4">
425
+ <label for="message" class="block text-gray-700 font-medium mb-2">Pesan</label>
426
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500"></textarea>
427
+ </div>
428
+
429
+ <button type="submit" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
430
+ Kirim Pesan
431
+ </button>
432
+ </form>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </section>
438
+
439
+ <!-- Newsletter Section -->
440
+ <section class="py-12 bg-yellow-50">
441
+ <div class="container mx-auto px-4 text-center">
442
+ <h2 class="text-2xl font-bold text-gray-800 mb-4">Berlangganan Newsletter Kami</h2>
443
+ <p class="text-gray-600 max-w-2xl mx-auto mb-6">Dapatkan informasi terbaru tentang promo, produk baru, dan tips seputar telur langsung ke email Anda.</p>
444
+
445
+ <div class="max-w-md mx-auto flex">
446
+ <input type="email" placeholder="Alamat email Anda" class="flex-grow px-4 py-3 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500">
447
+ <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold px-6 py-3 rounded-r-lg transition duration-300">
448
+ Berlangganan
449
+ </button>
450
+ </div>
451
+ </div>
452
+ </section>
453
+
454
+ <!-- Footer -->
455
+ <footer class="bg-gray-800 text-white py-12">
456
+ <div class="container mx-auto px-4">
457
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
458
+ <div>
459
+ <div class="flex items-center space-x-2 mb-4">
460
+ <i class="fas fa-egg text-yellow-500 text-2xl"></i>
461
+ <h3 class="text-xl font-bold">Fresh<span class="text-yellow-500">Eggs</span></h3>
462
+ </div>
463
+ <p class="text-gray-400 mb-4">Menyediakan telur segar berkualitas tinggi langsung dari peternak terpercaya.</p>
464
+ <div class="flex space-x-4">
465
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
466
+ <i class="fab fa-facebook-f"></i>
467
+ </a>
468
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
469
+ <i class="fab fa-instagram"></i>
470
+ </a>
471
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
472
+ <i class="fab fa-twitter"></i>
473
+ </a>
474
+ <a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">
475
+ <i class="fab fa-whatsapp"></i>
476
+ </a>
477
+ </div>
478
+ </div>
479
+
480
+ <div>
481
+ <h4 class="text-lg font-bold mb-4">Tautan Cepat</h4>
482
+ <ul class="space-y-2">
483
+ <li><a href="#home" class="text-gray-400 hover:text-yellow-500 transition duration-300">Beranda</a></li>
484
+ <li><a href="#products" class="text-gray-400 hover:text-yellow-500 transition duration-300">Produk</a></li>
485
+ <li><a href="#about" class="text-gray-400 hover:text-yellow-500 transition duration-300">Tentang Kami</a></li>
486
+ <li><a href="#testimonials" class="text-gray-400 hover:text-yellow-500 transition duration-300">Testimoni</a></li>
487
+ <li><a href="#contact" class="text-gray-400 hover:text-yellow-500 transition duration-300">Kontak</a></li>
488
+ </ul>
489
+ </div>
490
+
491
+ <div>
492
+ <h4 class="text-lg font-bold mb-4">Produk</h4>
493
+ <ul class="space-y-2">
494
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Ayam Kampung</a></li>
495
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Ayam Negeri</a></li>
496
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Omega 3</a></li>
497
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Organik</a></li>
498
+ <li><a href="#" class="text-gray-400 hover:text-yellow-500 transition duration-300">Telur Bebek</a></li>
499
+ </ul>
500
+ </div>
501
+
502
+ <div>
503
+ <h4 class="text-lg font-bold mb-4">Kontak</h4>
504
+ <ul class="space-y-2">
505
+ <li class="flex items-start">
506
+ <i class="fas fa-map-marker-alt text-yellow-500 mt-1 mr-2"></i>
507
+ <span class="text-gray-400">Jl. Telur Sejahtera No. 123, Jakarta Selatan</span>
508
+ </li>
509
+ <li class="flex items-center">
510
+ <i class="fas fa-phone-alt text-yellow-500 mr-2"></i>
511
+ <span class="text-gray-400">(021) 1234-5678</span>
512
+ </li>
513
+ <li class="flex items-center">
514
+ <i class="fas fa-envelope text-yellow-500 mr-2"></i>
515
+ <span class="text-gray-400">info@fresheggs.com</span>
516
+ </li>
517
+ </ul>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
522
+ <p>&copy; 2023 FreshEggs. All rights reserved.</p>
523
+ </div>
524
+ </div>
525
+ </footer>
526
+
527
+ <!-- Shopping Cart Modal -->
528
+ <div id="cart-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
529
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
530
+ <div class="fixed inset-0 transition-opacity" aria-hidden="true">
531
+ <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
532
+ </div>
533
+
534
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
535
+
536
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
537
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
538
+ <div class="flex justify-between items-center border-b pb-3">
539
+ <h3 class="text-lg font-bold text-gray-800">Keranjang Belanja</h3>
540
+ <button id="close-cart" class="text-gray-500 hover:text-gray-700">
541
+ <i class="fas fa-times"></i>
542
+ </button>
543
+ </div>
544
+
545
+ <div id="cart-items" class="mt-4 max-h-96 overflow-y-auto">
546
+ <!-- Cart items will be added here dynamically -->
547
+ <p id="empty-cart-message" class="text-gray-500 text-center py-8">Keranjang belanja Anda masih kosong</p>
548
+ </div>
549
+
550
+ <div id="cart-summary" class="mt-4 border-t pt-4 hidden">
551
+ <div class="flex justify-between mb-2">
552
+ <span class="font-medium text-gray-700">Subtotal</span>
553
+ <span id="cart-subtotal" class="font-medium">Rp 0</span>
554
+ </div>
555
+ <div class="flex justify-between mb-2">
556
+ <span class="font-medium text-gray-700">Ongkos Kirim</span>
557
+ <span class="font-medium">Rp 10.000</span>
558
+ </div>
559
+ <div class="flex justify-between text-lg font-bold text-gray-800 border-t pt-2 mt-2">
560
+ <span>Total</span>
561
+ <span id="cart-total">Rp 10.000</span>
562
+ </div>
563
+
564
+ <div class="mt-6">
565
+ <button id="checkout-btn" class="w-full bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
566
+ Proses Checkout
567
+ </button>
568
+ </div>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </div>
573
+ </div>
574
+
575
+ <!-- Success Notification -->
576
+ <div id="success-notification" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg hidden z-50">
577
+ <div class="flex items-center">
578
+ <i class="fas fa-check-circle mr-2"></i>
579
+ <span id="success-message">Item berhasil ditambahkan ke keranjang!</span>
580
+ </div>
581
+ </div>
582
+
583
+ <script>
584
+ // Mobile menu toggle
585
+ const mobileMenuBtn = document.getElementById('mobile-menu-btn');
586
+ const mobileMenu = document.getElementById('mobile-menu');
587
+
588
+ mobileMenuBtn.addEventListener('click', () => {
589
+ mobileMenu.classList.toggle('hidden');
590
+ });
591
+
592
+ // Cart functionality
593
+ let cart = [];
594
+
595
+ // Cart modal toggle
596
+ const cartBtn = document.getElementById('cart-btn');
597
+ const cartModal = document.getElementById('cart-modal');
598
+ const closeCart = document.getElementById('close-cart');
599
+
600
+ cartBtn.addEventListener('click', () => {
601
+ cartModal.classList.remove('hidden');
602
+ updateCartDisplay();
603
+ });
604
+
605
+ closeCart.addEventListener('click', () => {
606
+ cartModal.classList.add('hidden');
607
+ });
608
+
609
+ // Update quantity
610
+ function updateQuantity(productId, change) {
611
+ const qtyElement = document.getElementById(`${productId}-qty`);
612
+ let currentQty = parseInt(qtyElement.textContent);
613
+ currentQty += change;
614
+
615
+ if (currentQty < 0) currentQty = 0;
616
+
617
+ qtyElement.textContent = currentQty;
618
+ }
619
+
620
+ // Add to cart
621
+ function addToCart(productId, productName, price, qtyElementId) {
622
+ const qty = parseInt(document.getElementById(qtyElementId).textContent);
623
+
624
+ if (qty <= 0) return;
625
+
626
+ // Check if item already in cart
627
+ const existingItemIndex = cart.findIndex(item => item.id === productId);
628
+
629
+ if (existingItemIndex >= 0) {
630
+ // Update quantity if item exists
631
+ cart[existingItemIndex].quantity += qty;
632
+ } else {
633
+ // Add new item to cart
634
+ cart.push({
635
+ id: productId,
636
+ name: productName,
637
+ price: price,
638
+ quantity: qty
639
+ });
640
+ }
641
+
642
+ // Reset quantity
643
+ document.getElementById(qtyElementId).textContent = '0';
644
+
645
+ // Update cart count
646
+ updateCartCount();
647
+
648
+ // Show success notification
649
+ showSuccessNotification(`${qty} ${productName} berhasil ditambahkan ke keranjang!`);
650
+ }
651
+
652
+ // Update cart count display
653
+ function updateCartCount() {
654
+ const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
655
+ document.getElementById('cart-count').textContent = totalItems;
656
+ }
657
+
658
+ // Update cart display in modal
659
+ function updateCartDisplay() {
660
+ const cartItemsContainer = document.getElementById('cart-items');
661
+ const emptyCartMessage = document.getElementById('empty-cart-message');
662
+ const cartSummary = document.getElementById('cart-summary');
663
+
664
+ if (cart.length === 0) {
665
+ emptyCartMessage.classList.remove('hidden');
666
+ cartSummary.classList.add('hidden');
667
+ cartItemsContainer.innerHTML = '';
668
+ cartItemsContainer.appendChild(emptyCartMessage);
669
+ } else {
670
+ emptyCartMessage.classList.add('hidden');
671
+ cartSummary.classList.remove('hidden');
672
+
673
+ // Clear existing items
674
+ cartItemsContainer.innerHTML = '';
675
+
676
+ // Add each cart item
677
+ cart.forEach(item => {
678
+ const itemElement = document.createElement('div');
679
+ itemElement.className = 'flex justify-between items-center py-3 border-b cart-item';
680
+ itemElement.innerHTML = `
681
+ <div class="flex-1">
682
+ <h4 class="font-medium text-gray-800">${item.name}</h4>
683
+ <p class="text-sm text-gray-500">${item.quantity} x Rp ${item.price.toLocaleString()}</p>
684
+ </div>
685
+ <div class="flex items-center">
686
+ <span class="font-medium text-gray-800 mr-4">Rp ${(item.quantity * item.price).toLocaleString()}</span>
687
+ <button onclick="removeFromCart('${item.id}')" class="text-red-500 hover:text-red-700">
688
+ <i class="fas fa-trash"></i>
689
+ </button>
690
+ </div>
691
+ `;
692
+ cartItemsContainer.appendChild(itemElement);
693
+ });
694
+
695
+ // Update totals
696
+ const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
697
+ document.getElementById('cart-subtotal').textContent = `Rp ${subtotal.toLocaleString()}`;
698
+ document.getElementById('cart-total').textContent = `Rp ${(subtotal + 10000).toLocaleString()}`;
699
+ }
700
+ }
701
+
702
+ // Remove item from cart
703
+ function removeFromCart(productId) {
704
+ cart = cart.filter(item => item.id !== productId);
705
+ updateCartCount();
706
+ updateCartDisplay();
707
+ }
708
+
709
+ // Show success notification
710
+ function showSuccessNotification(message) {
711
+ const notification = document.getElementById('success-notification');
712
+ const messageElement = document.getElementById('success-message');
713
+
714
+ messageElement.textContent = message;
715
+ notification.classList.remove('hidden');
716
+
717
+ setTimeout(() => {
718
+ notification.classList.add('hidden');
719
+ }, 3000);
720
+ }
721
+
722
+ // Form submission
723
+ document.getElementById('contact-form').addEventListener('submit', function(e) {
724
+ e.preventDefault();
725
+ showSuccessNotification('Pesan Anda telah berhasil dikirim! Kami akan segera menghubungi Anda.');
726
+ this.reset();
727
+ });
728
+
729
+ // Checkout button
730
+ document.getElementById('checkout-btn').addEventListener('click', function() {
731
+ showSuccessNotification('Pesanan Anda sedang diproses! Kami akan menghubungi Anda untuk konfirmasi.');
732
+ cart = [];
733
+ updateCartCount();
734
+ updateCartDisplay();
735
+ cartModal.classList.add('hidden');
736
+ });
737
+
738
+ // Smooth scrolling for anchor links
739
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
740
+ anchor.addEventListener('click', function (e) {
741
+ e.preventDefault();
742
+
743
+ const targetId = this.getAttribute('href');
744
+ const targetElement = document.querySelector(targetId);
745
+
746
+ if (targetElement) {
747
+ window.scrollTo({
748
+ top: targetElement.offsetTop - 80,
749
+ behavior: 'smooth'
750
+ });
751
+
752
+ // Close mobile menu if open
753
+ mobileMenu.classList.add('hidden');
754
+ }
755
+ });
756
+ });
757
+ </script>
758
+ <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=marrrrrr/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
759
+ </html>
prompts.txt ADDED
File without changes