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">
|
||||
<h1>ClassRoomStuff</h1>
|
||||
<h2>
|
||||
A colection of awsome Tools, Games And more. Made to be used in any kind
|
||||
of classroom!
|
||||
A collection of awesome tools, games, and more — made to be used in any
|
||||
kind of classroom!
|
||||
</h2>
|
||||
<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">
|
||||
<button>
|
||||
<span class="front">
|
||||
|
|
@ -18,15 +36,25 @@
|
|||
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
|
||||
>
|
||||
GAMES</span
|
||||
GAMES (Wordle)
|
||||
<p>A Wordle clone with extra features!</p></span
|
||||
>
|
||||
</button></a
|
||||
>
|
||||
</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>
|
||||
#root {
|
||||
#root {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -36,13 +64,13 @@
|
|||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin: 5px 0px;
|
||||
font-size: 50px;
|
||||
margin: 0;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin: 5px 0px;
|
||||
margin: 0;
|
||||
color: #797979;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
|
@ -53,7 +81,7 @@
|
|||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -63,6 +91,7 @@
|
|||
padding: 0;
|
||||
cursor: pointer;
|
||||
outline-offset: 4px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.front {
|
||||
|
|
@ -81,6 +110,13 @@
|
|||
font-size: 40px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: #aaaaaa;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button:hover .front {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
|
@ -88,4 +124,23 @@
|
|||
button:active .front {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
import Router from "svelte-spa-router";
|
||||
import Wordle from "./wordle/game.svelte";
|
||||
import TypeSelector from "./SelectionMenue/TypeSelector.svelte";
|
||||
import IdleScreen from "./IdleScreen/main.svelte";
|
||||
|
||||
let routes = {
|
||||
"/": TypeSelector,
|
||||
"/Wordle": Wordle,
|
||||
"/IdleScreen": IdleScreen,
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue