Hugging Face's logo

Spaces:
THEMONEYHOLLIC
/
Drawing-board
Running

App Files Community
bangis commited on
Commit
751b4b7
·
verified ·
1 Parent(s): bab4a70

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +1086 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Drawing Board
3
- emoji: 💻
4
- colorFrom: red
5
  colorTo: blue
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: drawing-board
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
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,1086 @@
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>AI Drawing Board Pro</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #6C5CE7;
11
+ --secondary: #00CEFF;
12
+ --dark: #2D3436;
13
+ --light: #F5F6FA;
14
+ --accent: #FD79A8;
15
+ --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
16
+ --transition: all 0.3s ease;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: var(--light);
28
+ color: var(--dark);
29
+ overflow: hidden;
30
+ height: 100vh;
31
+ display: grid;
32
+ grid-template-rows: auto 1fr auto;
33
+ }
34
+
35
+ header {
36
+ background-color: white;
37
+ padding: 1rem 2rem;
38
+ display: flex;
39
+ justify-content: space-between;
40
+ align-items: center;
41
+ box-shadow: var(--shadow);
42
+ z-index: 10;
43
+ }
44
+
45
+ .logo {
46
+ display: flex;
47
+ align-items: center;
48
+ gap: 0.5rem;
49
+ font-weight: 700;
50
+ font-size: 1.3rem;
51
+ color: var(--primary);
52
+ }
53
+
54
+ .logo i {
55
+ font-size: 1.5rem;
56
+ }
57
+
58
+ .user-actions {
59
+ display: flex;
60
+ gap: 1rem;
61
+ align-items: center;
62
+ }
63
+
64
+ .btn {
65
+ padding: 0.6rem 1rem;
66
+ border-radius: 6px;
67
+ border: none;
68
+ font-weight: 600;
69
+ cursor: pointer;
70
+ transition: var(--transition);
71
+ display: flex;
72
+ align-items: center;
73
+ gap: 0.5rem;
74
+ }
75
+
76
+ .btn-primary {
77
+ background-color: var(--primary);
78
+ color: white;
79
+ }
80
+
81
+ .btn-primary:hover {
82
+ background-color: #5344d4;
83
+ transform: translateY(-2px);
84
+ }
85
+
86
+ .btn-outline {
87
+ background-color: transparent;
88
+ border: 2px solid var(--primary);
89
+ color: var(--primary);
90
+ }
91
+
92
+ .btn-outline:hover {
93
+ background-color: var(--primary);
94
+ color: white;
95
+ }
96
+
97
+ .main-content {
98
+ display: grid;
99
+ grid-template-columns: 70px 1fr 250px;
100
+ height: 100%;
101
+ overflow: hidden;
102
+ }
103
+
104
+ .toolbar {
105
+ background-color: white;
106
+ display: flex;
107
+ flex-direction: column;
108
+ align-items: center;
109
+ padding: 1.5rem 0.5rem;
110
+ gap: 1.5rem;
111
+ box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05);
112
+ z-index: 5;
113
+ }
114
+
115
+ .tool-btn {
116
+ width: 45px;
117
+ height: 45px;
118
+ border-radius: 8px;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ cursor: pointer;
123
+ transition: var(--transition);
124
+ color: var(--dark);
125
+ position: relative;
126
+ }
127
+
128
+ .tool-btn:hover {
129
+ background-color: var(--light);
130
+ color: var(--primary);
131
+ }
132
+
133
+ .tool-btn.active {
134
+ background-color: var(--primary);
135
+ color: white;
136
+ }
137
+
138
+ .tooltip {
139
+ position: absolute;
140
+ left: 55px;
141
+ background-color: var(--dark);
142
+ color: white;
143
+ padding: 0.5rem 1rem;
144
+ border-radius: 6px;
145
+ font-size: 0.9rem;
146
+ opacity: 0;
147
+ pointer-events: none;
148
+ transition: var(--transition);
149
+ white-space: nowrap;
150
+ }
151
+
152
+ .tool-btn:hover .tooltip {
153
+ opacity: 1;
154
+ }
155
+
156
+ .canvas-container {
157
+ position: relative;
158
+ overflow: hidden;
159
+ background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
160
+ linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
161
+ linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
162
+ linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
163
+ background-size: 20px 20px;
164
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
165
+ }
166
+
167
+ canvas {
168
+ position: absolute;
169
+ top: 0;
170
+ left: 0;
171
+ cursor: crosshair;
172
+ }
173
+
174
+ .text-input-container {
175
+ position: absolute;
176
+ display: none;
177
+ background: transparent;
178
+ border: none;
179
+ outline: none;
180
+ font-family: inherit;
181
+ font-size: 16px;
182
+ padding: 0;
183
+ margin: 0;
184
+ color: var(--dark);
185
+ }
186
+
187
+ .ai-panel {
188
+ background-color: white;
189
+ padding: 1.5rem;
190
+ display: flex;
191
+ flex-direction: column;
192
+ gap: 1.5rem;
193
+ box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05);
194
+ z-index: 5;
195
+ overflow-y: auto;
196
+ }
197
+
198
+ .panel-section {
199
+ display: flex;
200
+ flex-direction: column;
201
+ gap: 0.7rem;
202
+ }
203
+
204
+ .panel-title {
205
+ font-weight: 600;
206
+ color: var(--primary);
207
+ display: flex;
208
+ align-items: center;
209
+ gap: 0.5rem;
210
+ }
211
+
212
+ .panel-title i {
213
+ font-size: 0.9rem;
214
+ }
215
+
216
+ .color-picker {
217
+ display: flex;
218
+ flex-wrap: wrap;
219
+ gap: 0.5rem;
220
+ }
221
+
222
+ .color-option {
223
+ width: 25px;
224
+ height: 25px;
225
+ border-radius: 50%;
226
+ cursor: pointer;
227
+ border: 2px solid #eee;
228
+ transition: var(--transition);
229
+ }
230
+
231
+ .color-option:hover {
232
+ transform: scale(1.1);
233
+ }
234
+
235
+ .brush-size {
236
+ display: flex;
237
+ flex-direction: column;
238
+ gap: 0.5rem;
239
+ }
240
+
241
+ .slider {
242
+ -webkit-appearance: none;
243
+ width: 100%;
244
+ height: 6px;
245
+ border-radius: 3px;
246
+ background: #ddd;
247
+ outline: none;
248
+ }
249
+
250
+ .slider::-webkit-slider-thumb {
251
+ -webkit-appearance: none;
252
+ appearance: none;
253
+ width: 16px;
254
+ height: 16px;
255
+ border-radius: 50%;
256
+ background: var(--primary);
257
+ cursor: pointer;
258
+ }
259
+
260
+ .font-selector {
261
+ width: 100%;
262
+ padding: 0.5rem;
263
+ border-radius: 6px;
264
+ border: 1px solid #ddd;
265
+ font-size: 0.9rem;
266
+ }
267
+
268
+ .font-size-selector {
269
+ display: flex;
270
+ gap: 0.5rem;
271
+ align-items: center;
272
+ }
273
+
274
+ .font-size-selector input {
275
+ width: 60px;
276
+ padding: 0.3rem;
277
+ border-radius: 4px;
278
+ border: 1px solid #ddd;
279
+ }
280
+
281
+ .layer {
282
+ display: flex;
283
+ align-items: center;
284
+ justify-content: space-between;
285
+ padding: 0.5rem;
286
+ border-radius: 6px;
287
+ cursor: pointer;
288
+ }
289
+
290
+ .layer:hover {
291
+ background-color: var(--light);
292
+ }
293
+
294
+ .layer.active {
295
+ background-color: var(--light);
296
+ border-left: 3px solid var(--primary);
297
+ }
298
+
299
+ .layer-controls {
300
+ display: flex;
301
+ gap: 0.5rem;
302
+ opacity: 0;
303
+ transition: var(--transition);
304
+ }
305
+
306
+ .layer:hover .layer-controls {
307
+ opacity: 1;
308
+ }
309
+
310
+ .ai-suggestion {
311
+ background-color: var(--light);
312
+ border-radius: 8px;
313
+ padding: 1rem;
314
+ margin-bottom: 1rem;
315
+ cursor: pointer;
316
+ transition: var(--transition);
317
+ }
318
+
319
+ .ai-suggestion:hover {
320
+ background-color: #e2e2ff;
321
+ }
322
+
323
+ .ai-suggestion h4 {
324
+ color: var(--primary);
325
+ margin-bottom: 0.5rem;
326
+ font-size: 0.9rem;
327
+ }
328
+
329
+ .ai-suggestion p {
330
+ font-size: 0.8rem;
331
+ color: #666;
332
+ }
333
+
334
+ footer {
335
+ background-color: white;
336
+ padding: 0.8rem;
337
+ display: flex;
338
+ justify-content: space-between;
339
+ align-items: center;
340
+ font-size: 0.9rem;
341
+ box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.05);
342
+ }
343
+
344
+ .zoom-controls {
345
+ display: flex;
346
+ align-items: center;
347
+ gap: 0.5rem;
348
+ }
349
+
350
+ .zoom-btn {
351
+ width: 30px;
352
+ height: 30px;
353
+ border-radius: 50%;
354
+ display: flex;
355
+ align-items: center;
356
+ justify-content: center;
357
+ background-color: var(--light);
358
+ cursor: pointer;
359
+ transition: var(--transition);
360
+ }
361
+
362
+ .zoom-btn:hover {
363
+ background-color: #ddd;
364
+ }
365
+
366
+ .status-info {
367
+ display: flex;
368
+ gap: 1rem;
369
+ }
370
+
371
+ .status-item {
372
+ display: flex;
373
+ align-items: center;
374
+ gap: 0.3rem;
375
+ color: #666;
376
+ font-size: 0.8rem;
377
+ }
378
+
379
+ .ai-assistant-toggle {
380
+ position: fixed;
381
+ bottom: 20px;
382
+ right: 20px;
383
+ background-color: var(--primary);
384
+ color: white;
385
+ width: 60px;
386
+ height: 60px;
387
+ border-radius: 50%;
388
+ display: flex;
389
+ align-items: center;
390
+ justify-content: center;
391
+ cursor: pointer;
392
+ box-shadow: var(--shadow);
393
+ transition: var(--transition);
394
+ z-index: 100;
395
+ }
396
+
397
+ .ai-assistant-toggle:hover {
398
+ transform: scale(1.1);
399
+ background-color: #5344d4;
400
+ }
401
+
402
+ .context-menu {
403
+ position: absolute;
404
+ background-color: white;
405
+ border-radius: 8px;
406
+ box-shadow: var(--shadow);
407
+ z-index: 1000;
408
+ display: none;
409
+ flex-direction: column;
410
+ min-width: 200px;
411
+ overflow: hidden;
412
+ }
413
+
414
+ .menu-item {
415
+ padding: 0.8rem 1rem;
416
+ cursor: pointer;
417
+ display: flex;
418
+ align-items: center;
419
+ gap: 0.7rem;
420
+ transition: var(--transition);
421
+ }
422
+
423
+ .menu-item:hover {
424
+ background-color: var(--light);
425
+ }
426
+
427
+ .ai-generation-popup {
428
+ position: fixed;
429
+ top: 50%;
430
+ left: 50%;
431
+ transform: translate(-50%, -50%);
432
+ background-color: white;
433
+ border-radius: 12px;
434
+ box-shadow: var(--shadow);
435
+ padding: 2rem;
436
+ z-index: 1000;
437
+ width: 90%;
438
+ max-width: 600px;
439
+ display: none;
440
+ flex-direction: column;
441
+ gap: 1.5rem;
442
+ }
443
+
444
+ .ai-generation-header {
445
+ display: flex;
446
+ justify-content: space-between;
447
+ align-items: center;
448
+ }
449
+
450
+ .ai-generation-body {
451
+ display: grid;
452
+ grid-template-columns: repeat(3, 1fr);
453
+ gap: 1rem;
454
+ }
455
+
456
+ .ai-option {
457
+ border-radius: 8px;
458
+ overflow: hidden;
459
+ cursor: pointer;
460
+ transition: var(--transition);
461
+ border: 2px solid #eee;
462
+ }
463
+
464
+ .ai-option:hover {
465
+ border-color: var(--primary);
466
+ transform: translateY(-5px);
467
+ }
468
+
469
+ .ai-option-image {
470
+ height: 120px;
471
+ background-color: var(--light);
472
+ position: relative;
473
+ overflow: hidden;
474
+ }
475
+
476
+ .ai-option-label {
477
+ padding: 0.8rem;
478
+ background-color: white;
479
+ font-size: 0.9rem;
480
+ text-align: center;
481
+ font-weight: 500;
482
+ }
483
+ </style>
484
+ </head>
485
+ <body>
486
+ <header>
487
+ <div class="logo">
488
+ <i class="fas fa-magic"></i>
489
+ <span>AI Drawing Board Pro</span>
490
+ </div>
491
+ <div class="user-actions">
492
+ <button class="btn btn-outline">
493
+ <i class="fas fa-cloud-upload-alt"></i>
494
+ Save
495
+ </button>
496
+ <button class="btn btn-primary">
497
+ <i class="fas fa-share-alt"></i>
498
+ Export
499
+ </button>
500
+ </div>
501
+ </header>
502
+
503
+ <div class="main-content">
504
+ <div class="toolbar">
505
+ <div class="tool-btn" id="brushToolBtn">
506
+ <i class="fas fa-pen"></i>
507
+ <div class="tooltip">Brush (B)</div>
508
+ </div>
509
+ <div class="tool-btn" id="eraserToolBtn">
510
+ <i class="fas fa-eraser"></i>
511
+ <div class="tooltip">Eraser (E)</div>
512
+ </div>
513
+ <div class="tool-btn" id="lineToolBtn">
514
+ <i class="fas fa-slash"></i>
515
+ <div class="tooltip">Line (L)</div>
516
+ </div>
517
+ <div class="tool-btn" id="rectangleToolBtn">
518
+ <i class="fas fa-square"></i>
519
+ <div class="tooltip">Rectangle (R)</div>
520
+ </div>
521
+ <div class="tool-btn" id="circleToolBtn">
522
+ <i class="fas fa-circle"></i>
523
+ <div class="tooltip">Circle (C)</div>
524
+ </div>
525
+ <div class="tool-btn" id="textToolBtn">
526
+ <i class="fas fa-font"></i>
527
+ <div class="tooltip">Text (T)</div>
528
+ </div>
529
+ <div class="tool-btn">
530
+ <i class="fas fa-cut"></i>
531
+ <div class="tooltip">Crop (X)</div>
532
+ </div>
533
+ <div class="tool-btn">
534
+ <i class="fas fa-magic"></i>
535
+ <div class="tooltip">AI Enhance (A)</div>
536
+ </div>
537
+ <div class="tool-btn">
538
+ <i class="fas fa-object-group"></i>
539
+ <div class="tooltip">Shapes (S)</div>
540
+ </div>
541
+ <div class="tool-btn">
542
+ <i class="fas fa-fill-drip"></i>
543
+ <div class="tooltip">Fill (G)</div>
544
+ </div>
545
+ <div class="tool-btn">
546
+ <i class="fas fa-vector-square"></i>
547
+ <div class="tooltip">Select (V)</div>
548
+ </div>
549
+ <div class="tool-btn">
550
+ <i class="fas fa-eye-dropper"></i>
551
+ <div class="tooltip">Color Picker (I)</div>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="canvas-container">
556
+ <canvas id="main-canvas"></canvas>
557
+ <div class="text-input-container" id="textInputContainer" contenteditable="true"></div>
558
+
559
+ <div class="ai-generation-popup" id="aiGenerationPopup">
560
+ <div class="ai-generation-header">
561
+ <h3>AI Generation Options</h3>
562
+ <i class="fas fa-times" id="closeAiPopup"></i>
563
+ </div>
564
+ <div class="ai-generation-body">
565
+ <div class="ai-option">
566
+ <div class="ai-option-image"></div>
567
+ <div class="ai-option-label">Background Removal</div>
568
+ </div>
569
+ <div class="ai-option">
570
+ <div class="ai-option-image"></div>
571
+ <div class="ai-option-label">Colorize Sketch</div>
572
+ </div>
573
+ <div class="ai-option">
574
+ <div class="ai-option-image"></div>
575
+ <div class="ai-option-label">Upscale Image</div>
576
+ </div>
577
+ <div class="ai-option">
578
+ <div class="ai-option-image"></div>
579
+ <div class="ai-option-label">Style Transfer</div>
580
+ </div>
581
+ <div class="ai-option">
582
+ <div class="ai-option-image"></div>
583
+ <div class="ai-option-label">Smart Fill</div>
584
+ </div>
585
+ <div class="ai-option">
586
+ <div class="ai-option-image"></div>
587
+ <div class="ai-option-label">Generate Pattern</div>
588
+ </div>
589
+ </div>
590
+ <button class="btn btn-primary">
591
+ <i class="fas fa-magic"></i>
592
+ Generate Variations
593
+ </button>
594
+ </div>
595
+ </div>
596
+
597
+ <div class="ai-panel">
598
+ <div class="panel-section">
599
+ <h3 class="panel-title">
600
+ <i class="fas fa-palette"></i>
601
+ Colors
602
+ </h3>
603
+ <div class="color-picker" id="colorPicker">
604
+ <!-- Colors will be added by JavaScript -->
605
+ </div>
606
+ </div>
607
+
608
+ <div class="panel-section">
609
+ <h3 class="panel-title">
610
+ <i class="fas fa-paint-bbrush"></i>
611
+ Brush Size
612
+ </h3>
613
+ <div class="brush-size">
614
+ <input type="range" min="1" max="50" value="5" class="slider" id="brushSize">
615
+ <div style="text-align: center; font-size: 0.8rem;">5px</div>
616
+ </div>
617
+ </div>
618
+
619
+ <div class="panel-section">
620
+ <h3 class="panel-title">
621
+ <i class="fas fa-font"></i>
622
+ Text Settings
623
+ </h3>
624
+ <select class="font-selector" id="fontFamily">
625
+ <option value="Arial">Arial</option>
626
+ <option value="Verdana">Verdana</option>
627
+ <option value="Georgia">Georgia</option>
628
+ <option value="Times New Roman">Times New Roman</option>
629
+ <option value="Courier New">Courier New</option>
630
+ <option value="Comic Sans MS">Comic Sans MS</option>
631
+ <option value="Impact">Impact</option>
632
+ </select>
633
+ <div class="font-size-selector">
634
+ <input type="number" id="fontSize" value="16" min="8" max="72">
635
+ <span>px</span>
636
+ </div>
637
+ </div>
638
+
639
+ <div class="panel-section">
640
+ <h3 class="panel-title">
641
+ <i class="fas fa-layer-group"></i>
642
+ Layers
643
+ </h3>
644
+ <div class="layers-list" id="layersList">
645
+ <div class="layer active">
646
+ <span>Layer 1</span>
647
+ <div class="layer-controls">
648
+ <i class="fas fa-eye"></i>
649
+ <i class="fas fa-trash-alt"></i>
650
+ </div>
651
+ </div>
652
+ <div class="layer">
653
+ <span>Layer 2</span>
654
+ <div class="layer-controls">
655
+ <i class="fas fa-eye"></i>
656
+ <i class="fas fa-trash-alt"></i>
657
+ </div>
658
+ </div>
659
+ <div class="layer">
660
+ <span>Sketch</span>
661
+ <div class="layer-controls">
662
+ <i class="fas fa-eye"></i>
663
+ <i class="fas fa-trash-alt"></i>
664
+ </div>
665
+ </div>
666
+ </div>
667
+ <button class="btn btn-outline" style="margin-top: 0.5rem;">Add Layer</button>
668
+ </div>
669
+
670
+ <div class="panel-section">
671
+ <h3 class="panel-title">
672
+ <i class="fas fa-robot"></i>
673
+ AI Suggestions
674
+ </h3>
675
+ <div class="ai-suggestions">
676
+ <div class="ai-suggestion">
677
+ <h4>Color Scheme</h4>
678
+ <p>Try this complementary color palette for your design</p>
679
+ </div>
680
+ <div class="ai-suggestion">
681
+ <h4>Composition</h4>
682
+ <p>Consider adding more negative space to improve balance</p>
683
+ </div>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </div>
688
+
689
+ <footer>
690
+ <div class="zoom-controls">
691
+ <div class="zoom-btn" id="zoomOut">
692
+ <i class="fas fa-search-minus"></i>
693
+ </div>
694
+ <span>100%</span>
695
+ <div class="zoom-btn" id="zoomIn">
696
+ <i class="fas fa-search-plus"></i>
697
+ </div>
698
+ </div>
699
+
700
+ <div class="status-info">
701
+ <div class="status-item">
702
+ <i class="fas fa-expand"></i>
703
+ <span>1920x1080px</span>
704
+ </div>
705
+ <div class="status-item">
706
+ <i class="fas fa-tint"></i>
707
+ <span>#6C5CE7</span>
708
+ </div>
709
+ <div class="status-item">
710
+ <i class="fas fa-clock"></i>
711
+ <span>Auto-saved</span>
712
+ </div>
713
+ </div>
714
+ </footer>
715
+
716
+ <div class="ai-assistant-toggle" id="aiAssistant">
717
+ <i class="fas fa-robot fa-lg"></i>
718
+ </div>
719
+
720
+ <div class="context-menu" id="contextMenu">
721
+ <div class="menu-item">
722
+ <i class="fas fa-plus-circle"></i>
723
+ <span>New Layer</span>
724
+ </div>
725
+ <div class="menu-item">
726
+ <i class="fas fa-copy"></i>
727
+ <span>Duplicate</span>
728
+ </div>
729
+ <div class="menu-item">
730
+ <i class="fas fa-trash-alt"></i>
731
+ <span>Delete</span>
732
+ </div>
733
+ <div class="menu-item">
734
+ <i class="fas fa-magic"></i>
735
+ <span>AI Enhance</span>
736
+ </div>
737
+ <div class="menu-item">
738
+ <i class="fas fa-layer-group"></i>
739
+ <span>Merge Down</span>
740
+ </div>
741
+ </div>
742
+
743
+ <script>
744
+ // Initialize canvas
745
+ const canvas = document.getElementById('main-canvas');
746
+ const ctx = canvas.getContext('2d');
747
+ const textInputContainer = document.getElementById('textInputContainer');
748
+
749
+ // Set canvas size
750
+ function resizeCanvas() {
751
+ const container = document.querySelector('.canvas-container');
752
+ canvas.width = container.clientWidth;
753
+ canvas.height = container.clientHeight;
754
+
755
+ // Redraw content here in a real app
756
+ ctx.fillStyle = 'white';
757
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
758
+ }
759
+
760
+ window.addEventListener('resize', resizeCanvas);
761
+ resizeCanvas();
762
+
763
+ // Drawing functionality
764
+ let isDrawing = false;
765
+ let lastX = 0;
766
+ let lastY = 0;
767
+ let brushSize = 5;
768
+ let currentColor = '#6C5CE7';
769
+ let currentTool = 'brush'; // Default to brush tool
770
+ let currentFont = 'Arial';
771
+ let currentFontSize = 16;
772
+
773
+ // Variables for shape drawing
774
+ let startX, startY;
775
+ let isDrawingShape = false;
776
+ let tempCanvas = document.createElement('canvas');
777
+ let tempCtx = tempCanvas.getContext('2d');
778
+ tempCanvas.width = canvas.width;
779
+ tempCanvas.height = canvas.height;
780
+
781
+ // Text tool functionality
782
+ canvas.addEventListener('click', (e) => {
783
+ if (currentTool === 'text') {
784
+ const rect = canvas.getBoundingClientRect();
785
+ const x = e.clientX - rect.left;
786
+ const y = e.clientY - rect.top;
787
+
788
+ textInputContainer.style.display = 'block';
789
+ textInputContainer.style.left = `${x}px`;
790
+ textInputContainer.style.top = `${y}px`;
791
+ textInputContainer.style.color = currentColor;
792
+ textInputContainer.style.fontFamily = currentFont;
793
+ textInputContainer.style.fontSize = `${currentFontSize}px`;
794
+ textInputContainer.focus();
795
+ }
796
+ });
797
+
798
+ textInputContainer.addEventListener('keydown', (e) => {
799
+ if (e.key === 'Enter') {
800
+ finalizeText();
801
+ } else if (e.key === 'Escape') {
802
+ cancelTextInput();
803
+ }
804
+ });
805
+
806
+ textInputContainer.addEventListener('blur', () => {
807
+ finalizeText();
808
+ });
809
+
810
+ function finalizeText() {
811
+ const text = textInputContainer.textContent.trim();
812
+ if (text) {
813
+ const x = parseInt(textInputContainer.style.left);
814
+ const y = parseInt(textInputContainer.style.top) + parseInt(currentFontSize);
815
+
816
+ ctx.fillStyle = textInputContainer.style.color;
817
+ ctx.font = `${currentFontSize}px ${currentFont}`;
818
+ ctx.fillText(text, x, y);
819
+ }
820
+
821
+ cancelTextInput();
822
+ }
823
+
824
+ function cancelTextInput() {
825
+ textInputContainer.style.display = 'none';
826
+ textInputContainer.textContent = '';
827
+ }
828
+
829
+ // Drawing event handlers
830
+ canvas.addEventListener('mousedown', startDrawing);
831
+ canvas.addEventListener('mousemove', draw);
832
+ canvas.addEventListener('mouseup', stopDrawing);
833
+ canvas.addEventListener('mouseout', stopDrawing);
834
+
835
+ function startDrawing(e) {
836
+ if (currentTool === 'text') return;
837
+
838
+ const rect = canvas.getBoundingClientRect();
839
+ startX = e.clientX - rect.left;
840
+ startY = e.clientY - rect.top;
841
+ isDrawing = true;
842
+ [lastX, lastY] = [startX, startY];
843
+
844
+ // For shapes, we'll use a temporary canvas to show the shape while drawing
845
+ if (['rectangle', 'circle', 'line'].includes(currentTool)) {
846
+ isDrawingShape = true;
847
+ tempCanvas.width = canvas.width;
848
+ tempCanvas.height = canvas.height;
849
+ tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
850
+ }
851
+ }
852
+
853
+ function draw(e) {
854
+ if (currentTool === 'text' || !isDrawing) return;
855
+
856
+ const rect = canvas.getBoundingClientRect();
857
+ const currentX = e.clientX - rect.left;
858
+ const currentY = e.clientY - rect.top;
859
+
860
+ if (['rectangle', 'circle', 'line'].includes(currentTool)) {
861
+ // Clear temporary canvas
862
+ tempCtx.clearRect(0, 0, tempCanvas.width, tempCanvas.height);
863
+
864
+ // Draw current shape on temporary canvas
865
+ tempCtx.strokeStyle = currentColor;
866
+ tempCtx.lineWidth = brushSize;
867
+ tempCtx.fillStyle = currentColor;
868
+
869
+ switch (currentTool) {
870
+ case 'rectangle':
871
+ tempCtx.strokeRect(startX, startY, currentX - startX, currentY - startY);
872
+ break;
873
+ case 'circle':
874
+ const radius = Math.sqrt(Math.pow(currentX - startX, 2) + Math.pow(currentY - startY, 2));
875
+ tempCtx.beginPath();
876
+ tempCtx.arc(startX, startY, radius, 0, Math.PI * 2);
877
+ tempCtx.stroke();
878
+ break;
879
+ case 'line':
880
+ tempCtx.beginPath();
881
+ tempCtx.moveTo(startX, startY);
882
+ tempCtx.lineTo(currentX, currentY);
883
+ tempCtx.stroke();
884
+ break;
885
+ }
886
+
887
+ // Draw the temporary canvas onto the main canvas
888
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
889
+ ctx.drawImage(tempCanvas, 0, 0);
890
+ } else {
891
+ // Regular brush/eraser drawing
892
+ ctx.strokeStyle = currentTool === 'eraser' ? 'white' : currentColor;
893
+ ctx.lineJoin = 'round';
894
+ ctx.lineCap = 'round';
895
+ ctx.lineWidth = brushSize;
896
+
897
+ ctx.beginPath();
898
+ ctx.moveTo(lastX, lastY);
899
+ ctx.lineTo(currentX, currentY);
900
+ ctx.stroke();
901
+
902
+ [lastX, lastY] = [currentX, currentY];
903
+ }
904
+ }
905
+
906
+ function stopDrawing() {
907
+ if (isDrawingShape && ['rectangle', 'circle', 'line'].includes(currentTool)) {
908
+ // Finalize the shape
909
+ switch (currentTool) {
910
+ case 'rectangle':
911
+ ctx.strokeStyle = currentColor;
912
+ ctx.lineWidth = brushSize;
913
+ ctx.strokeRect(startX, startY, lastX - startX, lastY - startY);
914
+ break;
915
+ case 'circle':
916
+ const radius = Math.sqrt(Math.pow(lastX - startX, 2) + Math.pow(lastY - startY, 2));
917
+ ctx.strokeStyle = currentColor;
918
+ ctx.lineWidth = brushSize;
919
+ ctx.beginPath();
920
+ ctx.arc(startX, startY, radius, 0, Math.PI * 2);
921
+ ctx.stroke();
922
+ break;
923
+ case 'line':
924
+ ctx.strokeStyle = currentColor;
925
+ ctx.lineWidth = brushSize;
926
+ ctx.beginPath();
927
+ ctx.moveTo(startX, startY);
928
+ ctx.lineTo(lastX, lastY);
929
+ ctx.stroke();
930
+ break;
931
+ }
932
+ }
933
+
934
+ isDrawing = false;
935
+ isDrawingShape = false;
936
+ }
937
+
938
+ // Tool selection
939
+ const toolButtons = document.querySelectorAll('.tool-btn');
940
+ const brushToolBtn = document.getElementById('brushToolBtn');
941
+ const eraserToolBtn = document.getElementById('eraserToolBtn');
942
+ const lineToolBtn = document.getElementById('lineToolBtn');
943
+ const rectangleToolBtn = document.getElementById('rectangleToolBtn');
944
+ const circleToolBtn = document.getElementById('circleToolBtn');
945
+ const textToolBtn = document.getElementById('textToolBtn');
946
+
947
+ function activateTool(button, tool) {
948
+ toolButtons.forEach(btn => btn.classList.remove('active'));
949
+ button.classList.add('active');
950
+ currentTool = tool;
951
+ cancelTextInput();
952
+
953
+ // Set appropriate cursor
954
+ switch (tool) {
955
+ case 'brush':
956
+ canvas.style.cursor = 'crosshair';
957
+ break;
958
+ case 'eraser':
959
+ canvas.style.cursor = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'black\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M3 6h18\'/><path d=\'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\'/><line x1=\'10\' y1=\'11\' x2=\'10\' y2=\'17\'/><line x1=\'14\' y1=\'11\' x2=\'14\' y2=\'17\'/></svg>"), auto';
960
+ break;
961
+ case 'line':
962
+ case 'rectangle':
963
+ case 'circle':
964
+ canvas.style.cursor = 'crosshair';
965
+ break;
966
+ case 'text':
967
+ canvas.style.cursor = 'text';
968
+ break;
969
+ default:
970
+ canvas.style.cursor = 'default';
971
+ }
972
+ }
973
+
974
+ brushToolBtn.addEventListener('click', () => activateTool(brushToolBtn, 'brush'));
975
+ eraserToolBtn.addEventListener('click', () => activateTool(eraserToolBtn, 'eraser'));
976
+ lineToolBtn.addEventListener('click', () => activateTool(lineToolBtn, 'line'));
977
+ rectangleToolBtn.addEventListener('click', () => activateTool(rectangleToolBtn, 'rectangle'));
978
+ circleToolBtn.addEventListener('click', () => activateTool(circleToolBtn, 'circle'));
979
+ textToolBtn.addEventListener('click', () => activateTool(textToolBtn, 'text'));
980
+
981
+ // Start with brush tool active
982
+ activateTool(brushToolBtn, 'brush');
983
+
984
+ // Color picker
985
+ const colors = [
986
+ '#6C5CE7', '#00CEFF', '#00B894', '#FD79A8',
987
+ '#FDCB6E', '#E17055', '#BDC581', '#74B9FF',
988
+ '#2D3436', '#F5F6FA', '#FFFFFF', '#000000'
989
+ ];
990
+
991
+ const colorPicker = document.getElementById('colorPicker');
992
+ colors.forEach(color => {
993
+ const colorOption = document.createElement('div');
994
+ colorOption.className = 'color-option';
995
+ colorOption.style.backgroundColor = color;
996
+ colorOption.addEventListener('click', () => {
997
+ currentColor = color;
998
+ document.querySelector('.status-item:nth-child(2) span').textContent = color;
999
+ });
1000
+ colorPicker.appendChild(colorOption);
1001
+ });
1002
+
1003
+ // Brush size
1004
+ const brushSizeSlider = document.getElementById('brushSize');
1005
+ brushSizeSlider.addEventListener('input', () => {
1006
+ brushSize = brushSizeSlider.value;
1007
+ document.querySelector('.brush-size div').textContent = `${brushSize}px`;
1008
+ });
1009
+
1010
+ // Font settings
1011
+ const fontFamilySelect = document.getElementById('fontFamily');
1012
+ fontFamilySelect.addEventListener('change', () => {
1013
+ currentFont = fontFamilySelect.value;
1014
+ });
1015
+
1016
+ const fontSizeInput = document.getElementById('fontSize');
1017
+ fontSizeInput.addEventListener('change', () => {
1018
+ currentFontSize = parseInt(fontSizeInput.value);
1019
+ if (currentFontSize < 8) currentFontSize = 8;
1020
+ if (currentFontSize > 72) currentFontSize = 72;
1021
+ fontSizeInput.value = currentFontSize;
1022
+ });
1023
+
1024
+ // Zoom controls
1025
+ document.getElementById('zoomIn').addEventListener('click', () => {
1026
+ const zoomText = document.querySelector('.zoom-controls span');
1027
+ let zoom = parseInt(zoomText.textContent);
1028
+ if (zoom < 500) {
1029
+ zoom += 10;
1030
+ zoomText.textContent = `${zoom}%`;
1031
+ }
1032
+ });
1033
+
1034
+ document.getElementById('zoomOut').addEventListener('click', () => {
1035
+ const zoomText = document.querySelector('.zoom-controls span');
1036
+ let zoom = parseInt(zoomText.textContent);
1037
+ if (zoom > 10) {
1038
+ zoom -= 10;
1039
+ zoomText.textContent = `${zoom}%`;
1040
+ }
1041
+ });
1042
+
1043
+ // AI Assistant
1044
+ document.getElementById('aiAssistant').addEventListener('click', () => {
1045
+ const popup = document.getElementById('aiGenerationPopup');
1046
+ popup.style.display = 'flex';
1047
+ });
1048
+
1049
+ document.getElementById('closeAiPopup').addEventListener('click', () => {
1050
+ document.getElementById('aiGenerationPopup').style.display = 'none';
1051
+ });
1052
+
1053
+ // Context menu
1054
+ canvas.addEventListener('contextmenu', (e) => {
1055
+ e.preventDefault();
1056
+ if (currentTool === 'text' && textInputContainer.style.display === 'block') return;
1057
+
1058
+ const menu = document.getElementById('contextMenu');
1059
+ menu.style.display = 'flex';
1060
+
1061
+ // Position the menu where the right click occurred
1062
+ menu.style.left = `${e.pageX}px`;
1063
+ menu.style.top = `${e.pageY}px`;
1064
+
1065
+ // Close menu when clicking elsewhere
1066
+ function closeMenu() {
1067
+ menu.style.display = 'none';
1068
+ document.removeEventListener('click', closeMenu);
1069
+ }
1070
+
1071
+ setTimeout(() => {
1072
+ document.addEventListener('click', closeMenu);
1073
+ }, 100);
1074
+ });
1075
+
1076
+ // Layer selection
1077
+ const layers = document.querySelectorAll('.layer');
1078
+ layers.forEach(layer => {
1079
+ layer.addEventListener('click', () => {
1080
+ layers.forEach(l => l.classList.remove('active'));
1081
+ layer.classList.add('active');
1082
+ });
1083
+ });
1084
+ </script>
1085
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1086
+ </html>