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

aded time table!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-04 15:14:36 +05:30
parent 1f20f751d8
commit 06c2cac6e4
3 changed files with 239 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/IdleScreen/main.svelte
View file

@ -1,5 +1,7 @@
<script> <script>
import Time from "./time.svelte"; import Time from "./time.svelte";
import TimeTable from "./timeTable.svelte";
</script> </script>
<Time />
<TimeTable />
<Time />

174
src/IdleScreen/time.svelte
View file

@ -41,81 +41,90 @@
<div id="root"> <div id="root">
<div id="wrap"> <div id="wrap">
<div class="rowOfNumbers" bind:this={hour1}> <div id="time">
<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>
<h1>9</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>
</div>
<h1 id="colen">:</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>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</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>
</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>
</div> </div>
<div class="rowOfNumbers" bind:this={hour2}> <div id="date">
<h1>0</h1> <h2>
<h1>1</h1> {new Date().toLocaleString("en-US", { weekday: "short" })} {new Date().getDate()},
<h1>2</h1> {new Date().toLocaleString("en-US", { month: "short" })}
<h1>3</h1> {new Date().getFullYear()}
<h1>4</h1> </h2>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
</div> </div>
<h1 id="colen">:</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>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</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>
</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>
</div> </div>
</div> </div>
@ -123,16 +132,20 @@
#root { #root {
display: grid; display: grid;
place-items: center; place-items: center;
height: 100%; height: 50%;
} }
#wrap { #wrap {
background-color: #252525;
padding: 20px 70px;
border-radius: 20px;
}
#time {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: baseline; align-items: baseline;
background-color: #252525; margin: -30px;
padding: 20px 70px;
border-radius: 20px;
} }
#colen { #colen {
@ -193,4 +206,11 @@
margin-left: 30px; margin-left: 30px;
color: #585858; color: #585858;
} }
h2 {
margin: 0;
font-size: 40px;
color: #888;
text-align: center;
}
</style> </style>

138
src/IdleScreen/timeTable.svelte Normal file
View file

@ -0,0 +1,138 @@
<script>
let table = {
Times: [
"07:50 - 08:50",
"08:50 - 09:40",
"09:40 - 10:30 ",
"10:30 - 11:00",
"11:00 - 12:00",
"12:00 - 01:00",
"01:00 - 02:00",
],
Monday: [
"English",
"Sanskrit",
"Math",
"Lunch",
"Social Science",
"Hindi",
"Science",
],
Tuesday: [
"English",
"GK",
"Math",
"Lunch",
"Social Science",
"Hindi",
"Science",
],
Wednesday: [
"English",
"Art & Craft",
"Math",
"Lunch",
"Social Science",
"Hindi",
"Science",
],
Thursday: [
"English",
"Sanskrit",
"Math",
"Lunch",
"Social Science",
"Hindi",
"Science",
],
Friday: [
"English",
"Computers",
"Math",
"Lunch",
"Social Science",
"Hindi",
"Science",
],
};
</script>
<div id="root">
<div id="wrap">
<div class="Header Row">
<span class="DayOfWeek" style="Opacity: 0;"></span>
{#each table.Times as time}
<span>{time}</span>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Monday</span>
{#each table.Monday as time}
<span>{time}</span>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Tuesday</span>
{#each table.Tuesday as time}
<span>{time}</span>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Wednesday</span>
{#each table.Wednesday as time}
<span>{time}</span>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Thursday</span>
{#each table.Thursday as time}
<span>{time}</span>
{/each}
</div>
<div class="Row">
<span class="DayOfWeek">Friday</span>
{#each table.Friday as time}
<span>{time}</span>
{/each}
</div>
</div>
</div>
<style>
#root {
display: grid;
place-items: center;
height: 50%;
}
#wrap {
display: flex;
background-color: #252525;
padding: 20px;
border-radius: 20px;
flex-direction: column;
gap: 10px;
}
.Row {
display: flex;
gap: 5px;
}
span {
font-size: 25px;
color: white;
background-color: #3f3f3f;
padding: 10px;
border-radius: 10px;
width: 170px;
text-align: center;
}
.Header > span {
background-color: #30492e;
}
.DayOfWeek {
width: 150px;
background-color: #30492e;
}
</style>