KaseToatz/Kahoot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rewrite

Browse Source
This commit is contained in:
KäseToatz
2024-04-26 13:05:31 +02:00
parent 30dc609b30
commit 9d902b2ce9
14 changed files with 353 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
html/assets/logo.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 440 150" enable-background="new 0 0 440 150" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M226.8,52.5c-18.7,0.3-34.8,16.1-36,35.1c-1.1,19.1,14.1,36.1,33.9,38.1c19.9,2,36-13.8,36-35.1 C260.7,69.2,245.5,52.2,226.8,52.5z M240.2,92c-0.8,9.9-7,15.3-11.1,15.7c-10.3,1.2-19.1-8.1-18.5-20s5.4-19.3,15.1-19.5 C235.4,68,241.3,79.1,240.2,92z"/>
<path fill="#FFFFFF" d="M300.3,54.4c-18.7-0.3-33.9,16.7-33.9,38.1s16.1,37.1,36,35.1c19.9-2,35.1-19,33.9-38.1 C335.2,70.5,319.1,54.8,300.3,54.4z M298,109.7c-4.1-0.5-10.2-5.9-11.1-15.7c-1.1-12.9,4.8-24,14.5-23.8s14.5,7.6,15.1,19.5 C317.1,101.5,308.3,110.9,298,109.7z"/>
<polygon fill="#FFFFFF" points="82.5,36.6 62.4,28.9 23.2,66.3 23.2,19.6 0,25.5 0,135.2 23.2,136 23,97.6 37.3,83.8 52.4,136 72.9,136 54,67.9 "/>
<path fill="#FFFFFF" d="M146.2,49.2L145.8,0L126,5.2l3.2,121.6l19.5,0.7l-1.1-62.8c4.3-1.9,18.4-5.8,18.9,9.7l1.9,22.1l1.3,31.1 h20.4l-7.7-53.7C179.3,42.5,167.8,42.4,146.2,49.2z"/>
<polygon fill="#FFFFFF" points="415.2,128.2 409.5,141.6 421.7,150 433.7,142.9 428.6,128.2 "/>
<path fill="#FFFFFF" d="M363.4,19.6l-15.5-6.4v32.1l-17.3-0.6l3.3,22.8h14l1,54.3c0,0-2.2,19.5,27.6,15.1c0,0,9.3-2.8,9-9.3v-21.4 c0,0-6.3,3.7-13.1,3.7c-6.8,0-6.9-3.3-6.9-3.3l-1.8-42l21.7-1.2V49.5L363.1,48L363.4,19.6z"/>
<polygon fill="#FFFFFF" points="440,19.8 399,12 424.2,120.5 "/>
<path fill="#FFFFFF" d="M77.6,49.9L83,64.1c13.5-8.1,21.1,0,21.1,0l-0.1,9.1c-40.2,7.1-30,44.3-30,44.3 c4.1,14.6,17.3,14.1,17.3,14.1h30.1l0.6-67.7C117.3,32.4,77.6,49.9,77.6,49.9z M104,118.6c0,0-14.6,3.5-16.2-10.7 c0,0,0.3-22,16.7-19.6L104,118.6z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

61
html/assets/script.js Normal file
View File

@ -0,0 +1,61 @@
window.onload = () => {
var pin = document.getElementById("pin");
var naming = document.getElementById("naming");
var name = document.getElementById("name");
var amount = document.getElementById("amount");
var flood = document.getElementById("flood");
var text = document.getElementById("text");
function checkMaxCaps()
{
if (naming.value == "capitalized")
{
var maxCaps = 1 << name.value.length;
if (amount.value > maxCaps)
{
text.innerText = `Amount will be capped at ${maxCaps}.`;
text.style.color = "red";
}
else
{
text.innerText = "";
text.style.color = "black";
}
}
}
naming.onchange = () => {
if (naming.value == "random")
{
name.disabled = true;
}
else
{
name.disabled = false;
checkMaxCaps();
}
}
amount.oninput = () => {checkMaxCaps()};
name.oninput = () => {checkMaxCaps()};
flood.onclick = async () => {
var formData = new FormData();
formData.append("pin", parseInt(pin.value));
formData.append("naming", naming.value)
formData.append("name", name.value);
formData.append("amount", parseInt(amount.value));
text.value = "Flooding in progress...";
text.style.color = "green";
var request = await fetch("http://127.0.0.1/flood", {
method: "POST",
body: formData
})
response = await request.json();
text.value = response.message;
if (response.type == "error")
{
text.style.color = "red";
}
}
}

117
html/assets/style.css Normal file
View File

@ -0,0 +1,117 @@
body
{
margin: 0px;
display: flex;
position: absolute;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background-color: rgb(56, 18, 114);
}
#container
{
display: flex;
flex-direction: column;
}
input
{
outline: none;
}
#rectangle
{
position: fixed;
background-color: black;
transform: rotate(45deg);
opacity: 0.1;
top: -15vmin;
left: -15vmin;
min-width: 75vmin;
min-height: 75vmin;
z-index: -1;
}
#circle
{
position: fixed;
border-radius: 50%;
background-color: black;
opacity: 0.1;
bottom: -15vmin;
right: -15vmin;
min-width: 75vmin;
min-height: 75vmin;
z-index: -1;
}
#logo
{
background-image: url("/html/assets/logo.svg");
height: 80px;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 30px;
}
#form
{
display: flex;
flex-direction: column;
gap: 5px;
padding: 20px;
background-color: white;
border-radius: 5px;
}
input, select
{
outline: none;
height: 40px;
text-align: center;
font-size: 1rem;
font-weight: 700;
color: rgb(51, 51, 51);
border: 0.125rem solid rgb(204, 204, 204);
border-radius: 5px;
background-color: white;
transition: border-color 0.25s;
}
select
{
color: #9191A0;
height: 46px;
}
input:focus:hover, select:focus:hover
{
border-color: rgb(51, 51, 51);
}
input:focus, select:focus
{
border-color: #0060DF;
}
#flood
{
background-color: rgb(51, 51, 51);
color: white;
border: none;
box-shadow: rgba(0, 0, 0, 0.25) 0px -4px inset;
padding: 0px 16px 4px;
min-height: 46px;
cursor: pointer;
}
#flood:hover
{
background-color: rgb(47, 47, 47);
box-shadow: rgba(0, 0, 0, 0.25) 0px -2px inset;
margin-top: 2px;
padding-bottom: 2px;
min-height: 44px;
}