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