<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex flex-col"> <header class="bg-white shadow-lg p-4"> <div class="max-w-6xl mx-auto flex justify-between items-center"> <h1 class="text-2xl font-bold">AI Image Upscale</h1> <nav class="flex space-x-4"> <a href="#" class="text-gray-700 hover:text-gray-900">Home</a> <a href="#" class="text-gray-700 hover:text-gray-900">Features</a> <a href="#" class="text-gray-700 hover:text-gray-900">Pricing</a> <a href="#" class="text-gray-700 hover:text-gray-900">Contact</a> </nav> </div> </header> <main class="flex-1 flex items-center justify-center"> <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center p-6 bg-white shadow-lg rounded-lg"> <div class="flex-1 mb-6 md:mb-0"> <div class="relative w-full h-64"> <img src="https://placehold.co/600x400" alt="Hero Image" class="absolute inset-0 w-full h-full object-cover rounded-lg shadow-md"> </div> </div> <div class="flex-1 md:ml-6"> <h2 class="text-xl font-semibold mb-4">Enhance Your Images with AI</h2> <p class="text-gray-700 mb-4">Upload your images and let our AI upscale them for you. Experience the difference in quality and detail.</p> <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center" id="drop-area"> <p class="text-gray-500 mb-2">Drag and drop your image here or</p> <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 transition duration-300" id="upload-button"> Upload Image </button> <input type="file" accept="image/*" class="hidden" id="file-input"> </div> <div class="mt-4 hidden" id="action-buttons"> <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-400 transition duration-300 mr-2" id="compare-button"> Compare </button> <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-400 transition duration-300" id="download-button"> Download </button> <button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-400 transition duration-300 mt-2" id="reset-button"> Reset </button> </div> </div> </div> </main> <footer class="bg-white shadow-lg p-4"> <div class="max-w-6xl mx-auto text-center"> <p class="text-gray-600">© 2023 AI Image Upscale. All rights reserved.</p> </div> </footer> <script> const uploadButton = document.getElementById('upload-button'); const fileInput = document.getElementById('file-input'); const dropArea = document.getElementById('drop-area'); const actionButtons = document.getElementById('action-buttons'); const resetButton = document.getElementById('reset-button'); uploadButton.addEventListener('click', () => { fileInput.click(); }); fileInput.addEventListener('change', handleFiles); dropArea.addEventListener('dragover', (event) => { event.preventDefault(); dropArea.classList.add('border-blue-500'); }); dropArea.addEventListener('dragleave', () => { dropArea.classList.remove('border-blue-500'); }); dropArea.addEventListener('drop', (event) => { event.preventDefault(); dropArea.classList.remove('border-blue-500'); const files = event.dataTransfer.files; if (files.length) { handleFiles({ target: { files } }); } }); function handleFiles(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { const upscaledImage = document.createElement('img'); upscaledImage.src = e.target.result; upscaledImage.className = 'w-full h-auto rounded-lg shadow-md mt-4'; dropArea.appendChild(upscaledImage); actionButtons.classList.remove('hidden'); } reader.readAsDataURL(file); } } resetButton.addEventListener('click', () => { fileInput.value = ''; dropArea.innerHTML = `<p class="text-gray-500 mb-2">Drag and drop your image here or</p> <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-400 transition duration-300" id="upload-button"> Upload Image </button>`; actionButtons.classList.add('hidden'); }); </script> </body>
v
v
v
v