Hugging Face's logo

Spaces:
xSerpicoxx
/
prd
Running

App Files Community
xSerpicoxx commited on
Commit
b0109f5
·
verified ·
1 Parent(s): fa67076

Crea una app web que sirva para elaborar el menú semanaluna dieta equilibrada basada en la dieta de Judy Morgan para perros. Podrá distinguir entre perros pequeños, medianos y grandes. Energía alta, media y baja. Actividad diaria alta, media y baja. Macho y hembra. Cachorro, adolescente adulto y anciano. Calculará el equilibrio de nutrientes en función de las selecciones del usuario y establecerá las recetas del menú semanal contando con eso. UI sencilla con desplegables - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +382 -299
index.html CHANGED
@@ -1,346 +1,429 @@
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>PRD Generator | Create Perfect Product Requirement Documents</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
- body, button, input, select, textarea {
11
- font-family: 'Courier New', Courier, monospace !important;
12
  }
13
-
14
- .prd-textarea {
15
- min-height: 200px;
16
- resize: none;
17
- }
18
-
19
- .sandbox {
20
- min-height: 300px;
21
- transition: all 0.3s ease;
22
- }
23
-
24
- .model-option {
25
- transition: all 0.2s ease;
26
- }
27
-
28
- .model-option:hover {
29
- transform: translateY(-3px);
30
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
31
  }
32
-
33
- .generate-btn {
34
- transition: all 0.3s ease;
35
- }
36
-
37
- .generate-btn:hover {
38
- transform: translateY(-2px);
39
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
40
- }
41
-
42
- .tab-active {
43
- border-bottom: 3px solid black;
44
- font-weight: bold;
45
- }
46
-
47
- .sandbox-output {
48
- overflow-wrap: anywhere;
49
- white-space: pre-wrap;
50
- }
51
-
52
- @media (max-width: 768px) {
53
- .provider-section {
54
- flex-direction: column;
55
- }
56
  }
57
  </style>
58
  </head>
59
- <body class="bg-white text-black antialiased">
60
- <div class="max-w-6xl mx-auto px-4 py-8">
61
- <!-- Header -->
62
- <header class="mb-12">
63
- <div class="flex flex-col md:flex-row justify-between items-center">
64
- <h1 class="text-3xl font-bold">PRD Generator</h1>
65
- <div class="mt-4 md:mt-0 flex items-center space-x-4">
66
- <button class="px-4 py-2 border border-black rounded-md">History</button>
67
- <button class="px-4 py-2 bg-black text-white rounded-md">Export</button>
68
- <button class="px-4 py-2 border border-black rounded-md">
69
- <i class="fas fa-user mr-2"></i>Account
70
- </button>
71
- </div>
72
- </div>
73
- <p class="mt-4 text-center text-gray-600 italic">
74
- Transform natural language prompts into perfect Product Requirement Documents
75
- </p>
76
  </header>
77
 
78
- <main>
79
- <!-- Provider & Model Selection -->
80
- <section class="provider-section mb-10 p-6 border border-gray-200 rounded-lg flex flex-wrap justify-between">
81
- <div class="w-full md:w-1/2 mb-6 md:mb-0 pr-0 md:pr-4">
82
- <h2 class="text-xl font-bold mb-4">AI Provider</h2>
83
- <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
84
- <div class="model-option p-4 border border-black rounded-lg text-center cursor-pointer">
85
- <i class="fas fa-brain text-3xl mb-2"></i>
86
- <h3 class="font-bold">OpenAI</h3>
87
- <p class="text-sm text-gray-600 mt-1">GPT Models</p>
88
- </div>
89
- <div class="model-option p-4 border border-gray-300 rounded-lg text-center cursor-pointer">
90
- <i class="fas fa-cloud text-3xl mb-2"></i>
91
- <h3 class="font-bold">Anthropic</h3>
92
- <p class="text-sm text-gray-600 mt-1">Claude Series</p>
93
- </div>
94
- <div class="model-option p-4 border border-gray-300 rounded-lg text-center cursor-pointer">
95
- <i class="fab fa-google text-3xl mb-2"></i>
96
- <h3 class="font-bold">Google AI</h3>
97
- <p class="text-sm text-gray-600 mt-1">PaLM Models</p>
98
- </div>
99
- </div>
100
  </div>
101
 
