-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
985 lines (861 loc) · 63.7 KB
/
Copy pathindex.html
File metadata and controls
985 lines (861 loc) · 63.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
<!DOCTYPE html>
<html lang="en" data-theme="lofi">
<head>
<meta charset="utf-8" />
<title>AIKE</title>
<meta name="description" content=" AIKE Artifical Industries Unlimited. Providing unreliable tech – but good ideas – since 2022. Images made with Midjourney and copy is made with OpenAI GPTChat" />
<meta name="author" content="https://github.com/dditlev" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/daisyui@2.15.3/dist/full.css"
rel="stylesheet"
type="text/css"
/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
.font-pri {
font-family: 'Bungee', cursive;
}
body {
min-height: 100vh;
}
</style>
</head>
<body>
<div class="md:p-5">
<div class="md:flex md:p-0 p-4">
<div class="md:flex flex-1">
<h1 class="text-5xl font-bold mb-6 font-pri" id="logo">AIKE</h1>
<h1 class="text-1xl font-bold mb-6 font-pri md:m-3"><span class="text-success md:ml-4">Artificially</span> <span class="text-info ml-4">generated</span> <span class="text-warning ml-4">sweet-dish</span> <span class="text-error ml-4">design</span></h1>
</div>
<h1 class="text-xs opacity-40 mt-3 text-error md:mb-0 mb-4">No guarantees, no returns, no promises,<br /> no nothing. Also the products are fictitious</h1>
</div>
<div id="view"></div>
<div id="main">
<div class="md:flex md:gap-4" >
<div class="md:flex-1">
<div class="hero min-h-screen" style="background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051231102016176148/zarathustrax_The_Holographic_Projector_-_a_device_that_can_crea_0e00440c-ce1e-4676-b65c-77bc0f49c82d.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 md:text-5xl text-3xl font-bold font-pri">The Holographic Projector</h1>
<p class="mb-5">a device that can create 3D holographic images, allowing you to create and manipulate virtual objects.</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
</div>
<div>
<div class="hero rounded" style="height:50vh;background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-3xl font-bold font-pri">The Self-Assembly Furniture</h1>
<p class="mb-5">furniture that can be assembled quickly and easily with no tools required.</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
<div class="hero md:mt-4" style="height:calc(50vh - 18px);background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051233052082323598/zarathustrax_The_Virtual_Reality_Couch_-_a_couch_that_allows_yo_a1fa99d1-3da5-4cc8-9718-c408bb742d79.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-3xl font-bold font-pri">The Virtual Reality Couch</h1>
<p class="mb-5">a couch that allows you to immerse yourself in a virtual reality experience.</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
</div>
</div>
<div class="hero md:mt-4" style="height:calc(80vh - 18px); background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051233497609687101/zarathustrax_The_Modular_Shelving_System_-_a_shelving_system_th_94928b40-a198-4a96-8038-adae9fd965b8.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 md:text-6xl text-3xl font-bold font-pri">The Modular Shelving System</h1>
<p class="mb-5">a shelving system that can be customized to fit your needs and can be easily expanded or rearranged</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
<div class="md:flex md:gap-4">
<div class="md:w-2/6">
<div class="hero md:mt-4" style="height:calc(70vh);background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051234454498181210/zarathustrax_The_Self-Cleaning_Surface_-_a_surface_that_can_cle_80286fcd-3628-4e78-a6ab-530a0f5c48d7.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-3xl font-bold font-pri">The Self-Cleaning Surface</h1>
<p class="mb-5">a surface that can clean itself automatically, reducing the need for cleaning and maintenance.</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
</div>
<div class="md:w-2/6">
<div class="hero md:mt-4" style="height:calc(70vh);background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051295350205448334/zarathustrax_Transformable_furniture_This_furniture_can_change__010d65c8-c269-4166-9d00-a579d5bc5c7a.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-3xl font-bold font-pri">Transformable furniture</h1>
<p class="mb-5">This furniture can change shape and size at the touch of a button, allowing you to easily adapt your living space to your needs.</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
</div>
<div class="md:w-2/6">
<div class="hero md:mt-4" style="height:calc(70vh); background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051294752957546516/zarathustrax_Virtual_reality_chairs_These_chairs_are_equipped_w_ae514f6a-7fca-443b-8262-6265247499b8.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-3xl font-bold font-pri">Virtual reality chairs</h1>
<p class="mb-5">These chairs are equipped with VR technology, allowing you to fully immerse yourself in a digital world while remaining comfortable and supported</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
</div>
</div>
<div class="md:flex md:gap-4 md:mt-4" >
<div class="md:w-1/2">
<div class="hero min-h-screen" style="background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051297882420019310/zarathustrax_Teleportation_devices_These_devices_claim_to_be_ab_ada25988-84c2-4115-ac41-6e0636227420.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 md:text-4xl text-2xl font-bold font-pri">Teleportation devices</h1>
<p class="mb-5">No more long lines at the airport, no more traffic jams, no more worrying about finding a parking spot</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="hero rounded" style="height:50vh;background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051297920059707412/zarathustrax_Invisibility_cloaks_These_cloaks_claim_to_be_able__daab8466-6049-450d-9b6e-11a6d8aef416.png);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-4xl font-bold font-pri">Invisibility cloaks</h1>
<p class="mb-5">These cloaks makes the wearer invisible</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
<div class="hero md:mt-4" style="height:calc(50vh - 18px); background-image: url(https://media.discordapp.net/attachments/1015694705960427550/1051299403291435078/progress_image_80_3c9dd91c-20d6-4672-a45e-4a8b56098d02.webp);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-4xl font-bold font-pri">Anti-gravity boots</h1>
<p class="mb-5">allows the wearer to walk on walls or ceilings. These boots are designed to use advanced technology to counteract the effects of gravity</p>
<button class="btn btn-primary">Read more</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer footer-center md:p-10 p-4 bg-primary text-primary-content">
<div>
<svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="inline-block fill-current">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
</svg>
<p class="font-bold text-3xl font-pri">
AIKE Artifical Industries Unlimited.
</p>
<p class="text-3xl mb-8 opacity-60">Providing unreliable tech – but good ideas – since 2022</p>
<p>Images made with Midjourney and copy is made with OpenAI GPTChat</p>
<button onclick="unlock_potential(event)" class="btn btn-info mt-8"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="pointer-events-none w-6 h-6 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
Unlock creative potential</button>
</div>
<div>
<div id="get-creative" style="display: none;" class="bg-base-100 rounded text-black md:p-16 p-4 text-left md:w-1/2 w-full">
<h1 class="font-pri text-4xl">Unlock your creative potential</h1>
<h3 class="text-3xl opacity-70">The digital visual world has changed. It is now possible to get the machine to generate text and images.</h3>
<p class="text-2xl mt-4 mb-8">To get the machine to generate text and images you have to supply it with a prompt. An instruction in plaintext.</p>
<p>Here are some prompt examples</p>
<div>
<details><summary class="text-2xl font-bold">"Generate a product presentation for Anti-gravity boots"</summary>
<div class="badge mt-4">ChatGPT responds</div>
<blockquote class="text-2xl bg-base-200 mt-2 rounded p-2 italic">Introducing Anti-Gravity Boots – the ultimate tool for exploring new dimensions. With our advanced technology, you can walk on walls, ceilings, and even upside down, allowing you to explore new environments and perspectives like never before.
But our boots are more than just a novelty. They are carefully designed to provide maximum stability and support, so you can move freely and safely while wearing them. And with our sleek and stylish design, you can wear your anti-gravity boots anywhere, from the office to the great outdoors.</blockquote>
</details>
<details class="mt-8"><summary class="text-2xl font-bold">"A film still from a film about unlock your creative potential, discover a world of visual vibrant beauty, very adventure, much joy, endless possibilities"</summary>
<div class="badge mt-4">Midjourney generates</div>
<img src="https://media.discordapp.net/attachments/1015694705960427550/1051475749770629140/zarathustrax_a_filmstill_from_a_film_about_unlock_your_creative_21c3dd96-c849-46cc-a556-26d3c350a092.png" />
</details>
<details class="mt-8"><summary class="text-2xl font-bold">"create a list of 10 healthy dishes for supper"</summary>
<div class="badge mt-4">ChatGPT responds</div>
<blockquote class="text-2xl bg-base-200 mt-2 rounded p-2 italic">
<ol style="list-style: decimal;" class="m-12">
<li>Grilled chicken breast with mixed vegetables</li>
<li>Salmon with quinoa and steamed broccoli</li>
<li>Shrimp and vegetable stir-fry with brown rice</li>
<li>Vegetable soup with whole grain bread</li>
<li>Turkey chili with kidney beans and brown rice</li>
<li> Tofu and vegetable curry with jasmine rice</li>
<li> Lentil and vegetable stew with whole wheat pita bread</li>
<li> Grilled vegetable and hummus wrap with mixed greens salad</li>
<li> Grilled chicken Caesar salad with whole grain croutons</li>
<li> Baked salmon with sweet potato and Brussels sprouts.</ol>
</details>
</div>
<h1 class="font-pri text-5xl mt-16">Get started</h1>
<h3 class="text-3xl opacity-70">There are different services that offers variants of text and image generation</h3>
<div class="divider mt-12">Text generation</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">OpenAI</h2>
<div class="badge badge-warning m-2 md:ml-4 ml-0">Paid service</div>
<div class="badge badge-success m-2">Free trial</div>
</div>
<p>OpenAI offers a range of text and image services.</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://openai.com" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">OpenAI ChatGPT</h2>
<div class="badge badge-warning m-2 md:ml-4 ml-0">Paid service</div>
<div class="badge badge-success m-2">Free trial</div>
</div>
<p>Use a chat-like interface to interact with ChatGPT, and get answers to followup questions, challenge incorrect premises.</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://openai.com/blog/chatgpt/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">Self-hosted GPT3</h2>
<div class="badge badge-info m-2 md:ml-4 ml-0">Self-hosted</div>
<div class="badge badge-success m-2">Free trial</div>
</div>
<p>Access the OpenAI GPT 3 model on huggingface.co or download it to your machine</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://huggingface.co/openai-gpt" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
<div class="divider">Image generation</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">Midjourney</h2>
<div class="badge badge-warning m-2 md:ml-4 ml-0">Paid service</div>
<div class="badge badge-success m-2">Free trial</div>
</div>
<p>Midjourney focuses on generating aesthetically images. But requires the use of the chat application Discord.</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://www.midjourney.com/home/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">Dall-e</h2>
<div class="badge badge-warning m-2 md:ml-4 ml-0">Paid service</div>
<div class="badge badge-success m-2">Free trial</div>
</div>
<p>OpenAI image service Dall-E offers image generation and outpainting.</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://openai.com/dall-e-2/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">DreamStudio</h2>
<div class="badge badge-warning m-2 md:ml-4 ml-0">Paid service</div>
<div class="badge badge-success m-2">Free trial</div>
</div>
<p>DreamStudio by Stability AI is a new AI system powered by Stable Diffusion that can create realistic images, art and animation from a description</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://beta.dreamstudio.ai" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">Diffusion Bee</h2>
<div class="badge badge-info m-2 md:ml-4 ml-0">Self-hosted</div>
<div class="badge badge-error m-2">Requires Mac</div>
</div>
<p>Diffusion Bee is the easiest way to run Stable Diffusion locally on your Intel / M1 Mac. Comes with a one-click installer. No dependencies or technical knowledge needed.</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://diffusionbee.com/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
<div class="w-full mt-8">
<div class="md:flex">
<h2 class="text-2xl">Stable Diffusion</h2>
<div class="badge badge-info m-2 md:ml-4 ml-0">Self-hosted</div>
<div class="badge badge-warning m-2 ml-4">Paid service</div>
<div class="badge badge-success m-2">Free trial</div>
</div>
<p>On huggingface.co: Stable Diffusion 2.1 is the latest text-to-image model from StabilityAI.</p>
<a class="mt-4 btn btn-sm btn-outline" href="https://huggingface.co/spaces/stabilityai/stable-diffusion" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-3">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
</svg>
Visit homepage</a>
</div>
</div>
</div>
</footer>
<script>
function unlock_potential(e) {
document.getElementById("get-creative").style.display = ""
document.getElementById("get-creative").scrollIntoView({behavior:"smooth"})
}
const PRO_ID = (name) => btoa(name)
const PRODUCTS = [
{
id:btoa("The Holographic Projector"),
label:"The Holographic Projector",
desc:"a device that can create 3D holographic images, allowing you to create and manipulate virtual objects.",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231102016176148/zarathustrax_The_Holographic_Projector_-_a_device_that_can_crea_0e00440c-ce1e-4676-b65c-77bc0f49c82d.png",
page:{
byline:"Are you tired of boring, 2D displays? Are you ready to take your entertainment to the next level?",
first_p:"Introducing The Holographic Projector - a revolutionary device that can create stunning 3D holographic images right in your living room! With The Holographic Projector, you can create and manipulate virtual objects in a way that's never been possible before. Imagine playing a game of virtual chess with life-sized holographic pieces, or enjoying a movie with characters that appear to be right in front of you. The possibilities are endless with The Holographic Projector!",
second_p:"But don't just take our word for it. Order yours today and see the future of entertainment for yourself. The Holographic Projector - the must-have gadget for any true tech enthusiast!",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051450022698430464/zarathustrax_The_Holographic_Projector_a_device_that_can_create_ba0874fe-ed4b-4e20-8cc2-7553ec7e3ffb.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051450054159908914/zarathustrax_The_Holographic_Projector_a_device_that_can_create_d304cd40-1d78-4cd9-a9a5-e9c00a4a6530.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051450056026370131/zarathustrax_The_Holographic_Projector_a_device_that_can_create_31e55b06-1ac6-4c94-9339-0b94b80a2259.png"
},
],
product:{
price:"€ 749.000.-",
size:"40000 micrometer x 40000 micro x 2999 micro",
weight:"From 0.0001 g to 256 tons",
}
},
{
id:btoa("The Self-Assembly Furniture"),
label:"The Self-Assembly Furniture",
desc:"furniture that can be assembled quickly and easily with no tools required.",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"Introducing The Self-Assembly Furniture - the revolutionary new product that makes furniture assembly a breeze!",
first_p:"Are you tired of struggling to put together your furniture? Do you want to save time and frustration when setting up your home? With The Self-Assembly Furniture, you no longer have to spend hours trying to decipher complicated instructions and put together your furniture. Instead, simply place the pieces of your furniture in the desired location, and watch as they magically snap together and assemble themselves! This innovative technology makes it easy to set up your furniture in a matter of minutes, without the need for tools or expertise.",
second_p:"But that's not all. The Self-Assembly Furniture is also designed to be durable and long-lasting, so you can enjoy your furniture for years to come. Its sturdy construction and high-quality materials ensure that your furniture will withstand the rigors of daily use, while its sleek and modern design is sure to complement any home decor. \n Don't waste any more time on frustrating furniture assembly. Order The Self-Assembly Furniture today and experience the future of home furnishings!",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051453462614904832/zarathustrax_product_presentation_for_The_Self-Assembly_Furnitu_c66927d3-21bc-4f14-9e25-60d70aedd09b.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051453457745330196/zarathustrax_product_presentation_for_The_Self-Assembly_Furnitu_bca0f6e9-ce62-411b-92b5-4fdf15cb212a.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051453440016003133/zarathustrax_product_presentation_for_The_Self-Assembly_Furnitu_89df7e9d-16f7-423e-90a5-f1493f06dfa7.png"
},
],
product:{
price:"€ 555.432.-",
size:"From 1 cm x 1 cm x 1cm to ∞ x ∞ x ∞",
weight:"From 0.0002 g to 512 tons",
}
},
{
id:btoa("The Virtual Reality Couch"),
label:"The Virtual Reality Couch",
desc:"a couch that allows you to immerse yourself in a virtual reality experience.",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"Are you ready to take your entertainment to the next level?",
first_p:"Introducing The Virtual Reality Couch - the revolutionary new product that lets you fully immerse yourself in a virtual reality experience! With The Virtual Reality Couch, you can sit back, relax, and let yourself be transported to another world. The couch is equipped with advanced VR technology that allows you to experience a wide range of virtual environments, from exciting games to thrilling movies. Whether you're exploring a fantastical landscape or battling fierce monsters, The Virtual Reality Couch puts you right in the middle of the action.",
second_p:"But that's not all. The Virtual Reality Couch is also designed to be comfortable and supportive, so you can enjoy your VR experiences for hours on end. Its padded cushions and ergonomic design provide the perfect level of support, while its sleek and modern aesthetic is sure to complement any home decor. Don't miss out on the future of entertainment. Order The Virtual Reality Couch today and experience virtual reality like never before!",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051427966468501554/zarathustrax_a_vibrant_productshot_for_the_futuristic_The_Virtu_dcab29c1-279a-411e-a971-f6879b76f412.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051427963633152031/zarathustrax_a_vibrant_productshot_for_the_futuristic_The_Virtu_fa6a0a16-ff7d-4b81-9968-7c6406a8f6b1.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051427941847937045/zarathustrax_a_vibrant_productshot_for_the_futuristic_The_Virtu_7c40077b-1341-49d2-a363-d5d1097c317a.png"
},
],
product:{
price:"€ 404.503.-",
size:"From 1 m x 2 m x 3 m to 100 m x 200 m x 199 m",
weight:"From 256 kg to 1024 kg",
}
},
{
id:btoa("The Modular Shelving System"),
label:"The Modular Shelving System",
desc:"a shelving system that can be customized to fit your needs and can be easily expanded or rearranged",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"Introducing The Modular Shelving System - the versatile and customizable solution for all of your storage needs!",
first_p:"Are you tired of dealing with cluttered and disorganized shelves? Do you want a shelving system that can be customized to fit your unique needs? With The Modular Shelving System, you can easily and quickly create the perfect shelving arrangement for your home or office. The system consists of individual shelves that can be easily attached and detached from each other, allowing you to customize the shape, size, and configuration of your shelving unit. Whether you need a small bookshelf or a large storage unit, The Modular Shelving System has you covered.",
second_p:"But that's not all. The Modular Shelving System is also designed to be durable and long-lasting, so you can enjoy your shelves for years to come. Its high-quality materials and sturdy construction ensure that your shelves will withstand the rigors of daily use, while its sleek and modern design is sure to complement any decor.",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051456329492987974/zarathustrax_The_digital_automatic_Modular_Shelving_System_a_sh_3fcf2118-98f9-49b5-861d-fff23d3ecf24.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051456343107702784/zarathustrax_The_digital_automatic_Modular_Shelving_System_a_sh_63c7390e-6be8-4b4c-915b-ef6be5802091.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051456297725329468/zarathustrax_The_digital_automatic_Modular_Shelving_System_a_sh_ae37fad6-32ea-48ed-a29c-f512fc77a30b.png"
},
],
product:{
price:"€ 200.201.-",
size:"From 1 m x 2 m x 3 m to 100 km x 200 km x 199 km",
weight:"From 1 kg to 1.024.102 tons",
}
},
{
id:btoa("The Self-Cleaning Surface"),
label:"The Self-Cleaning Surface",
desc:"a surface that can clean itself automatically, reducing the need for cleaning and maintenance.",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"Are you tired of dealing with dirty and grimy surfaces? Do you want a surface that can clean itself with minimal effort on your part?",
first_p:"Introducing The Self-Cleaning Surface - the revolutionary new product that makes cleaning a breeze! With The Self-Cleaning Surface, you no longer have to spend time and energy scrubbing away dirt and grime. The surface is coated with advanced technology that repels dirt and stains, allowing them to be easily wiped away or rinsed off. This means that you can enjoy a clean and hygienic surface with minimal effort and fuss.",
second_p:"But that's not all. The Self-Cleaning Surface is also designed to be durable and long-lasting, so you can enjoy its benefits for years to come. Its high-quality materials and sturdy construction ensure that your surface will withstand the rigors of daily use, while its sleek and modern design is sure to complement any home or office decor.",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051457916856713246/zarathustrax_The_Self-Cleaning_Surface_a_surface_that_can_clean_4cc94e96-0946-487b-bf52-7ce4cbee7987.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051457907063013376/zarathustrax_The_Self-Cleaning_Surface_a_surface_that_can_clean_2651e8fa-7903-49e3-b004-029126fa1aef.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051457882580844554/zarathustrax_The_Self-Cleaning_Surface_a_surface_that_can_clean_c93b49df-2d08-47be-b33a-d58fa247872a.png"
},
],
product:{
price:"€ 200.201.-",
size:"From 1 m x 2 m x 3 m to 100 km x 200 km x 199 km",
weight:"From 1 kg to 1.024.102 tons",
}
},
{
id:btoa("Transformable furniture"),
label:"Transformable furniture",
desc:"This furniture can change shape and size at the touch of a button, allowing you to easily adapt your living space to your needs.",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"Why settle for boring, static furniture when you can have the ultimate in flexibility and style with transformable furniture?",
first_p:"Transformable furniture is the ultimate solution for those who crave versatility and functionality in their home. With just a touch of a button, this innovative furniture can morph and adapt to fit your changing needs, whether you're entertaining guests, lounging with a good book, or hosting a game night.",
second_p:"Plus, its sleek and modern design will add a touch of sophistication to any room.",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051459049218125824/zarathustrax_Transformable_furniture_This_furniture_can_change__fff3138c-6665-4bca-ae01-bf2c3987f77e.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051459086778105886/zarathustrax_Transformable_furniture_This_furniture_can_change__dcff307a-a2eb-448a-a9ec-746dfbab548a.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051459090666237952/zarathustrax_Transformable_furniture_This_furniture_can_change__3b9f06c5-a328-4706-a429-0ec8ff0678ae.png"
},
],
product:{
price:"€ 100.000.-",
size:"From 1 m x 2 m x 3 m to 100 km x 200 km x 199 km",
weight:"From 1 kg to 1.024.102 tons",
}
},
{
id:btoa("Virtual reality chairs"),
label:"Virtual reality chairs",
desc:"These chairs are equipped with VR technology, allowing you to fully immerse yourself in a digital world while remaining comfortable and supported",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"They are designed to enhance your VR experience, with features like haptic feedback, 360 degree sound, and motion tracking that make you feel like you are truly part of the game.",
first_p:"Introducing Virtual Reality Chairs – the future of entertainment and gaming. Our chairs are designed to provide a comfortable and supportive experience while you lose yourself in a virtual world. With advanced VR technology, you can explore new worlds, engage in thrilling adventures, and interact with friends and enemies alike, all from the comfort of your own home.",
second_p:"With Virtual Reality Chairs, you can take your entertainment and gaming to the next level. So why settle for a regular old chair when you can experience the future of VR? Try a Virtual Reality Chair today and see for yourself.",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051460234541015120/zarathustrax_Virtual_reality_chairs_These_chairs_are_equipped_w_42fc5746-545c-490d-b870-7ad5e6ebf7a9.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051460230657101854/zarathustrax_Virtual_reality_chairs_These_chairs_are_equipped_w_95a32d7d-415b-4aa8-92e4-6806815e81cf.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051460211061313566/zarathustrax_Virtual_reality_chairs_These_chairs_are_equipped_w_83112a00-7de9-4dd0-bae7-7bee82116991.png"
},
],
product:{
price:"€ 100.000.-",
size:"From 1 m x 2 m x 3 m to 100 km x 200 km x 199 km",
weight:"From 1 kg to 1.024.102 tons",
}
},
{
id:btoa("Teleportation devices"),
label:"Teleportation devices",
desc:"No more long lines at the airport, no more traffic jams, no more worrying about finding a parking spot",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"The future of transportation. You can instantly transport yourself or your belongings to any location in the world.",
first_p:"Our devices are more than just a convenient way to travel. They are also incredibly versatile, with the ability to transport a wide range of objects, from small packages to large vehicles. This means you can use your teleportation device for all sorts of applications, from personal travel to shipping and logistics.",
second_p:"And with our sleek and compact design, you can take your teleportation device with you wherever you go. So why settle for slow and inconvenient transportation when you can teleport? Try a teleportation device today and experience the future of travel.",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051461335101222952/zarathustrax_Teleportation_devices_No_more_long_lines_at_the_ai_e6f00c3f-2f2a-4637-8918-62ca9130c210.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051462006970007652/zarathustrax_detailed_product_presentation_of_Teleportation_dev_4496f9f7-c374-4966-9afa-c47a34c46d14.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051462545053077584/zarathustrax_detailed_product_presentation_of_Teleportation_dev_242924c9-102b-45ea-bcb3-d9ecaa6aeba3.png"
},
],
product:{
price:"€ 100.000.-",
size:"From 1 m x 2 m x 3 m to 100 km x 200 km x 199 km",
weight:"From 1 kg to 1.024.102 tons",
}
},
{
id:btoa("Invisibility cloaks"),
label:"Invisibility cloaks",
desc:"These cloaks makes the wearer invisible",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"The ultimate tool for stealth and deception.",
first_p:"With our advanced technology, you can make yourself and your belongings invisible to the naked eye, allowing you to move freely and undetected in any situation.",
second_p:"Invisibility Cloaks are the perfect tool for anyone who needs to move unnoticed, from military and law enforcement operatives to spies and undercover agents. So why settle for being seen when you can be invisible? Try an Invisibility Cloak today and take your stealth to the next level.",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051464473375936532/zarathustrax_vibrant_and_cool_presentation_of_Invisibility_cloa_3fb12c19-ccc6-4be5-b19a-dc53836966ae.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051464464895070238/zarathustrax_vibrant_and_cool_presentation_of_Invisibility_cloa_249ec929-e8c8-44c2-bc90-ac9565087399.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051464699943850034/zarathustrax_vibrant_and_cool_presentation_of_Invisibility_cloa_c1268463-2e18-4d48-b127-dec7b63aab6e.png"
},
],
product:{
price:"€ 100.000.-",
size:"From 1 m x 2 m x 3 m to 100 km x 200 km x 199 km",
weight:"From 1 kg to 1.024.102 tons",
}
},
{
id:btoa("Anti-gravity boots"),
label:"Anti-gravity boots",
desc:"allows the wearer to walk on walls or ceilings. These boots are designed to use advanced technology to counteract the effects of gravity",
image:"https://media.discordapp.net/attachments/1015694705960427550/1051231670457598022/zarathustrax_The_Self-Assembly_Furniture_-_furniture_that_can_b_f7843cb3-f4fa-4e1a-8bcb-f259e2815777.png",
page:{
byline:"Wear your anti-gravity boots anywhere, from the office to the great outdoors.",
first_p:"Anti-Gravity Boots are the perfect tool for anyone who loves to explore and experience new things. So why settle for the same old perspective when you can see the world from a whole new angle? Try a pair of Anti-Gravity Boots today and take your adventures to new heights.",
second_p:"Introducing Anti-Gravity Boots – the ultimate tool for exploring new dimensions. With our advanced technology, you can walk on walls, ceilings, and even upside down, allowing you to explore new environments and perspectives like never before.",
},
variants:[
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051462289603186758/zarathustrax_vibrant_product_presentation_of_Anti-gravity_boots_36beda49-19af-4b88-9642-f4b0793f5183.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051462312810258492/zarathustrax_vibrant_product_presentation_of_Anti-gravity_boots_e6932ebd-8553-4674-9e32-62e018979a84.png"
},
{
image:"https://media.discordapp.net/attachments/1015694705960427550/1051462591727292487/zarathustrax_vibrant_product_presentation_of_Anti-gravity_boots_030dbd2f-5653-4b01-86bb-c45629161697.png"
},
],
product:{
price:"€ 100.000.-",
size:"From 1 m x 2 m x 3 m to 100 km x 200 km x 199 km",
weight:"From 1 kg to 1.024.102 tons",
}
},
]
function add_to_basket(e) {
e.target.insertAdjacentHTML("afterend",`<div class="alert alert-error shadow-lg">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>Error! Try again later 🤔</span>
</div>
</div><img src="https://miro.medium.com/max/1400/0*bYNX97uOb6zIrSts.jpg" />`)
}
function enlarge_variant(e) {
const img = e.target
img.insertAdjacentHTML("beforebegin",`<img src="${img.src}" />`)
img.remove()
}
const SEEN = []
let SHOWING = false
const children = Array.from(document.getElementById("main").children)
const whipe_clean_except = async (focus_element) => {
window.history.pushState({page: 1}, "", "");
SEEN.push(focus_element)
SHOWING = true
const main = document.getElementById("main")
const view = document.getElementById("view")
const product_image = focus_element.style.backgroundImage.replace('url("',"").replace('")',"")
console.log("product_image",product_image)
main.style.transition = "500ms"
main.style.opacity = 0
if (SHOWING && document.getElementById("related-products")) {
document.getElementById("related-products").style.display = "none"
view.innerHTML = ""
}
window.onpopstate = function(event) {
// "event" object seems to contain value only when the back button is clicked
// and if the pop state event fires due to clicks on a button
// or a link it comes up as "undefined"
if(event){
// Code to handle back button or prevent from navigation
main.style.display = ""
main.style.opacity = 1
document.body.style.background = "#fff"
document.getElementById("logo").style.color = "#000"
view.style.display = "none"
view.innerHTML = ""
SHOWING = false
}
else{
// Continue user action through link or button
}
}
setTimeout(() => {
main.style.display = "none"
view.style.display = ""
},250)
const product_name = focus_element.children[1].children[0].children[0].innerText
const the_product = PRODUCTS.find((p) => p.id === btoa(product_name)) || {page:{},variants:[],product:{}}
console.log(the_product)
setTimeout(() => {
focus_element.style.height = "60vh"
view.insertAdjacentHTML("beforeend",`<div class="rounded" style="width:100%;height:90vh;background-size:cover;background-position:center center;background-repeat:no-repeat;background-image:url(${product_image});">s</div>`)
view.insertAdjacentHTML("beforeend",`
<div class="md:flex">
<div class="md:p-24 md:pr-12 md:w-9/12">
<h3 class="p-6 md:text-5xl text-2xl text-white font-pri" style="margin-top: -20vh; text-shadow:0 5px 25px rgba(0,0,0,1);">${the_product.page.byline}</h3>
<p class="p-6 text-2xl text-white">${the_product.page.first_p}</p>
<div class="flex gap-10 p-6">
<div class="rounded bg-contain md:bg-cover" style="width:100%;height:50vh;background-size:180%;background-position:center right;background-repeat:no-repeat;background-image:url(${product_image});"><span class="opacity-0">Hello</span></div>
</div>
<p class="p-6 text-2xl text-white">${the_product.page.second_p}</p>
<div class="pl-6 mt-4">
<div class="text-white">
<div class="text-white mb-8 pt-4">
<h2 class="text-3xl font-pri">Variants</h2>
<div class="flex gap-4 flex-wrap mt-4">
${the_product.variants.map((v) => `<img onclick="enlarge_variant(event)" style="width:25%;" class="rounded cursor-zoom-in" src="${v.image}" /> `).join("\n")}
</div>
</div>
<h2 class="text-3xl font-pri mb-4">Product information</h2>
<div class="overflow-hidden bg-white shadow sm:rounded-lg" style="filter:invert(1)">
<div class="border-t border-gray-200">
<dl>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Product name</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">${product_name}</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Size</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">${the_product.product.size}</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Weight</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">${the_product.product.weight}</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Launch date</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">${new Date().toLocaleDateString()}</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Warrenty</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">What?</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">About</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">${focus_element.children[1].children[0].children[1].innerText}</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-gray-500">Attachments</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<ul role="list" class="divide-y divide-gray-200 rounded-md border border-gray-200">
<li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
<div class="flex w-0 flex-1 items-center">
<!-- Heroicon name: mini/paper-clip -->
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
</svg>
<span class="ml-2 w-0 flex-1 truncate">product_sheet.pdf</span>
</div>
<div class="ml-4 flex-shrink-0">
<div class="tooltip tooltip-left" data-tip="Only available after purchase">
<a class="cursor-pointer font-medium text-indigo-600 hover:text-indigo-500">Download</a>
</div>
</div>
</li>
<li class="flex items-center justify-between py-3 pl-3 pr-4 text-sm">
<div class="flex w-0 flex-1 items-center">
<!-- Heroicon name: mini/paper-clip -->
<svg class="h-5 w-5 flex-shrink-0 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z" clip-rule="evenodd" />
</svg>
<span class="ml-2 w-0 flex-1 truncate">product_support.pdf</span>
</div>
<div class="ml-4 flex-shrink-0">
<div class="tooltip tooltip-left" data-tip="Only available after purchase">
<a class="cursor-pointer font-medium text-indigo-600 hover:text-indigo-500">Download</a>
</div>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="flex gap-10 p-6" style="display:none;">
<div class="rounded" style="width:100%;height:50vh;background-size:150%;background-position:center center;background-repeat:no-repeat;background-image:url(${product_image});"><span class="opacity-0">Hello</span></div>
</div>
</div>
<div class="md:p-24 md:pl-0 p-8 text-white sticky md:w-3/12" style="top:0;position:sticky;">
<h2 class="text-info text-sm font-bold mt-12">AIKE Friendly price</h2>
<h2 class="text-2xl font-bold">${focus_element.children[1].children[0].children[0].innerText}</h2>
<p class="opacity-70 mt-2">${focus_element.children[1].children[0].children[1].innerText}</p>
<h2 class="text-4xl font-bold mt-4 mb-4">${the_product.product.price}</h2>
<h3 class="opacity-70">Regular price: Non of your business</h3>
<h3 class="opacity-70">Price may include VAT</h3>
<h3 class="opacity-70">Price may be wrong</h3>
<div class="flex">
<div class="rating rating-xs mt-4">
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked />
</div>
<h3 class="text-sm font-bold m-3 mr-2 opacity-50">6/5</h3>
</div>
<button class="btn btn-success btn-lg block mt-4" onclick="add_to_basket(event)">Add to basket</button>
<h2 class="text-success text-sm font-bold mt-12">Reviews</h2>
<div class="p-4" style="border-left:2px solid hsl(var(--s))">
<div class="flex">
<div class="rating rating-base mt-4">
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked />
</div>
<h3 class="text-base font-bold m-4 mr-2 opacity-50">6/5</h3>
</div>
<blockquote class="text-2xl">Such amazing graceful product, much joy and happinies</blockquote>
<div class="flex mt-2">
<div class="p-2 pl-0">
<div class="avatar">
<div class="w-8 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
</div>
<h3 class="mt-3 font-bold ml-0">Alice Kooper Smith</h3>
</div>
</div>
<div class="p-4" style="border-left:2px solid hsl(var(--s))">
<div class="flex">
<div class="rating rating-base mt-4">
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked />
</div>
<h3 class="text-base font-bold m-4 mr-2 opacity-50">6/5</h3>
</div>
<blockquote class="text-2xl">It's a truly innovative product that provides a glimpse into the future of entertainment, and it's sure to be a hit with tech enthusiasts and early adopters alike.</blockquote>
<div class="flex mt-2">
<div class="p-2 pl-0">
<div class="avatar">
<div class="w-8 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
</div>
<h3 class="mt-3 font-bold ml-0">Steve Works</h3>
</div>
</div>
<div class="p-4" style="border-left:2px solid hsl(var(--s))">
<div class="flex">
<div class="rating rating-base mt-4">
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" />
<input type="radio" name="rating-5" class="mask mask-star-2 bg-orange-400" checked />
</div>
<h3 class="text-base font-bold m-4 mr-2 opacity-50">6/5</h3>
</div>
<blockquote class="text-2xl">I was impressed by its ease of use and its impressive performance</blockquote>
<div class="flex mt-2">
<div class="p-2 pl-0">
<div class="avatar">
<div class="w-8 rounded-full">
<img src="https://placeimg.com/192/192/people" />
</div>
</div>
</div>
<h3 class="mt-3 font-bold ml-0">Carl Warx</h3>
</div>
</div>
</div>
</div>`)
// const main_without_current = [...main.children].filter((c) => {
// console.log("main without",c)
// })
view.insertAdjacentHTML("beforeend",`<h1 class="text-6xl m-6 ml-16 mb-16 text-white font-bold text-pri">Other products</h1><div id="related-products">${main.innerHTML}</div>`)
const children = [...document.getElementById("related-products").querySelectorAll(".hero")]
console.log(children)
children.forEach((child) => {
if (child.isEqualNode(focus_element)) {
console.log(child.parentNode.style.width)
child.style.filter = "grayscale(1)"
child.style.opacity = 0.4
}
else if (SEEN.find((seen) => child.isEqualNode(seen))) {
child.style.filter = "grayscale(1)"
child.style.opacity = 0.4
}
})
window.scrollTo()
},500)
}
document.addEventListener("click",async (e) => {
if (e.target.classList.contains("btn-primary")) {
document.body.style.background = "#000"
document.getElementById("logo").style.color = "#fff"
const container = e.target.parentNode.parentNode.parentNode
console.log(container)
await whipe_clean_except(container)
}
})
</script>
</body>
</html>