flo-bit.dev
[READ-ONLY] Mirror of https://github.com/flo-bit/youtube-party-dj. democratic youtube player, everyone can vote and add songs, uni project, made with uix
1.7 kB
60 lines
1import { redirect } from "uix/utils/window-apis.ts"
2import { Context } from "uix/routing/context.ts";
3import { addClientsInfo} from "backend/sessions.ts";
4
5export default function Welcome(ctx: Context) {
6
7 const user_name = $$("");
8 const code = (ctx.searchParams.get('code') ?? "XXXX");
9
10 const handleWithNick = () => {
11 if(!user_name.val){
12 return;
13 }
14 addClientsInfo(code, user_name.val);
15 const url = `/client/${encodeURIComponent(code)}`;
16 redirect(url);
17 };
18
19 const handleAnonym = () => {
20 addClientsInfo(code, "anon");
21 const url = `/client/${encodeURIComponent(code)}`;
22 redirect(url);
23 };
24
25 return (
26 <main class="w-screen h-screen absolute inset-0 text-white bg-gray-950 flex flex-col items-center justify-center">
27
28 <h1 class="text-6xl text-rose-500 font-bold m-5 text-center p-8"> Welcome <br></br> to the Party </h1>
29
30 <div class="flex flex-col items-center w-full md:w-1/2 px-5">
31
32 <input
33 class="text-black font-bold rounded-lg py-3 w-full text-center text-2xl"
34 type="text"
35 placeholder={"Type in your nick for the Party"}
36 value={user_name}
37 onchange={() => {
38 user_name.val = user_name;
39 }}
40 />
41
42 <button
43 class="bg-rose-500 hover:bg-rose-600 text-white font-bold rounded-full text-2xl py-4 px-8 m-5 w-full"
44 onclick={handleWithNick}
45 > Lets Gooo !
46 </button>
47
48 <div class="w-full h-px bg-gray-400 my-1 md:my-1"></div>
49
50 <button
51 class="bg-rose-500 hover:bg-rose-600 text-white font-bold rounded-full text-2xl py-4 px-8 m-5 w-full"
52 onclick={handleAnonym}
53 > Continue anonymously :)
54 </button>
55
56 </div>
57
58 </main>
59 );
60}