added a basic clock!
This commit is contained in:
parent
791df943c2
commit
6637dd5414
4 changed files with 243 additions and 14 deletions
5
src/IdleScreen/main.svelte
Normal file
5
src/IdleScreen/main.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<script>
|
||||||
|
import Time from "./time.svelte";
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<Time />
|
||||||
167
src/IdleScreen/time.svelte
Normal file
167
src/IdleScreen/time.svelte
Normal file
|
|
@ -0,0 +1,167 @@
|
||||||
|
<script>
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
let hour1;
|
||||||
|
let hour2;
|
||||||
|
let min1;
|
||||||
|
let min2;
|
||||||
|
let sec1;
|
||||||
|
let sec2;
|
||||||
|
|
||||||
|
function updateTime() {
|
||||||
|
const now = new Date();
|
||||||
|
const hours = now.getHours().toString().padStart(2, "0");
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
updateTime();
|
||||||
|
setInterval(updateTime, 1000);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="root">
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#root {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#colen {
|
||||||
|
font-size: 200px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#thedot {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,10 +1,28 @@
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<h1>ClassRoomStuff</h1>
|
<h1>ClassRoomStuff</h1>
|
||||||
<h2>
|
<h2>
|
||||||
A colection of awsome Tools, Games And more. Made to be used in any kind
|
A collection of awesome tools, games, and more — made to be used in any
|
||||||
of classroom!
|
kind of classroom!
|
||||||
</h2>
|
</h2>
|
||||||
<div id="items">
|
<div id="items">
|
||||||
|
<a href="#/IdleScreen">
|
||||||
|
<button>
|
||||||
|
<span class="front">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="50px"
|
||||||
|
viewBox="0 -960 960 960"
|
||||||
|
width="50px"
|
||||||
|
fill="#FFFFFF"
|
||||||
|
><path
|
||||||
|
d="m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z"
|
||||||
|
/></svg
|
||||||
|
>
|
||||||
|
Idle Screen
|
||||||
|
<p>A Clock and Timetable; thats all!</p></span
|
||||||
|
>
|
||||||
|
</button></a
|
||||||
|
>
|
||||||
<a href="#/Wordle">
|
<a href="#/Wordle">
|
||||||
<button>
|
<button>
|
||||||
<span class="front">
|
<span class="front">
|
||||||
|
|
@ -18,13 +36,23 @@
|
||||||
d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm16-86 114-114h336l114 114q2 2 16 6 11 0 17.5-6.5T800-304l-44-308q-4-29-26-48.5T678-680H282q-30 0-52 19.5T204-612l-44 308q-2 11 4.5 17.5T182-280q2 0 16-6Zm482-154q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-80-120q17 0 28.5-11.5T640-600q0-17-11.5-28.5T600-640q-17 0-28.5 11.5T560-600q0 17 11.5 28.5T600-560ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Zm170-40Z"
|
d="M182-200q-51 0-79-35.5T82-322l42-300q9-60 53.5-99T282-760h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778-200q-21 0-39-7.5T706-230l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm16-86 114-114h336l114 114q2 2 16 6 11 0 17.5-6.5T800-304l-44-308q-4-29-26-48.5T678-680H282q-30 0-52 19.5T204-612l-44 308q-2 11 4.5 17.5T182-280q2 0 16-6Zm482-154q17 0 28.5-11.5T720-480q0-17-11.5-28.5T680-520q-17 0-28.5 11.5T640-480q0 17 11.5 28.5T680-440Zm-80-120q17 0 28.5-11.5T640-600q0-17-11.5-28.5T600-640q-17 0-28.5 11.5T560-600q0 17 11.5 28.5T600-560ZM310-440h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Zm170-40Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
GAMES</span
|
GAMES (Wordle)
|
||||||
|
<p>A Wordle clone with extra features!</p></span
|
||||||
>
|
>
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="BottomBadge">
|
||||||
|
Made by <a href="https://rezhack.xyz" target="_blank">RezHackXYZ</a> for
|
||||||
|
<a href="https://neighborhood.hackclub.com/" target="_blank">Neighborhood</a
|
||||||
|
>!
|
||||||
|
<a href="https://github.com/RezHackXYZ/ClassRoomStuff" target="_blank"
|
||||||
|
>Contribute here</a
|
||||||
|
> if you want.
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#root {
|
#root {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -36,13 +64,13 @@
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 5px 0px;
|
margin: 0;
|
||||||
font-size: 50px;
|
font-size: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 5px 0px;
|
margin: 0;
|
||||||
color: #797979;
|
color: #797979;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
@ -53,7 +81,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 40px;
|
margin-top: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -63,6 +91,7 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline-offset: 4px;
|
outline-offset: 4px;
|
||||||
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.front {
|
.front {
|
||||||
|
|
@ -81,6 +110,13 @@
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #aaaaaa;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
button:hover .front {
|
button:hover .front {
|
||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
}
|
}
|
||||||
|
|
@ -88,4 +124,23 @@
|
||||||
button:active .front {
|
button:active .front {
|
||||||
transform: translateY(-3px);
|
transform: translateY(-3px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#BottomBadge {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
background-color: #242424;
|
||||||
|
color: #aaaaaa;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: fit-content;
|
||||||
|
align-self: center;
|
||||||
|
padding: 5px;
|
||||||
|
font-size: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,10 +2,12 @@
|
||||||
import Router from "svelte-spa-router";
|
import Router from "svelte-spa-router";
|
||||||
import Wordle from "./wordle/game.svelte";
|
import Wordle from "./wordle/game.svelte";
|
||||||
import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
|
import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
|
||||||
|
import IdleScreen from "./IdleScreen/main.svelte";
|
||||||
|
|
||||||
let routes = {
|
let routes = {
|
||||||
"/": TypeSelector,
|
"/": TypeSelector,
|
||||||
"/Wordle": Wordle,
|
"/Wordle": Wordle,
|
||||||
|
"/IdleScreen": IdleScreen,
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue