From 7b4996a689238a79a5f55bc4ec3d027902417063 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Fri, 9 May 2025 19:53:58 +0530
Subject: [PATCH 1/2] higlight curent day of week, option to show/disble
 seconds, import timetable from csv, wrap/roleover of 0 to be after 9; did a
 lot of work!

---
 src/IdleScreen/EditTimetable.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/IdleScreen/EditTimetable.svelte b/src/IdleScreen/EditTimetable.svelte
index 8c0fe7b..ba6e46f 100644
--- a/src/IdleScreen/EditTimetable.svelte
+++ b/src/IdleScreen/EditTimetable.svelte
@@ -25,10 +25,10 @@
 					<span class="DayOfWeek">Monday</span>
 					{#each table.Monday as time}
 						<input
-							type="text"
+							type="text"      
 							onchange={() => {
 								newTable(table);
-							}}
+							}}       
 							bind:value={time}
 						/>
 					{/each}

From c14481f3d9a174668da358feba08e662c300ac87 Mon Sep 17 00:00:00 2001
From: RezHackXYZ <rhythmupa@gmail.com>
Date: Fri, 9 May 2025 19:54:00 +0530
Subject: [PATCH 2/2] Higlight curent day of week, option to show/disble
 seconds, import timetable from csv, wrap/roleover of 0 to be after 9. wow did
 a lot!

---
 .vscode/settings.json               |   3 +-
 jsconfig.json                       |   5 +-
 src/IdleScreen/EditTimetable.svelte | 391 ++++++++++++++++++----------
 src/IdleScreen/main.svelte          |  19 +-
 src/IdleScreen/time.svelte          | 177 +++++++++----
 5 files changed, 399 insertions(+), 196 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7780eca..12dd628 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,6 @@
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[svelte]": {
 		"editor.defaultFormatter": "svelte.svelte-vscode"
-	}
+	},
+	"cSpell.words": ["kokoro"]
 }
diff --git a/jsconfig.json b/jsconfig.json
index dbc17f4..3cdda25 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -23,6 +23,7 @@
 		 * Disable this if you'd like to use dynamic types.
 		 */
 		"checkJs": true,
-		"types": ["svelte", "estree"]
-	},
+		"types": ["svelte", "estree"],
+		"exclude": ["node_modules", "package.json", "package-lock.json"]
+	}
 }
diff --git a/src/IdleScreen/EditTimetable.svelte b/src/IdleScreen/EditTimetable.svelte
index ba6e46f..d21080b 100644
--- a/src/IdleScreen/EditTimetable.svelte
+++ b/src/IdleScreen/EditTimetable.svelte
@@ -1,151 +1,207 @@
-<script module>
+<script>
 	import { newTable } from "./timeTable.svelte";
 
 	let table = JSON.parse(localStorage.getItem("TimeTable"));
+
+	let TabOpen = false;
+
+	let csv = "";
 </script>
 
