diff --git a/README.md b/README.md
index b03517a..de5cfb0 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,4 @@
 # irl-colour-time
 
+This is the very hacky source code behind http://chez.kindrobot.ca/puter.html.
+
diff --git a/puter.html b/puter.html
new file mode 100644
index 0000000..8969cc2
--- /dev/null
+++ b/puter.html
@@ -0,0 +1,87 @@
+<html>
+<head>
+<title>kindrobot</title>
+<style type="text/css">
+  body {
+    background-color: DarkSlateGray;
+    color: Gainsboro;
+    font-family: courier;
+    max-width: 650px;
+    margin-left: 100px;
+  }
+  a {
+    color: LightGray;
+  }
+  #title {
+    display: inline;
+  }
+</style>
+</head>
+<body>
+
+  <h1>'puter colour picker</h1>
+  <em>Help me decorate my office.</em>
+
+  <form id="colour-change-form">
+    <input type="text" placeholder="red (0-255)" id="colour-change-red"/>
+    <input type="text" placeholder="green (0-255)" id="colour-change-green"/>
+    <input type="text" placeholder="blue (0-255)" id="colour-change-blue"/>
+    <input type="text" placeholder="a nice note" id="colour-change-note"/>
+    <input type="submit" id="colour-change-submit" value="Submit"/>
+  </form>
+  <img src="http://home.kindrobot.ca/puter.png" alt="a computer with some colour" id="img-puter"/>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", (event) => {
+    const theForm = document.getElementById('colour-change-form');
+    theForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const red = parseInt(document.getElementById('colour-change-red').value);
+      const green = parseInt(document.getElementById('colour-change-green').value);
+      const blue = parseInt(document.getElementById('colour-change-blue').value);
+      const note = document.getElementById('colour-change-note').value;
+
+      if(isNaN(red) || red < 0 || red > 255){
+        alert("red needs to be a number between 0 and 255");
+        return;
+      }
+      if(isNaN(blue) || blue < 0 || blue > 255){
+        alert("blue needs to be a number between 0 and 255");
+        return;
+      }
+      if(isNaN(green) || green < 0 || green > 255){
+        alert("green needs to be a number between 0 and 255");
+        return;
+      }
+      if(!note || note == ""){
+        alert("please provide a note");
+        return;
+      }
+
+      const response = await fetch("https://colour-time-default-rtdb.firebaseio.com/messages.json", {
+        method: 'POST',
+        mode: 'cors',
+        cache: 'no-cache',
+        headers: {'Content-Type': 'application/json'},
+        redirect: 'follow',
+        body: JSON.stringify({
+          text: note, red, green, blue
+        })
+      });
+      const resultBody = await response.json();
+      console.log(resultBody);
+      alert("Thank you so much! Please stick around for about a minute to see your change.");
+      theForm.reset();
+
+      const img = document.getElementById('img-puter');
+      let count = 0;
+      const looper = setInterval(() => {
+        img.src = `http://home.kindrobot.ca/puter.png?t=${new Date().getTime()}`;
+        if(++count >= 5)
+          clearInterval(looper);
+      }, 15000);
+    });
+  });
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/update_colour.ps1 b/update_colour.ps1
index ff540a6..eb3224b 100644
--- a/update_colour.ps1
+++ b/update_colour.ps1
@@ -10,4 +10,5 @@ echo $blue
 
 $setCmd = "set-all=$red,$green,$blue"
 echo $setCmd
-& "C:\Program Files\AlienFX Tools\alienfx-cli.exe" $setCmd
\ No newline at end of file
+& "C:\Program Files\AlienFX Tools\alienfx-cli.exe" $setCmd
+& 'C:\Program Files\OpenCamera\openphoto.exe' C:\inetpub\wwwroot\puter.png
\ No newline at end of file
