diff --git a/click/index.html b/click/index.html new file mode 100644 index 0000000..f003ce0 --- /dev/null +++ b/click/index.html @@ -0,0 +1,56 @@ + + + + + + Click Test + + + + + + + +
+ + github [#142]Created with Sketch. + + + + + + + + +
⁥
+ + + +
+ + + + +
+

Click Test

+

A minimalist clicking test without ads or trackers.

+

(To show the context menu, hold SHIFT and Right Click.)

+ +
+
Left Clicks: 0
+
Right Clicks: 0
+
Middle Clicks: 0
+ + + +
+
+ + + + + diff --git a/click/script.js b/click/script.js new file mode 100644 index 0000000..eea7077 --- /dev/null +++ b/click/script.js @@ -0,0 +1,136 @@ +// CONSTANT VARIABLES + +const lmbReset = document.getElementById('lmbReset'); +const rmbReset = document.getElementById('rmbReset'); +const mmbReset = document.getElementById('mmbReset') +const themeToggle = document.getElementById('themeToggle'); +const help = document.getElementById('help'); +const container = document.getElementById('container'); +const seperator = document.getElementById('seperator'); + +// CHANGING VARIABLES FOR COUNTERS AND LIGHT/DARK MODE +let leftCount = 0; +let rightCount = 0; +let middleCount = 0; +let isLightMode = false; + +// DISABLES ADDING VALUES TO THE COUNTERS WHEN PRESSING BUTTONS +document.addEventListener('click', function (event) { + if (event.button === 0 && event.target.tagName !== 'BUTTON') { + leftCount++; + document.getElementById('leftClickCount').innerText = leftCount; + } +}); + +document.addEventListener('contextmenu', function (event) { + event.preventDefault(); + if (event.target.tagName !== 'BUTTON') { + rightCount++; + document.getElementById('rightClickCount').innerText = rightCount; + } +}); + +document.addEventListener('mousedown', function (event) { + if (event.button === 1 && event.target.tagName !== 'BUTTON') { + middleCount++; + document.getElementById('middleClickCount').innerText = middleCount; + } +}); + +help.addEventListener('click', function () { + alert('SHIFT+RMB only works on Gecko browsers (Firefox, Librewolf, Waterfox, etc) and NOT on Chromium browsers (Chrome, Edge, Brave, Vivaldi). Please understand, that this is not my issue, but the browser\'s.') +}) + +// RESETS COUNTERS +lmbReset.addEventListener('click', function () { + leftCount = 0; + document.getElementById('leftClickCount').innerText = leftCount; +}); + +rmbReset.addEventListener('click', function () { + rightCount = 0; + document.getElementById('rightClickCount').innerText = rightCount; +}); + +mmbReset.addEventListener('click', function () { + middleCount = 0; + document.getElementById('middleClickCount').innerText = middleCount; +}); + +// LIGHT/DARK MODE LOGIC (this is extremely bad but whatever.. "If it ain't broke, don't fix it." - Wise Man) +themeToggle.addEventListener('click', function() { + if (!isLightMode) { + + /* + 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"; + } + + rmbReset.style.backgroundColor = "#1E1E1E"; + lmbReset.style.backgroundColor = "#1E1E1E"; + mmbReset.style.backgroundColor = "#1E1E1E"; + rmbReset.style.color = "#b0b0b0"; + lmbReset.style.color = "#b0b0b0"; + mmbReset.style.color = "#b0b0b0"; + + + } else { + + /* + DARK MODE + DARK MODE + DARK MODE + */ + + let children = container.children; + for (let i = 0; i < children.length; i++) { + children[i].style.color = "#f0f0f0"; + } + 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 = ` `; + + rmbReset.style.backgroundColor = "#b0b0b0"; + lmbReset.style.backgroundColor = "#b0b0b0"; + mmbReset.style.backgroundColor = "#b0b0b0"; + rmbReset.style.color = "#2a2a2a"; + lmbReset.style.color = "#2a2a2a"; + mmbReset.style.color = "#2a2a2a"; + + } +}); diff --git a/click/style.css b/click/style.css new file mode 100644 index 0000000..f18c886 --- /dev/null +++ b/click/style.css @@ -0,0 +1,144 @@ +/* +CSS CODE.. I DON'T KNOW WHAT ELSE TO SAY. IT WORKS, BUT COULD BE IMPROVED +*/ + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #2a2a2a; + user-select: none; + transition: background-color 0.3s, color 0.3s; +} + +* { + font-family: monospace; +} + +button, p { + font-weight: 600; +} + +.help { + color: #f0f0f0; + background: none; + border: none; +} + +.container { + text-align: center; + 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: 300px; + max-width: 300px; +} + +.container > * { + margin: 8px; +} + +.counter { + font-size: 24px; + margin: 40px 0; + color: #ffffff; +} + +p, h6, h1 { + color: #f0f0f0; + transition: color 0.3s; + +} + +.reset { + transition: background-color 0.3s; + background-color: #b0b0b0; + color: #2a2a2a; + border: 2px solid rgb(120, 120, 120); + border-radius: 5px; + padding: 5px; + cursor: pointer; + margin-top: 15px; + outline: none; + transition: border 0.3s; +} + +.reset: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: absolute; + top: 0px; + left: 0px; + display: flex; + text-align: center; + align-items: center; + justify-content: center; +} + +.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