Hugging Face's logo

Spaces:
HenryShan
/
pets
Running

App Files Community
HenryShan commited on
Commit
d78fefd
·
verified ·
1 Parent(s): 13dd309

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +479 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Pets
3
- emoji: 🦀
4
- colorFrom: green
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: pets
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: pink
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,479 @@
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>Paws & Harmony - TCM Pet Therapy Advisor</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .pet-image-upload::file-selector-button {
14
+ display: none;
15
+ }
16
+ .pet-image-upload::-webkit-file-upload-button {
17
+ display: none;
18
+ }
19
+ .scrollbar-hide::-webkit-scrollbar {
20
+ display: none;
21
+ }
22
+ .scrollbar-hide {
23
+ -ms-overflow-style: none;
24
+ scrollbar-width: none;
25
+ }
26
+ @keyframes pulse {
27
+ 0%, 100% {
28
+ opacity: 1;
29
+ }
30
+ 50% {
31
+ opacity: 0.5;
32
+ }
33
+ }
34
+ .animate-pulse-slow {
35
+ animation: pulse 3s infinite;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="gradient-bg min-h-screen font-sans">
40
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
41
+ <!-- Header -->
42
+ <header class="flex flex-col md:flex-row justify-between items-center mb-12">
43
+ <div class="flex items-center mb-4 md:mb-0">
44
+ <div class="bg-amber-100 p-3 rounded-full mr-4">
45
+ <i class="fas fa-paw text-amber-600 text-2xl"></i>
46
+ </div>
47
+ <div>
48
+ <h1 class="text-3xl font-bold text-gray-800">Paws & Harmony</h1>
49
+ <p class="text-gray-600">Traditional Chinese Medicine for Pets</p>
50
+ </div>
51
+ </div>
52
+ <div class="bg-white rounded-lg shadow-md p-4 flex items-center">
53
+ <div class="mr-3 text-green-500">
54
+ <i class="fas fa-shield-alt text-xl"></i>
55
+ </div>
56
+ <div>
57
+ <p class="text-sm font-medium text-gray-700">Safety First Approach</p>
58
+ <p class="text-xs text-gray-500">Always consult your vet for emergencies</p>
59
+ </div>
60
+ </div>
61
+ </header>
62
+
63
+ <!-- Main Content -->
64
+ <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
65
+ <!-- Input Section -->
66
+ <div class="lg:col-span-1 bg-white rounded-xl shadow-lg overflow-hidden">
67
+ <div class="bg-amber-500 px-6 py-4">
68
+ <h2 class="text-xl font-bold text-white">Pet Health Assessment</h2>
69
+ </div>
70
+ <div class="p-6">
71
+ <form id="petForm">
72
+ <!-- Basic Info -->
73
+ <div class="mb-6">
74
+ <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
75
+ <i class="fas fa-info-circle text-amber-500 mr-2"></i>
76
+ Basic Information
77
+ </h3>
78
+ <div class="space-y-4">
79
+ <div>
80
+ <label class="block text-sm font-medium text-gray-700 mb-1">Pet Type</label>
81
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
82
+ <option value="">Select</option>
83
+ <option value="dog">Dog</option>
84
+ <option value="cat">Cat</option>
85
+ <option value="other">Other</option>
86
+ </select>
87
+ </div>
88
+ <div>
89
+ <label class="block text-sm font-medium text-gray-700 mb-1">Breed</label>
90
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" placeholder="e.g. Golden Retriever" required>
91
+ </div>
92
+ <div class="grid grid-cols-2 gap-4">
93
+ <div>
94
+ <label class="block text-sm font-medium text-gray-700 mb-1">Age (years)</label>
95
+ <input type="number" min="0" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
96
+ </div>
97
+ <div>
98
+ <label class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label>
99
+ <input type="number" min="0" step="0.1" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" required>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Symptoms -->
106
+ <div class="mb-6">
107
+ <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
108
+ <i class="fas fa-notes-medical text-amber-500 mr-2"></i>
109
+ Symptoms & Concerns
110
+ </h3>
111
+ <div class="space-y-4">
112
+ <div>
113
+ <label class="block text-sm font-medium text-gray-700 mb-1">Primary Symptoms</label>
114
+ <select multiple class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500 h-auto" size="5">
115
+ <option value="digestive">Digestive issues</option>
116
+ <option value="skin">Skin problems</option>
117
+ <option value="energy">Low energy</option>
118
+ <option value="anxiety">Anxiety/Stress</option>
119
+ <option value="joint">Joint pain</option>
120
+ <option value="appetite">Appetite changes</option>
121
+ <option value="sleep">Sleep disturbances</option>
122
+ </select>
123
+ </div>
124
+ <div>
125
+ <label class="block text-sm font-medium text-gray-700 mb-1">Duration</label>
126
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
127
+ <option value="">Select duration</option>
128
+ <option value="acute">Less than 1 week</option>
129
+ <option value="subacute">1-4 weeks</option>
130
+ <option value="chronic">More than 4 weeks</option>
131
+ </select>
132
+ </div>
133
+ <div>
134
+ <label class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label>
135
+ <textarea class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500" rows="2" placeholder="Describe symptoms in detail..."></textarea>
136
+ </div>
137
+ </div>
138
+ </div>
139
+
140
+ <!-- TCM Observations -->
141
+ <div class="mb-6">
142
+ <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
143
+ <i class="fas fa-eye text-amber-500 mr-2"></i>
144
+ TCM Observations
145
+ </h3>
146
+ <div class="space-y-4">
147
+ <div>
148
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tongue Appearance</label>
149
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
150
+ <option value="">Select tongue appearance</option>
151
+ <option value="pale">Pale</option>
152
+ <option value="red">Red</option>
153
+ <option value="purple">Purple</option>
154
+ <option value="coated">White coating</option>
155
+ <option value="yellow-coated">Yellow coating</option>
156
+ </select>
157
+ </div>
158
+ <div>
159
+ <label class="block text-sm font-medium text-gray-700 mb-1">Coat Condition</label>
160
+ <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-amber-500 focus:border-amber-500">
161
+ <option value="">Select coat condition</option>
162
+ <option value="dry">Dry/flaky</option>
163
+ <option value="greasy">Greasy</option>
164
+ <option value="dull">Dull</option>
165
+ <option value="normal">Normal</option>
166
+ </select>
167
+ </div>
168
+ <div>
169
+ <label class="block text-sm font-medium text-gray-700 mb-1">Upload Images</label>
170
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg">
171
+ <div class="space-y-1 text-center">
172
+ <div class="flex text-sm text-gray-600">
173
+ <label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-amber-600 hover:text-amber-500 focus-within:outline-none">
174
+ <span>Upload files</span>
175
+ <input id="file-upload" name="file-upload" type="file" class="pet-image-upload sr-only" multiple>
176
+ </label>
177
+ <p class="pl-1">or drag and drop</p>
178
+ </div>
179
+ <p class="text-xs text-gray-500">Tongue, skin, or full body images</p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Submit Button -->
187
+ <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
188
+ <i class="fas fa-leaf mr-2"></i>
189
+ Get TCM Recommendations
190
+ </button>
191
+ </form>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Results Section -->
196
+ <div class="lg:col-span-2 space-y-6">
197
+ <!-- Emergency Alert (Hidden by default) -->
198
+ <div id="emergencyAlert" class="hidden bg-red-50 border-l-4 border-red-500 p-4">
199
+ <div class="flex">
200
+ <div class="flex-shrink-0">
201
+ <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i>
202
+ </div>
203
+ <div class="ml-3">
204
+ <h3 class="text-sm font-medium text-red-800">Alert: Consult a vet immediately</h3>
205
+ <div class="mt-2 text-sm text-red-700">
206
+ <p id="emergencyMessage"></p>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Diagnosis Card -->
213
+ <div id="diagnosisCard" class="hidden bg-white rounded-xl shadow-lg overflow-hidden">
214
+ <div class="bg-green-500 px-6 py-4">
215
+ <h2 class="text-xl font-bold text-white">TCM Diagnosis</h2>
216
+ </div>
217
+ <div class="p-6">
218
+ <div class="mb-4">
219
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Pattern Identification</h3>
220
+ <div class="bg-green-50 border border-green-200 rounded-lg p-4">
221
+ <div class="flex">
222
+ <div class="flex-shrink-0">
223
+ <i class="fas fa-diagnoses text-green-500 mt-1"></i>
224
+ </div>
225
+ <div class="ml-3">
226
+ <p id="tcmPattern" class="text-sm text-gray-700"></p>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div>
232
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Modern Context</h3>
233
+ <p id="modernContext" class="text-gray-700"></p>
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <!-- Treatment Plan -->
239
+ <div id="treatmentPlan" class="hidden bg-white rounded-xl shadow-lg overflow-hidden">
240
+ <div class="bg-blue-500 px-6 py-4">
241
+ <h2 class="text-xl font-bold text-white">Treatment Plan</h2>
242
+ </div>
243
+ <div class="p-6">
244
+ <!-- Diet -->
245
+ <div class="mb-6">
246
+ <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
247
+ <i class="fas fa-utensils text-blue-500 mr-2"></i>
248
+ Dietary Recommendations
249
+ </h3>
250
+ <div id="dietRecommendations" class="space-y-3"></div>
251
+ </div>
252
+
253
+ <!-- Herbs -->
254
+ <div class="mb-6">
255
+ <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
256
+ <i class="fas fa-seedling text-blue-500 mr-2"></i>
257
+ Herbal Support
258
+ </h3>
259
+ <div id="herbRecommendations" class="space-y-3"></div>
260
+ </div>
261
+
262
+ <!-- Massage -->
263
+ <div class="mb-6">
264
+ <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
265
+ <i class="fas fa-hand-holding-heart text-blue-500 mr-2"></i>
266
+ Massage & Acupressure
267
+ </h3>
268
+ <div id="massageRecommendations" class="space-y-3"></div>
269
+ </div>
270
+
271
+ <!-- Lifestyle -->
272
+ <div>
273
+ <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
274
+ <i class="fas fa-home text-blue-500 mr-2"></i>
275
+ Lifestyle Adjustments
276
+ </h3>
277
+ <div id="lifestyleRecommendations" class="space-y-3"></div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Monitoring -->
283
+ <div id="monitoringCard" class="hidden bg-white rounded-xl shadow-lg overflow-hidden">
284
+ <div class="bg-purple-500 px-6 py-4">
285
+ <h2 class="text-xl font-bold text-white">Monitoring & Follow-up</h2>
286
+ </div>
287
+ <div class="p-6">
288
+ <div class="flex">
289
+ <div class="flex-shrink-0">
290
+ <i class="fas fa-clock text-purple-500 mt-1"></i>
291
+ </div>
292
+ <div class="ml-3">
293
+ <p id="monitoringInstructions" class="text-gray-700"></p>
294
+ </div>
295
+ </div>
296
+ <div class="mt-4 bg-purple-50 border border-purple-200 rounded-lg p-4">
297
+ <h3 class="text-sm font-medium text-purple-800 mb-2">When to seek veterinary care:</h3>
298
+ <ul id="vetCareList" class="list-disc pl-5 text-sm text-purple-700 space-y-1"></ul>
299
+ </div>
300
+ </div>
301
+ </div>
302
+
303
+ <!-- Empty State -->
304
+ <div id="emptyState" class="bg-white rounded-xl shadow-lg overflow-hidden">
305
+ <div class="p-12 text-center">
306
+ <div class="mx-auto flex items-center justify-center h-24 w-24 rounded-full bg-amber-100 mb-6">
307
+ <i class="fas fa-paw text-amber-500 text-4xl"></i>
308
+ </div>
309
+ <h3 class="text-lg font-medium text-gray-900 mb-2">Complete the assessment</h3>
310
+ <p class="mt-1 text-sm text-gray-500">Fill out the pet health assessment form to receive personalized TCM recommendations.</p>
311
+ <div class="mt-6 animate-pulse-slow">
312
+ <i class="fas fa-arrow-down text-amber-500 text-2xl"></i>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </main>
318
+
319
+ <!-- Disclaimer -->
320
+ <footer class="mt-12 text-center text-xs text-gray-500">
321
+ <p class="mb-2">Disclaimer: This information is for educational purposes only and is not a substitute for professional veterinary advice.</p>
322
+ <p>Always consult with a licensed veterinarian before starting any new treatment for your pet.</p>
323
+ </footer>
324
+ </div>
325
+
326
+ <script>
327
+ document.getElementById('petForm').addEventListener('submit', function(e) {
328
+ e.preventDefault();
329
+
330
+ // Hide empty state
331
+ document.getElementById('emptyState').classList.add('hidden');
332
+
333
+ // Show emergency alert if needed (example condition)
334
+ const emergencySymptoms = ['bloody stool', 'seizures', 'difficulty breathing'];
335
+ const hasEmergency = Math.random() < 0.2; // 20% chance for demo
336
+
337
+ if (hasEmergency) {
338
+ const emergencyMessage = emergencySymptoms[Math.floor(Math.random() * emergencySymptoms.length)];
339
+ document.getElementById('emergencyMessage').textContent = `Your pet shows signs of ${emergencyMessage}, which requires immediate veterinary attention.`;
340
+ document.getElementById('emergencyAlert').classList.remove('hidden');
341
+ } else {
342
+ document.getElementById('emergencyAlert').classList.add('hidden');
343
+ }
344
+
345
+ // Generate sample TCM diagnosis
346
+ const tcmPatterns = [
347
+ "Damp-Heat accumulation in the spleen and stomach channels",
348
+ "Liver Qi stagnation with spleen deficiency",
349
+ "Kidney Yang deficiency with cold accumulation",
350
+ "Heart Fire blazing with Yin deficiency"
351
+ ];
352
+ const selectedPattern = tcmPatterns[Math.floor(Math.random() * tcmPatterns.length)];
353
+ document.getElementById('tcmPattern').textContent = selectedPattern;
354
+
355
+ // Generate modern context
356
+ const modernContexts = [
357
+ "This pattern is often associated with dietary imbalances, stress, or seasonal changes. In Western terms, it may manifest as digestive upset, skin inflammation, or behavioral changes.",
358
+ "This imbalance may correlate with chronic conditions or age-related changes. Western veterinary medicine might describe this as metabolic or endocrine dysfunction.",
359
+ "This pattern frequently appears in pets with chronic stress or environmental changes. It may present similarly to anxiety disorders or immune-mediated conditions."
360
+ ];
361
+ document.getElementById('modernContext').textContent = modernContexts[Math.floor(Math.random() * modernContexts.length)];
362
+ document.getElementById('diagnosisCard').classList.remove('hidden');
363
+
364
+ // Generate treatment plan
365
+ // Diet
366
+ const dietRecommendations = [
367
+ "Cooling foods: Replace 25% of regular meals with steamed zucchini or cucumber (½ cup per 10kg body weight daily).",
368
+ "Warming foods: Add small amounts of cooked ginger (1/8 tsp per 10kg) to meals to support digestion.",
369
+ "Avoid damp-producing foods: Reduce dairy and wheat products which can exacerbate damp conditions."
370
+ ];
371
+ const dietList = document.getElementById('dietRecommendations');
372
+ dietList.innerHTML = '';
373
+ dietRecommendations.forEach(rec => {
374
+ const div = document.createElement('div');
375
+ div.className = 'flex items-start';
376
+ div.innerHTML = `
377
+ <div class="flex-shrink-0 mt-1">
378
+ <i class="fas fa-check-circle text-green-500"></i>
379
+ </div>
380
+ <div class="ml-3">
381
+ <p class="text-sm text-gray-700">${rec}</p>
382
+ </div>
383
+ `;
384
+ dietList.appendChild(div);
385
+ });
386
+
387
+ // Herbs
388
+ const herbRecommendations = [
389
+ "Astragalus root: 0.5g per 10kg body weight daily, steeped in warm water and added to food.",
390
+ "Chamomile: 1 tsp dried flowers per 20kg body weight as a calming tea (cooled before serving).",
391
+ "Licorice root: 0.3g per 10kg body weight (use deglycyrrhizinated form for long-term use)."
392
+ ];
393
+ const herbList = document.getElementById('herbRecommendations');
394
+ herbList.innerHTML = '';
395
+ herbRecommendations.forEach(rec => {
396
+ const div = document.createElement('div');
397
+ div.className = 'flex items-start';
398
+ div.innerHTML = `
399
+ <div class="flex-shrink-0 mt-1">
400
+ <i class="fas fa-check-circle text-green-500"></i>
401
+ </div>
402
+ <div class="ml-3">
403
+ <p class="text-sm text-gray-700">${rec}</p>
404
+ </div>
405
+ `;
406
+ herbList.appendChild(div);
407
+ });
408
+
409
+ // Massage
410
+ const massageRecommendations = [
411
+ "SP6 acupressure: Gently massage the inside of the hind leg, about 3 finger widths above the ankle, for 1-2 minutes daily to support digestion.",
412
+ "GV20 massage: Rub between the ears in small circles for 30 seconds to 1 minute to calm the mind and reduce stress.",
413
+ "Ear massage: Gently rub the base of the ears in circular motions to support the immune system."
414
+ ];
415
+ const massageList = document.getElementById('massageRecommendations');
416
+ massageList.innerHTML = '';
417
+ massageRecommendations.forEach(rec => {
418
+ const div = document.createElement('div');
419
+ div.className = 'flex items-start';
420
+ div.innerHTML = `
421
+ <div class="flex-shrink-0 mt-1">
422
+ <i class="fas fa-check-circle text-green-500"></i>
423
+ </div>
424
+ <div class="ml-3">
425
+ <p class="text-sm text-gray-700">${rec}</p>
426
+ </div>
427
+ `;
428
+ massageList.appendChild(div);
429
+ });
430
+
431
+ // Lifestyle
432
+ const lifestyleRecommendations = [
433
+ "Environmental enrichment: Provide puzzle feeders and regular play sessions to reduce stress and support healthy Qi flow.",
434
+ "Sleep hygiene: Ensure a quiet, comfortable sleeping area away from high-traffic zones.",
435
+ "Exercise: Moderate daily walks or play sessions adjusted to your pet's energy level."
436
+ ];
437
+ const lifestyleList = document.getElementById('lifestyleRecommendations');
438
+ lifestyleList.innerHTML = '';
439
+ lifestyleRecommendations.forEach(rec => {
440
+ const div = document.createElement('div');
441
+ div.className = 'flex items-start';
442
+ div.innerHTML = `
443
+ <div class="flex-shrink-0 mt-1">
444
+ <i class="fas fa-check-circle text-green-500"></i>
445
+ </div>
446
+ <div class="ml-3">
447
+ <p class="text-sm text-gray-700">${rec}</p>
448
+ </div>
449
+ `;
450
+ lifestyleList.appendChild(div);
451
+ });
452
+
453
+ document.getElementById('treatmentPlan').classList.remove('hidden');
454
+
455
+ // Monitoring instructions
456
+ document.getElementById('monitoringInstructions').textContent = "Monitor your pet's response to these recommendations over the next 3-5 days. Gradual improvement is expected with TCM approaches. If symptoms worsen or new symptoms appear, discontinue and consult your veterinarian.";
457
+
458
+ const vetCarePoints = [
459
+ "Persistent vomiting or diarrhea",
460
+ "Lethargy lasting more than 24 hours",
461
+ "Loss of appetite for more than 48 hours",
462
+ "Any signs of pain or distress"
463
+ ];
464
+ const vetCareList = document.getElementById('vetCareList');
465
+ vetCareList.innerHTML = '';
466
+ vetCarePoints.forEach(point => {
467
+ const li = document.createElement('li');
468
+ li.textContent = point;
469
+ vetCareList.appendChild(li);
470
+ });
471
+
472
+ document.getElementById('monitoringCard').classList.remove('hidden');
473
+
474
+ // Scroll to results
475
+ document.getElementById('diagnosisCard').scrollIntoView({ behavior: 'smooth' });
476
+ });
477
+ </script>
478
+ <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=HenryShan/pets" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
479
+ </html>