|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MEDIATORZ | AI Image Management</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: '#6C63FF', |
|
|
secondary: '#4F46E5', |
|
|
dark: '#1E1E2C', |
|
|
light: '#F8F9FA', |
|
|
accent: '#FF6584', |
|
|
}, |
|
|
fontFamily: { |
|
|
sans: ['Poppins', 'sans-serif'], |
|
|
mono: ['Fira Code', 'monospace'], |
|
|
}, |
|
|
boxShadow: { |
|
|
'neumorph': '8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff', |
|
|
'neumorph-inset': 'inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff', |
|
|
'neumorph-sm': '4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff', |
|
|
'neumorph-lg': '12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #F0F2F5; |
|
|
color: #1E1E2C; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.neumorph { |
|
|
border-radius: 16px; |
|
|
background: #F0F2F5; |
|
|
box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.neumorph:hover { |
|
|
box-shadow: 12px 12px 24px #d1d9e6, -12px -12px 24px #ffffff; |
|
|
} |
|
|
|
|
|
.neumorph-inset { |
|
|
border-radius: 16px; |
|
|
background: #F0F2F5; |
|
|
box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff; |
|
|
} |
|
|
|
|
|
.neumorph-btn { |
|
|
border-radius: 12px; |
|
|
background: #F0F2F5; |
|
|
box-shadow: 4px 4px 8px #d1d9e6, -4px -4px 8px #ffffff; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.neumorph-btn:active { |
|
|
box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff; |
|
|
} |
|
|
|
|
|
.neumorph-btn-primary { |
|
|
border-radius: 12px; |
|
|
background: #6C63FF; |
|
|
box-shadow: 4px 4px 8px #5a52d9, -4px -4px 8px #7e74ff; |
|
|
color: white; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.neumorph-btn-primary:active { |
|
|
box-shadow: inset 2px 2px 4px #5a52d9, inset -2px -2px 4px #7e74ff; |
|
|
} |
|
|
|
|
|
.tag { |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
border-radius: 20px; |
|
|
padding: 4px 12px; |
|
|
background: #F0F2F5; |
|
|
box-shadow: 2px 2px 4px #d1d9e6, -2px -2px 4px #ffffff; |
|
|
margin-right: 8px; |
|
|
margin-bottom: 8px; |
|
|
font-size: 0.8rem; |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.tag:hover { |
|
|
box-shadow: 3px 3px 6px #d1d9e6, -3px -3px 6px #ffffff; |
|
|
} |
|
|
|
|
|
.upload-area { |
|
|
border: 2px dashed #d1d9e6; |
|
|
border-radius: 16px; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.upload-area:hover { |
|
|
border-color: #6C63FF; |
|
|
} |
|
|
|
|
|
.upload-area.dragover { |
|
|
background-color: rgba(108, 99, 255, 0.1); |
|
|
border-color: #6C63FF; |
|
|
} |
|
|
|
|
|
.image-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-origin: center; |
|
|
} |
|
|
|
|
|
.image-card:hover { |
|
|
transform: scale(1.02); |
|
|
} |
|
|
|
|
|
.color-swatch { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
margin-right: 4px; |
|
|
box-shadow: 1px 1px 3px rgba(0,0,0,0.2); |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: #F0F2F5; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: #d1d9e6; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: #6C63FF; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 4s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes pulse { |
|
|
0% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0.4); } |
|
|
70% { box-shadow: 0 0 0 10px rgba(108, 99, 255, 0); } |
|
|
100% { box-shadow: 0 0 0 0 rgba(108, 99, 255, 0); } |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(45deg, #6C63FF, #FF6584); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen flex flex-col"> |
|
|
|
|
|
<header class="py-6 px-8 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="neumorph w-16 h-16 rounded-full flex items-center justify-center floating"> |
|
|
<i class="fas fa-eye text-3xl gradient-text"></i> |
|
|
</div> |
|
|
<h1 class="text-3xl font-bold gradient-text">MEDIATORZ</h1> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="neumorph-inset px-4 py-2 rounded-full flex items-center"> |
|
|
<i class="fas fa-search text-gray-500 mr-2"></i> |
|
|
<input type="text" placeholder="Search images..." class="bg-transparent outline-none w-64 text-gray-700"> |
|
|
</div> |
|
|
<button class="neumorph-btn-primary px-6 py-2 rounded-full font-medium"> |
|
|
<i class="fas fa-user mr-2"></i> Account |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 px-8 pb-12"> |
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<aside class="lg:col-span-1"> |
|
|
<div class="neumorph p-6 mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 gradient-text">Collections</h2> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition"> |
|
|
<i class="fas fa-images mr-3 text-primary"></i> |
|
|
<span>All Images</span> |
|
|
<span class="ml-auto bg-primary text-white text-xs px-2 py-1 rounded-full">1,248</span> |
|
|
</li> |
|
|
<li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition"> |
|
|
<i class="fas fa-star mr-3 text-yellow-500"></i> |
|
|
<span>Favorites</span> |
|
|
<span class="ml-auto bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">42</span> |
|
|
</li> |
|
|
<li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition"> |
|
|
<i class="fas fa-tags mr-3 text-accent"></i> |
|
|
<span>Tagged</span> |
|
|
</li> |
|
|
<li class="flex items-center py-2 px-3 rounded-lg hover:bg-gray-100 cursor-pointer transition"> |
|
|
<i class="fas fa-trash mr-3 text-gray-500"></i> |
|
|
<span>Recently Deleted</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="neumorph p-6"> |
|
|
<h2 class="text-xl font-semibold mb-4 gradient-text">Filters</h2> |
|
|
<div class="mb-4"> |
|
|
<h3 class="font-medium mb-2">Medium</h3> |
|
|
<div class="flex flex-wrap"> |
|
|
<span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span> |
|
|
<span class="tag"><i class="fas fa-paint-brush mr-1"></i> Art</span> |
|
|
<span class="tag"><i class="fas fa-laptop-code mr-1"></i> Digital</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<h3 class="font-medium mb-2">People</h3> |
|
|
<div class="flex flex-wrap"> |
|
|
<span class="tag"><i class="fas fa-male mr-1"></i> Male</span> |
|
|
<span class="tag"><i class="fas fa-female mr-1"></i> Female</span> |
|
|
<span class="tag"><i class="fas fa-child mr-1"></i> Child</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<h3 class="font-medium mb-2">Colors</h3> |
|
|
<div class="flex flex-wrap"> |
|
|
<span class="color-swatch" style="background-color: #FF6584;"></span> |
|
|
<span class="color-swatch" style="background-color: #6C63FF;"></span> |
|
|
<span class="color-swatch" style="background-color: #4F46E5;"></span> |
|
|
<span class="color-swatch" style="background-color: #1E1E2C;"></span> |
|
|
<span class="color-swatch" style="background-color: #F8F9FA;"></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<h3 class="font-medium mb-2">Mood</h3> |
|
|
<div class="flex flex-wrap"> |
|
|
<span class="tag"><i class="fas fa-smile mr-1"></i> Happy</span> |
|
|
<span class="tag"><i class="fas fa-sad-tear mr-1"></i> Sad</span> |
|
|
<span class="tag"><i class="fas fa-angry mr-1"></i> Angry</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</aside> |
|
|
|
|
|
|
|
|
<div class="lg:col-span-3"> |
|
|
<div class="neumorph p-6 mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold gradient-text">Image Library</h2> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="uploadBtn" class="neumorph-btn-primary px-6 py-2 rounded-full font-medium pulse"> |
|
|
<i class="fas fa-cloud-upload-alt mr-2"></i> Upload Images |
|
|
</button> |
|
|
<input type="file" id="fileInput" class="hidden" multiple accept="image/*"> |
|
|
<button class="neumorph-btn px-4 py-2 rounded-full"> |
|
|
<i class="fas fa-sliders-h"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="uploadArea" class="upload-area p-12 text-center mb-8 hidden"> |
|
|
<div class="neumorph w-24 h-24 rounded-full mx-auto mb-6 flex items-center justify-center"> |
|
|
<i class="fas fa-cloud-upload-alt text-3xl gradient-text"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Drag & Drop Images Here</h3> |
|
|
<p class="text-gray-500 mb-6">or click to browse files</p> |
|
|
<button class="neumorph-btn px-6 py-2 rounded-full font-medium"> |
|
|
Select Files |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="image-card neumorph rounded-xl overflow-hidden"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?portrait" alt="Sample image" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2"> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-heart text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-2">Portrait of a woman</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">A young woman smiling in natural light with blurred background.</p> |
|
|
<div class="flex flex-wrap mb-2"> |
|
|
<span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span> |
|
|
<span class="tag"><i class="fas fa-female mr-1"></i> Female</span> |
|
|
<span class="tag"><i class="fas fa-smile mr-1"></i> Happy</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex"> |
|
|
<span class="color-swatch" style="background-color: #F3D2C1;"></span> |
|
|
<span class="color-swatch" style="background-color: #8B5A2B;"></span> |
|
|
<span class="color-swatch" style="background-color: #5F9EA0;"></span> |
|
|
</div> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-card neumorph rounded-xl overflow-hidden"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?city" alt="Sample image" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2"> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-heart text-red-500"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-2">Urban landscape</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Modern city skyline at dusk with vibrant colors and reflections.</p> |
|
|
<div class="flex flex-wrap mb-2"> |
|
|
<span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span> |
|
|
<span class="tag"><i class="fas fa-city mr-1"></i> Urban</span> |
|
|
<span class="tag"><i class="fas fa-moon mr-1"></i> Night</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex"> |
|
|
<span class="color-swatch" style="background-color: #1E1E2C;"></span> |
|
|
<span class="color-swatch" style="background-color: #6C63FF;"></span> |
|
|
<span class="color-swatch" style="background-color: #FF6584;"></span> |
|
|
</div> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-card neumorph rounded-xl overflow-hidden"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?abstract" alt="Sample image" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2"> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-heart text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-2">Abstract composition</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Colorful fluid shapes blending together in an abstract pattern.</p> |
|
|
<div class="flex flex-wrap mb-2"> |
|
|
<span class="tag"><i class="fas fa-paint-brush mr-1"></i> Art</span> |
|
|
<span class="tag"><i class="fas fa-palette mr-1"></i> Colorful</span> |
|
|
<span class="tag"><i class="fas fa-water mr-1"></i> Fluid</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex"> |
|
|
<span class="color-swatch" style="background-color: #FF6584;"></span> |
|
|
<span class="color-swatch" style="background-color: #6C63FF;"></span> |
|
|
<span class="color-swatch" style="background-color: #4F46E5;"></span> |
|
|
</div> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-card neumorph rounded-xl overflow-hidden"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?nature" alt="Sample image" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2"> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-heart text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-2">Mountain landscape</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Snow-capped mountains with a clear blue sky and pine trees.</p> |
|
|
<div class="flex flex-wrap mb-2"> |
|
|
<span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span> |
|
|
<span class="tag"><i class="fas fa-mountain mr-1"></i> Nature</span> |
|
|
<span class="tag"><i class="fas fa-snowflake mr-1"></i> Winter</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex"> |
|
|
<span class="color-swatch" style="background-color: #5F9EA0;"></span> |
|
|
<span class="color-swatch" style="background-color: #FFFFFF;"></span> |
|
|
<span class="color-swatch" style="background-color: #8B5A2B;"></span> |
|
|
</div> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-card neumorph rounded-xl overflow-hidden"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?food" alt="Sample image" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2"> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-heart text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-2">Gourmet dish</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Artfully plated restaurant dish with fresh ingredients and herbs.</p> |
|
|
<div class="flex flex-wrap mb-2"> |
|
|
<span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span> |
|
|
<span class="tag"><i class="fas fa-utensils mr-1"></i> Food</span> |
|
|
<span class="tag"><i class="fas fa-leaf mr-1"></i> Fresh</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex"> |
|
|
<span class="color-swatch" style="background-color: #8B5A2B;"></span> |
|
|
<span class="color-swatch" style="background-color: #FF6584;"></span> |
|
|
<span class="color-swatch" style="background-color: #F3D2C1;"></span> |
|
|
</div> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="image-card neumorph rounded-xl overflow-hidden"> |
|
|
<div class="relative h-48 overflow-hidden"> |
|
|
<img src="https://source.unsplash.com/random/600x400/?animal" alt="Sample image" class="w-full h-full object-cover"> |
|
|
<div class="absolute top-2 right-2"> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-heart text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-medium mb-2">Wildlife photography</h3> |
|
|
<p class="text-sm text-gray-500 mb-3">Close-up of a lion in its natural habitat with soft morning light.</p> |
|
|
<div class="flex flex-wrap mb-2"> |
|
|
<span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span> |
|
|
<span class="tag"><i class="fas fa-paw mr-1"></i> Animal</span> |
|
|
<span class="tag"><i class="fas fa-sun mr-1"></i> Morning</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex"> |
|
|
<span class="color-swatch" style="background-color: #8B5A2B;"></span> |
|
|
<span class="color-swatch" style="background-color: #1E1E2C;"></span> |
|
|
<span class="color-swatch" style="background-color: #F3D2C1;"></span> |
|
|
</div> |
|
|
<button class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h text-gray-600"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex justify-center mt-8"> |
|
|
<nav class="neumorph p-2 rounded-full"> |
|
|
<ul class="flex space-x-2"> |
|
|
<li> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-chevron-left"></i> |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="neumorph-btn-primary w-10 h-10 rounded-full flex items-center justify-center">1</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">2</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">3</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-ellipsis-h"></i> |
|
|
</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center">8</button> |
|
|
</li> |
|
|
<li> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="imageModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="neumorph-lg w-full max-w-5xl rounded-2xl overflow-hidden"> |
|
|
<div class="flex"> |
|
|
<div class="w-2/3"> |
|
|
<img id="modalImage" src="" alt="Enlarged image" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="w-1/3 p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 id="modalTitle" class="text-xl font-bold"></h3> |
|
|
<button id="closeModal" class="neumorph-btn w-8 h-8 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<p id="modalDescription" class="text-sm text-gray-500 mb-4"></p> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-medium mb-2">Metadata</h4> |
|
|
<div class="neumorph-inset p-4 rounded-lg"> |
|
|
<div class="grid grid-cols-2 gap-2 text-sm"> |
|
|
<div><span class="font-medium">Medium:</span> <span id="modalMedium">Photography</span></div> |
|
|
<div><span class="font-medium">People:</span> <span id="modalPeople">1 female</span></div> |
|
|
<div><span class="font-medium">Actions:</span> <span id="modalActions">Standing</span></div> |
|
|
<div><span class="font-medium">Clothes:</span> <span id="modalClothes">Casual</span></div> |
|
|
<div><span class="font-medium">Environment:</span> <span id="modalEnvironment">Outdoor</span></div> |
|
|
<div><span class="font-medium">Colors:</span> |
|
|
<span id="modalColors" class="flex"> |
|
|
<span class="color-swatch" style="background-color: #F3D2C1;"></span> |
|
|
<span class="color-swatch" style="background-color: #8B5A2B;"></span> |
|
|
<span class="color-swatch" style="background-color: #5F9EA0;"></span> |
|
|
</span> |
|
|
</div> |
|
|
<div><span class="font-medium">Style:</span> <span id="modalStyle">Realistic</span></div> |
|
|
<div><span class="font-medium">Mood:</span> <span id="modalMood">Happy</span></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-medium mb-2">Tags</h4> |
|
|
<div class="flex flex-wrap" id="modalTags"> |
|
|
<span class="tag"><i class="fas fa-camera mr-1"></i> Photo</span> |
|
|
<span class="tag"><i class="fas fa-female mr-1"></i> Female</span> |
|
|
<span class="tag"><i class="fas fa-smile mr-1"></i> Happy</span> |
|
|
</div> |
|
|
<div class="mt-2 flex"> |
|
|
<input type="text" placeholder="Add tag..." class="neumorph-inset px-3 py-1 rounded-l-full text-sm w-full"> |
|
|
<button class="neumorph-btn-primary px-3 py-1 rounded-r-full text-sm"> |
|
|
<i class="fas fa-plus"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-2"> |
|
|
<button class="neumorph-btn-primary flex-1 py-2 rounded-full"> |
|
|
<i class="fas fa-download mr-2"></i> Download |
|
|
</button> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-share-alt"></i> |
|
|
</button> |
|
|
<button class="neumorph-btn w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="py-6 px-8 text-center text-gray-500 text-sm"> |
|
|
<div class="neumorph p-4 rounded-xl"> |
|
|
<p>© 2023 MEDIATORZ - AI-Powered Image Management System</p> |
|
|
<div class="flex justify-center space-x-6 mt-3"> |
|
|
<a href="#" class="hover:text-primary transition">Privacy</a> |
|
|
<a href="#" class="hover:text-primary transition">Terms</a> |
|
|
<a href="#" class="hover:text-primary transition">API</a> |
|
|
<a href="#" class="hover:text-primary transition">Documentation</a> |
|
|
<a href="#" class="hover:text-primary transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('uploadBtn').addEventListener('click', function() { |
|
|
const uploadArea = document.getElementById('uploadArea'); |
|
|
uploadArea.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const uploadArea = document.getElementById('uploadArea'); |
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
uploadArea.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
uploadArea.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
uploadArea.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
uploadArea.classList.add('dragover'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
uploadArea.classList.remove('dragover'); |
|
|
} |
|
|
|
|
|
uploadArea.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
handleFiles(files); |
|
|
} |
|
|
|
|
|
function handleFiles(files) { |
|
|
([...files]).forEach(uploadFile); |
|
|
} |
|
|
|
|
|
function uploadFile(file) { |
|
|
|
|
|
console.log('Uploading file:', file.name); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const imageCards = document.querySelectorAll('.image-card'); |
|
|
const imageModal = document.getElementById('imageModal'); |
|
|
const modalImage = document.getElementById('modalImage'); |
|
|
const modalTitle = document.getElementById('modalTitle'); |
|
|
const modalDescription = document.getElementById('modalDescription'); |
|
|
const closeModal = document.getElementById('closeModal'); |
|
|
|
|
|
imageCards.forEach(card => { |
|
|
card.addEventListener('click', function() { |
|
|
const imgSrc = this.querySelector('img').src; |
|
|
const title = this.querySelector('h3').textContent; |
|
|
const description = this.querySelector('p').textContent; |
|
|
|
|
|
modalImage.src = imgSrc; |
|
|
modalTitle.textContent = title; |
|
|
modalDescription.textContent = description; |
|
|
|
|
|
imageModal.classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', function() { |
|
|
imageModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
imageModal.addEventListener('click', function(e) { |
|
|
if (e.target === imageModal) { |
|
|
imageModal.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
uploadArea.addEventListener('click', function() { |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', function() { |
|
|
if (this.files.length > 0) { |
|
|
handleFiles(this.files); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const sampleMetadata = { |
|
|
medium: "Photography", |
|
|
people: "1 female, age 25-30", |
|
|
actions: "Smiling, looking at camera", |
|
|
clothes: "Casual summer dress", |
|
|
environment: "Outdoor, park setting", |
|
|
colors: ["#F3D2C1", "#8B5A2B", "#5F9EA0"], |
|
|
style: "Portrait, shallow depth of field", |
|
|
mood: "Happy, relaxed", |
|
|
tags: ["photo", "female", "happy", "portrait", "summer"] |
|
|
}; |
|
|
|
|
|
|
|
|
function populateModalData() { |
|
|
document.getElementById('modalMedium').textContent = sampleMetadata.medium; |
|
|
document.getElementById('modalPeople').textContent = sampleMetadata.people; |
|
|
document.getElementById('modalActions').textContent = sampleMetadata.actions; |
|
|
document.getElementById('modalClothes').textContent = sampleMetadata.clothes; |
|
|
document.getElementById('modalEnvironment').textContent = sampleMetadata.environment; |
|
|
document.getElementById('modalStyle').textContent = sampleMetadata.style; |
|
|
document.getElementById('modalMood').textContent = sampleMetadata.mood; |
|
|
|
|
|
const tagsContainer = document.getElementById('modalTags'); |
|
|
tagsContainer.innerHTML = ''; |
|
|
sampleMetadata.tags.forEach(tag => { |
|
|
const tagElement = document.createElement('span'); |
|
|
tagElement.className = 'tag'; |
|
|
tagElement.textContent = tag; |
|
|
tagsContainer.appendChild(tagElement); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
populateModalData(); |
|
|
</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=TORZ/my" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
|
</html> |
