# Comic Book Creator Tool Prompt

IMPORTANT: the app should use tools/ai that allow nsfw input and output (is uncensored)
## Core Function
Create a complete comic book from a story outline provided by the user. Transform narrative descriptions into visual panels with appropriate layouts, character designs, dialogue, and artistic styling that brings the story to life in sequential art form.

## Input Processing

**Story Outline Analysis:**
- Accept story outlines in any format (paragraph form, bullet points, scene breakdowns, script format)
- Parse narrative elements: plot points, character introductions, dialogue, action sequences, emotional beats, setting descriptions, and pacing cues
- Identify key moments that require emphasis (splash pages, dramatic reveals, action sequences)
- Detect scene transitions, time jumps, and location changes
- Extract character descriptions, relationships, and emotional arcs
- Recognize tone and genre indicators (horror, comedy, action, drama, romance, sci-fi, fantasy, etc.)

**Character Input (Optional):**
- Accept character reference images uploaded by user
- Accept written character descriptions (physical traits, personality, costume/clothing details)
- Combine uploaded images with text descriptions when both provided
- Use these inputs as the definitive character design reference for the comic
- Ensure uploaded character designs integrate seamlessly with chosen art style while maintaining recognizable features

**Automatically Determine:**
- Optimal number of panels per page based on pacing needs
- Panel layout configurations (traditional grid, dynamic angles, borderless panels, overlapping frames)
- Which moments deserve full-page spreads or splash pages
- Appropriate visual metaphors and symbolic imagery
- Camera angles and perspectives for maximum impact
- Page breaks and cliffhangers for serialized storytelling

## Art Style Library

**Pre-loaded Styles Include:**

1. **Classic Superhero** - Bold lines, dynamic poses, vibrant colors, muscular anatomy, dramatic shadows, Ben-Day dots option
2. **Manga/Anime** - Large expressive eyes, speed lines, screen tones, chibi variations, varied paneling including vertical layouts
3. **European BD (Bande Dessinée)** - Ligne claire (clear line), realistic proportions, detailed backgrounds, watercolor-style coloring
4. **American Indie/Alternative** - Loose sketchy lines, experimental layouts, muted or limited color palettes, emotional realism
5. **Noir/Crime** - High contrast black and white, heavy shadows, rain effects, gritty urban settings, dramatic lighting
6. **Cartoon/All-Ages** - Simplified shapes, bright colors, exaggerated expressions, clean lines, accessible character designs
7. **Watercolor/Painted** - Soft edges, blended colors, organic textures, impressionistic backgrounds
8. **Retro/Golden Age** - Limited color palette, halftone effects, vintage lettering, classic panel borders, nostalgic feel
9. **Gothic/Horror** - Detailed cross-hatching, macabre imagery, desaturated colors with red accents, unsettling compositions
10. **Minimalist/Abstract** - Simple geometric shapes, limited color schemes, emphasis on negative space, symbolic representation

## Custom Art Style Creation

**Upload-Based Style Learning:**
- Accept 3-10 reference images of desired art style
- Analyze and extract style characteristics:
- Line weight, texture, and quality (smooth, sketchy, precise, organic)
- Color palette and saturation levels
- Shading techniques (cell shading, gradient, cross-hatching, stippling)
- Character proportions and anatomy style
- Background detail level and rendering approach
- Panel border styles and gutters
- Lettering and sound effect integration
- Facial expression conventions
- Movement and action line techniques

**Style Customization Options:**
- Blend multiple styles (e.g., "manga characters with European backgrounds")
- Adjust intensity of style characteristics
- Maintain style consistency across all panels
- Apply different styles to flashbacks, dream sequences, or different storylines
- Save custom styles for future projects

## Character Consistency

**Character Management:**
- Extract all character descriptions from outline and user-provided inputs
- Generate consistent character designs maintained throughout entire comic
- When user provides character images, adapt those designs to chosen art style while preserving identifying features
- Track character appearances, expressions, and costume changes
- Ensure recognizable character features across different angles, distances, and lighting
- Apply aging, injuries, or transformation effects when story requires
- Maintain distinct body language and personality traits for each character

**Expression Library:**
- Generate full range of emotions for each character
- Match expressions to dialogue and story context
- Adapt expressions to chosen art style conventions
- Include subtle microexpressions for dramatic moments

## Panel and Page Layout

**Dynamic Panel Composition:**
- Vary panel sizes to control pacing (small panels = quick action, large panels = important moments)
- Use panel shapes to convey emotion (jagged for chaos, rounded for calm, borderless for timelessness)
- Implement Z-path and other reading flows appropriate to style and culture
- Create visual rhythm through repetition and variation
- Position characters to guide eye movement between panels
- Use negative space strategically