102
- <div class="w-full md:w-1/2 pl-0 md:pl-4">
103
- <h2 class="text-xl font-bold mb-4">Model Selection</h2>
104
- <div class="space-y-4">
105
- <div class="p-4 border border-black rounded-lg cursor-pointer">
106
- <div class="flex justify-between">
107
- <h3 class="font-bold">GPT-4</h3>
108
- <span class="text-xs bg-black text-white py-1 px-2 rounded">Recommended</span>
109
- </div>
110
- <p class="text-sm text-gray-600 mt-2">Most capable model optimized for complex PRD creation</p>
111
- </div>
112
- <div class="p-4 border border-gray-300 rounded-lg cursor-pointer">
113
- <h3 class="font-bold">GPT-3.5 Turbo</h3>
114
- <p class="text-sm text-gray-600 mt-2">Faster, lower-cost model for simple PRDs</p>
115
- </div>
116
- </div>
117
  </div>
118
- </section>
119
-
120
- <!-- Prompt Input -->
121
- <section class="mb-10">
122
- <div class="flex justify-between items-center mb-4">
123
- <h2 class="text-xl font-bold">Input Prompt</h2>
124
- <div class="text-sm">
125
- <button class="px-3 py-1 border border-black rounded-md mr-2">
126
- <i class="fas fa-magic mr-1"></i> Enhance Prompt
127
- </button>
128
- <button class="px-3 py-1 border border-black rounded-md">
129
- <i class="fas fa-history mr-1"></i> Examples
130
- </button>
131
- </div>
132
  </div>
133
- <div class="relative">
134
- <textarea
135
- id="prompt-input"
136
- class="prd-textarea w-full p-6 border border-black rounded-lg focus:outline-none focus:ring-2 focus:ring-black"
137
- placeholder="Describe what you want to build in natural language. For example: 'I need an e-commerce mobile app for handmade crafts that allows users to browse products, add to cart, and checkout securely. The app should have user profiles, reviews, and seller dashboards.'">
138
- </textarea>
139
- <div class="absolute bottom-4 right-4 text-sm text-gray-500">
140
- <span id="word-count">0</span> words
141
- </div>
 
142
  </div>
143
- </section>
144
-
145
- <!-- Generate Button -->
146
- <div class="flex justify-center my-12">
147
- <button id="generate-btn" class="generate-btn px-8 py-4 bg-black text-white text-lg font-bold rounded-lg flex items-center">
148
- <i class="fas fa-bolt mr-3"></i> Generate PRD Document
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
149
  </button>
150
  </div>
151
-
152
- <!-- Sandbox Section -->
153
- <section class="sandbox mb-16 border border-gray-200 rounded-lg">
154
- <div class="sandbox-tabs flex border-b border-gray-200">
155
- <div class="tab tab-active py-4 px-6 cursor-pointer">PRD Output</div>
156
- <div class="tab py-4 px-6 cursor-pointer">Technical Specs</div>
157
- <div class="tab py-4 px-6 cursor-pointer">User Flows</div>
158
- </div>
159
- <div class="p-6">
160
- <div class="sandbox-output min-h-[300px]">
161
- <div class="flex flex-col items-center justify-center h-full text-center py-12 text-gray-500">
162
- <i class="fas fa-file-alt text-4xl mb-4"></i>
163
- <h3 class="text-xl font-bold">Your PRD will appear here</h3>
164
- <p class="mt-2 max-w-md">Click "Generate PRD Document" to transform your natural language prompt into a structured Product Requirement Document.</p>
 
 
 
165
  </div>
166
  </div>
167
- </div>
168
- </section>
169
-
170
- <!-- Deploy Section -->
171
- <section class="mb-16 border border-black rounded-lg p-6">
172
- <h2 class="text-xl font-bold mb-6">Deploy & Share</h2>
173
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
174
- <div class="border border-gray-200 rounded-lg p-6 text-center">
175
- <i class="fas fa-code text-3xl mb-4"></i>
176
- <h3 class="font-bold text-lg mb-2">Export PRD</h3>
177
- <p class="text-sm mb-4">Download your PRD in PDF, Markdown, or Doc formats</p>
178
- <button class="px-4 py-2 border border-black rounded-md w-full">Export</button>
179
- </div>
180
- <div class="border border-gray-200 rounded-lg p-6 text-center">
181
- <i class="fas fa-share-alt text-3xl mb-4"></i>
182
- <h3 class="font-bold text-lg mb-2">Share with Team</h3>
183
- <p class="text-sm mb-4">Get feedback by sharing a live link with your team</p>
184
- <button class="px-4 py-2 border border-black rounded-md w-full">Get Share Link</button>
185
- </div>
186
- <div class="border border-gray-200 rounded-lg p-6 text-center">
187
- <i class="fas fa-rocket text-3xl mb-4"></i>
188
- <h3 class="font-bold text-lg mb-2">Deploy to Tools</h3>
189
- <p class="text-sm mb-4">Send to project management tools like Jira or Notion</p>
190
- <button class="px-4 py-2 border border-black rounded-md w-full">Connect</button>
191
- </div>
192
- </div>
193
- </section>
194
- </main>
195
-
196
- <!-- Footer -->
197
- <footer class="py-8 border-t border-gray-200 mt-8">
198
- <div class="flex flex-col md:flex-row justify-between">
199
- <div class="mb-6 md:mb-0">
200
- <h3 class="font-bold mb-2">PRD Generator</h3>
201
- <p class="text-sm max-w-sm">Transform your product ideas into structured, actionable requirement documents with AI assistance.</p>
202
- </div>
203
- <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
204
  <div>
