| <!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> |