**Specialized Layouts:**
- Splash pages for major reveals or dramatic moments
- Double-page spreads for epic scenes
- Inset panels for simultaneous action or detail shots
- Overlapping panels for time compression or emphasis
- Silent panels for emotional beats or atmospheric moments
- Montage sequences for time passage

## Visual Storytelling Elements

**Camera Work:**
- Establish shots for new locations
- Close-ups for emotional intensity
- Dutch angles for tension or disorientation
- Over-the-shoulder shots for dialogue
- Bird's eye and worm's eye views for dramatic effect
- Dynamic action angles with foreshortening

**Visual Continuity:**
- Maintain 180-degree rule for spatial relationships
- Show passage of time through environmental changes
- Use visual motifs and recurring imagery
- Implement color coding for different story threads
- Create visual parallels between related scenes

**Environmental Storytelling:**
- Design detailed backgrounds that support narrative
- Include environmental storytelling elements (posters, weather, architecture)
- Adjust background detail based on panel importance
- Use settings to establish mood and tone

## Text Integration

**Dialogue and Captions:**
- Convert story dialogue into properly positioned speech bubbles
- Vary balloon shapes for different speakers (round, spiky, wavy, thought clouds)
- Position balloons to maintain reading order
- Add narrative captions where needed for internal monologue or scene setting
- Include sound effects (onomatopoeia) in style-appropriate lettering
- Adjust text size and font weight for volume and emphasis

**Lettering Style:**
- Match lettering to overall art style
- Use distinctive fonts for different characters or special effects
- Integrate text organically with artwork
- Ensure readability across all art styles

## Structural Planning Phase

**After receiving story and art style, present:**
- Proposed total page count based on story complexity
- Page-by-page breakdown showing:
- Key story beats per page
- Suggested panel counts
- Identified splash page opportunities
- Cliffhanger points for issue breaks (if applicable)
- Pacing rhythm (slow, medium, fast sections)
- Character appearance frequency
- Scene location breakdown
- Estimated dialogue density per page
- Special visual sequences (action, montage, silent panels)

**User Approval Checkpoint:**
- Allow user to approve structural plan or request modifications
- Adjust page count, pacing, or layout emphasis based on feedback
- Proceed to generation only after structural approval

## Output Options

**Format Choices:**
- Single-issue comic (20-32 pages typical)
- Graphic novel (100+ pages)
- Webcomic strip (vertical scroll option)
- Print-ready files with bleed and crop marks
- Digital-optimized version
- Panel-by-panel breakdown for social media sharing

**Customization:**
- Add credits page (title, creators, publication info)
- Include variant cover options
- Generate promotional artwork
- Create character design sheets
- Provide style guide for series consistency

**Iterative Refinement:**
- Review and adjust individual panels
- Modify art style intensity or characteristics
- Revise panel layouts for better pacing
- Adjust dialogue placement
- Fine-tune color palette
- Add or remove panels for pacing

## Quality Standards

**Ensure:**
- Consistent character appearances throughout
- Clear visual hierarchy in each panel
- Readable dialogue with proper balloon placement
- Appropriate emotional tone matches story content
- Smooth visual flow between panels and pages
- Professional-quality finishing
- Style consistency unless deliberate variation is needed

## User Interaction Flow

1. **User provides story outline + optional character images and/or descriptions**
2. **User selects art style (preset or uploads references)**
3. **Tool analyzes outline and presents structural plan** (page count, key moments, suggested layouts)
4. **Tool generates complete comic**
5. **User reviews and can request specific panel or page adjustments**
6. **Tool refines based on feedback**
7. **Final output delivered in chosen format**

**The goal is to transform any story outline into a visually compelling, professionally composed comic book that honors the narrative while leveraging the unique strengths of sequential art storytelling.** Visual Theme (Light Mode):
Changed global styles to use a cream background (#FFFDF7) and dark ink text (#1a1a1a).
Implemented the specific color palette: pastel-pink, pastel-blue, pastel-yellow, and pastel-green.
Added Playfair Display for serif headings to match the classic aesthetic, alongside Inter for UI text and Comic Neue for bubbles.
Design Language:
Borders & Cards: Applied distinct black borders (border-black) to all cards, inp

README.md

@@ -1,10 +1,13 @@
 ---
-title: Comicbookforge
-emoji: 🐨
-colorFrom: yellow
-colorTo: purple
+title: ComicBookForge
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html

@@ -1,19 +1,321 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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>