205
- <h4 class="font-bold mb-2">Product</h4>
206
- <ul class="text-sm space-y-1">
207
- <li><a href="#" class="hover:underline">Features</a></li>
208
- <li><a href="#" class="hover:underline">Pricing</a></li>
209
- <li><a href="#" class="hover:underline">API</a></li>
210
- </ul>
 
211
  </div>
 
212
  <div>
213
- <h4 class="font-bold mb-2">Resources</h4>
214
- <ul class="text-sm space-y-1">
215
- <li><a href="#" class="hover:underline">Documentation</a></li>
216
- <li><a href="#" class="hover:underline">Blog</a></li>
217
- <li><a href="#" class="hover:underline">Community</a></li>
218
- </ul>
 
219
  </div>
 
220
  <div>
221
- <h4 class="font-bold mb-2">Company</h4>
222
- <ul class="text-sm space-y-1">
223
- <li><a href="#" class="hover:underline">About</a></li>
224
- <li><a href="#" class="hover:underline">Careers</a></li>
225
- <li><a href="#" class="hover:underline">Contact</a></li>
226
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
  </div>
228
  </div>
229
  </div>
230
- <div class="mt-8 pt-6 border-t border-gray-200 text-center text-sm">
231
- <p>© 2023 PRD Generator. All rights reserved.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
232
  </div>
 
 
 
 
 
233
  </footer>
234
  </div>
235
 
236
  <script>
