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!

.vscode/settings.json

@@ -2,5 +2,6 @@
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"[svelte]": {
 		"editor.defaultFormatter": "svelte.svelte-vscode"
-	}
+	},
+	"cSpell.words": ["kokoro"]
 }

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"]
+	}
 }

src/IdleScreen/EditTimetable.svelte

@@ -1,11 +1,14 @@
-<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 class="root">
 	<div id="wrap">
 		<div id="left">
 			<div class="Header Row">
@@ -16,7 +19,6 @@
 						onchange={() => {
 							newTable(table);
 						}}
-							
 						bind:value={time}
 					/>
 				{/each}
@@ -92,10 +94,7 @@
 					table.Thursday.push("");
 					table.Friday.push("");
 					newTable(table);
-							table = JSON.parse(
-								localStorage.getItem("TimeTable"),
-							);
-						
+					table = JSON.parse(localStorage.getItem("TimeTable"));
 				}}
 				><svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -106,13 +105,13 @@
 					><path
 						d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
 					/></svg
-					> <br />Add<br />new<br />Period
+				>Add new Period
 			</button>
 			<button
 				onclick={() => {
 					if (
 						confirm(
-								"This will remove the last period, it is not reversable! are you sure?",
+							"This will remove the last period, it is not reversible! are you sure?"
 						)
 					) {
 						table.Times.pop();
@@ -122,9 +121,7 @@
 						table.Thursday.pop();
 						table.Friday.pop();
 						newTable(table);
-							table = JSON.parse(
-								localStorage.getItem("TimeTable"),
-							);
+						table = JSON.parse(localStorage.getItem("TimeTable"));
 					}
 				}}
 				><svg
@@ -136,16 +133,75 @@
 					><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
+				>
+				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>

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;

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
+		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,8 +161,10 @@
 				<h1>7</h1>
 				<h1>8</h1>
 				<h1>9</h1>
+				<h1>0</h1>
 			</div>
-			<h1 id="thedot">.</h1>
+			{#if ShowSeconds.v}
+				<h1 id="MinSecDivider">.</h1>
 				<div class="rowOfNumbersSec" bind:this={sec1}>
 					<h1>0</h1>
 					<h1>1</h1>
@@ -99,10 +172,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="rowOfNumbersSec" bind:this={sec2}>
 					<h1>0</h1>
@@ -115,8 +185,9 @@
 					<h1>7</h1>
 					<h1>8</h1>
 					<h1>9</h1>
-			</div>
-			<h1 id="amorpm">{AMorPM}</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;