|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>PixelPerfect AI - Advanced Image Editor</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
.dropzone { |
|
|
border: 2px dashed #cbd5e0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.dropzone.active { |
|
|
border-color: #4f46e5; |
|
|
background-color: #eef2ff; |
|
|
} |
|
|
.preview-container { |
|
|
position: relative; |
|
|
} |
|
|
.watermark-overlay { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0,0,0,0.5); |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
color: white; |
|
|
font-weight: bold; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
.preview-container:hover .watermark-overlay { |
|
|
opacity: 1; |
|
|
} |
|
|
.progress-ring { |
|
|
transform: rotate(-90deg); |
|
|
} |
|
|
.progress-ring__circle { |
|
|
stroke-dasharray: 283; |
|
|
stroke-dashoffset: 283; |
|
|
transition: stroke-dashoffset 0.5s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="aperture" class="text-indigo-600 h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">PixelPerfect AI</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i data-feather="user" class="mr-2"></i> |
|
|
Sign In |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl"> |
|
|
AI-Powered Image <span class="text-indigo-600">Enhancement</span> |
|
|
</h1> |
|
|
<p class="mt-5 max-w-xl mx-auto text-xl text-gray-500"> |
|
|
Remove watermarks, enhance quality, and transform your images with our cutting-edge AI technology. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow rounded-lg p-6 mb-8"> |
|
|
<div class="flex flex-col md:flex-row gap-8"> |
|
|
|
|
|
<div class="w-full md:w-1/2"> |
|
|
<div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer h-64 flex flex-col items-center justify-center"> |
|
|
<i data-feather="upload" class="h-12 w-12 text-gray-400 mb-4"></i> |
|
|
<p class="text-lg font-medium text-gray-700 mb-2">Drag & drop your image here</p> |
|
|
<p class="text-sm text-gray-500 mb-4">or click to browse files</p> |
|
|
<input type="file" id="fileInput" class="hidden" accept="image/*"> |
|
|
<button id="uploadBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition duration-150"> |
|
|
Select Image |
|
|
</button> |
|
|
<p class="text-xs text-gray-400 mt-4">Supports: JPG, PNG, WEBP (Max 10MB)</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full md:w-1/2"> |
|
|
<div id="previewContainer" class="hidden"> |
|
|
<div class="preview-container mb-4"> |
|
|
<img id="imagePreview" src="" alt="Preview" class="w-full h-48 object-contain rounded-lg border border-gray-200"> |
|
|
<div class="watermark-overlay rounded-lg"> |
|
|
<span>Click to edit</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<span id="fileName" class="text-sm font-medium text-gray-700 truncate"></span> |
|
|
<span id="fileSize" class="text-xs text-gray-500"></span> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label for="editType" class="block text-sm font-medium text-gray-700 mb-1">Edit Type</label> |
|
|
<select id="editType" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"> |
|
|
<option value="watermark">Remove Watermark</option> |
|
|
<option value="enhance">Enhance Quality</option> |
|
|
<option value="background">Remove Background</option> |
|
|
<option value="upscale">Upscale Resolution</option> |
|
|
</select> |
|
|
</div> |
|
|
<button id="processBtn" class="w-full flex justify-center items-center px-4 py-3 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"> |
|
|
<span>Process Image</span> |
|
|
<i data-feather="chevron-right" class="ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="emptyState" class="h-full flex flex-col items-center justify-center text-center p-8 bg-gray-50 rounded-lg"> |
|
|
<i data-feather="image" class="h-10 w-10 text-gray-400 mb-4"></i> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-1">No Image Selected</h3> |
|
|
<p class="text-sm text-gray-500">Upload an image to start editing</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white shadow rounded-lg p-6 mb-8"> |
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-6">AI-Powered Features</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="p-6 border border-gray-200 rounded-lg hover:shadow-md transition duration-150"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 bg-indigo-100 rounded-full mr-4"> |
|
|
<i data-feather="shield" class="h-6 w-6 text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Watermark Removal</h3> |
|
|
</div> |
|
|
<p class="text-gray-500">Our advanced AI detects and removes watermarks while preserving the original image quality.</p> |
|
|
</div> |
|
|
<div class="p-6 border border-gray-200 rounded-lg hover:shadow-md transition duration-150"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 bg-indigo-100 rounded-full mr-4"> |
|
|
<i data-feather="zap" class="h-6 w-6 text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Quality Enhancement</h3> |
|
|
</div> |
|
|
<p class="text-gray-500">Enhance blurry or low-quality images to crisp, high-definition versions automatically.</p> |
|
|
</div> |
|
|
<div class="p-6 border border-gray-200 rounded-lg hover:shadow-md transition duration-150"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="p-3 bg-indigo-100 rounded-full mr-4"> |
|
|
<i data-feather="cpu" class="h-6 w-6 text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Background Removal</h3> |
|
|
</div> |
|
|
<p class="text-gray-500">Instantly remove backgrounds with precision, perfect for product photos or creative projects.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="processingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-md w-full"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<div class="relative w-20 h-20 mb-6"> |
|
|
<svg class="progress-ring w-20 h-20" viewBox="0 0 100 100"> |
|
|
<circle class="progress-ring__circle stroke-indigo-100" stroke-width="6" fill="transparent" r="45" cx="50" cy="50"/> |
|
|
<circle class="progress-ring__circle stroke-indigo-600" stroke-width="6" fill="transparent" r="45" cx="50" cy="50" stroke-dashoffset="283" id="progressCircle"/> |
|
|
</svg> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i data-feather="cpu" class="h-8 w-8 text-indigo-600 animate-pulse"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Processing Your Image</h3> |
|
|
<p class="text-gray-500 text-center mb-4">Our AI is working its magic. This usually takes 10-30 seconds.</p> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4"> |
|
|
<div id="progressBar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
<p id="progressText" class="text-sm text-gray-500">0% complete</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="resultModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
|
|
<div class="bg-white rounded-lg p-6 max-w-4xl w-full"> |
|
|
<div class="flex justify-between items-start mb-4"> |
|
|
<h3 class="text-xl font-bold text-gray-900">Your Enhanced Image</h3> |
|
|
<button id="closeResultModal" class="text-gray-400 hover:text-gray-500"> |
|
|
<i data-feather="x"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
<div> |
|
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Original</h4> |
|
|
<img id="originalResult" src="" alt="Original" class="w-full rounded-lg border border-gray-200"> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-sm font-medium text-gray-500 mb-2">Enhanced</h4> |
|
|
<img id="enhancedResult" src="" alt="Enhanced" class="w-full rounded-lg border border-gray-200"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-3"> |
|
|
<button id="downloadBtn" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i data-feather="download" class="mr-2"></i> |
|
|
Download |
|
|
</button> |
|
|
<button id="newEditBtn" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
<i data-feather="edit" class="mr-2"></i> |
|
|
New Edit |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-white border-t border-gray-200"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<i data-feather="aperture" class="text-indigo-600 h-6 w-6"></i> |
|
|
<span class="ml-2 text-lg font-medium text-gray-900">PixelPerfect AI</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<i data-feather="github"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-500"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between"> |
|
|
<p class="text-sm text-gray-500 mb-4 md:mb-0"> |
|
|
© 2023 PixelPerfect AI. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">Privacy</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">Terms</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">FAQ</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-gray-700">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const dropzone = document.getElementById('dropzone'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const uploadBtn = document.getElementById('uploadBtn'); |
|
|
const previewContainer = document.getElementById('previewContainer'); |
|
|
const emptyState = document.getElementById('emptyState'); |
|
|
const imagePreview = document.getElementById('imagePreview'); |
|
|
const fileName = document.getElementById('fileName'); |
|
|
const fileSize = document.getElementById('fileSize'); |
|
|
const processBtn = document.getElementById('processBtn'); |
|
|
const processingModal = document.getElementById('processingModal'); |
|
|
const resultModal = document.getElementById('resultModal'); |
|
|
const closeResultModal = document.getElementById('closeResultModal'); |
|
|
const downloadBtn = document.getElementById('downloadBtn'); |
|
|
const newEditBtn = document.getElementById('newEditBtn'); |
|
|
const originalResult = document.getElementById('originalResult'); |
|
|
const enhancedResult = document.getElementById('enhancedResult'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
const progressText = document.getElementById('progressText'); |
|
|
const progressCircle = document.getElementById('progressCircle'); |
|
|
|
|
|
|
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropzone.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight() { |
|
|
dropzone.classList.add('active'); |
|
|
} |
|
|
|
|
|
function unhighlight() { |
|
|
dropzone.classList.remove('active'); |
|
|
} |
|
|
|
|
|
dropzone.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
handleFiles(files); |
|
|
} |
|
|
|
|
|
uploadBtn.addEventListener('click', () => { |
|
|
fileInput.click(); |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', () => { |
|
|
handleFiles(fileInput.files); |
|
|
}); |
|
|
|
|
|
function handleFiles(files) { |
|
|
if (files.length === 0) return; |
|
|
|
|
|
const file = files[0]; |
|
|
if (!file.type.match('image.*')) { |
|
|
alert('Please select an image file.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
if (file.size > 10 * 1024 * 1024) { |
|
|
alert('File size exceeds 10MB limit.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const reader = new FileReader(); |
|
|
reader.onload = function(e) { |
|
|
imagePreview.src = e.target.result; |
|
|
fileName.textContent = file.name; |
|
|
fileSize.textContent = formatFileSize(file.size); |
|
|
emptyState.classList.add('hidden'); |
|
|
previewContainer.classList.remove('hidden'); |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
|
|
|
function formatFileSize(bytes) { |
|
|
if (bytes === 0) return '0 Bytes'; |
|
|
const k = 1024; |
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB']; |
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k)); |
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
|
|
} |
|
|
|
|
|
|
|
|
processBtn.addEventListener('click', () => { |
|
|
if (!imagePreview.src) return; |
|
|
|
|
|
|
|
|
processingModal.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if (progress > 100) progress = 100; |
|
|
|
|
|
|
|
|
progressBar.style.width = `${progress}%`; |
|
|
progressText.textContent = `${Math.round(progress)}% complete`; |
|
|
const offset = 283 - (283 * progress / 100); |
|
|
progressCircle.style.strokeDashoffset = offset; |
|
|
|
|
|
if (progress === 100) { |
|
|
clearInterval(interval); |
|
|
setTimeout(() => { |
|
|
processingModal.classList.add('hidden'); |
|
|
|
|
|
|
|
|
originalResult.src = imagePreview.src; |
|
|
enhancedResult.src = imagePreview.src; |
|
|
resultModal.classList.remove('hidden'); |
|
|
}, 500); |
|
|
} |
|
|
}, 200); |
|
|
}); |
|
|
|
|
|
|
|
|
closeResultModal.addEventListener('click', () => { |
|
|
resultModal.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
newEditBtn.addEventListener('click', () => { |
|
|
resultModal.classList.add('hidden'); |
|
|
fileInput.value = ''; |
|
|
emptyState.classList.remove('hidden'); |
|
|
previewContainer.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
downloadBtn.addEventListener('click', () => { |
|
|
|
|
|
alert('In a real application, this would download your enhanced image.'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
|
|
|
