Hugging Face's logo

Spaces:
Jinny
/
omega3-needs-for-pets
Running

App Files Community
Jinny commited on
Commit
0e43d17
·
verified ·
1 Parent(s): 219757a

设计一个宠物补充Omega3含量的趣味“计算器” - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +366 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Omega3 Needs For Pets
3
- emoji: 🌖
4
- colorFrom: indigo
5
- colorTo: gray
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: omega3-needs-for-pets
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
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,366 @@
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>Pawsome Omega-3 Calculator</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
+ .fish-bg {
11
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M80,50c0,0-15,10-30,0S20,30,20,50s10,20,30,10S80,50,80,50z" fill="%23fbbf24" opacity="0.1"/></svg>');
12
+ background-size: 200px;
13
+ background-repeat: repeat;
14
+ }
15
+
16
+ .wave {
17
+ position: relative;
18
+ }
19
+
20
+ .wave::after {
21
+ content: "";
22
+ position: absolute;
23
+ bottom: -10px;
24
+ left: 0;
25
+ width: 100%;
26
+ height: 20px;
27
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23fbbf24" fill-opacity="0.2" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
28
+ background-size: cover;
29
+ }
30
+
31
+ @keyframes swim {
32
+ 0% { transform: translateX(0) rotate(0deg); }
33
+ 50% { transform: translateX(20px) rotate(5deg); }
34
+ 100% { transform: translateX(0) rotate(0deg); }
35
+ }
36
+
37
+ .swimming {
38
+ animation: swim 3s ease-in-out infinite;
39
+ }
40
+
41
+ .bubble {
42
+ position: absolute;
43
+ background-color: rgba(255, 255, 255, 0.6);
44
+ border-radius: 50%;
45
+ animation: float 4s ease-in-out infinite;
46
+ }
47
+
48
+ @keyframes float {
49
+ 0% { transform: translateY(0) scale(1); opacity: 0.6; }
50
+ 50% { transform: translateY(-20px) scale(1.1); opacity: 0.8; }
51
+ 100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
52
+ }
53
+ </style>
54
+ </head>
55
+ <body class="min-h-screen bg-amber-50 fish-bg flex flex-col items-center justify-center p-4">
56
+ <div class="max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden">
57
+ <!-- Header with fish icon -->
58
+ <div class="bg-amber-400 wave p-6 text-center relative">
59
+ <div class="absolute top-4 left-6 swimming">
60
+ <i class="fas fa-fish text-white text-3xl"></i>
61
+ </div>
62
+ <h1 class="text-3xl md:text-4xl font-bold text-white drop-shadow-md">Pawsome Omega-3 Calculator</h1>
63
+ <p class="text-amber-100 mt-2">Find the perfect dose for your furry friend!</p>
64
+ </div>
65
+
66
+ <!-- Calculator form -->
67
+ <div class="p-6 md:p-8">
68
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
69
+ <!-- Pet type selection -->
70
+ <div class="space-y-2">
71
+ <label class="block text-amber-800 font-medium">Pet Type</label>
72
+ <div class="flex space-x-4">
73
+ <button id="dog-btn" class="pet-type-btn active bg-amber-100 border-amber-400 text-amber-800">
74
+ <i class="fas fa-dog mr-2"></i> Dog
75
+ </button>
76
+ <button id="cat-btn" class="pet-type-btn bg-gray-100 border-gray-300 text-gray-700">
77
+ <i class="fas fa-cat mr-2"></i> Cat
78
+ </button>
79
+ </div>
80
+ </div>
81
+
82
+ <!-- Weight input -->
83
+ <div class="space-y-2">
84
+ <label for="weight" class="block text-amber-800 font-medium">Weight</label>
85
+ <div class="relative">
86
+ <input type="number" id="weight" min="1" max="200" class="w-full p-3 border-2 border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-400 focus:border-transparent" placeholder="Enter weight">
87
+ <div class="absolute right-3 top-3 text-gray-500">
88
+ <span id="weight-unit">kg</span>
89
+ <button id="toggle-unit" class="ml-1 text-amber-600 hover:text-amber-800">
90
+ <i class="fas fa-exchange-alt"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Activity level -->
97
+ <div class="space-y-2">
98
+ <label class="block text-amber-800 font-medium">Activity Level</label>
99
+ <select id="activity" class="w-full p-3 border-2 border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-400 focus:border-transparent">
100
+ <option value="low">Couch potato</option>
101
+ <option value="medium" selected>Moderately active</option>
102
+ <option value="high">Very active</option>
103
+ </select>
104
+ </div>
105
+
106
+ <!-- Omega-3 source -->
107
+ <div class="space-y-2">
108
+ <label class="block text-amber-800 font-medium">Omega-3 Source</label>
109
+ <select id="source" class="w-full p-3 border-2 border-amber-200 rounded-lg focus:ring-2 focus:ring-amber-400 focus:border-transparent">
110
+ <option value="fishOil">Fish Oil</option>
111
+ <option value="algae">Algae Oil</option>
112
+ <option value="flaxseed">Flaxseed</option>
113
+ <option value="krill">Krill Oil</option>
114
+ </select>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Calculate button -->
119
+ <button id="calculate-btn" class="w-full mt-8 py-4 bg-amber-500 hover:bg-amber-600 text-white font-bold rounded-xl shadow-md transition duration-300 flex items-center justify-center">
120
+ <i class="fas fa-calculator mr-3"></i> Calculate Omega-3 Needs
121
+ </button>
122
+ </div>
123
+
124
+ <!-- Results section (initially hidden) -->
125
+ <div id="results" class="hidden bg-amber-50 p-6 border-t-2 border-amber-200">
126
+ <div class="flex justify-between items-center mb-4">
127
+ <h2 class="text-xl font-bold text-amber-900">Results</h2>
128
+ <button id="reset-btn" class="text-amber-600 hover:text-amber-800">
129
+ <i class="fas fa-redo mr-1"></i> Reset
130
+ </button>
131
+ </div>
132
+
133
+ <div class="bg-white p-6 rounded-xl shadow-sm">
134
+ <div class="flex items-center mb-4">
135
+ <div class="mr-4 text-4xl text-amber-500">
136
+ <i id="result-pet-icon" class="fas fa-dog"></i>
137
+ </div>
138
+ <div>
139
+ <h3 id="result-pet-type" class="font-bold text-lg">Dog</h3>
140
+ <p id="result-weight" class="text-gray-600">Weight: 10 kg</p>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
145
+ <div class="bg-amber-100 p-4 rounded-lg text-center">
146
+ <div class="text-amber-800 font-bold text-sm mb-1">Daily EPA+DHA</div>
147
+ <div id="epa-dha" class="text-2xl font-bold text-amber-600">500 mg</div>
148
+ </div>
149
+ <div class="bg-amber-100 p-4 rounded-lg text-center">
150
+ <div class="text-amber-800 font-bold text-sm mb-1">Source Amount</div>
151
+ <div id="source-amount" class="text-2xl font-bold text-amber-600">1 tsp</div>
152
+ </div>
153
+ <div class="bg-amber-100 p-4 rounded-lg text-center">
154
+ <div class="text-amber-800 font-bold text-sm mb-1">Weekly Total</div>
155
+ <div id="weekly-total" class="text-2xl font-bold text-amber-600">3.5 g</div>
156
+ </div>
157
+ </div>
158
+
159
+ <div class="mt-6 bg-blue-50 p-4 rounded-lg border border-blue-100">
160
+ <h4 class="font-bold text-blue-800 flex items-center">
161
+ <i class="fas fa-lightbulb mr-2 text-yellow-500"></i> Pro Tip
162
+ </h4>
163
+ <p id="pro-tip" class="text-blue-700 mt-1">
164
+ For best results, divide this amount into two daily servings with meals.
165
+ </p>
166
+ </div>
167
+
168
+ <div class="mt-6">
169
+ <h4 class="font-bold text-amber-800 mb-2">Suggested Products</h4>
170
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
171
+ <div class="bg-white border border-amber-200 rounded-lg p-2 text-center hover:shadow-md transition cursor-pointer">
172
+ <div class="h-16 mb-2 flex items-center justify-center">
173
+ <i class="fas fa-oil-can text-3xl text-amber-500"></i>
174
+ </div>
175
+ <div class="text-xs font-medium">Salmon Oil</div>
176
+ </div>
177
+ <div class="bg-white border border-amber-200 rounded-lg p-2 text-center hover:shadow-md transition cursor-pointer">
178
+ <div class="h-16 mb-2 flex items-center justify-center">
179
+ <i class="fas fa-seedling text-3xl text-green-500"></i>
180
+ </div>
181
+ <div class="text-xs font-medium">Algae Capsules</div>
182
+ </div>
183
+ <div class="bg-white border border-amber-200 rounded-lg p-2 text-center hover:shadow-md transition cursor-pointer">
184
+ <div class="h-16 mb-2 flex items-center justify-center">
185
+ <i class="fas fa-capsules text-3xl text-blue-500"></i>
186
+ </div>
187
+ <div class="text-xs font-medium">Krill Softgels</div>
188
+ </div>
189
+ <div class="bg-white border border-amber-200 rounded-lg p-2 text-center hover:shadow-md transition cursor-pointer">
190
+ <div class="h-16 mb-2 flex items-center justify-center">
191
+ <i class="fas fa-fish text-3xl text-teal-500"></i>
192
+ </div>
193
+ <div class="text-xs font-medium">Sardine Treats</div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Fun bubbles in the background -->
202
+ <div id="bubbles-container" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div>
203
+
204
+ <script>
205
+ // Create bubbles
206
+ function createBubbles() {
207
+ const container = document.getElementById('bubbles-container');
208
+ for (let i = 0; i < 15; i++) {
209
+ const bubble = document.createElement('div');
210
+ bubble.classList.add('bubble');
211
+
212
+ // Random size between 5 and 15px
213
+ const size = Math.random() * 10 + 5;
214
+ bubble.style.width = `${size}px`;
215
+ bubble.style.height = `${size}px`;
216
+
217
+ // Random position
218
+ bubble.style.left = `${Math.random() * 100}%`;
219
+ bubble.style.bottom = `${Math.random() * 20}px`;
220
+
221
+ // Random animation delay
222
+ bubble.style.animationDelay = `${Math.random() * 5}s`;
223
+
224
+ container.appendChild(bubble);
225
+ }
226
+ }
227
+
228
+ // Toggle pet type
229
+ document.querySelectorAll('.pet-type-btn').forEach(btn => {
230
+ btn.addEventListener('click', function() {
231
+ document.querySelectorAll('.pet-type-btn').forEach(b => {
232
+ b.classList.remove('active', 'bg-amber-100', 'border-amber-400', 'text-amber-800');
233
+ b.classList.add('bg-gray-100', 'border-gray-300', 'text-gray-700');
234
+ });
235
+
236
+ this.classList.add('active', 'bg-amber-100', 'border-amber-400', 'text-amber-800');
237
+ this.classList.remove('bg-gray-100', 'border-gray-300', 'text-gray-700');
238
+ });
239
+ });
240
+
241
+ // Toggle weight unit
242
+ let isKg = true;
243
+ document.getElementById('toggle-unit').addEventListener('click', function() {
244
+ const weightInput = document.getElementById('weight');
245
+ const weightUnit = document.getElementById('weight-unit');
246
+
247
+ if (isKg) {
248
+ // Convert kg to lbs
249
+ if (weightInput.value) {
250
+ weightInput.value = Math.round(weightInput.value * 2.20462);
251
+ }
252
+ weightUnit.textContent = 'lbs';
253
+ } else {
254
+ // Convert lbs to kg
255
+ if (weightInput.value) {
256
+ weightInput.value = Math.round(weightInput.value / 2.20462 * 10) / 10;
257
+ }
258
+ weightUnit.textContent = 'kg';
259
+ }
260
+
261
+ isKg = !isKg;
262
+ });
263
+
264
+ // Calculate Omega-3 needs
265
+ document.getElementById('calculate-btn').addEventListener('click', function() {
266
+ const weight = parseFloat(document.getElementById('weight').value);
267
+ const isDog = document.getElementById('dog-btn').classList.contains('active');
268
+ const activity = document.getElementById('activity').value;
269
+ const source = document.getElementById('source').value;
270
+
271
+ if (!weight || weight <= 0) {
272
+ alert('Please enter a valid weight for your pet.');
273
+ return;
274
+ }
275
+
276
+ // Convert weight to kg if in lbs
277
+ const weightKg = isKg ? weight : weight / 2.20462;
278
+
279
+ // Calculate base EPA+DHA (mg per day)
280
+ let epaDha;
281
+ if (isDog) {
282
+ epaDha = weightKg * 50; // 50mg/kg for dogs
283
+ } else {
284
+ epaDha = weightKg * 30; // 30mg/kg for cats
285
+ }
286
+
287
+ // Adjust for activity level
288
+ if (activity === 'low') epaDha *= 0.8;
289
+ if (activity === 'high') epaDha *= 1.2;
290
+
291
+ // Round to nearest 50mg
292
+ epaDha = Math.round(epaDha / 50) * 50;
293
+
294
+ // Calculate source amount based on selected source
295
+ let sourceAmount, sourceText;
296
+ switch(source) {
297
+ case 'fishOil':
298
+ // Assuming fish oil contains 180mg EPA+DHA per ml
299
+ const ml = epaDha / 180;
300
+ if (ml < 1) {
301
+ sourceAmount = `${Math.round(ml * 5)} drops`; // ~20 drops per ml
302
+ } else {
303
+ sourceAmount = `${ml.toFixed(1)} ml (≈${Math.round(ml * 0.2)} tsp)`;
304
+ }
305
+ break;
306
+ case 'algae':
307
+ // Assuming algae oil capsules contain 200mg DHA per capsule
308
+ sourceAmount = `${Math.ceil(epaDha / 200)} capsules`;
309
+ break;
310
+ case 'flaxseed':
311
+ // Assuming ground flaxseed contains 2.3g ALA per tbsp (which converts to EPA/DHA at ~5% rate)
312
+ sourceAmount = `${Math.ceil(epaDha / 2300 * 20)} tsp ground flaxseed`;
313
+ break;
314
+ case 'krill':
315
+ // Assuming krill oil contains 90mg EPA+DHA per 500mg capsule
316
+ sourceAmount = `${Math.ceil(epaDha / 90)} capsules`;
317
+ break;
318
+ }
319
+
320
+ // Set results
321
+ document.getElementById('result-pet-type').textContent = isDog ? 'Dog' : 'Cat';
322
+ document.getElementById('result-pet-icon').className = isDog ? 'fas fa-dog' : 'fas fa-cat';
323
+ document.getElementById('result-weight').textContent = `Weight: ${weight.toFixed(1)} ${isKg ? 'kg' : 'lbs'}`;
324
+ document.getElementById('epa-dha').textContent = `${epaDha} mg`;
325
+ document.getElementById('source-amount').textContent = sourceAmount;
326
+ document.getElementById('weekly-total').textContent = `${(epaDha * 7 / 1000).toFixed(1)} g`;
327
+
328
+ // Set pro tip based on source
329
+ let proTip;
330
+ switch(source) {
331
+ case 'fishOil':
332
+ proTip = "Mix the fish oil with your pet's food for better absorption and to mask the taste.";
333
+ break;
334
+ case 'algae':
335
+ proTip = "Algae oil is great for vegetarian pets. You can open capsules and mix with food.";
336
+ break;
337
+ case 'flaxseed':
338
+ proTip = "Always use ground flaxseed for better absorption. Store in the fridge to prevent rancidity.";
339
+ break;
340
+ case 'krill':
341
+ proTip = "Krill oil contains astaxanthin, a powerful antioxidant that gives it a natural red color.";
342
+ break;
343
+ }
344
+ document.getElementById('pro-tip').textContent = proTip;
345
+
346
+ // Show results
347
+ document.getElementById('results').classList.remove('hidden');
348
+
349
+ // Scroll to results
350
+ document.getElementById('results').scrollIntoView({ behavior: 'smooth' });
351
+ });
352
+
353
+ // Reset form
354
+ document.getElementById('reset-btn').addEventListener('click', function() {
355
+ document.getElementById('weight').value = '';
356
+ document.getElementById('dog-btn').click();
357
+ document.getElementById('activity').value = 'medium';
358
+ document.getElementById('source').value = 'fishOil';
359
+ document.getElementById('results').classList.add('hidden');
360
+ });
361
+
362
+ // Initialize
363
+ createBubbles();
364
+ </script>
365
+ <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=Jinny/omega3-needs-for-pets" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
366
+ </html>