From e67912e1fe3c4df13a551f335600a695bd834a0f Mon Sep 17 00:00:00 2001 From: cyfraeviolae Date: Sun, 20 Mar 2022 14:44:28 -0400 Subject: init --- README.md | 1 + index.html | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++++ static/favicon.ico | Bin 0 -> 318 bytes static/script.js | 62 +++++++++++++++++++++++++++++++++++++++++++++ static/styles.css | 41 ++++++++++++++++++++++++++++++ 5 files changed, 177 insertions(+) create mode 100644 README.md create mode 100644 index.html create mode 100644 static/favicon.ico create mode 100644 static/script.js create mode 100644 static/styles.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..3421378 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# Telechromy diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f099cc --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + Telechromy + + + + + + + +
+
+
+
+ Telechromy + at cyfraeviolae.org +
+
+ source code +
+
+ + + + +
+
+ + + + diff --git a/static/favicon.ico b/static/favicon.ico new file mode 100644 index 0000000..b2d7439 Binary files /dev/null and b/static/favicon.ico differ diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..7ba03d2 --- /dev/null +++ b/static/script.js @@ -0,0 +1,62 @@ +"use strict"; + +let randomByte = () => Math.floor(Math.random() * 256); +let randomColor = () => `rgb(${randomByte()}, ${randomByte()}, ${randomByte()})`; +let hide = el => el.style.display = 'none'; +let show = el => el.style.display = 'block'; +let encode = x => encodeURIComponent(btoa(x)); +let decode = x => atob(decodeURIComponent(x)); + +document.getElementById('entry').addEventListener('input', function(e) { + e.preventDefault(); + var shareEl = document.getElementById('share') + hide(shareEl) + if (!e.target.value) { + return + } + var encoded = encode(e.target.value) + var url = `${location.origin}/telechromy?prompt=${encode(c)}&text=${encoded}` + document.getElementById('url').value = url + show(shareEl) +}) + +document.getElementById('copy').addEventListener('click', function(e) { + e.preventDefault(); + document.getElementById('url').select() + document.execCommand('copy'); +}) + +document.getElementById('visit').addEventListener('click', function(e) { + e.preventDefault(); + var url = document.getElementById('url').value + window.location.replace(url) +}) + +document.getElementById('submit').addEventListener('click', function(e) { + e.preventDefault(); + var color = document.getElementById('color').value + var cc = urlParams.get('prompt') + var tt = urlParams.get('text') + var url = `${location.origin}/telechromy?prompt=${cc}&text=${tt}&guess=${encode(color)}` + window.location.replace(url) +}) + +var bodyEl = document.getElementById('body'); + +var urlParams = new URLSearchParams(window.location.search); +var text = urlParams.get('text') +if (urlParams.get('guess')) { + show(document.getElementById('result')) + show(document.getElementById('labels')) + document.getElementById('prompt-text').textContent = `“${decode(text)}”` + var pp = decode(urlParams.get('prompt')) + var gg = decode(urlParams.get('guess')) + bodyEl.style = `background: linear-gradient(90deg, ${pp} 50%, ${gg} 50%)` +} else if (text) { + show(document.getElementById('guess')) + document.getElementById('challenge').textContent = `“${decode(text)}”` +} else { + show(document.getElementById('prompt')) + var c = randomColor(); + bodyEl.style = `background-color: ${c}`; +} diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..b81618b --- /dev/null +++ b/static/styles.css @@ -0,0 +1,41 @@ +#entry { + width: 100%; + margin-bottom: 8px; +} + +#url { + width: 60%; +} + +input { + margin-top: 12px; +} + +#challenge, #prompt-text { + font-weight: bold; + font-size: x-large; +} + +.nb { + white-space: nowrap; +} + +.prompt-label { + right: 53%; +} + +.guess-label { + left: 53%; +} + +.label { + font-size: 3em; + color: white; + font-weight: bold; + position: fixed; + bottom: 30px; + text-shadow: 1px 1px 0px black + , -1px 1px 0px black + , 1px -1px 0px black + , -1px -1px 0px black; +} -- cgit v1.2.3