Hugging Face's logo

Spaces:
davidkkkk
/
baby
Running

App Files Community
davidkkkk commited on
Commit
ba7240b
·
verified ·
1 Parent(s): 56306eb

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +941 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Baby
3
- emoji: 🐠
4
- colorFrom: red
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: baby
3
+ emoji: 🐳
4
+ colorFrom: purple
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,941 @@
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>Newborn Baby Shopping List</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
10
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
13
+
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ background-color: #fafafa;
17
+ }
18
+
19
+ .title-font {
20
+ font-family: 'Playfair Display', serif;
21
+ }
22
+
23
+ .category-card {
24
+ transition: all 0.3s ease;
25
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
26
+ }
27
+
28
+ .category-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
31
+ }
32
+
33
+ .checkmark {
34
+ display: inline-block;
35
+ width: 22px;
36
+ height: 22px;
37
+ border: 2px solid #e2e8f0;
38
+ border-radius: 6px;
39
+ position: relative;
40
+ cursor: pointer;
41
+ transition: all 0.2s ease;
42
+ }
43
+
44
+ .checkmark.checked {
45
+ background-color: #10b981;
46
+ border-color: #10b981;
47
+ }
48
+
49
+ .checkmark.checked:after {
50
+ content: "";
51
+ position: absolute;
52
+ left: 6px;
53
+ top: 2px;
54
+ width: 5px;
55
+ height: 10px;
56
+ border: solid white;
57
+ border-width: 0 2px 2px 0;
58
+ transform: rotate(45deg);
59
+ }
60
+
61
+ .progress-bar {
62
+ height: 10px;
63
+ border-radius: 10px;
64
+ background-color: #e2e8f0;
65
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
66
+ }
67
+
68
+ .progress-fill {
69
+ height: 100%;
70
+ border-radius: 10px;
71
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
72
+ transition: width 0.5s ease;
73
+ box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
74
+ }
75
+
76
+ .print-area {
77
+ background-color: white;
78
+ padding: 24px;
79
+ border-radius: 12px;
80
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
81
+ }
82
+
83
+ .timeline-item {
84
+ position: relative;
85
+ padding-left: 32px;
86
+ margin-bottom: 24px;
87
+ }
88
+
89
+ .timeline-item:before {
90
+ content: '';
91
+ position: absolute;
92
+ left: 0;
93
+ top: 0;
94
+ width: 18px;
95
+ height: 18px;
96
+ border-radius: 50%;
97
+ background: linear-gradient(135deg, #8b5cf6, #3b82f6);
98
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
99
+ }
100
+
101
+ .timeline-item:after {
102
+ content: '';
103
+ position: absolute;
104
+ left: 8px;
105
+ top: 18px;
106
+ width: 2px;
107
+ height: 100%;
108
+ background-color: #e2e8f0;
109
+ }
110
+
111
+ .timeline-item:last-child:after {
112
+ display: none;
113
+ }
114
+
115
+ .category-icon {
116
+ width: 40px;
117
+ height: 40px;
118
+ display: flex;
119
+ align-items: center;
120
+ justify-content: center;
121
+ border-radius: 10px;
122
+ margin-right: 12px;
123
+ color: white;
124
+ }
125
+
126
+ .input-focus {
127
+ transition: all 0.3s ease;
128
+ }
129
+
130
+ .input-focus:focus {
131
+ box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
132
+ }
133
+
134
+ .floating-btn {
135
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
136
+ transition: all 0.3s ease;
137
+ }
138
+
139
+ .floating-btn:hover {
140
+ transform: translateY(-2px);
141
+ box-shadow: 0 15px 20px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
142
+ }
143
+
144
+ .suggestion-card {
145
+ transition: all 0.3s ease;
146
+ border: 1px solid #e2e8f0;
147
+ }
148
+
149
+ .suggestion-card:hover {
150
+ transform: translateY(-3px);
151
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
152
+ border-color: #8b5cf6;
153
+ }
154
+
155
+ .gradient-text {
156
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
157
+ -webkit-background-clip: text;
158
+ background-clip: text;
159
+ color: transparent;
160
+ }
161
+
162
+ .custom-number-input::-webkit-inner-spin-button,
163
+ .custom-number-input::-webkit-outer-spin-button {
164
+ -webkit-appearance: none;
165
+ margin: 0;
166
+ }
167
+
168
+ .custom-number-input {
169
+ -moz-appearance: textfield;
170
+ }
171
+
172
+ .animate-pulse {
173
+ animation: pulse 2s infinite;
174
+ }
175
+
176
+ @keyframes pulse {
177
+ 0% {
178
+ opacity: 0.6;
179
+ }
180
+ 50% {
181
+ opacity: 1;
182
+ }
183
+ 100% {
184
+ opacity: 0.6;
185
+ }
186
+ }
187
+
188
+ .tooltip {
189
+ position: relative;
190
+ }
191
+
192
+ .tooltip .tooltip-text {
193
+ visibility: hidden;
194
+ width: 120px;
195
+ background-color: #333;
196
+ color: #fff;
197
+ text-align: center;
198
+ border-radius: 6px;
199
+ padding: 5px;
200
+ position: absolute;
201
+ z-index: 1;
202
+ bottom: 125%;
203
+ left: 50%;
204
+ margin-left: -60px;
205
+ opacity: 0;
206
+ transition: opacity 0.3s;
207
+ }
208
+
209
+ .tooltip .tooltip-text::after {
210
+ content: "";
211
+ position: absolute;
212
+ top: 100%;
213
+ left: 50%;
214
+ margin-left: -5px;
215
+ border-width: 5px;
216
+ border-style: solid;
217
+ border-color: #333 transparent transparent transparent;
218
+ }
219
+
220
+ .tooltip:hover .tooltip-text {
221
+ visibility: visible;
222
+ opacity: 1;
223
+ }
224
+ </style>
225
+ </head>
226
+ <body class="min-h-screen bg-gray-50">
227
+ <!-- Header with decorative elements -->
228
+ <div class="relative overflow-hidden">
229
+ <div class="absolute inset-0 bg-gradient-to-r from-blue-100 to-purple-100 opacity-20"></div>
230
+ <div class="container mx-auto px-4 py-12 relative">
231
+ <div class="text-center mb-8">
232
+ <h1 class="title-font text-5xl font-bold text-gray-900 mb-4">Newborn Baby Shopping List</h1>
233
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
234
+ Prepare everything you need for your little one's arrival with our comprehensive checklist
235
+ </p>
236
+ </div>
237
+
238
+ <!-- Progress Section with animated elements -->
239
+ <div class="bg-white rounded-xl shadow-lg p-8 mb-8 relative overflow-hidden">
240
+ <div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-10 -mt-10"></div>
241
+ <div class="absolute bottom-0 left-0 w-24 h-24 bg-purple-50 rounded-full -ml-8 -mb-8"></div>
242
+
243
+ <div class="relative z-10">
244
+ <div class="flex justify-between items-center mb-4">
245
+ <h2 class="text-2xl font-semibold text-gray-800">Your Preparation Progress</h2>
246
+ <span class="text-2xl font-bold gradient-text" id="progress-percentage">0%</span>
247
+ </div>
248
+ <div class="progress-bar mb-6">
249
+ <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
250
+ </div>
251
+ <div class="flex justify-between text-sm text-gray-600">
252
+ <span id="items-completed">0 items completed</span>
253
+ <span id="items-total">0 total items</span>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+
260
+ <!-- Main Content -->
261
+ <div class="container mx-auto px-4 pb-16">
262
+ <div class="flex flex-col lg:flex-row gap-8">
263
+ <!-- Categories Navigation -->
264
+ <div class="lg:w-1/4">
265
+ <div class="bg-white rounded-xl shadow-lg p-6 sticky top-4">
266
+ <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
267
+ <i class="fas fa-list-check mr-3 text-purple-500"></i>
268
+ Categories
269
+ </h2>
270
+ <ul class="space-y-2">
271
+ <li>
272
+ <button onclick="showCategory('nursery')" class="category-btn w-full text-left px-4 py-3 rounded-lg hover:bg-blue-50 hover:text-blue-600 transition flex items-center active-category" data-category="nursery">
273
+ <div class="category-icon bg-blue-500">
274
+ <i class="fas fa-baby-carriage"></i>
275
+ </div>
276
+ Nursery
277
+ </button>
278
+ </li>
279
+ <li>
280
+ <button onclick="showCategory('clothing')" class="category-btn w-full text-left px-4 py-3 rounded-lg hover:bg-pink-50 hover:text-pink-600 transition flex items-center" data-category="clothing">
281
+ <div class="category-icon bg-pink-500">
282
+ <i class="fas fa-tshirt"></i>
283
+ </div>
284
+ Clothing
285
+ </button>
286
+ </li>
287
+ <li>
288
+ <button onclick="showCategory('feeding')" class="category-btn w-full text-left px-4 py-3 rounded-lg hover:bg-yellow-50 hover:text-yellow-600 transition flex items-center" data-category="feeding">
289
+ <div class="category-icon bg-yellow-500">
290
+ <i class="fas fa-bottle-water"></i>
291
+ </div>
292
+ Feeding
293
+ </button>
294
+ </li>
295
+ <li>
296
+ <button onclick="showCategory('diapering')" class="category-btn w-full text-left px-4 py-3 rounded-lg hover:bg-green-50 hover:text-green-600 transition flex items-center" data-category="diapering">
297
+ <div class="category-icon bg-green-500">
298
+ <i class="fas fa-baby"></i>
299
+ </div>
300
+ Diapering
301
+ </button>
302
+ </li>
303
+ <li>
304
+ <button onclick="showCategory('bathing')" class="category-btn w-full text-left px-4 py-3 rounded-lg hover:bg-indigo-50 hover:text-indigo-600 transition flex items-center" data-category="bathing">
305
+ <div class="category-icon bg-indigo-500">
306
+ <i class="fas fa-bath"></i>
307
+ </div>
308
+ Bathing
309
+ </button>
310
+ </li>
311
+ <li>
312
+ <button onclick="showCategory('health')" class="category-btn w-full text-left px-4 py-3 rounded-lg hover:bg-red-50 hover:text-red-600 transition flex items-center" data-category="health">
313
+ <div class="category-icon bg-red-500">
314
+ <i class="fas fa-first-aid"></i>
315
+ </div>
316
+ Health & Safety
317
+ </button>
318
+ </li>
319
+ <li>
320
+ <button onclick="showCategory('travel')" class="category-btn w-full text-left px-4 py-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition flex items-center" data-category="travel">
321
+ <div class="category-icon bg-purple-500">
322
+ <i class="fas fa-car"></i>
323
+ </div>
324
+ Travel
325
+ </button>
326
+ </li>
327
+ </ul>
328
+
329
+ <div class="mt-10">
330
+ <h3 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
331
+ <i class="fas fa-calendar-alt mr-3 text-purple-500"></i>
332
+ Preparation Timeline
333
+ </h3>
334
+ <div class="timeline pl-2">
335
+ <div class="timeline-item">
336
+ <h4 class="font-medium text-gray-800">3 Months Before</h4>
337
+ <p class="text-sm text-gray-600">Start researching and budgeting</p>
338
+ </div>
339
+ <div class="timeline-item">
340
+ <h4 class="font-medium text-gray-800">2 Months Before</h4>
341
+ <p class="text-sm text-gray-600">Purchase nursery furniture</p>
342
+ </div>
343
+ <div class="timeline-item">
344
+ <h4 class="font-medium text-gray-800">1 Month Before</h4>
345
+ <p class="text-sm text-gray-600">Buy essential clothing and diapers</p>
346
+ </div>
347
+ <div class="timeline-item">
348
+ <h4 class="font-medium text-gray-800">2 Weeks Before</h4>
349
+ <p class="text-sm text-gray-600">Pack hospital bag</p>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Items List -->
357
+ <div class="lg:w-3/4">
358
+ <div class="bg-white rounded-xl shadow-lg p-8 mb-8">
359
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
360
+ <div>
361
+ <h2 class="text-3xl font-semibold text-gray-800" id="current-category">Nursery Items</h2>
362
+ <p class="text-gray-500 mt-1" id="category-description">Essential items for your baby's nursery</p>
363
+ </div>
364
+ <div class="flex gap-3">
365
+ <button onclick="printList()" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-5 py-2.5 rounded-lg flex items-center floating-btn">
366
+ <i class="fas fa-print mr-2"></i> Print List
367
+ </button>
368
+ <button onclick="saveList()" class="bg-white border border-gray-200 hover:bg-gray-50 text-gray-800 px-5 py-2.5 rounded-lg flex items-center floating-btn">
369
+ <i class="fas fa-save mr-2"></i> Save
370
+ </button>
371
+ </div>
372
+ </div>
373
+
374
+ <!-- Search and Filter -->
375
+ <div class="mb-8">
376
+ <div class="flex flex-col md:flex-row gap-4">
377
+ <div class="relative flex-grow">
378
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
379
+ <i class="fas fa-search text-gray-400"></i>
380
+ </div>
381
+ <input type="text" id="search-items" placeholder="Search items..." class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-lg input-focus focus:ring-0 focus:border-purple-500">
382
+ </div>
383
+ <div class="relative">
384
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
385
+ <i class="fas fa-filter text-gray-400"></i>
386
+ </div>
387
+ <select id="filter-timing" class="border border-gray-200 rounded-lg px-10 py-3 input-focus focus:ring-0 focus:border-purple-500 appearance-none">
388
+ <option value="all">All Items</option>
389
+ <option value="before">Before Hospital</option>
390
+ <option value="after">After Hospital</option>
391
+ </select>
392
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
393
+ <i class="fas fa-chevron-down text-gray-400"></i>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Items Container -->
400
+ <div class="print-area" id="items-container">
401
+ <!-- Items will be loaded here dynamically -->
402
+ </div>
403
+
404
+ <!-- Suggestions -->
405
+ <div class="mt-12">
406
+ <div class="flex justify-between items-center mb-6">
407
+ <h3 class="text-2xl font-semibold text-gray-800">Suggested Items</h3>
408
+ <div class="text-sm text-gray-500">Based on popular choices</div>
409
+ </div>
410
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="suggestions-container">
411
+ <!-- Suggestions will be loaded here dynamically -->
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Floating Add Button -->
420
+ <button onclick="addCustomItem()" class="fixed bottom-8 right-8 w-14 h-14 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full flex items-center justify-center shadow-xl floating-btn animate-pulse">
421
+ <i class="fas fa-plus text-xl"></i>
422
+ </button>
423
+
424
+ <script>
425
+ // Initialize the shopping list data
426
+ const shoppingList = {
427
+ nursery: [
428
+ { name: "Crib or bassinet", quantity: 1, purchased: false, timing: "before", priority: "high" },
429
+ { name: "Mattress", quantity: 1, purchased: false, timing: "before", priority: "high" },
430
+ { name: "Mattress pad", quantity: 1, purchased: false, timing: "before", priority: "medium" },
431
+ { name: "Crib sheets (2-3)", quantity: 3, purchased: false, timing: "before", priority: "high" },
432
+ { name: "Waterproof mattress cover", quantity: 1, purchased: false, timing: "before", priority: "medium" },
433
+ { name: "Rocking chair or glider", quantity: 1, purchased: false, timing: "before", priority: "medium" },
434
+ { name: "Dresser or changing table", quantity: 1, purchased: false, timing: "before", priority: "high" },
435
+ { name: "Night light", quantity: 1, purchased: false, timing: "before", priority: "low" },
436
+ { name: "Baby monitor", quantity: 1, purchased: false, timing: "before", priority: "high" },
437
+ { name: "Humidifier", quantity: 1, purchased: false, timing: "before", priority: "medium" }
438
+ ],
439
+ clothing: [
440
+ { name: "Onesies (5-7)", quantity: 7, purchased: false, timing: "before", priority: "high" },
441
+ { name: "Sleepers (3-5)", quantity: 5, purchased: false, timing: "before", priority: "high" },
442
+ { name: "Socks or booties (5-7 pairs)", quantity: 7, purchased: false, timing: "before", priority: "high" },
443
+ { name: "Hats (2-3)", quantity: 3, purchased: false, timing: "before", priority: "high" },
444
+ { name: "Mittens (to prevent scratching)", quantity: 2, purchased: false, timing: "before", priority: "medium" },
445
+ { name: "Swaddle blankets (3-5)", quantity: 5, purchased: false, timing: "before", priority: "high" },
446
+ { name: "Receiving blankets (5-7)", quantity: 7, purchased: false, timing: "before", priority: "medium" },
447
+ { name: "Outfits for going home (2)", quantity: 2, purchased: false, timing: "before", priority: "high" }
448
+ ],
449
+ feeding: [
450
+ { name: "Breast pump (if breastfeeding)", quantity: 1, purchased: false, timing: "before", priority: "high" },
451
+ { name: "Nursing bras (3-4)", quantity: 4, purchased: false, timing: "before", priority: "high" },
452
+ { name: "Nursing pads", quantity: 1, purchased: false, timing: "before", priority: "medium" },
453
+ { name: "Nipple cream", quantity: 1, purchased: false, timing: "before", priority: "medium" },
454
+ { name: "Bottles (6-8)", quantity: 8, purchased: false, timing: "before", priority: "high" },
455
+ { name: "Bottle brush", quantity: 1, purchased: false, timing: "before", priority: "high" },
456
+ { name: "Formula (if not breastfeeding)", quantity: 1, purchased: false, timing: "before", priority: "high" },
457
+ { name: "Burp cloths (5-7)", quantity: 7, purchased: false, timing: "before", priority: "high" },
458
+ { name: "Bibs (5-7)", quantity: 7, purchased: false, timing: "before", priority: "medium" }
459
+ ],
460
+ diapering: [
461
+ { name: "Diapers (newborn size, 1-2 packs)", quantity: 2, purchased: false, timing: "before", priority: "high" },
462
+ { name: "Diaper pail", quantity: 1, purchased: false, timing: "before", priority: "medium" },
463
+ { name: "Diaper bag", quantity: 1, purchased: false, timing: "before", priority: "high" },
464
+ { name: "Diaper rash cream", quantity: 1, purchased: false, timing: "before", priority: "high" },
465
+ { name: "Baby wipes (2-3 packs)", quantity: 3, purchased: false, timing: "before", priority: "high" },
466
+ { name: "Changing pad", quantity: 1, purchased: false, timing: "before", priority: "high" },
467
+ { name: "Changing pad covers (2-3)", quantity: 3, purchased: false, timing: "before", priority: "medium" }
468
+ ],
469
+ bathing: [
470
+ { name: "Baby bathtub", quantity: 1, purchased: false, timing: "before", priority: "high" },
471
+ { name: "Baby shampoo & body wash", quantity: 1, purchased: false, timing: "before", priority: "high" },
472
+ { name: "Baby lotion", quantity: 1, purchased: false, timing: "before", priority: "medium" },
473
+ { name: "Hooded towels (2-3)", quantity: 3, purchased: false, timing: "before", priority: "medium" },
474
+ { name: "Washcloths (5-7)", quantity: 7, purchased: false, timing: "before", priority: "medium" },
475
+ { name: "Soft-bristled hair brush", quantity: 1, purchased: false, timing: "before", priority: "low" },
476
+ { name: "Nail clippers or file", quantity: 1, purchased: false, timing: "before", priority: "high" }
477
+ ],
478
+ health: [
479
+ { name: "Digital thermometer", quantity: 1, purchased: false, timing: "before", priority: "high" },
480
+ { name: "Nasal aspirator", quantity: 1, purchased: false, timing: "before", priority: "high" },
481
+ { name: "Baby-safe nail scissors", quantity: 1, purchased: false, timing: "before", priority: "high" },
482
+ { name: "Medicine dropper", quantity: 1, purchased: false, timing: "before", priority: "medium" },
483
+ { name: "Infant acetaminophen", quantity: 1, purchased: false, timing: "before", priority: "high" },
484
+ { name: "Baby sunscreen (for after 6 months)", quantity: 1, purchased: false, timing: "after", priority: "low" },
485
+ { name: "First aid kit", quantity: 1, purchased: false, timing: "before", priority: "high" },
486
+ { name: "Outlet covers", quantity: 10, purchased: false, timing: "before", priority: "high" },
487
+ { name: "Cabinet locks", quantity: 4, purchased: false, timing: "before", priority: "high" }
488
+ ],
489
+ travel: [
490
+ { name: "Infant car seat", quantity: 1, purchased: false, timing: "before", priority: "high" },
491
+ { name: "Stroller", quantity: 1, purchased: false, timing: "before", priority: "high" },
492
+ { name: "Baby carrier or wrap", quantity: 1, purchased: false, timing: "before", priority: "medium" },
493
+ { name: "Car seat cover (for cold weather)", quantity: 1, purchased: false, timing: "before", priority: "low" },
494
+ { name: "Stroller blanket", quantity: 1, purchased: false, timing: "before", priority: "medium" },
495
+ { name: "Car window shades", quantity: 2, purchased: false, timing: "after", priority: "low" }
496
+ ]
497
+ };
498
+
499
+ // Category descriptions
500
+ const categoryDescriptions = {
501
+ nursery: "Essential items for your baby's nursery and sleep space",
502
+ clothing: "All the clothing essentials for your newborn",
503
+ feeding: "Everything you need for feeding your baby",
504
+ diapering: "Diapering essentials for your newborn",
505
+ bathing: "Items for keeping your baby clean and fresh",
506
+ health: "Health and safety items for your baby",
507
+ travel: "Items for traveling with your newborn"
508
+ };
509
+
510
+ // Suggested items (based on popular choices)
511
+ const suggestedItems = [
512
+ { name: "White noise machine", category: "nursery", timing: "before", icon: "fas fa-volume-up", color: "bg-blue-100 text-blue-600" },
513
+ { name: "Diaper genie", category: "diapering", timing: "before", icon: "fas fa-trash-alt", color: "bg-green-100 text-green-600" },
514
+ { name: "Baby swing", category: "nursery", timing: "before", icon: "fas fa-child", color: "bg-blue-100 text-blue-600" },
515
+ { name: "Wipe warmer", category: "diapering", timing: "before", icon: "fas fa-temperature-high", color: "bg-green-100 text-green-600" },
516
+ { name: "Bottle sterilizer", category: "feeding", timing: "before", icon: "fas fa-spray-can", color: "bg-yellow-100 text-yellow-600" },
517
+ { name: "Baby food maker", category: "feeding", timing: "after", icon: "fas fa-blender", color: "bg-yellow-100 text-yellow-600" },
518
+ { name: "Nursing pillow", category: "feeding", timing: "before", icon: "fas fa-pillow", color: "bg-yellow-100 text-yellow-600" },
519
+ { name: "Baby gym", category: "nursery", timing: "before", icon: "fas fa-dumbbell", color: "bg-blue-100 text-blue-600" },
520
+ { name: "Sound machine", category: "nursery", timing: "before", icon: "fas fa-music", color: "bg-blue-100 text-blue-600" }
521
+ ];
522
+
523
+ // Current category
524
+ let currentCategory = 'nursery';
525
+
526
+ // Load the shopping list from localStorage if available
527
+ function loadShoppingList() {
528
+ const savedList = localStorage.getItem('newbornShoppingList');
529
+ if (savedList) {
530
+ Object.assign(shoppingList, JSON.parse(savedList));
531
+ }
532
+ }
533
+
534
+ // Save the shopping list to localStorage
535
+ function saveShoppingList() {
536
+ localStorage.setItem('newbornShoppingList', JSON.stringify(shoppingList));
537
+ showAlert('List saved successfully!', 'success');
538
+ }
539
+
540
+ // Show alert message
541
+ function showAlert(message, type) {
542
+ const alert = document.createElement('div');
543
+ alert.className = `fixed top-4 right-4 px-6 py-4 rounded-lg shadow-lg text-white flex items-center ${
544
+ type === 'success' ? 'bg-green-500' : 'bg-red-500'
545
+ } animate__animated animate__fadeInDown`;
546
+ alert.innerHTML = `
547
+ <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} mr-3"></i>
548
+ <span>${message}</span>
549
+ `;
550
+ document.body.appendChild(alert);
551
+
552
+ setTimeout(() => {
553
+ alert.classList.add('animate__fadeOutUp');
554
+ setTimeout(() => {
555
+ alert.remove();
556
+ }, 500);
557
+ }, 3000);
558
+ }
559
+
560
+ // Toggle item purchased status
561
+ function togglePurchased(category, index) {
562
+ shoppingList[category][index].purchased = !shoppingList[category][index].purchased;
563
+ renderItems(currentCategory);
564
+ updateProgress();
565
+ saveShoppingList();
566
+ }
567
+
568
+ // Update item quantity
569
+ function updateQuantity(category, index, value) {
570
+ shoppingList[category][index].quantity = parseInt(value) || 0;
571
+ saveShoppingList();
572
+ }
573
+
574
+ // Add custom item
575
+ function addCustomItem() {
576
+ const itemName = prompt("Enter the name of the item you want to add:");
577
+ if (itemName && itemName.trim() !== '') {
578
+ shoppingList[currentCategory].push({
579
+ name: itemName.trim(),
580
+ quantity: 1,
581
+ purchased: false,
582
+ timing: "before",
583
+ priority: "medium"
584
+ });
585
+ renderItems(currentCategory);
586
+ updateProgress();
587
+ saveShoppingList();
588
+ showAlert(`${itemName.trim()} added to your list!`, 'success');
589
+ }
590
+ }
591
+
592
+ // Remove item
593
+ function removeItem(category, index) {
594
+ if (confirm("Are you sure you want to remove this item?")) {
595
+ const removedItem = shoppingList[category][index].name;
596
+ shoppingList[category].splice(index, 1);
597
+ renderItems(currentCategory);
598
+ updateProgress();
599
+ saveShoppingList();
600
+ showAlert(`${removedItem} removed from your list`, 'success');
601
+ }
602
+ }
603
+
604
+ // Show category items
605
+ function showCategory(category) {
606
+ currentCategory = category;
607
+
608
+ // Update active category button
609
+ document.querySelectorAll('.category-btn').forEach(btn => {
610
+ btn.classList.remove('active-category');
611
+ btn.classList.remove('bg-blue-50', 'text-blue-600');
612
+ btn.classList.remove('bg-pink-50', 'text-pink-600');
613
+ btn.classList.remove('bg-yellow-50', 'text-yellow-600');
614
+ btn.classList.remove('bg-green-50', 'text-green-600');
615
+ btn.classList.remove('bg-indigo-50', 'text-indigo-600');
616
+ btn.classList.remove('bg-red-50', 'text-red-600');
617
+ btn.classList.remove('bg-purple-50', 'text-purple-600');
618
+ });
619
+
620
+ // Add appropriate color classes based on category
621
+ const activeBtn = document.querySelector(`.category-btn[data-category="${category}"]`);
622
+ activeBtn.classList.add('active-category');
623
+
624
+ switch(category) {
625
+ case 'nursery': activeBtn.classList.add('bg-blue-50', 'text-blue-600'); break;
626
+ case 'clothing': activeBtn.classList.add('bg-pink-50', 'text-pink-600'); break;
627
+ case 'feeding': activeBtn.classList.add('bg-yellow-50', 'text-yellow-600'); break;
628
+ case 'diapering': activeBtn.classList.add('bg-green-50', 'text-green-600'); break;
629
+ case 'bathing': activeBtn.classList.add('bg-indigo-50', 'text-indigo-600'); break;
630
+ case 'health': activeBtn.classList.add('bg-red-50', 'text-red-600'); break;
631
+ case 'travel': activeBtn.classList.add('bg-purple-50', 'text-purple-600'); break;
632
+ }
633
+
634
+ // Update category title and description
635
+ let categoryTitle = '';
636
+ switch(category) {
637
+ case 'nursery': categoryTitle = 'Nursery Items'; break;
638
+ case 'clothing': categoryTitle = 'Clothing Items'; break;
639
+ case 'feeding': categoryTitle = 'Feeding Items'; break;
640
+ case 'diapering': categoryTitle = 'Diapering Items'; break;
641
+ case 'bathing': categoryTitle = 'Bathing Items'; break;
642
+ case 'health': categoryTitle = 'Health & Safety Items'; break;
643
+ case 'travel': categoryTitle = 'Travel Items'; break;
644
+ }
645
+ document.getElementById('current-category').textContent = categoryTitle;
646
+ document.getElementById('category-description').textContent = categoryDescriptions[category];
647
+
648
+ renderItems(category);
649
+ renderSuggestions();
650
+ }
651
+
652
+ // Render items for a category
653
+ function renderItems(category) {
654
+ const container = document.getElementById('items-container');
655
+ const filterTiming = document.getElementById('filter-timing').value;
656
+ const searchQuery = document.getElementById('search-items').value.toLowerCase();
657
+
658
+ let itemsHTML = `
659
+ <div class="mb-8">
660
+ <div class="flex justify-between items-center mb-4">
661
+ <h3 class="text-lg font-medium text-gray-800">${category.charAt(0).toUpperCase() + category.slice(1)} Checklist</h3>
662
+ <span class="text-sm text-gray-500">${shoppingList[category].length} items</span>
663
+ </div>
664
+
665
+ <div class="overflow-hidden rounded-lg border border-gray-200">
666
+ <table class="min-w-full divide-y divide-gray-200">
667
+ <thead class="bg-gray-50">
668
+ <tr>
669
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
670
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Item</th>
671
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Quantity</th>
672
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timing</th>
673
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priority</th>
674
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
675
+ </tr>
676
+ </thead>
677
+ <tbody class="bg-white divide-y divide-gray-200">
678
+ `;
679
+
680
+ const filteredItems = shoppingList[category].filter(item => {
681
+ const matchesSearch = item.name.toLowerCase().includes(searchQuery);
682
+ const matchesTiming = filterTiming === 'all' || item.timing === filterTiming;
683
+ return matchesSearch && matchesTiming;
684
+ });
685
+
686
+ if (filteredItems.length === 0) {
687
+ itemsHTML += `
688
+ <tr>
689
+ <td colspan="6" class="px-6 py-4 text-center text-gray-500">No items found</td>
690
+ </tr>
691
+ `;
692
+ } else {
693
+ filteredItems.forEach((item, index) => {
694
+ // Determine priority color
695
+ let priorityColor = '';
696
+ let priorityText = '';
697
+ switch(item.priority) {
698
+ case 'high':
699
+ priorityColor = 'bg-red-100 text-red-800';
700
+ priorityText = 'High';
701
+ break;
702
+ case 'medium':
703
+ priorityColor = 'bg-yellow-100 text-yellow-800';
704
+ priorityText = 'Medium';
705
+ break;
706
+ case 'low':
707
+ priorityColor = 'bg-green-100 text-green-800';
708
+ priorityText = 'Low';
709
+ break;
710
+ }
711
+
712
+ itemsHTML += `
713
+ <tr class="${item.purchased ? 'bg-gray-50' : ''}">
714
+ <td class="px-6 py-4 whitespace-nowrap">
715
+ <span onclick="togglePurchased('${category}', ${index})" class="checkmark ${item.purchased ? 'checked' : ''}"></span>
716
+ </td>
717
+ <td class="px-6 py-4">
718
+ <div class="flex items-center">
719
+ <div class="text-sm font-medium ${item.purchased ? 'text-gray-400 line-through' : 'text-gray-900'}">${item.name}</div>
720
+ </div>
721
+ </td>
722
+ <td class="px-6 py-4 whitespace-nowrap">
723
+ <input type="number" min="1" value="${item.quantity}"
724
+ onchange="updateQuantity('${category}', ${index}, this.value)"
725
+ class="w-16 px-2 py-1 border border-gray-200 rounded focus:ring-0 focus:border-purple-500 custom-number-input">
726
+ </td>
727
+ <td class="px-6 py-4 whitespace-nowrap">
728
+ <span class="px-2 py-1 text-xs rounded-full ${item.timing === 'before' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}">
729
+ ${item.timing === 'before' ? 'Before' : 'After'}
730
+ </span>
731
+ </td>
732
+ <td class="px-6 py-4 whitespace-nowrap">
733
+ <span class="px-2 py-1 text-xs rounded-full ${priorityColor}">
734
+ ${priorityText}
735
+ </span>
736
+ </td>
737
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
738
+ <button onclick="removeItem('${category}', ${index})" class="text-red-600 hover:text-red-900">
739
+ <i class="fas fa-trash-alt"></i>
740
+ </button>
741
+ </td>
742
+ </tr>
743
+ `;
744
+ });
745
+ }
746
+
747
+ itemsHTML += `
748
+ </tbody>
749
+ </table>
750
+ </div>
751
+ </div>
752
+ <button onclick="addCustomItem()" class="w-full bg-gray-50 hover:bg-gray-100 border-2 border-dashed border-gray-300 text-gray-600 px-4 py-6 rounded-lg flex flex-col items-center transition">
753
+ <i class="fas fa-plus-circle text-2xl mb-2"></i>
754
+ <span>Add Custom Item</span>
755
+ </button>
756
+ `;
757
+
758
+ container.innerHTML = itemsHTML;
759
+ }
760
+
761
+ // Render suggested items
762
+ function renderSuggestions() {
763
+ const container = document.getElementById('suggestions-container');
764
+ let suggestionsHTML = '';
765
+
766
+ // Filter suggestions for current category
767
+ const categorySuggestions = suggestedItems.filter(item => item.category === currentCategory);
768
+
769
+ if (categorySuggestions.length === 0) {
770
+ suggestionsHTML = `
771
+ <div class="col-span-3 text-center py-8">
772
+ <i class="fas fa-lightbulb text-3xl text-yellow-400 mb-3"></i>
773
+ <p class="text-gray-500">No suggestions for this category</p>
774
+ </div>
775
+ `;
776
+ } else {
777
+ categorySuggestions.forEach((item, index) => {
778
+ suggestionsHTML += `
779
+ <div class="suggestion-card bg-white rounded-lg p-5 flex flex-col">
780
+ <div class="flex items-center mb-3">
781
+ <div class="${item.color} w-10 h-10 rounded-full flex items-center justify-center mr-3">
782
+ <i class="${item.icon}"></i>
783
+ </div>
784
+ <h4 class="font-medium text-gray-800">${item.name}</h4>
785
+ </div>
786
+ <div class="mt-auto flex justify-between items-center">
787
+ <span class="text-xs px-2 py-1 rounded-full ${item.timing === 'before' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800'}">
788
+ ${item.timing === 'before' ? 'Before hospital' : 'After hospital'}
789
+ </span>
790
+ <button onclick="addSuggestedItem(${index})" class="text-sm bg-white border border-purple-200 hover:bg-purple-50 text-purple-600 px-3 py-1 rounded-lg flex items-center">
791
+ <i class="fas fa-plus mr-1"></i> Add
792
+ </button>
793
+ </div>
794
+ </div>
795
+ `;
796
+ });
797
+ }
798
+
799
+ container.innerHTML = suggestionsHTML;
800
+ }
801
+
802
+ // Add suggested item to the list
803
+ function addSuggestedItem(index) {
804
+ const item = suggestedItems[index];
805
+ shoppingList[item.category].push({
806
+ name: item.name,
807
+ quantity: 1,
808
+ purchased: false,
809
+ timing: item.timing,
810
+ priority: "medium"
811
+ });
812
+ renderItems(currentCategory);
813
+ updateProgress();
814
+ saveShoppingList();
815
+ showAlert(`${item.name} added to your list!`, 'success');
816
+ }
817
+
818
+ // Update progress bar
819
+ function updateProgress() {
820
+ let totalItems = 0;
821
+ let completedItems = 0;
822
+
823
+ // Calculate totals across all categories
824
+ Object.values(shoppingList).forEach(category => {
825
+ category.forEach(item => {
826
+ totalItems++;
827
+ if (item.purchased) completedItems++;
828
+ });
829
+ });
830
+
831
+ const percentage = totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0;
832
+
833
+ document.getElementById('progress-percentage').textContent = `${percentage}%`;
834
+ document.getElementById('progress-fill').style.width = `${percentage}%`;
835
+ document.getElementById('items-completed').textContent = `${completedItems} items completed`;
836
+ document.getElementById('items-total').textContent = `${totalItems} total items`;
837
+ }
838
+
839
+ // Print the list as PDF
840
+ function printList() {
841
+ const { jsPDF } = window.jspdf;
842
+ const doc = new jsPDF();
843
+
844
+ // Add title
845
+ doc.setFontSize(24);
846
+ doc.setTextColor(59, 130, 246);
847
+ doc.text('Newborn Baby Shopping List', 105, 20, { align: 'center' });
848
+
849
+ // Add subtitle
850
+ doc.setFontSize(14);
851
+ doc.setTextColor(100, 116, 139);
852
+ doc.text('Everything you need for your little one', 105, 30, { align: 'center' });
853
+
854
+ // Add date
855
+ doc.setFontSize(10);
856
+ doc.setTextColor(100, 116, 139);
857
+ doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 105, 38, { align: 'center' });
858
+
859
+ // Add progress
860
+ const progress = document.getElementById('progress-percentage').textContent;
861
+ doc.setTextColor(59, 130, 246);
862
+ doc.text(`Preparation Progress: ${progress}`, 105, 46, { align: 'center' });
863
+
864
+ let yPosition = 60;
865
+
866
+ // Add items by category
867
+ Object.entries(shoppingList).forEach(([category, items]) => {
868
+ if (items.length > 0) {
869
+ // Category header
870
+ doc.setFontSize(16);
871
+ doc.setTextColor(15, 23, 42);
872
+ doc.text(category.charAt(0).toUpperCase() + category.slice(1) + ':', 15, yPosition);
873
+ yPosition += 8;
874
+
875
+ // Add line
876
+ doc.setDrawColor(226, 232, 240);
877
+ doc.setLineWidth(0.5);
878
+ doc.line(15, yPosition, 195, yPosition);
879
+ yPosition += 5;
880
+
881
+ // Items
882
+ doc.setFontSize(12);
883
+ items.forEach(item => {
884
+ if (yPosition > 280) {
885
+ doc.addPage();
886
+ yPosition = 20;
887
+ }
888
+
889
+ doc.setTextColor(item.purchased ? 148, 163, 184 : 15, 23, 42);
890
+ const status = item.purchased ? '✓ Purchased' : '○ Needed';
891
+
892
+ // Item name and status
893
+ doc.text(`- ${item.name}`, 20, yPosition);
894
+ doc.text(status, 180, yPosition, { align: 'right' });
895
+ yPosition += 5;
896
+
897
+ // Quantity and timing
898
+ doc.text(` Qty: ${item.quantity} | Timing: ${item.timing === 'before' ? 'Before hospital' : 'After hospital'}`, 20, yPosition);
899
+ yPosition += 5;
900
+
901
+ // Priority
902
+ doc.text(` Priority: ${item.priority}`, 20, yPosition);
903
+ yPosition += 8;
904
+ });
905
+
906
+ yPosition += 5;
907
+ }
908
+ });
909
+
910
+ // Add footer
911
+ doc.setFontSize(10);
912
+ doc.setTextColor(100, 116, 139);
913
+ doc.text('Generated by Newborn Baby Shopping List - www.babyshoppinglist.com', 105, 290, { align: 'center' });
914
+
915
+ // Save the PDF
916
+ doc.save('newborn-shopping-list.pdf');
917
+ }
918
+
919
+ // Save the list
920
+ function saveList() {
921
+ saveShoppingList();
922
+ }
923
+
924
+ // Initialize the page
925
+ document.addEventListener('DOMContentLoaded', () => {
926
+ loadShoppingList();
927
+ showCategory('nursery');
928
+ updateProgress();
929
+
930
+ // Add event listeners for search and filter
931
+ document.getElementById('search-items').addEventListener('input', () => {
932
+ renderItems(currentCategory);
933
+ });
934
+
935
+ document.getElementById('filter-timing').addEventListener('change', () => {
936
+ renderItems(currentCategory);
937
+ });
938
+ });
939
+ </script>
940
+ <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=davidkkkk/baby" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
941
+ </html>