From 6637dd541493fb030ba26951ec51480c8b9c6b15 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Sun, 4 May 2025 12:51:49 +0530
Subject: [PATCH] added a basic clock!

---
 src/IdleScreen/main.svelte             |   5 +
 src/IdleScreen/time.svelte             | 167 +++++++++++++++++++++++++
 src/SelectionMenue/TypeSelector.svelte |  83 +++++++++---
 src/app.svelte                         |   2 +
 4 files changed, 243 insertions(+), 14 deletions(-)
 create mode 100644 src/IdleScreen/main.svelte
 create mode 100644 src/IdleScreen/time.svelte

diff --git a/src/IdleScreen/main.svelte b/src/IdleScreen/main.svelte
new file mode 100644
index 0000000..af856c3
--- /dev/null
+++ b/src/IdleScreen/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import Time from "./time.svelte";
+
+</script>
+<Time />
\ No newline at end of file
diff --git a/src/IdleScreen/time.svelte b/src/IdleScreen/time.svelte
new file mode 100644
index 0000000..cb055c3
--- /dev/null
+++ b/src/IdleScreen/time.svelte
@@ -0,0 +1,167 @@
+<script>
+	import { onMount } from "svelte";
+
+	let hour1;
+	let hour2;
+	let min1;
+	let min2;
+	let sec1;
+	let sec2;
+
+	function updateTime() {
+		const now = new Date();
+		const hours = now.getHours().toString().padStart(2, "0");
+		const minutes = now.getMinutes().toString().padStart(2, "0");
+		const seconds = now.getSeconds().toString().padStart(2, "0");
+
+		hour1.scrollTop = parseInt(hours[0]) * 200;
+		hour2.scrollTop = parseInt(hours[1]) * 200;
+		min1.scrollTop = parseInt(minutes[0]) * 200;
+		min2.scrollTop = parseInt(minutes[1]) * 200;
+		sec1.scrollTop = parseInt(seconds[0]) * 75;
+		sec2.scrollTop = parseInt(seconds[1]) * 75;
+	}
+
+	onMount(() => {
+		updateTime();
+		setInterval(updateTime, 1000);
+	});
+</script>
+
+<div id="root">
+	<div class="rowOfNumbers" bind:this={hour1}>
+		<h1>0</h1>
+		<h1>1</h1>
+		<h1>2</h1>
+		<h1>3</h1>
+		<h1>4</h1>
+		<h1>5</h1>
+		<h1>6</h1>
+		<h1>7</h1>
+		<h1>8</h1>
+		<h1>9</h1>
+	</div>
+	<div class="rowOfNumbers" bind:this={hour2}>
+		<h1>0</h1>
+		<h1>1</h1>
+		<h1>2</h1>
+		<h1>3</h1>
+		<h1>4</h1>
+		<h1>5</h1>
+		<h1>6</h1>
+		<h1>7</h1>
+		<h1>8</h1>
+		<h1>9</h1>
+	</div>
+	<h1 id="colen">:</h1>
+	<div class="rowOfNumbers" bind:this={min1}>
+		<h1>0</h1>
+		<h1>1</h1>
+		<h1>2</h1>
+		<h1>3</h1>
+		<h1>4</h1>
+		<h1>5</h1>
+		<h1>6</h1>
+		<h1>7</h1>
+		<h1>8</h1>
+		<h1>9</h1>
+	</div>
+	<div class="rowOfNumbers" bind:this={min2}>
+		<h1>0</h1>
+		<h1>1</h1>
+		<h1>2</h1>
+		<h1>3</h1>
+		<h1>4</h1>
+		<h1>5</h1>
+		<h1>6</h1>
+		<h1>7</h1>
+		<h1>8</h1>
+		<h1>9</h1>
+	</div>
+	<h1 id="thedot">.</h1>
+	<div class="rowOfNumbersSec" bind:this={sec1}>
+		<h1>0</h1>
+		<h1>1</h1>
+		<h1>2</h1>
+		<h1>3</h1>
+		<h1>4</h1>
+		<h1>5</h1>
+		<h1>6</h1>
+		<h1>7</h1>
+		<h1>8</h1>
+		<h1>9</h1>
+	</div>
+	<div class="rowOfNumbersSec" bind:this={sec2}>
+		<h1>0</h1>
+		<h1>1</h1>
+		<h1>2</h1>
+		<h1>3</h1>
+		<h1>4</h1>
+		<h1>5</h1>
+		<h1>6</h1>
+		<h1>7</h1>
+		<h1>8</h1>
+		<h1>9</h1>
+	</div>
+</div>
+
+<style>
+	#root {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+
+	#colen {
+		font-size: 200px;
+		margin: 0;
+	}
+
+	#thedot {
+		font-size: 75px;
+		margin: 0;
+		color: #585858;
+	}
+
+	.rowOfNumbers {
+		display: flex;
+		flex-direction: column;
+		height: 200px;
+		overflow-y: hidden;
+		scroll-behavior: smooth;
+	}
+
+	.rowOfNumbers h1 {
+		height: 200px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.rowOfNumbers > h1 {
+		font-size: 200px;
+		margin: 0;
+	}
+
+	.rowOfNumbersSec {
+		display: flex;
+		flex-direction: column;
+		height: 75px;
+		overflow-y: hidden;
+		scroll-behavior: smooth;
+	}
+
+	.rowOfNumbersSec h1 {
+		height: 75px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.rowOfNumbersSec > h1 {
+		font-size: 75px;
+		margin: 0;
+		color: #585858;
+	}
+</style>
diff --git a/src/SelectionMenue/TypeSelector.svelte b/src/SelectionMenue/TypeSelector.svelte
index 2d49232..9dc7fc2 100644
--- a/src/SelectionMenue/TypeSelector.svelte
+++ b/src/SelectionMenue/TypeSelector.svelte
@@ -1,10 +1,28 @@
 <div id="root">
 	<h1>ClassRoomStuff</h1>
 	<h2>
-		A colection of awsome Tools, Games And more. Made to be used in any kind
-		of classroom!
+		A collection of awesome tools, games, and more — made to be used in any
+		kind of classroom!
 	</h2>
 	<div id="items">
+		<a href="#/IdleScreen">
+			<button>
+				<span class="front">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						height="50px"
+						viewBox="0 -960 960 960"
+						width="50px"
+						fill="#FFFFFF"
+						><path
+							d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"
+						/></svg
+					>
+					Idle Screen
+					<p>A Clock and Timetable; thats all!</p></span
+				>
+			</button></a
+		>
 		<a href="#/Wordle">
 			<button>
 				<span class="front">
@@ -18,31 +36,41 @@
 							d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm16-86 114-114h336l114 114q2 2 16 6 11 0 17.5-6.5T800-304l-44-308q-4-29-26-48.5T678-680H282q-30 0-52 19.5T204-612l-44 308q-2 11 4.5 17.5T182-280q2 0 16-6Zm482-154q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-80-120q17 0 28.5-11.5T640-600q0-17-11.5-28.5T600-640q-17 0-28.5 11.5T560-600q0 17 11.5 28.5T600-560ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Zm170-40Z"
 						/></svg
 					>
-					GAMES</span
+					GAMES (Wordle)
+					<p>A Wordle clone with extra features!</p></span
 				>
 			</button></a
 		>
 	</div>
 </div>
 
+<div id="BottomBadge">
+	Made by <a href="https://rezhack.xyz" target="_blank">RezHackXYZ</a> for
+	<a href="https://neighborhood.hackclub.com/" target="_blank">Neighborhood</a
+	>!
+	<a href="https://github.com/RezHackXYZ/ClassRoomStuff" target="_blank"
+		>Contribute here</a
+	> if you want.
+</div>
+
 <style>
-#root {
-        height: 100%;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
+	#root {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
 
 	h1 {
 		text-align: center;
-		margin: 5px 0px;
-		font-size: 50px;
+		margin: 0;
+		font-size: 60px;
 	}
 
 	h2 {
 		text-align: center;
-		margin: 5px 0px;
+		margin: 0;
 		color: #797979;
 		font-size: 30px;
 	}
@@ -53,7 +81,7 @@
 		align-items: center;
 		gap: 20px;
 		flex-wrap: wrap;
-		margin-top: 40px;
+		margin-top: 60px;
 	}
 
 	button {
@@ -63,6 +91,7 @@
 		padding: 0;
 		cursor: pointer;
 		outline-offset: 4px;
+		max-width: 400px;
 	}
 
 	.front {
@@ -81,6 +110,13 @@
 		font-size: 40px;
 	}
 
+	p {
+		font-size: 15px;
+		color: #aaaaaa;
+		margin: 0;
+		text-align: center;
+	}
+
 	button:hover .front {
 		transform: translateY(-10px);
 	}
@@ -88,4 +124,23 @@
 	button:active .front {
 		transform: translateY(-3px);
 	}
+
+	#BottomBadge {
+		position: fixed;
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+		background-color: #242424;
+		color: #aaaaaa;
+		margin-bottom: 10px;
+		width: fit-content;
+		align-self: center;
+		padding: 5px;
+		font-size: 20px;
+		border-radius: 10px;
+	}
+
+	a {
+		color: #aaaaaa;
+	}
 </style>
diff --git a/src/app.svelte b/src/app.svelte
index 8cdbe76..fed2300 100644
--- a/src/app.svelte
+++ b/src/app.svelte
@@ -2,10 +2,12 @@
 	import Router from "svelte-spa-router";
 	import Wordle from "./wordle/game.svelte";
 	import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
+	import IdleScreen from "./IdleScreen/main.svelte";
 
 	let routes = {
 		"/": TypeSelector,
 		"/Wordle": Wordle,
+		"/IdleScreen": IdleScreen,
 	};
 </script>