Download index.html from TORZ/my: direct link, hf CLI and curl.
- Browser
- Download file 39.7 kB
-
https://huggingface.co/spaces/TORZ/my/resolve/main/index.html
- Command line
-
hf download hf://spaces/TORZ/my/index.html
-
curl -L -o index.html https://huggingface.co/spaces/TORZ/my/resolve/main/index.html
39.7 kB
| <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); | |
| } | |
| /* Custom scrollbar */ | |
| ::-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; | |
| } | |
| /* Floating animation for logo */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| /* Pulse animation for upload button */ | |
| @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 */ | |
| .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 --> | |
| <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 Content --> | |
| <main class="flex-1 px-8 pb-12"> | |
| <div class="grid grid-cols-1 lg:grid-cols-4 gap-8"> | |
| <!-- Sidebar --> | |
| <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> | |
| <!-- Main Content Area --> | |
| <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> | |
| <!-- Upload Area (Hidden by default) --> | |
| <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> | |
| <!-- Image Grid --> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Sample Image Card 1 --> | |
| <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> | |
| <!-- Sample Image Card 2 --> | |
| <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> | |
| <!-- Sample Image Card 3 --> | |
| <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> | |
| <!-- Sample Image Card 4 --> | |
| <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> | |
| <!-- Sample Image Card 5 --> | |
| <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> | |
| <!-- Sample Image Card 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/?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> | |
| <!-- Pagination --> | |
| <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> | |
| <!-- Image Detail Modal (Hidden by default) --> | |
| <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 --> | |
| <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> | |
| // Toggle upload area | |
| document.getElementById('uploadBtn').addEventListener('click', function() { | |
| const uploadArea = document.getElementById('uploadArea'); | |
| uploadArea.classList.toggle('hidden'); | |
| }); | |
| // Drag and drop functionality | |
| 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) { | |
| // Here you would handle the file upload | |
| console.log('Uploading file:', file.name); | |
| // In a real app, you would send this to your server | |
| } | |
| // Image modal functionality | |
| 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'); | |
| }); | |
| // Close modal when clicking outside | |
| imageModal.addEventListener('click', function(e) { | |
| if (e.target === imageModal) { | |
| imageModal.classList.add('hidden'); | |
| } | |
| }); | |
| // File input handling | |
| const fileInput = document.getElementById('fileInput'); | |
| uploadArea.addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| fileInput.addEventListener('change', function() { | |
| if (this.files.length > 0) { | |
| handleFiles(this.files); | |
| } | |
| }); | |
| // Sample data for modal (in a real app, this would come from your database) | |
| 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"] | |
| }; | |
| // This would be populated from your actual data in a real app | |
| 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); | |
| }); | |
| } | |
| // Call this when opening a modal with actual image data | |
| 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> |