From 187ddf96836a9ba052c4afbbe12f3bdb725865cf Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Sun, 30 Jan 2022 11:18:16 +0100
Subject: [PATCH] implement red and green button on 404 page
---
js/customElements/404Buttons.js | 66 +++++++++++++++++++++++++++++++++
js/script.js | 3 +-
public/404.html | 8 +---
3 files changed, 70 insertions(+), 7 deletions(-)
create mode 100644 js/customElements/404Buttons.js
diff --git a/js/customElements/404Buttons.js b/js/customElements/404Buttons.js
new file mode 100644
index 0000000..e3ce348
--- /dev/null
+++ b/js/customElements/404Buttons.js
@@ -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);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 0eb3ebf..fa9464a 100644
--- a/js/script.js
+++ b/js/script.js
@@ -20,4 +20,5 @@ require("./customElements/ebkBanner");
require("./customElements/sellingTable");
require("./customElements/skills");
require("./customElements/pwgen");
-require("./customElements/inline-code");
\ No newline at end of file
+require("./customElements/inline-code");
+require("./customElements/404Buttons");
\ No newline at end of file
diff --git a/public/404.html b/public/404.html
index 7d5e931..9dba6f7 100644
--- a/public/404.html
+++ b/public/404.html
@@ -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>
--
GitLab