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
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;
+}