| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Livestock Weather Optimization System</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#4F6F52', |
| secondary: '#739072', |
| accent: '#86A789', |
| light: '#D2E3C8', |
| dark: '#3A4D39' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .weather-card { |
| transition: all 0.3s ease; |
| } |
| .weather-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .livestock-health { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| } |
| .dashboard-header { |
| background: linear-gradient(to right, #4F6F52, #739072); |
| } |
| .gauge-container { |
| position: relative; |
| width: 100%; |
| height: 120px; |
| margin: 20px 0; |
| } |
| .gauge { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| border-radius: 50% 50% 0 0 / 100% 100% 0 0; |
| overflow: hidden; |
| } |
| .gauge::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 100%; |
| width: 100%; |
| height: 100%; |
| background: #f0f0f0; |
| transform-origin: center top; |
| transform: rotate(0.5turn); |
| transition: transform 1s ease-out; |
| } |
| .gauge-value { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| width: 100%; |
| text-align: center; |
| font-weight: bold; |
| font-size: 1.5rem; |
| color: #3A4D39; |
| } |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| .alert-pulse { |
| animation: pulse 2s infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="min-h-screen flex flex-col"> |
| |
| <header class="dashboard-header text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <i class="fas fa-cloud-sun fa-2x"></i> |
| <h1 class="text-2xl font-bold">Livestock Weather Optimizer</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <select class="bg-secondary border-0 rounded-full px-4 py-2 appearance-none focus:outline-none focus:ring-2 focus:ring-accent"> |
| <option>My Farm</option> |
| <option>North Pasture</option> |
| <option>South Pasture</option> |
| <option>Barn Area</option> |
| </select> |
| <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white"> |
| <i class="fas fa-chevron-down"></i> |
| </div> |
| </div> |
| <button class="bg-accent hover:bg-opacity-90 px-4 py-2 rounded-full flex items-center space-x-2"> |
| <i class="fas fa-user"></i> |
| <span>Farmer John</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="flex-grow container mx-auto px-4 py-8"> |
| |
| <section class="mb-12"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-2xl font-semibold text-dark">Weather Forecast & Livestock Impact</h2> |
| <div class="flex items-center space-x-2 text-sm"> |
| <span class="text-gray-600">Last updated: <span id="update-time">Just now</span></span> |
| <button id="refresh-btn" class="bg-light text-primary p-2 rounded-full hover:bg-accent hover:text-white transition"> |
| <i class="fas fa-sync-alt"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6"> |
| |
| <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-primary text-white px-4 py-3"> |
| <h3 class="font-bold">Today</h3> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <div class="text-4xl font-bold text-dark">24°C</div> |
| <div class="text-gray-600">Partly Cloudy</div> |
| </div> |
| <div class="text-4xl text-accent"> |
| <i class="fas fa-cloud-sun"></i> |
| </div> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Humidity</span> |
| <span class="font-medium">65%</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Wind</span> |
| <span class="font-medium">12 km/h</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Rain</span> |
| <span class="font-medium">10%</span> |
| </div> |
| </div> |
| </div> |
| <div class="px-4 py-3 bg-light"> |
| <div class="text-sm font-medium text-dark"> |
| <i class="fas fa-info-circle mr-2"></i> |
| <span>Good grazing conditions today</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-secondary text-white px-4 py-3"> |
| <h3 class="font-bold">Tomorrow</h3> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <div class="text-4xl font-bold text-dark">28°C</div> |
| <div class="text-gray-600">Sunny</div> |
| </div> |
| <div class="text-4xl text-yellow-500"> |
| <i class="fas fa-sun"></i> |
| </div> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Humidity</span> |
| <span class="font-medium">45%</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Wind</span> |
| <span class="font-medium">8 km/h</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Rain</span> |
| <span class="font-medium">0%</span> |
| </div> |
| </div> |
| </div> |
| <div class="px-4 py-3 bg-yellow-50"> |
| <div class="text-sm font-medium text-dark"> |
| <i class="fas fa-exclamation-triangle mr-2 text-yellow-600"></i> |
| <span>Provide extra shade & water</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-accent text-white px-4 py-3"> |
| <h3 class="font-bold">Day 3</h3> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <div class="text-4xl font-bold text-dark">18°C</div> |
| <div class="text-gray-600">Rainy</div> |
| </div> |
| <div class="text-4xl text-blue-500"> |
| <i class="fas fa-cloud-rain"></i> |
| </div> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Humidity</span> |
| <span class="font-medium">85%</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Wind</span> |
| <span class="font-medium">20 km/h</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Rain</span> |
| <span class="font-medium">90%</span> |
| </div> |
| </div> |
| </div> |
| <div class="px-4 py-3 bg-blue-50"> |
| <div class="text-sm font-medium text-dark"> |
| <i class="fas fa-umbrella mr-2 text-blue-600"></i> |
| <span>Prepare indoor shelter</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-dark text-white px-4 py-3"> |
| <h3 class="font-bold">Day 4</h3> |
| </div> |
| <div class="p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <div> |
| <div class="text-4xl font-bold text-dark">12°C</div> |
| <div class="text-gray-600">Stormy</div> |
| </div> |
| <div class="text-4xl text-purple-500"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Humidity</span> |
| <span class="font-medium">75%</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Wind</span> |
| <span class="font-medium">35 km/h</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Rain</span> |
| <span class="font-medium">100%</span> |
| </div> |
| </div> |
| </div> |
| <div class="px-4 py-3 bg-red-50 alert-pulse"> |
| <div class="text-sm font-medium text-dark"> |
| <i class="fas fa-exclamation-circle mr-2 text-red-600"></i> |
| <span>Move livestock to shelter</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-semibold text-dark mb-6">Livestock Health Monitoring</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="livestock-health rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-primary text-white px-4 py-3 flex justify-between items-center"> |
| <h3 class="font-bold">Cattle</h3> |
| <span class="text-sm bg-white text-primary px-2 py-1 rounded-full">120 heads</span> |
| </div> |
| <div class="p-4"> |
| <div class="gauge-container"> |
| <div class="gauge" id="cattle-gauge"></div> |
| <div class="gauge-value">78%</div> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Average Weight</span> |
| <span class="font-medium">520 kg</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Milk Production</span> |
| <span class="font-medium">22 L/day</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Stress Level</span> |
| <span class="font-medium text-green-600">Low</span> |
| </div> |
| </div> |
| </div> |
| <div class="px-4 py-3 bg-light"> |
| <div class="text-sm font-medium text-dark"> |
| <i class="fas fa-check-circle mr-2 text-green-600"></i> |
| <span>Health status optimal</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="livestock-health rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-secondary text-white px-4 py-3 flex justify-between items-center"> |
| <h3 class="font-bold">Sheep</h3> |
| <span class="text-sm bg-white text-secondary px-2 py-1 rounded-full">85 heads</span> |
| </div> |
| <div class="p-4"> |
| <div class="gauge-container"> |
| <div class="gauge" id="sheep-gauge"></div> |
| <div class="gauge-value">65%</div> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Average Weight</span> |
| <span class="font-medium">45 kg</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Wool Growth</span> |
| <span class="font-medium">1.2 cm/month</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Stress Level</span> |
| <span class="font-medium text-yellow-600">Medium</span> |
| </div> |
| </div> |
| </div> |
| <div class="px-4 py-3 bg-yellow-50"> |
| <div class="text-sm font-medium text-dark"> |
| <i class="fas fa-exclamation-triangle mr-2 text-yellow-600"></i> |
| <span>Monitor for heat stress</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="livestock-health rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-accent text-white px-4 py-3 flex justify-between items-center"> |
| <h3 class="font-bold">Poultry</h3> |
| <span class="text-sm bg-white text-accent px-2 py-1 rounded-full">500 birds</span> |
| </div> |
| <div class="p-4"> |
| <div class="gauge-container"> |
| <div class="gauge" id="poultry-gauge"></div> |
| <div class="gauge-value">82%</div> |
| </div> |
| <div class="space-y-3"> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Egg Production</span> |
| <span class="font-medium">420 eggs/day</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Feed Conversion</span> |
| <span class="font-medium">2.1:1</span> |
| </div> |
| <div class="flex justify-between text-sm"> |
| <span class="text-gray-600">Stress Level</span> |
| <span class="font-medium text-green-600">Low</span> |
| </div> |
| </div> |
| </div> |
| <div class="px-4 py-3 bg-light"> |
| <div class="text-sm font-medium text-dark"> |
| <i class="fas fa-check-circle mr-2 text-green-600"></i> |
| <span>Excellent production levels</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-12"> |
| <h2 class="text-2xl font-semibold text-dark mb-6">Feed & Water Optimization</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-primary text-white px-4 py-3"> |
| <h3 class="font-bold">Feed Recommendations</h3> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <h4 class="font-medium text-dark mb-2">Today's Adjustment</h4> |
| <div class="bg-green-50 border-l-4 border-green-500 p-3"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 text-green-500"> |
| <i class="fas fa-check-circle"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-green-700"> |
| Based on current weather and pasture conditions, you can reduce supplemental feed by 15%. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-primary"> |
| <i class="fas fa-haykal"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Pasture Quality</h4> |
| <p class="text-sm text-gray-600">High (NDVI: 0.78) - Excellent grazing available</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-primary"> |
| <i class="fas fa-seedling"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Supplemental Feed</h4> |
| <p class="text-sm text-gray-600">Recommended: 2.5 kg/head/day (reduced from 3.0 kg)</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-primary"> |
| <i class="fas fa-pills"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Mineral Supplement</h4> |
| <p class="text-sm text-gray-600">Increase salt blocks by 20% due to heat</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-secondary text-white px-4 py-3"> |
| <h3 class="font-bold">Water Management</h3> |
| </div> |
| <div class="p-4"> |
| <div class="mb-4"> |
| <h4 class="font-medium text-dark mb-2">Critical Alert</h4> |
| <div class="bg-red-50 border-l-4 border-red-500 p-3"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 text-red-500"> |
| <i class="fas fa-exclamation-triangle"></i> |
| </div> |
| <div class="ml-3"> |
| <p class="text-sm text-red-700"> |
| Tomorrow's forecast predicts 28°C. Increase water supply by 30% to prevent dehydration. |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-secondary"> |
| <i class="fas fa-tint"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Current Consumption</h4> |
| <p class="text-sm text-gray-600">Cattle: 45 L/head/day | Sheep: 5 L/head/day</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-secondary"> |
| <i class="fas fa-thermometer-half"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Temperature Impact</h4> |
| <p class="text-sm text-gray-600">Water needs increase by 1.5% per degree above 25°C</p> |
| </div> |
| </div> |
| |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-secondary"> |
| <i class="fas fa-water"></i> |
| </div> |
| <div class="ml-4"> |
| <h4 class="text-sm font-medium text-dark">Trough Check</h4> |
| <p class="text-sm text-gray-600">Clean all water troughs today to prevent algae growth</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section> |
| <h2 class="text-2xl font-semibold text-dark mb-6">Historical Trends & Predictions</h2> |
| |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="bg-dark text-white px-4 py-3"> |
| <h3 class="font-bold">Weather Impact on Livestock Performance</h3> |
| </div> |
| <div class="p-4"> |
| <div class="flex flex-col md:flex-row"> |
| <div class="w-full md:w-1/2 p-4"> |
| <h4 class="font-medium text-dark mb-4">Temperature vs. Milk Production</h4> |
| <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center"> |
| <img src="https://via.placeholder.com/300x200?text=Temperature+vs+Milk+Production" alt="Temperature vs Milk Production Chart" class="w-full h-auto rounded"> |
| </div> |
| <p class="text-sm text-gray-600 mt-2"> |
| Historical data shows milk production drops by 0.5% per degree above 25°C. |
| </p> |
| </div> |
| <div class="w-full md:w-1/2 p-4"> |
| <h4 class="font-medium text-dark mb-4">Rainfall vs. Weight Gain</h4> |
| <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center"> |
| <img src="https://via.placeholder.com/300x200?text=Rainfall+vs+Weight+Gain" alt="Rainfall vs Weight Gain Chart" class="w-full h-auto rounded"> |
| </div> |
| <p class="text-sm text-gray-600 mt-2"> |
| Optimal weight gain occurs with 5-10mm rainfall per week during grazing season. |
| </p> |
| </div> |
| </div> |
| |
| <div class="mt-6 p-4 bg-light rounded-lg"> |
| <h4 class="font-medium text-dark mb-2">30-Day Prediction</h4> |
| <p class="text-sm text-gray-700"> |
| Based on weather forecasts and historical patterns, we predict a 12% increase in feed efficiency over the next month due to favorable grazing conditions. However, prepare for potential heat stress in week 3. |
| </p> |
| <div class="mt-4 flex justify-center"> |
| <button class="bg-primary hover:bg-opacity-90 text-white px-4 py-2 rounded-full flex items-center space-x-2"> |
| <i class="fas fa-download"></i> |
| <span>Download Full Report</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-dark text-white py-6"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold flex items-center"> |
| <i class="fas fa-cloud-sun mr-2"></i> |
| Livestock Weather Optimizer |
| </h3> |
| <p class="text-sm text-gray-300 mt-1">Helping farmers make data-driven decisions since 2023</p> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fas fa-envelope"></i> |
| </a> |
| </div> |
| </div> |
| <div class="mt-6 pt-6 border-t border-gray-700 text-sm text-gray-300 text-center"> |
| <p>© 2023 Livestock Weather Optimizer. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| setGauge('cattle-gauge', 0.78); |
| setGauge('sheep-gauge', 0.65); |
| setGauge('poultry-gauge', 0.82); |
| |
| |
| document.getElementById('refresh-btn').addEventListener('click', function() { |
| |
| this.classList.add('animate-spin'); |
| setTimeout(() => { |
| this.classList.remove('animate-spin'); |
| document.getElementById('update-time').textContent = new Date().toLocaleTimeString(); |
| |
| |
| showNotification('Data refreshed successfully!', 'success'); |
| }, 1000); |
| }); |
| |
| |
| setInterval(() => { |
| |
| const randomTemp = Math.floor(Math.random() * 5) + 22; |
| document.querySelector('.weather-card:nth-child(1) .text-4xl').textContent = randomTemp + '°C'; |
| |
| const randomHealth = (Math.random() * 0.1) + 0.75; |
| setGauge('cattle-gauge', randomHealth); |
| document.querySelector('#cattle-gauge + .gauge-value').textContent = Math.round(randomHealth * 100) + '%'; |
| }, 10000); |
| }); |
| |
| function setGauge(id, percent) { |
| const gauge = document.getElementById(id); |
| const rotation = percent * 180; |
| gauge.style.transform = `rotate(${rotation}deg)`; |
| |
| |
| if (percent > 0.7) { |
| gauge.style.backgroundColor = '#86A789'; |
| } else if (percent > 0.4) { |
| gauge.style.backgroundColor = '#FFC107'; |
| } else { |
| gauge.style.backgroundColor = '#F44336'; |
| } |
| } |
| |
| function showNotification(message, type) { |
| const notification = document.createElement('div'); |
| notification.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${ |
| type === 'success' ? 'bg-green-500' : 'bg-red-500' |
| }`; |
| notification.textContent = message; |
| document.body.appendChild(notification); |
| |
| setTimeout(() => { |
| notification.classList.add('opacity-0', 'transition-opacity', 'duration-500'); |
| setTimeout(() => { |
| notification.remove(); |
| }, 500); |
| }, 3000); |
| } |
| </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=Tame342/let-see" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
