sorceress
/
vampysite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

👀

This commit is contained in:
Agatha Lovelace 2023-07-14 15:16:41 +02:00
parent 2d37f2e143
commit 60ebc18af7
Signed by: sorceress
GPG Key ID: 01D0B3AB10CED4F8
2 changed files with 94 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
source/css/index.css
View File

@ -95,12 +95,12 @@ details summary::before {
filter: drop-shadow(0 0 5px);
}
details[open] > summary {
details[open]>summary {
visibility: hidden;
font-size: 0;
}
details[open] > summary::after {
details[open]>summary::after {
content: "←";
visibility: visible;
font-size: 26px;
@ -119,6 +119,7 @@ details *:hover {
from {
font-weight: normal;
}
to {
filter: drop-shadow(0.5px 0.5px 2px);
}
@ -150,6 +151,7 @@ details *:hover {
width: 320px;
padding-bottom: 4em;
}
h1 {
filter: drop-shadow(5px 5px 5px var(--bg));
}
@ -184,4 +186,4 @@ details *:hover {
details {
width: fit-content;
}
}
}

89
source/isthechairloadbearingenough.html Normal file
View File

@ -0,0 +1,89 @@
---
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include header.html %}
<link rel="stylesheet" href="/css/page.css">
<style>
body {
display: unset;
}
input[type="date"] {
background-color: var(--bg-code);
color: var(--accent);
border: none;
border-radius: 3px;
padding: 5px;
font-family: "Crimson";
text-transform: uppercase;
}
button {
background-color: var(--accent-dark);
color: var(--bg-code);
padding: 5px;
border: none;
border-radius: 3px;
display: block;
margin-top: 1vh;
}
button:hover {
filter: brightness(110%);
}
button:active {
filter: drop-shadow(3px 3px 2px var(--bg-code));
}
</style>
<title>Is The Chair Load Bearing Enough</title>
</head>
<body>
<p>When did you get the fancy load-bearing chair?</p>
<input type="date" id="start-date">
<button type="button" id="date-submit">Submit</button>
<p id="result"></p>
<hr>
<a href="/">Back To Main Page</a>
<script>
const button = document.getElementById('date-submit');
const output = document.getElementById('result');
button.addEventListener('click', function handleClick() {
const start = document.getElementById('start-date').valueAsDate;
const today = new Date();
if (!start) {
output.innerHTML = "Please enter a date above";
} else {
const price = "1297";
const monthDiff = (today.getFullYear() - start.getFullYear()) * 12 + (today.getMonth() - start.getMonth());
const current = (monthDiff * price) / 36;
if (current <= 0 ) {
output.innerHTML = "The chair has not been bought yet.";
return;
}
if ((price - current) <= 0 ) {
output.innerHTML = "The chair is no longer load-bearing.";
return;
}
output.innerHTML = `<b>${price - current}€</b> left until the chair is no longer load-bearing.`;
}
});
</script>
</body>
</html>