-<div id="root">
-	<div id="root">
-		<div id="wrap">
-			<div id="left">
-				<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 id="right">
-				<button
-					onclick={() => {
-							table.Times.push("");
-							table.Monday.push("");
-							table.Tuesday.push("");
-							table.Wednesday.push("");
-							table.Thursday.push("");
-							table.Friday.push("");
+<div class="root">
+	<div id="wrap">
+		<div id="left">
+			<div class="Header Row">
+				<span class="DayOfWeek" style="Opacity: 0;"></span>
+				{#each table.Times as time}
+					<input
+						type="text"
+						onchange={() => {
 							newTable(table);
-							table = JSON.parse(
-								localStorage.getItem("TimeTable"),
-							);
-						
-					}}
-					><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
-					> <br />Add<br />new<br />Period
-				</button>
-				<button
-					onclick={() => {
-						if (
-							confirm(
-								"This will remove the last period, it is not reversable! are you sure?",
-							)
-						) {
-							table.Times.pop();
-							table.Monday.pop();
-							table.Tuesday.pop();
-							table.Wednesday.pop();
-							table.Thursday.pop();
-							table.Friday.pop();
-							newTable(table);
-							table = JSON.parse(
-								localStorage.getItem("TimeTable"),
-							);
-						}
-					}}
-					><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
-					><br />
-					Delete<br />last<br />Period
-				</button>
+						}}
+						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 id="right">
+			<button
+				onclick={() => {
+					table.Times.push("");
+					table.Monday.push("");
+					table.Tuesday.push("");
+					table.Wednesday.push("");
+					table.Thursday.push("");
+					table.Friday.push("");
+					newTable(table);
+					table = JSON.parse(localStorage.getItem("TimeTable"));
+				}}
+				><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
+				>Add new Period
+			</button>
+			<button
+				onclick={() => {
+					if (
+						confirm(
+							"This will remove the last period, it is not reversible! are you sure?"
+						)
+					) {
+						table.Times.pop();
+						table.Monday.pop();
+						table.Tuesday.pop();
+						table.Wednesday.pop();
+						table.Thursday.pop();
+						table.Friday.pop();
+						newTable(table);
+						table = JSON.parse(localStorage.getItem("TimeTable"));
+					}
+				}}
+				><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 last Period
+			</button>
+			<button
+				onclick={() => {
+					TabOpen = true;
+				}}
+				><svg
+					xmlns="http://www.w3.org/2000/svg"
+					height="24px"
+					viewBox="0 -960 960 960"
+					width="24px"
+					fill="#FFFFFF"
+					><path
+						d="M230-360h120v-60H250v-120h100v-60H230q-17 0-28.5 11.5T190-560v160q0 17 11.5 28.5T230-360Zm156 0h120q17 0 28.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17 0-28.5 11.5T386-560v60q0 17 11.5 30.5T426-456h60v36H386v60Zm264 0h60l70-240h-60l-40 138-40-138h-60l70 240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"
+					/></svg
+				>
+				Import From CSV
+			</button>
 		</div>
 	</div>
 </div>
 
+{#if TabOpen !== false}
+	<div id="UpperLayer">
+		<div id="wrapClose">
+			<div class="root">
+				<h1>Paste CSV here:</h1>
+				<p></p>
+				<textarea
+					bind:value={csv}
+					id="box"
+					placeholder="Duration 1, Duration 2, Duration 3, Duration 4
+Subject 01, Subject 02, Subject 03, Subject 04
+Subject 08, Subject 09, Subject 10, Subject 12
+Subject 13, Subject 13, Subject 14, Subject 15"
+				></textarea>
+			</div>
+			<div id="options">
+				<button
+					class="close"
+					id="cancel"
+					onclick={() => (TabOpen = false)}
+					aria-label="close">CANCEL</button
+				>
+				<button
+					class="close"
+					id="save"
+					onclick={() => {
+						TabOpen = false;
+						let lines = csv.split("\n");
+						table.Times = lines[0].split(",");
+						table.Monday = lines[1].split(",");
+						table.Tuesday = lines[2].split(",");
+						table.Wednesday = lines[3].split(",");
+						table.Thursday = lines[4].split(",");
+						table.Friday = lines[5].split(",");
+						newTable(table);
+						table = JSON.parse(localStorage.getItem("TimeTable"));
+					}}
+					aria-label="close">SAVE</button
+				>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <style>
-	#root {
+	.root {
 		display: flex;
 		flex-direction: column;
 		gap: 5px;
@@ -220,10 +276,73 @@
 		border-radius: 10px;
 		cursor: pointer;
 		transition: all 0.1s ease-in-out;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		max-width: 100px;
 	}
 
 	#right > button:hover {
 		transform: scale(1.2);
 		background-color: rgb(50, 50, 50);
 	}
+
+	#UpperLayer {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		backdrop-filter: blur(10px);
+		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;
+	}
+	#box {
+		width: 700px;
+		height: 300px;
+		background-color: #121212;
+		color: white;
+		border-radius: 10px;
+		resize: vertical;
+		font-size: 20px;
+	}
+
+	h1,
+	p {
+		margin: 0;
+	}
+
+	#options {
+		display: flex;
+		gap: 10px;
+		justify-content: center;
+	}
+
+	#cancel {
+		background-color: #580000;
+		color: #ffffff;
+	}
+
+	#save {
+		background-color: #004611;
+		color: #ffffff;
+	}
 </style>
