Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kamil & Martyna's Wedding Planner</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> | |
| .countdown-number { | |
| font-size: clamp(1.5rem, 5vw, 3rem); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .task-checkbox:checked + .task-label { | |
| text-decoration: line-through; | |
| color: #9ca3af; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| position: fixed; | |
| z-index: 50; | |
| height: 100vh; | |
| } | |
| .sidebar.open { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Mobile Menu Button --> | |
| <div class="md:hidden fixed top-4 left-4 z-50"> | |
| <button id="menuBtn" class="p-2 rounded-lg bg-white shadow-md text-pink-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar w-64 bg-gradient-to-b from-pink-600 to-pink-500 text-white fixed h-full overflow-y-auto"> | |
| <div class="p-6 flex flex-col items-center"> | |
| <div class="w-24 h-24 rounded-full bg-white flex items-center justify-center mb-4 shadow-lg"> | |
| <i class="fas fa-heart text-pink-500 text-4xl"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold text-center">Kamil & Martyna</h1> | |
| <p class="text-pink-100 text-sm mt-1">October 12, 2024</p> | |
| </div> | |
| <nav class="mt-8"> | |
| <div class="px-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="w-full bg-pink-700 text-white placeholder-pink-200 rounded-lg px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-pink-300"> | |
| <i class="fas fa-search absolute left-3 top-3 text-pink-200"></i> | |
| </div> | |
| </div> | |
| <ul class="mt-6"> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 bg-pink-700 text-white"> | |
| <i class="fas fa-home mr-3"></i> | |
| Dashboard | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 hover:bg-pink-700 text-white"> | |
| <i class="fas fa-tasks mr-3"></i> | |
| Tasks | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 hover:bg-pink-700 text-white"> | |
| <i class="fas fa-dollar-sign mr-3"></i> | |
| Budget | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 hover:bg-pink-700 text-white"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| Calendar | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 hover:bg-pink-700 text-white"> | |
| <i class="fas fa-chart-pie mr-3"></i> | |
| Statistics | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 hover:bg-pink-700 text-white"> | |
| <i class="fas fa-users mr-3"></i> | |
| Guest List | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 hover:bg-pink-700 text-white"> | |
| <i class="fas fa-utensils mr-3"></i> | |
| Vendors | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center px-6 py-3 hover:bg-pink-700 text-white"> | |
| <i class="fas fa-images mr-3"></i> | |
| Gallery | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="absolute bottom-0 w-full p-4 bg-pink-700"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-white font-medium">Admin</p> | |
| <p class="text-pink-200 text-xs">Kamil & Martyna</p> | |
| </div> | |
| <button class="ml-auto text-pink-200 hover:text-white"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="md:ml-64 min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-4 flex items-center justify-between"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Dashboard</h2> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Countdown and Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"> | |
| <!-- Countdown Card --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 col-span-1 md:col-span-2"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Countdown to the Big Day</h3> | |
| <div class="flex justify-between items-center"> | |
| <div class="text-center"> | |
| <div class="countdown-number font-bold text-pink-600" id="days">00</div> | |
| <div class="text-xs text-gray-500">Days</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="countdown-number font-bold text-pink-600" id="hours">00</div> | |
| <div class="text-xs text-gray-500">Hours</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="countdown-number font-bold text-pink-600" id="minutes">00</div> | |
| <div class="text-xs text-gray-500">Minutes</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="countdown-number font-bold text-pink-600" id="seconds">00</div> | |
| <div class="text-xs text-gray-500">Seconds</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Budget Summary --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Budget Summary</h3> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-600">Total Budget</span> | |
| <span class="font-medium">$25,000</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-sm text-gray-600">Spent</span> | |
| <span class="font-medium text-red-500">$8,750</span> | |
| </div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-sm text-gray-600">Remaining</span> | |
| <span class="font-medium text-green-500">$16,250</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-pink-600 h-2 rounded-full" style="width: 35%"></div> | |
| </div> | |
| </div> | |
| <!-- Tasks Progress --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-4">Tasks Progress</h3> | |
| <div class="flex items-center justify-center"> | |
| <svg class="w-20 h-20"> | |
| <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="30" cx="40" cy="40" /> | |
| <circle class="text-pink-600 progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="30" cx="40" cy="40" stroke-dasharray="188.49555921538757" stroke-dashoffset="56.54866776461627" /> | |
| </svg> | |
| <div class="ml-4"> | |
| <div class="text-2xl font-bold text-pink-600">70%</div> | |
| <div class="text-sm text-gray-500">Completed</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Tasks and Recent Activity --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- Upcoming Tasks --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden lg:col-span-2"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-700">Upcoming Tasks</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="task-checkbox rounded-full border-gray-300 text-pink-600 focus:ring-pink-500"> | |
| <label class="task-label ml-3 flex-1"> | |
| <div class="font-medium">Book photographer</div> | |
| <div class="text-sm text-gray-500">Due tomorrow</div> | |
| </label> | |
| <span class="px-2 py-1 text-xs rounded-full bg-pink-100 text-pink-800">High</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="task-checkbox rounded-full border-gray-300 text-pink-600 focus:ring-pink-500"> | |
| <label class="task-label ml-3 flex-1"> | |
| <div class="font-medium">Finalize guest list</div> | |
| <div class="text-sm text-gray-500">Due in 3 days</div> | |
| </label> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="task-checkbox rounded-full border-gray-300 text-pink-600 focus:ring-pink-500" checked> | |
| <label class="task-label ml-3 flex-1"> | |
| <div class="font-medium">Book venue</div> | |
| <div class="text-sm text-gray-500">Completed</div> | |
| </label> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Done</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="task-checkbox rounded-full border-gray-300 text-pink-600 focus:ring-pink-500"> | |
| <label class="task-label ml-3 flex-1"> | |
| <div class="font-medium">Choose wedding cake</div> | |
| <div class="text-sm text-gray-500">Due in 1 week</div> | |
| </label> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Medium</span> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="task-checkbox rounded-full border-gray-300 text-pink-600 focus:ring-pink-500"> | |
| <label class="task-label ml-3 flex-1"> | |
| <div class="font-medium">Send save-the-dates</div> | |
| <div class="text-sm text-gray-500">Due in 2 weeks</div> | |
| </label> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Low</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 text-center"> | |
| <button class="text-pink-600 hover:text-pink-800 font-medium">View All Tasks</button> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <h3 class="text-lg font-semibold text-gray-700">Recent Activity</h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex mb-4 pb-4 border-b border-gray-100"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-check text-pink-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Venue deposit paid</p> | |
| <p class="text-xs text-gray-500">Today, 10:45 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4 pb-4 border-b border-gray-100"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-user-plus text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">5 guests added</p> | |
| <p class="text-xs text-gray-500">Yesterday, 4:30 PM</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4 pb-4 border-b border-gray-100"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-calendar-check text-green-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Photographer meeting scheduled</p> | |
| <p class="text-xs text-gray-500">Yesterday, 11:20 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4 pb-4 border-b border-gray-100"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-tasks text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Task "Choose flowers" completed</p> | |
| <p class="text-xs text-gray-500">2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-dollar-sign text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-800">Budget updated</p> | |
| <p class="text-xs text-gray-500">3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Budget Breakdown --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-semibold text-gray-700">Budget Breakdown</h3> | |
| <button class="text-pink-600 hover:text-pink-800 font-medium">View Details</button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-lg bg-pink-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-home text-pink-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Venue</p> | |
| <p class="font-medium">$8,000 / $10,000</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-pink-600 h-1.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-camera text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Photography</p> | |
| <p class="font-medium">$1,500 / $3,000</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-utensils text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Catering</p> | |
| <p class="font-medium">$2,000 / $5,000</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-green-600 h-1.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-tshirt text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Attire</p> | |
| <p class="font-medium">$1,200 / $2,500</p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-purple-600 h-1.5 rounded-full" style="width: 48%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Events --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <h3 class="text-lg font-semibold text-gray-700">Upcoming Events</h3> | |
| <button class="text-pink-600 hover:text-pink-800 font-medium">View Calendar</button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4 mt-1"> | |
| <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-calendar-day text-pink-600"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">Photographer Meeting</h4> | |
| <span class="text-xs px-2 py-1 rounded-full bg-pink-100 text-pink-800">Tomorrow</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Discuss wedding day schedule and shot list</p> | |
| <div class="flex items-center text-xs text-gray-500 mt-2"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>10:00 AM - 11:30 AM</span> | |
| <i class="fas fa-map-marker-alt ml-3 mr-1"></i> | |
| <span>Studio Downtown</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4 mt-1"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-ring text-blue-600"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">Dress Fitting</h4> | |
| <span class="text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-800">In 5 days</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">First fitting for the wedding dress</p> | |
| <div class="flex items-center text-xs text-gray-500 mt-2"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>2:00 PM - 3:30 PM</span> | |
| <i class="fas fa-map-marker-alt ml-3 mr-1"></i> | |
| <span>Bridal Boutique</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mr-4 mt-1"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-cake text-green-600"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">Cake Tasting</h4> | |
| <span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800">In 1 week</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Sample flavors and designs for wedding cake</p> | |
| <div class="flex items-center text-xs text-gray-500 mt-2"> | |
| <i class="far fa-clock mr-1"></i> | |
| <span>1:00 PM - 2:30 PM</span> | |
| <i class="fas fa-map-marker-alt ml-3 mr-1"></i> | |
| <span>Sweet Delights Bakery</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| const menuBtn = document.getElementById('menuBtn'); | |
| const sidebar = document.getElementById('sidebar'); | |
| menuBtn.addEventListener('click', () => { | |
| sidebar.classList.toggle('open'); | |
| }); | |
| // Countdown timer | |
| function updateCountdown() { | |
| const weddingDate = new Date('October 12, 2024 00:00:00').getTime(); | |
| const now = new Date().getTime(); | |
| const distance = weddingDate - now; | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| document.getElementById('days').textContent = days.toString().padStart(2, '0'); | |
| document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); | |
| document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); | |
| document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); | |
| } | |
| updateCountdown(); | |
| setInterval(updateCountdown, 1000); | |
| // Task completion toggle | |
| document.querySelectorAll('.task-checkbox').forEach(checkbox => { | |
| checkbox.addEventListener('change', function() { | |
| const label = this.nextElementSibling; | |
| if (this.checked) { | |
| label.classList.add('line-through', 'text-gray-400'); | |
| } else { | |
| label.classList.remove('line-through', 'text-gray-400'); | |
| } | |
| }); | |
| }); | |
| // Fade in animation for elements | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const elements = document.querySelectorAll('.countdown-number, .progress-ring__circle, .task-label'); | |
| elements.forEach((el, index) => { | |
| setTimeout(() => { | |
| el.classList.add('fade-in'); | |
| }, index * 100); | |
| }); | |
| }); | |
| </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=kamioll999/weeding" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |