Hugging Face's logo

Spaces:
volander
/
comicbookforge
Running

App Files Community
comicbookforge
File size: 18,812 Bytes
4e417bb
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!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>