Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ComicBookForge - Uncensored Comic Creator</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Inter:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Feather Icons --> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <!-- Custom Config for Tailwind --> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cream: '#FFFDF7', | |
| ink: '#1a1a1a', | |
| pastel: { | |
| pink: '#FFD1DC', | |
| blue: '#C1E1C1', // Using a softer green/blue mix or specific pastel | |
| yellow: '#FDFD96', | |
| green: '#C1E1C1', | |
| purple: '#E6E6FA' | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| serif: ['Playfair Display', 'serif'], | |
| comic: ['Comic Neue', 'cursive'], | |
| }, | |
| boxShadow: { | |
| 'hard': '3px 3px 0px #1a1a1a', | |
| 'hard-lg': '5px 5px 0px #1a1a1a', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-cream text-ink font-sans min-h-screen flex flex-col overflow-x-hidden"> | |
| <!-- Header --> | |
| <header class="border-b-2 border-ink bg-white sticky top-0 z-50"> | |
| <div class="max-w-4xl mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center gap-2"> | |
| <div class="w-8 h-8 bg-ink text-cream flex items-center justify-center font-serif font-bold rounded-sm">CB</div> | |
| <h1 class="font-serif text-xl font-bold tracking-wide">ComicBookForge</h1> | |
| </div> | |
| <div class="text-xs font-bold px-2 py-1 bg-pastel-yellow border border-ink rounded shadow-hard"> | |
| UNLOCKED MODE | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow w-full max-w-4xl mx-auto p-4 sm:p-6 space-y-8 pb-24"> | |
| <!-- Step 1: Story Input --> | |
| <section id="step-story" class="step-section"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <span class="bg-ink text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">1</span> | |
| <h2 class="text-2xl font-serif font-bold">The Story</h2> | |
| </div> | |
| <div class="bg-white border-2 border-ink rounded-lg p-1 shadow-hard"> | |
| <textarea id="storyInput" | |
| class="w-full h-48 p-4 bg-cream border-none focus:ring-0 resize-none font-serif text-lg placeholder-gray-400" | |
| placeholder="Paste your story outline here. You can use script format, bullet points, or full paragraphs. Our AI analyzes plot, pacing, and character arcs..."></textarea> | |
| </div> | |
| </section> | |
| <!-- Step 2: Characters --> | |
| <section id="step-characters" class="step-section"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <span class="bg-ink text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">2</span> | |
| <h2 class="text-2xl font-serif font-bold">Characters</h2> | |
| </div> | |
| <div id="characterList" class="space-y-4"> | |
| <!-- Character Cards will be injected here --> | |
| <div class="bg-white border-2 border-ink p-4 rounded-lg shadow-hard flex flex-col sm:flex-row gap-4 items-start sm:items-center"> | |
| <div class="w-20 h-20 bg-gray-100 border-2 border-ink border-dashed flex items-center justify-center text-gray-400 shrink-0"> | |
| <i data-feather="image"></i> | |
| </div> | |
| <div class="flex-grow w-full space-y-3"> | |
| <input type="text" placeholder="Character Name" class="w-full p-2 border-2 border-ink rounded bg-cream font-bold"> | |
| <input type="text" placeholder="Description (e.g. 'Tall cyborg with red eyes')" class="w-full p-2 border-2 border-ink rounded bg-cream"> | |
| </div> | |
| </div> | |
| </div> | |
| <button onclick="addCharacter()" class="mt-4 text-sm font-bold underline hover:text-gray-600 flex items-center gap-1"> | |
| <i data-feather="plus-circle" class="w-4 h-4"></i> Add Character | |
| </button> | |
| </section> | |
| <!-- Step 3: Art Style --> | |
| <section id="step-style" class="step-section"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <span class="bg-ink text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">3</span> | |
| <h2 class="text-2xl font-serif font-bold">Visual Style</h2> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> | |
| <!-- Style Options --> | |
| <button class="style-btn active bg-white border-2 border-ink p-3 rounded-lg shadow-hard hover:-translate-y-1 transition-transform flex flex-col items-center gap-2" data-style="superhero"> | |
| <div class="w-12 h-12 bg-pastel-red-200 rounded-full border-2 border-ink overflow-hidden flex items-center justify-center text-xl">💪</div> | |
| <span class="font-bold text-xs">Superhero</span> | |
| </button> | |
| <button class="style-btn bg-white border-2 border-ink p-3 rounded-lg shadow-hard hover:-translate-y-1 transition-transform flex flex-col items-center gap-2" data-style="manga"> | |
| <div class="w-12 h-12 bg-pastel-blue-200 rounded-full border-2 border-ink overflow-hidden flex items-center justify-center text-xl">👁️</div> | |
| <span class="font-bold text-xs">Manga</span> | |
| </button> | |
| <button class="style-btn bg-white border-2 border-ink p-3 rounded-lg shadow-hard hover:-translate-y-1 transition-transform flex flex-col items-center gap-2" data-style="noir"> | |
| <div class="w-12 h-12 bg-gray-800 rounded-full border-2 border-ink overflow-hidden flex items-center justify-center text-xl">🌃</div> | |
| <span class="font-bold text-xs">Noir</span> | |
| </button> | |
| <button class="style-btn bg-white border-2 border-ink p-3 rounded-lg shadow-hard hover:-translate-y-1 transition-transform flex flex-col items-center gap-2" data-style="watercolor"> | |
| <div class="w-12 h-12 bg-pastel-purple-200 rounded-full border-2 border-ink overflow-hidden flex items-center justify-center text-xl">🎨</div> | |
| <span class="font-bold text-xs">Watercolor</span> | |
| </button> | |
| <button class="style-btn bg-white border-2 border-ink p-3 rounded-lg shadow-hard hover:-translate-y-1 transition-transform flex flex-col items-center gap-2" data-style="custom"> | |
| <div class="w-12 h-12 bg-pastel-yellow rounded-full border-2 border-ink overflow-hidden flex items-center justify-center text-xl">✨</div> | |
| <span class="font-bold text-xs">Custom</span> | |
| </button> | |
| </div> | |
| <!-- Custom Style Upload --> | |
| <div id="customStyleUpload" class="hidden mt-4 bg-white border-2 border-ink p-4 rounded-lg shadow-hard"> | |
| <label class="block text-sm font-bold mb-2">Upload Reference Images (3-10)</label> | |
| <div class="flex gap-2 overflow-x-auto pb-2"> | |
| <div class="w-20 h-20 border-2 border-dashed border-ink flex items-center justify-center cursor-pointer hover:bg-gray-50">+</div> | |
| <!-- Placeholders for uploads --> | |
| <div class="w-20 h-20 bg-gray-100 border-2 border-ink"></div> | |
| <div class="w-20 h-20 bg-gray-100 border-2 border-ink"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Step 4: AI Settings --> | |
| <section id="step-settings" class="step-section"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <span class="bg-ink text-white w-6 h-6 rounded-full flex items-center justify-center text-sm font-bold">4</span> | |
| <h2 class="text-2xl font-serif font-bold">Generation Settings</h2> | |
| </div> | |
| <div class="bg-white border-2 border-ink p-6 rounded-lg shadow-hard space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-bold text-lg">NSFW / Mature Content</h3> | |
| <p class="text-sm text-gray-500">Allow the AI to generate violence, strong language, and adult themes.</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" id="nsfwToggle" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-500 border border-ink"></div> | |
| </label> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4 border-t border-gray-200"> | |
| <div> | |
| <label class="block text-sm font-bold mb-1">Page Count</label> | |
| <select class="w-full p-2 border-2 border-ink rounded bg-cream"> | |
| <option>Short Story (8 Pages)</option> | |
| <option>Standard Issue (24 Pages)</option> | |
| <option>Graphic Novel (50+ Pages)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-bold mb-1">Output Format</label> | |
| <select class="w-full p-2 border-2 border-ink rounded bg-cream"> | |
| <option>Digital Images</option> | |
| <option>Print Ready (PDF)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Navigation Bar --> | |
| <nav class="fixed bottom-0 left-0 w-full bg-white border-t-2 border-ink pb-safe pt-2 z-40"> | |
| <div class="max-w-4xl mx-auto px-4 flex justify-between items-center"> | |
| <button class="p-2 text-gray-400 hover:text-ink"> | |
| <i data-feather="book"></i> | |
| </button> | |
| <!-- Center Create Button --> | |
| <button onclick="startGeneration()" class="relative -top-5 bg-ink text-white px-8 py-4 rounded-full shadow-hard-lg hover:bg-gray-800 transition-all flex items-center gap-2 font-bold border-2 border-white"> | |
| <i data-feather="zap"></i> CREATE COMIC | |
| </button> | |
| <button class="p-2 text-gray-400 hover:text-ink"> | |
| <i data-feather="user"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Planning Modal Overlay --> | |
| <div id="planningOverlay" class="fixed inset-0 bg-cream z-50 hidden flex flex-col"> | |
| <div class="flex-grow flex flex-col items-center justify-center p-8 text-center space-y-6"> | |
| <div class="w-16 h-16 border-4 border-ink border-t-transparent border-animate rounded-full"></div> | |
| <h2 class="text-3xl font-serif font-bold">Analyzing Story...</h2> | |
| <p class="text-gray-500 max-w-md">Our AI is breaking down your narrative structure, identifying key beats, and planning panel layouts.</p> | |
| <div class="w-full max-w-md bg-white border-2 border-ink p-4 rounded-lg text-left space-y-3 shadow-hard"> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="check-circle" class="text-green-600"></i> | |
| <span class="text-sm font-bold">Parsed 12 dialogue exchanges</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="check-circle" class="text-green-600"></i> | |
| <span class="text-sm font-bold">Identified 4 major action sequences</span> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <i data-feather="loader" class="text-blue-600 animate-spin"></i> | |
| <span class="text-sm font-bold">Designing character consistency map...</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Result Viewer (Hidden by default) --> | |
| <div id="resultViewer" class="fixed inset-0 bg-white z-50 hidden flex flex-col"> | |
| <div class="bg-cream border-b-2 border-ink p-4 flex justify-between items-center sticky top-0 z-50"> | |
| <button onclick="closeResults()" class="flex items-center gap-2 font-bold hover:text-gray-600"> | |
| <i data-feather="arrow-left"></i> Back to Editor | |
| </button> | |
| <div class="flex gap-2"> | |
| <button class="p-2 border-2 border-ink rounded hover:bg-gray-100"><i data-feather="download"></i></button> | |
| </div> | |
| </div> | |
| <div class="flex-grow overflow-y-auto p-4 sm:p-8 bg-gray-100"> | |
| <div class="max-w-3xl mx-auto space-y-12"> | |
| <!-- Cover Page --> | |
| <div class="bg-white border-2 border-ink p-2 shadow-hard-lg relative"> | |
| <div class="aspect-[2/3] bg-pastel-blue-200 relative overflow-hidden flex flex-col items-center justify-center text-center p-8 border border-black/10"> | |
| <h1 class="text-5xl font-serif font-bold mb-4 text-ink drop-shadow-md">THE NEON CITY</h1> | |
| <p class="text-xl font-comic text-gray-700">A Tale of Chrome & Blood</p> | |
| <div class="absolute bottom-4 right-4 font-bold text-xs uppercase tracking-widest">Mature / 18+</div> | |
| </div> | |
| </div> | |
| <!-- Content Page 1 --> | |
| <div class="bg-white border-2 border-ink p-2 shadow-hard-lg"> | |
| <div class="grid grid-cols-3 gap-1 bg-ink p-1 h-full"> | |
| <!-- Panel 1 --> | |
| <div class="col-span-2 row-span-2 bg-gray-800 relative group cursor-pointer overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-gray-800 to-black"></div> | |
| <div class="absolute bottom-4 left-4 text-white font-serif italic text-sm opacity-0 group-hover:opacity-100 transition-opacity">Establishing Shot: The Slums</div> | |
| <!-- Placeholder for generated image --> | |
| <div class="flex items-center justify-center h-full text-gray-600">Panel Img: Wide City Shot</div> | |
| </div> | |
| <!-- Panel 2 --> | |
| <div class="bg-gray-200 relative"> | |
| <div class="flex items-center justify-center h-full text-gray-500 text-xs">Panel Img: Hero Intro</div> | |
| </div> | |
| <!-- Panel 3 --> | |
| <div class="col-span-2 bg-gray-300 relative"> | |
| <div class="flex items-center justify-center h-full text-gray-500 text-xs">Panel Img: Dialogue</div> | |
| </div> | |
| <!-- Panel 4 --> | |
| <div class="bg-red-100 relative"> | |
| <div class="flex items-center justify-center h-full text-gray-500 text-xs">Panel Img: Gun Click</div> | |
| </div> | |
| </div> | |
| <!-- Page Text --> | |
| <div class="flex justify-between items-end mt-2 px-2 font-comic text-xs font-bold text-gray-500"> | |
| <span>1</span> | |
| <span>THE NEON CITY #1</span> | |
| </div> | |
| </div> | |
| <!-- Content Page 2 --> | |
| <div class="bg-white border-2 border-ink p-2 shadow-hard-lg"> | |
| <div class="grid grid-cols-2 gap-1 bg-ink p-1"> | |
| <!-- Full Bleed Action --> | |
| <div class="col-span-2 aspect-video bg-gray-900 relative overflow-hidden border-2 border-white"> | |
| <div class="flex items-center justify-center h-full text-white font-bold text-2xl tracking-widest uppercase">ACTION SEQUENCE</div> | |
| </div> | |
| <!-- Small panels --> | |
| <div class="aspect-square bg-gray-400"></div> | |
| <div class="aspect-square bg-gray-400"></div> | |
| <div class="col-span-2 grid grid-cols-3 gap-1"> | |
| <div class="aspect-[3/4] bg-gray-500"></div> | |
| <div class="col-span-2 aspect-[3/4] bg-gray-300 relative"> | |
| <!-- Dialogue Bubble Simulation --> | |
| <div class="absolute top-10 left-10 bg-white border-2 border-black rounded-tr-none rounded-lg p-2 max-w-[80%] font-comic text-xs"> | |
| "You thought you could hide in the shadows?" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-end mt-2 px-2 font-comic text-xs font-bold text-gray-500"> | |
| <span>2</span> | |
| <span>THE NEON CITY #1</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |