Hugging Face's logo

Spaces:
dwilcox24
/
funny-stuff
Running

App Files Community
dwilcox24 commited on
Commit
987543f
·
verified ·
1 Parent(s): c54ba4c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +653 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Funny Stuff
3
- emoji: 🌖
4
- colorFrom: blue
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: funny-stuff
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,653 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Blind Justice - Retro Cartoon Hero</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #FF5252;
14
+ --secondary: #42A5F5;
15
+ --accent: #FFD600;
16
+ --dark: #212121;
17
+ --light: #FAFAFA;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Comic Neue', cursive;
22
+ background-color: var(--light);
23
+ color: var(--dark);
24
+ }
25
+
26
+ .comic-font {
27
+ font-family: 'Bangers', cursive;
28
+ letter-spacing: 1px;
29
+ }
30
+
31
+ .speech-bubble {
32
+ position: relative;
33
+ background: white;
34
+ border-radius: 1em;
35
+ border: 3px solid var(--dark);
36
+ padding: 1rem;
37
+ }
38
+
39
+ .speech-bubble:after {
40
+ content: '';
41
+ position: absolute;
42
+ bottom: -15px;
43
+ left: 20px;
44
+ border-width: 15px 15px 0;
45
+ border-style: solid;
46
+ border-color: white transparent;
47
+ display: block;
48
+ width: 0;
49
+ }
50
+
51
+ .speech-bubble:before {
52
+ content: '';
53
+ position: absolute;
54
+ bottom: -19px;
55
+ left: 18px;
56
+ border-width: 17px 17px 0;
57
+ border-style: solid;
58
+ border-color: var(--dark) transparent;
59
+ display: block;
60
+ width: 0;
61
+ }
62
+
63
+ .comic-button {
64
+ transform: skew(-10deg);
65
+ transition: all 0.3s ease;
66
+ box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
67
+ }
68
+
69
+ .comic-button:hover {
70
+ transform: skew(-10deg) translateY(-3px);
71
+ box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
72
+ }
73
+
74
+ .comic-panel {
75
+ border: 4px solid var(--dark);
76
+ box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
77
+ position: relative;
78
+ overflow: hidden;
79
+ }
80
+
81
+ .comic-panel:before {
82
+ content: "";
83
+ position: absolute;
84
+ top: 0;
85
+ left: 0;
86
+ right: 0;
87
+ bottom: 0;
88
+ background:
89
+ radial-gradient(circle, transparent 20%, var(--light) 20%, var(--light) 80%, transparent 80%, transparent),
90
+ radial-gradient(circle, transparent 20%, var(--light) 20%, var(--light) 80%, transparent 80%, transparent) 10px 10px;
91
+ background-size: 20px 20px;
92
+ opacity: 0.1;
93
+ }
94
+
95
+ .page {
96
+ display: none;
97
+ }
98
+
99
+ .page.active {
100
+ display: block;
101
+ animation: fadeIn 0.5s ease-in-out;
102
+ }
103
+
104
+ @keyframes fadeIn {
105
+ from { opacity: 0; }
106
+ to { opacity: 1; }
107
+ }
108
+
109
+ .character-card {
110
+ transition: all 0.3s ease;
111
+ }
112
+
113
+ .character-card:hover {
114
+ transform: translateY(-5px) rotate(2deg);
115
+ box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
116
+ }
117
+
118
+ .nav-item {
119
+ position: relative;
120
+ }
121
+
122
+ .nav-item:after {
123
+ content: '';
124
+ position: absolute;
125
+ width: 0;
126
+ height: 3px;
127
+ bottom: -5px;
128
+ left: 0;
129
+ background-color: var(--accent);
130
+ transition: width 0.3s ease;
131
+ }
132
+
133
+ .nav-item:hover:after {
134
+ width: 100%;
135
+ }
136
+ </style>
137
+ </head>
138
+ <body class="bg-yellow-50">
139
+ <!-- Navigation -->
140
+ <nav class="bg-red-600 py-4 px-6 shadow-lg">
141
+ <div class="container mx-auto flex justify-between items-center">
142
+ <div class="flex items-center space-x-2">
143
+ <i class="fas fa-blind text-white text-3xl"></i>
144
+ <h1 class="comic-font text-3xl text-white">BLIND JUSTICE</h1>
145
+ </div>
146
+ <div class="hidden md:flex space-x-8">
147
+ <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition" onclick="showPage('home')">HOME</a>
148
+ <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition" onclick="showPage('characters')">CHARACTERS</a>
149
+ <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition">MERCH</a>
150
+ <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition">EPISODES</a>
151
+ <a href="#" class="nav-item text-white font-bold hover:text-yellow-300 transition">BLOG</a>
152
+ </div>
153
+ <button class="md:hidden text-white text-2xl" id="mobile-menu-button">
154
+ <i class="fas fa-bars"></i>
155
+ </button>
156
+ </div>
157
+ <!-- Mobile Menu -->
158
+ <div class="md:hidden hidden bg-red-700 py-2 px-4" id="mobile-menu">
159
+ <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition" onclick="showPage('home')">HOME</a>
160
+ <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition" onclick="showPage('characters')">CHARACTERS</a>
161
+ <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition">MERCH</a>
162
+ <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition">EPISODES</a>
163
+ <a href="#" class="block text-white py-2 font-bold hover:text-yellow-300 transition">BLOG</a>
164
+ </div>
165
+ </nav>
166
+
167
+ <!-- Home Page -->
168
+ <div id="home" class="page active">
169
+ <!-- Hero Section -->
170
+ <section class="comic-panel bg-gradient-to-r from-blue-500 to-purple-600 py-16 px-4 md:px-0">
171
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
172
+ <div class="md:w-1/2 mb-8 md:mb-0">
173
+ <img src="https://placehold.co/600x400/FF5252/FFFFFF?text=Blind+Justice+%26+Fluffy" alt="Blind Justice and Fluffy" class="w-full rounded-lg comic-panel">
174
+ </div>
175
+ <div class="md:w-1/2 md:pl-12 text-center md:text-left">
176
+ <h2 class="comic-font text-5xl md:text-6xl text-white mb-4">JUSTICE NEVER BLINKS.</h2>
177
+ <h3 class="comic-font text-3xl md:text-4xl text-yellow-300 mb-6">BUT IT TRIPS A LOT.</h3>
178
+ <p class="text-white text-lg mb-8">The most visually impaired hero and his sarcastic guide dog fight crime (and common sense) in this action-comedy series!</p>
179
+ <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 justify-center md:justify-start">
180
+ <button class="comic-button bg-yellow-400 text-black font-bold py-3 px-6 rounded-lg comic-font text-xl">
181
+ <i class="fas fa-play mr-2"></i> WATCH EPISODES
182
+ </button>
183
+ <button class="comic-button bg-white text-red-600 font-bold py-3 px-6 rounded-lg comic-font text-xl">
184
+ <i class="fas fa-shopping-bag mr-2"></i> BROWSE MERCH
185
+ </button>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </section>
190
+
191
+ <!-- Teaser Video -->
192
+ <section class="py-12 px-4">
193
+ <div class="container mx-auto">
194
+ <h2 class="comic-font text-4xl text-center mb-8 text-red-600">LATEST EPISODE TEASER</h2>
195
+ <div class="comic-panel bg-white p-2 max-w-4xl mx-auto">
196
+ <div class="aspect-w-16 aspect-h-9 bg-gray-200 relative">
197
+ <img src="https://placehold.co/800x450/212121/FFFFFF?text=Episode+Teaser+Video" alt="Episode Teaser" class="w-full h-full object-cover">
198
+ <div class="absolute inset-0 flex items-center justify-center">
199
+ <button class="bg-red-600 text-white rounded-full p-4 hover:bg-red-700 transition">
200
+ <i class="fas fa-play text-3xl"></i>
201
+ </button>
202
+ </div>
203
+ </div>
204
+ <div class="p-4">
205
+ <h3 class="comic-font text-2xl text-red-600 mb-2">"The Case of the Missing Donut"</h3>
206
+ <p class="text-gray-800">Fluffy's favorite snack has disappeared! Blind Justice must use his other heightened senses to track down the culprit... if he can stop bumping into walls long enough.</p>
207
+ <div class="flex items-center mt-4">
208
+ <div class="flex">
209
+ <i class="fas fa-paw text-yellow-500"></i>
210
+ <i class="fas fa-paw text-yellow-500"></i>
211
+ <i class="fas fa-paw text-yellow-500"></i>
212
+ <i class="fas fa-paw text-gray-300"></i>
213
+ </div>
214
+ <span class="ml-2 text-sm text-gray-600">Fluffy's Rating: 3/4 Paws (Moderate Chaos)</span>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Featured Characters -->
222
+ <section class="py-12 px-4 bg-blue-100">
223
+ <div class="container mx-auto">
224
+ <h2 class="comic-font text-4xl text-center mb-8 text-blue-600">MEET THE TEAM</h2>
225
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
226
+ <!-- Blind Justice -->
227
+ <div class="comic-panel bg-white p-6 text-center character-card">
228
+ <img src="https://placehold.co/200x200/FF5252/FFFFFF?text=Blind+Justice" alt="Blind Justice" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-red-500">
229
+ <h3 class="comic-font text-2xl text-red-600 mb-2">BLIND JUSTICE</h3>
230
+ <p class="text-gray-700 mb-4">"I don't need eyes to see crime... I just need someone to point me in the right direction."</p>
231
+ <button class="comic-button bg-red-500 text-white py-2 px-4 rounded-md text-sm" onclick="showPage('characters')">
232
+ VIEW PROFILE
233
+ </button>
234
+ </div>
235
+
236
+ <!-- Fluffy -->
237
+ <div class="comic-panel bg-white p-6 text-center character-card">
238
+ <img src="https://placehold.co/200x200/FFD600/FFFFFF?text=Fluffy" alt="Fluffy" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-yellow-500">
239
+ <h3 class="comic-font text-2xl text-yellow-600 mb-2">FLUFFY</h3>
240
+ <p class="text-gray-700 mb-4">"I'm not just a guide dog, I'm a life coach for the visually impaired and sarcastically gifted."</p>
241
+ <button class="comic-button bg-yellow-500 text-black py-2 px-4 rounded-md text-sm" onclick="showPage('characters')">
242
+ VIEW PROFILE
243
+ </button>
244
+ </div>
245
+
246
+ <!-- Dr. Fruitloop -->
247
+ <div class="comic-panel bg-white p-6 text-center character-card">
248
+ <img src="https://placehold.co/200x200/42A5F5/FFFFFF?text=Dr.+Fruitloop" alt="Dr. Fruitloop" class="w-32 h-32 rounded-full mx-auto mb-4 border-4 border-blue-500">
249
+ <h3 class="comic-font text-2xl text-blue-600 mb-2">DR. FRUITLOOP</h3>
250
+ <p class="text-gray-700 mb-4">"My evil plans are 100% organic, gluten-free, and packed with vitamin C for your destruction!"</p>
251
+ <button class="comic-button bg-blue-500 text-white py-2 px-4 rounded-md text-sm" onclick="showPage('characters')">
252
+ VIEW PROFILEå
253
+ </button>
254
+ </div>
255
+ </div>
256
+ <div class="text-center mt-8">
257
+ <button class="comic-button bg-blue-600 text-white font-bold py-3 px-8 rounded-lg comic-font text-xl" onclick="showPage('characters')">
258
+ MEET THE FULL CAST
259
+ </button>
260
+ </div>
261
+ </div>
262
+ </section>
263
+
264
+ <!-- Merch Preview -->
265
+ <section class="py-12 px-4">
266
+ <div class="container mx-auto">
267
+ <h2 class="comic-font text-4xl text-center mb-8 text-purple-600">FAN FAVORITE MERCH</h2>
268
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
269
+ <!-- Product 1 -->
270
+ <div class="comic-panel bg-white p-4 text-center">
271
+ <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center">
272
+ <img src="https://placehold.co/150x150/FFFFFF/212121?text=Justice+Never+Blinks+T-Shirt" alt="Justice Never Blinks T-Shirt" class="max-h-full">
273
+ </div>
274
+ <h3 class="comic-font text-xl text-purple-600 mb-2">Justice Never Blinks Tee</h3>
275
+ <p class="text-gray-700 mb-3">$24.99</p>
276
+ <button class="comic-button bg-purple-500 text-white py-2 px-4 rounded-md text-sm w-full">
277
+ ADD TO CART
278
+ </button>
279
+ </div>
280
+
281
+ <!-- Product 2 -->
282
+ <div class="comic-panel bg-white p-4 text-center">
283
+ <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center">
284
+ <img src="https://placehold.co/150x150/FFFFFF/212121?text=Fluffy's+Snark+Mug" alt="Fluffy's Snark Mug" class="max-h-full">
285
+ </div>
286
+ <h3 class="comic-font text-xl text-red-600 mb-2">Fluffy's Snark Mug</h3>
287
+ <p class="text-gray-700 mb-3">$18.99</p>
288
+ <button class="comic-button bg-red-500 text-white py-2 px-4 rounded-md text-sm w-full">
289
+ ADD TO CART
290
+ </button>
291
+ </div>
292
+
293
+ <!-- Product 3 -->
294
+ <div class="comic-panel bg-white p-4 text-center">
295
+ <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center">
296
+ <img src="https://placehold.co/150x150/FFFFFF/212121?text=Villain+Socks" alt="Villain Socks" class="max-h-full">
297
+ </div>
298
+ <h3 class="comic-font text-xl text-blue-600 mb-2">Villain Crew Socks</h3>
299
+ <p class="text-gray-700 mb-3">$14.99</p>
300
+ <button class="comic-button bg-blue-500 text-white py-2 px-4 rounded-md text-sm w-full">
301
+ ADD TO CART
302
+ </button>
303
+ </div>
304
+
305
+ <!-- Product 4 -->
306
+ <div class="comic-panel bg-white p-4 text-center">
307
+ <div class="bg-gray-100 h-48 mb-4 flex items-center justify-center">
308
+ <img src="https://placehold.co/150x150/FFFFFF/212121?text=Blindfold+Gag" alt="Blindfold Gag" class="max-h-full">
309
+ </div>
310
+ <h3 class="comic-font text-xl text-yellow-600 mb-2">"Justice Vision" Blindfold</h3>
311
+ <p class="text-gray-700 mb-3">$9.99</p>
312
+ <button class="comic-button bg-yellow-500 text-black py-2 px-4 rounded-md text-sm w-full">
313
+ ADD TO CART
314
+ </button>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </section>
319
+
320
+ <!-- Newsletter -->
321
+ <section class="py-12 px-4 bg-red-100">
322
+ <div class="container mx-auto max-w-3xl text-center comic-panel bg-white p-8">
323
+ <h2 class="comic-font text-4xl text-red-600 mb-4">JOIN THE MISSION</h2>
324
+ <p class="text-xl mb-6">Want to see justice stumble into your inbox? Sign up for exclusive content, wallpapers, and Fluffy's sarcastic commentary!</p>
325
+ <div class="flex flex-col md:flex-row gap-4">
326
+ <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-red-500">
327
+ <button class="comic-button bg-red-600 text-white font-bold py-3 px-6 rounded-lg comic-font text-xl">
328
+ SIGN UP NOW
329
+ </button>
330
+ </div>
331
+ <p class="text-sm text-gray-500 mt-4">"We promise not to spam you... much." - Fluffy</p>
332
+ </div>
333
+ </section>
334
+ </div>
335
+
336
+ <!-- Characters Page -->
337
+ <div id="characters" class="page">
338
+ <section class="py-12 px-4 bg-blue-600">
339
+ <div class="container mx-auto">
340
+ <h1 class="comic-font text-5xl text-white text-center mb-4">MEET THE CAST</h1>
341
+ <p class="text-white text-center max-w-2xl mx-auto">From the heroic to the hilariously villainous, get to know the colorful characters of Blind Justice!</p>
342
+ </div>
343
+ </section>
344
+
345
+ <section class="py-12 px-4">
346
+ <div class="container mx-auto">
347
+ <!-- Hero Team -->
348
+ <h2 class="comic-font text-3xl text-red-600 mb-6 border-b-2 border-red-600 pb-2">THE HERO TEAM</h2>
349
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
350
+ <!-- Blind Justice -->
351
+ <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card">
352
+ <div class="md:w-1/3 mb-4 md:mb-0">
353
+ <img src="https://placehold.co/300x400/FF5252/FFFFFF?text=Blind+Justice" alt="Blind Justice" class="w-full h-auto rounded-lg">
354
+ <div class="mt-4 flex justify-center space-x-4">
355
+ <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition">
356
+ <i class="fas fa-volume-up"></i>
357
+ </button>
358
+ <button class="bg-blue-500 text-white rounded-full p-3 hover:bg-blue-600 transition">
359
+ <i class="fas fa-shopping-cart"></i>
360
+ </button>
361
+ <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition">
362
+ <i class="fas fa-share-alt"></i>
363
+ </button>
364
+ </div>
365
+ </div>
366
+ <div class="md:w-2/3 md:pl-6">
367
+ <h3 class="comic-font text-3xl text-red-600 mb-2">DORIAN DORKE / BLIND JUSTICE</h3>
368
+ <div class="speech-bubble bg-yellow-100 mb-4">
369
+ <p class="text-gray-800 italic">"I don't need eyes to see crime... I just need someone to point me in the right direction. And maybe tie my shoes."</p>
370
+ </div>
371
+ <div class="mb-4">
372
+ <h4 class="font-bold text-lg text-gray-800">POWERS & ABILITIES:</h4>
373
+ <ul class="list-disc pl-5 text-gray-700">
374
+ <li>Heightened senses (except vision, obviously)</li>
375
+ <li>Unwavering sense of justice</li>
376
+ <li>Ability to trip over absolutely nothing</li>
377
+ <li>Master of the "blindly confident" pose</li>
378
+ </ul>
379
+ </div>
380
+ <div>
381
+ <h4 class="font-bold text-lg text-gray-800">BIO:</h4>
382
+ <p class="text-gray-700">Formerly a mild-mannered accountant, Dorian Dorke gained his "powers" after a bizarre accident involving a vat of expired energy drinks and a rogue Roomba. Now as Blind Justice, he fights crime with the help of his sarcastic guide dog Fluffy, often solving cases entirely by accident.</p>
383
+ </div>
384
+ </div>
385
+ </div>
386
+
387
+ <!-- Fluffy -->
388
+ <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card">
389
+ <div class="md:w-1/3 mb-4 md:mb-0">
390
+ <img src="https://placehold.co/300x400/FFD600/FFFFFF?text=Fluffy" alt="Fluffy" class="w-full h-auto rounded-lg">
391
+ <div class="mt-4 flex justify-center space-x-4">
392
+ <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition">
393
+ <i class="fas fa-volume-up"></i>
394
+ </button>
395
+ <button class="bg-blue-500 text-white rounded-full p-3 hover:bg-blue-600 transition">
396
+ <i class="fas fa-shopping-cart"></i>
397
+ </button>
398
+ <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition">
399
+ <i class="fas fa-share-alt"></i>
400
+ </button>
401
+ </div>
402
+ </div>
403
+ <div class="md:w-2/3 md:pl-6">
404
+ <h3 class="comic-font text-3xl text-yellow-600 mb-2">FLUFFY THE GUIDE DOG</h3>
405
+ <div class="speech-bubble bg-red-100 mb-4">
406
+ <p class="text-gray-800 italic">"I'm not just a guide dog, I'm a life coach for the visually impaired and sarcastically gifted. Also, I do all the actual detective work."</p>
407
+ </div>
408
+ <div class="mb-4">
409
+ <h4 class="font-bold text-lg text-gray-800">SPECIAL SKILLS:</h4>
410
+ <ul class="list-disc pl-5 text-gray-700">
411
+ <li>Expert-level sarcasm</li>
412
+ <li>Actual crime-solving abilities</li>
413
+ <li>Keeping Blind Justice from walking into traffic</li>
414
+ <li>Snack detection (especially donuts)</li>
415
+ </ul>
416
+ </div>
417
+ <div>
418
+ <h4 class="font-bold text-lg text-gray-800">BIO:</h4>
419
+ <p class="text-gray-700">Fluffy was the top of his class at Guide Dog University before being paired with Dorian Dorke. What was supposed to be a simple service dog assignment turned into a full-time job of crime-fighting and keeping his human from embarrassing himself. Fluffy provides the brains of the operation, though he'd never admit it to Blind Justice's face.</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Supporting Cast -->
426
+ <h2 class="comic-font text-3xl text-blue-600 mb-6 border-b-2 border-blue-600 pb-2">SUPPORTING CAST</h2>
427
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
428
+ <!-- Detective Lena Hardcase -->
429
+ <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card">
430
+ <div class="md:w-1/3 mb-4 md:mb-0">
431
+ <img src="https://placehold.co/300x400/42A5F5/FFFFFF?text=Detective+Hardcase" alt="Detective Lena Hardcase" class="w-full h-auto rounded-lg">
432
+ <div class="mt-4 flex justify-center space-x-4">
433
+ <button class="bg-blue-500 text-white rounded-full p-3 hover:bg-blue-600 transition">
434
+ <i class="fas fa-volume-up"></i>
435
+ </button>
436
+ <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition">
437
+ <i class="fas fa-shopping-cart"></i>
438
+ </button>
439
+ <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition">
440
+ <i class="fas fa-share-alt"></i>
441
+ </button>
442
+ </div>
443
+ </div>
444
+ <div class="md:w-2/3 md:pl-6">
445
+ <h3 class="comic-font text-3xl text-blue-600 mb-2">DETECTIVE LENA HARDCASE</h3>
446
+ <div class="speech-bubble bg-purple-100 mb-4">
447
+ <p class="text-gray-800 italic">"I don't care if you solved the case, Justice. You still can't park your 'Justice Mobile' in a handicap spot without a permit!"</p>
448
+ </div>
449
+ <div class="mb-4">
450
+ <h4 class="font-bold text-lg text-gray-800">ROLE:</h4>
451
+ <ul class="list-disc pl-5 text-gray-700">
452
+ <li>By-the-book police detective</li>
453
+ <li>Reluctant ally to Blind Justice</li>
454
+ <li>Only person Fluffy respects</li>
455
+ <li>Constantly filing paperwork for Blind Justice's collateral damage</li>
456
+ </ul>
457
+ </div>
458
+ <div>
459
+ <h4 class="font-bold text-lg text-gray-800">BIO:</h4>
460
+ <p class="text-gray-700">Detective Hardcase is the no-nonsense cop who keeps getting dragged into Blind Justice's cases. While she appreciates his crime-fighting results, she could do without the property damage and bizarre explanations. She has a soft spot for Fluffy, who is the only one who seems to understand police procedure.</p>
461
+ </div>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- Master Dorke -->
466
+ <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card">
467
+ <div class="md:w-1/3 mb-4 md:mb-0">
468
+ <img src="https://placehold.co/300x400/6A1B9A/FFFFFF?text=Master+Dorke" alt="Master Dorke" class="w-full h-auto rounded-lg">
469
+ <div class="mt-4 flex justify-center space-x-4">
470
+ <button class="bg-purple-500 text-white rounded-full p-3 hover:bg-purple-600 transition">
471
+ <i class="fas fa-volume-up"></i>
472
+ </button>
473
+ <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition">
474
+ <i class="fas fa-shopping-cart"></i>
475
+ </button>
476
+ <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition">
477
+ <i class="fas fa-share-alt"></i>
478
+ </button>
479
+ </div>
480
+ </div>
481
+ <div class="md:w-2/3 md:pl-6">
482
+ <h3 class="comic-font text-3xl text-purple-600 mb-2">MASTER DORKE</h3>
483
+ <div class="speech-bubble bg-green-100 mb-4">
484
+ <p class="text-gray-800 italic">"My son, to truly see, you must first close your eyes. Also, maybe get a white cane that doesn't double as a nunchuck."</p>
485
+ </div>
486
+ <div class="mb-4">
487
+ <h4 class="font-bold text-lg text-gray-800">ROLE:</h4>
488
+ <ul class="list-disc pl-5 text-gray-700">
489
+ <li>Blind Justice's eccentric father</li>
490
+ <li>Retired "sensei" of questionable martial arts</li>
491
+ <li>Source of terrible advice</li>
492
+ <li>Fluffy's favorite naptime companion</li>
493
+ </ul>
494
+ </div>
495
+ <div>
496
+ <h4 class="font-bold text-lg text-gray-800">BIO:</h4>
497
+ <p class="text-gray-700">Master Dorke claims to have trained in ancient martial arts on a mountaintop, though evidence suggests it might have been a timeshare in Florida. He dispenses wisdom that's 10% profound and 90% nonsense, but his heart is in the right place. He's the only one who thinks Blind Justice's crime-fighting methods make perfect sense.</p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <!-- Villains -->
504
+ <h2 class="comic-font text-3xl text-green-600 mb-6 border-b-2 border-green-600 pb-2">THE VILLAINS</h2>
505
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
506
+ <!-- Dr. Fruitloop -->
507
+ <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card">
508
+ <div class="md:w-1/3 mb-4 md:mb-0">
509
+ <img src="https://placehold.co/300x400/4CAF50/FFFFFF?text=Dr.+Fruitloop" alt="Dr. Fruitloop" class="w-full h-auto rounded-lg">
510
+ <div class="mt-4 flex justify-center space-x-4">
511
+ <button class="bg-green-500 text-white rounded-full p-3 hover:bg-green-600 transition">
512
+ <i class="fas fa-volume-up"></i>
513
+ </button>
514
+ <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition">
515
+ <i class="fas fa-shopping-cart"></i>
516
+ </button>
517
+ <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition">
518
+ <i class="fas fa-share-alt"></i>
519
+ </button>
520
+ </div>
521
+ </div>
522
+ <div class="md:w-2/3 md:pl-6">
523
+ <h3 class="comic-font text-3xl text-green-600 mb-2">DR. FRUITLOOP</h3>
524
+ <div class="speech-bubble bg-pink-100 mb-4">
525
+ <p class="text-gray-800 italic">"My evil plans are 100% organic, gluten-free, and packed with vitamin C for your destruction! Also, have you tried my new kale smoothie?"</p>
526
+ </div>
527
+ <div class="mb-4">
528
+ <h4 class="font-bold text-lg text-gray-800">CRIMINAL SPECIALTY:</h4>
529
+ <ul class="list-disc pl-5 text-gray-700">
530
+ <li>Health food-based crimes</li>
531
+ <li>Turning city water supplies into kombucha</li>
532
+ <li>Forcing people to recycle</li>
533
+ <li>Generally being too enthusiastic about nutrition</li>
534
+ </ul>
535
+ </div>
536
+ <div>
537
+ <h4 class="font-bold text-lg text-gray-800">BIO:</h4>
538
+ <p class="text-gray-700">Once a promising nutritionist, Dr. Fruitloop went rogue when the world refused to adopt his extreme diet plans. Now he forces his health-conscious villainy on the city, one superfood at a time. His battles with Blind Justice usually end with someone getting a face full of quinoa or being trapped in a juice cleanse.</p>
539
+ </div>
540
+ </div>
541
+ </div>
542
+
543
+ <!-- Mayor Pibbles -->
544
+ <div class="comic-panel bg-white p-6 flex flex-col md:flex-row character-card">
545
+ <div class="md:w-1/3 mb-4 md:mb-0">
546
+ <img src="https://placehold.co/300x400/9C27B0/FFFFFF?text=Mayor+Pibbles" alt="Mayor Pibbles" class="w-full h-auto rounded-lg">
547
+ <div class="mt-4 flex justify-center space-x-4">
548
+ <button class="bg-purple-500 text-white rounded-full p-3 hover:bg-purple-600 transition">
549
+ <i class="fas fa-volume-up"></i>
550
+ </button>
551
+ <button class="bg-red-500 text-white rounded-full p-3 hover:bg-red-600 transition">
552
+ <i class="fas fa-shopping-cart"></i>
553
+ </button>
554
+ <button class="bg-yellow-500 text-black rounded-full p-3 hover:bg-yellow-600 transition">
555
+ <i class="fas fa-share-alt"></i>
556
+ </button>
557
+ </div>
558
+ </div>
559
+ <div class="md:w-2/3 md:pl-6">
560
+ <h3 class="comic-font text-3xl text-purple-600 mb-2">MAYOR PIBBLES</h3>
561
+ <div class="speech-bubble bg-blue-100 mb-4">
562
+ <p class="text-gray-800 italic">"As your mayor, I promise to clean up this city! Starting with getting rid of that meddling Blind Justice and his mutt!"</p>
563
+ </div>
564
+ <div class="mb-4">
565
+ <h4 class="font-bold text-lg text-gray-800">CRIMINAL SPECIALTY:</h4>
566
+ <ul class="list-disc pl-5 text-gray-700">
567
+ <li>Corruption with a smile</li>
568
+ <li>Fake political campaigns</li>
569
+ <li>Scheming behind cute cat videos</li>
570
+ <li>Hating dogs (especially Fluffy)</li>
571
+ </ul>
572
+ </div>
573
+ <div>
574
+ <h4 class="font-bold text-lg text-gray-800">BIO:</h4>
575
+ <p class="text-gray-700">Mayor Pibbles rose to power on a platform of cuteness and empty promises. Behind his adorable exterior lies a corrupt politician who will stop at nothing to maintain power - including framing Blind Justice for crimes. His public image as a cat-loving mayor is only rivaled by his private hatred for Fluffy, who keeps uncovering his schemes.</p>
576
+ </div>
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </section>
582
+
583
+ <!-- Back to Home -->
584
+ <section class="py-8 px-4 bg-red-100">
585
+ <div class="container mx-auto text-center">
586
+ <button class="comic-button bg-red-600 text-white font-bold py-3 px-8 rounded-lg comic-font text-xl" onclick="showPage('home')">
587
+ <i class="fas fa-arrow-left mr-2"></i> BACK TO HOME
588
+ </button>
589
+ </div>
590
+ </section>
591
+ </div>
592
+
593
+ <!-- Footer -->
594
+ <footer class="bg-gray-900 text-white py-8 px-4">
595
+ <div class="container mx-auto">
596
+ <div class="flex flex-col md:flex-row justify-between items-center">
597
+ <div class="mb-6 md:mb-0">
598
+ <div class="flex items-center space-x-2">
599
+ <i class="fas fa-blind text-red-500 text-3xl"></i>
600
+ <h2 class="comic-font text-2xl">BLIND JUSTICE</h2>
601
+ </div>
602
+ <p class="text-gray-400 mt-2">"Justice Never Blinks. But It Trips a Lot."</p>
603
+ </div>
604
+ <div class="flex space-x-6 mb-6 md:mb-0">
605
+ <a href="#" class="text-gray-400 hover:text-white transition">
606
+ <i class="fab fa-youtube text-2xl"></i>
607
+ </a>
608
+ <a href="#" class="text-gray-400 hover:text-white transition">
609
+ <i class="fab fa-tiktok text-2xl"></i>
610
+ </a>
611
+ <a href="#" class="text-gray-400 hover:text-white transition">
612
+ <i class="fab fa-instagram text-2xl"></i>
613
+ </a>
614
+ <a href="#" class="text-gray-400 hover:text-white transition">
615
+ <i class="fab fa-twitter text-2xl"></i>
616
+ </a>
617
+ </div>
618
+ <div class="text-center md:text-right">
619
+ <p class="text-gray-400">© 2023 Blind Justice</p>
620
+ <p class="text-gray-500 text-sm">All rights reserved. Justice may be blind, but our lawyers aren't.</p>
621
+ </div>
622
+ </div>
623
+ </div>
624
+ </footer>
625
+
626
+ <script>
627
+ // Show/hide pages
628
+ function showPage(pageId) {
629
+ document.querySelectorAll('.page').forEach(page => {
630
+ page.classList.remove('active');
631
+ });
632
+ document.getElementById(pageId).classList.add('active');
633
+
634
+ // Scroll to top
635
+ window.scrollTo(0, 0);
636
+ }
637
+
638
+ // Mobile menu toggle
639
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
640
+ const menu = document.getElementById('mobile-menu');
641
+ menu.classList.toggle('hidden');
642
+ });
643
+
644
+ // Character audio play simulation
645
+ document.querySelectorAll('[onclick*="playAudio"]').forEach(button => {
646
+ button.addEventListener('click', function() {
647
+ // In a real implementation, this would play character audio
648
+ alert("Character voice line would play here!");
649
+ });
650
+ });
651
+ </script>
652
+ <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=dwilcox24/funny-stuff" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
653
+ </html>
prompts.txt ADDED
File without changes