Spaces:

Jinny
/

omega3-needs-for-pets

Running

App Files Files Community

Jinny commited on Jun 21, 2025

Commit

b4dab9a

verified ·

1 Parent(s): 0e43d17

fix it - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +50 -11

index.html CHANGED Viewed

@@ -11,6 +11,22 @@
             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>');
             background-size: 200px;
             background-repeat: repeat;
         }
         .wave {
@@ -20,10 +36,10 @@
         .wave::after {
             content: "";
             position: absolute;
-            bottom: -10px;
             left: 0;
             width: 100%;
-            height: 20px;
             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>');
             background-size: cover;
         }
@@ -39,10 +55,12 @@
         }
         .bubble {
-            position: absolute;
             background-color: rgba(255, 255, 255, 0.6);
             border-radius: 50%;
-            animation: float 4s ease-in-out infinite;
         }
         @keyframes float {
@@ -50,9 +68,14 @@
             50% { transform: translateY(-20px) scale(1.1); opacity: 0.8; }
             100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
         }
     </style>
 </head>
-<body class="min-h-screen bg-amber-50 fish-bg flex flex-col items-center justify-center p-4">
     <div class="max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden">
         <!-- Header with fish icon -->
         <div class="bg-amber-400 wave p-6 text-center relative">
@@ -70,11 +93,11 @@
                 <div class="space-y-2">
                     <label class="block text-amber-800 font-medium">Pet Type</label>
                     <div class="flex space-x-4">
-                        <button id="dog-btn" class="pet-type-btn active bg-amber-100 border-amber-400 text-amber-800">
-                            <i class="fas fa-dog mr-2"></i> Dog
                         </button>
-                        <button id="cat-btn" class="pet-type-btn bg-gray-100 border-gray-300 text-gray-700">
-                            <i class="fas fa-cat mr-2"></i> Cat
                         </button>
                     </div>
                 </div>
@@ -116,7 +139,7 @@
             </div>
             <!-- Calculate button -->
-            <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">
                 <i class="fas fa-calculator mr-3"></i> Calculate Omega-3 Needs
             </button>
         </div>
@@ -199,7 +222,7 @@
     </div>
     <!-- Fun bubbles in the background -->
-    <div id="bubbles-container" class="fixed top-0 left-0 w-full h-full pointer-events-none z-0"></div>
     <script>
         // Create bubbles
@@ -361,6 +384,22 @@
         // Initialize
         createBubbles();
     </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=Jinny/omega3-needs-for-pets" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

             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>');
             background-size: 200px;
             background-repeat: repeat;
+            position: relative;
+            overflow: hidden;
+        }
+        .floating-fish {
+            position: fixed;
+            opacity: 0.2;
+            animation: floatFish 25s linear infinite;
+            z-index: -1;
+            pointer-events: none;
+        }
+        @keyframes floatFish {
+            0% { transform: translateX(-50px) translateY(0) rotate(0deg); }
+            50% { transform: translateX(calc(100vw + 50px)) translateY(50px) rotate(360deg); }
+            100% { transform: translateX(-50px) translateY(0) rotate(720deg); }
         }
         .wave {
         .wave::after {
             content: "";
             position: absolute;
+            bottom: -15px;
             left: 0;
             width: 100%;
+            height: 30px;
             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>');
             background-size: cover;
         }
         }
         .bubble {
+            position: fixed;
             background-color: rgba(255, 255, 255, 0.6);
             border-radius: 50%;
+            animation: float 6s ease-in-out infinite;
+            z-index: -1;
+            pointer-events: none;
         }
         @keyframes float {
             50% { transform: translateY(-20px) scale(1.1); opacity: 0.8; }
             100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
         }
+        @keyframes bounce {
+            from { transform: translateY(0); }
+            to { transform: translateY(-5px); }
+        }
     </style>
 </head>
+<body class="min-h-screen bg-amber-50 fish-bg flex flex-col items-center justify-center p-4" style="cursor: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"%23f59e0b\" d=\"M12 2c2.21 0 4 1.79 4 4 0 1.07-.43 2.03-1.12 2.73-.69.7-1.66 1.12-2.73 1.12-1.07 0-2.03-.43-2.73-1.12C8.43 8.03 8 7.07 8 6c0-2.21 1.79-4 4-4zm-6 7c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm12 0c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm-6 7c1.38 0 2.5-1.12 2.5-2.5S13.38 11 12 11s-2.5 1.12-2.5 2.5S10.62 16 12 16z\"/></svg>'), auto;">
     <div class="max-w-2xl w-full bg-white rounded-3xl shadow-xl overflow-hidden">
         <!-- Header with fish icon -->
         <div class="bg-amber-400 wave p-6 text-center relative">
                 <div class="space-y-2">
                     <label class="block text-amber-800 font-medium">Pet Type</label>
                     <div class="flex space-x-4">
+                        <button id="dog-btn" class="pet-type-btn active bg-amber-100 border-amber-400 text-amber-800 transform hover:scale-105 transition">
+                            <i class="fas fa-dog mr-2 bounce" style="animation: bounce 0.5s infinite alternate;"></i> Dog
                         </button>
+                        <button id="cat-btn" class="pet-type-btn bg-gray-100 border-gray-300 text-gray-700 transform hover:scale-105 transition">
+                            <i class="fas fa-cat mr-2 bounce" style="animation: bounce 0.5s infinite alternate;"></i> Cat
                         </button>
                     </div>
                 </div>
             </div>
             <!-- Calculate button -->
+            <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 transform hover:scale-105 active:scale-95 hover:rotate-1">
                 <i class="fas fa-calculator mr-3"></i> Calculate Omega-3 Needs
             </button>
         </div>
     </div>
     <!-- Fun bubbles in the background -->
+    <div id="bubbles-container" class="fixed top-0 left-0 w-full h-full pointer-events-none z-10"></div>
     <script>
         // Create bubbles
         // Initialize
         createBubbles();
+        createFloatingFish();
+        // Create floating fish elements
+        function createFloatingFish() {
+            const colors = ['#fbbf24', '#f59e0b', '#f97316', '#ef4444'];
+            for (let i = 0; i < 8; i++) {
+                const fish = document.createElement('div');
+                fish.className = 'floating-fish';
+                fish.innerHTML = `<i class="fas fa-fish" style="color: ${colors[i%4]}; font-size: ${Math.random() * 30 + 20}px;"></i>`;
+                fish.style.top = `${Math.random() * 100}%`;
+                fish.style.left = `${Math.random() * 100}%`;
+                fish.style.animationDuration = `${Math.random() * 10 + 10}s`;
+                fish.style.animationDelay = `${Math.random() * 5}s`;
+                document.body.appendChild(fish);
+            }
+        }
     </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=Jinny/omega3-needs-for-pets" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>