Hugging Face's logo

Spaces:
Test557
/
reddit-creepypasta
Running

App Files Community
Test557 commited on
Commit
17e7b60
·
verified ·
1 Parent(s): 295086d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +697 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Reddit Creepypasta
3
- emoji: 🏢
4
- colorFrom: red
5
- colorTo: gray
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: reddit-creepypasta
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,697 @@
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>CreepyCast - Reddit Creepypasta to Video</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=Creepster&family=Roboto:wght@300;400;500;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #6b21a8;
14
+ --secondary: #1e293b;
15
+ --accent: #f43f5e;
16
+ }
17
+
18
+ body {
19
+ font-family: 'Roboto', sans-serif;
20
+ background-color: #0f172a;
21
+ color: #e2e8f0;
22
+ }
23
+
24
+ .creepy-font {
25
+ font-family: 'Creepster', cursive;
26
+ }
27
+
28
+ .glow-text {
29
+ text-shadow: 0 0 8px rgba(244, 63, 94, 0.6);
30
+ }
31
+
32
+ .glow-box {
33
+ box-shadow: 0 0 15px rgba(244, 63, 94, 0.4);
34
+ }
35
+
36
+ .gradient-bg {
37
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
38
+ }
39
+
40
+ .custom-scrollbar::-webkit-scrollbar {
41
+ width: 6px;
42
+ }
43
+
44
+ .custom-scrollbar::-webkit-scrollbar-track {
45
+ background: #1e293b;
46
+ }
47
+
48
+ .custom-scrollbar::-webkit-scrollbar-thumb {
49
+ background-color: #6b21a8;
50
+ border-radius: 3px;
51
+ }
52
+
53
+ .pulse-animation {
54
+ animation: pulse 2s infinite;
55
+ }
56
+
57
+ @keyframes pulse {
58
+ 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.4); }
59
+ 70% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); }
60
+ 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
61
+ }
62
+
63
+ .video-preview {
64
+ aspect-ratio: 16/9;
65
+ background: linear-gradient(45deg, #1e293b 25%, #0f172a 25%, #0f172a 50%, #1e293b 50%, #1e293b 75%, #0f172a 75%, #0f172a 100%);
66
+ background-size: 20px 20px;
67
+ }
68
+
69
+ /* Toggle switch styling */
70
+ .toggle-checkbox:checked {
71
+ right: 0;
72
+ border-color: #6b21a8;
73
+ }
74
+ .toggle-checkbox:checked + .toggle-label {
75
+ background-color: #6b21a8;
76
+ }
77
+ </style>
78
+ </head>
79
+ <body class="min-h-screen">
80
+ <!-- Main App Container -->
81
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
82
+ <!-- Header -->
83
+ <header class="flex flex-col items-center mb-8">
84
+ <h1 class="text-5xl font-bold mb-2 creepy-font glow-text text-purple-500">CreepyCast</h1>
85
+ <p class="text-lg text-gray-400">Transform Reddit creepypastas into narrated gameplay videos</p>
86
+ </header>
87
+
88
+ <!-- Main Content -->
89
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
90
+ <!-- Left Panel - Input & Controls -->
91
+ <div class="lg:col-span-1 space-y-6">
92
+ <!-- URL Input -->
93
+ <div class="bg-slate-800 rounded-xl p-6 glow-box">
94
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
95
+ <i class="fas fa-link text-purple-400 mr-2"></i>
96
+ Story Source
97
+ </h2>
98
+ <div class="space-y-4">
99
+ <div>
100
+ <label class="block text-sm font-medium text-gray-300 mb-1">Reddit URL</label>
101
+ <div class="flex">
102
+ <input type="text" id="reddit-url" placeholder="https://www.reddit.com/r/nosleep/..."
103
+ class="flex-1 rounded-l-lg bg-slate-700 border border-slate-600 text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
104
+ <button id="fetch-btn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 rounded-r-lg transition-colors">
105
+ <i class="fas fa-download"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+
110
+ <div class="pt-2">
111
+ <label class="block text-sm font-medium text-gray-300 mb-1">Or paste text directly</label>
112
+ <textarea id="direct-text" rows="4"
113
+ class="w-full rounded-lg bg-slate-700 border border-slate-600 text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500"></textarea>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Voice Settings -->
119
+ <div class="bg-slate-800 rounded-xl p-6 glow-box">
120
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
121
+ <i class="fas fa-microphone text-purple-400 mr-2"></i>
122
+ Narration
123
+ </h2>
124
+ <div class="space-y-4">
125
+ <div>
126
+ <label class="block text-sm font-medium text-gray-300 mb-1">Voice</label>
127
+ <select id="voice-select" class="w-full rounded-lg bg-slate-700 border border-slate-600 text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
128
+ <option value="deep-male">Deep Male (Default)</option>
129
+ <option value="ominous-male">Ominous Male</option>
130
+ <option value="whispering-female">Whispering Female</option>
131
+ <option value="robotic">Robotic</option>
132
+ <option value="echo">Echo Effect</option>
133
+ </select>
134
+ </div>
135
+
136
+ <div>
137
+ <label class="block text-sm font-medium text-gray-300 mb-1">Speed</label>
138
+ <div class="flex items-center">
139
+ <span class="text-xs text-gray-400 mr-2">Slow</span>
140
+ <input type="range" id="speed-slider" min="0.5" max="2" step="0.1" value="1"
141
+ class="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer">
142
+ <span class="text-xs text-gray-400 ml-2">Fast</span>
143
+ </div>
144
+ </div>
145
+
146
+ <div>
147
+ <label class="block text-sm font-medium text-gray-300 mb-1">Volume</label>
148
+ <div class="flex items-center">
149
+ <span class="text-xs text-gray-400 mr-2">Quiet</span>
150
+ <input type="range" id="volume-slider" min="0" max="100" value="80"
151
+ class="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer">
152
+ <span class="text-xs text-gray-400 ml-2">Loud</span>
153
+ </div>
154
+ </div>
155
+
156
+ <div class="pt-2">
157
+ <button id="preview-voice-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg transition-colors flex items-center justify-center">
158
+ <i class="fas fa-play mr-2"></i> Preview Voice
159
+ </button>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Middle Panel - Video Preview & Background -->
166
+ <div class="lg:col-span-2 space-y-6">
167
+ <!-- Video Preview -->
168
+ <div class="bg-slate-800 rounded-xl p-6 glow-box">
169
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
170
+ <i class="fas fa-video text-purple-400 mr-2"></i>
171
+ Video Preview
172
+ </h2>
173
+ <div class="video-preview rounded-lg overflow-hidden mb-4 relative">
174
+ <div id="gameplay-preview" class="w-full h-full bg-black flex items-center justify-center">
175
+ <span class="text-gray-500">Select a background below</span>
176
+ </div>
177
+ <div id="text-overlay" class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 p-4 hidden">
178
+ <p id="current-text" class="text-white text-center"></p>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="flex justify-between items-center">
183
+ <div class="flex space-x-2">
184
+ <button id="play-btn" class="bg-slate-700 text-white p-2 rounded-lg transition-colors">
185
+ <i class="fas fa-play"></i>
186
+ </button>
187
+ <button id="pause-btn" class="bg-slate-700 text-white p-2 rounded-lg transition-colors">
188
+ <i class="fas fa-pause"></i>
189
+ </button>
190
+ <button id="stop-btn" class="bg-slate-700 text-white p-2 rounded-lg transition-colors">
191
+ <i class="fas fa-stop"></i>
192
+ </button>
193
+ </div>
194
+
195
+ <div class="text-sm text-gray-400">
196
+ <span id="current-time">0:00</span> / <span id="total-time">0:00</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Background Selection -->
202
+ <div class="bg-slate-800 rounded-xl p-6 glow-box">
203
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
204
+ <i class="fas fa-gamepad text-purple-400 mr-2"></i>
205
+ Background Gameplay
206
+ </h2>
207
+
208
+ <div class="mb-4">
209
+ <div class="flex space-x-2 overflow-x-auto pb-2 custom-scrollbar">
210
+ <button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg transition-colors whitespace-nowrap">All</button>
211
+ <button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg transition-colors whitespace-nowrap">Horror</button>
212
+ <button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg transition-colors whitespace-nowrap">Minecraft</button>
213
+ <button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg transition-colors whitespace-nowrap">Subway Surfers</button>
214
+ <button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg transition-colors whitespace-nowrap">Dark</button>
215
+ <button class="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1 rounded-lg transition-colors whitespace-nowrap">Abstract</button>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
220
+ <div class="bg-slate-700 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all bg-preview" data-bg="minecraft">
221
+ <div class="aspect-video bg-black flex items-center justify-center">
222
+ <i class="fas fa-mountain text-gray-500 text-2xl"></i>
223
+ </div>
224
+ <div class="p-2">
225
+ <p class="text-sm font-medium">Minecraft Cave</p>
226
+ <p class="text-xs text-gray-400">0:45</p>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="bg-slate-700 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all bg-preview" data-bg="subway">
231
+ <div class="aspect-video bg-black flex items-center justify-center">
232
+ <i class="fas fa-subway text-gray-500 text-2xl"></i>
233
+ </div>
234
+ <div class="p-2">
235
+ <p class="text-sm font-medium">Subway Surfers</p>
236
+ <p class="text-xs text-gray-400">1:20</p>
237
+ </div>
238
+ </div>
239
+
240
+ <div class="bg-slate-700 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all bg-preview" data-bg="forest">
241
+ <div class="aspect-video bg-black flex items-center justify-center">
242
+ <i class="fas fa-ghost text-gray-500 text-2xl"></i>
243
+ </div>
244
+ <div class="p-2">
245
+ <p class="text-sm font-medium">Dark Forest</p>
246
+ <p class="text-xs text-gray-400">2:15</p>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="bg-slate-700 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all bg-preview" data-bg="ocean">
251
+ <div class="aspect-video bg-black flex items-center justify-center">
252
+ <i class="fas fa-water text-gray-500 text-2xl"></i>
253
+ </div>
254
+ <div class="p-2">
255
+ <p class="text-sm font-medium">Ocean Depths</p>
256
+ <p class="text-xs text-gray-400">1:45</p>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="bg-slate-700 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all bg-preview" data-bg="city">
261
+ <div class="aspect-video bg-black flex items-center justify-center">
262
+ <i class="fas fa-city text-gray-500 text-2xl"></i>
263
+ </div>
264
+ <div class="p-2">
265
+ <p class="text-sm font-medium">Abandoned City</p>
266
+ <p class="text-xs text-gray-400">3:00</p>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="bg-slate-700 rounded-lg overflow-hidden cursor-pointer hover:ring-2 hover:ring-purple-500 transition-all bg-preview" data-bg="upload">
271
+ <div class="aspect-video bg-black flex items-center justify-center">
272
+ <i class="fas fa-plus text-gray-500 text-2xl"></i>
273
+ </div>
274
+ <div class="p-2">
275
+ <p class="text-sm font-medium">Upload Your Own</p>
276
+ <p class="text-xs text-gray-400">MP4, MOV</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Advanced Settings -->
283
+ <div class="bg-slate-800 rounded-xl p-6 glow-box">
284
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
285
+ <i class="fas fa-cog text-purple-400 mr-2"></i>
286
+ Advanced Settings
287
+ </h2>
288
+
289
+ <div class="space-y-4">
290
+ <div>
291
+ <label class="flex items-center cursor-pointer">
292
+ <div class="relative">
293
+ <input type="checkbox" id="subtitles-toggle" class="sr-only toggle-checkbox">
294
+ <div class="block bg-slate-600 w-14 h-8 rounded-full toggle-label"></div>
295
+ <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
296
+ </div>
297
+ <div class="ml-3 text-gray-300 font-medium">
298
+ Add Subtitles
299
+ </div>
300
+ </label>
301
+ </div>
302
+
303
+ <div id="subtitle-settings" class="pl-2 border-l-2 border-purple-500 ml-4 hidden">
304
+ <div class="mb-3">
305
+ <label class="block text-sm font-medium text-gray-300 mb-1">Font</label>
306
+ <select class="w-full rounded-lg bg-slate-700 border border-slate-600 text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
307
+ <option>Roboto (Default)</option>
308
+ <option>Creepster</option>
309
+ <option>Courier New</option>
310
+ <option>Arial</option>
311
+ </select>
312
+ </div>
313
+
314
+ <div class="mb-3">
315
+ <label class="block text-sm font-medium text-gray-300 mb-1">Color</label>
316
+ <div class="flex space-x-2">
317
+ <div class="w-8 h-8 rounded-full bg-white cursor-pointer border-2 border-white"></div>
318
+ <div class="w-8 h-8 rounded-full bg-red-500 cursor-pointer border-2 border-slate-700"></div>
319
+ <div class="w-8 h-8 rounded-full bg-purple-500 cursor-pointer border-2 border-slate-700"></div>
320
+ <div class="w-8 h-8 rounded-full bg-green-500 cursor-pointer border-2 border-slate-700"></div>
321
+ <div class="w-8 h-8 rounded-full bg-yellow-500 cursor-pointer border-2 border-slate-700"></div>
322
+ </div>
323
+ </div>
324
+
325
+ <div>
326
+ <label class="block text-sm font-medium text-gray-300 mb-1">Size</label>
327
+ <input type="range" min="12" max="36" value="18" class="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer">
328
+ </div>
329
+ </div>
330
+
331
+ <div>
332
+ <label class="flex items-center cursor-pointer">
333
+ <div class="relative">
334
+ <input type="checkbox" id="effects-toggle" class="sr-only toggle-checkbox">
335
+ <div class="block bg-slate-600 w-14 h-8 rounded-full toggle-label"></div>
336
+ <div class="dot absolute left-1 top-1 bg-white w-6 h-6 rounded-full transition"></div>
337
+ </div>
338
+ <div class="ml-3 text-gray-300 font-medium">
339
+ Add Atmospheric Effects
340
+ </div>
341
+ </label>
342
+ </div>
343
+
344
+ <div id="effects-settings" class="pl-2 border-l-2 border-purple-500 ml-4 hidden">
345
+ <div class="mb-3">
346
+ <label class="block text-sm font-medium text-gray-300 mb-1">Sound Effects</label>
347
+ <select class="w-full rounded-lg bg-slate-700 border border-slate-600 text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
348
+ <option>None</option>
349
+ <option>Thunderstorm</option>
350
+ <option>Creepy Forest</option>
351
+ <option>Haunted House</option>
352
+ <option>Distant Screams</option>
353
+ </select>
354
+ </div>
355
+
356
+ <div>
357
+ <label class="block text-sm font-medium text-gray-300 mb-1">Volume</label>
358
+ <div class="flex items-center">
359
+ <span class="text-xs text-gray-400 mr-2">Quiet</span>
360
+ <input type="range" min="0" max="100" value="30" class="w-full h-2 bg-slate-600 rounded-lg appearance-none cursor-pointer">
361
+ <span class="text-xs text-gray-400 ml-2">Loud</span>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Generate & Export -->
369
+ <div class="bg-slate-800 rounded-xl p-6 glow-box pulse-animation">
370
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
371
+ <i class="fas fa-magic text-purple-400 mr-2"></i>
372
+ Create Your Video
373
+ </h2>
374
+
375
+ <div class="space-y-4">
376
+ <div>
377
+ <label class="block text-sm font-medium text-gray-300 mb-1">Quality</label>
378
+ <select id="quality-select" class="w-full rounded-lg bg-slate-700 border border-slate-600 text-white px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500">
379
+ <option value="720p">720p (Standard)</option>
380
+ <option value="1080p">1080p (HD)</option>
381
+ <option value="4k" disabled>4K (Premium)</option>
382
+ </select>
383
+ </div>
384
+
385
+ <div class="grid grid-cols-2 gap-4">
386
+ <button id="generate-btn" class="bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg transition-colors flex items-center justify-center font-medium">
387
+ <i class="fas fa-play-circle mr-2"></i> Generate Preview
388
+ </button>
389
+ <button id="export-btn" class="bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg transition-colors flex items-center justify-center font-medium">
390
+ <i class="fas fa-download mr-2"></i> Export Video
391
+ </button>
392
+ </div>
393
+
394
+ <div class="text-center text-sm text-gray-400">
395
+ <p>Free version includes watermark. <a href="#" class="text-purple-400 hover:underline">Upgrade to Premium</a> to remove.</p>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </div>
402
+
403
+ <!-- Footer -->
404
+ <footer class="bg-slate-900 py-6 mt-12">
405
+ <div class="container mx-auto px-4 text-center text-gray-400 text-sm">
406
+ <div class="flex justify-center space-x-6 mb-4">
407
+ <a href="#" class="hover:text-purple-400 transition-colors">About</a>
408
+ <a href="#" class="hover:text-purple-400 transition-colors">FAQ</a>
409
+ <a href="#" class="hover:text-purple-400 transition-colors">Privacy</a>
410
+ <a href="#" class="hover:text-purple-400 transition-colors">Terms</a>
411
+ <a href="#" class="hover:text-purple-400 transition-colors">Contact</a>
412
+ </div>
413
+ <p>© 2023 CreepyCast. Not affiliated with Reddit. All creepypasta stories belong to their original authors.</p>
414
+ </div>
415
+ </footer>
416
+
417
+ <script>
418
+ // DOM Elements
419
+ const redditUrlInput = document.getElementById('reddit-url');
420
+ const directTextInput = document.getElementById('direct-text');
421
+ const fetchBtn = document.getElementById('fetch-btn');
422
+ const generateBtn = document.getElementById('generate-btn');
423
+ const exportBtn = document.getElementById('export-btn');
424
+ const playBtn = document.getElementById('play-btn');
425
+ const pauseBtn = document.getElementById('pause-btn');
426
+ const stopBtn = document.getElementById('stop-btn');
427
+ const previewVoiceBtn = document.getElementById('preview-voice-btn');
428
+ const subtitlesToggle = document.getElementById('subtitles-toggle');
429
+ const effectsToggle = document.getElementById('effects-toggle');
430
+ const subtitleSettings = document.getElementById('subtitle-settings');
431
+ const effectsSettings = document.getElementById('effects-settings');
432
+ const gameplayPreview = document.getElementById('gameplay-preview');
433
+ const textOverlay = document.getElementById('text-overlay');
434
+ const currentText = document.getElementById('current-text');
435
+ const currentTimeDisplay = document.getElementById('current-time');
436
+ const totalTimeDisplay = document.getElementById('total-time');
437
+ const bgPreviews = document.querySelectorAll('.bg-preview');
438
+
439
+ // App State
440
+ let appState = {
441
+ selectedBackground: null,
442
+ isPlaying: false,
443
+ currentTime: 0,
444
+ totalTime: 165, // 2:45 in seconds
445
+ intervalId: null,
446
+ generatedVideo: false
447
+ };
448
+
449
+ // Initialize the app
450
+ function init() {
451
+ setupEventListeners();
452
+ updateTimeDisplay();
453
+ }
454
+
455
+ // Set up all event listeners
456
+ function setupEventListeners() {
457
+ // Background selection
458
+ bgPreviews.forEach(bg => {
459
+ bg.addEventListener('click', () => {
460
+ bgPreviews.forEach(b => b.classList.remove('ring-2', 'ring-purple-500'));
461
+ bg.classList.add('ring-2', 'ring-purple-500');
462
+ appState.selectedBackground = bg.dataset.bg;
463
+ updateGameplayPreview();
464
+ });
465
+ });
466
+
467
+ // Toggle switches
468
+ subtitlesToggle.addEventListener('change', () => {
469
+ subtitleSettings.classList.toggle('hidden', !subtitlesToggle.checked);
470
+ });
471
+
472
+ effectsToggle.addEventListener('change', () => {
473
+ effectsSettings.classList.toggle('hidden', !effectsToggle.checked);
474
+ });
475
+
476
+ // Generate button
477
+ generateBtn.addEventListener('click', generateVideo);
478
+
479
+ // Playback controls
480
+ playBtn.addEventListener('click', playVideo);
481
+ pauseBtn.addEventListener('click', pauseVideo);
482
+ stopBtn.addEventListener('click', stopVideo);
483
+
484
+ // Export button
485
+ exportBtn.addEventListener('click', exportVideo);
486
+
487
+ // Preview voice button
488
+ previewVoiceBtn.addEventListener('click', previewVoice);
489
+
490
+ // Fetch button
491
+ fetchBtn.addEventListener('click', fetchRedditContent);
492
+ }
493
+
494
+ // Update gameplay preview based on selected background
495
+ function updateGameplayPreview() {
496
+ if (!appState.selectedBackground) {
497
+ gameplayPreview.innerHTML = '<span class="text-gray-500">Select a background below</span>';
498
+ return;
499
+ }
500
+
501
+ let icon, text;
502
+ switch(appState.selectedBackground) {
503
+ case 'minecraft':
504
+ icon = 'fa-mountain';
505
+ text = 'Minecraft Cave Background';
506
+ break;
507
+ case 'subway':
508
+ icon = 'fa-subway';
509
+ text = 'Subway Surfers Background';
510
+ break;
511
+ case 'forest':
512
+ icon = 'fa-ghost';
513
+ text = 'Dark Forest Background';
514
+ break;
515
+ case 'ocean':
516
+ icon = 'fa-water';
517
+ text = 'Ocean Depths Background';
518
+ break;
519
+ case 'city':
520
+ icon = 'fa-city';
521
+ text = 'Abandoned City Background';
522
+ break;
523
+ case 'upload':
524
+ icon = 'fa-plus';
525
+ text = 'Upload Your Own Background';
526
+ break;
527
+ default:
528
+ icon = 'fa-question';
529
+ text = 'Unknown Background';
530
+ }
531
+
532
+ gameplayPreview.innerHTML = `<i class="fas ${icon} text-gray-500 text-4xl"></i>`;
533
+ }
534
+
535
+ // Generate video preview
536
+ function generateVideo() {
537
+ const url = redditUrlInput.value;
538
+ const text = directTextInput.value;
539
+
540
+ if (!url && !text) {
541
+ alert('Please enter a Reddit URL or paste your story text');
542
+ return;
543
+ }
544
+
545
+ if (!appState.selectedBackground) {
546
+ alert('Please select a background first');
547
+ return;
548
+ }
549
+
550
+ // Simulate processing
551
+ generateBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...';
552
+ generateBtn.disabled = true;
553
+
554
+ setTimeout(() => {
555
+ generateBtn.innerHTML = '<i class="fas fa-play-circle mr-2"></i> Generate Preview';
556
+ generateBtn.disabled = false;
557
+
558
+ // Show text in preview
559
+ const previewText = text || "This is a simulated preview of your creepypasta story narration with selected gameplay background.";
560
+ currentText.textContent = previewText.substring(0, 100) + (previewText.length > 100 ? '...' : '');
561
+ textOverlay.classList.remove('hidden');
562
+
563
+ // Enable play button
564
+ playBtn.classList.remove('bg-slate-700');
565
+ playBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
566
+
567
+ // Set total time
568
+ updateTimeDisplay();
569
+
570
+ // Mark video as generated
571
+ appState.generatedVideo = true;
572
+ appState.currentTime = 0;
573
+ }, 2000);
574
+ }
575
+
576
+ // Play video
577
+ function playVideo() {
578
+ if (!appState.generatedVideo) {
579
+ alert('Please generate a preview first');
580
+ return;
581
+ }
582
+
583
+ if (appState.isPlaying) return;
584
+
585
+ appState.isPlaying = true;
586
+ playBtn.classList.add('bg-green-600', 'hover:bg-green-700');
587
+ playBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700');
588
+ pauseBtn.classList.remove('bg-slate-700');
589
+ pauseBtn.classList.add('bg-yellow-500', 'hover:bg-yellow-600');
590
+
591
+ // Start playback timer
592
+ appState.intervalId = setInterval(() => {
593
+ appState.currentTime++;
594
+ updateTimeDisplay();
595
+
596
+ if (appState.currentTime >= appState.totalTime) {
597
+ stopVideo();
598
+ }
599
+ }, 1000);
600
+ }
601
+
602
+ // Pause video
603
+ function pauseVideo() {
604
+ if (!appState.isPlaying) return;
605
+
606
+ clearInterval(appState.intervalId);
607
+ appState.isPlaying = false;
608
+ pauseBtn.classList.add('bg-slate-700');
609
+ pauseBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
610
+ playBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
611
+ playBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
612
+ }
613
+
614
+ // Stop video
615
+ function stopVideo() {
616
+ clearInterval(appState.intervalId);
617
+ appState.isPlaying = false;
618
+ appState.currentTime = 0;
619
+ updateTimeDisplay();
620
+ pauseBtn.classList.add('bg-slate-700');
621
+ pauseBtn.classList.remove('bg-yellow-500', 'hover:bg-yellow-600');
622
+ playBtn.classList.remove('bg-green-600', 'hover:bg-green-700');
623
+ playBtn.classList.add('bg-purple-600', 'hover:bg-purple-700');
624
+ }
625
+
626
+ // Update time display
627
+ function updateTimeDisplay() {
628
+ const mins = Math.floor(appState.currentTime / 60);
629
+ const secs = appState.currentTime % 60;
630
+ currentTimeDisplay.textContent = `${mins}:${secs < 10 ? '0' + secs : secs}`;
631
+
632
+ const totalMins = Math.floor(appState.totalTime / 60);
633
+ const totalSecs = appState.totalTime % 60;
634
+ totalTimeDisplay.textContent = `${totalMins}:${totalSecs < 10 ? '0' + totalSecs : totalSecs}`;
635
+ }
636
+
637
+ // Export video
638
+ function exportVideo() {
639
+ if (!appState.generatedVideo) {
640
+ alert('Please generate a preview first');
641
+ return;
642
+ }
643
+
644
+ alert('Video exported successfully (simulated). In a real app, this would download your MP4 file.');
645
+ }
646
+
647
+ // Preview voice
648
+ function previewVoice() {
649
+ const voiceSelect = document.getElementById('voice-select');
650
+ const voice = voiceSelect.value;
651
+ let voiceName = '';
652
+
653
+ switch(voice) {
654
+ case 'deep-male': voiceName = 'Deep Male Voice'; break;
655
+ case 'ominous-male': voiceName = 'Ominous Male Voice'; break;
656
+ case 'whispering-female': voiceName = 'Whispering Female Voice'; break;
657
+ case 'robotic': voiceName = 'Robotic Voice'; break;
658
+ case 'echo': voiceName = 'Echo Effect Voice'; break;
659
+ }
660
+
661
+ alert(`Playing preview with ${voiceName} (simulated). In a real app, this would play actual TTS audio.`);
662
+ }
663
+
664
+ // Fetch Reddit content
665
+ function fetchRedditContent() {
666
+ const url = redditUrlInput.value.trim();
667
+
668
+ if (!url) {
669
+ alert('Please enter a Reddit URL');
670
+ return;
671
+ }
672
+
673
+ if (!url.includes('reddit.com')) {
674
+ alert('Please enter a valid Reddit URL');
675
+ return;
676
+ }
677
+
678
+ // Simulate fetching content
679
+ fetchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
680
+ fetchBtn.disabled = true;
681
+
682
+ setTimeout(() => {
683
+ fetchBtn.innerHTML = '<i class="fas fa-download"></i>';
684
+ fetchBtn.disabled = false;
685
+
686
+ // Simulate extracted text
687
+ directTextInput.value = "This is a simulated extraction of a Reddit creepypasta post. In a real implementation, this would fetch the actual content from the Reddit URL you provided.\n\nThe text would appear here exactly as it appears on Reddit, ready for you to generate your narrated video.";
688
+
689
+ alert('Reddit content fetched successfully (simulated). In a real app, this would retrieve the actual post content.');
690
+ }, 1500);
691
+ }
692
+
693
+ // Initialize the app when DOM is loaded
694
+ document.addEventListener('DOMContentLoaded', init);
695
+ </script>
696
+ <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=Test557/reddit-creepypasta" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
697
+ </html>