From 1ac14dca72e771907a64a31c5ca3542a805cac2b Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Mon, 5 May 2025 19:19:20 +0530
Subject: [PATCH] Now you can edit the time table!

---
 src/IdleScreen/EditTimetable.svelte | 141 +++++++++++++++++++++++
 src/IdleScreen/main.svelte          | 166 +++++++++++++++++++++++++++-
 src/IdleScreen/time.svelte          |   2 +-
 src/IdleScreen/timeTable.svelte     |  42 ++++---
 src/RandomName/main.svelte          |  10 --
 5 files changed, 333 insertions(+), 28 deletions(-)
 create mode 100644 src/IdleScreen/EditTimetable.svelte

diff --git a/src/IdleScreen/EditTimetable.svelte b/src/IdleScreen/EditTimetable.svelte
new file mode 100644
index 0000000..258c0a2
--- /dev/null
+++ b/src/IdleScreen/EditTimetable.svelte
@@ -0,0 +1,141 @@
+<script>
+	import { newTable } from "./timeTable.svelte";
+
+	let table = JSON.parse(localStorage.getItem("TimeTable"));
+</script>
+
+<div id="root">
+	<div id="root">
+		<div id="wrap">
+			<div class="Header Row">
+				<span class="DayOfWeek" style="Opacity: 0;"></span>
+				{#each table.Times as time}
+					<input
+						type="text"
+						onchange={() => {
+							newTable(table);
+						}}
+						bind:value={time}
+					/>
+				{/each}
+			</div>
+			<div class="Row">
+				<span class="DayOfWeek">Monday</span>
+				{#each table.Monday as time}
+					<input
+						type="text"
+						onchange={() => {
+							newTable(table);
+						}}
+						bind:value={time}
+					/>
+				{/each}
+			</div>
+			<div class="Row">
+				<span class="DayOfWeek">Tuesday</span>
+				{#each table.Tuesday as time}
+					<input
+						type="text"
+						onchange={() => {
+							newTable(table);
+						}}
+						bind:value={time}
+					/>
+				{/each}
+			</div>
+			<div class="Row">
+				<span class="DayOfWeek">Wednesday</span>
+				{#each table.Wednesday as time}
+					<input
+						type="text"
+						onchange={() => {
+							newTable(table);
+						}}
+						bind:value={time}
+					/>
+				{/each}
+			</div>
+			<div class="Row">
+				<span class="DayOfWeek">Thursday</span>
+				{#each table.Thursday as time}
+					<input
+						type="text"
+						onchange={() => {
+							newTable(table);
+						}}
+						bind:value={time}
+					/>
+				{/each}
+			</div>
+			<div class="Row">
+				<span class="DayOfWeek">Friday</span>
+				{#each table.Friday as time}
+					<input
+						type="text"
+						onchange={() => {
+							newTable(table);
+						}}
+						bind:value={time}
+					/>
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	#root {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+		margin: 10px;
+		justify-content: center;
+		background-color: #303030;
+		padding: 10px;
+		margin: 20px;
+		border-radius: 10px;
+		width: fit-content;
+	}
+
+	#wrap {
+		display: flex;
+		background-color: #252525;
+		padding: 20px;
+		border-radius: 20px;
+		flex-direction: column;
+		gap: 5px;
+	}
+
+	.Row {
+		display: flex;
+		gap: 2px;
+	}
+
+	span {
+		font-size: 15px;
+		color: white;
+		background-color: #3f3f3f;
+		padding: 5px;
+		border-radius: 10px;
+		width: 100px;
+		text-align: center;
+	}
+
+	.DayOfWeek {
+		width: 100px;
+		background-color: #30492e;
+	}
+
+	input {
+		font-size: 15px;
+		color: white;
+		background-color: #3f3f3f;
+		padding: 5px;
+		border-radius: 10px;
+		width: 100px;
+		text-align: center;
+	}
+	.Header > input {
+		background-color: #30492e;
+	}
+</style>
diff --git a/src/IdleScreen/main.svelte b/src/IdleScreen/main.svelte
index cbe7879..c70ae23 100644
--- a/src/IdleScreen/main.svelte
+++ b/src/IdleScreen/main.svelte
@@ -1,7 +1,169 @@
 <script>
 	import Time from "./time.svelte";
 	import TimeTable from "./timeTable.svelte";
+	import EditTimetableDiv from "./EditTimetable.svelte";
+
+	function EditTimetable() {
+		console.log("Edit timetable");
+		TabOpen.v = true;
+	}
+
+	let TabOpen = { v: false };
 </script>
 
-<TimeTable />
-<Time />
+<div id="wrap">
+	<div id="nav">
+		<a href="#/" aria-label="Back to main menu"
+			><button aria-label="Back to main menu"
+				><span class="front"
+					><svg
+						xmlns="http://www.w3.org/2000/svg"
+						height="24px"
+						viewBox="0 -960 960 960"
+						width="24px"
+						fill="#FFFFFF"
+						><path
+							d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"
+						/></svg
+					> GO BACK
+				</span></button
+			></a
+		>
+		<h1>Idle Screen</h1>
+		<div>
+			<button
+				aria-label="Back to main menu"
+				onclick={() => EditTimetable()}
+				><span class="front"
+					><svg
+						xmlns="http://www.w3.org/2000/svg"
+						height="24px"
+						viewBox="0 -960 960 960"
+						width="24px"
+						fill="#FFFFFF"
+						><path
+							d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v200h-80v-40H200v400h280v80H200Zm0-560h560v-80H200v80Zm0 0v-80 80ZM560-80v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T903-300L683-80H560Zm300-263-37-37 37 37ZM620-140h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z"
+						/></svg
+					> Edit timetable
+				</span></button
+			>
+		</div>
+	</div>
+
+	<div id="root">
+		<TimeTable /><Time />
+	</div>
+</div>
+
+{#if TabOpen.v !== false}
+	<div id="UperLayer">
+		<div id="wrapClose">
+			<EditTimetableDiv />
+			<button
+				class="close"
+				onclick={() => (TabOpen.v = false)}
+				aria-label="close">CLOSE</button
+			>
+		</div>
+	</div>
+{/if}
+
+<style>
+	#wrap {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	#root {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		justify-content: space-evenly;
+	}
+
+	#nav {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		background-color: #121212;
+		color: white;
+	}
+
+	button {
+		background: #292929;
+		border-radius: 12px;
+		border: none;
+		margin: 10px;
+		padding: 2px 0px;
+		cursor: pointer;
+		outline-offset: 4px;
+		max-width: 400px;
+	}
+	button:hover .front {
+		transform: translateY(-7px);
+	}
+
+	button:active .front {
+		transform: translateY(-2px);
+	}
+
+	.front {
+		display: flex;
+		text-align: center;
+		align-items: center;
+		padding: 5px;
+		border-radius: 12px;
+
+		background: #4d4d4d;
+		color: white;
+		transform: translateY(-4px);
+		transition: all 0.1s ease-in-out;
+		font-family: "JetBrains Mono", monospace;
+		font-size: 25px;
+	}
+	h1 {
+		text-align: center;
+		margin: 5px 0px;
+		text-decoration: underline #444;
+		position: fixed;
+		top: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+	}
+
+	span {
+		font-size: 0.5em;
+		text-decoration: none;
+		color: #444;
+	}
+
+	#UperLayer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		backdrop-filter: blur(5px);
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	#wrapClose {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.close {
+		background-color: #2b2b2b;
+		color: #888;
+		border: none;
+		padding: 10px 20px;
+		border-radius: 5px;
+		cursor: pointer;
+		align-self: center;
+	}
+</style>
diff --git a/src/IdleScreen/time.svelte b/src/IdleScreen/time.svelte
index 058b08d..ac18ab2 100644
--- a/src/IdleScreen/time.svelte
+++ b/src/IdleScreen/time.svelte
@@ -132,7 +132,7 @@
 	#root {
 		display: grid;
 		place-items: center;
-		height: 50%;
+		
 	}
 
 	#wrap {
diff --git a/src/IdleScreen/timeTable.svelte b/src/IdleScreen/timeTable.svelte
index d54db08..985e9d4 100644
--- a/src/IdleScreen/timeTable.svelte
+++ b/src/IdleScreen/timeTable.svelte
@@ -1,5 +1,10 @@
-<script>
-	let table = {
+<script module>
+	export function newTable(timetable) {
+		localStorage.setItem("TimeTable", JSON.stringify(timetable));
+		table = timetable;
+	}
+
+	let table = $state({
 		Times: [
 			"07:50 - 08:50",
 			"08:50 - 09:40",
@@ -14,26 +19,26 @@
 			"Sanskrit",
 			"Math",
 			"Lunch",
-			"Social Science",
 			"Hindi",
+			"Social Science",
 			"Science",
 		],
 		Tuesday: [
 			"English",
-			"GK",
+			"Art & Craft",
 			"Math",
 			"Lunch",
-			"Social Science",
 			"Hindi",
+			"Social Science",
 			"Science",
 		],
 		Wednesday: [
 			"English",
-			"Art & Craft",
+			"GK",
 			"Math",
 			"Lunch",
-			"Social Science",
 			"Hindi",
+			"Social Science",
 			"Science",
 		],
 		Thursday: [
@@ -41,8 +46,8 @@
 			"Sanskrit",
 			"Math",
 			"Lunch",
-			"Social Science",
 			"Hindi",
+			"Social Science",
 			"Science",
 		],
 		Friday: [
@@ -50,11 +55,19 @@
 			"Computers",
 			"Math",
 			"Lunch",
-			"Social Science",
 			"Hindi",
+			"Social Science",
 			"Science",
 		],
-	};
+	});
+
+	let TempTimeTable = localStorage.getItem("TimeTable") || "";
+
+	if (TempTimeTable != "") {
+		table = JSON.parse(TempTimeTable);
+	} else {
+		newTable(TempTimeTable);
+	}
 </script>
 
 <div id="root">
@@ -102,7 +115,6 @@
 	#root {
 		display: grid;
 		place-items: center;
-		height: 50%;
 	}
 
 	#wrap {
@@ -119,12 +131,12 @@
 	}
 
 	span {
-		font-size: 25px;
+		font-size: 20px;
 		color: white;
 		background-color: #3f3f3f;
-		padding: 10px;
+		padding: 5px;
 		border-radius: 10px;
-		width: 170px;
+		width: 140px;
 		text-align: center;
 	}
 
@@ -132,7 +144,7 @@
 		background-color: #30492e;
 	}
 	.DayOfWeek {
-		width: 150px;
+		width: 120px;
 		background-color: #30492e;
 	}
 </style>
diff --git a/src/RandomName/main.svelte b/src/RandomName/main.svelte
index c9ef5b7..d66d73a 100644
--- a/src/RandomName/main.svelte
+++ b/src/RandomName/main.svelte
@@ -94,16 +94,6 @@ function EditList() {
 		background-color: #121212;
 		color: white;
 	}
-
-	#left {
-		width: 100%;
-		height: 100%;
-		border-radius: 20px;
-		margin: 20px;
-		margin-top: 5px;
-		border: 2px solid #444;
-		font-family: "JetBrains Mono", monospace;
-	}
 	h1 {
 		text-align: center;
 		margin: 5px 0px;