summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorcyfraeviolae <cyfraeviolae>2022-03-20 14:44:28 -0400
committercyfraeviolae <cyfraeviolae>2022-03-20 14:44:28 -0400
commite67912e1fe3c4df13a551f335600a695bd834a0f (patch)
tree800e137297463d20f600e772c0ffa56e3a8109f7 /static
init
Diffstat (limited to 'static')
-rw-r--r--static/favicon.icobin0 -> 318 bytes
-rw-r--r--static/script.js62
-rw-r--r--static/styles.css41
3 files changed, 103 insertions, 0 deletions
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 0000000..b2d7439
--- /dev/null
+++ b/static/favicon.ico
Binary files 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;
+}