237
- // Demo functionality for simulation
238
- document.getElementById('generate-btn').addEventListener('click', function() {
239
- const promptInput = document.getElementById('prompt-input').value;
240
- const sandboxOutput = document.querySelector('.sandbox-output');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
241
 
242
- if (!promptInput.trim()) {
243
- alert('Please enter a prompt before generating');
244
- return;
 
 
 
 
245
  }
246
 
247
- // Show loading state
248
- sandboxOutput.innerHTML = `
249
- <div class="flex flex-col items-center justify-center h-64 text-center py-12">
250
- <div class="w-12 h-12 border-4 border-black border-t-transparent rounded-full animate-spin mb-4"></div>
251
- <h3 class="text-xl font-bold">Generating your PRD</h3>
252
- <p class="mt-2">This usually takes 10-20 seconds...</p>
253
- </div>
254
- `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
255
 
256
- // Simulate API call with timeout
257
- setTimeout(() => {
258
- // Create sample PRD based on prompt
259
- const samplePRD = `# Product Requirement Document
260
 
261
- ## 1. Overview
262
- Based on your prompt: "${promptInput.substring(0, 100)}..."
 
 
 
 
263
 
264
- ## 2. Objectives
265
- - Create a seamless user experience for browsing and purchasing crafts
266
- - Provide secure payment processing
267
- - Enable seller management through dashboard functionality
 
 
268
 
269
- ## 3. Target Audience
270
- - Craft enthusiasts and buyers
271
- - Small-scale artisans and sellers
 
 
 
272
 
273
- ## 4. Requirements
274
- ### 4.1 User Profiles
275
- - Registration/login functionality
276
- - Wishlist management
277
- - Order history
278
-
279
- ### 4.2 Product Management
280
- - Create/update product listings
281
- - Inventory tracking
282
- - Image gallery management
283
-
284
- ### 4.3 Checkout Flow
285
- - Shopping cart functionality
286
- - Multiple payment options
287
- - Secure transactions
288
-
289
- ## 5. Technical Specifications
290
- - Mobile-first responsive design
291
- - API integration for payments
292
- - Cloud storage for product images
293
-
294
- ## 6. Success Metrics
295
- - Conversion rate
296
- - Average order value
297
- - User satisfaction (NPS)`;
298
-
299
- sandboxOutput.innerHTML = `
300
- <div class="bg-gray-50 p-6 rounded-lg">
301
- <pre class="sandbox-output whitespace-pre-wrap">${samplePRD}</pre>
302
- </div>
303
- <div class="mt-6 flex space-x-4">
304
- <button class="px-4 py-2 border border-black rounded-md flex items-center">
305
- <i class="fas fa-download mr-2"></i> Download
306
- </button>
307
- <button class="px-4 py-2 border border-black rounded-md flex items-center">
308
- <i class="fas fa-copy mr-2"></i> Copy
309
- </button>
310
- <button class="px-4 py-2 bg-black text-white rounded-md flex items-center">
311
- <i class="fas fa-redo mr-2"></i> Regenerate
312
- </button>
313
- </div>
314
- `;
315
- }, 2000);
316
- });
317
-
318
- // Word count functionality
319
- const promptInput = document.getElementById('prompt-input');
320
- const wordCount = document.getElementById('word-count');
321
-
322
- promptInput.addEventListener('input', function() {
323
- const text = promptInput.value.trim();
324
- const words = text === '' ? 0 : text.split(/\s+/).length;
325
- wordCount.textContent = words;
326
- });
327
-
328
- // Tab switching functionality
329
- const tabs = document.querySelectorAll('.tab');
330
- tabs.forEach(tab => {
331
- tab.addEventListener('click', function() {
332
- tabs.forEach(t => t.classList.remove('tab-active'));
333
- this.classList.add('tab-active');
334
- });
335
- });
336
-
337
- // Model selection functionality
338
- const modelOptions = document.querySelectorAll('.model-option');
339
- modelOptions.forEach(option => {
340
- option.addEventListener('click', function() {
341
- modelOptions.forEach(m => m.classList.replace('border-black', 'border-gray-300'));
342
- this.classList.replace('border-gray-300', 'border-black');
343
- });
344
  });
345
  </script>
346
  <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=xSerpicoxx/prd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
1
  <!DOCTYPE html>
2
+ <html lang="es">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dieta Canina Judy Morgan</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
+ .fade-in {
11
+ animation: fadeIn 0.5s ease-in-out;
12
  }
