-
+
diff --git a/keyboard/index.html b/keyboard/index.html
new file mode 100644
index 0000000..4c57c8e
--- /dev/null
+++ b/keyboard/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
Click Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Keyboard Tester
+
A minimalist keyboard test without ads or trackers.
+
+
+
+
+
+
+
+
diff --git a/keyboard/script.js b/keyboard/script.js
new file mode 100644
index 0000000..befd262
--- /dev/null
+++ b/keyboard/script.js
@@ -0,0 +1,168 @@
+// CONSTANT VARIABLES
+const reset = document.getElementById('reset');
+const themeToggle = document.getElementById('themeToggle');
+const help = document.getElementById('help');
+const container = document.getElementById('container');
+const seperator = document.getElementById('seperator');
+const counterMain = document.getElementById('key-counters');
+const fontButton = document.getElementById('font-button');
+
+let isLightMode = false;
+
+
+function logKey(key) {
+ let keyDiv = document.getElementById(key);
+
+ if (keyDiv) {
+ let currentCount = parseInt(keyDiv.innerHTML.split(': ')[1]) || 0;
+ currentCount += 1;
+ keyDiv.innerHTML = `${key}: ${currentCount}`;
+ } else {
+ keyDiv = document.createElement("div");
+ keyDiv.innerHTML = `${key}: 1`;
+ keyDiv.id = key;
+ counterMain.appendChild(keyDiv);
+ }
+}
+
+
+function resetKeys() {
+ while (counterMain.hasChildNodes()) {
+ counterMain.removeChild(counterMain.firstChild);
+ };
+ console.clear();
+};
+
+reset.addEventListener('click', function () {
+ resetKeys()
+});
+
+document.addEventListener("keydown", (e) => {
+ logKey(e.key);
+});
+
+
+
+help.addEventListener('click', function () {
+ alert('Press any key to see how many times it was pressed.')
+});
+
+let isFunnyFont = false;
+fontButton.addEventListener('click', function() {
+ if (!isFunnyFont) {
+ document.querySelectorAll("*").forEach((e) => {
+ e.style.fontFamily = "crueltysquad";
+ });
+ isFunnyFont = true;
+ console.log(isFunnyFont);
+ document.getElementById('font-button').innerHTML = "Disable Funny Font";
+
+ } else {
+ document.querySelectorAll("*").forEach((e) => {
+ e.style.fontFamily = "monospace";
+ });
+ isFunnyFont = false;
+ console.log(isFunnyFont)
+ document.getElementById('font-button').innerHTML = "Enable Funny Font";
+
+
+ }
+
+});
+
+themeToggle.addEventListener('click', function() {
+ if (!isLightMode) {
+ document.getElementById('navBar').style.backgroundColor = "rgba(200,200,200,0.775)";
+
+
+ /*
+ LIGHT MODE
+ LIGHT MODE
+ LIGHT MODE
+ */
+
+ document.body.style.backgroundColor = '#C8C8C8';
+ container.style.backgroundColor = "#B0B0B0";
+ themeToggle.innerHTML = `
`;
+ container.style.color = "#1E1E1E"
+ seperator.style.backgroundColor = "#1E1E1E";
+ isLightMode = true;
+ document.getElementById('github').innerHTML = `
`;
+ document.getElementById('web').innerHTML = `
`;
+ document.getElementById('help').innerHTML = `
`;
+
+ let children = container.children;
+ for (let i = 0; i < children.length; i++) {
+ children[i].style.color = "#1E1E1E";
+ }
+
+ let keyChildren = counterMain.children;
+ for (let i = 0; i < keyChildren.length; i++) {
+ keyChildren[i].style.color = "#1E1E1E";
+ keyChildren[i].style.backgroundColor = "#969696";
+ }
+
+ reset.style.backgroundColor = "#1E1E1E";
+ reset.style.color = "#b0b0b0";
+ reset.style.borderColor = "#2E2E2E";
+
+ fontButton.style.backgroundColor = "#1E1E1E";
+ fontButton.style.color = "#b0b0b0";
+ fontButton.style.borderColor = "#2E2E2E";
+
+
+
+ } else {
+
+ /*
+ DARK MODE
+ DARK MODE
+ DARK MODE
+ */
+
+ let children = container.children;
+ for (let i = 0; i < children.length; i++) {
+ children[i].style.color = "#f0f0f0";
+ }
+
+ let keyChildren = counterMain.children;
+ for (let i = 0; i < keyChildren.length; i++) {
+ keyChildren[i].style.color = "#f0f0f0";
+ keyChildren[i].style.backgroundColor = "#5a5a5a";
+ }
+
+ document.getElementById('navBar').style.backgroundColor = "rgba(42,42,42,0.775)";
+
+ document.body.style.backgroundColor = '#2a2a2a';
+ themeToggle.innerHTML = `
`;
+ isLightMode = false;
+ container.style.backgroundColor = "#4b4b4b";
+ seperator.style.backgroundColor = "#747474";
+
+ document.getElementById('github').innerHTML = `
`;
+ document.getElementById('web').innerHTML = `
`;
+ document.getElementById('help').innerHTML = `
`;
+
+ reset.style.backgroundColor = "#747474";
+ reset.style.color = "#2a2a2a";
+ reset.style.borderColor = "#8C8C8C";
+
+ fontButton.style.backgroundColor = "#747474";
+ fontButton.style.color = "#2a2a2a";
+ fontButton.style.borderColor = "#8C8C8C";
+
+ }
+});
diff --git a/keyboard/style.css b/keyboard/style.css
new file mode 100644
index 0000000..2d7f6b6
--- /dev/null
+++ b/keyboard/style.css
@@ -0,0 +1,168 @@
+/*
+CSS CODE.. I DON'T KNOW WHAT ELSE TO SAY. IT WORKS, BUT COULD BE IMPROVED
+*/
+
+@font-face {
+ font-family: 'crueltysquad';
+ src: url('https://easyfiles.cc/2024/11/da8c7731-4b49-4155-bad5-e4344a2ab6da/gamefont(1).ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background-color: #2a2a2a;
+ transition: background-color 0.3s, color 0.3s;
+ overflow-x: hidden;
+ overflow-y: visible;
+}
+
+* {
+ font-family: monospace;
+ outline: none;
+}
+
+button, p {
+ font-weight: 600;
+}
+
+.help {
+ color: #f0f0f0;
+ background: none;
+ border: none;
+}
+
+.container {
+ background-color: #4b4b4b;
+ border-radius: 8px;
+ padding: 30px 100px;
+ box-shadow: 0 4px 10px rgba(16, 16, 16, 0.5);
+ transition: background-color 0.3s;
+ width: 900px;
+ max-width: 900px;
+ margin: 100px;
+ text-align: center;
+ top: 0;
+ left: 0;
+
+}
+
+.counter {
+ font-size: 24px;
+ margin: 40px 0;
+ color: #ffffff;
+ width: 100%;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+ gap: 40px;
+ justify-items: center;
+ align-items: center;
+}
+
+.counter > * {
+ background-color: rgb(90,90,90);
+ padding: 10px 5px 10px 5px;
+ margin: 15px;
+ border-radius: 10px;
+ box-shadow: 0 4px 10px rgba(16, 16, 16, 0.2);
+}
+
+p, h6, h1, h3 {
+ color: #f0f0f0;
+ transition: color 0.3s;
+}
+
+.reset, .button {
+ transition: background-color 0.3s;
+ color: #2a2a2a;
+ background-color: rgb(116, 116, 116);
+ border: 2px solid rgb(135,135,135);
+ border-radius: 5px;
+ padding: 5px;
+ cursor: pointer;
+ margin-top: 15px;
+ outline: none;
+ transition: border 0.3s;
+}
+
+.reset:hover, .button:hover {
+ border: 2px dashed #3c7855;
+}
+
+.navBar > *:hover:not(.seperator) {
+ cursor: pointer;
+ scale: 1.05;
+}
+
+.navBar > * {
+ transition: scale 0.3s;
+
+}
+
+.theme-button {
+ background-color: rgb(0,0,0,0);
+ border-color: rgb(0,0,0,0);
+ transition: 0.3s;
+ color: #f0f0f0;
+ cursor: pointer;
+ outline: none;
+ margin-top: -5px;
+ z-index: 1000;
+ right: 20px;
+ top: 20px;
+ margin-left: 5px !important;
+}
+
+.theme-button:hover {
+ scale: 1.1;
+}
+
+.theme-button svg {
+ pointer-events: none;
+}
+
+.navBar {
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ justify-content: left;
+ background-color: rgb(42,42,42,0.775);
+ backdrop-filter: blur(10px);
+ width: 100%;
+}
+
+.navBar > * {
+ margin: 5px 1px 5px 10px;
+}
+
+.github,
+.web {
+ text-align: center;
+ transition: 0.3s;
+ user-select: none;
+ pointer-events: none;
+ z-index: 10;
+ color: #747474;
+ text-decoration: none;
+}
+
+.github svg,
+.web svg {
+ pointer-events: all;
+ transition: 0.3s;
+ fill: #747474;
+}
+
+.seperator {
+ height: 25px;
+ width: 2px;
+ border-radius: 10px;
+ background-color: #747474;
+
+}
\ No newline at end of file