RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added beter ui to the clock!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-04 13:56:13 +05:30
parent 6637dd5414
commit 1f20f751d8
1 changed files with 105 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

181
src/IdleScreen/time.svelte
View file

@ -8,9 +8,20 @@
let sec1; let sec1;
let sec2; let sec2;
let AMorPM = "AM";
function updateTime() { function updateTime() {
const now = new Date(); const now = new Date();
const hours = now.getHours().toString().padStart(2, "0");
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 minutes = now.getMinutes().toString().padStart(2, "0");
const seconds = now.getSeconds().toString().padStart(2, "0"); const seconds = now.getSeconds().toString().padStart(2, "0");
@ -29,88 +40,99 @@
</script> </script>
<div id="root"> <div id="root">
<div class="rowOfNumbers" bind:this={hour1}> <div id="wrap">
<h1>0</h1> <div class="rowOfNumbers" bind:this={hour1}>
<h1>1</h1> <h1>0</h1>
<h1>2</h1> <h1>1</h1>
<h1>3</h1> <h1>2</h1>
<h1>4</h1> <h1>3</h1>
<h1>5</h1> <h1>4</h1>
<h1>6</h1> <h1>5</h1>
<h1>7</h1> <h1>6</h1>
<h1>8</h1> <h1>7</h1>
<h1>9</h1> <h1>8</h1>
</div> <h1>9</h1>
<div class="rowOfNumbers" bind:this={hour2}> </div>
<h1>0</h1> <div class="rowOfNumbers" bind:this={hour2}>
<h1>1</h1> <h1>0</h1>
<h1>2</h1> <h1>1</h1>
<h1>3</h1> <h1>2</h1>
<h1>4</h1> <h1>3</h1>
<h1>5</h1> <h1>4</h1>
<h1>6</h1> <h1>5</h1>
<h1>7</h1> <h1>6</h1>
<h1>8</h1> <h1>7</h1>
<h1>9</h1> <h1>8</h1>
</div> <h1>9</h1>
<h1 id="colen">:</h1> </div>
<div class="rowOfNumbers" bind:this={min1}> <h1 id="colen">:</h1>
<h1>0</h1> <div class="rowOfNumbers" bind:this={min1}>
<h1>1</h1> <h1>0</h1>
<h1>2</h1> <h1>1</h1>
<h1>3</h1> <h1>2</h1>
<h1>4</h1> <h1>3</h1>
<h1>5</h1> <h1>4</h1>
<h1>6</h1> <h1>5</h1>
<h1>7</h1> <h1>6</h1>
<h1>8</h1> <h1>7</h1>
<h1>9</h1> <h1>8</h1>
</div> <h1>9</h1>
<div class="rowOfNumbers" bind:this={min2}> </div>
<h1>0</h1> <div class="rowOfNumbers" bind:this={min2}>
<h1>1</h1> <h1>0</h1>
<h1>2</h1> <h1>1</h1>
<h1>3</h1> <h1>2</h1>
<h1>4</h1> <h1>3</h1>
<h1>5</h1> <h1>4</h1>
<h1>6</h1> <h1>5</h1>
<h1>7</h1> <h1>6</h1>
<h1>8</h1> <h1>7</h1>
<h1>9</h1> <h1>8</h1>
</div> <h1>9</h1>
<h1 id="thedot">.</h1> </div>
<div class="rowOfNumbersSec" bind:this={sec1}> <h1 id="thedot">.</h1>
<h1>0</h1> <div class="rowOfNumbersSec" bind:this={sec1}>
<h1>1</h1> <h1>0</h1>
<h1>2</h1> <h1>1</h1>
<h1>3</h1> <h1>2</h1>
<h1>4</h1> <h1>3</h1>
<h1>5</h1> <h1>4</h1>
<h1>6</h1> <h1>5</h1>
<h1>7</h1> <h1>6</h1>
<h1>8</h1> <h1>7</h1>
<h1>9</h1> <h1>8</h1>
</div> <h1>9</h1>
<div class="rowOfNumbersSec" bind:this={sec2}> </div>
<h1>0</h1> <div class="rowOfNumbersSec" bind:this={sec2}>
<h1>1</h1> <h1>0</h1>
<h1>2</h1> <h1>1</h1>
<h1>3</h1> <h1>2</h1>
<h1>4</h1> <h1>3</h1>
<h1>5</h1> <h1>4</h1>
<h1>6</h1> <h1>5</h1>
<h1>7</h1> <h1>6</h1>
<h1>8</h1> <h1>7</h1>
<h1>9</h1> <h1>8</h1>
<h1>9</h1>
</div>
<h1 id="amorpm">{AMorPM}</h1>
</div> </div>
</div> </div>
<style> <style>
#root { #root {
display: grid;
place-items: center;
height: 100%;
}
#wrap {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: baseline;
height: 100%; background-color: #252525;
padding: 20px 70px;
border-radius: 20px;
} }
#colen { #colen {
@ -164,4 +186,11 @@
margin: 0; margin: 0;
color: #585858; color: #585858;
} }
#amorpm {
font-size: 75px;
margin: 0;
margin-left: 30px;
color: #585858;
}
</style> </style>