13
+ @keyframes fadeIn {
14
+ from { opacity: 0; transform: translateY(10px); }
15
+ to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
+ .nutrient-bar {
18
+ transition: width 0.5s ease-in-out;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  }
20
  </style>
21
  </head>
22
+ <body class="bg-gray-50 min-h-screen">
23
+ <div class="container mx-auto px-4 py-8 max-w-4xl">
24
+ <header class="text-center mb-8">
25
+ <h1 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">
26
+ <i class="fas fa-paw mr-2"></i>Dieta Canina Judy Morgan
27
+ </h1>
28
+ <p class="text-gray-600">Crea un menú semanal equilibrado para tu perro</p>
 
 
 
 
 
 
 
 
 
 
29
  </header>
30
 
31
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8">
32
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4">Datos de tu perro</h2>
33
+
34
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
35
+ <!-- Tamaño del perro -->
36
+ <div>
37
+ <label class="block text-gray-700 mb-2">Tamaño</label>
38
+ <select id="size" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
39
+ <option value="" disabled selected>Selecciona el tamaño</option>
40
+ <option value="small">Pequeño (1-10 kg)</option>
41
+ <option value="medium">Mediano (11-25 kg)</option>
42
+ <option value="large">Grande (26+ kg)</option>
43
+ </select>
 
 
 
 
 
 
 
 
 
44
  </div>
45
 
46
+ <!-- Edad del perro -->
47
+ <div>
48
+ <label class="block text-gray-700 mb-2">Etapa de vida</label>
49
+ <select id="age" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
50
+ <option value="" disabled selected>Selecciona la edad</option>
51
+ <option value="puppy">Cachorro (0-1 año)</option>
52
+ <option value="teen">Adolescente (1-2 años)</option>
53
+ <option value="adult">Adulto (2-7 años)</option>
54
+ <option value="senior">Anciano (7+ años)</option>
55
+ </select>
 
 
 
 
 
56
  </div>
57
+
58
+ <!-- Nivel de energía -->
59
+ <div>
60
+ <label class="block text-gray-700 mb-2">Nivel de energía</label>
61
+ <select id="energy" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
62
+ <option value="" disabled selected>Selecciona el nivel</option>
63
+ <option value="high">Alta</option>
64
+ <option value="medium">Media</option>
65
+ <option value="low">Baja</option>
66
+ </select>
 
 
 
 
67
  </div>
68
+
69
+ <!-- Actividad diaria -->
70
+ <div>
71
+ <label class="block text-gray-700 mb-2">Actividad diaria</label>
72
+ <select id="activity" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
73
+ <option value="" disabled selected>Selecciona el nivel</option>
74
+ <option value="high">Alta (2+ horas ejercicio)</option>
75
+ <option value="medium">Media (1-2 horas ejercicio)</option>
76
+ <option value="low">Baja (menos de 1 hora)</option>
77
+ </select>
78
  </div>
79
+
80
+ <!-- Sexo del perro -->
81
+ <div>
82
+ <label class="block text-gray-700 mb-2">Sexo</label>
83
+ <select id="gender" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
84
+ <option value="" disabled selected>Selecciona el sexo</option>
85
+ <option value="male">Macho</option>
86
+ <option value="female">Hembra</option>
87
+ </select>
88
+ </div>
89
+
90
+ <!-- Condiciones especiales -->
91
+ <div>
92
+ <label class="block text-gray-700 mb-2">Condiciones especiales</label>
93
+ <select id="conditions" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500">
94
+ <option value="none" selected>Ninguna</option>
95
+ <option value="allergies">Alergias alimentarias</option>
96
+ <option value="overweight">Sobrepeso</option>
97
+ <option value="kidney">Problemas renales</option>
98
+ <option value="joint">Problemas articulares</option>
99
+ </select>
100
+ </div>
101
+ </div>
102
+
103
+ <div class="mt-6 text-center">
104
+ <button id="calculateBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">
105
+ <i class="fas fa-calculator mr-2"></i>Calcular Menú
106
  </button>
107
  </div>
108
+ </div>
109
+
110
+ <!-- Resultados - Oculto inicialmente -->
111
+ <div id="results" class="hidden bg-white rounded-lg shadow-md p-6 mb-8 fade-in">
112
+ <h2 class="text-xl font-semibold text-indigo-700 mb-4">Recomendaciones nutricionales</h2>
113
+
114
+ <div class="mb-6">
115
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Balance nutricional ideal</h3>
116
+
117
+ <div class="space-y-4">
118
+ <div>
119
+ <div class="flex justify-between mb-1">
120
+ <span class="text-sm font-medium text-gray-700">Proteínas</span>
121
+ <span id="protein-percent" class="text-sm font-medium text-gray-700">--%</span>
122
+ </div>
123
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
124
+ <div id="protein-bar" class="nutrient-bar h-2.5 rounded-full bg-blue-600" style="width: 0%"></div>
125
  </div>
126
  </div>
127
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  <div>
129
+ <div class="flex justify-between mb-1">
130
+ <span class="text-sm font-medium text-gray-700">Grasas</span>
131
+ <span id="fat-percent" class="text-sm font-medium text-gray-700">--%</span>
132
+ </div>
133
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
134
+ <div id="fat-bar" class="nutrient-bar h-2.5 rounded-full bg-yellow-500" style="width: 0%"></div>
135
+ </div>
136
  </div>
137
+
138
  <div>
139
+ <div class="flex justify-between mb-1">
140
+ <span class="text-sm font-medium text-gray-700">Carbohidratos</span>
141
+ <span id="carbs-percent" class="text-sm font-medium text-gray-700">--%</span>
142
+ </div>
143
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
144
+ <div id="carbs-bar" class="nutrient-bar h-2.5 rounded-full bg-green-500" style="width: 0%"></div>
145
+ </div>
146
  </div>
147
+
148
  <div>
149
+ <div class="flex justify-between mb-1">
150
+ <span class="text-sm font-medium text-gray-700">Fibra</span>
151
+ <span id="fiber-percent" class="text-sm font-medium text-gray-700">--%</span>
152
+ </div>
153
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
154
+ <div id="fiber-bar" class="nutrient-bar h-2.5 rounded-full bg-purple-500" style="width: 0%"></div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="mb-6">
161
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Cantidad diaria recomendada</h3>
162
+ <div class="bg-indigo-50 p-4 rounded-lg">
163
+ <div class="flex items-center">
164
+ <i class="fas fa-bowl-food text-2xl text-indigo-600 mr-3"></i>
165
+ <div>
166
+ <p class="font-medium text-gray-800">Tu perro debería consumir aproximadamente:</p>
167
+ <p id="daily-amount" class="text-xl font-bold text-indigo-700">-- gramos por día</p>
168
+ </div>
169
  </div>
170
  </div>
171
  </div>
172
+
173
+ <div>
174
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Menú semanal</h3>
175
+
176
+ <div class="overflow-x-auto">
177
+ <table class="min-w-full bg-white border border-gray-200 rounded-lg">
178
+ <thead class="bg-gray-100">
179
+ <tr>
180
+ <th class="py-2 px-4 border-b">Día</th>
181
+ <th class="py-2 px-4 border-b">Desayuno</th>
182
+ <th class="py-2 px-4 border-b">Cena</th>
183
+ </tr>
184
+ </thead>
185
+ <tbody id="weekly-menu" class="divide-y divide-gray-200">
186
+ <!-- Aquí se generará el menú dinámicamente -->
187
+ </tbody>
188
+ </table>
189
+ </div>
190
+
191
+ <div class="mt-4 bg-yellow-50 p-4 rounded-lg border border-yellow-200">
192
+ <div class="flex">
193
+ <i class="fas fa-lightbulb text-yellow-500 text-xl mr-3 mt-1"></i>
194
+ <div>
195
+ <h4 class="font-medium text-yellow-800 mb-1">Consejos de Judy Morgan</h4>
196
+ <p id="tips" class="text-yellow-700">Selecciona las características de tu perro para obtener consejos personalizados.</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
  </div>
201
+ </div>
202
+
203
+ <footer class="text-center text-gray-500 text-sm mt-12">
204
+ <p>Esta aplicación sigue los principios de la dieta natural para perros de la Dra. Judy Morgan.</p>
205
+ <p class="mt-1">Consulta siempre con tu veterinario antes de cambiar la dieta de tu mascota.</p>
206
  </footer>
207
  </div>
208
 
209
  <script>
210
+ document.addEventListener('DOMContentLoaded', function() {
211
+ const calculateBtn = document.getElementById('calculateBtn');
212
+ const resultsSection = document.getElementById('results');
213
+
214
+ calculateBtn.addEventListener('click', function() {
215
+ // Validar que todos los campos estén completos
216
+ const size = document.getElementById('size').value;
217
+ const age = document.getElementById('age').value;
218
+ const energy = document.getElementById('energy').value;
219
+ const activity = document.getElementById('activity').value;
220
+ const gender = document.getElementById('gender').value;
221
+ const conditions = document.getElementById('conditions').value;
222
+
223
+ if (!size || !age || !energy || !activity || !gender) {
224
+ alert('Por favor completa todos los campos obligatorios.');
225
+ return;
226
+ }
227
+
228
+ // Calcular recomendaciones basadas en las selecciones
229
+ calculateRecommendations(size, age, energy, activity, gender, conditions);
230
+
231
+ // Mostrar resultados con animación
232
+ resultsSection.classList.remove('hidden');
233
+ resultsSection.classList.add('fade-in');
234
+
235
+ // Desplazarse suavemente a los resultados
236
+ resultsSection.scrollIntoView({ behavior: 'smooth' });
237
+ });
238
+
239
+ function calculateRecommendations(size, age, energy, activity, gender, conditions) {
240
+ // Base de datos de recetas
241
+ const recipes = {
242
+ breakfast: [
243
+ { name: "Pollo con calabaza y espinacas", protein: 40, fat: 20, carbs: 30, fiber: 10 },
244
+ { name: "Pavo con zanahoria y arroz integral", protein: 35, fat: 15, carbs: 40, fiber: 10 },
245
+ { name: "Salmón con boniato y judías verdes", protein: 30, fat: 25, carbs: 35, fiber: 10 },
246
+ { name: "Ternera con quinoa y brócoli", protein: 45, fat: 15, carbs: 30, fiber: 10 },
247
+ { name: "Hígado con patata dulce y guisantes", protein: 35, fat: 20, carbs: 35, fiber: 10 },
248
+ { name: "Pescado blanco con calabacín y mijo", protein: 40, fat: 10, carbs: 40, fiber: 10 },
249
+ { name: "Cordero con col rizada y cebada", protein: 30, fat: 25, carbs: 35, fiber: 10 }
250
+ ],
251
+ dinner: [
252
+ { name: "Pavo con arroz y espárragos", protein: 35, fat: 15, carbs: 40, fiber: 10 },
253
+ { name: "Pollo con patata y zanahoria", protein: 40, fat: 20, carbs: 30, fiber: 10 },
254
+ { name: "Sardinas con quinoa y espinacas", protein: 30, fat: 25, carbs: 35, fiber: 10 },
255
+ { name: "Conejo con calabaza y judías", protein: 45, fat: 15, carbs: 30, fiber: 10 },
256
+ { name: "Pescado azul con boniato y brócoli", protein: 35, fat: 20, carbs: 35, fiber: 10 },
257
+ { name: "Ternera con arroz integral y calabacín", protein: 40, fat: 10, carbs: 40, fiber: 10 },
258
+ { name: "Pollo con lentejas y coliflor", protein: 30, fat: 25, carbs: 35, fiber: 10 }
259
+ ]
260
+ };
261
+
262
+ // Determinar porcentajes nutricionales basados en las necesidades
263
+ let proteinPercent, fatPercent, carbsPercent, fiberPercent;
264
+
265
+ // Cachorros necesitan más proteína y grasa
266
+ if (age === 'puppy') {
267
+ proteinPercent = 40;
268
+ fatPercent = 25;
269
+ carbsPercent = 25;
270
+ fiberPercent = 10;
271
+ }
272
+ // Perros senior necesitan menos grasa y más fibra
273
+ else if (age === 'senior') {
274
+ proteinPercent = 30;
275
+ fatPercent = 15;
276
+ carbsPercent = 35;
277
+ fiberPercent = 20;
278
+ }
279
+ // Perros con alta energía y actividad necesitan más carbohidratos
280
+ else if (energy === 'high' && activity === 'high') {
281
+ proteinPercent = 35;
282
+ fatPercent = 20;
283
+ carbsPercent = 35;
284
+ fiberPercent = 10;
285
+ }
286
+ // Perros con sobrepeso necesitan menos grasa y carbohidratos
287
+ else if (conditions === 'overweight') {
288
+ proteinPercent = 40;
289
+ fatPercent = 15;
290
+ carbsPercent = 25;
291
+ fiberPercent = 20;
292
+ }
293
+ // Perros con problemas renales necesitan menos proteína
294
+ else if (conditions === 'kidney') {
295
+ proteinPercent = 25;
296
+ fatPercent = 25;
297
+ carbsPercent = 40;
298
+ fiberPercent = 10;
299
+ }
300
+ // Perros con problemas articulares necesitan más ácidos grasos
301
+ else if (conditions === 'joint') {
302
+ proteinPercent = 30;
303
+ fatPercent = 30;
304
+ carbsPercent = 30;
305
+ fiberPercent = 10;
306
+ }
307
+ // Perros normales
308
+ else {
309
+ proteinPercent = 35;
310
+ fatPercent = 20;
311
+ carbsPercent = 35;
312
+ fiberPercent = 10;
313
+ }
314
+
315
+ // Calcular cantidad diaria basada en tamaño y actividad
316
+ let dailyAmount;
317
+ if (size === 'small') {
318
+ dailyAmount = energy === 'high' ? 150 : (energy === 'medium' ? 120 : 100);
319
+ } else if (size === 'medium') {
320
+ dailyAmount = energy === 'high' ? 350 : (energy === 'medium' ? 300 : 250);
321
+ } else { // large
322
+ dailyAmount = energy === 'high' ? 600 : (energy === 'medium' ? 500 : 400);
323
+ }
324
+
325
+ // Ajustar por edad
326
+ if (age === 'puppy') dailyAmount *= 1.2;
327
+ if (age === 'senior') dailyAmount *= 0.9;
328
+
329
+ // Ajustar por condiciones
330
+ if (conditions === 'overweight') dailyAmount *= 0.8;
331
+
332
+ // Actualizar la UI con los resultados
333
+ updateNutritionBars(proteinPercent, fatPercent, carbsPercent, fiberPercent);
334
+ document.getElementById('protein-percent').textContent = proteinPercent + '%';
335
+ document.getElementById('fat-percent').textContent = fatPercent + '%';
336
+ document.getElementById('carbs-percent').textContent = carbsPercent + '%';
337
+ document.getElementById('fiber-percent').textContent = fiberPercent + '%';
338
+
339
+ document.getElementById('daily-amount').textContent = Math.round(dailyAmount) + ' gramos por día';
340
+
341
+ // Generar menú semanal
342
+ generateWeeklyMenu(recipes);
343
+
344
+ // Mostrar consejos personalizados
345
+ showPersonalizedTips(size, age, energy, activity, gender, conditions);
346
+ }
347
 
348
+ function updateNutritionBars(protein, fat, carbs, fiber) {
349
+ setTimeout(() => {
350
+ document.getElementById('protein-bar').style.width = protein + '%';
351
+ document.getElementById('fat-bar').style.width = fat + '%';
352
+ document.getElementById('carbs-bar').style.width = carbs + '%';
353
+ document.getElementById('fiber-bar').style.width = fiber + '%';
354
+ }, 100);
355
  }
356
 
357
+ function generateWeeklyMenu(recipes) {
358
+ const weeklyMenu = document.getElementById('weekly-menu');
359
+ weeklyMenu.innerHTML = '';
360
+
361
+ const days = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
362
+
363
+ for (let i = 0; i < 7; i++) {
364
+ const row = document.createElement('tr');
365
+
366
+ const dayCell = document.createElement('td');
367
+ dayCell.className = 'py-2 px-4 border-b text-center font-medium';
368
+ dayCell.textContent = days[i];
369
+
370
+ const breakfastCell = document.createElement('td');
371
+ breakfastCell.className = 'py-2 px-4 border-b';
372
+ breakfastCell.textContent = recipes.breakfast[i].name;
373
+
374
+ const dinnerCell = document.createElement('td');
375
+ dinnerCell.className = 'py-2 px-4 border-b';
376
+ dinnerCell.textContent = recipes.dinner[i].name;
377
+
378
+ row.appendChild(dayCell);
379
+ row.appendChild(breakfastCell);
380
+ row.appendChild(dinnerCell);
381
+
382
+ weeklyMenu.appendChild(row);
383
+ }
384
+ }
385
 
386
+ function showPersonalizedTips(size, age, energy, activity, gender, conditions) {
387
+ const tipsElement = document.getElementById('tips');
388
+ let tips = [];
 
389
 
390
+ // Tips basados en tamaño
391
+ if (size === 'small') {
392
+ tips.push("Los perros pequeños tienen metabolismos más rápidos, por lo que necesitan comidas más frecuentes pero en porciones pequeñas.");
393
+ } else if (size === 'large') {
394
+ tips.push("Los perros grandes son propensos a problemas articulares, considera añadir suplementos de glucosamina y condroitina.");
395
+ }
396
 
397
+ // Tips basados en edad
398
+ if (age === 'puppy') {
399
+ tips.push("Los cachorros necesitan más proteínas y grasas para su crecimiento. Alimenta 3-4 veces al día.");
400
+ } else if (age === 'senior') {
401
+ tips.push("Los perros senior se benefician de comidas más fáciles de digerir y con más fibra para la salud intestinal.");
402
+ }
403
 
404
+ // Tips basados en energía y actividad
405
+ if (energy === 'high' && activity === 'high') {
406
+ tips.push("Para perros muy activos, considera añadir carbohidratos complejos como fuente de energía sostenida.");
407
+ } else if (energy === 'low' && activity === 'low') {
408
+ tips.push("Los perros con baja actividad necesitan menos calorías para evitar el aumento de peso.");
409
+ }
410
 
411
+ // Tips basados en condiciones especiales
412
+ if (conditions === 'allergies') {
413
+ tips.push("Para perros con alergias, usa proteínas novedosas como conejo o venado y evita ingredientes comunes como pollo o trigo.");
414
+ } else if (conditions === 'overweight') {
415
+ tips.push("Para perros con sobrepeso, aumenta la fibra para promover la saciedad y reduce las grasas y carbohidratos.");
416
+ } else if (conditions === 'kidney') {
417
+ tips.push("Para problemas renales, reduce el fósforo y la proteína, pero mantén la proteína de alta calidad.");
418
+ } else if (conditions === 'joint') {
419
+ tips.push("Para problemas articulares, aumenta los ácidos grasos omega-3 que tienen propiedades antiinflamatorias.");
420
+ }
421
+
422
+ // Consejo general de Judy Morgan
423
+ tips.push("Recuerda variar las proteínas cada 3-4 meses para proporcionar una nutrición equilibrada y prevenir alergias.");
424
+
425
+ tipsElement.textContent = tips.join(' ');
426
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
427
  });
428
  </script>
429
  <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=xSerpicoxx/prd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>