minor changs here and there, and tried to make aunser work, not working in chrome working in rest!
This commit is contained in:
parent
a7fa6d620e
commit
1278b1d975
11 changed files with 1370 additions and 148 deletions
954
package-lock.json
generated
954
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -17,6 +17,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chart.js": "^4.4.9",
|
"chart.js": "^4.4.9",
|
||||||
"drag-drop-touch": "^1.3.1",
|
"drag-drop-touch": "^1.3.1",
|
||||||
|
"kokoro-js": "^1.2.1",
|
||||||
"random-words": "^2.0.1",
|
"random-words": "^2.0.1",
|
||||||
"svelte-spa-router": "^4.0.1",
|
"svelte-spa-router": "^4.0.1",
|
||||||
"word-exists": "^1.0.0"
|
"word-exists": "^1.0.0"
|
||||||
|
|
|
||||||
|
|
@ -120,7 +120,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="date">
|
<div id="date">
|
||||||
<h2>
|
<h2>
|
||||||
{new Date().toLocaleString("en-US", { weekday: "short" })} {new Date().getDate()},
|
{new Date().toLocaleString("en-US", { weekday: "short" })}
|
||||||
|
{new Date().getDate()},
|
||||||
{new Date().toLocaleString("en-US", { month: "short" })}
|
{new Date().toLocaleString("en-US", { month: "short" })}
|
||||||
{new Date().getFullYear()}
|
{new Date().getFullYear()}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
@ -132,7 +133,6 @@
|
||||||
#root {
|
#root {
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrap {
|
#wrap {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
table = timetable;
|
table = timetable;
|
||||||
}
|
}
|
||||||
|
|
||||||
let TempelateTable = {
|
let TemplateTable = {
|
||||||
Times: [
|
Times: [
|
||||||
"07:50 - 08:50",
|
"07:50 - 08:50",
|
||||||
"08:50 - 09:40",
|
"08:50 - 09:40",
|
||||||
|
|
@ -68,7 +68,7 @@
|
||||||
if (TempTimeTable != "") {
|
if (TempTimeTable != "") {
|
||||||
table = JSON.parse(TempTimeTable);
|
table = JSON.parse(TempTimeTable);
|
||||||
} else {
|
} else {
|
||||||
newTable($state.snapshot(TempelateTable));
|
newTable($state.snapshot(TemplateTable));
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
51
src/RandomName/EditNameOfStudents.svelte
Normal file
51
src/RandomName/EditNameOfStudents.svelte
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script>
|
||||||
|
import { newNames, RandomNamesState } from "./main.svelte";
|
||||||
|
|
||||||
|
let names =
|
||||||
|
RandomNamesState.NotSelectedYet.join("\n") +
|
||||||
|
"\n" +
|
||||||
|
RandomNamesState.Selected.join("\n") +
|
||||||
|
"\n" +
|
||||||
|
RandomNamesState.Absent.join("\n");
|
||||||
|
|
||||||
|
let namesArray = [];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="root">
|
||||||
|
<div id="root">
|
||||||
|
<h1>Edit Names</h1>
|
||||||
|
<p></p>
|
||||||
|
<textarea
|
||||||
|
bind:value={names}
|
||||||
|
id="box"
|
||||||
|
onchange={() => {
|
||||||
|
let namesArray = names.split("\n");
|
||||||
|
newNames(namesArray);
|
||||||
|
}}
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
margin: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: #303030;
|
||||||
|
padding: 10px;
|
||||||
|
margin: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#box {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
background-color: #121212;
|
||||||
|
color: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
resize: vertical;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -7,40 +7,6 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<div
|
|
||||||
id="NotSelectedYet"
|
|
||||||
on:dragover|preventDefault
|
|
||||||
role="list"
|
|
||||||
aria-label="drag name to this list!"
|
|
||||||
on:drop={(event) => {
|
|
||||||
event.preventDefault();
|
|
||||||
if (DragTempName !== "na") {
|
|
||||||
RandomNamesState.NotSelectedYet.push(DragTempName);
|
|
||||||
DragTempName = "na";
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<h1>Not Selected Yet</h1>
|
|
||||||
<div class="wrap">
|
|
||||||
{#each RandomNamesState.NotSelectedYet as name, i}
|
|
||||||
<span
|
|
||||||
class="NotSelectedYet"
|
|
||||||
draggable="true"
|
|
||||||
role="listitem"
|
|
||||||
aria-label="drag name to different list!"
|
|
||||||
on:dragstart={() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
RandomNamesState.NotSelectedYet.splice(i, 1);
|
|
||||||
DragTempName = name;
|
|
||||||
}, 100);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{name}
|
|
||||||
</span>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div
|
<div
|
||||||
id="Selected"
|
id="Selected"
|
||||||
on:dragover|preventDefault
|
on:dragover|preventDefault
|
||||||
|
|
@ -75,6 +41,40 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
|
<div
|
||||||
|
id="NotSelectedYet"
|
||||||
|
on:dragover|preventDefault
|
||||||
|
role="list"
|
||||||
|
aria-label="drag name to this list!"
|
||||||
|
on:drop={(event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
if (DragTempName !== "na") {
|
||||||
|
RandomNamesState.NotSelectedYet.push(DragTempName);
|
||||||
|
DragTempName = "na";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h1>Not Selected Yet</h1>
|
||||||
|
<div class="wrap">
|
||||||
|
{#each RandomNamesState.NotSelectedYet as name, i}
|
||||||
|
<span
|
||||||
|
class="NotSelectedYet"
|
||||||
|
draggable="true"
|
||||||
|
role="listitem"
|
||||||
|
aria-label="drag name to different list!"
|
||||||
|
on:dragstart={() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
RandomNamesState.NotSelectedYet.splice(i, 1);
|
||||||
|
DragTempName = name;
|
||||||
|
}, 100);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</span>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
<div
|
<div
|
||||||
id="Absent"
|
id="Absent"
|
||||||
on:dragover|preventDefault
|
on:dragover|preventDefault
|
||||||
|
|
|
||||||
|
|
@ -1,49 +1,13 @@
|
||||||
<script module>
|
<script module>
|
||||||
import Selector from "./selector.svelte";
|
import Selector from "./selector.svelte";
|
||||||
import TopDisplay from "./TopDisplay.svelte";
|
import TopDisplay from "./TopDisplay.svelte";
|
||||||
|
import EditNameOfStudents from "./EditNameOfStudents.svelte";
|
||||||
function EditList() {
|
|
||||||
console.log("Edit list of names");
|
|
||||||
}
|
|
||||||
|
|
||||||
export let RandomNamesState = $state({
|
export let RandomNamesState = $state({
|
||||||
NotSelectedYet: [
|
NotSelectedYet: [],
|
||||||
"John",
|
Selected: [],
|
||||||
"Jane",
|
Absent: [],
|
||||||
"Alice",
|
selectedStudent: "None yet!",
|
||||||
"Bob",
|
|
||||||
"Charlie",
|
|
||||||
"Diana",
|
|
||||||
"Eve",
|
|
||||||
"Frank",
|
|
||||||
"Grace",
|
|
||||||
"Hank",
|
|
||||||
],
|
|
||||||
Selected: [
|
|
||||||
"John",
|
|
||||||
"Jane",
|
|
||||||
"Alice",
|
|
||||||
"Bob",
|
|
||||||
"Charlie",
|
|
||||||
"Diana",
|
|
||||||
"Eve",
|
|
||||||
"Frank",
|
|
||||||
"Grace",
|
|
||||||
"Hank",
|
|
||||||
],
|
|
||||||
Absent: [
|
|
||||||
"John",
|
|
||||||
"Jane",
|
|
||||||
"Alice",
|
|
||||||
"Bob",
|
|
||||||
"Charlie",
|
|
||||||
"Diana",
|
|
||||||
"Eve",
|
|
||||||
"Frank",
|
|
||||||
"Grace",
|
|
||||||
"Hank",
|
|
||||||
],
|
|
||||||
selectedStudent: "none :(",
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export function SelectStudent() {
|
export function SelectStudent() {
|
||||||
|
|
@ -53,14 +17,41 @@
|
||||||
);
|
);
|
||||||
RandomNamesState.selectedStudent =
|
RandomNamesState.selectedStudent =
|
||||||
RandomNamesState.NotSelectedYet[randomIndex];
|
RandomNamesState.NotSelectedYet[randomIndex];
|
||||||
RandomNamesState.Selected.push(
|
|
||||||
RandomNamesState.NotSelectedYet[randomIndex]
|
RandomNamesState.Selected = [
|
||||||
);
|
RandomNamesState.NotSelectedYet[randomIndex],
|
||||||
|
...RandomNamesState.Selected,
|
||||||
|
];
|
||||||
RandomNamesState.NotSelectedYet.splice(randomIndex, 1);
|
RandomNamesState.NotSelectedYet.splice(randomIndex, 1);
|
||||||
} else {
|
} else {
|
||||||
alert("All students have been selected.");
|
alert("All students have been selected.");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let TabOpen = $state({
|
||||||
|
v: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
export function newNames(Names) {
|
||||||
|
localStorage.setItem("Names", JSON.stringify(Names));
|
||||||
|
RandomNamesState.NotSelectedYet = Names;
|
||||||
|
RandomNamesState.Selected = [];
|
||||||
|
RandomNamesState.Absent = [];
|
||||||
|
RandomNamesState.selectedStudent = "None yet!";
|
||||||
|
}
|
||||||
|
|
||||||
|
let TempelateNames = ["John", "Jane", "Alice", "Bob"];
|
||||||
|
|
||||||
|
let TempNames = localStorage.getItem("Names") || "";
|
||||||
|
|
||||||
|
if (TempNames != "") {
|
||||||
|
RandomNamesState.NotSelectedYet = JSON.parse(TempNames);
|
||||||
|
RandomNamesState.Selected = [];
|
||||||
|
RandomNamesState.Absent = [];
|
||||||
|
RandomNamesState.selectedStudent = "None yet!";
|
||||||
|
} else {
|
||||||
|
newNames($state.snapshot(TempelateNames));
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="wrap">
|
<div id="wrap">
|
||||||
|
|
@ -81,9 +72,11 @@
|
||||||
</span></button
|
</span></button
|
||||||
></a
|
></a
|
||||||
>
|
>
|
||||||
<h1>Random Name</h1>
|
<h1>Random student selector</h1>
|
||||||
<div>
|
<div>
|
||||||
<button aria-label="Back to main menu" onclick={() => EditList()}
|
<button
|
||||||
|
aria-label="Back to main menu"
|
||||||
|
onclick={() => (TabOpen.v = true)}
|
||||||
><span class="front"
|
><span class="front"
|
||||||
><svg
|
><svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
|
@ -100,11 +93,24 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<div id="listWrap"><TopDisplay /></div>
|
|
||||||
<Selector />
|
<Selector />
|
||||||
|
<div id="listWrap"><TopDisplay /></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#if TabOpen.v !== false}
|
||||||
|
<div id="UperLayer">
|
||||||
|
<div id="wrapClose">
|
||||||
|
<EditNameOfStudents />
|
||||||
|
<button
|
||||||
|
class="close"
|
||||||
|
onclick={() => (TabOpen.v = false)}
|
||||||
|
aria-label="close">CLOSE</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#wrap {
|
#wrap {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -182,4 +188,32 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
#UperLayer {
|
||||||
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,54 +3,86 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="root">
|
<div id="root">
|
||||||
<p>The Selected Student is</p>
|
<p>The latest selected student is:</p>
|
||||||
<h1>{RandomNamesState.selectedStudent}</h1>
|
<h1>{RandomNamesState.selectedStudent}</h1>
|
||||||
<p>(The Selected Student's name will be auto moved to the Selected list)</p>
|
|
||||||
|
|
||||||
|
<div id="options">
|
||||||
<button
|
<button
|
||||||
aria-label="Back to main menu"
|
aria-label="Back to main menu"
|
||||||
|
id="selectStudent"
|
||||||
onclick={() => {
|
onclick={() => {
|
||||||
SelectStudent();
|
SelectStudent();
|
||||||
}}
|
}}
|
||||||
><span class="front"
|
><span class="front">
|
||||||
><svg
|
<span>Select a random student</span>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="24px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="24px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
|
|
||||||
{#if RandomNamesState.selectedStudent !== "none :("}
|
|
||||||
<span>Select Another Student</span>
|
|
||||||
{:else}
|
|
||||||
<span>Select one now :D</span>{/if}
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
height="24px"
|
|
||||||
viewBox="0 -960 960 960"
|
|
||||||
width="24px"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
><path
|
|
||||||
d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
|
|
||||||
/></svg
|
|
||||||
>
|
|
||||||
</span></button
|
</span></button
|
||||||
>
|
>
|
||||||
|
<div>
|
||||||
|
{#if RandomNamesState.Selected.length > 0}
|
||||||
|
<button
|
||||||
|
aria-label="Back to main menu"
|
||||||
|
onclick={() => {
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
"Are you sure you want to reset all the Selected names? This action cannot be undone."
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
RandomNamesState.NotSelectedYet = [
|
||||||
|
...RandomNamesState.NotSelectedYet,
|
||||||
|
...RandomNamesState.Selected,
|
||||||
|
];
|
||||||
|
RandomNamesState.Selected = [];
|
||||||
|
RandomNamesState.selectedStudent = "None yet!";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
><span class="front">
|
||||||
|
<span>Reset selected</span>
|
||||||
|
</span></button
|
||||||
|
>{/if}
|
||||||
|
{#if RandomNamesState.Absent.length > 0}
|
||||||
|
<button
|
||||||
|
aria-label="Back to main menu"
|
||||||
|
onclick={() => {
|
||||||
|
if (
|
||||||
|
confirm(
|
||||||
|
"Are you sure you want to reset all the names? this will also move all the students to the 'Not Selected Yet' list. This action cannot be undone."
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
RandomNamesState.NotSelectedYet = [
|
||||||
|
...RandomNamesState.NotSelectedYet,
|
||||||
|
...RandomNamesState.Absent,
|
||||||
|
];
|
||||||
|
RandomNamesState.Absent = [];
|
||||||
|
RandomNamesState.selectedStudent = "None yet!";
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
><span class="front">
|
||||||
|
<span>Reset absentees</span>
|
||||||
|
</span></button
|
||||||
|
>{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#root {
|
#root {
|
||||||
background-color: #222;
|
background-color: #222;
|
||||||
border-radius: 30px 30px 0 0;
|
border-radius: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
padding-bottom: 0px;
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#options {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|
@ -62,7 +94,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline-offset: 4px;
|
outline-offset: 4px;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
button:hover .front {
|
button:hover .front {
|
||||||
transform: translateY(-7px);
|
transform: translateY(-7px);
|
||||||
|
|
@ -96,4 +128,8 @@
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#selectStudent > .front {
|
||||||
|
background-color: #0e71e2;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -18,8 +18,8 @@
|
||||||
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"
|
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
|
/></svg
|
||||||
>
|
>
|
||||||
Idle Screen
|
Timetable
|
||||||
<p>A Clock and a Timetable!</p></span
|
<p>Clock included!</p></span
|
||||||
>
|
>
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
|
|
@ -36,8 +36,8 @@
|
||||||
d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
|
d="M0-240v-63q0-43 44-70t116-27q13 0 25 .5t23 2.5q-14 21-21 44t-7 48v65H0Zm240 0v-65q0-32 17.5-58.5T307-410q32-20 76.5-30t96.5-10q53 0 97.5 10t76.5 30q32 20 49 46.5t17 58.5v65H240Zm540 0v-65q0-26-6.5-49T754-397q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780Zm-455-80h311q-10-20-55.5-35T480-370q-55 0-100.5 15T325-320ZM160-440q-33 0-56.5-23.5T80-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-440Zm640 0q-33 0-56.5-23.5T720-520q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-440Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-600q0 50-34.5 85T480-480Zm0-80q17 0 28.5-11.5T520-600q0-17-11.5-28.5T480-640q-17 0-28.5 11.5T440-600q0 17 11.5 28.5T480-560Zm1 240Zm-1-280Z"
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
Random Name
|
Name selector
|
||||||
<p>for quizs or anything else!</p></span
|
<p>for any class activity!</p></span
|
||||||
>
|
>
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
/></svg
|
/></svg
|
||||||
>
|
>
|
||||||
Wordle
|
Wordle
|
||||||
<p>with infinite attempts and more!</p></span
|
<p>Challenge your vocabulary!</p></span
|
||||||
>
|
>
|
||||||
</button></a
|
</button></a
|
||||||
>
|
>
|
||||||
|
|
|
||||||
51
src/announcer/ActualAnnouncer.svelte
Normal file
51
src/announcer/ActualAnnouncer.svelte
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<script>
|
||||||
|
let text = "";
|
||||||
|
|
||||||
|
function speak() {
|
||||||
|
window.speechSynthesis.cancel();
|
||||||
|
window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="root">
|
||||||
|
<input
|
||||||
|
bind:value={text}
|
||||||
|
placeholder="Type in here what you want to announce"
|
||||||
|
/>
|
||||||
|
<button onclick={speak}>Play</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#root {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: none;
|
||||||
|
background-color: #292929;
|
||||||
|
color: white;
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: none;
|
||||||
|
background-color: #292929;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: #414141;
|
||||||
|
transform: rotateZ(-15deg) scale(1.2);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1 +1,122 @@
|
||||||
yo chat
|
<script>
|
||||||
|
import ActualAnnouncer from "./ActualAnnouncer.svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div id="wrap">
|
||||||
|
<div id="nav">
|
||||||
|
<a href="#/" aria-label="Back to main menu"
|
||||||
|
><button aria-label="Back to main menu"
|
||||||
|
><span class="front"
|
||||||
|
><svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
height="24px"
|
||||||
|
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>Announcer</h1>
|
||||||
|
</div>
|
||||||
|
<div id="root">
|
||||||
|
<ActualAnnouncer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#wrap {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
#UperLayer {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
background-color: #2b2b2b;
|
||||||
|
color: #888;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue