|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Outfit Manager | Daily Style 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> |
|
|
.outfit-card:hover .outfit-actions { |
|
|
opacity: 1; |
|
|
} |
|
|
.weather-icon { |
|
|
filter: drop-shadow(0 0 2px rgba(255,255,255,0.7)); |
|
|
} |
|
|
.clothing-item { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.clothing-item:hover { |
|
|
transform: scale(1.05); |
|
|
z-index: 10; |
|
|
} |
|
|
.calendar-day.active { |
|
|
background-color: #6366f1; |
|
|
color: white; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
<div class="min-h-screen flex"> |
|
|
|
|
|
<div class="w-64 bg-indigo-800 text-white p-4 hidden md:block"> |
|
|
<div class="flex items-center space-x-2 mb-8"> |
|
|
<i class="fas fa-tshirt text-2xl text-indigo-300"></i> |
|
|
<h1 class="text-xl font-bold">Outfit Manager</h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-2 p-2 rounded bg-indigo-700"> |
|
|
<i class="fas fa-calendar-day w-5"></i> |
|
|
<span>Today's Outfit</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-archive w-5"></i> |
|
|
<span>Wardrobe</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-calendar-alt w-5"></i> |
|
|
<span>Outfit Planner</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-chart-line w-5"></i> |
|
|
<span>Statistics</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700"> |
|
|
<i class="fas fa-cog w-5"></i> |
|
|
<span>Settings</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
<div class="mt-auto pt-8"> |
|
|
<div class="bg-indigo-900 p-4 rounded-lg"> |
|
|
<h3 class="font-medium mb-2">Outfit Inspiration</h3> |
|
|
<p class="text-sm text-indigo-300">"A great outfit is like a good day - it starts with the right foundation."</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex-1 p-6 overflow-auto"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div class="md:hidden"> |
|
|
<button class="text-gray-600"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold text-gray-800">Today's Outfit</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<i class="fas fa-bell text-gray-500 text-xl"></i> |
|
|
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center text-white font-medium">JD</div> |
|
|
<span class="hidden md:inline">Jane Doe</span> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> |
|
|
<div class="bg-white rounded-xl shadow p-6 flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-gray-500 text-sm">Today</h3> |
|
|
<p class="text-2xl font-bold text-gray-800">June 14, 2023</p> |
|
|
</div> |
|
|
<div class="text-4xl"> |
|
|
<i class="fas fa-calendar-alt text-indigo-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow p-6 flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-gray-500 text-sm">Weather</h3> |
|
|
<p class="text-2xl font-bold text-gray-800">Sunny, 24°C</p> |
|
|
</div> |
|
|
<div class="text-4xl weather-icon"> |
|
|
<i class="fas fa-sun text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl shadow p-6 flex items-center justify-between"> |
|
|
<div> |
|
|
<h3 class="text-gray-500 text-sm">Occasion</h3> |
|
|
<p class="text-2xl font-bold text-gray-800">Work Day</p> |
|
|
</div> |
|
|
<div class="text-4xl"> |
|
|
<i class="fas fa-briefcase text-indigo-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> |
|
|
|
|
|
<div class="lg:col-span-2 bg-white rounded-xl shadow overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-100 flex justify-between items-center"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Your Outfit for Today</h2> |
|
|
<button class="text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-random"></i> Shuffle |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="relative bg-gray-100 rounded-lg h-64 flex items-center justify-center"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<div class="text-gray-300 text-6xl"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative z-10 grid grid-cols-3 gap-4 w-full max-w-md"> |
|
|
|
|
|
<div class="col-span-3 flex justify-center"> |
|
|
<div class="clothing-item bg-white p-3 rounded-lg shadow-md border border-indigo-200 transform hover:scale-105"> |
|
|
<div class="h-24 w-24 bg-indigo-100 rounded flex items-center justify-center"> |
|
|
<i class="fas fa-tshirt text-indigo-500 text-3xl"></i> |
|
|
</div> |
|
|
<p class="text-xs text-center mt-1">Silk Blouse</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="col-start-2 flex justify-center"> |
|
|
<div class="clothing-item bg-white p-3 rounded-lg shadow-md border border-indigo-200 transform hover:scale-105"> |
|
|
<div class="h-24 w-24 bg-indigo-100 rounded flex items-center justify-center"> |
|
|
<i class="fas fa-vest text-indigo-500 text-3xl"></i> |
|
|
</div> |
|
|
<p class="text-xs text-center mt-1">Tailored Pants</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="col-span-3 flex justify-center"> |
|
|
<div class="clothing-item bg-white p-3 rounded-lg shadow-md border border-indigo-200 transform hover:scale-105"> |
|
|
<div class="h-24 w-24 bg-indigo-100 rounded flex items-center justify-center"> |
|
|
<i class="fas fa-shoe-prints text-indigo-500 text-3xl"></i> |
|
|
</div> |
|
|
<p class="text-xs text-center mt-1">Leather Loafers</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<span class="inline-block px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Professional</span> |
|
|
<span class="inline-block px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Comfortable</span> |
|
|
</div> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2"> |
|
|
<i class="fas fa-check"></i> |
|
|
<span>Confirm Outfit</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-100"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Suggested Outfits</h2> |
|
|
</div> |
|
|
<div class="p-4 space-y-4"> |
|
|
<div class="outfit-card relative bg-gray-50 rounded-lg p-3 border border-gray-200 hover:border-indigo-300"> |
|
|
<div class="flex space-x-3"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="h-12 w-12 bg-indigo-100 rounded flex items-center justify-center"> |
|
|
<i class="fas fa-tshirt text-indigo-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<p class="text-sm font-medium text-gray-900">Casual Friday</p> |
|
|
<p class="text-xs text-gray-500">Jeans + Blouse + Sneakers</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="outfit-actions absolute top-2 right-2 opacity-0 transition-opacity duration-200 flex space-x-1"> |
|
|
<button class="p-1 text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-eye text-xs"></i> |
|
|
</button> |
|
|
<button class="p-1 text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="outfit-card relative bg-gray-50 rounded-lg p-3 border border-gray-200 hover:border-indigo-300"> |
|
|
<div class="flex space-x-3"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="h-12 w-12 bg-indigo-100 rounded flex items-center justify-center"> |
|
|
<i class="fas fa-tshirt text-indigo-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<p class="text-sm font-medium text-gray-900">Business Formal</p> |
|
|
<p class="text-xs text-gray-500">Blazer + Dress + Heels</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="outfit-actions absolute top-2 right-2 opacity-0 transition-opacity duration-200 flex space-x-1"> |
|
|
<button class="p-1 text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-eye text-xs"></i> |
|
|
</button> |
|
|
<button class="p-1 text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="outfit-card relative bg-gray-50 rounded-lg p-3 border border-gray-200 hover:border-indigo-300"> |
|
|
<div class="flex space-x-3"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="h-12 w-12 bg-indigo-100 rounded flex items-center justify-center"> |
|
|
<i class="fas fa-tshirt text-indigo-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1 min-w-0"> |
|
|
<p class="text-sm font-medium text-gray-900">Smart Casual</p> |
|
|
<p class="text-xs text-gray-500">Shirt + Chinos + Loafers</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="outfit-actions absolute top-2 right-2 opacity-0 transition-opacity duration-200 flex space-x-1"> |
|
|
<button class="p-1 text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-eye text-xs"></i> |
|
|
</button> |
|
|
<button class="p-1 text-indigo-600 hover:text-indigo-800"> |
|
|
<i class="fas fa-check text-xs"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:text-indigo-600 hover:border-indigo-300 flex items-center justify-center space-x-2"> |
|
|
<i class="fas fa-plus"></i> |
|
|
<span>Generate More</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow overflow-hidden mb-8"> |
|
|
<div class="p-4 border-b border-gray-100 flex justify-between items-center"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Weekly Outfit Planner</h2> |
|
|
<button class="text-indigo-600 hover:text-indigo-800 flex items-center space-x-1"> |
|
|
<i class="fas fa-plus"></i> |
|
|
<span>Add Event</span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="grid grid-cols-7 gap-2 mb-4"> |
|
|
<div class="text-center font-medium text-gray-500 text-sm">Sun</div> |
|
|
<div class="text-center font-medium text-gray-500 text-sm">Mon</div> |
|
|
<div class="text-center font-medium text-gray-500 text-sm">Tue</div> |
|
|
<div class="text-center font-medium text-gray-500 text-sm">Wed</div> |
|
|
<div class="text-center font-medium text-gray-500 text-sm">Thu</div> |
|
|
<div class="text-center font-medium text-gray-500 text-sm">Fri</div> |
|
|
<div class="text-center font-medium text-gray-500 text-sm">Sat</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-7 gap-2"> |
|
|
<div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50"> |
|
|
<div class="text-xs font-medium">11</div> |
|
|
</div> |
|
|
<div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50"> |
|
|
<div class="text-xs font-medium">12</div> |
|
|
</div> |
|
|
<div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50"> |
|
|
<div class="text-xs font-medium">13</div> |
|
|
</div> |
|
|
<div class="calendar-day active h-24 p-2 rounded-lg border border-indigo-300 text-center cursor-pointer bg-indigo-100"> |
|
|
<div class="text-xs font-medium">14</div> |
|
|
<div class="mt-1 text-xs bg-white rounded p-1 truncate">Work Day</div> |
|
|
</div> |
|
|
<div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50"> |
|
|
<div class="text-xs font-medium">15</div> |
|
|
<div class="mt-1 text-xs bg-indigo-100 rounded p-1 truncate">Meeting</div> |
|
|
</div> |
|
|
<div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50"> |
|
|
<div class="text-xs font-medium">16</div> |
|
|
<div class="mt-1 text-xs bg-green-100 rounded p-1 truncate">Casual Friday</div> |
|
|
</div> |
|
|
<div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50"> |
|
|
<div class="text-xs font-medium">17</div> |
|
|
<div class="mt-1 text-xs bg-yellow-100 rounded p-1 truncate">Weekend</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-100"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2> |
|
|
</div> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
<div class="p-4 flex space-x-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center"> |
|
|
<i class="fas fa-tshirt text-indigo-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-900">Added new item</p> |
|
|
<p class="text-sm text-gray-500">Silk blouse added to wardrobe</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 flex space-x-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> |
|
|
<i class="fas fa-calendar-check text-green-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-900">Outfit planned</p> |
|
|
<p class="text-sm text-gray-500">Business casual for Thursday</p> |
|
|
<p class="text-xs text-gray-400 mt-1">Yesterday</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4 flex space-x-4"> |
|
|
<div class="flex-shrink-0"> |
|
|
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-cloud-sun text-blue-500"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<p class="text-sm font-medium text-gray-900">Weather update</p> |
|
|
<p class="text-sm text-gray-500">Forecast changed to sunny for Friday</p> |
|
|
<p class="text-xs text-gray-400 mt-1">2 days ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const calendarDays = document.querySelectorAll('.calendar-day'); |
|
|
calendarDays.forEach(day => { |
|
|
day.addEventListener('click', function() { |
|
|
calendarDays.forEach(d => d.classList.remove('active', 'bg-indigo-100', 'border-indigo-300')); |
|
|
this.classList.add('active', 'bg-indigo-100', 'border-indigo-300'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const outfitCards = document.querySelectorAll('.outfit-card'); |
|
|
outfitCards.forEach(card => { |
|
|
card.addEventListener('mouseenter', function() { |
|
|
this.querySelector('.outfit-actions').style.opacity = '1'; |
|
|
}); |
|
|
card.addEventListener('mouseleave', function() { |
|
|
this.querySelector('.outfit-actions').style.opacity = '0'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const clothingItems = document.querySelectorAll('.clothing-item'); |
|
|
clothingItems.forEach(item => { |
|
|
item.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'scale(1.05)'; |
|
|
this.style.zIndex = '10'; |
|
|
}); |
|
|
item.addEventListener('mouseleave', function() { |
|
|
this.style.transform = 'scale(1)'; |
|
|
this.style.zIndex = '1'; |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</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=eyesss/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
