Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Comic Crafter</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> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap'); | |
| .comic-font { | |
| font-family: 'Bangers', cursive; | |
| } | |
| .dialogue-font { | |
| font-family: 'Comic Neue', cursive; | |
| } | |
| #vanta-bg { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.15; | |
| } | |
| .comic-panel { | |
| box-shadow: 8px 8px 0px rgba(0,0,0,0.3); | |
| border: 4px solid black; | |
| transition: all 0.3s ease; | |
| } | |
| .comic-panel:hover { | |
| transform: scale(1.02); | |
| box-shadow: 12px 12px 0px rgba(0,0,0,0.4); | |
| } | |
| .zoom-effect { | |
| transition: transform 0.3s ease; | |
| } | |
| .zoom-effect:hover { | |
| transform: scale(1.05); | |
| } | |
| .speech-bubble { | |
| position: relative; | |
| background: white; | |
| border: 3px solid black; | |
| border-radius: 1.5em; | |
| padding: 1rem; | |
| } | |
| .speech-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -20px; | |
| left: 20%; | |
| width: 0; | |
| height: 0; | |
| border: 10px solid transparent; | |
| border-top-color: black; | |
| border-bottom: 0; | |
| margin-left: -10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div id="vanta-bg"></div> | |
| <!-- Hero Section --> | |
| <header class="relative overflow-hidden bg-gradient-to-br from-purple-600 to-blue-500 py-20 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto text-center"> | |
| <h1 class="text-5xl md:text-7xl font-extrabold tracking-tight comic-font text-white drop-shadow-lg"> | |
| AI Comic Crafter | |
| </h1> | |
| <p class="mt-6 max-w-3xl mx-auto text-xl dialogue-font text-white"> | |
| Create stunning comic books with AI-powered characters, dialogues, and artwork! | |
| </p> | |
| <div class="mt-10"> | |
| <a href="#generator" class="zoom-effect inline-flex items-center px-8 py-4 border border-transparent text-xl font-medium rounded-md shadow-sm text-white bg-black hover:bg-gray-900 comic-font"> | |
| Start Crafting <i data-feather="arrow-right" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Features Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-extrabold comic-font text-center text-gray-900 mb-12"> | |
| Why Choose AI Comic Crafter? | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="zoom-effect bg-white p-8 rounded-lg comic-panel"> | |
| <div class="flex justify-center mb-4"> | |
| <i data-feather="image" class="w-12 h-12 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold comic-font text-center mb-4">Dynamic Art Styles</h3> | |
| <p class="dialogue-font text-gray-600 text-center"> | |
| Choose from multiple art styles including comic, manga, anime, noir, and realistic. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="zoom-effect bg-white p-8 rounded-lg comic-panel"> | |
| <div class="flex justify-center mb-4"> | |
| <i data-feather="message-square" class="w-12 h-12 text-blue-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold comic-font text-center mb-4">AI-Generated Dialogues</h3> | |
| <p class="dialogue-font text-gray-600 text-center"> | |
| Let our AI craft compelling conversations or write your own custom dialogues. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="zoom-effect bg-white p-8 rounded-lg comic-panel"> | |
| <div class="flex justify-center mb-4"> | |
| <i data-feather="book" class="w-12 h-12 text-green-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold comic-font text-center mb-4">Multi-Page Comics</h3> | |
| <p class="dialogue-font text-gray-600 text-center"> | |
| Create complete comic books with multiple pages and panels. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Generator Section --> | |
| <section id="generator" class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-100"> | |
| <div class="max-w-5xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden comic-panel"> | |
| <div class="p-6 sm:p-8"> | |
| <h2 class="text-3xl font-extrabold comic-font text-gray-900 mb-6"> | |
| Comic Book Generator | |
| </h2> | |
| <!-- Generator Form --> | |
| <div class="space-y-6"> | |
| <!-- Title Input --> | |
| <div> | |
| <label for="title" class="block text-lg font-medium dialogue-font text-gray-700 mb-1">Comic Book Title</label> | |
| <input type="text" id="title" class="block w-full px-4 py-3 rounded-lg border-2 border-black dialogue-font focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Enter your comic book title..."> | |
| </div> | |
| <!-- Story Setup --> | |
| <div> | |
| <label for="story" class="block text-lg font-medium dialogue-font text-gray-700 mb-1">Story Setup</label> | |
| <textarea id="story" rows="3" class="block w-full px-4 py-3 rounded-lg border-2 border-black dialogue-font focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Describe your characters, setting, and plot..."></textarea> | |
| </div> | |
| <!-- Settings Row --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Pages --> | |
| <div> | |
| <label for="pages" class="block text-lg font-medium dialogue-font text-gray-700 mb-1">Number of Pages</label> | |
| <select id="pages" class="block w-full px-4 py-3 rounded-lg border-2 border-black dialogue-font focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>1</option> | |
| <option selected>3</option> | |
| <option>5</option> | |
| <option>8</option> | |
| <option>10</option> | |
| </select> | |
| </div> | |
| <!-- Panels --> | |
| <div> | |
| <label for="panels" class="block text-lg font-medium dialogue-font text-gray-700 mb-1">Panels Per Page</label> | |
| <select id="panels" class="block w-full px-4 py-3 rounded-lg border-2 border-black dialogue-font focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>2</option> | |
| <option selected>4</option> | |
| <option>6</option> | |
| </select> | |
| </div> | |
| <!-- Style --> | |
| <div> | |
| <label for="style" class="block text-lg font-medium dialogue-font text-gray-700 mb-1">Art Style</label> | |
| <select id="style" class="block w-full px-4 py-3 rounded-lg border-2 border-black dialogue-font focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>Comic</option> | |
| <option>Anime</option> | |
| <option>Manga</option> | |
| <option>Noir</option> | |
| <option>Realistic</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- Custom Dialogues --> | |
| <div> | |
| <label for="dialogues" class="block text-lg font-medium dialogue-font text-gray-700 mb-1">Custom Dialogues (Optional)</label> | |
| <textarea id="dialogues" rows="6" class="block w-full px-4 py-3 rounded-lg border-2 border-black dialogue-font focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Enter your custom dialogues, one per line..."></textarea> | |
| </div> | |
| <!-- Explicit Content Toggle --> | |
| <div class="flex items-center"> | |
| <input id="explicit" type="checkbox" class="h-5 w-5 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> | |
| <label for="explicit" class="ml-2 block text-lg dialogue-font text-gray-700"> | |
| Allow explicit content (blood/gore) | |
| </label> | |
| </div> | |
| <!-- Generate Button --> | |
| <div class="pt-4"> | |
| <button id="generate-btn" class="w-full flex justify-center items-center px-8 py-4 border border-transparent text-xl font-medium rounded-md shadow-sm text-white bg-black hover:bg-gray-900 comic-font"> | |
| <i data-feather="zap" class="mr-2"></i> Generate Comic Book | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Preview Section --> | |
| <div class="bg-gray-50 p-6 sm:p-8 border-t-2 border-black"> | |
| <h3 class="text-2xl font-bold comic-font text-gray-900 mb-6">Your Comic Preview</h3> | |
| <div id="preview-area" class="grid grid-cols-2 gap-4"> | |
| <!-- Placeholder for generated panels --> | |
| <div class="bg-white p-4 rounded-lg comic-panel h-64 flex items-center justify-center"> | |
| <p class="dialogue-font text-gray-500">Your comic panels will appear here</p> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg comic-panel h-64 flex items-center justify-center"> | |
| <p class="dialogue-font text-gray-500">Your comic panels will appear here</p> | |
| </div> | |
| </div> | |
| <!-- Download Button (hidden initially) --> | |
| <div id="download-section" class="mt-8 hidden"> | |
| <div class="speech-bubble max-w-md mx-auto mb-6"> | |
| <p class="dialogue-font text-center">BAM! Your comic is ready to download!</p> | |
| </div> | |
| <button id="download-btn" class="w-full flex justify-center items-center px-8 py-4 border border-transparent text-xl font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 comic-font"> | |
| <i data-feather="download" class="mr-2"></i> Download Complete Comic | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Examples Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-white"> | |
| <div class="max-w-7xl mx-auto"> | |
| <h2 class="text-3xl font-extrabold comic-font text-center text-gray-900 mb-12"> | |
| Example Comics | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Example 1 --> | |
| <div class="zoom-effect"> | |
| <div class="bg-white rounded-lg overflow-hidden comic-panel"> | |
| <img src="http://static.photos/comic/640x360/1" alt="Sci-Fi Comic Example" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold comic-font mb-2">Galactic Guardians</h3> | |
| <p class="dialogue-font text-gray-600">"We must protect the galaxy at all costs!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Example 2 --> | |
| <div class="zoom-effect"> | |
| <div class="bg-white rounded-lg overflow-hidden comic-panel"> | |
| <img src="http://static.photos/comic/640x360/2" alt="Noir Comic Example" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold comic-font mb-2">Shadow City</h3> | |
| <p class="dialogue-font text-gray-600">"In this town, the shadows have secrets..."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Example 3 --> | |
| <div class="zoom-effect"> | |
| <div class="bg-white rounded-lg overflow-hidden comic-panel"> | |
| <img src="http://static.photos/comic/640x360/3" alt="Fantasy Comic Example" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-xl font-bold comic-font mb-2">Dragon's Legacy</h3> | |
| <p class="dialogue-font text-gray-600">"The ancient magic awakens!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black text-white py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="text-3xl comic-font">AI Comic Crafter</h2> | |
| <p class="mt-2 dialogue-font">Create amazing comics with the power of AI!</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-white hover:text-purple-400"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-purple-400"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-purple-400"> | |
| <i data-feather="github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center dialogue-font text-gray-400"> | |
| <p>© 2023 AI Comic Crafter. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x7e22ce, | |
| backgroundColor: 0xf9fafb, | |
| size: 0.8 | |
| }); | |
| // Initialize Feather Icons | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| // Mock generation functionality for demo | |
| document.getElementById('generate-btn').addEventListener('click', function() { | |
| // Show loading state | |
| this.innerHTML = '<i data-feather="loader" class="animate-spin mr-2"></i> Generating...'; | |
| feather.replace(); | |
| // Simulate generation delay | |
| setTimeout(() => { | |
| // Update preview area | |
| const previewArea = document.getElementById('preview-area'); | |
| previewArea.innerHTML = ` | |
| <div class="zoom-effect"> | |
| <img src="http://static.photos/comic/640x360/4" class="w-full h-64 object-cover rounded-lg comic-panel" alt="Generated panel 1"> | |
| </div> | |
| <div class="zoom-effect"> | |
| <img src="http://static.photos/comic/640x360/5" class="w-full h-64 object-cover rounded-lg comic-panel" alt="Generated panel 2"> | |
| </div> | |
| <div class="zoom-effect"> | |
| <img src="http://static.photos/comic/640x360/6" class="w-full h-64 object-cover rounded-lg comic-panel" alt="Generated panel 3"> | |
| </div> | |
| <div class="zoom-effect"> | |
| <img src="http://static.photos/comic/640x360/7" class="w-full h-64 object-cover rounded-lg comic-panel" alt="Generated panel 4"> | |
| </div> | |
| `; | |
| // Show download section | |
| document.getElementById('download-section').classList.remove('hidden'); | |
| // Reset button | |
| this.innerHTML = '<i data-feather="zap" class="mr-2"></i> Generate Again'; | |
| feather.replace(); | |
| }, 2000); | |
| }); | |
| // Mock download functionality | |
| document.getElementById('download-btn').addEventListener('click', function() { | |
| this.innerHTML = '<i data-feather="check" class="mr-2"></i> Download Started'; | |
| feather.replace(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |