flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/particle-surfer.
flo-bit.dev/particle-surfer/
3.6 kB
126 lines
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5
6 <link rel="stylesheet" href="src/app.css" />
7 <meta name="viewport" content="width=device-width, initial-scale=1" />
8
9 <style>
10 .circle {
11 transform: rotate(-90deg);
12 stroke-linecap: round;
13 }
14 </style>
15
16 <title>particle surfer</title>
17 </head>
18
19 <body scroll="no" class="overflow-hidden bg-black touch-none select-none">
20 <div id="pixi-container"></div>
21 <script src="src/main.js" type="module"></script>
22
23 <div class="absolute top-2 right-2 w-16 h-16 z-50 hidden" id="progress-bar">
24 <!-- svg circle -->
25 <svg class="circle" viewBox="0 0 100 100" class="h-full w-full">
26 <circle
27 cx="50"
28 cy="50"
29 r="40"
30 stroke="#f5f5f5"
31 stroke-width="10"
32 fill="none"
33 />
34 </svg>
35 </div>
36
37 <div
38 class="absolute inset-0 w-full h-full text-white flex flex-col mt-4 text-center items-center justify-between text-6xl md:text-9xl font-bold"
39 style="
40 font-family:
41 "Arial Rounded MT Bold", "Comic Sans MS",
42 sans-serif;
43 "
44 id="main-menu"
45 >
46 <div></div>
47 <div class="flex flex-col items-center justify-center mt-12">
48 particle<br />
49 surfer
50 <button
51 class="text-4xl md:mt-12 mt-8 cursor-pointer text-neutral-100 hover:text-neutral-200"
52 id="start-button"
53 >
54 start
55 </button>
56 </div>
57 <div
58 class="flex flex-col items-center justify-center text-lg mb-8 px-4 text-neutral-200"
59 style="
60 font-family:
61 "Arial Rounded MT", "Comic Sans MS", sans-serif;
62 "
63 >
64 let the particles carry you for one full loop, hold space to slow down time
65 </div>
66 </div>
67
68 <div
69 class="absolute inset-0 w-full h-full text-white flex flex-col mt-4 text-center items-center justify-center text-6xl md:text-9xl font-bold hidden"
70 style="
71 font-family:
72 "Arial Rounded MT Bold", "Comic Sans MS",
73 sans-serif;
74 "
75 id="pause-menu"
76 >
77 level <br />
78 complete
79 <button
80 class="text-4xl md:mt-16 mt-8 cursor-pointer text-neutral-100 hover:text-neutral-200"
81 id="next-level-button"
82 >
83 next level
84 </button>
85 </div>
86
87
88 <div
89 class="absolute inset-0 w-full h-full text-white flex flex-col mt-4 text-center items-center justify-center text-6xl md:text-9xl font-bold hidden"
90 style="
91 font-family:
92 "Arial Rounded MT Bold", "Comic Sans MS",
93 sans-serif;
94 "
95 id="death-menu"
96 >
97 you <br />
98 died
99 <button
100 class="text-4xl md:mt-16 mt-8 cursor-pointer text-neutral-100 hover:text-neutral-200"
101 id="restart-button"
102 >
103 restart
104 </button>
105 </div>
106
107 <div
108 id="overlay"
109 class="fixed inset-0 w-full h-full pointer-events-none transition-opacity duration-1000 bg-radial-[at_50%_55%] from-transparent via-transparent to-neutral-800/20"
110 ></div>
111
112 <div class="absolute top-2 right-2 w-16 h-16 z-40">
113 <!-- svg circle -->
114 <svg viewBox="0 0 100 100" class="h-full w-full text-neutral-700/50">
115 <circle
116 cx="50"
117 cy="50"
118 r="40"
119 stroke="currentColor"
120 stroke-width="10"
121 fill="none"
122 />
123 </svg>
124 </div>
125 </body>
126</html>