jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

implement red and green button on 404 page

Browse source
This commit is contained in:
Jonas Leder 2022-01-30 11:18:16 +01:00
parent 8deebbb1e1
commit 187ddf9683
No known key found for this signature in database
GPG key ID: CC3C488E27DFF5CA
3 changed files with 70 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
js/customElements/404Buttons.js Normal file
View file

@ -0,0 +1,66 @@
class notFoundButtons extends HTMLElement {
constructor() {
super();
this.windowResized = false;
const redButton = document.createElement("div");
redButton.classList.add("button");
redButton.classList.add("red");
this.appendChild(redButton);
const yellowButton = document.createElement("div");
yellowButton.classList.add("button");
yellowButton.classList.add("yellow");
this.appendChild(yellowButton);
const greenButton = document.createElement("div");
greenButton.classList.add("button");
greenButton.classList.add("green");
this.appendChild(greenButton);
greenButton.onclick
greenButton.onclick = () => {
const terminal = document.querySelector(".terminal-window");
if (!this.windowResized) {
terminal.style.width = "95%";
terminal.style.height = "95%";
terminal.style.top = "2%";
this.windowResized = true;
} else {
terminal.style.width = "37.5rem";
terminal.style.height = "22.5rem";
terminal.style.top = "10.5rem";
}
}
redButton.onclick = () => {
location.href = "https://jonasled.de";
}
}
getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
}
customElements.define("jl-404_buttons", notFoundButtons);

3
js/script.js
View file

@ -20,4 +20,5 @@ require("./customElements/ebkBanner");
require("./customElements/sellingTable");
require("./customElements/skills");
require("./customElements/pwgen");
require("./customElements/inline-code");
require("./customElements/inline-code");
require("./customElements/404Buttons");

8
public/404.html
View file

@ -5,14 +5,10 @@
<title>404 - Page not found</title>
<link href="/css/error.css" rel="stylesheet">
</head>
<body>
<jl-matomo></jl-matomo>
<div id="particles-js"></div>
<body style="height: 100vh;">
<div class="terminal-window">
<header>
<div class="button green"></div>
<div class="button yellow"></div>
<div class="button red"></div>
<jl-404_buttons></jl-404_buttons>
</header>
<section class="terminal">
<div class="history"></div>