Hugging Face's logo

Spaces:
jasvir-singh1021
/
big-daddy-studio
Running

App Files Community
jasvir-singh1021 commited on
Commit
2b94628
·
verified ·
1 Parent(s): 16bda45

Create a stunning, creative single-page web app titled “Big Daddy’s Dream Studio”. The site should have a beautiful, modern design with soft gradients, rounded cards, and smooth transitions. Include four interactive tools: Handwriting Canvas – a whiteboard-like area where users can draw or write using the mouse or finger, with pen color and thickness options. Image Effects Panel – let users upload an image and apply effects like grayscale, blur, brightness adjustment, and a floral border overlay. Text Styler – allow users to type a message and apply artistic fonts, gradient fills, shadows, and animated typewriter text effects. Mini Video Editor – enable video upload with UI sliders to trim start and end points. Also include the ability to merge background music (UI only, no backend). Organize everything in tabs or collapsible cards. Add a dreamy background, smooth entrance animations, and soft background music with a toggle. Include a header that says “Welcome to Big Daddy’s Dream Studio” and a footer that says “Made with Love by Big Daddy”. Use HTML, CSS, and JavaScript only. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +849 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Big Daddy Studio
3
- emoji: 👀
4
- colorFrom: blue
5
- colorTo: pink
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: big-daddy-studio
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: gray
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,849 @@
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>Big Daddy's Dream Studio</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=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
+ min-height: 100vh;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .dreamy-bg {
20
+ background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 90%);
21
+ }
22
+
23
+ .tool-card {
24
+ background: rgba(255, 255, 255, 0.85);
25
+ backdrop-filter: blur(10px);
26
+ transition: all 0.3s ease;
27
+ box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
28
+ }
29
+
30
+ .tool-card:hover {
31
+ transform: translateY(-5px);
32
+ box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
33
+ }
34
+
35
+ .nav-tab {
36
+ transition: all 0.3s ease;
37
+ }
38
+
39
+ .nav-tab:hover {
40
+ transform: scale(1.05);
41
+ }
42
+
43
+ .nav-tab.active {
44
+ background: rgba(255, 255, 255, 0.7);
45
+ font-weight: 600;
46
+ }
47
+
48
+ #canvas {
49
+ touch-action: none;
50
+ }
51
+
52
+ .typewriter {
53
+ overflow: hidden;
54
+ border-right: 3px solid #6366f1;
55
+ white-space: nowrap;
56
+ margin: 0 auto;
57
+ letter-spacing: 2px;
58
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
59
+ }
60
+
61
+ @keyframes typing {
62
+ from { width: 0 }
63
+ to { width: 100% }
64
+ }
65
+
66
+ @keyframes blink-caret {
67
+ from, to { border-color: transparent }
68
+ 50% { border-color: #6366f1; }
69
+ }
70
+
71
+ .fade-in {
72
+ animation: fadeIn 1s ease-in;
73
+ }
74
+
75
+ @keyframes fadeIn {
76
+ from { opacity: 0; transform: translateY(20px); }
77
+ to { opacity: 1; transform: translateY(0); }
78
+ }
79
+
80
+ .floral-border {
81
+ position: relative;
82
+ }
83
+
84
+ .floral-border::after {
85
+ content: "";
86
+ position: absolute;
87
+ top: -10px;
88
+ left: -10px;
89
+ right: -10px;
90
+ bottom: -10px;
91
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="none" stroke="%23c084fc" stroke-width="2" d="M20,20 Q30,10 40,20 T60,20 T80,20 T100,20" transform="rotate(45 50 50)"/><path fill="none" stroke="%23c084fc" stroke-width="2" d="M20,20 Q30,10 40,20 T60,20 T80,20 T100,20" transform="rotate(135 50 50)"/><path fill="none" stroke="%23c084fc" stroke-width="2" d="M20,20 Q30,10 40,20 T60,20 T80,20 T100,20" transform="rotate(225 50 50)"/><path fill="none" stroke="%23c084fc" stroke-width="2" d="M20,20 Q30,10 40,20 T60,20 T80,20 T100,20" transform="rotate(315 50 50)"/></svg>');
92
+ background-size: 100px 100px;
93
+ z-index: -1;
94
+ border-radius: 15px;
95
+ pointer-events: none;
96
+ }
97
+
98
+ .gradient-text {
99
+ background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899);
100
+ -webkit-background-clip: text;
101
+ background-clip: text;
102
+ color: transparent;
103
+ }
104
+
105
+ .audio-toggle {
106
+ transition: all 0.3s ease;
107
+ }
108
+
109
+ .audio-toggle:hover {
110
+ transform: scale(1.1);
111
+ }
112
+
113
+ .slider-thumb::-webkit-slider-thumb {
114
+ -webkit-appearance: none;
115
+ appearance: none;
116
+ width: 20px;
117
+ height: 20px;
118
+ border-radius: 50%;
119
+ background: #6366f1;
120
+ cursor: pointer;
121
+ }
122
+
123
+ .slider-thumb::-moz-range-thumb {
124
+ width: 20px;
125
+ height: 20px;
126
+ border-radius: 50%;
127
+ background: #6366f1;
128
+ cursor: pointer;
129
+ }
130
+ </style>
131
+ </head>
132
+ <body class="dreamy-bg">
133
+ <!-- Audio Element -->
134
+ <audio id="bgMusic" loop>
135
+ <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
136
+ </audio>
137
+
138
+ <!-- Header -->
139
+ <header class="text-center py-8 fade-in">
140
+ <h1 class="text-4xl md:text-5xl font-bold mb-2 gradient-text">Welcome to Big Daddy's Dream Studio</h1>
141
+ <p class="text-lg text-indigo-600">Create, design, and bring your dreams to life</p>
142
+
143
+ <div class="flex justify-center mt-4">
144
+ <button id="audioToggle" class="audio-toggle bg-white p-3 rounded-full shadow-lg text-indigo-600">
145
+ <i class="fas fa-music"></i>
146
+ </button>
147
+ </div>
148
+ </header>
149
+
150
+ <!-- Main Content -->
151
+ <main class="container mx-auto px-4 pb-12">
152
+ <!-- Navigation Tabs -->
153
+ <div class="flex flex-wrap justify-center gap-2 mb-8">
154
+ <button onclick="showTool('handwriting')" class="nav-tab active px-6 py-2 rounded-full bg-indigo-100 text-indigo-700">
155
+ <i class="fas fa-pen-fancy mr-2"></i>Handwriting
156
+ </button>
157
+ <button onclick="showTool('image-effects')" class="nav-tab px-6 py-2 rounded-full bg-pink-100 text-pink-700">
158
+ <i class="fas fa-image mr-2"></i>Image Effects
159
+ </button>
160
+ <button onclick="showTool('text-styler')" class="nav-tab px-6 py-2 rounded-full bg-purple-100 text-purple-700">
161
+ <i class="fas fa-font mr-2"></i>Text Styler
162
+ </button>
163
+ <button onclick="showTool('video-editor')" class="nav-tab px-6 py-2 rounded-full bg-blue-100 text-blue-700">
164
+ <i class="fas fa-video mr-2"></i>Video Editor
165
+ </button>
166
+ </div>
167
+
168
+ <!-- Tools Container -->
169
+ <div class="grid grid-cols-1 gap-8">
170
+ <!-- Handwriting Canvas Tool -->
171
+ <div id="handwriting-tool" class="tool-card rounded-2xl p-6 fade-in">
172
+ <h2 class="text-2xl font-bold mb-4 text-indigo-700 flex items-center">
173
+ <i class="fas fa-pen-fancy mr-3"></i> Handwriting Canvas
174
+ </h2>
175
+
176
+ <div class="flex flex-wrap gap-4 mb-4">
177
+ <div>
178
+ <label class="block text-sm font-medium text-gray-700 mb-1">Pen Color</label>
179
+ <input type="color" id="penColor" value="#000000" class="w-12 h-10 cursor-pointer">
180
+ </div>
181
+
182
+ <div>
183
+ <label class="block text-sm font-medium text-gray-700 mb-1">Pen Size</label>
184
+ <input type="range" id="penSize" min="1" max="20" value="5" class="w-32 slider-thumb">
185
+ <span id="penSizeValue" class="text-sm ml-2">5px</span>
186
+ </div>
187
+
188
+ <button onclick="clearCanvas()" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
189
+ <i class="fas fa-trash-alt mr-2"></i>Clear
190
+ </button>
191
+
192
+ <button onclick="saveCanvas()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
193
+ <i class="fas fa-download mr-2"></i>Save
194
+ </button>
195
+ </div>
196
+
197
+ <div class="border-2 border-dashed border-gray-300 rounded-xl overflow-hidden">
198
+ <canvas id="canvas" width="800" height="500" class="w-full bg-white touch-none"></canvas>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Image Effects Tool -->
203
+ <div id="image-effects-tool" class="tool-card rounded-2xl p-6 hidden">
204
+ <h2 class="text-2xl font-bold mb-4 text-pink-700 flex items-center">
205
+ <i class="fas fa-image mr-3"></i> Image Effects
206
+ </h2>
207
+
208
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
209
+ <div>
210
+ <div class="mb-4">
211
+ <label class="block text-sm font-medium text-gray-700 mb-2">Upload Image</label>
212
+ <input type="file" id="imageUpload" accept="image/*" class="block w-full text-sm text-gray-500
213
+ file:mr-4 file:py-2 file:px-4
214
+ file:rounded-lg file:border-0
215
+ file:text-sm file:font-semibold
216
+ file:bg-pink-50 file:text-pink-700
217
+ hover:file:bg-pink-100">
218
+ </div>
219
+
220
+ <div class="space-y-4">
221
+ <div>
222
+ <label class="block text-sm font-medium text-gray-700 mb-1">Brightness: <span id="brightnessValue">100</span>%</label>
223
+ <input type="range" id="brightness" min="0" max="200" value="100" class="w-full slider-thumb">
224
+ </div>
225
+
226
+ <div>
227
+ <label class="block text-sm font-medium text-gray-700 mb-1">Contrast: <span id="contrastValue">100</span>%</label>
228
+ <input type="range" id="contrast" min="0" max="200" value="100" class="w-full slider-thumb">
229
+ </div>
230
+
231
+ <div>
232
+ <label class="block text-sm font-medium text-gray-700 mb-1">Blur: <span id="blurValue">0</span>px</label>
233
+ <input type="range" id="blur" min="0" max="10" value="0" class="w-full slider-thumb">
234
+ </div>
235
+
236
+ <div class="flex items-center space-x-4">
237
+ <button onclick="applyGrayscale()" class="bg-pink-600 text-white px-4 py-2 rounded-lg hover:bg-pink-700 transition">
238
+ Grayscale
239
+ </button>
240
+
241
+ <button onclick="applySepia()" class="bg-pink-600 text-white px-4 py-2 rounded-lg hover:bg-pink-700 transition">
242
+ Sepia
243
+ </button>
244
+
245
+ <button onclick="toggleFloralBorder()" class="bg-pink-600 text-white px-4 py-2 rounded-lg hover:bg-pink-700 transition">
246
+ Floral Border
247
+ </button>
248
+ </div>
249
+
250
+ <button onclick="resetImage()" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition">
251
+ Reset Image
252
+ </button>
253
+
254
+ <button onclick="downloadImage()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
255
+ <i class="fas fa-download mr-2"></i>Download
256
+ </button>
257
+ </div>
258
+ </div>
259
+
260
+ <div class="flex justify-center items-center">
261
+ <div class="border-2 border-dashed border-gray-300 rounded-xl overflow-hidden w-full">
262
+ <img id="imagePreview" src="" alt="Preview" class="w-full max-h-96 object-contain bg-gray-100 hidden">
263
+ <div id="imagePlaceholder" class="p-8 text-center text-gray-500">
264
+ <i class="fas fa-image fa-3x mb-4"></i>
265
+ <p>Upload an image to apply effects</p>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Text Styler Tool -->
273
+ <div id="text-styler-tool" class="tool-card rounded-2xl p-6 hidden">
274
+ <h2 class="text-2xl font-bold mb-4 text-purple-700 flex items-center">
275
+ <i class="fas fa-font mr-3"></i> Text Styler
276
+ </h2>
277
+
278
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
279
+ <div>
280
+ <div class="mb-4">
281
+ <label class="block text-sm font-medium text-gray-700 mb-2">Enter Your Text</label>
282
+ <textarea id="textInput" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Type your message here..."></textarea>
283
+ </div>
284
+
285
+ <div class="space-y-4">
286
+ <div>
287
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label>
288
+ <select id="fontFamily" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500">
289
+ <option value="Arial, sans-serif">Arial</option>
290
+ <option value="'Times New Roman', serif">Times New Roman</option>
291
+ <option value="'Courier New', monospace">Courier New</option>
292
+ <option value="'Brush Script MT', cursive">Brush Script</option>
293
+ <option value="'Comic Sans MS', cursive">Comic Sans</option>
294
+ </select>
295
+ </div>
296
+
297
+ <div>
298
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Size: <span id="fontSizeValue">24</span>px</label>
299
+ <input type="range" id="fontSize" min="10" max="72" value="24" class="w-full slider-thumb">
300
+ </div>
301
+
302
+ <div>
303
+ <label class="block text-sm font-medium text-gray-700 mb-1">Text Color</label>
304
+ <input type="color" id="textColor" value="#000000" class="w-12 h-10 cursor-pointer">
305
+ </div>
306
+
307
+ <div class="flex items-center space-x-4">
308
+ <button onclick="applyGradient()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
309
+ Gradient Text
310
+ </button>
311
+
312
+ <button onclick="applyShadow()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
313
+ Add Shadow
314
+ </button>
315
+
316
+ <button onclick="applyTypewriter()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
317
+ Typewriter Effect
318
+ </button>
319
+ </div>
320
+
321
+ <button onclick="resetText()" class="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 transition">
322
+ Reset Text
323
+ </button>
324
+
325
+ <button onclick="downloadText()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
326
+ <i class="fas fa-download mr-2"></i>Download as Image
327
+ </button>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="flex justify-center items-center">
332
+ <div class="border-2 border-dashed border-gray-300 rounded-xl p-6 w-full min-h-48 flex items-center justify-center bg-white">
333
+ <div id="textPreview" class="text-center max-w-full break-words">
334
+ <p class="text-gray-400">Your styled text will appear here</p>
335
+ </div>
336
+ </div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <!-- Mini Video Editor Tool -->
342
+ <div id="video-editor-tool" class="tool-card rounded-2xl p-6 hidden">
343
+ <h2 class="text-2xl font-bold mb-4 text-blue-700 flex items-center">
344
+ <i class="fas fa-video mr-3"></i> Mini Video Editor
345
+ </h2>
346
+
347
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
348
+ <div>
349
+ <div class="mb-4">
350
+ <label class="block text-sm font-medium text-gray-700 mb-2">Upload Video</label>
351
+ <input type="file" id="videoUpload" accept="video/*" class="block w-full text-sm text-gray-500
352
+ file:mr-4 file:py-2 file:px-4
353
+ file:rounded-lg file:border-0
354
+ file:text-sm file:font-semibold
355
+ file:bg-blue-50 file:text-blue-700
356
+ hover:file:bg-blue-100">
357
+ </div>
358
+
359
+ <div class="space-y-4">
360
+ <div>
361
+ <label class="block text-sm font-medium text-gray-700 mb-1">Start Time: <span id="startTimeValue">0</span>s</label>
362
+ <input type="range" id="startTime" min="0" max="100" value="0" class="w-full slider-thumb">
363
+ </div>
364
+
365
+ <div>
366
+ <label class="block text-sm font-medium text-gray-700 mb-1">End Time: <span id="endTimeValue">100</span>s</label>
367
+ <input type="range" id="endTime" min="0" max="100" value="100" class="w-full slider-thumb">
368
+ </div>
369
+
370
+ <div>
371
+ <label class="block text-sm font-medium text-gray-700 mb-2">Add Background Music</label>
372
+ <input type="file" id="bgMusicUpload" accept="audio/*" class="block w-full text-sm text-gray-500
373
+ file:mr-4 file:py-2 file:px-4
374
+ file:rounded-lg file:border-0
375
+ file:text-sm file:font-semibold
376
+ file:bg-blue-50 file:text-blue-700
377
+ hover:file:bg-blue-100">
378
+ </div>
379
+
380
+ <div class="flex items-center space-x-4">
381
+ <button onclick="simulateExport()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
382
+ <i class="fas fa-file-export mr-2"></i>Export Video
383
+ </button>
384
+ </div>
385
+ </div>
386
+ </div>
387
+
388
+ <div class="flex justify-center items-center">
389
+ <div class="border-2 border-dashed border-gray-300 rounded-xl overflow-hidden w-full">
390
+ <video id="videoPreview" controls class="w-full max-h-96 bg-black hidden"></video>
391
+ <div id="videoPlaceholder" class="p-8 text-center text-gray-500">
392
+ <i class="fas fa-video fa-3x mb-4"></i>
393
+ <p>Upload a video to edit</p>
394
+ </div>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </main>
401
+
402
+ <!-- Footer -->
403
+ <footer class="text-center py-6 text-gray-600">
404
+ <p class="text-lg">Made with <i class="fas fa-heart text-red-500"></i> by Big Daddy</p>
405
+ <p class="text-sm mt-1">© 2023 Big Daddy's Dream Studio. All dreams reserved.</p>
406
+ </footer>
407
+
408
+ <script>
409
+ // Show initial tool
410
+ document.addEventListener('DOMContentLoaded', function() {
411
+ showTool('handwriting');
412
+ initCanvas();
413
+ setupEventListeners();
414
+
415
+ // Typewriter effect for welcome text
416
+ setTimeout(() => {
417
+ document.querySelector('.typewriter').style.animation = 'none';
418
+ setTimeout(() => {
419
+ document.querySelector('.typewriter').style.animation = '';
420
+ }, 10);
421
+ }, 3500);
422
+ });
423
+
424
+ // Tool navigation
425
+ function showTool(toolId) {
426
+ // Hide all tools
427
+ document.querySelectorAll('[id$="-tool"]').forEach(tool => {
428
+ tool.classList.add('hidden');
429
+ });
430
+
431
+ // Show selected tool
432
+ document.getElementById(`${toolId}-tool`).classList.remove('hidden');
433
+
434
+ // Update active tab
435
+ document.querySelectorAll('.nav-tab').forEach(tab => {
436
+ tab.classList.remove('active');
437
+ tab.classList.remove('bg-indigo-100', 'text-indigo-700');
438
+ tab.classList.remove('bg-pink-100', 'text-pink-700');
439
+ tab.classList.remove('bg-purple-100', 'text-purple-700');
440
+ tab.classList.remove('bg-blue-100', 'text-blue-700');
441
+ });
442
+
443
+ const activeTab = document.querySelector(`[onclick="showTool('${toolId}')"]`);
444
+ activeTab.classList.add('active');
445
+
446
+ // Set color based on tool
447
+ if (toolId === 'handwriting') {
448
+ activeTab.classList.add('bg-indigo-100', 'text-indigo-700');
449
+ } else if (toolId === 'image-effects') {
450
+ activeTab.classList.add('bg-pink-100', 'text-pink-700');
451
+ } else if (toolId === 'text-styler') {
452
+ activeTab.classList.add('bg-purple-100', 'text-purple-700');
453
+ } else if (toolId === 'video-editor') {
454
+ activeTab.classList.add('bg-blue-100', 'text-blue-700');
455
+ }
456
+ }
457
+
458
+ // Background music toggle
459
+ const audioToggle = document.getElementById('audioToggle');
460
+ const bgMusic = document.getElementById('bgMusic');
461
+
462
+ audioToggle.addEventListener('click', function() {
463
+ if (bgMusic.paused) {
464
+ bgMusic.play();
465
+ audioToggle.innerHTML = '<i class="fas fa-volume-up"></i>';
466
+ } else {
467
+ bgMusic.pause();
468
+ audioToggle.innerHTML = '<i class="fas fa-volume-mute"></i>';
469
+ }
470
+ });
471
+
472
+ // Canvas Drawing Functionality
473
+ function initCanvas() {
474
+ const canvas = document.getElementById('canvas');
475
+ const ctx = canvas.getContext('2d');
476
+ let isDrawing = false;
477
+
478
+ // Adjust canvas size for high DPI displays
479
+ function resizeCanvas() {
480
+ const ratio = window.devicePixelRatio || 1;
481
+ canvas.width = canvas.offsetWidth * ratio;
482
+ canvas.height = canvas.offsetHeight * ratio;
483
+ ctx.scale(ratio, ratio);
484
+ }
485
+
486
+ resizeCanvas();
487
+ window.addEventListener('resize', resizeCanvas);
488
+
489
+ // Drawing functions
490
+ function startDrawing(e) {
491
+ isDrawing = true;
492
+ draw(e);
493
+ }
494
+
495
+ function stopDrawing() {
496
+ isDrawing = false;
497
+ ctx.beginPath();
498
+ }
499
+
500
+ function draw(e) {
501
+ if (!isDrawing) return;
502
+
503
+ ctx.lineWidth = document.getElementById('penSize').value;
504
+ ctx.lineCap = 'round';
505
+ ctx.strokeStyle = document.getElementById('penColor').value;
506
+
507
+ // Get position (mouse or touch)
508
+ let x, y;
509
+ if (e.type.includes('touch')) {
510
+ const rect = canvas.getBoundingClientRect();
511
+ x = e.touches[0].clientX - rect.left;
512
+ y = e.touches[0].clientY - rect.top;
513
+ } else {
514
+ x = e.offsetX;
515
+ y = e.offsetY;
516
+ }
517
+
518
+ ctx.lineTo(x, y);
519
+ ctx.stroke();
520
+ ctx.beginPath();
521
+ ctx.moveTo(x, y);
522
+ }
523
+
524
+ // Event listeners
525
+ canvas.addEventListener('mousedown', startDrawing);
526
+ canvas.addEventListener('mousemove', draw);
527
+ canvas.addEventListener('mouseup', stopDrawing);
528
+ canvas.addEventListener('mouseout', stopDrawing);
529
+
530
+ // Touch support
531
+ canvas.addEventListener('touchstart', function(e) {
532
+ e.preventDefault();
533
+ startDrawing(e);
534
+ });
535
+
536
+ canvas.addEventListener('touchmove', function(e) {
537
+ e.preventDefault();
538
+ draw(e);
539
+ });
540
+
541
+ canvas.addEventListener('touchend', stopDrawing);
542
+ }
543
+
544
+ function clearCanvas() {
545
+ const canvas = document.getElementById('canvas');
546
+ const ctx = canvas.getContext('2d');
547
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
548
+ }
549
+
550
+ function saveCanvas() {
551
+ const canvas = document.getElementById('canvas');
552
+ const link = document.createElement('a');
553
+ link.download = 'big-daddy-drawing.png';
554
+ link.href = canvas.toDataURL('image/png');
555
+ link.click();
556
+ }
557
+
558
+ // Image Effects Functionality
559
+ function setupEventListeners() {
560
+ // Pen size value display
561
+ document.getElementById('penSize').addEventListener('input', function() {
562
+ document.getElementById('penSizeValue').textContent = this.value + 'px';
563
+ });
564
+
565
+ // Image upload and effects
566
+ document.getElementById('imageUpload').addEventListener('change', function(e) {
567
+ const file = e.target.files[0];
568
+ if (file) {
569
+ const reader = new FileReader();
570
+ reader.onload = function(event) {
571
+ const img = document.getElementById('imagePreview');
572
+ img.src = event.target.result;
573
+ img.classList.remove('hidden');
574
+ document.getElementById('imagePlaceholder').classList.add('hidden');
575
+
576
+ // Store original image
577
+ img.dataset.original = event.target.result;
578
+
579
+ // Reset all effects
580
+ resetImage();
581
+ };
582
+ reader.readAsDataURL(file);
583
+ }
584
+ });
585
+
586
+ // Image effect sliders
587
+ document.getElementById('brightness').addEventListener('input', function() {
588
+ document.getElementById('brightnessValue').textContent = this.value;
589
+ applyImageEffects();
590
+ });
591
+
592
+ document.getElementById('contrast').addEventListener('input', function() {
593
+ document.getElementById('contrastValue').textContent = this.value;
594
+ applyImageEffects();
595
+ });
596
+
597
+ document.getElementById('blur').addEventListener('input', function() {
598
+ document.getElementById('blurValue').textContent = this.value;
599
+ applyImageEffects();
600
+ });
601
+
602
+ // Text styler
603
+ document.getElementById('textInput').addEventListener('input', updateTextPreview);
604
+ document.getElementById('fontFamily').addEventListener('change', updateTextPreview);
605
+ document.getElementById('fontSize').addEventListener('input', function() {
606
+ document.getElementById('fontSizeValue').textContent = this.value;
607
+ updateTextPreview();
608
+ });
609
+ document.getElementById('textColor').addEventListener('input', updateTextPreview);
610
+
611
+ // Video editor
612
+ document.getElementById('videoUpload').addEventListener('change', function(e) {
613
+ const file = e.target.files[0];
614
+ if (file) {
615
+ const video = document.getElementById('videoPreview');
616
+ video.src = URL.createObjectURL(file);
617
+ video.classList.remove('hidden');
618
+ document.getElementById('videoPlaceholder').classList.add('hidden');
619
+
620
+ // Set max duration when metadata is loaded
621
+ video.onloadedmetadata = function() {
622
+ const duration = Math.floor(video.duration);
623
+ document.getElementById('startTime').max = duration;
624
+ document.getElementById('endTime').max = duration;
625
+ document.getElementById('endTime').value = duration;
626
+ document.getElementById('endTimeValue').textContent = duration;
627
+ };
628
+ }
629
+ });
630
+
631
+ document.getElementById('startTime').addEventListener('input', function() {
632
+ document.getElementById('startTimeValue').textContent = this.value;
633
+ updateVideoPreview();
634
+ });
635
+
636
+ document.getElementById('endTime').addEventListener('input', function() {
637
+ document.getElementById('endTimeValue').textContent = this.value;
638
+ updateVideoPreview();
639
+ });
640
+ }
641
+
642
+ function applyImageEffects() {
643
+ const img = document.getElementById('imagePreview');
644
+ if (!img.src) return;
645
+
646
+ const brightness = document.getElementById('brightness').value;
647
+ const contrast = document.getElementById('contrast').value;
648
+ const blur = document.getElementById('blur').value;
649
+
650
+ img.style.filter = `brightness(${brightness}%) contrast(${contrast}%) blur(${blur}px)`;
651
+ }
652
+
653
+ function applyGrayscale() {
654
+ const img = document.getElementById('imagePreview');
655
+ if (!img.src) return;
656
+
657
+ if (img.style.filter.includes('grayscale')) {
658
+ img.style.filter = img.style.filter.replace(' grayscale(1)', '');
659
+ } else {
660
+ img.style.filter += ' grayscale(1)';
661
+ }
662
+ }
663
+
664
+ function applySepia() {
665
+ const img = document.getElementById('imagePreview');
666
+ if (!img.src) return;
667
+
668
+ if (img.style.filter.includes('sepia')) {
669
+ img.style.filter = img.style.filter.replace(' sepia(1)', '');
670
+ } else {
671
+ img.style.filter += ' sepia(1)';
672
+ }
673
+ }
674
+
675
+ function toggleFloralBorder() {
676
+ const imgContainer = document.getElementById('imagePreview').parentElement;
677
+ imgContainer.classList.toggle('floral-border');
678
+ }
679
+
680
+ function resetImage() {
681
+ const img = document.getElementById('imagePreview');
682
+ if (img.dataset.original) {
683
+ img.src = img.dataset.original;
684
+ }
685
+ img.style.filter = '';
686
+ document.getElementById('brightness').value = 100;
687
+ document.getElementById('brightnessValue').textContent = '100';
688
+ document.getElementById('contrast').value = 100;
689
+ document.getElementById('contrastValue').textContent = '100';
690
+ document.getElementById('blur').value = 0;
691
+ document.getElementById('blurValue').textContent = '0';
692
+ img.parentElement.classList.remove('floral-border');
693
+ }
694
+
695
+ function downloadImage() {
696
+ const img = document.getElementById('imagePreview');
697
+ if (!img.src) {
698
+ alert('Please upload an image first');
699
+ return;
700
+ }
701
+
702
+ // Create a canvas to apply all effects (including CSS filters)
703
+ const canvas = document.createElement('canvas');
704
+ const ctx = canvas.getContext('2d');
705
+ canvas.width = img.naturalWidth;
706
+ canvas.height = img.naturalHeight;
707
+
708
+ // Apply CSS filters to canvas
709
+ ctx.filter = window.getComputedStyle(img).filter;
710
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
711
+
712
+ // For floral border (would need more complex implementation for actual border)
713
+
714
+ const link = document.createElement('a');
715
+ link.download = 'big-daddy-image.png';
716
+ link.href = canvas.toDataURL('image/png');
717
+ link.click();
718
+ }
719
+
720
+ // Text Styler Functionality
721
+ function updateTextPreview() {
722
+ const text = document.getElementById('textInput').value;
723
+ const preview = document.getElementById('textPreview');
724
+
725
+ if (!text.trim()) {
726
+ preview.innerHTML = '<p class="text-gray-400">Your styled text will appear here</p>';
727
+ return;
728
+ }
729
+
730
+ const fontFamily = document.getElementById('fontFamily').value;
731
+ const fontSize = document.getElementById('fontSize').value + 'px';
732
+ const color = document.getElementById('textColor').value;
733
+
734
+ preview.innerHTML = text;
735
+ preview.style.fontFamily = fontFamily;
736
+ preview.style.fontSize = fontSize;
737
+ preview.style.color = color;
738
+
739
+ // Remove previous effects
740
+ preview.classList.remove('gradient-text');
741
+ preview.style.textShadow = '';
742
+ preview.classList.remove('typewriter');
743
+ }
744
+
745
+ function applyGradient() {
746
+ const preview = document.getElementById('textPreview');
747
+ preview.classList.add('gradient-text');
748
+ }
749
+
750
+ function applyShadow() {
751
+ const preview = document.getElementById('textPreview');
752
+ preview.style.textShadow = '2px 2px 4px rgba(0,0,0,0.3)';
753
+ }
754
+
755
+ function applyTypewriter() {
756
+ const preview = document.getElementById('textPreview');
757
+ preview.classList.add('typewriter');
758
+ }
759
+
760
+ function resetText() {
761
+ document.getElementById('textInput').value = '';
762
+ document.getElementById('fontFamily').value = 'Arial, sans-serif';
763
+ document.getElementById('fontSize').value = 24;
764
+ document.getElementById('fontSizeValue').textContent = '24';
765
+ document.getElementById('textColor').value = '#000000';
766
+ updateTextPreview();
767
+ }
768
+
769
+ function downloadText() {
770
+ const preview = document.getElementById('textPreview');
771
+ if (preview.textContent === 'Your styled text will appear here') {
772
+ alert('Please enter some text first');
773
+ return;
774
+ }
775
+
776
+ // Create a canvas to render the text
777
+ const canvas = document.createElement('canvas');
778
+ const ctx = canvas.getContext('2d');
779
+
780
+ // Set canvas size based on text dimensions
781
+ const styles = window.getComputedStyle(preview);
782
+ ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
783
+ const textWidth = ctx.measureText(preview.textContent).width;
784
+
785
+ canvas.width = textWidth + 40; // Add padding
786
+ canvas.height = parseInt(styles.fontSize) * 2; // Approximate height
787
+
788
+ // Fill background
789
+ ctx.fillStyle = 'white';
790
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
791
+
792
+ // Apply text styles
793
+ ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
794
+
795
+ // Check for gradient text
796
+ if (preview.classList.contains('gradient-text')) {
797
+ const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
798
+ gradient.addColorStop(0, '#6366f1');
799
+ gradient.addColorStop(0.5, '#a855f7');
800
+ gradient.addColorStop(1, '#ec4899');
801
+ ctx.fillStyle = gradient;
802
+ } else {
803
+ ctx.fillStyle = styles.color;
804
+ }
805
+
806
+ // Apply shadow if exists
807
+ if (preview.style.textShadow) {
808
+ const shadow = preview.style.textShadow.split(' ');
809
+ ctx.shadowColor = shadow[3].replace(/[rgba()]/g, '');
810
+ ctx.shadowOffsetX = parseInt(shadow[0]);
811
+ ctx.shadowOffsetY = parseInt(shadow[1]);
812
+ ctx.shadowBlur = parseInt(shadow[2]);
813
+ }
814
+
815
+ // Draw text
816
+ ctx.textAlign = 'center';
817
+ ctx.textBaseline = 'middle';
818
+ ctx.fillText(preview.textContent, canvas.width / 2, canvas.height / 2);
819
+
820
+ const link = document.createElement('a');
821
+ link.download = 'big-daddy-text.png';
822
+ link.href = canvas.toDataURL('image/png');
823
+ link.click();
824
+ }
825
+
826
+ // Video Editor Functionality
827
+ function updateVideoPreview() {
828
+ const video = document.getElementById('videoPreview');
829
+ if (!video.src) return;
830
+
831
+ const startTime = document.getElementById('startTime').value;
832
+ const endTime = document.getElementById('endTime').value;
833
+
834
+ // In a real app, we would trim the video here
835
+ // This is just a UI demo
836
+ }
837
+
838
+ function simulateExport() {
839
+ const video = document.getElementById('videoPreview');
840
+ if (!video.src) {
841
+ alert('Please upload a video first');
842
+ return;
843
+ }
844
+
845
+ alert('Video export started! In a real application, this would process the video with the selected trim points and background music.');
846
+ }
847
+ </script>
848
+ <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=jasvir-singh1021/big-daddy-studio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
849
+ </html>