| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Aurora Luxe Visualizer</title> |
| | <meta name="description" content="Upload your products and create professional brand visuals instantly"> |
| | <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> |
| | <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| | <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> |
| | <style> |
| | .hero-bg { |
| | background: linear-gradient(135deg, #F4EDE4 0%, #C9A669 50%, #101010 100%); |
| | } |
| | .product-card:hover .product-overlay { |
| | opacity: 1; |
| | transform: translateY(0); |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-white font-sans"> |
| | |
| | <nav class="bg-white shadow-md"> |
| | <div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
| | <a href="#" class="text-2xl font-bold text-gray-800">Aurora Luxe</a> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">Home</a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">Jewelry</a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">Apparel</a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">Campaigns</a> |
| | </div> |
| | <button class="bg-amber-600 text-white px-4 py-2 rounded-full hover:bg-amber-700 transition"> |
| | Get Started |
| | </button> |
| | </div> |
| | </nav> |
| | |
| | <section class="hero-bg text-white py-20" id="vanta-bg"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h1 class="text-5xl font-bold mb-6">Luxury Brand Imagery <br>Perfected</h1> |
| | <p class="text-xl mb-10 max-w-2xl mx-auto">Photorealistic marketing visuals that showcase your products in their best light, every time.</p> |
| | <div class="flex justify-center space-x-4"> |
| | <label for="product-upload" class="bg-white text-amber-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition cursor-pointer"> |
| | <input id="product-upload" type="file" accept="image/*" multiple class="hidden" /> |
| | Upload Products |
| | </label> |
| | <button class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-amber-600 transition" id="generate-btn"> |
| | Generate Visuals |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12">Your Visualizations</h2> |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-8" id="visualization-container"> |
| | <div class="bg-white p-6 rounded-lg shadow-md"> |
| | <div class="relative h-64 w-full bg-gray-200 rounded-md mb-4" id="canvas-container"> |
| | <img id="background-canvas" class="absolute inset-0 w-full h-full object-cover rounded-md" style="display: none;"> |
| | <img id="product-canvas" class="absolute inset-0 w-full h-full object-contain rounded-md" style="display: none;"> |
| | <div class="absolute inset-0 flex items-center justify-center text-gray-500"> |
| | Your visualization will appear here |
| | </div> |
| | </div> |
| | <div class="flex flex-wrap gap-2 mb-4" id="background-options"></div> |
| | <div class="flex space-x-2"> |
| | <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600" id="download-btn"> |
| | <i data-feather="download" class="w-4 h-4 mr-1"></i> Download |
| | </button> |
| | <button class="border border-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-100" id="new-visual-btn"> |
| | <i data-feather="refresh-cw" class="w-4 h-4 mr-1"></i> New Visual |
| | </button> |
| | </div> |
| | </div> |
| | <div class="bg-white p-6 rounded-lg shadow-md"> |
| | <h3 class="text-xl font-bold mb-4">Customize Placement</h3> |
| | <div class="space-y-4"> |
| | <div> |
| | <label class="block text-gray-700 mb-2">Product Size</label> |
| | <input type="range" id="product-size" min="0.1" max="1" step="0.1" value="0.5" class="w-full"> |
| | </div> |
| | <div> |
| | <label class="block text-gray-700 mb-2">Rotation</label> |
| | <input type="range" id="product-rotation" min="0" max="360" step="1" value="0" class="w-full"> |
| | </div> |
| | <div> |
| | <label class="block text-gray-700 mb-2">Position X</label> |
| | <input type="range" id="product-x" min="0" max="100" step="1" value="50" class="w-full"> |
| | </div> |
| | <div> |
| | <label class="block text-gray-700 mb-2">Position Y</label> |
| | <input type="range" id="product-y" min="0" max="100" step="1" value="50" class="w-full"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| | |
| | <section class="py-16 bg-gray-50"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12">Precision Visualization</h2> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition"> |
| | <div class="text-amber-500 mb-4"> |
| | <i data-feather="box" class="w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Product Integration</h3> |
| | <p class="text-gray-600">Seamlessly place your jewelry, apparel or products into photorealistic scenes with perfect lighting and perspective.</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition"> |
| | <div class="text-amber-500 mb-4"> |
| | <i data-feather="cpu" class="w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Brand Consistency</h3> |
| | <p class="text-gray-600">Maintain your unique aesthetic across all visuals with custom color grading and style controls.</p> |
| | </div> |
| | <div class="bg-white p-8 rounded-lg shadow-sm hover:shadow-md transition"> |
| | <div class="text-amber-500 mb-4"> |
| | <i data-feather="sliders" class="w-10 h-10"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Smart Editing</h3> |
| | <p class="text-gray-600">Non-destructive adjustments for lighting, composition and styling while preserving product fidelity.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16"> |
| | <div class="container mx-auto px-6"> |
| | <h2 class="text-3xl font-bold text-center mb-12">Visualization Modes</h2> |
| | <div class="grid md:grid-cols-3 gap-8"> |
| | |
| | <div class="relative overflow-hidden rounded-lg shadow-lg product-card"> |
| | <img src="http://static.photos/luxury/640x360/1" alt="Jewelry Visualization" class="w-full h-64 object-cover"> |
| | <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition duration-300 p-6"> |
| | <h3 class="text-white text-xl font-bold mb-2">Jewelry on Model</h3> |
| | <p class="text-gray-200 text-center mb-4">Accurate placement with realistic skin interactions and lighting.</p> |
| | <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600">Try Now</button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="relative overflow-hidden rounded-lg shadow-lg product-card"> |
| | <img src="http://static.photos/streetwear/640x360/2" alt="Apparel Visualization" class="w-full h-64 object-cover"> |
| | <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition duration-300 p-6"> |
| | <h3 class="text-white text-xl font-bold mb-2">Apparel Mockups</h3> |
| | <p class="text-gray-200 text-center mb-4">Natural fabric drape with perfect graphic placement and folds.</p> |
| | <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600">Try Now</button> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="relative overflow-hidden rounded-lg shadow-lg product-card"> |
| | <img src="http://static.photos/minimal/640x360/3" alt="Product Visualization" class="w-full h-64 object-cover"> |
| | <div class="product-overlay absolute inset-0 bg-black bg-opacity-70 flex flex-col justify-center items-center opacity-0 transform translate-y-4 transition duration-300 p-6"> |
| | <h3 class="text-white text-xl font-bold mb-2">Product Campaigns</h3> |
| | <p class="text-gray-200 text-center mb-4">Hero shots with perfect lighting, composition and reflections.</p> |
| | <button class="bg-amber-500 text-white px-4 py-2 rounded hover:bg-amber-600">Try Now</button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gray-900 text-white"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h2 class="text-4xl font-bold mb-6">Ready to Elevate Your Brand Imagery?</h2> |
| | <p class="text-xl mb-10 max-w-2xl mx-auto">Upload your products and receive photorealistic marketing visuals in 48 hours or less.</p> |
| | <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4"> |
| | <label for="project-upload" class="bg-amber-600 text-white px-8 py-4 rounded-full font-medium hover:bg-amber-700 transition cursor-pointer"> |
| | <input id="project-upload" type="file" accept="image/*" multiple class="hidden" /> |
| | Start Your Project |
| | <i data-feather="arrow-right" class="inline ml-2 w-5 h-5"></i> |
| | </label> |
| | <button class="border-2 border-white text-white px-8 py-4 rounded-full font-medium hover:bg-white hover:text-gray-900 transition"> |
| | Schedule a Demo |
| | </button> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-100 py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="flex flex-col md:flex-row justify-between items-center"> |
| | <div class="mb-6 md:mb-0"> |
| | <h3 class="text-2xl font-bold text-gray-800">Aurora Luxe</h3> |
| | <p class="text-gray-600 mt-2">Luxury product visualization perfected.</p> |
| | </div> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition"> |
| | <i data-feather="instagram" class="w-5 h-5"></i> |
| | </a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition"> |
| | <i data-feather="twitter" class="w-5 h-5"></i> |
| | </a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition"> |
| | <i data-feather="linkedin" class="w-5 h-5"></i> |
| | </a> |
| | </div> |
| | </div> |
| | <div class="border-t border-gray-200 mt-8 pt-8 flex flex-col md:flex-row justify-between"> |
| | <p class="text-gray-600 mb-4 md:mb-0">© 2023 Aurora Luxe. All rights reserved.</p> |
| | <div class="flex space-x-6"> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">Privacy</a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">Terms</a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">FAQ</a> |
| | <a href="#" class="text-gray-600 hover:text-amber-600 transition">Contact</a> |
| | </div> |
| | </div> |
| | </div> |
| | </footer> |
| | <script> |
| | |
| | let productImage = null; |
| | let currentBackground = null; |
| | const UNSPLASH_ACCESS_KEY = 'YOUR_UNSPLASH_ACCESS_KEY'; |
| | |
| | |
| | async function getBackgroundImages(query = 'luxury') { |
| | try { |
| | const response = await fetch(`https://api.unsplash.com/search/photos?page=1&query=${query}&client_id=${UNSPLASH_ACCESS_KEY}`); |
| | const data = await response.json(); |
| | return data.results; |
| | } catch (error) { |
| | console.error('Error fetching backgrounds:', error); |
| | return []; |
| | } |
| | } |
| | |
| | |
| | async function showBackgroundOptions() { |
| | const backgrounds = await getBackgroundImages(); |
| | const container = document.getElementById('background-options'); |
| | container.innerHTML = ''; |
| | |
| | backgrounds.forEach((bg, index) => { |
| | const img = document.createElement('img'); |
| | img.src = bg.urls.small; |
| | img.alt = bg.alt_description || 'Background option'; |
| | img.dataset.fullUrl = bg.urls.regular; |
| | img.className = 'w-20 h-20 object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-amber-500'; |
| | img.addEventListener('click', () => setBackground(bg.urls.regular)); |
| | container.appendChild(img); |
| | }); |
| | } |
| | |
| | |
| | function setBackground(url) { |
| | currentBackground = url; |
| | const bgCanvas = document.getElementById('background-canvas'); |
| | bgCanvas.src = url; |
| | bgCanvas.style.display = 'block'; |
| | } |
| | |
| | |
| | document.getElementById('product-upload').addEventListener('change', function(e) { |
| | if (e.target.files.length > 0) { |
| | productImage = URL.createObjectURL(e.target.files[0]); |
| | const productCanvas = document.getElementById('product-canvas'); |
| | productCanvas.src = productImage; |
| | productCanvas.style.display = 'block'; |
| | } |
| | }); |
| | |
| | |
| | document.getElementById('generate-btn').addEventListener('click', async function() { |
| | if (!productImage) { |
| | alert('Please upload a product image first'); |
| | return; |
| | } |
| | await showBackgroundOptions(); |
| | |
| | |
| | updateProductPosition(); |
| | }); |
| | |
| | |
| | function updateProductPosition() { |
| | const productCanvas = document.getElementById('product-canvas'); |
| | if (!productCanvas) return; |
| | |
| | const size = document.getElementById('product-size').value; |
| | const rotation = document.getElementById('product-rotation').value; |
| | const x = document.getElementById('product-x').value; |
| | const y = document.getElementById('product-y').value; |
| | |
| | productCanvas.style.transform = `translate(-50%, -50%) rotate(${rotation}deg) scale(${size})`; |
| | productCanvas.style.left = `${x}%`; |
| | productCanvas.style.top = `${y}%`; |
| | } |
| | |
| | |
| | ['product-size', 'product-rotation', 'product-x', 'product-y'].forEach(id => { |
| | document.getElementById(id).addEventListener('input', updateProductPosition); |
| | }); |
| | |
| | |
| | document.getElementById('download-btn').addEventListener('click', function() { |
| | if (!productImage || !currentBackground) { |
| | alert('Please generate a visualization first'); |
| | return; |
| | } |
| | |
| | const container = document.getElementById('canvas-container'); |
| | html2canvas(container).then(canvas => { |
| | const link = document.createElement('a'); |
| | link.download = 'aurora-luxe-visualization.png'; |
| | link.href = canvas.toDataURL('image/png'); |
| | link.click(); |
| | }); |
| | }); |
| | |
| | |
| | document.getElementById('new-visual-btn').addEventListener('click', function() { |
| | document.getElementById('background-options').innerHTML = ''; |
| | document.getElementById('background-canvas').style.display = 'none'; |
| | document.getElementById('product-canvas').style.display = 'none'; |
| | }); |
| | |
| | |
| | VANTA.GLOBE({ |
| | el: "#vanta-bg", |
| | mouseControls: true, |
| | touchControls: true, |
| | gyroControls: false, |
| | minHeight: 200.00, |
| | minWidth: 200.00, |
| | scale: 1.00, |
| | scaleMobile: 1.00, |
| | color: 0xC9A669, |
| | backgroundColor: 0xF4EDE4, |
| | size: 0.8 |
| | }); |
| | |
| | |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
