Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Website Builder | Text to WordPress</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .preview-frame { | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.5rem; | |
| transform-origin: top left; | |
| } | |
| .draggable { | |
| cursor: move; | |
| transition: all 0.2s ease; | |
| } | |
| .draggable:hover { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .resize-handle { | |
| width: 10px; | |
| height: 10px; | |
| background: #4f46e5; | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| cursor: nwse-resize; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(79, 70, 229, 0.1); | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white p-4 shadow-md"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| <h1 class="text-xl font-bold">AI Website Builder</h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-white text-indigo-600 rounded-md font-medium hover:bg-gray-100 transition"> | |
| <i class="fas fa-save mr-2"></i>Save Project | |
| </button> | |
| <button id="exportBtn" class="px-4 py-2 bg-indigo-700 text-white rounded-md font-medium hover:bg-indigo-800 transition"> | |
| <i class="fas fa-wordpress mr-2"></i>Export to WordPress | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto"> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-3">AI Tools</h2> | |
| <div class="space-y-2"> | |
| <button class="sidebar-item w-full text-left px-3 py-2 rounded-md text-gray-700 hover:text-indigo-600 transition flex items-center"> | |
| <i class="fas fa-magic mr-2 text-indigo-500"></i> Generate from Text | |
| </button> | |
| <button class="sidebar-item w-full text-left px-3 py-2 rounded-md text-gray-700 hover:text-indigo-600 transition flex items-center"> | |
| <i class="fas fa-image mr-2 text-indigo-500"></i> AI Image Generator | |
| </button> | |
| <button class="sidebar-item w-full text-left px-3 py-2 rounded-md text-gray-700 hover:text-indigo-600 transition flex items-center"> | |
| <i class="fas fa-font mr-2 text-indigo-500"></i> Content Rewriter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-3">Elements</h2> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <div class="element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition"> | |
| <i class="fas fa-heading text-indigo-500 mb-1"></i> | |
| <p class="text-xs text-gray-600">Heading</p> | |
| </div> | |
| <div class="element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition"> | |
| <i class="fas fa-paragraph text-indigo-500 mb-1"></i> | |
| <p class="text-xs text-gray-600">Text</p> | |
| </div> | |
| <div class="element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition"> | |
| <i class="fas fa-image text-indigo-500 mb-1"></i> | |
| <p class="text-xs text-gray-600">Image</p> | |
| </div> | |
| <div class="element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition"> | |
| <i class="fas fa-th text-indigo-500 mb-1"></i> | |
| <p class="text-xs text-gray-600">Grid</p> | |
| </div> | |
| <div class="element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition"> | |
| <i class="fas fa-play text-indigo-500 mb-1"></i> | |
| <p class="text-xs text-gray-600">Video</p> | |
| </div> | |
| <div class="element-item p-3 border border-gray-200 rounded-md text-center cursor-pointer hover:bg-indigo-50 transition"> | |
| <i class="fas fa-form text-indigo-500 mb-1"></i> | |
| <p class="text-xs text-gray-600">Form</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-3">Templates</h2> | |
| <div class="space-y-2"> | |
| <div class="template-item p-2 border border-gray-200 rounded-md cursor-pointer hover:border-indigo-300 transition"> | |
| <img src="https://via.placeholder.com/200x120?text=Business" alt="Business Template" class="rounded-md mb-1"> | |
| <p class="text-sm text-center text-gray-600">Business</p> | |
| </div> | |
| <div class="template-item p-2 border border-gray-200 rounded-md cursor-pointer hover:border-indigo-300 transition"> | |
| <img src="https://via.placeholder.com/200x120?text=Portfolio" alt="Portfolio Template" class="rounded-md mb-1"> | |
| <p class="text-sm text-center text-gray-600">Portfolio</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Editor Area --> | |
| <div class="flex-1 flex flex-col"> | |
| <!-- Toolbar --> | |
| <div class="bg-white border-b border-gray-200 p-3 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 text-sm"> | |
| <option>Desktop</option> | |
| <option>Tablet</option> | |
| <option>Mobile</option> | |
| </select> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md"> | |
| <i class="fas fa-undo"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md"> | |
| <i class="fas fa-redo"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-indigo-600 hover:bg-gray-100 rounded-md"> | |
| <i class="fas fa-code"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Editor --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-100"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- AI Input Section --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Generate Your Website with AI</h2> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2">Describe your website</label> | |
| <textarea id="aiPrompt" class="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" rows="4" placeholder="Example: I need a business website for my digital marketing agency. It should have a hero section, services, portfolio, and contact form..."></textarea> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 text-sm"> | |
| <option>Professional</option> | |
| <option>Creative</option> | |
| <option>Minimal</option> | |
| <option>Vibrant</option> | |
| </select> | |
| <select class="border border-gray-300 rounded-md px-3 py-1 text-sm"> | |
| <option>Light Theme</option> | |
| <option>Dark Theme</option> | |
| </select> | |
| </div> | |
| <button id="generateBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> Generate Website | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Preview Area --> | |
| <div class="relative"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="text-lg font-medium text-gray-800">Website Preview</h3> | |
| <div class="text-sm text-gray-500">Drag and drop to edit</div> | |
| </div> | |
| <div id="previewContainer" class="preview-frame bg-white mx-auto w-full" style="height: 600px; overflow: auto;"> | |
| <!-- Default content or generated content will appear here --> | |
| <div class="text-center py-20 text-gray-400" id="defaultPreviewContent"> | |
| <i class="fas fa-magic text-4xl mb-3"></i> | |
| <p class="text-xl">Your AI-generated website will appear here</p> | |
| <p class="text-sm mt-2">Describe your website above and click "Generate Website"</p> | |
| </div> | |
| <!-- Sample generated content (hidden by default) --> | |
| <div id="generatedContent" class="hidden"> | |
| <!-- Sample Hero Section --> | |
| <div class="draggable relative p-4 border-2 border-dashed border-transparent hover:border-indigo-300" style="min-height: 100px;"> | |
| <div class="gradient-bg text-white p-12 rounded-lg text-center"> | |
| <h1 class="text-4xl font-bold mb-4">Your Business Name</h1> | |
| <p class="text-xl mb-8">Professional digital marketing solutions tailored for your success</p> | |
| <button class="px-6 py-3 bg-white text-indigo-600 rounded-md font-medium hover:bg-gray-100 transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <div class="absolute top-0 right-0 p-2 bg-white bg-opacity-80 rounded-bl-md"> | |
| <button class="edit-element p-1 text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-pen"></i> | |
| </button> | |
| <button class="delete-element p-1 text-gray-600 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Sample Services Section --> | |
| <div class="draggable relative p-4 border-2 border-dashed border-transparent hover:border-indigo-300 mt-6" style="min-height: 100px;"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Our Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="text-indigo-600 mb-4"> | |
| <i class="fas fa-bullseye text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">SEO Optimization</h3> | |
| <p class="text-gray-600">Improve your search rankings and organic traffic with our proven strategies.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="text-indigo-600 mb-4"> | |
| <i class="fas fa-ad text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">PPC Advertising</h3> | |
| <p class="text-gray-600">Targeted ads that deliver measurable results and maximize your ROI.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition"> | |
| <div class="text-indigo-600 mb-4"> | |
| <i class="fas fa-paint-brush text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Content Creation</h3> | |
| <p class="text-gray-600">Engaging content that resonates with your audience and drives conversions.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute top-0 right-0 p-2 bg-white bg-opacity-80 rounded-bl-md"> | |
| <button class="edit-element p-1 text-gray-600 hover:text-indigo-600"> | |
| <i class="fas fa-pen"></i> | |
| </button> | |
| <button class="delete-element p-1 text-gray-600 hover:text-red-600"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Properties Panel --> | |
| <div class="w-72 bg-white border-l border-gray-200 p-4 overflow-y-auto"> | |
| <h2 class="text-lg font-semibold text-gray-800 mb-4">Properties</h2> | |
| <div id="emptyProperties" class="text-center py-10 text-gray-400"> | |
| <i class="fas fa-mouse-pointer text-3xl mb-3"></i> | |
| <p>Select an element to edit its properties</p> | |
| </div> | |
| <div id="elementProperties" class="hidden"> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-3 flex justify-between items-center"> | |
| <span>Section Settings</span> | |
| <span class="text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Hero Section</span> | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Background</label> | |
| <div class="flex space-x-2"> | |
| <button class="w-8 h-8 rounded-full bg-indigo-600 border-2 border-indigo-700"></button> | |
| <button class="w-8 h-8 rounded-full bg-white border border-gray-300"></button> | |
| <button class="w-8 h-8 rounded-full bg-gray-800 border border-gray-900"></button> | |
| <button class="w-8 h-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 border border-gray-300"></button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Padding</label> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <input type="number" class="border border-gray-300 rounded-md px-2 py-1 text-sm" placeholder="Top" value="48"> | |
| <input type="number" class="border border-gray-300 rounded-md px-2 py-1 text-sm" placeholder="Right" value="16"> | |
| <input type="number" class="border border-gray-300 rounded-md px-2 py-1 text-sm" placeholder="Bottom" value="48"> | |
| <input type="number" class="border border-gray-300 rounded-md px-2 py-1 text-sm" placeholder="Left" value="16"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-3">Content</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Heading</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" value="Your Business Name"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Subheading</label> | |
| <textarea class="w-full border border-gray-300 rounded-md px-3 py-2" rows="2">Professional digital marketing solutions tailored for your success</textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Button Text</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" value="Get Started"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium text-gray-700 mb-3">Advanced</h3> | |
| <div class="space-y-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" checked> | |
| <span class="ml-2 text-sm text-gray-700">Full-width section</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"> | |
| <span class="ml-2 text-sm text-gray-700">Parallax effect</span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-red-100 text-red-600 rounded-md font-medium hover:bg-red-200 transition"> | |
| <i class="fas fa-trash mr-2"></i> Delete Section | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Modal --> | |
| <div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Export to WordPress</h3> | |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">WordPress Site URL</label> | |
| <input type="url" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="https://yourwordpresssite.com"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Admin Username</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="username"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Application Password</label> | |
| <input type="password" class="w-full border border-gray-300 rounded-md px-3 py-2" placeholder="••••••••"> | |
| <p class="text-xs text-gray-500 mt-1">Create in WordPress: Users > Your Profile > Application Passwords</p> | |
| </div> | |
| <div class="pt-4"> | |
| <button id="confirmExport" class="w-full py-2 bg-indigo-600 text-white rounded-md font-medium hover:bg-indigo-700 transition flex items-center justify-center"> | |
| <i class="fas fa-cloud-upload-alt mr-2"></i> Export Now | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Overlay --> | |
| <div id="loadingOverlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg shadow-xl p-8 max-w-sm text-center"> | |
| <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-indigo-500 mx-auto mb-4"></div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-2">Generating Your Website</h3> | |
| <p class="text-gray-600">Our AI is creating your perfect website. This may take a moment...</p> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const generateBtn = document.getElementById('generateBtn'); | |
| const exportBtn = document.getElementById('exportBtn'); | |
| const exportModal = document.getElementById('exportModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const confirmExport = document.getElementById('confirmExport'); | |
| const loadingOverlay = document.getElementById('loadingOverlay'); | |
| const defaultPreviewContent = document.getElementById('defaultPreviewContent'); | |
| const generatedContent = document.getElementById('generatedContent'); | |
| const emptyProperties = document.getElementById('emptyProperties'); | |
| const elementProperties = document.getElementById('elementProperties'); | |
| // Event Listeners | |
| generateBtn.addEventListener('click', generateWebsite); | |
| exportBtn.addEventListener('click', showExportModal); | |
| closeModal.addEventListener('click', hideExportModal); | |
| confirmExport.addEventListener('click', exportToWordPress); | |
| // Make elements draggable (simplified for demo) | |
| document.querySelectorAll('.draggable').forEach(el => { | |
| el.addEventListener('mousedown', initDrag); | |
| }); | |
| // Show edit buttons on hover | |
| document.querySelectorAll('.draggable').forEach(el => { | |
| el.addEventListener('mouseenter', () => { | |
| el.querySelector('.absolute').classList.remove('hidden'); | |
| }); | |
| el.addEventListener('mouseleave', () => { | |
| el.querySelector('.absolute').classList.add('hidden'); | |
| }); | |
| }); | |
| // Functions | |
| function generateWebsite() { | |
| const prompt = document.getElementById('aiPrompt').value; | |
| if (!prompt) { | |
| alert('Please describe your website first'); | |
| return; | |
| } | |
| // Show loading overlay | |
| loadingOverlay.classList.remove('hidden'); | |
| // Simulate AI generation delay | |
| setTimeout(() => { | |
| loadingOverlay.classList.add('hidden'); | |
| // Hide default content and show generated content | |
| defaultPreviewContent.classList.add('hidden'); | |
| generatedContent.classList.remove('hidden'); | |
| // Show properties panel | |
| emptyProperties.classList.add('hidden'); | |
| elementProperties.classList.remove('hidden'); | |
| // Update the preview based on the prompt (simplified for demo) | |
| // In a real app, this would be an API call to an AI service | |
| console.log('Generating website based on:', prompt); | |
| }, 2000); | |
| } | |
| function showExportModal() { | |
| exportModal.classList.remove('hidden'); | |
| } | |
| function hideExportModal() { | |
| exportModal.classList.add('hidden'); | |
| } | |
| function exportToWordPress() { | |
| // Show loading overlay | |
| loadingOverlay.classList.remove('hidden'); | |
| hideExportModal(); | |
| // Simulate export process | |
| setTimeout(() => { | |
| loadingOverlay.classList.add('hidden'); | |
| alert('Website successfully exported to WordPress!'); | |
| }, 1500); | |
| } | |
| // Simplified drag functionality for demo | |
| function initDrag(e) { | |
| if (e.target.classList.contains('edit-element') || | |
| e.target.classList.contains('delete-element')) { | |
| return; | |
| } | |
| const element = e.currentTarget; | |
| let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; | |
| e = e || window.event; | |
| e.preventDefault(); | |
| // Get the mouse cursor position at startup | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| document.onmouseup = closeDragElement; | |
| document.onmousemove = elementDrag; | |
| function elementDrag(e) { | |
| e = e || window.event; | |
| e.preventDefault(); | |
| // Calculate the new cursor position | |
| pos1 = pos3 - e.clientX; | |
| pos2 = pos4 - e.clientY; | |
| pos3 = e.clientX; | |
| pos4 = e.clientY; | |
| // Set the element's new position | |
| element.style.top = (element.offsetTop - pos2) + "px"; | |
| element.style.left = (element.offsetLeft - pos1) + "px"; | |
| } | |
| function closeDragElement() { | |
| // Stop moving when mouse button is released | |
| document.onmouseup = null; | |
| document.onmousemove = null; | |
| } | |
| } | |
| // Demo: Click on elements in the sidebar to add them to the preview | |
| document.querySelectorAll('.element-item').forEach(el => { | |
| el.addEventListener('click', () => { | |
| alert('In a full implementation, this would add a new element to the preview area.'); | |
| }); | |
| }); | |
| </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=XXXMARK/website-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |