Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MeowMats GPS | Pet Care Dashboard</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #fdf2f5; | |
| } | |
| .hot-pink-bg { | |
| background-color: #ff69b4; | |
| } | |
| .hot-pink-text { | |
| color: #ff69b4; | |
| } | |
| .hot-pink-border { | |
| border-color: #ff69b4; | |
| } | |
| .paw-print { | |
| position: absolute; | |
| opacity: 0.1; | |
| z-index: 0; | |
| } | |
| .map-container { | |
| height: 300px; | |
| background-color: #e2e8f0; | |
| border-radius: 12px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pet-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border: 3px solid #ff69b4; | |
| } | |
| .stats-card { | |
| transition: all 0.3s ease; | |
| } | |
| .stats-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .activity-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating-cat { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Paw prints background decoration --> | |
| <div class="paw-print" style="top: 10%; left: 5%;"> | |
| <i class="fas fa-paw text-4xl hot-pink-text"></i> | |
| </div> | |
| <div class="paw-print" style="top: 30%; right: 8%;"> | |
| <i class="fas fa-paw text-5xl hot-pink-text"></i> | |
| </div> | |
| <div class="paw-print" style="bottom: 15%; left: 10%;"> | |
| <i class="fas fa-paw text-3xl hot-pink-text"></i> | |
| </div> | |
| <div class="container mx-auto px-4 py-8 relative z-10"> | |
| <!-- Header --> | |
| <header class="flex justify-between items-center mb-8"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-cat text-3xl hot-pink-text mr-3"></i> | |
| <h1 class="text-3xl font-bold"> | |
| <span class="hot-pink-text">Meow</span>Mats <span class="text-gray-600">GPS</span> | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="bg-white rounded-full p-2 shadow-md hover:bg-gray-100"> | |
| <i class="fas fa-bell hot-pink-text"></i> | |
| </button> | |
| <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center"> | |
| <i class="fas fa-user hot-pink-text"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <main> | |
| <!-- Pet Profile Section --> | |
| <section class="mb-8"> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 flex flex-col md:flex-row items-center"> | |
| <div class="flex items-center mb-4 md:mb-0 md:mr-6"> | |
| <div class="pet-avatar rounded-full bg-pink-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-cat text-4xl hot-pink-text"></i> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-bold">Whiskers</h2> | |
| <p class="text-gray-500">Domestic Shorthair</p> | |
| </div> | |
| </div> | |
| <div class="flex-1 grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="stats-card bg-white p-4 rounded-lg border hot-pink-border border-l-4 shadow-sm"> | |
| <p class="text-gray-500 text-sm">Age</p> | |
| <p class="font-bold">3 years</p> | |
| </div> | |
| <div class="stats-card bg-white p-4 rounded-lg border hot-pink-border border-l-4 shadow-sm"> | |
| <p class="text-gray-500 text-sm">Weight</p> | |
| <p class="font-bold">4.2 kg</p> | |
| </div> | |
| <div class="stats-card bg-white p-4 rounded-lg border hot-pink-border border-l-4 shadow-sm"> | |
| <p class="text-gray-500 text-sm">Last Vet Visit</p> | |
| <p class="font-bold">May 15</p> | |
| </div> | |
| <div class="stats-card bg-white p-4 rounded-lg border hot-pink-border border-l-4 shadow-sm"> | |
| <p class="text-gray-500 text-sm">Chip ID</p> | |
| <p class="font-bold">#MEOW2468</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- GPS Tracking Section --> | |
| <section class="mb-8"> | |
| <div class="bg-white rounded-2xl shadow-lg p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold flex items-center"> | |
| <i class="fas fa-map-marked-alt hot-pink-text mr-2"></i> | |
| Live GPS Tracking | |
| </h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="activity-dot bg-green-500"></span> | |
| <span class="text-sm">Active now</span> | |
| </div> | |
| </div> | |
| <div class="map-container relative"> | |
| <!-- This would be replaced with an actual map API in production --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="floating-cat mb-2"> | |
| <i class="fas fa-cat text-4xl hot-pink-text"></i> | |
| </div> | |
| <p class="text-gray-600">Whiskers is currently in the backyard</p> | |
| <p class="text-sm text-gray-500">Last updated: 2 minutes ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-pink-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-route hot-pink-text"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Today's Distance</p> | |
| <p class="font-bold">0.8 km</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-pink-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-clock hot-pink-text"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Outdoor Time</p> | |
| <p class="font-bold">2h 15m</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-pink-50 p-4 rounded-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-map-pin hot-pink-text"></i> | |
| </div> | |
| <div> | |
| <p class="text-gray-500 text-sm">Favorite Spot</p> | |
| <p class="font-bold">Garden Shed</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Olay Hot Pink Special Section --> | |
| <section class="mb-8"> | |
| <div class="bg-gradient-to-r from-pink-400 to-pink-600 rounded-2xl shadow-lg p-6 text-white"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-4 md:mb-0"> | |
| <h2 class="text-2xl font-bold mb-2">Olay Hot Pink Special</h2> | |
| <p class="mb-4">Pamper your feline friend with our limited edition pink pet care collection. 20% off this week only!</p> | |
| <button class="bg-white text-pink-600 font-bold py-2 px-6 rounded-full hover:bg-gray-100 transition"> | |
| Shop Now | |
| </button> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://placekitten.com/300/200" alt="Pink pet products" class="rounded-lg shadow-md border-4 border-white"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Activity Feed --> | |
| <section> | |
| <h2 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-history hot-pink-text mr-2"></i> | |
| Recent Activity | |
| </h2> | |
| <div class="bg-white rounded-2xl shadow-lg p-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-map-marker-alt hot-pink-text"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Location update</p> | |
| <p class="text-sm text-gray-500">Whiskers entered the safe zone (backyard) at 3:42 PM</p> | |
| <p class="text-xs text-gray-400">10 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-bowl-food hot-pink-text"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Feeding time</p> | |
| <p class="text-sm text-gray-500">Automatic feeder dispensed dinner portion</p> | |
| <p class="text-xs text-gray-400">1 hour ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-door-open hot-pink-text"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Pet door activity</p> | |
| <p class="text-sm text-gray-500">Whiskers went outside through the smart pet door</p> | |
| <p class="text-xs text-gray-400">2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-4 text-pink-600 font-medium flex items-center"> | |
| View all activity | |
| <i class="fas fa-chevron-right ml-1 text-sm"></i> | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Bottom Navigation --> | |
| <nav class="fixed bottom-0 left-0 right-0 bg-white shadow-lg rounded-t-2xl flex justify-around py-3 px-4"> | |
| <a href="#" class="flex flex-col items-center text-pink-600"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-map text-xl"></i> | |
| <span class="text-xs mt-1">Map</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-heart text-xl"></i> | |
| <span class="text-xs mt-1">Health</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center text-gray-500"> | |
| <i class="fas fa-cog text-xl"></i> | |
| <span class="text-xs mt-1">Settings</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <script> | |
| // Simple animation for the floating cat icon | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const floatingCat = document.querySelector('.floating-cat'); | |
| // Add click effect | |
| floatingCat.addEventListener('click', function() { | |
| this.style.transform = 'scale(1.2)'; | |
| setTimeout(() => { | |
| this.style.transform = ''; | |
| }, 300); | |
| }); | |
| // Simulate GPS updates | |
| setInterval(() => { | |
| const statusDot = document.querySelector('.activity-dot'); | |
| const statusText = document.querySelector('.activity-dot + span'); | |
| // Randomly change status for demo purposes | |
| if (Math.random() > 0.8) { | |
| statusDot.classList.remove('bg-green-500'); | |
| statusDot.classList.add('bg-yellow-500'); | |
| statusText.textContent = 'Moving'; | |
| } else { | |
| statusDot.classList.remove('bg-yellow-500'); | |
| statusDot.classList.add('bg-green-500'); | |
| statusText.textContent = 'Active now'; | |
| } | |
| }, 5000); | |
| }); | |
| </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=Puretarantino/cam-by-mt95" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |