Hugging Face's logo

Spaces:
Lee6x
/
anycoder-ecee0b82
Running

App Files Community
Lee6x commited on
Commit
5f9f51d
·
verified ·
1 Parent(s): a42c69c

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1035 -19
index.html CHANGED
@@ -1,19 +1,1035 @@
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 Studio - Android App Generator</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
8
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --primary: #6750A4;
18
+ --primary-variant: #625B71;
19
+ --secondary: #625B71;
20
+ --surface: #FFFBFE;
21
+ --background: #FFFBFE;
22
+ --error: #BA1A1A;
23
+ --on-primary: #FFFFFF;
24
+ --on-secondary: #FFFFFF;
25
+ --on-surface: #1C1B1F;
26
+ --on-background: #1C1B1F;
27
+ --outline: #79747E;
28
+ --outline-variant: #CAC4D0;
29
+ --shadow: #000000;
30
+ --success: #006D3E;
31
+ --warning: #7D5700;
32
+ }
33
+
34
+ body {
35
+ font-family: 'Roboto', sans-serif;
36
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
37
+ min-height: 100vh;
38
+ display: flex;
39
+ justify-content: center;
40
+ align-items: center;
41
+ padding: 20px;
42
+ color: var(--on-background);
43
+ }
44
+
45
+ .phone-container {
46
+ width: 100%;
47
+ max-width: 480px;
48
+ background: var(--background);
49
+ border-radius: 40px;
50
+ box-shadow: 0 30px 60px rgba(0,0,0,0.3);
51
+ overflow: hidden;
52
+ position: relative;
53
+ animation: slideIn 0.5s ease-out;
54
+ }
55
+
56
+ @keyframes slideIn {
57
+ from {
58
+ opacity: 0;
59
+ transform: translateY(30px);
60
+ }
61
+ to {
62
+ opacity: 1;
63
+ transform: translateY(0);
64
+ }
65
+ }
66
+
67
+ .status-bar {
68
+ background: var(--primary);
69
+ color: white;
70
+ padding: 8px 20px;
71
+ display: flex;
72
+ justify-content: space-between;
73
+ align-items: center;
74
+ font-size: 14px;
75
+ }
76
+
77
+ .app-header {
78
+ background: var(--primary);
79
+ color: white;
80
+ padding: 16px 20px;
81
+ display: flex;
82
+ align-items: center;
83
+ gap: 12px;
84
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
85
+ }
86
+
87
+ .app-header h1 {
88
+ font-size: 20px;
89
+ font-weight: 500;
90
+ flex: 1;
91
+ }
92
+
93
+ .app-header a {
94
+ color: white;
95
+ text-decoration: none;
96
+ font-size: 12px;
97
+ opacity: 0.9;
98
+ transition: opacity 0.3s;
99
+ }
100
+
101
+ .app-header a:hover {
102
+ opacity: 1;
103
+ }
104
+
105
+ .tab-container {
106
+ background: var(--surface);
107
+ display: flex;
108
+ border-bottom: 1px solid var(--outline-variant);
109
+ }
110
+
111
+ .tab {
112
+ flex: 1;
113
+ padding: 12px;
114
+ text-align: center;
115
+ background: none;
116
+ border: none;
117
+ color: var(--on-surface);
118
+ font-size: 14px;
119
+ font-weight: 500;
120
+ cursor: pointer;
121
+ position: relative;
122
+ transition: all 0.3s;
123
+ }
124
+
125
+ .tab.active {
126
+ color: var(--primary);
127
+ }
128
+
129
+ .tab.active::after {
130
+ content: '';
131
+ position: absolute;
132
+ bottom: 0;
133
+ left: 0;
134
+ right: 0;
135
+ height: 3px;
136
+ background: var(--primary);
137
+ }
138
+
139
+ .content-area {
140
+ padding: 20px;
141
+ max-height: 500px;
142
+ overflow-y: auto;
143
+ background: var(--background);
144
+ }
145
+
146
+ .prompt-editor {
147
+ margin-bottom: 20px;
148
+ }
149
+
150
+ .input-group {
151
+ margin-bottom: 16px;
152
+ }
153
+
154
+ .input-group label {
155
+ display: block;
156
+ margin-bottom: 8px;
157
+ font-size: 14px;
158
+ font-weight: 500;
159
+ color: var(--on-surface);
160
+ }
161
+
162
+ .text-input {
163
+ width: 100%;
164
+ padding: 16px;
165
+ border: 1px solid var(--outline-variant);
166
+ border-radius: 12px;
167
+ font-size: 16px;
168
+ font-family: inherit;
169
+ transition: all 0.3s;
170
+ background: var(--surface);
171
+ }
172
+
173
+ .text-input:focus {
174
+ outline: none;
175
+ border-color: var(--primary);
176
+ box-shadow: 0 0 0 3px rgba(103, 80, 164, 0.1);
177
+ }
178
+
179
+ textarea.text-input {
180
+ resize: vertical;
181
+ min-height: 120px;
182
+ font-family: 'Roboto Mono', monospace;
183
+ }
184
+
185
+ .prompt-suggestions {
186
+ display: flex;
187
+ flex-wrap: wrap;
188
+ gap: 8px;
189
+ margin-bottom: 16px;
190
+ }
191
+
192
+ .suggestion-chip {
193
+ padding: 6px 12px;
194
+ background: var(--surface);
195
+ border: 1px solid var(--outline-variant);
196
+ border-radius: 16px;
197
+ font-size: 12px;
198
+ cursor: pointer;
199
+ transition: all 0.3s;
200
+ }
201
+
202
+ .suggestion-chip:hover {
203
+ background: var(--primary);
204
+ color: var(--on-primary);
205
+ transform: translateY(-2px);
206
+ box-shadow: 0 4px 12px rgba(103, 80, 164, 0.3);
207
+ }
208
+
209
+ .slider-container {
210
+ margin-bottom: 16px;
211
+ }
212
+
213
+ .slider-label {
214
+ display: flex;
215
+ justify-content: space-between;
216
+ margin-bottom: 8px;
217
+ font-size: 14px;
218
+ }
219
+
220
+ .slider {
221
+ width: 100%;
222
+ height: 6px;
223
+ border-radius: 3px;
224
+ background: var(--outline-variant);
225
+ outline: none;
226
+ -webkit-appearance: none;
227
+ }
228
+
229
+ .slider::-webkit-slider-thumb {
230
+ -webkit-appearance: none;
231
+ appearance: none;
232
+ width: 20px;
233
+ height: 20px;
234
+ border-radius: 50%;
235
+ background: var(--primary);
236
+ cursor: pointer;
237
+ transition: all 0.3s;
238
+ }
239
+
240
+ .slider::-webkit-slider-thumb:hover {
241
+ transform: scale(1.2);
242
+ box-shadow: 0 0 10px rgba(103, 80, 164, 0.5);
243
+ }
244
+
245
+ .btn {
246
+ padding: 12px 24px;
247
+ background: var(--primary);
248
+ color: var(--on-primary);
249
+ border: none;
250
+ border-radius: 20px;
251
+ font-size: 14px;
252
+ font-weight: 500;
253
+ cursor: pointer;
254
+ transition: all 0.3s;
255
+ display: inline-flex;
256
+ align-items: center;
257
+ gap: 8px;
258
+ }
259
+
260
+ .btn:hover {
261
+ background: var(--primary-variant);
262
+ transform: translateY(-2px);
263
+ box-shadow: 0 6px 20px rgba(103, 80, 164, 0.4);
264
+ }
265
+
266
+ .btn:active {
267
+ transform: translateY(0);
268
+ }
269
+
270
+ .btn-secondary {
271
+ background: var(--surface);
272
+ color: var(--primary);
273
+ border: 1px solid var(--outline-variant);
274
+ }
275
+
276
+ .btn-secondary:hover {
277
+ background: var(--primary);
278
+ color: var(--on-primary);
279
+ }
280
+
281
+ .btn-group {
282
+ display: flex;
283
+ gap: 12px;
284
+ margin-top: 20px;
285
+ }
286
+
287
+ .image-preview {
288
+ background: var(--surface);
289
+ border-radius: 12px;
290
+ padding: 16px;
291
+ margin-bottom: 20px;
292
+ text-align: center;
293
+ }
294
+
295
+ .preview-placeholder {
296
+ width: 100%;
297
+ height: 200px;
298
+ background: linear-gradient(45deg, var(--outline-variant) 25%, transparent 25%),
299
+ linear-gradient(-45deg, var(--outline-variant) 25%, transparent 25%),
300
+ linear-gradient(45deg, transparent 75%, var(--outline-variant) 75%),
301
+ linear-gradient(-45deg, transparent 75%, var(--outline-variant) 75%);
302
+ background-size: 20px 20px;
303
+ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
304
+ border-radius: 8px;
305
+ display: flex;
306
+ align-items: center;
307
+ justify-content: center;
308
+ color: var(--outline);
309
+ font-size: 14px;
310
+ }
311
+
312
+ .generated-image {
313
+ width: 100%;
314
+ height: 200px;
315
+ border-radius: 8px;
316
+ object-fit: cover;
317
+ }
318
+
319
+ .build-progress {
320
+ background: var(--surface);
321
+ border-radius: 12px;
322
+ padding: 20px;
323
+ margin-top: 20px;
324
+ }
325
+
326
+ .progress-steps {
327
+ display: flex;
328
+ flex-direction: column;
329
+ gap: 12px;
330
+ }
331
+
332
+ .progress-step {
333
+ display: flex;
334
+ align-items: center;
335
+ gap: 12px;
336
+ padding: 12px;
337
+ background: var(--background);
338
+ border-radius: 8px;
339
+ transition: all 0.3s;
340
+ }
341
+
342
+ .progress-step.active {
343
+ background: linear-gradient(90deg, rgba(103, 80, 164, 0.1) 0%, transparent 100%);
344
+ border-left: 3px solid var(--primary);
345
+ }
346
+
347
+ .progress-step.completed {
348
+ opacity: 0.7;
349
+ }
350
+
351
+ .step-icon {
352
+ width: 32px;
353
+ height: 32px;
354
+ border-radius: 50%;
355
+ background: var(--outline-variant);
356
+ display: flex;
357
+ align-items: center;
358
+ justify-content: center;
359
+ font-size: 16px;
360
+ transition: all 0.3s;
361
+ }
362
+
363
+ .progress-step.active .step-icon {
364
+ background: var(--primary);
365
+ color: white;
366
+ animation: pulse 1.5s infinite;
367
+ }
368
+
369
+ .progress-step.completed .step-icon {
370
+ background: var(--success);
371
+ color: white;
372
+ }
373
+
374
+ @keyframes pulse {
375
+ 0% {
376
+ box-shadow: 0 0 0 0 rgba(103, 80, 164, 0.7);
377
+ }
378
+ 70% {
379
+ box-shadow: 0 0 0 10px rgba(103, 80, 164, 0);
380
+ }
381
+ 100% {
382
+ box-shadow: 0 0 0 0 rgba(103, 80, 164, 0);
383
+ }
384
+ }
385
+
386
+ .step-info {
387
+ flex: 1;
388
+ }
389
+
390
+ .step-title {
391
+ font-size: 14px;
392
+ font-weight: 500;
393
+ margin-bottom: 2px;
394
+ }
395
+
396
+ .step-description {
397
+ font-size: 12px;
398
+ color: var(--outline);
399
+ }
400
+
401
+ .fab {
402
+ position: absolute;
403
+ bottom: 20px;
404
+ right: 20px;
405
+ width: 56px;
406
+ height: 56px;
407
+ border-radius: 16px;
408
+ background: var(--primary);
409
+ color: white;
410
+ border: none;
411
+ cursor: pointer;
412
+ box-shadow: 0 6px 20px rgba(0,0,0,0.2);
413
+ display: flex;
414
+ align-items: center;
415
+ justify-content: center;
416
+ transition: all 0.3s;
417
+ z-index: 10;
418
+ }
419
+
420
+ .fab:hover {
421
+ transform: scale(1.1);
422
+ box-shadow: 0 8px 30px rgba(103, 80, 164, 0.4);
423
+ }
424
+
425
+ .toast {
426
+ position: fixed;
427
+ bottom: 80px;
428
+ left: 50%;
429
+ transform: translateX(-50%) translateY(100px);
430
+ background: var(--shadow);
431
+ color: white;
432
+ padding: 12px 24px;
433
+ border-radius: 20px;
434
+ font-size: 14px;
435
+ opacity: 0;
436
+ transition: all 0.3s;
437
+ z-index: 1000;
438
+ }
439
+
440
+ .toast.show {
441
+ opacity: 1;
442
+ transform: translateX(-50%) translateY(0);
443
+ }
444
+
445
+ .tab-content {
446
+ display: none;
447
+ }
448
+
449
+ .tab-content.active {
450
+ display: block;
451
+ animation: fadeIn 0.3s ease-in;
452
+ }
453
+
454
+ @keyframes fadeIn {
455
+ from { opacity: 0; }
456
+ to { opacity: 1; }
457
+ }
458
+
459
+ .template-grid {
460
+ display: grid;
461
+ grid-template-columns: repeat(2, 1fr);
462
+ gap: 12px;
463
+ margin-bottom: 20px;
464
+ }
465
+
466
+ .template-card {
467
+ background: var(--surface);
468
+ border: 1px solid var(--outline-variant);
469
+ border-radius: 12px;
470
+ padding: 12px;
471
+ cursor: pointer;
472
+ transition: all 0.3s;
473
+ }
474
+
475
+ .template-card:hover {
476
+ transform: translateY(-4px);
477
+ box-shadow: 0 6px 20px rgba(0,0,0,0.1);
478
+ border-color: var(--primary);
479
+ }
480
+
481
+ .template-icon {
482
+ font-size: 24px;
483
+ margin-bottom: 8px;
484
+ color: var(--primary);
485
+ }
486
+
487
+ .template-title {
488
+ font-size: 14px;
489
+ font-weight: 500;
490
+ margin-bottom: 4px;
491
+ }
492
+
493
+ .template-description {
494
+ font-size: 12px;
495
+ color: var(--outline);
496
+ }
497
+
498
+ .history-item {
499
+ background: var(--surface);
500
+ border-radius: 8px;
501
+ padding: 12px;
502
+ margin-bottom: 12px;
503
+ display: flex;
504
+ gap: 12px;
505
+ align-items: center;
506
+ cursor: pointer;
507
+ transition: all 0.3s;
508
+ }
509
+
510
+ .history-item:hover {
511
+ transform: translateX(4px);
512
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
513
+ }
514
+
515
+ .history-thumbnail {
516
+ width: 60px;
517
+ height: 60px;
518
+ border-radius: 8px;
519
+ background: var(--outline-variant);
520
+ display: flex;
521
+ align-items: center;
522
+ justify-content: center;
523
+ color: var(--outline);
524
+ }
525
+
526
+ .history-info {
527
+ flex: 1;
528
+ }
529
+
530
+ .history-prompt {
531
+ font-size: 14px;
532
+ font-weight: 500;
533
+ margin-bottom: 4px;
534
+ overflow: hidden;
535
+ text-overflow: ellipsis;
536
+ white-space: nowrap;
537
+ }
538
+
539
+ .history-date {
540
+ font-size: 12px;
541
+ color: var(--outline);
542
+ }
543
+
544
+ .settings-section {
545
+ background: var(--surface);
546
+ border-radius: 12px;
547
+ padding: 16px;
548
+ margin-bottom: 16px;
549
+ }
550
+
551
+ .settings-title {
552
+ font-size: 16px;
553
+ font-weight: 500;
554
+ margin-bottom: 16px;
555
+ display: flex;
556
+ align-items: center;
557
+ gap: 8px;
558
+ }
559
+
560
+ .toggle-switch {
561
+ display: flex;
562
+ align-items: center;
563
+ justify-content: space-between;
564
+ margin-bottom: 12px;
565
+ }
566
+
567
+ .switch {
568
+ position: relative;
569
+ width: 48px;
570
+ height: 24px;
571
+ }
572
+
573
+ .switch input {
574
+ opacity: 0;
575
+ width: 0;
576
+ height: 0;
577
+ }
578
+
579
+ .switch-slider {
580
+ position: absolute;
581
+ cursor: pointer;
582
+ top: 0;
583
+ left: 0;
584
+ right: 0;
585
+ bottom: 0;
586
+ background-color: var(--outline-variant);
587
+ transition: .4s;
588
+ border-radius: 24px;
589
+ }
590
+
591
+ .switch-slider:before {
592
+ position: absolute;
593
+ content: "";
594
+ height: 18px;
595
+ width: 18px;
596
+ left: 3px;
597
+ bottom: 3px;
598
+ background-color: white;
599
+ transition: .4s;
600
+ border-radius: 50%;
601
+ }
602
+
603
+ input:checked + .switch-slider {
604
+ background-color: var(--primary);
605
+ }
606
+
607
+ input:checked + .switch-slider:before {
608
+ transform: translateX(24px);
609
+ }
610
+
611
+ .loading-spinner {
612
+ display: none;
613
+ width: 40px;
614
+ height: 40px;
615
+ border: 4px solid var(--outline-variant);
616
+ border-top: 4px solid var(--primary);
617
+ border-radius: 50%;
618
+ animation: spin 1s linear infinite;
619
+ margin: 20px auto;
620
+ }
621
+
622
+ .loading-spinner.active {
623
+ display: block;
624
+ }
625
+
626
+ @keyframes spin {
627
+ 0% { transform: rotate(0deg); }
628
+ 100% { transform: rotate(360deg); }
629
+ }
630
+
631
+ @media (max-width: 480px) {
632
+ .phone-container {
633
+ border-radius: 0;
634
+ max-width: 100%;
635
+ }
636
+ }
637
+ </style>
638
+ </head>
639
+ <body>
640
+ <div class="phone-container">
641
+ <div class="status-bar">
642
+ <span>9:41 AM</span>
643
+ <span>⚡ 🔋 📶</span>
644
+ </div>
645
+
646
+ <div class="app-header">
647
+ <span class="material-icons">brush</span>
648
+ <h1>AI Studio</h1>
649
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
650
+ </div>
651
+
652
+ <div class="tab-container">
653
+ <button class="tab active" onclick="switchTab('create')">
654
+ <span class="material-icons" style="font-size: 18px;">add_circle</span>
655
+ Create
656
+ </button>
657
+ <button class="tab" onclick="switchTab('templates')">
658
+ <span class="material-icons" style="font-size: 18px;">dashboard</span>
659
+ Templates
660
+ </button>
661
+ <button class="tab" onclick="switchTab('history')">
662
+ <span class="material-icons" style="font-size: 18px;">history</span>
663
+ History
664
+ </button>
665
+ <button class="tab" onclick="switchTab('settings')">
666
+ <span class="material-icons" style="font-size: 18px;">settings</span>
667
+ Settings
668
+ </button>
669
+ </div>
670
+
671
+ <div class="content-area">
672
+ <div id="create-tab" class="tab-content active">
673
+ <div class="prompt-editor">
674
+ <div class="input-group">
675
+ <label for="prompt">AI Prompt</label>
676
+ <textarea id="prompt" class="text-input" placeholder="Enter your creative prompt here..."></textarea>
677
+ </div>
678
+
679
+ <div class="prompt-suggestions">
680
+ <div class="suggestion-chip" onclick="addToPrompt('photorealistic')">photorealistic</div>
681
+ <div class="suggestion-chip" onclick="addToPrompt('4K')">4K</div>
682
+ <div class="suggestion-chip" onclick="addToPrompt('cinematic lighting')">cinematic lighting</div>
683
+ <div class="suggestion-chip" onclick="addToPrompt('ultra detailed')">ultra detailed</div>
684
+ <div class="suggestion-chip" onclick="addToPrompt('art style')">art style</div>
685
+ <div class="suggestion-chip" onclick="addToPrompt('fantasy')">fantasy</div>
686
+ </div>
687
+
688
+ <div class="slider-container">
689
+ <div class="slider-label">
690
+ <span>Creativity</span>
691
+ <span id="creativity-value">75</span>
692
+ </div>
693
+ <input type="range" class="slider" id="creativity" min="0" max="100" value="75">
694
+ </div>
695
+
696
+ <div class="slider-container">
697
+ <div class="slider-label">
698
+ <span>Detail Level</span>
699
+ <span id="detail-value">50</span>
700
+ </div>
701
+ <input type="range" class="slider" id="detail" min="0" max="100" value="50">
702
+ </div>
703
+
704
+ <div class="image-preview">
705
+ <div id="image-container">
706
+ <div class="preview-placeholder">
707
+ <span>AI Generated Image</span>
708
+ </div>
709
+ </div>
710
+ </div>
711
+
712
+ <div class="btn-group">
713
+ <button class="btn" onclick="generateImage()">
714
+ <span class="material-icons">auto_awesome</span>
715
+ Generate
716
+ </button>
717
+ <button class="btn btn-secondary" onclick="clearPrompt()">
718
+ <span class="material-icons">clear</span>
719
+ Clear
720
+ </button>
721
+ </div>
722
+ </div>
723
+
724
+ <div class="build-progress" id="build-progress" style="display: none;">
725
+ <h3 style="margin-bottom: 16px;">Building APK</h3>
726
+ <div class="progress-steps">
727
+ <div class="progress-step" id="step1">
728
+ <div class="step-icon">1</div>
729
+ <div class="step-info">
730
+ <div class="step-title">Compiling Resources</div>
731
+ <div class="step-description">Processing images and assets</div>
732
+ </div>
733
+ </div>
734
+ <div class="progress-step" id="step2">
735
+ <div class="step-icon">2</div>
736
+ <div class="step-info">
737
+ <div class="step-title">Generating Code</div>
738
+ <div class="step-description">Creating Android components</div>
739
+ </div>
740
+ </div>
741
+ <div class="progress-step" id="step3">
742
+ <div class="step-icon">3</div>
743
+ <div class="step-info">
744
+ <div class="step-title">Signing APK</div>
745
+ <div class="step-description">Adding security signature</div>
746
+ </div>
747
+ </div>
748
+ <div class="progress-step" id="step4">
749
+ <div class="step-icon">4</div>
750
+ <div class="step-info">
751
+ <div class="step-title">Optimizing</div>
752
+ <div class="step-description">Final optimizations</div>
753
+ </div>
754
+ </div>
755
+ </div>
756
+ <div class="loading-spinner" id="loading-spinner"></div>
757
+ </div>
758
+ </div>
759
+
760
+ <div id="templates-tab" class="tab-content">
761
+ <h3 style="margin-bottom: 16px;">Quick Templates</h3>
762
+ <div class="template-grid">
763
+ <div class="template-card" onclick="selectTemplate('portrait')">
764
+ <div class="template-icon">👤</div>
765
+ <div class="template-title">Portrait</div>
766
+ <div class="template-description">Professional headshots</div>
767
+ </div>
768
+ <div class="template-card" onclick="selectTemplate('landscape')">
769
+ <div class="template-icon">🏔️</div>
770
+ <div class="template-title">Landscape</div>
771
+ <div class="template-description">Natural scenes</div>
772
+ </div>
773
+ <div class="template-card" onclick="selectTemplate('abstract')">
774
+ <div class="template-icon">🎨</div>
775
+ <div class="template-title">Abstract</div>
776
+ <div class="template-description">Modern art style</div>
777
+ </div>
778
+ <div class="template-card" onclick="selectTemplate('logo')">
779
+ <div class="template-icon">🏢</div>
780
+ <div class="template-title">Logo</div>
781
+ <div class="template-description">Brand design</div>
782
+ </div>
783
+ </div>
784
+ </div>
785
+
786
+ <div id="history-tab" class="tab-content">
787
+ <h3 style="margin-bottom: 16px;">Recent Generations</h3>
788
+ <div id="history-list">
789
+ <div class="history-item" onclick="loadFromHistory('item1')">
790
+ <div class="history-thumbnail">
791
+ <span class="material-icons">image</span>
792
+ </div>
793
+ <div class="history-info">
794
+ <div class="history-prompt">Sunset over mountains</div>
795
+ <div class="history-date">2 hours ago</div>
796
+ </div>
797
+ </div>
798
+ <div class="history-item" onclick="loadFromHistory('item2')">
799
+ <div class="history-thumbnail">
800
+ <span class="material-icons">image</span>
801
+ </div>
802
+ <div class="history-info">
803
+ <div class="history-prompt">Futuristic city at night</div>
804
+ <div class="history-date">Yesterday</div>
805
+ </div>
806
+ </div>
807
+ </div>
808
+ </div>
809
+
810
+ <div id="settings-tab" class="tab-content">
811
+ <div class="settings-section">
812
+ <div class="settings-title">
813
+ <span class="material-icons">tune</span>
814
+ Generation Settings
815
+ </div>
816
+ <div class="toggle-switch">
817
+ <span>Auto-enhance prompts</span>
818
+ <label class="switch">
819
+ <input type="checkbox" checked>
820
+ <span class="switch-slider"></span>
821
+ </label>
822
+ </div>
823
+ <div class="toggle-switch">
824
+ <span>Save to gallery</span>
825
+ <label class="switch">
826
+ <input type="checkbox" checked>
827
+ <span class="switch-slider"></span>
828
+ </label>
829
+ </div>
830
+ <div class="toggle-switch">
831
+ <span>HD output</span>
832
+ <label class="switch">
833
+ <input type="checkbox">
834
+ <span class="switch-slider"></span>
835
+ </label>
836
+ </div>
837
+ </div>
838
+
839
+ <div class="settings-section">
840
+ <div class="settings-title">
841
+ <span class="material-icons">developer_mode</span>
842
+ APK Settings
843
+ </div>
844
+ <div class="input-group">
845
+ <label for="app-name">App Name</label>
846
+ <input type="text" class="text-input" id="app-name" value="AI Image Generator">
847
+ </div>
848
+ <div class="input-group">
849
+ <label for="package-name">Package Name</label>
850
+ <input type="text" class="text-input" id="package-name" value="com.aistudio.imagegen">
851
+ </div>
852
+ <div class="input-group">
853
+ <label for="version">Version</label>
854
+ <input type="text" class="text-input" id="version" value="1.0.0">
855
+ </div>
856
+ </div>
857
+ </div>
858
+ </div>
859
+
860
+ <button class="fab" onclick="buildAPK()">
861
+ <span class="material-icons">build</span>
862
+ </button>
863
+ </div>
864
+
865
+ <div class="toast" id="toast"></div>
866
+
867
+ <script>
868
+ // Tab switching
869
+ function switchTab(tabName) {
870
+ const tabs = document.querySelectorAll('.tab');
871
+ const contents = document.querySelectorAll('.tab-content');
872
+
873
+ tabs.forEach(tab => tab.classList.remove('active'));
874
+ contents.forEach(content => content.classList.remove('active'));
875
+
876
+ event.target.closest('.tab').classList.add('active');
877
+ document.getElementById(`${tabName}-tab`).classList.add('active');
878
+ }
879
+
880
+ // Slider updates
881
+ document.getElementById('creativity').addEventListener('input', function() {
882
+ document.getElementById('creativity-value').textContent = this.value;
883
+ });
884
+
885
+ document.getElementById('detail').addEventListener('input', function() {
886
+ document.getElementById('detail-value').textContent = this.value;
887
+ });
888
+
889
+ // Add to prompt
890
+ function addToPrompt(text) {
891
+ const promptTextarea = document.getElementById('prompt');
892
+ if (promptTextarea.value && !promptTextarea.value.endsWith(' ')) {
893
+ promptTextarea.value += ' ';
894
+ }
895
+ promptTextarea.value += text;
896
+ showToast(`Added "${text}" to prompt`);
897
+ }
898
+
899
+ // Clear prompt
900
+ function clearPrompt() {
901
+ document.getElementById('prompt').value = '';
902
+ document.getElementById('image-container').innerHTML = `
903
+ <div class="preview-placeholder">
904
+ <span>AI Generated Image</span>
905
+ </div>
906
+ `;
907
+ showToast('Prompt cleared');
908
+ }
909
+
910
+ // Generate image (mock)
911
+ function generateImage() {
912
+ const prompt = document.getElementById('prompt').value;
913
+ if (!prompt) {
914
+ showToast('Please enter a prompt');
915
+ return;
916
+ }
917
+
918
+ showToast('Generating image...');
919
+
920
+ // Simulate image generation
921
+ setTimeout(() => {
922
+ const seed = Math.random().toString(36).substring(7);
923
+ const imageUrl = `https://picsum.photos/seed/${seed}/400/200.jpg`;
924
+ document.getElementById('image-container').innerHTML = `
925
+ <img src="${imageUrl}" alt="Generated" class="generated-image">
926
+ `;
927
+ showToast('Image generated successfully!');
928
+ }, 2000);
929
+ }
930
+
931
+ // Build APK
932
+ function buildAPK() {
933
+ const prompt = document.getElementById('prompt').value;
934
+ if (!prompt) {
935
+ showToast('Please generate an image first');
936
+ return;
937
+ }
938
+
939
+ // Show build progress
940
+ document.getElementById('build-progress').style.display = 'block';
941
+ document.getElementById('loading-spinner').classList.add('active');
942
+
943
+ let currentStep = 1;
944
+ const steps = ['step1', 'step2', 'step3', 'step4'];
945
+
946
+ const interval = setInterval(() => {
947
+ if (currentStep > 1) {
948
+ document.getElementById(steps[currentStep - 2]).classList.remove('active');
949
+ document.getElementById(steps[currentStep - 2]).classList.add('completed');
950
+ }
951
+
952
+ if (currentStep <= 4) {
953
+ document.getElementById(steps[currentStep - 1]).classList.add('active');
954
+ currentStep++;
955
+ } else {
956
+ clearInterval(interval);
957
+ document.getElementById('loading-spinner').classList.remove('active');
958
+ document.getElementById(steps[3]).classList.remove('active');
959
+ document.getElementById(steps[3]).classList.add('completed');
960
+ showToast('APK built successfully! Ready to download.');
961
+
962
+ // Reset after 3 seconds
963
+ setTimeout(() => {
964
+ document.getElementById('build-progress').style.display = 'none';
965
+ steps.forEach((step, index) => {
966
+ document.getElementById(step).classList.remove('active', 'completed');
967
+ });
968
+ }, 3000);
969
+ }
970
+ }, 1500);
971
+ }
972
+
973
+ // Select template
974
+ function selectTemplate(template) {
975
+ const templates = {
976
+ portrait: 'Professional portrait with studio lighting, photorealistic',
977
+ landscape: 'Beautiful landscape with mountains, golden hour lighting',
978
+ abstract: 'Abstract geometric patterns with vibrant colors',
979
+ logo: 'Modern minimalist logo design, vector art'
980
+ };
981
+
982
+ document.getElementById('prompt').value = templates[template];
983
+ switchTab('create');
984
+ document.querySelector('.tab').classList.add('active');
985
+ showToast(`Template "${template}" selected`);
986
+ }
987
+
988
+ // Load from history
989
+ function loadFromHistory(item) {
990
+ const history = {
991
+ item1: 'Sunset over mountains with dramatic clouds',
992
+ item2: 'Futuristic cyberpunk city at night with neon lights'
993
+ };
994
+
995
+ document.getElementById('prompt').value = history[item];
996
+ switchTab('create');
997
+ showToast('Loaded from history');
998
+ }
999
+
1000
+ // Toast notification
1001
+ function showToast(message) {
1002
+ const toast = document.getElementById('toast');
1003
+ toast.textContent = message;
1004
+ toast.classList.add('show');
1005
+
1006
+ setTimeout(() => {
1007
+ toast.classList.remove('show');
1008
+ }, 3000);
1009
+ }
1010
+
1011
+ // Initialize
1012
+ document.addEventListener('DOMContentLoaded', function() {
1013
+ // Add smooth scrolling
1014
+ document.querySelector('.content-area').addEventListener('scroll', function() {
1015
+ if (this.scrollTop > 50) {
1016
+ document.querySelector('.fab').style.transform = 'scale(0.9)';
1017
+ } else {
1018
+ document.querySelector('.fab').style.transform = 'scale(1)';
1019
+ }
1020
+ });
1021
+
1022
+ // Add keyboard shortcuts
1023
+ document.addEventListener('keydown', function(e) {
1024
+ if (e.ctrlKey || e.metaKey) {
1025
+ if (e.key === 'Enter') {
1026
+ generateImage();
1027
+ } else if (e.key === 'b') {
1028
+ buildAPK();
1029
+ }
1030
+ }
1031
+ });
1032
+ });
1033
+ </script>
1034
+ </body>
1035
+ </html>