From 8d01464fc5d14b433306c0c6636f726c9c1becbd Mon Sep 17 00:00:00 2001 From: zyqunix Date: Fri, 15 Nov 2024 15:29:18 +0100 Subject: [PATCH] keyboard main --- click/index.html | 2 +- keyboard/index.html | 51 ++++++++++++++ keyboard/script.js | 168 ++++++++++++++++++++++++++++++++++++++++++++ keyboard/style.css | 168 ++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 388 insertions(+), 1 deletion(-) create mode 100644 keyboard/index.html create mode 100644 keyboard/script.js create mode 100644 keyboard/style.css diff --git a/click/index.html b/click/index.html index f003ce0..1de4309 100644 --- a/click/index.html +++ b/click/index.html @@ -12,7 +12,7 @@
- + github [#142]Created with Sketch. 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 = ` github [#142]Created with Sketch. `; + 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 = ` github [#142]Created with Sketch. `; + 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