| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Image & Video Editor | Creative Studio</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> |
| .editor-container { |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| } |
| .tool-btn { |
| transition: all 0.3s ease; |
| } |
| .tool-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .preview-box { |
| box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); |
| } |
| .slider-thumb::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: #4f46e5; |
| cursor: pointer; |
| } |
| .tab-active { |
| border-bottom: 3px solid #4f46e5; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50"> |
| |
| <header class="bg-white shadow-sm"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-camera-retro text-indigo-600 text-2xl"></i> |
| <h1 class="text-xl font-bold text-gray-800">Creative Studio</h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Home</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Features</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Tutorials</a> |
| <a href="#" class="text-gray-600 hover:text-indigo-600 font-medium">Pricing</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="px-4 py-2 rounded-md text-gray-600 hover:bg-gray-100"> |
| <i class="fas fa-user-circle text-xl"></i> |
| </button> |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"> |
| Upgrade |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-6 h-fit"> |
| <div class="flex border-b mb-6"> |
| <button id="image-tab" class="tab-active px-4 py-2 font-medium text-indigo-600">Image</button> |
| <button id="video-tab" class="px-4 py-2 font-medium text-gray-500 hover:text-indigo-600">Video</button> |
| </div> |
|
|
| <div id="image-tools"> |
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Upload Media</h3> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| <p class="text-gray-500">Drag & drop files here</p> |
| <p class="text-sm text-gray-400 mt-1">or click to browse</p> |
| <input type="file" id="file-upload" class="hidden" accept="image/*"> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Face Tools</h3> |
| <div class="grid grid-cols-3 gap-3"> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-user-edit text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Face Swap</span> |
| </button> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-smile text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Expressions</span> |
| </button> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-magic text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Beautify</span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Body Tools</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">Body Shape</label> |
| <input type="range" class="w-full slider-thumb"> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">Height</label> |
| <input type="range" class="w-full slider-thumb"> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">Slimness</label> |
| <input type="range" class="w-full slider-thumb"> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Effects</h3> |
| <div class="grid grid-cols-4 gap-2"> |
| <div class="effect-thumb bg-gray-200 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| <div class="effect-thumb bg-gray-300 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| <div class="effect-thumb bg-gray-400 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| <div class="effect-thumb bg-gray-500 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| <div class="effect-thumb bg-gray-600 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| <div class="effect-thumb bg-gray-700 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| <div class="effect-thumb bg-gray-800 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| <div class="effect-thumb bg-gray-900 rounded-md h-16 cursor-pointer hover:ring-2 hover:ring-indigo-500"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="video-tools" class="hidden"> |
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Video Effects</h3> |
| <div class="grid grid-cols-3 gap-3"> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-film text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Filters</span> |
| </button> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-exchange-alt text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Transitions</span> |
| </button> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-music text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Audio</span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Timeline Tools</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">Speed</label> |
| <input type="range" class="w-full slider-thumb"> |
| </div> |
| <div> |
| <label class="block text-sm text-gray-600 mb-1">Trim</label> |
| <div class="bg-gray-200 h-10 rounded-md relative"> |
| <div class="absolute left-2 right-2 top-1/2 transform -translate-y-1/2 h-1 bg-gray-400 rounded-full"> |
| <div class="absolute left-0 right-0 h-6 -top-2.5"> |
| <div class="absolute w-4 h-6 bg-indigo-600 rounded-sm left-0 cursor-move"></div> |
| <div class="absolute w-4 h-6 bg-indigo-600 rounded-sm right-0 cursor-move"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="mb-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Add Elements</h3> |
| <div class="grid grid-cols-3 gap-3"> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-font text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Text</span> |
| </button> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-sticky-note text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Stickers</span> |
| </button> |
| <button class="tool-btn flex flex-col items-center p-3 bg-gray-100 rounded-lg hover:bg-indigo-50"> |
| <i class="fas fa-draw-polygon text-indigo-600 text-xl mb-1"></i> |
| <span class="text-xs text-gray-700">Shapes</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-full lg:w-2/4 editor-container rounded-xl p-6"> |
| <div class="preview-box bg-white rounded-lg overflow-hidden relative" style="height: 500px;"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <div class="text-center"> |
| <i class="fas fa-image text-gray-300 text-5xl mb-3"></i> |
| <p class="text-gray-400">Upload an image to start editing</p> |
| </div> |
| </div> |
| <img id="preview-image" src="" alt="" class="hidden w-full h-full object-contain"> |
| <video id="preview-video" controls class="hidden w-full h-full object-contain"></video> |
| </div> |
|
|
| <div class="mt-6 flex justify-center space-x-4"> |
| <button id="undo-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 disabled:opacity-50" disabled> |
| <i class="fas fa-undo mr-2"></i> Undo |
| </button> |
| <button id="redo-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 disabled:opacity-50" disabled> |
| <i class="fas fa-redo mr-2"></i> Redo |
| </button> |
| <button id="reset-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300"> |
| <i class="fas fa-trash-alt mr-2"></i> Reset |
| </button> |
| <button id="save-btn" class="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700"> |
| <i class="fas fa-download mr-2"></i> Save |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="w-full lg:w-1/4 bg-white rounded-xl shadow-md p-6 h-fit"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="font-medium text-gray-700">Layers</h3> |
| <button class="text-indigo-600 hover:text-indigo-800"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
|
|
| <div class="space-y-3"> |
| <div class="flex items-center p-2 bg-indigo-50 rounded-md"> |
| <div class="w-10 h-10 bg-gray-300 rounded-md mr-3"></div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium">Base Image</p> |
| <p class="text-xs text-gray-500">Original</p> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
|
|
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-md"> |
| <div class="w-10 h-10 bg-gray-200 rounded-md mr-3"></div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium">Face Adjustment</p> |
| <p class="text-xs text-gray-500">Layer 1</p> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
|
|
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-md"> |
| <div class="w-10 h-10 bg-gray-100 rounded-md mr-3"></div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium">Body Shape</p> |
| <p class="text-xs text-gray-500">Layer 2</p> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-eye"></i> |
| </button> |
| </div> |
|
|
| <div class="flex items-center p-2 hover:bg-gray-50 rounded-md"> |
| <div class="w-10 h-10 bg-gray-50 rounded-md mr-3"></div> |
| <div class="flex-1"> |
| <p class="text-sm font-medium">Color Filter</p> |
| <p class="text-xs text-gray-500">Layer 3</p> |
| </div> |
| <button class="text-gray-400 hover:text-gray-600"> |
| <i class="fas fa-eye-slash text-gray-300"></i> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="mt-6"> |
| <h3 class="font-medium text-gray-700 mb-3">Export Options</h3> |
| <div class="space-y-3"> |
| <div class="flex items-center"> |
| <input type="radio" id="format-jpg" name="export-format" class="mr-2" checked> |
| <label for="format-jpg" class="text-sm">JPG</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="radio" id="format-png" name="export-format" class="mr-2"> |
| <label for="format-png" class="text-sm">PNG</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="radio" id="format-webp" name="export-format" class="mr-2"> |
| <label for="format-webp" class="text-sm">WebP</label> |
| </div> |
| </div> |
|
|
| <div class="mt-4"> |
| <label class="block text-sm text-gray-600 mb-1">Quality</label> |
| <input type="range" class="w-full slider-thumb"> |
| </div> |
|
|
| <div class="mt-4"> |
| <label class="block text-sm text-gray-600 mb-1">Dimensions</label> |
| <select class="w-full p-2 border border-gray-300 rounded-md text-sm"> |
| <option>Original</option> |
| <option>1080p (1920×1080)</option> |
| <option>720p (1280×720)</option> |
| <option>480p (854×480)</option> |
| <option>Custom...</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8 mt-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-lg font-medium mb-4">Creative Studio</h3> |
| <p class="text-gray-400 text-sm">Powerful yet simple photo and video editing tools for creators of all levels.</p> |
| </div> |
| <div> |
| <h4 class="font-medium mb-4">Features</h4> |
| <ul class="space-y-2 text-sm text-gray-400"> |
| <li><a href="#" class="hover:text-white">Photo Editor</a></li> |
| <li><a href="#" class="hover:text-white">Video Editor</a></li> |
| <li><a href="#" class="hover:text-white">AI Tools</a></li> |
| <li><a href="#" class="hover:text-white">Effects</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-medium mb-4">Company</h4> |
| <ul class="space-y-2 text-sm text-gray-400"> |
| <li><a href="#" class="hover:text-white">About Us</a></li> |
| <li><a href="#" class="hover:text-white">Careers</a></li> |
| <li><a href="#" class="hover:text-white">Blog</a></li> |
| <li><a href="#" class="hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-medium mb-4">Legal</h4> |
| <ul class="space-y-2 text-sm text-gray-400"> |
| <li><a href="#" class="hover:text-white">Terms of Service</a></li> |
| <li><a href="#" class="hover:text-white">Privacy Policy</a></li> |
| <li><a href="#" class="hover:text-white">Content Policy</a></li> |
| <li><a href="#" class="hover:text-white">Community Guidelines</a></li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-6 text-sm text-gray-400"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p>© 2023 Creative Studio. All rights reserved.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-white"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="hover:text-white"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="hover:text-white"><i class="fab fa-instagram"></i></a> |
| <a href="#" class="hover:text-white"><i class="fab fa-youtube"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('image-tab').addEventListener('click', function() { |
| this.classList.add('tab-active'); |
| document.getElementById('video-tab').classList.remove('tab-active'); |
| document.getElementById('image-tools').classList.remove('hidden'); |
| document.getElementById('video-tools').classList.add('hidden'); |
| }); |
| |
| document.getElementById('video-tab').addEventListener('click', function() { |
| this.classList.add('tab-active'); |
| document.getElementById('image-tab').classList.remove('tab-active'); |
| document.getElementById('video-tools').classList.remove('hidden'); |
| document.getElementById('image-tools').classList.add('hidden'); |
| }); |
| |
| |
| const fileUpload = document.getElementById('file-upload'); |
| const uploadArea = document.querySelector('.border-dashed'); |
| const previewImage = document.getElementById('preview-image'); |
| const previewVideo = document.getElementById('preview-video'); |
| const placeholder = document.querySelector('.preview-box > div'); |
| |
| uploadArea.addEventListener('click', () => fileUpload.click()); |
| |
| fileUpload.addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (!file) return; |
| |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| if (file.type.startsWith('image/')) { |
| previewImage.src = event.target.result; |
| previewImage.classList.remove('hidden'); |
| previewVideo.classList.add('hidden'); |
| placeholder.classList.add('hidden'); |
| } else if (file.type.startsWith('video/')) { |
| previewVideo.src = event.target.result; |
| previewVideo.classList.remove('hidden'); |
| previewImage.classList.add('hidden'); |
| placeholder.classList.add('hidden'); |
| } |
| }; |
| reader.readAsDataURL(file); |
| }); |
| |
| |
| document.getElementById('reset-btn').addEventListener('click', function() { |
| previewImage.src = ''; |
| previewVideo.src = ''; |
| previewImage.classList.add('hidden'); |
| previewVideo.classList.add('hidden'); |
| placeholder.classList.remove('hidden'); |
| fileUpload.value = ''; |
| }); |
| |
| |
| document.getElementById('save-btn').addEventListener('click', function() { |
| if (!previewImage.src && !previewVideo.src) { |
| alert('Please upload an image or video first'); |
| return; |
| } |
| |
| |
| const link = document.createElement('a'); |
| if (previewImage.src) { |
| link.href = previewImage.src; |
| link.download = 'edited-image.jpg'; |
| } else { |
| link.href = previewVideo.src; |
| link.download = 'edited-video.mp4'; |
| } |
| document.body.appendChild(link); |
| link.click(); |
| document.body.removeChild(link); |
| |
| |
| alert('Your file has been downloaded!'); |
| }); |
| </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=swapit/kates" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