diff --git a/src/IdleScreen/main.svelte b/src/IdleScreen/main.svelte
index c70ae23..bdcb86c 100644
--- a/src/IdleScreen/main.svelte
+++ b/src/IdleScreen/main.svelte
@@ -1,4 +1,4 @@
-<script>
+<script module>
 	import Time from "./time.svelte";
 	import TimeTable from "./timeTable.svelte";
 	import EditTimetableDiv from "./EditTimetable.svelte";
@@ -8,7 +8,9 @@
 		TabOpen.v = true;
 	}
 
-	let TabOpen = { v: false };
+	let TabOpen = $state({ v: false });
+
+	export let ShowSeconds = $state({ v: true });
 </script>
 
 <div id="wrap">
@@ -32,6 +34,15 @@
 		<h1>Idle Screen</h1>
 		<div>
 			<button
+				aria-label="Back to main menu"
+				onclick={() => {
+					ShowSeconds.v = !ShowSeconds.v;
+					localStorage.setItem("ShowSeconds", String(ShowSeconds.v));
+				}}
+				><span class="front"
+					>{#if ShowSeconds.v}Disable Seconds{:else}Enable Seconds{/if}</span
+				></button
+			><button
 				aria-label="Back to main menu"
 				onclick={() => EditTimetable()}
 				><span class="front"
@@ -56,7 +67,7 @@
 </div>
 
 {#if TabOpen.v !== false}
-	<div id="UperLayer">
+	<div id="UpperLayer">
 		<div id="wrapClose">
 			<EditTimetableDiv />
 			<button
@@ -138,7 +149,7 @@
 		color: #444;
 	}
 
-	#UperLayer {
+	#UpperLayer {
 		position: absolute;
 		top: 0;
 		left: 0;
diff --git a/src/IdleScreen/time.svelte b/src/IdleScreen/time.svelte
index f4ca7c7..4712766 100644
--- a/src/IdleScreen/time.svelte
+++ b/src/IdleScreen/time.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { ShowSeconds } from "./main.svelte";
 	import { onMount } from "svelte";
 
 	let hour1;
@@ -7,36 +8,115 @@
 	let min2;
 	let sec1;
 	let sec2;
-
-	let AMorPM = "AM";
+	let AmOrPm;
 
 	function updateTime() {
 		const now = new Date();
 
 		let hours = now.getHours().toString().padStart(2, "0");
 
-		if (now.getHours() > 12) {
+		if (now.getHours() >= 12) {
 			hours = (now.getHours() - 12).toString().padStart(2, "0");
-			AMorPM = "PM";
+			AmOrPm = "PM";
 		} else {
-			AMorPM = "AM";
+			AmOrPm = "AM";
 		}
 
 		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;
+		// Hour1
+		if (parseInt(hours[0]) == 0) {
+			hour1.scrollTop = 2 * 200;
+		} else if (parseInt(hours[0]) == 1) {
+			hour1.scroll({
+				top: 0,
+				behavior: "instant",
+			});
+			hour1.scrollTop = parseInt(hours[0]) * 200;
+		} else {
+			hour1.scrollTop = parseInt(hours[0]) * 200;
+		}
+
+		// Hour2
+		if (parseInt(hours[1]) == 0) {
+			hour2.scrollTop = 10 * 200;
+		} else if (parseInt(hours[1]) == 1) {
+			hour2.scroll({
+				top: 0,
+				behavior: "instant",
+			});
+			hour2.scrollTop = parseInt(hours[1]) * 200;
+		} else {
+			hour2.scrollTop = parseInt(hours[1]) * 200;
+		}
+
+		// Minute1
+		if (parseInt(minutes[0]) == 0) {
+			min1.scrollTop = 6 * 200;
+		} else if (parseInt(minutes[0]) == 1) {
+			min1.scroll({
+				top: 0,
+				behavior: "instant",
+			});
+			min1.scrollTop = parseInt(minutes[0]) * 200;
+		} else {
+			min1.scrollTop = parseInt(minutes[0]) * 200;
+		}
+
+		// Minute2
+		if (parseInt(minutes[1]) == 0) {
+			min2.scrollTop = 10 * 200;
+		} else if (parseInt(minutes[1]) == 1) {
+			min2.scroll({
+				top: 0,
+				behavior: "instant",
+			});
+			min2.scrollTop = parseInt(minutes[1]) * 200;
+		} else {
+			min2.scrollTop = parseInt(minutes[1]) * 200;
+		}
+
+		// Seconds
+		if (ShowSeconds.v) {
+			// Second1
+			if (parseInt(seconds[0]) == 0) {
+				sec1.scrollTop = 6 * 75;
+			} else if (parseInt(seconds[0]) == 1) {
+				sec1.scroll({
+					top: 0,
+					behavior: "instant",
+				});
+				sec1.scrollTop = parseInt(seconds[0]) * 75;
+			} else {
+				sec1.scrollTop = parseInt(seconds[0]) * 75;
+			}
+
+			// Second2
+			if (parseInt(seconds[1]) == 0) {
+				sec2.scrollTop = 10 * 75;
+			} else if (parseInt(seconds[1]) == 1) {
+				sec2.scroll({
+					top: 0,
+					behavior: "instant",
+				});
+				sec2.scrollTop = parseInt(seconds[1]) * 75;
+			} else {
+				sec2.scrollTop = parseInt(seconds[1]) * 75;
+			}
+		}
 	}
 
 	onMount(() => {
 		updateTime();
 		setInterval(updateTime, 1000);
 	});
+
+	let TempLocalStorage = localStorage.getItem("ShowSeconds") || "";
+
+	if (TempLocalStorage == "false") {
+		ShowSeconds.v = false;
+	}
 </script>
 
 <div id="root">
@@ -45,14 +125,7 @@
 			<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>
+				<h1>0</h1>
 			</div>
 			<div class="rowOfNumbers" bind:this={hour2}>
 				<h1>0</h1>
@@ -65,8 +138,9 @@
 				<h1>7</h1>
 				<h1>8</h1>
 				<h1>9</h1>
+				<h1>0</h1>
 			</div>
-			<h1 id="colen">:</h1>
+			<h1 id="HourMinDivider">:</h1>
 			<div class="rowOfNumbers" bind:this={min1}>
 				<h1>0</h1>
 				<h1>1</h1>
@@ -74,10 +148,7 @@
 				<h1>3</h1>
 				<h1>4</h1>
 				<h1>5</h1>
-				<h1>6</h1>
-				<h1>7</h1>
-				<h1>8</h1>
-				<h1>9</h1>
+				<h1>0</h1>
 			</div>
 			<div class="rowOfNumbers" bind:this={min2}>
 				<h1>0</h1>
@@ -90,33 +161,33 @@
 				<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>
-			<h1 id="amorpm">{AMorPM}</h1>
+			{#if ShowSeconds.v}
+				<h1 id="MinSecDivider">.</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>0</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>
+					<h1>0</h1>
+				</div>{/if}
+			<h1 id="AmOrPm">{AmOrPm}</h1>
 		</div>
 		<div id="date">
 			<h2>
@@ -148,12 +219,12 @@
 		margin: -30px;
 	}
 
-	#colen {
+	#HourMinDivider {
 		font-size: 200px;
 		margin: 0;
 	}
 
-	#thedot {
+	#MinSecDivider {
 		font-size: 75px;
 		margin: 0;
 		color: #585858;
@@ -187,7 +258,7 @@
 		scroll-behavior: smooth;
 	}
 
-	.rowOfNumbersSec h1 {
+	.rowOfNumbersSec > h1 {
 		height: 75px;
 		display: flex;
 		align-items: center;
@@ -200,7 +271,7 @@
 		color: #585858;
 	}
 
-	#amorpm {
+	#AmOrPm {
 		font-size: 75px;
 		margin: 0;
 		margin-left: 30px;