Milad56902857 commited on
Commit
27aeba8
·
verified ·
1 Parent(s): 0a5dea0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +428 -908
index.html CHANGED
@@ -3,956 +3,476 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ComfyUI Workflow</title>
 
7
  <style>
 
 
 
 
 
 
 
 
 
 
 
8
  * {
9
  margin: 0;
10
  padding: 0;
11
  box-sizing: border-box;
 
12
  }
 
13
  body {
14
- font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
15
- background-color: #000000;
16
- color: #f5f5f7;
17
- line-height: 1.6;
18
- padding: 20px;
19
  min-height: 100vh;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
  }
 
 
 
 
 
 
 
 
 
 
 
 
21
  .container {
22
- max-width: 1200px;
23
- margin: 0 auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
- .header {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
26
  text-align: center;
27
- margin-bottom: 40px;
28
- padding: 40px 20px;
29
  }
30
- .header h1 {
31
- font-size: 48px;
32
- font-weight: 600;
33
- color: #ffffff;
34
- margin-bottom: 12px;
35
- letter-spacing: -0.02em;
36
  }
37
- .header p {
38
- font-size: 18px;
39
- color: #86868b;
40
- font-weight: 400;
 
 
 
 
 
 
 
 
41
  }
42
- .controls {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
43
  display: flex;
44
- gap: 12px;
45
- margin-bottom: 24px;
46
- justify-content: center;
 
 
 
 
 
 
 
 
 
47
  }
 
 
 
 
 
 
 
 
 
 
 
 
48
  .btn {
49
- padding: 12px 24px;
 
50
  border: none;
51
- border-radius: 24px;
52
- font-size: 14px;
53
- font-weight: 500;
 
 
54
  cursor: pointer;
55
- transition: all 0.2s;
56
- font-family: inherit;
57
- }
58
- .btn-primary {
59
- background: #ffffff;
60
- color: #000000;
61
- }
62
- .btn-primary:hover {
63
- background: #f5f5f7;
64
- transform: scale(0.98);
65
- }
66
- .btn-secondary {
67
- background: #1d1d1f;
68
- color: #f5f5f7;
69
- border: 1px solid #424245;
70
- }
71
- .btn-secondary:hover {
72
- background: #2d2d2f;
73
- transform: scale(0.98);
74
- }
75
- .json-container {
76
- background-color: #1d1d1f;
77
- border-radius: 16px;
78
- padding: 32px;
79
- overflow-x: auto;
80
- border: 1px solid #424245;
81
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
82
- }
83
- pre {
84
- margin: 0;
85
- font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
86
- font-size: 13px;
87
- line-height: 1.6;
88
- white-space: pre-wrap;
89
- word-wrap: break-word;
90
  }
91
- .json-key {
92
- color: #9cdcfe;
 
 
 
93
  }
94
- .json-string {
95
- color: #ce9178;
 
 
 
 
96
  }
97
- .json-number {
98
- color: #b5cea8;
 
 
 
 
99
  }
100
- .json-boolean {
101
- color: #569cd6;
 
102
  }
103
- .json-null {
104
- color: #569cd6;
 
 
 
 
105
  }
106
- .success {
107
- color: #30d158;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  }
109
- @media (max-width: 768px) {
110
- .header h1 {
111
- font-size: 32px;
 
 
112
  }
113
- .controls {
114
- flex-direction: column;
 
115
  }
116
- .json-container {
117
- padding: 20px;
 
118
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  }
120
  </style>
121
  </head>
122
  <body>
123
- <div class="container">
124
- <div class="header">
125
- <h1>ComfyUI Workflow</h1>
126
- <p>View and download your workflow JSON</p>
127
- </div>
128
-
129
- <div class="controls">
130
- <button class="btn btn-primary" onclick="downloadJSON()">Download JSON</button>
131
- <button class="btn btn-secondary" onclick="copyToClipboard()">Copy to Clipboard</button>
132
- </div>
133
-
134
- <div class="json-container">
135
- <pre id="json-content">{
136
- "last_node_id": 15,
137
- "last_link_id": 14,
138
- "nodes": [
139
- {
140
- "id": 1,
141
- "type": "CheckpointLoaderSimple",
142
- "pos": [
143
- 50,
144
- 50
145
- ],
146
- "size": {
147
- "0": 350,
148
- "1": 100
149
- },
150
- "flags": {},
151
- "order": 0,
152
- "mode": 0,
153
- "outputs": [
154
- {
155
- "name": "MODEL",
156
- "type": "MODEL",
157
- "links": [
158
- 2
159
- ],
160
- "shape": 3,
161
- "slot_index": 0
162
- },
163
- {
164
- "name": "CLIP",
165
- "type": "CLIP",
166
- "links": [
167
- 3,
168
- 4
169
- ],
170
- "shape": 3,
171
- "slot_index": 1
172
- },
173
- {
174
- "name": "VAE",
175
- "type": "VAE",
176
- "links": [
177
- 1
178
- ],
179
- "shape": 3,
180
- "slot_index": 2
181
- }
182
- ],
183
- "properties": {
184
- "Node name for S&R": "CheckpointLoaderSimple"
185
- },
186
- "widgets_values": [
187
- "v1-5-pruned-emaonly.safetensors"
188
- ]
189
- },
190
- {
191
- "id": 2,
192
- "type": "CLIPTextEncode",
193
- "pos": [
194
- 450,
195
- 50
196
- ],
197
- "size": {
198
- "0": 425,
199
- "1": 180
200
- },
201
- "flags": {},
202
- "order": 1,
203
- "mode": 0,
204
- "inputs": [
205
- {
206
- "name": "clip",
207
- "type": "CLIP",
208
- "link": 3
209
- }
210
- ],
211
- "outputs": [
212
- {
213
- "name": "CONDITIONING",
214
- "type": "CONDITIONING",
215
- "links": [
216
- 5
217
- ],
218
- "shape": 3,
219
- "slot_index": 0
220
- }
221
- ],
222
- "properties": {
223
- "Node name for S&R": "CLIPTextEncode"
224
- },
225
- "widgets_values": [
226
- "fantasy login page with magical water drops falling, enchanted mouse cursor with glowing trail, mystical design with three buttons: login, register, forgot password, ethereal atmosphere, bioluminescent effects, magical particles floating, fantasy UI design, crystal water drops, glowing borders, enchanted forest background"
227
- ]
228
- },
229
- {
230
- "id": 3,
231
- "type": "CLIPTextEncode",
232
- "pos": [
233
- 450,
234
- 280
235
- ],
236
- "size": {
237
- "0": 425,
238
- "1": 180
239
- },
240
- "flags": {},
241
- "order": 2,
242
- "mode": 0,
243
- "inputs": [
244
- {
245
- "name": "clip",
246
- "type": "CLIP",
247
- "link": 4
248
- }
249
- ],
250
- "outputs": [
251
- {
252
- "name": "CONDITIONING",
253
- "type": "CONDITIONING",
254
- "links": [
255
- 6
256
- ],
257
- "shape": 3,
258
- "slot_index": 0
259
- }
260
- ],
261
- "properties": {
262
- "Node name for S&R": "CLIPTextEncode"
263
- },
264
- "widgets_values": [
265
- "text, words, blurry, low quality, distorted, ugly, bad anatomy, watermark, signature, username field, password field"
266
- ]
267
- },
268
- {
269
- "id": 4,
270
- "type": "KSampler",
271
- "pos": [
272
- 950,
273
- 100
274
- ],
275
- "size": {
276
- "0": 300,
277
- "1": 262
278
- },
279
- "flags": {},
280
- "order": 3,
281
- "mode": 0,
282
- "inputs": [
283
- {
284
- "name": "model",
285
- "type": "MODEL",
286
- "link": 2
287
- },
288
- {
289
- "name": "positive",
290
- "type": "CONDITIONING",
291
- "link": 5
292
- },
293
- {
294
- "name": "negative",
295
- "type": "CONDITIONING",
296
- "link": 6
297
- },
298
- {
299
- "name": "latent_image",
300
- "type": "LATENT",
301
- "link": 7
302
- }
303
- ],
304
- "outputs": [
305
- {
306
- "name": "LATENT",
307
- "type": "LATENT",
308
- "links": [
309
- 8
310
- ],
311
- "shape": 3,
312
- "slot_index": 0
313
- }
314
- ],
315
- "properties": {
316
- "Node name for S&R": "KSampler"
317
- },
318
- "widgets_values": [
319
- 8423679,
320
- "randomize",
321
- 30,
322
- 8,
323
- "euler",
324
- "normal",
325
- 1
326
- ]
327
- },
328
- {
329
- "id": 5,
330
- "type": "EmptyLatentImage",
331
- "pos": [
332
- 950,
333
- 420
334
- ],
335
- "size": {
336
- "0": 315,
337
- "1": 106
338
- },
339
- "flags": {},
340
- "order": 4,
341
- "mode": 0,
342
- "outputs": [
343
- {
344
- "name": "LATENT",
345
- "type": "LATENT",
346
- "links": [
347
- 7
348
- ],
349
- "shape": 3,
350
- "slot_index": 0
351
- }
352
- ],
353
- "properties": {
354
- "Node name for S&R": "EmptyLatentImage"
355
- },
356
- "widgets_values": [
357
- 768,
358
- 1024,
359
- 1
360
- ]
361
- },
362
- {
363
- "id": 6,
364
- "type": "VAEDecode",
365
- "pos": [
366
- 1300,
367
- 100
368
- ],
369
- "size": {
370
- "0": 210,
371
- "1": 46
372
- },
373
- "flags": {},
374
- "order": 5,
375
- "mode": 0,
376
- "inputs": [
377
- {
378
- "name": "samples",
379
- "type": "LATENT",
380
- "link": 8
381
- },
382
- {
383
- "name": "vae",
384
- "type": "VAE",
385
- "link": 1
386
- }
387
- ],
388
- "outputs": [
389
- {
390
- "name": "IMAGE",
391
- "type": "IMAGE",
392
- "links": [
393
- 9
394
- ],
395
- "shape": 3,
396
- "slot_index": 0
397
- }
398
- ],
399
- "properties": {
400
- "Node name for S&R": "VAEDecode"
401
- }
402
- },
403
- {
404
- "id": 7,
405
- "type": "SaveImage",
406
- "pos": [
407
- 1550,
408
- 100
409
- ],
410
- "size": {
411
- "0": 315,
412
- "1": 270
413
- },
414
- "flags": {},
415
- "order": 6,
416
- "mode": 0,
417
- "inputs": [
418
- {
419
- "name": "images",
420
- "type": "IMAGE",
421
- "link": 9
422
- }
423
- ],
424
- "properties": {
425
- "Node name for S&R": "SaveImage"
426
- },
427
- "widgets_values": [
428
- "fantasy_login_page"
429
- ]
430
- },
431
- {
432
- "id": 8,
433
- "type": "ControlNetLoader",
434
- "pos": [
435
- 50,
436
- 200
437
- ],
438
- "size": {
439
- "0": 350,
440
- "1": 60
441
- },
442
- "flags": {},
443
- "order": 7,
444
- "mode": 0,
445
- "outputs": [
446
- {
447
- "name": "CONTROL_NET",
448
- "type": "CONTROL_NET",
449
- "links": [
450
- 10
451
- ],
452
- "shape": 3,
453
- "slot_index": 0
454
- }
455
- ],
456
- "properties": {
457
- "Node name for S&R": "ControlNetLoader"
458
- },
459
- "widgets_values": [
460
- "control_canny-fp16.safetensors"
461
- ]
462
- },
463
- {
464
- "id": 9,
465
- "type": "Canny",
466
- "pos": [
467
- 50,
468
- 300
469
- ],
470
- "size": {
471
- "0": 210,
472
- "1": 270
473
- },
474
- "flags": {},
475
- "order": 8,
476
- "mode": 0,
477
- "inputs": [
478
- {
479
- "name": "image",
480
- "type": "IMAGE",
481
- "link": 11
482
- }
483
- ],
484
- "outputs": [
485
- {
486
- "name": "IMAGE",
487
- "type": "IMAGE",
488
- "links": [
489
- 12
490
- ],
491
- "shape": 3,
492
- "slot_index": 0
493
- }
494
- ],
495
- "properties": {
496
- "Node name for S&R": "Canny"
497
- },
498
- "widgets_values": [
499
- 100,
500
- 200
501
- ]
502
- },
503
- {
504
- "id": 10,
505
- "type": "ControlNetApply",
506
- "pos": [
507
- 950,
508
- 600
509
- ],
510
- "size": {
511
- "0": 320,
512
- "1": 100
513
- },
514
- "flags": {},
515
- "order": 9,
516
- "mode": 0,
517
- "inputs": [
518
- {
519
- "name": "conditioning",
520
- "type": "CONDITIONING",
521
- "link": 13
522
- },
523
- {
524
- "name": "control_net",
525
- "type": "CONTROL_NET",
526
- "link": 10
527
- },
528
- {
529
- "name": "image",
530
- "type": "IMAGE",
531
- "link": 12
532
- },
533
- {
534
- "name": "strength",
535
- "type": "FLOAT",
536
- "link": null
537
- }
538
- ],
539
- "outputs": [
540
- {
541
- "name": "CONDITIONING",
542
- "type": "CONDITIONING",
543
- "links": [
544
- 14
545
- ],
546
- "shape": 3,
547
- "slot_index": 0
548
- }
549
- ],
550
- "properties": {
551
- "Node name for S&R": "ControlNetApply"
552
- },
553
- "widgets_values": [
554
- 1
555
- ]
556
- },
557
- {
558
- "id": 11,
559
- "type": "LoadImage",
560
- "pos": [
561
- 50,
562
- 600
563
- ],
564
- "size": {
565
- "0": 315,
566
- "1": 314
567
- },
568
- "flags": {},
569
- "order": 10,
570
- "mode": 0,
571
- "outputs": [
572
- {
573
- "name": "IMAGE",
574
- "type": "IMAGE",
575
- "links": [
576
- 11
577
- ],
578
- "shape": 3,
579
- "slot_index": 0
580
- },
581
- {
582
- "name": "MASK",
583
- "type": "MASK",
584
- "links": null
585
- }
586
- ],
587
- "properties": {
588
- "Node name for S&R": "LoadImage"
589
- },
590
- "widgets_values": [
591
- "login_wireframe.png"
592
- ]
593
- },
594
- {
595
- "id": 12,
596
- "type": "CLIPTextEncode",
597
- "pos": [
598
- 450,
599
- 500
600
- ],
601
- "size": {
602
- "0": 425,
603
- "1": 180
604
- },
605
- "flags": {},
606
- "order": 11,
607
- "mode": 0,
608
- "inputs": [
609
- {
610
- "name": "clip",
611
- "type": "CLIP",
612
- "link": null
613
- }
614
- ],
615
- "outputs": [
616
- {
617
- "name": "CONDITIONING",
618
- "type": "CONDITIONING",
619
- "links": [
620
- 13
621
- ],
622
- "shape": 3,
623
- "slot_index": 0
624
- }
625
- ],
626
- "properties": {
627
- "Node name for S&R": "CLIPTextEncode"
628
- },
629
- "widgets_values": [
630
- "UI layout, login form structure, button placement, web interface design"
631
- ]
632
- },
633
- {
634
- "id": 13,
635
- "type": "KSampler",
636
- "pos": [
637
- 1300,
638
- 400
639
- ],
640
- "size": {
641
- "0": 300,
642
- "1": 262
643
- },
644
- "flags": {},
645
- "order": 12,
646
- "mode": 0,
647
- "inputs": [
648
- {
649
- "name": "model",
650
- "type": "MODEL",
651
- "link": null
652
- },
653
- {
654
- "name": "positive",
655
- "type": "CONDITIONING",
656
- "link": 14
657
- },
658
- {
659
- "name": "negative",
660
- "type": "CONDITIONING",
661
- "link": null
662
- },
663
- {
664
- "name": "latent_image",
665
- "type": "LATENT",
666
- "link": null
667
- }
668
- ],
669
- "outputs": [
670
- {
671
- "name": "LATENT",
672
- "type": "LATENT",
673
- "links": null
674
- }
675
- ],
676
- "properties": {
677
- "Node name for S&R": "KSampler"
678
- },
679
- "widgets_values": [
680
- 8423679,
681
- "randomize",
682
- 20,
683
- 7,
684
- "euler_ancestral",
685
- "normal",
686
- 1
687
- ]
688
- },
689
- {
690
- "id": 14,
691
- "type": "UpscaleModelLoader",
692
- "pos": [
693
- 50,
694
- 950
695
- ],
696
- "size": {
697
- "0": 350,
698
- "1": 60
699
- },
700
- "flags": {},
701
- "order": 13,
702
- "mode": 0,
703
- "outputs": [
704
- {
705
- "name": "UPSCALE_MODEL",
706
- "type": "UPSCALE_MODEL",
707
- "links": null
708
- }
709
- ],
710
- "properties": {
711
- "Node name for S&R": "UpscaleModelLoader"
712
- },
713
- "widgets_values": [
714
- "4x_NMKD-Siax_200k.pth"
715
- ]
716
- },
717
- {
718
- "id": 15,
719
- "type": "ImageUpscaleWithModel",
720
- "pos": [
721
- 450,
722
- 720
723
- ],
724
- "size": {
725
- "0": 241,
726
- "1": 46
727
- },
728
- "flags": {},
729
- "order": 14,
730
- "mode": 0,
731
- "inputs": [
732
- {
733
- "name": "upscale_model",
734
- "type": "UPSCALE_MODEL",
735
- "link": null
736
- },
737
- {
738
- "name": "image",
739
- "type": "IMAGE",
740
- "link": null
741
- }
742
- ],
743
- "outputs": [
744
- {
745
- "name": "IMAGE",
746
- "type": "IMAGE",
747
- "links": null
748
- }
749
- ],
750
- "properties": {
751
- "Node name for S&R": "ImageUpscaleWithModel"
752
- }
753
- }
754
- ],
755
- "links": [
756
- [
757
- 2,
758
- 1,
759
- 0,
760
- 4,
761
- 0,
762
- "MODEL"
763
- ],
764
- [
765
- 3,
766
- 1,
767
- 1,
768
- 2,
769
- 0,
770
- "CLIP"
771
- ],
772
- [
773
- 4,
774
- 1,
775
- 1,
776
- 3,
777
- 0,
778
- "CLIP"
779
- ],
780
- [
781
- 5,
782
- 2,
783
- 0,
784
- 4,
785
- 1,
786
- "CONDITIONING"
787
- ],
788
- [
789
- 6,
790
- 3,
791
- 0,
792
- 4,
793
- 2,
794
- "CONDITIONING"
795
- ],
796
- [
797
- 7,
798
- 5,
799
- 0,
800
- 4,
801
- 3,
802
- "LATENT"
803
- ],
804
- [
805
- 8,
806
- 4,
807
- 0,
808
- 6,
809
- 0,
810
- "LATENT"
811
- ],
812
- [
813
- 1,
814
- 1,
815
- 2,
816
- 6,
817
- 1,
818
- "VAE"
819
- ],
820
- [
821
- 9,
822
- 6,
823
- 0,
824
- 7,
825
- 0,
826
- "IMAGE"
827
- ],
828
- [
829
- 10,
830
- 8,
831
- 0,
832
- 10,
833
- 1,
834
- "CONTROL_NET"
835
- ],
836
- [
837
- 11,
838
- 11,
839
- 0,
840
- 9,
841
- 0,
842
- "IMAGE"
843
- ],
844
- [
845
- 12,
846
- 9,
847
- 0,
848
- 10,
849
- 2,
850
- "IMAGE"
851
- ],
852
- [
853
- 13,
854
- 12,
855
- 0,
856
- 10,
857
- 0,
858
- "CONDITIONING"
859
- ],
860
- [
861
- 14,
862
- 10,
863
- 0,
864
- 13,
865
- 1,
866
- "CONDITIONING"
867
- ]
868
- ],
869
- "groups": [
870
- {
871
- "title": "Fantasy Login Page Generation",
872
- "bounding": [
873
- 35,
874
- 20,
875
- 1900,
876
- 1100
877
- ],
878
- "color": "#3f789e",
879
- "font_size": 24
880
- }
881
- ],
882
- "config": {},
883
- "extra": {
884
- "ds": {
885
- "scale": 0.5,
886
- "offset": [
887
- 0,
888
- 0
889
- ]
890
- },
891
- "group_nodes": {
892
- "Built with anycoder - https://huggingface.co/spaces/akhaliq/anycoder": null
893
- }
894
- },
895
- "version": 0.4
896
- }</pre>
897
  </div>
898
  </div>
899
 
900
  <script>
901
- function copyToClipboard() {
902
- const jsonContent = document.getElementById('json-content').textContent;
903
- navigator.clipboard.writeText(jsonContent).then(() => {
904
- const btn = event.target;
905
- const originalText = btn.textContent;
906
- btn.textContent = 'Copied!';
907
- btn.classList.add('success');
908
- setTimeout(() => {
909
- btn.textContent = originalText;
910
- btn.classList.remove('success');
911
- }, 2000);
912
- }).catch(err => {
913
- alert('Failed to copy to clipboard');
914
- });
915
- }
916
-
917
- function downloadJSON() {
918
- const jsonContent = document.getElementById('json-content').textContent;
919
- const blob = new Blob([jsonContent], { type: 'application/json' });
920
- const url = URL.createObjectURL(blob);
921
- const a = document.createElement('a');
922
- a.href = url;
923
- a.download = 'comfyui_workflow.json';
924
- document.body.appendChild(a);
925
- a.click();
926
- document.body.removeChild(a);
927
- URL.revokeObjectURL(url);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
928
 
929
- const btn = event.target;
930
- const originalText = btn.textContent;
931
- btn.textContent = 'Downloaded!';
932
- btn.classList.add('success');
933
  setTimeout(() => {
934
- btn.textContent = originalText;
935
- btn.classList.remove('success');
936
- }, 2000);
937
- }
938
 
939
- // Add syntax highlighting
940
- function highlightJSON() {
941
- const content = document.getElementById('json-content');
942
- let html = content.innerHTML;
943
-
944
- // Highlight different JSON elements
945
- html = html.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>');
946
- html = html.replace(/: "([^"]*)"/g, ': <span class="json-string">"$1"</span>');
947
- html = html.replace(/: (-?\d+\.?\d*)/g, ': <span class="json-number">$1</span>');
948
- html = html.replace(/: (true|false)/g, ': <span class="json-boolean">$1</span>');
949
- html = html.replace(/: null/g, ': <span class="json-null">null</span>');
950
-
951
- content.innerHTML = html;
952
- }
953
 
954
- // Apply syntax highlighting after page load
955
- window.addEventListener('load', highlightJSON);
 
 
956
  </script>
957
  </body>
958
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Fancy Login Page</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: #a29bfe;
12
+ --accent: #fd79a8;
13
+ --light: #f8f9fa;
14
+ --dark: #2d3436;
15
+ --success: #00b894;
16
+ --warning: #fdcb6e;
17
+ --danger: #d63031;
18
+ }
19
+
20
  * {
21
  margin: 0;
22
  padding: 0;
23
  box-sizing: border-box;
24
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
25
  }
26
+
27
  body {
 
 
 
 
 
28
  min-height: 100vh;
29
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
30
+ display: flex;
31
+ justify-content: center;
32
+ align-items: center;
33
+ overflow: hidden;
34
+ position: relative;
35
+ }
36
+
37
+ .water-drop {
38
+ position: absolute;
39
+ background: rgba(255, 255, 255, 0.2);
40
+ border-radius: 50%;
41
+ pointer-events: none;
42
+ transform: translate(-50%, -50%);
43
+ animation: drop 4s linear infinite;
44
+ z-index: 0;
45
  }
46
+
47
+ @keyframes drop {
48
+ 0% {
49
+ transform: translate(-50%, -50%) scale(0.5);
50
+ opacity: 1;
51
+ }
52
+ 100% {
53
+ transform: translate(-50%, -50%) scale(2);
54
+ opacity: 0;
55
+ }
56
+ }
57
+
58
  .container {
59
+ position: relative;
60
+ width: 90%;
61
+ max-width: 400px;
62
+ background: rgba(255, 255, 255, 0.1);
63
+ backdrop-filter: blur(10px);
64
+ border-radius: 20px;
65
+ padding: 40px;
66
+ box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
67
+ border: 1px solid rgba(255, 255, 255, 0.2);
68
+ overflow: hidden;
69
+ z-index: 1;
70
+ }
71
+
72
+ .container::before {
73
+ content: '';
74
+ position: absolute;
75
+ top: 0;
76
+ left: -100%;
77
+ width: 100%;
78
+ height: 100%;
79
+ background: rgba(255, 255, 255, 0.05);
80
+ transform: skewX(-15deg);
81
+ transition: 0.5s;
82
+ }
83
+
84
+ .container:hover::before {
85
+ left: 100%;
86
  }
87
+
88
+ .form-container {
89
+ position: relative;
90
+ width: 100%;
91
+ transition: all 0.5s ease;
92
+ }
93
+
94
+ .form {
95
+ width: 100%;
96
+ display: flex;
97
+ flex-direction: column;
98
+ gap: 20px;
99
+ }
100
+
101
+ .form h2 {
102
+ color: var(--light);
103
+ font-size: 2rem;
104
  text-align: center;
105
+ margin-bottom: 20px;
106
+ text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
107
  }
108
+
109
+ .input-group {
110
+ position: relative;
 
 
 
111
  }
112
+
113
+ .input-group input {
114
+ width: 100%;
115
+ padding: 15px 20px;
116
+ background: rgba(255, 255, 255, 0.2);
117
+ border: none;
118
+ outline: none;
119
+ border-radius: 35px;
120
+ font-size: 1rem;
121
+ color: var(--light);
122
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
123
+ transition: all 0.3s ease;
124
  }
125
+
126
+ .input-group input:focus {
127
+ background: rgba(255, 255, 255, 0.3);
128
+ }
129
+
130
+ .input-group input::placeholder {
131
+ color: rgba(255, 255, 255, 0.7);
132
+ }
133
+
134
+ .input-group i {
135
+ position: absolute;
136
+ top: 50%;
137
+ right: 20px;
138
+ transform: translateY(-50%);
139
+ color: var(--light);
140
+ font-size: 1.2rem;
141
+ }
142
+
143
+ .remember-forgot {
144
  display: flex;
145
+ justify-content: space-between;
146
+ align-items: center;
147
+ font-size: 0.9rem;
148
+ color: var(--light);
149
+ margin: -10px 0 10px;
150
+ }
151
+
152
+ .remember-forgot label {
153
+ display: flex;
154
+ align-items: center;
155
+ gap: 5px;
156
+ cursor: pointer;
157
  }
158
+
159
+ .remember-forgot a {
160
+ color: var(--light);
161
+ text-decoration: none;
162
+ transition: all 0.3s ease;
163
+ }
164
+
165
+ .remember-forgot a:hover {
166
+ color: var(--accent);
167
+ text-decoration: underline;
168
+ }
169
+
170
  .btn {
171
+ padding: 15px;
172
+ background: var(--light);
173
  border: none;
174
+ outline: none;
175
+ border-radius: 35px;
176
+ font-size: 1rem;
177
+ font-weight: 600;
178
+ color: var(--primary);
179
  cursor: pointer;
180
+ transition: all 0.3s ease;
181
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  }
183
+
184
+ .btn:hover {
185
+ background: var(--accent);
186
+ color: var(--light);
187
+ transform: translateY(-3px);
188
  }
189
+
190
+ .login-register {
191
+ text-align: center;
192
+ color: var(--light);
193
+ font-size: 0.9rem;
194
+ margin-top: 20px;
195
  }
196
+
197
+ .login-register a {
198
+ color: var(--accent);
199
+ text-decoration: none;
200
+ font-weight: 600;
201
+ transition: all 0.3s ease;
202
  }
203
+
204
+ .login-register a:hover {
205
+ text-decoration: underline;
206
  }
207
+
208
+ .social-login {
209
+ display: flex;
210
+ justify-content: center;
211
+ gap: 15px;
212
+ margin-top: 20px;
213
  }
214
+
215
+ .social-icon {
216
+ width: 40px;
217
+ height: 40px;
218
+ border-radius: 50%;
219
+ background: rgba(255, 255, 255, 0.2);
220
+ display: flex;
221
+ justify-content: center;
222
+ align-items: center;
223
+ color: var(--light);
224
+ font-size: 1.2rem;
225
+ cursor: pointer;
226
+ transition: all 0.3s ease;
227
+ }
228
+
229
+ .social-icon:hover {
230
+ background: var(--accent);
231
+ transform: translateY(-3px);
232
+ }
233
+
234
+ /* Hidden forms */
235
+ .register-form, .forgot-form {
236
+ position: absolute;
237
+ top: 0;
238
+ left: 0;
239
+ width: 100%;
240
+ opacity: 0;
241
+ pointer-events: none;
242
+ transform: translateX(50px);
243
+ transition: all 0.5s ease;
244
+ }
245
+
246
+ .container.active .login-form {
247
+ opacity: 0;
248
+ pointer-events: none;
249
+ transform: translateX(-50px);
250
+ }
251
+
252
+ .container.active .register-form {
253
+ opacity: 1;
254
+ pointer-events: all;
255
+ transform: translateX(0);
256
+ }
257
+
258
+ .container.forgot-active .login-form {
259
+ opacity: 0;
260
+ pointer-events: none;
261
+ transform: translateX(-50px);
262
+ }
263
+
264
+ .container.forgot-active .forgot-form {
265
+ opacity: 1;
266
+ pointer-events: all;
267
+ transform: translateX(0);
268
+ }
269
+
270
+ .back-btn {
271
+ position: absolute;
272
+ top: 10px;
273
+ left: 10px;
274
+ background: none;
275
+ border: none;
276
+ color: var(--light);
277
+ font-size: 1.5rem;
278
+ cursor: pointer;
279
+ transition: all 0.3s ease;
280
+ }
281
+
282
+ .back-btn:hover {
283
+ color: var(--accent);
284
  }
285
+
286
+ /* Responsive */
287
+ @media (max-width: 480px) {
288
+ .container {
289
+ padding: 30px 20px;
290
  }
291
+
292
+ .form h2 {
293
+ font-size: 1.5rem;
294
  }
295
+
296
+ .input-group input {
297
+ padding: 12px 15px;
298
  }
299
+
300
+ .btn {
301
+ padding: 12px;
302
+ }
303
+ }
304
+
305
+ /* Built with anycoder link */
306
+ .anycoder-link {
307
+ position: fixed;
308
+ top: 20px;
309
+ right: 20px;
310
+ color: var(--light);
311
+ text-decoration: none;
312
+ font-size: 0.8rem;
313
+ z-index: 100;
314
+ background: rgba(0, 0, 0, 0.2);
315
+ padding: 5px 10px;
316
+ border-radius: 20px;
317
+ transition: all 0.3s ease;
318
+ }
319
+
320
+ .anycoder-link:hover {
321
+ background: rgba(0, 0, 0, 0.4);
322
  }
323
  </style>
324
  </head>
325
  <body>
326
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
327
+
328
+ <div class="container" id="container">
329
+ <div class="form-container">
330
+ <form class="form login-form" id="login">
331
+ <h2>Login</h2>
332
+ <div class="input-group">
333
+ <input type="text" placeholder="Username or Email" required>
334
+ <i class="fas fa-user"></i>
335
+ </div>
336
+ <div class="input-group">
337
+ <input type="password" placeholder="Password" required>
338
+ <i class="fas fa-lock"></i>
339
+ </div>
340
+ <div class="remember-forgot">
341
+ <label>
342
+ <input type="checkbox">
343
+ Remember me
344
+ </label>
345
+ <a href="#" id="forgot-link">Forgot password?</a>
346
+ </div>
347
+ <button type="submit" class="btn">Login</button>
348
+ <div class="login-register">
349
+ <p>Don't have an account? <a href="#" id="register-link">Register</a></p>
350
+ </div>
351
+ <div class="social-login">
352
+ <div class="social-icon">
353
+ <i class="fab fa-google"></i>
354
+ </div>
355
+ <div class="social-icon">
356
+ <i class="fab fa-facebook-f"></i>
357
+ </div>
358
+ <div class="social-icon">
359
+ <i class="fab fa-twitter"></i>
360
+ </div>
361
+ </div>
362
+ </form>
363
+
364
+ <form class="form register-form" id="register">
365
+ <button type="button" class="back-btn" id="back-from-register">
366
+ <i class="fas fa-arrow-left"></i>
367
+ </button>
368
+ <h2>Register</h2>
369
+ <div class="input-group">
370
+ <input type="text" placeholder="Username" required>
371
+ <i class="fas fa-user"></i>
372
+ </div>
373
+ <div class="input-group">
374
+ <input type="email" placeholder="Email" required>
375
+ <i class="fas fa-envelope"></i>
376
+ </div>
377
+ <div class="input-group">
378
+ <input type="password" placeholder="Password" required>
379
+ <i class="fas fa-lock"></i>
380
+ </div>
381
+ <div class="input-group">
382
+ <input type="password" placeholder="Confirm Password" required>
383
+ <i class="fas fa-lock"></i>
384
+ </div>
385
+ <button type="submit" class="btn">Register</button>
386
+ <div class="login-register">
387
+ <p>Already have an account? <a href="#" id="login-link">Login</a></p>
388
+ </div>
389
+ </form>
390
+
391
+ <form class="form forgot-form" id="forgot">
392
+ <button type="button" class="back-btn" id="back-from-forgot">
393
+ <i class="fas fa-arrow-left"></i>
394
+ </button>
395
+ <h2>Reset Password</h2>
396
+ <div class="input-group">
397
+ <input type="email" placeholder="Email" required>
398
+ <i class="fas fa-envelope"></i>
399
+ </div>
400
+ <button type="submit" class="btn">Send Reset Link</button>
401
+ <div class="login-register">
402
+ <p>Remember your password? <a href="#" id="login-link2">Login</a></p>
403
+ </div>
404
+ </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
405
  </div>
406
  </div>
407
 
408
  <script>
409
+ // Form switching
410
+ const container = document.getElementById('container');
411
+ const registerLink = document.getElementById('register-link');
412
+ const loginLink = document.getElementById('login-link');
413
+ const loginLink2 = document.getElementById('login-link2');
414
+ const forgotLink = document.getElementById('forgot-link');
415
+ const backFromRegister = document.getElementById('back-from-register');
416
+ const backFromForgot = document.getElementById('back-from-forgot');
417
+
418
+ registerLink.addEventListener('click', (e) => {
419
+ e.preventDefault();
420
+ container.classList.add('active');
421
+ });
422
+
423
+ loginLink.addEventListener('click', (e) => {
424
+ e.preventDefault();
425
+ container.classList.remove('active');
426
+ });
427
+
428
+ loginLink2.addEventListener('click', (e) => {
429
+ e.preventDefault();
430
+ container.classList.remove('forgot-active');
431
+ });
432
+
433
+ forgotLink.addEventListener('click', (e) => {
434
+ e.preventDefault();
435
+ container.classList.add('forgot-active');
436
+ });
437
+
438
+ backFromRegister.addEventListener('click', (e) => {
439
+ e.preventDefault();
440
+ container.classList.remove('active');
441
+ });
442
+
443
+ backFromForgot.addEventListener('click', (e) => {
444
+ e.preventDefault();
445
+ container.classList.remove('forgot-active');
446
+ });
447
+
448
+ // Water drop animation
449
+ document.addEventListener('mousemove', (e) => {
450
+ const drop = document.createElement('div');
451
+ drop.classList.add('water-drop');
452
+ drop.style.left = `${e.clientX}px`;
453
+ drop.style.top = `${e.clientY}px`;
454
+ document.body.appendChild(drop);
455
 
 
 
 
 
456
  setTimeout(() => {
457
+ drop.remove();
458
+ }, 4000);
459
+ });
 
460
 
461
+ // Form submission
462
+ document.getElementById('login').addEventListener('submit', (e) => {
463
+ e.preventDefault();
464
+ alert('Login functionality would be implemented here');
465
+ });
466
+
467
+ document.getElementById('register').addEventListener('submit', (e) => {
468
+ e.preventDefault();
469
+ alert('Registration functionality would be implemented here');
470
+ });
 
 
 
 
471
 
472
+ document.getElementById('forgot').addEventListener('submit', (e) => {
473
+ e.preventDefault();
474
+ alert('Password reset link would be sent here');
475
+ });
476
  </script>
477
  </body>
478
  </html>