From 5eb9e9d4f6e84165bda2370e3ce47a10c6eed745 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Sun, 11 May 2025 19:18:41 +0530
Subject: [PATCH] made the ui, no funtionality yet! first time using tailwind
 css. this tooooolllllkkk WAY TOOO LONG

---
 src/routes/+layout.svelte      |   6 +-
 src/routes/+page.svelte        |  20 +++++-
 src/routes/create/+page.svelte | 119 +++++++++++++++++++++++++++++++++
 src/routes/join/+page.svelte   |  19 ++++++
 static/favicon.png             | Bin 1571 -> 0 bytes
 5 files changed, 162 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/create/+page.svelte
 create mode 100644 src/routes/join/+page.svelte
 delete mode 100644 static/favicon.png

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 88e45e3..2b7d09f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,4 +3,8 @@
 	let { children } = $props();
 </script>
 
-<div class="h-full bg-black">{@render children()}</div>
+<div class="h-full text-white">{@render children()}</div>
+
+<style>:root {
+	background-color: black;
+}</style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 30d28c5..7f94d35 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1 +1,19 @@
-<h1 class="text-red-500 underline text-[100px] font-mono">testing tailwind</h1>
+<script>
+	import { goto } from '$app/navigation';
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
+		<h1 class="m-[0] text-6xl">DaKahootClone</h1>
+		<p class="m-[0] mb-2 text-lg text-gray-400">The best eveer kahoot clone.</p>
+		<button
+			on:click={() => goto('/join')}
+			class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+			>Join a game</button
+		>
+		<button
+			class="cursor-pointer rounded-full bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+			on:click={() => goto('/create')}>Create and Host a game</button
+		>
+	</div>
+</div>
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
new file mode 100644
index 0000000..82b0550
--- /dev/null
+++ b/src/routes/create/+page.svelte
@@ -0,0 +1,119 @@
+<script>
+	let questions = $state([
+		{
+			name: '',
+			answers: ['', '', '', ''],
+			correctAnswer: undefined
+		}
+	]);
+
+	function startGame() {
+		if (questions.some((question) => question.name === '')) {
+			alert('Please fill in the question for each question.');
+			return;
+		}
+		if (
+			questions.some((question) =>
+				question.answers.some((answer) => answer === '')
+			)
+		) {
+			alert('Please fill in each of the options for each question.');
+			return;
+		}
+		if (questions.some((question) => question.correctAnswer === undefined)) {
+			alert('Please select a correct answer for each question.');
+			return;
+		}
+
+        alert('Game started!');
+	}
+</script>
+
+<div class="bg-grey-900 flex justify-center p-5">
+	<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
+		{#each questions as question, i}
+			<div class="flex items-center gap-3">
+				<div
+					class="mb-3 flex flex-col items-center justify-center gap-1 rounded-2xl bg-gray-600 p-2"
+				>
+					<div class="flex h-fit items-center gap-3">
+						<h1 class="mt-2 mb-3 text-2xl">Q{i + 1}.</h1>
+						<input
+							type="text"
+							bind:value={question.name}
+							placeholder="Question {i + 1}"
+							class="h-fit w-[500px] rounded-xl bg-gray-800 p-1 text-center text-2xl text-white"
+						/><button
+							onclick={() => {
+								if (questions.length > 1) {
+									if (
+										confirm('Are you sure you want to delete this question? You cant undo this.')
+									) {
+										questions.splice(i, 1);
+									}
+								} else {
+									alert('You need at least one question.');
+								}
+							}}
+							class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-red-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+							><svg
+								xmlns="http://www.w3.org/2000/svg"
+								height="24px"
+								viewBox="0 -960 960 960"
+								width="24px"
+								fill="#FFFFFF"
+								><path
+									d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
+								/></svg
+							>Delete question</button
+						>
+					</div>
+					<div class="flex flex-col gap-2">
+						{#each question.answers as answer, i2}
+							<div class="flex items-center gap-2">
+								<input type="radio" value={i2} name={i} bind:group={question.correctAnswer} /><input
+									placeholder="Option {i2 + 1}"
+									bind:value={question.answers[i2]}
+									class="rounded-lg bg-gray-800 p-1 text-center text-white"
+								/>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+		{/each}
+		<div class="flex gap-3">
+			<button
+				onclick={() => {
+					questions.push({
+						name: '',
+						answers: ['', '', '', ''],
+						correctAnswer: undefined
+					});
+				}}
+				class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					height="24px"
+					viewBox="0 -960 960 960"
+					width="24px"
+					fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
+				>New question</button
+			>
+			<button
+				onclick={startGame}
+				class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					height="24px"
+					viewBox="0 -960 960 960"
+					width="24px"
+					fill="#FFFFFF"
+					><path
+						d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
+					/></svg
+				>Start Quiz</button
+			>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/join/+page.svelte b/src/routes/join/+page.svelte
new file mode 100644
index 0000000..50a4f1a
--- /dev/null
+++ b/src/routes/join/+page.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { goto } from '$app/navigation';
+
+</script>
+
+<div class="bg-grey-900 flex h-full items-center justify-center">
+	<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
+		<h1 class="m-[0] mb-3 text-5xl">Join a game here</h1>
+		<input placeholder="Enter game pin" class="rounded-lg bg-gray-800 p-2 text-center text-white" />
+		<input
+			placeholder="Enter your name"
+			class="rounded-lg bg-gray-800 p-2 text-center text-white"
+		/>
+		<button
+			class="cursor-pointer rounded-full bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
+			>Join the game</button
+		>
+	</div>
+</div>
\ No newline at end of file
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 825b9e65af7c104cfb07089bb28659393b4f2097..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1571
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
VHuiSbmk|H}002ovPDHLkV1f%e^4kCa