| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Paws & Harmony - TCM Pet Therapy Advisor</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| } |
| .pet-image-upload::file-selector-button { |
| display: none; |
| } |
| .pet-image-upload::-webkit-file-upload-button { |
| display: none; |
| } |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
| .scrollbar-hide { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| } |
| 50% { |
| opacity: 0.5; |
| } |
| } |
| .animate-pulse-slow { |
| animation: pulse 3s infinite; |
| } |
| </style> |
| </head> |
| <body class="gradient-bg min-h-screen font-sans"> |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| |
| <header class="flex flex-col md:flex-row justify-between items-center mb-12"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <div class="bg-amber-100 p-3 rounded-full mr-4"> |
| <i class="fas fa-paw text-amber-600 text-2xl"></i> |
| </div> |
| <div> |
| <h1 class="text-3xl font-bold text-gray-800">Paws & Harmony</h1> |
| <p class="text-gray-600">Traditional Chinese Medicine for Pets</p> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow-md p-4 flex items-center"> |
| <div class="mr-3 text-green-500"> |
| <i class="fas fa-shield-alt text-xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-700">Safety First Approach</p> |
| <p class="text-xs text-gray-500">Always consult your vet for emergencies</p> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="bg-amber-500 px-6 py-4"> |
| <h2 class="text-xl font-bold text-white">Pet Health Assessment</h2> |
| </div> |
| <div class="p-6"> |
| <form id="petForm"> |
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-info-circle text-amber-500 mr-2"></i> |
| Basic Information |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Pet Type</label> |
| <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> |
| <option value="">Select</option> |
| <option value="dog">Dog</option> |
| <option value="cat">Cat</option> |
| <option value="other">Other</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Breed</label> |
| <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> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Age (years)</label> |
| <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> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Weight (kg)</label> |
| <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> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-notes-medical text-amber-500 mr-2"></i> |
| Symptoms & Concerns |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Primary Symptoms</label> |
| <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"> |
| <option value="digestive">Digestive issues</option> |
| <option value="skin">Skin problems</option> |
| <option value="energy">Low energy</option> |
| <option value="anxiety">Anxiety/Stress</option> |
| <option value="joint">Joint pain</option> |
| <option value="appetite">Appetite changes</option> |
| <option value="sleep">Sleep disturbances</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Duration</label> |
| <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"> |
| <option value="">Select duration</option> |
| <option value="acute">Less than 1 week</option> |
| <option value="subacute">1-4 weeks</option> |
| <option value="chronic">More than 4 weeks</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Additional Notes</label> |
| <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> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-eye text-amber-500 mr-2"></i> |
| TCM Observations |
| </h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tongue Appearance</label> |
| <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"> |
| <option value="">Select tongue appearance</option> |
| <option value="pale">Pale</option> |
| <option value="red">Red</option> |
| <option value="purple">Purple</option> |
| <option value="coated">White coating</option> |
| <option value="yellow-coated">Yellow coating</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Coat Condition</label> |
| <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"> |
| <option value="">Select coat condition</option> |
| <option value="dry">Dry/flaky</option> |
| <option value="greasy">Greasy</option> |
| <option value="dull">Dull</option> |
| <option value="normal">Normal</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Upload Images</label> |
| <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> |
| <div class="space-y-1 text-center"> |
| <div class="flex text-sm text-gray-600"> |
| <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"> |
| <span>Upload files</span> |
| <input id="file-upload" name="file-upload" type="file" class="pet-image-upload sr-only" multiple> |
| </label> |
| <p class="pl-1">or drag and drop</p> |
| </div> |
| <p class="text-xs text-gray-500">Tongue, skin, or full body images</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <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"> |
| <i class="fas fa-leaf mr-2"></i> |
| Get TCM Recommendations |
| </button> |
| </form> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-2 space-y-6"> |
| |
| <div id="emergencyAlert" class="hidden bg-red-50 border-l-4 border-red-500 p-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-exclamation-triangle text-red-500 text-xl"></i> |
| </div> |
| <div class="ml-3"> |
| <h3 class="text-sm font-medium text-red-800">Alert: Consult a vet immediately</h3> |
| <div class="mt-2 text-sm text-red-700"> |
| <p id="emergencyMessage"></p> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="diagnosisCard" class="hidden bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="bg-green-500 px-6 py-4"> |
| <h2 class="text-xl font-bold text-white">TCM Diagnosis</h2> |
| </div> |
| <div class="p-6"> |
| <div class="mb-4"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Pattern Identification</h3> |
| <div class="bg-green-50 border border-green-200 rounded-lg p-4"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-diagnoses text-green-500 mt-1"></i> |
| </div> |
| <div class="ml-3"> |
| <p id="tcmPattern" class="text-sm text-gray-700"></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Modern Context</h3> |
| <p id="modernContext" class="text-gray-700"></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="treatmentPlan" class="hidden bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="bg-blue-500 px-6 py-4"> |
| <h2 class="text-xl font-bold text-white">Treatment Plan</h2> |
| </div> |
| <div class="p-6"> |
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-utensils text-blue-500 mr-2"></i> |
| Dietary Recommendations |
| </h3> |
| <div id="dietRecommendations" class="space-y-3"></div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-seedling text-blue-500 mr-2"></i> |
| Herbal Support |
| </h3> |
| <div id="herbRecommendations" class="space-y-3"></div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-hand-holding-heart text-blue-500 mr-2"></i> |
| Massage & Acupressure |
| </h3> |
| <div id="massageRecommendations" class="space-y-3"></div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center"> |
| <i class="fas fa-home text-blue-500 mr-2"></i> |
| Lifestyle Adjustments |
| </h3> |
| <div id="lifestyleRecommendations" class="space-y-3"></div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="monitoringCard" class="hidden bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="bg-purple-500 px-6 py-4"> |
| <h2 class="text-xl font-bold text-white">Monitoring & Follow-up</h2> |
| </div> |
| <div class="p-6"> |
| <div class="flex"> |
| <div class="flex-shrink-0"> |
| <i class="fas fa-clock text-purple-500 mt-1"></i> |
| </div> |
| <div class="ml-3"> |
| <p id="monitoringInstructions" class="text-gray-700"></p> |
| </div> |
| </div> |
| <div class="mt-4 bg-purple-50 border border-purple-200 rounded-lg p-4"> |
| <h3 class="text-sm font-medium text-purple-800 mb-2">When to seek veterinary care:</h3> |
| <ul id="vetCareList" class="list-disc pl-5 text-sm text-purple-700 space-y-1"></ul> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="emptyState" class="bg-white rounded-xl shadow-lg overflow-hidden"> |
| <div class="p-12 text-center"> |
| <div class="mx-auto flex items-center justify-center h-24 w-24 rounded-full bg-amber-100 mb-6"> |
| <i class="fas fa-paw text-amber-500 text-4xl"></i> |
| </div> |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Complete the assessment</h3> |
| <p class="mt-1 text-sm text-gray-500">Fill out the pet health assessment form to receive personalized TCM recommendations.</p> |
| <div class="mt-6 animate-pulse-slow"> |
| <i class="fas fa-arrow-down text-amber-500 text-2xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="mt-12 text-center text-xs text-gray-500"> |
| <p class="mb-2">Disclaimer: This information is for educational purposes only and is not a substitute for professional veterinary advice.</p> |
| <p>Always consult with a licensed veterinarian before starting any new treatment for your pet.</p> |
| </footer> |
| </div> |
|
|
| <script> |
| document.getElementById('petForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| document.getElementById('emptyState').classList.add('hidden'); |
| |
| |
| const emergencySymptoms = ['bloody stool', 'seizures', 'difficulty breathing']; |
| const hasEmergency = Math.random() < 0.2; |
| |
| if (hasEmergency) { |
| const emergencyMessage = emergencySymptoms[Math.floor(Math.random() * emergencySymptoms.length)]; |
| document.getElementById('emergencyMessage').textContent = `Your pet shows signs of ${emergencyMessage}, which requires immediate veterinary attention.`; |
| document.getElementById('emergencyAlert').classList.remove('hidden'); |
| } else { |
| document.getElementById('emergencyAlert').classList.add('hidden'); |
| } |
| |
| |
| const tcmPatterns = [ |
| "Damp-Heat accumulation in the spleen and stomach channels", |
| "Liver Qi stagnation with spleen deficiency", |
| "Kidney Yang deficiency with cold accumulation", |
| "Heart Fire blazing with Yin deficiency" |
| ]; |
| const selectedPattern = tcmPatterns[Math.floor(Math.random() * tcmPatterns.length)]; |
| document.getElementById('tcmPattern').textContent = selectedPattern; |
| |
| |
| const modernContexts = [ |
| "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.", |
| "This imbalance may correlate with chronic conditions or age-related changes. Western veterinary medicine might describe this as metabolic or endocrine dysfunction.", |
| "This pattern frequently appears in pets with chronic stress or environmental changes. It may present similarly to anxiety disorders or immune-mediated conditions." |
| ]; |
| document.getElementById('modernContext').textContent = modernContexts[Math.floor(Math.random() * modernContexts.length)]; |
| document.getElementById('diagnosisCard').classList.remove('hidden'); |
| |
| |
| |
| const dietRecommendations = [ |
| "Cooling foods: Replace 25% of regular meals with steamed zucchini or cucumber (½ cup per 10kg body weight daily).", |
| "Warming foods: Add small amounts of cooked ginger (1/8 tsp per 10kg) to meals to support digestion.", |
| "Avoid damp-producing foods: Reduce dairy and wheat products which can exacerbate damp conditions." |
| ]; |
| const dietList = document.getElementById('dietRecommendations'); |
| dietList.innerHTML = ''; |
| dietRecommendations.forEach(rec => { |
| const div = document.createElement('div'); |
| div.className = 'flex items-start'; |
| div.innerHTML = ` |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-gray-700">${rec}</p> |
| </div> |
| `; |
| dietList.appendChild(div); |
| }); |
| |
| |
| const herbRecommendations = [ |
| "Astragalus root: 0.5g per 10kg body weight daily, steeped in warm water and added to food.", |
| "Chamomile: 1 tsp dried flowers per 20kg body weight as a calming tea (cooled before serving).", |
| "Licorice root: 0.3g per 10kg body weight (use deglycyrrhizinated form for long-term use)." |
| ]; |
| const herbList = document.getElementById('herbRecommendations'); |
| herbList.innerHTML = ''; |
| herbRecommendations.forEach(rec => { |
| const div = document.createElement('div'); |
| div.className = 'flex items-start'; |
| div.innerHTML = ` |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-gray-700">${rec}</p> |
| </div> |
| `; |
| herbList.appendChild(div); |
| }); |
| |
| |
| const massageRecommendations = [ |
| "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.", |
| "GV20 massage: Rub between the ears in small circles for 30 seconds to 1 minute to calm the mind and reduce stress.", |
| "Ear massage: Gently rub the base of the ears in circular motions to support the immune system." |
| ]; |
| const massageList = document.getElementById('massageRecommendations'); |
| massageList.innerHTML = ''; |
| massageRecommendations.forEach(rec => { |
| const div = document.createElement('div'); |
| div.className = 'flex items-start'; |
| div.innerHTML = ` |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-gray-700">${rec}</p> |
| </div> |
| `; |
| massageList.appendChild(div); |
| }); |
| |
| |
| const lifestyleRecommendations = [ |
| "Environmental enrichment: Provide puzzle feeders and regular play sessions to reduce stress and support healthy Qi flow.", |
| "Sleep hygiene: Ensure a quiet, comfortable sleeping area away from high-traffic zones.", |
| "Exercise: Moderate daily walks or play sessions adjusted to your pet's energy level." |
| ]; |
| const lifestyleList = document.getElementById('lifestyleRecommendations'); |
| lifestyleList.innerHTML = ''; |
| lifestyleRecommendations.forEach(rec => { |
| const div = document.createElement('div'); |
| div.className = 'flex items-start'; |
| div.innerHTML = ` |
| <div class="flex-shrink-0 mt-1"> |
| <i class="fas fa-check-circle text-green-500"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-gray-700">${rec}</p> |
| </div> |
| `; |
| lifestyleList.appendChild(div); |
| }); |
| |
| document.getElementById('treatmentPlan').classList.remove('hidden'); |
| |
| |
| 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."; |
| |
| const vetCarePoints = [ |
| "Persistent vomiting or diarrhea", |
| "Lethargy lasting more than 24 hours", |
| "Loss of appetite for more than 48 hours", |
| "Any signs of pain or distress" |
| ]; |
| const vetCareList = document.getElementById('vetCareList'); |
| vetCareList.innerHTML = ''; |
| vetCarePoints.forEach(point => { |
| const li = document.createElement('li'); |
| li.textContent = point; |
| vetCareList.appendChild(li); |
| }); |
| |
| document.getElementById('monitoringCard').classList.remove('hidden'); |
| |
| |
| document.getElementById('diagnosisCard').scrollIntoView({ behavior: 'smooth' }); |
| }); |
| </script> |
| <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> |
| </html> |
