made the time display work in idle screen!
This commit is contained in:
parent
08ef5545cf
commit
959f2441ae
12 changed files with 138 additions and 438 deletions
|
|
@ -21,6 +21,7 @@
|
||||||
"prettier": "^3.4.2",
|
"prettier": "^3.4.2",
|
||||||
"prettier-plugin-svelte": "^3.3.3",
|
"prettier-plugin-svelte": "^3.3.3",
|
||||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||||
|
"sv-popup": "^0.5.3",
|
||||||
"svelte": "^5.0.0",
|
"svelte": "^5.0.0",
|
||||||
"tailwindcss": "^4.0.0",
|
"tailwindcss": "^4.0.0",
|
||||||
"vite": "^6.0.0"
|
"vite": "^6.0.0"
|
||||||
|
|
|
||||||
|
|
@ -1 +1,8 @@
|
||||||
|
/*
|
||||||
|
|
||||||
|
This file literally only exist so that tailwind intellisense stats to work
|
||||||
|
there is no other use of it, you can delete it if you want!
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
@ -5,47 +5,10 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Toaster />
|
<Toaster />
|
||||||
<div id="root">
|
<div class="h-full text-white bg-black font-[Sour_Gummy]">{@render children()}</div>
|
||||||
<div class="h-full text-white">{@render children()}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=JetBrains+Mono:wght@200&family=Sour+Gummy:wght@300&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=JetBrains+Mono:wght@200&family=Sour+Gummy:wght@300&display=swap");
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
|
||||||
background-color: black;
|
|
||||||
font-family: "Comfortaa", sans-serif;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
#root {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
font-family: "Sour Gummy", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#alert {
|
|
||||||
position: fixed;
|
|
||||||
top: 10px;
|
|
||||||
color: white;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, 0);
|
|
||||||
h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 20px;
|
|
||||||
font-family: "Sour Gummy", sans-serif;
|
|
||||||
}
|
|
||||||
.error {
|
|
||||||
background-color: #830000;
|
|
||||||
}
|
|
||||||
.warning {
|
|
||||||
background-color: #975b00;
|
|
||||||
}
|
|
||||||
.success {
|
|
||||||
background-color: #006b00;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,180 +1,33 @@
|
||||||
<script module>
|
<script module>
|
||||||
import Time from "./time.svelte";
|
import { Modal, Content, Trigger } from "sv-popup";
|
||||||
|
|
||||||
|
import Time from "./components/time/DisplayCollsOfTime.svelte";
|
||||||
import TimeTable from "./timeTable.svelte";
|
import TimeTable from "./timeTable.svelte";
|
||||||
import EditTimetableDiv from "./EditTimetable.svelte";
|
import EditTimetableDiv from "./EditTimetable.svelte";
|
||||||
|
|
||||||
function EditTimetable() {
|
|
||||||
console.log("Edit timetable");
|
|
||||||
TabOpen.v = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
let TabOpen = $state({ v: false });
|
|
||||||
|
|
||||||
export let ShowSeconds = $state({ v: true });
|
export let ShowSeconds = $state({ v: true });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
<div id="nav">
|
<div>
|
||||||
<a href="/" aria-label="Back to main menu"
|
<button
|
||||||
><button aria-label="Back to main menu"
|
onclick={() => {
|
||||||
><span class="front"
|
ShowSeconds.v = !ShowSeconds.v;
|
||||||
><svg
|
localStorage.setItem("ShowSeconds", String(ShowSeconds.v));
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
}}
|
||||||
height="24px"
|
>{#if ShowSeconds.v}Disable Seconds{:else}Enable Seconds{/if}</button
|
||||||
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>
|
<Modal button={false} big={true}>
|
||||||
<div>
|
<Content>
|
||||||
<button
|
<EditTimetableDiv />
|
||||||
aria-label="Back to main menu"
|
</Content>
|
||||||
onclick={() => {
|
<Trigger>
|
||||||
ShowSeconds.v = !ShowSeconds.v;
|
<button>Edit timetable </button>
|
||||||
localStorage.setItem("ShowSeconds", String(ShowSeconds.v));
|
</Trigger>
|
||||||
}}
|
</Modal>
|
||||||
><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"
|
|
||||||
><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>
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<TimeTable /><Time />
|
<!--<TimeTable />--><Time />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if TabOpen.v !== false}
|
|
||||||
<div id="UpperLayer">
|
|
||||||
<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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#UpperLayer {
|
|
||||||
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>
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
<div id="left">
|
<div id="left">
|
||||||
<div class="Header Row">
|
<div class="Header Row">
|
||||||
<span class="DayOfWeek" style="Opacity: 0;"></span>
|
<span class="DayOfWeek" ></span>
|
||||||
{#each table.Times as time}
|
{#each table.Times as time}
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import Row from "./row.svelte";
|
||||||
|
|
||||||
|
let ShowSeconds;
|
||||||
|
let ampm;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
ShowSeconds = localStorage.getItem("ShowSeconds") || "true" == "true" ? true : false;
|
||||||
|
|
||||||
|
setInterval(() => {
|
||||||
|
ampm = new Date().getHours() >= 12 ? "PM" : "AM";
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex justify-center items-end flex-row">
|
||||||
|
<Row type={"hour"} digit={0} />
|
||||||
|
<Row type={"hour"} digit={1} />
|
||||||
|
<h1 class="text-[200px] leading-[200px]">:</h1>
|
||||||
|
<Row type={"min"} digit={0} />
|
||||||
|
<Row type={"min"} digit={1} />
|
||||||
|
|
||||||
|
{#if ShowSeconds}
|
||||||
|
<Row type={"sec"} digit={0} />
|
||||||
|
<Row type={"sec"} digit={1} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<h1>{ampm}</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>
|
||||||
|
{new Date().toLocaleString("en-US", { weekday: "short" })}
|
||||||
|
{new Date().getDate()},
|
||||||
|
{new Date().toLocaleString("en-US", { month: "short" })}
|
||||||
|
{new Date().getFullYear()}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
9
src/routes/IdleScreen/components/time/digit.svelte
Normal file
9
src/routes/IdleScreen/components/time/digit.svelte
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script>
|
||||||
|
let props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if props.size == "small"}
|
||||||
|
<h1 class="m-0 leading-[75px] text-[75px] text-gray-500">{props.digit}</h1>
|
||||||
|
{:else if props.size == "large"}
|
||||||
|
<h1 class="m-0 leading-[200px] text-[200px]">{props.digit}</h1>
|
||||||
|
{/if}
|
||||||
29
src/routes/IdleScreen/components/time/row.svelte
Normal file
29
src/routes/IdleScreen/components/time/row.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
import Digit from "./digit.svelte";
|
||||||
|
import { updateTime } from "../../logic/updateTime.js";
|
||||||
|
|
||||||
|
let props = $props();
|
||||||
|
let size = props.type == "sec" ? "small" : "large";
|
||||||
|
let digit = props.digit;
|
||||||
|
let digits = digit == 1 ? 10 : digit == 0 && props.type == "hour" ? 2 : 6;
|
||||||
|
|
||||||
|
let thisRow;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
setInterval(() => {
|
||||||
|
updateTime(thisRow, digit, props.type);
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
style="--height: {size == 'small' ? '75px' : '200px'};"
|
||||||
|
class="flex h-(--height) flex-col overflow-y-hidden scroll-smooth"
|
||||||
|
bind:this={thisRow}
|
||||||
|
>
|
||||||
|
{#each Array(digits) as _, i}
|
||||||
|
<Digit {size} digit={i} />
|
||||||
|
{/each}
|
||||||
|
<Digit {size} digit={0} />
|
||||||
|
</div>
|
||||||
0
src/routes/IdleScreen/logic/TimeAndTableData.svelte.js
Normal file
0
src/routes/IdleScreen/logic/TimeAndTableData.svelte.js
Normal file
31
src/routes/IdleScreen/logic/updateTime.js
Normal file
31
src/routes/IdleScreen/logic/updateTime.js
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
export function updateTime(RowsObject, Digit, type) {
|
||||||
|
let DigitsHeight = parseInt(type == "sec" ? "75" : "200");
|
||||||
|
let LastZeroPos = Digit == 1 ? 10 : Digit == 0 && type == "hour" ? 2 : 6;
|
||||||
|
let currentTime;
|
||||||
|
|
||||||
|
if (type == "hour") {
|
||||||
|
if (new Date().getHours() > 12) {
|
||||||
|
currentTime = parseInt((new Date().getHours() - 12).toString().padStart(2, "0")[Digit]);
|
||||||
|
} else {
|
||||||
|
currentTime = parseInt(new Date().getHours().toString().padStart(2, "0")[Digit]);
|
||||||
|
}
|
||||||
|
} else if (type == "min") {
|
||||||
|
currentTime = parseInt(new Date().getMinutes().toString().padStart(2, "0")[Digit]);
|
||||||
|
} else if (type == "sec") {
|
||||||
|
currentTime = parseInt(new Date().getSeconds().toString().padStart(2, "0")[Digit]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentTime == 0) {
|
||||||
|
if (RowsObject.scrollTop != 0) {
|
||||||
|
RowsObject.scrollTop = LastZeroPos * DigitsHeight;
|
||||||
|
setTimeout(() => {
|
||||||
|
RowsObject.scroll({
|
||||||
|
top: 0,
|
||||||
|
behavior: "instant",
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
RowsObject.scrollTop = currentTime * DigitsHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,231 +0,0 @@
|
||||||
<script>
|
|
||||||
import { ShowSeconds } from "./+page.svelte";
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
|
|
||||||
let hour1;
|
|
||||||
let hour2;
|
|
||||||
let min1;
|
|
||||||
let min2;
|
|
||||||
let sec1;
|
|
||||||
let sec2;
|
|
||||||
let AmOrPm;
|
|
||||||
|
|
||||||
function DecideScrool(Object, currentTime, legnth, LastZeroPos) {
|
|
||||||
if (currentTime == 0) {
|
|
||||||
if (Object.scrollTop != 0) {
|
|
||||||
Object.scrollTop = LastZeroPos * legnth;
|
|
||||||
setTimeout(() => {
|
|
||||||
Object.scroll({
|
|
||||||
top: 0,
|
|
||||||
behavior: "instant",
|
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
Object.scrollTop = currentTime * legnth;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateTime() {
|
|
||||||
const now = new Date();
|
|
||||||
|
|
||||||
let hours = now.getHours().toString().padStart(2, "0");
|
|
||||||
|
|
||||||
if (now.getHours() >= 12) {
|
|
||||||
hours = (now.getHours() - 12).toString().padStart(2, "0");
|
|
||||||
AmOrPm = "PM";
|
|
||||||
} else {
|
|
||||||
AmOrPm = "AM";
|
|
||||||
}
|
|
||||||
|
|
||||||
const minutes = now.getMinutes().toString().padStart(2, "0");
|
|
||||||
const seconds = now.getSeconds().toString().padStart(2, "0");
|
|
||||||
|
|
||||||
DecideScrool(hour1, parseInt(hours[0]), 200, 2);
|
|
||||||
DecideScrool(hour2, parseInt(hours[1]), 200, 10);
|
|
||||||
DecideScrool(min1, parseInt(minutes[0]), 200, 6);
|
|
||||||
DecideScrool(min2, parseInt(minutes[1]), 200, 10);
|
|
||||||
if (ShowSeconds) {
|
|
||||||
DecideScrool(sec1, parseInt(seconds[0]), 75, 6);
|
|
||||||
DecideScrool(sec2, parseInt(seconds[1]), 75, 10);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
updateTime();
|
|
||||||
setInterval(updateTime, 1000);
|
|
||||||
});
|
|
||||||
|
|
||||||
let TempLocalStorage = localStorage.getItem("ShowSeconds") || "";
|
|
||||||
|
|
||||||
if (TempLocalStorage == "false") {
|
|
||||||
ShowSeconds.v = false;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="root">
|
|
||||||
<div id="wrap">
|
|
||||||
<div id="time">
|
|
||||||
<div class="rowOfNumbers" bind:this={hour1}>
|
|
||||||
<h1>0</h1>
|
|
||||||
<h1>1</h1>
|
|
||||||
<h1>0</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>
|
|
||||||
<h1>0</h1>
|
|
||||||
</div>
|
|
||||||
<h1 id="HourMinDivider">:</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>0</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>
|
|
||||||
<h1>0</h1>
|
|
||||||
</div>
|
|
||||||
{#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>
|
|
||||||
{new Date().toLocaleString("en-US", { weekday: "short" })}
|
|
||||||
{new Date().getDate()},
|
|
||||||
{new Date().toLocaleString("en-US", { month: "short" })}
|
|
||||||
{new Date().getFullYear()}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#root {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wrap {
|
|
||||||
background-color: #252525;
|
|
||||||
padding: 20px 70px;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#time {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: baseline;
|
|
||||||
margin: -30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#HourMinDivider {
|
|
||||||
font-size: 200px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#MinSecDivider {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#AmOrPm {
|
|
||||||
font-size: 75px;
|
|
||||||
margin: 0;
|
|
||||||
margin-left: 30px;
|
|
||||||
color: #585858;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 40px;
|
|
||||||
color: #888;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -63,13 +63,13 @@
|
||||||
|
|
||||||
let table = $state();
|
let table = $state();
|
||||||
|
|
||||||
let TempTimeTable = localStorage.getItem("TimeTable") || "";
|
/*let TempTimeTable = localStorage.getItem("TimeTable") || "";
|
||||||
|
|
||||||
if (TempTimeTable != "") {
|
if (TempTimeTable != "") {
|
||||||
table = JSON.parse(TempTimeTable);
|
table = JSON.parse(TempTimeTable);
|
||||||
} else {
|
} else {
|
||||||
newTable($state.snapshot(TemplateTable));
|
newTable($state.snapshot(TemplateTable));
|
||||||
}
|
}*/
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue