6 files changed, 215 insertions, 0 deletions
diff --git a/static/files.css b/static/files.css
new file mode 100644
index 0000000..2668fca
--- /dev/null
+++ b/static/files.css
@@ -0,0 +1,4 @@
+img {
+   max-width: 32px;
+   max-height: 32px;
+}
diff --git a/static/fuss-upload b/static/fuss-upload
new file mode 100755
index 0000000..6d23b25
--- /dev/null
+++ b/static/fuss-upload
@@ -0,0 +1,8 @@
+#!/bin/sh
+# File: fuss-upload.sh
+# Goal: wrap around curl to include the timestamp header to fuss
+test -z "${INFILE}" && INFILE="${1}"
+test -z "${FUSS_URL}" && FUSS_URL="${2}"
+test ! -r "${INFILE}" && { echo "Cannot read file ${INFILE}. Aborted." 1>&2 ; exit 1; }
+lastModified="$( stat -c "%Y" "${INFILE}" )"
+curl -v --header "lastModified: ${lastModified}" -F "file=@${INFILE}" "${FUSS_URL}"
diff --git a/static/index.css b/static/index.css
new file mode 100644
index 0000000..fd8d87b
--- /dev/null
+++ b/static/index.css
@@ -0,0 +1,104 @@
+:root {
+    --heading: #FFBA80;
+    --heading-mobile: #FF9A80;
+    --heading-hover: #FFD0A0;
+    --radius: 5px;
+    --radius-mobile: 2px;
+    --pre-background: rgba(0, 0, 0, .15);
+}
+
+input[type='checkbox'] {
+    display: none;
+}
+
+@viewport {
+  width: device-width ;
+  zoom: 1.0 ;
+} 
+
+.lbl-toggle {
+    display: block;
+    background: var(--heading);
+    cursor: pointer;
+    border-radius: var(--radius);
+    /* resemble h2 */
+    font-weight: bold;
+    font-size: x-large;
+}
+
+.lbl-toggle:hover {
+    background-color: var(--heading-hover);
+}
+
+/* add the triangle */
+.lbl-toggle::before {
+  content: ' ';
+  display: inline-block;
+
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 5px solid currentColor;
+
+  vertical-align: middle;
+  margin-right: .7rem;
+  transform: translateY(-2px);
+
+  transition: transform .2s ease-out;
+}
+
+.content .content-inner {
+  background: rgba(200, 180, 128, .2);
+  border-bottom: 1px solid var(--heading);
+
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+  padding: .5rem 1rem;
+}
+
+.content {
+  max-height: 0px;
+  overflow: hidden;
+
+  transition: max-height .25s ease-in-out;
+}
+
+.toggle:checked + .lbl-toggle + .content {
+  max-height: 100vh;
+}
+.toggle:checked + .lbl-toggle::before {
+  transform: rotate(90deg) translateX(-3px);
+}
+
+.toggle:checked + .lbl-toggle {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.content pre {
+  background: var(--pre-background);
+  border: 1px solid;
+}
+
+/* For narrow screens (probably mobile devices)
+ * which works because html includes meta viewport.
+ */
+@media screen and (max-width: 500px) {
+
+  .lbl-toggle {
+    background: var(--heading-mobile);
+    border-radius: var(--radius-mobile);
+    font-weight: normal;
+  }
+  .content pre {
+    /* wrap long text and urls */
+    white-space: pre; /* CSS 2.0 */
+    white-space: pre-wrap; /* CSS 2.1 */
+    white-space: pre-line; /* CSS 3.0 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    white-space: -moz-pre-wrap; /* Mozilla */
+    word-wrap: break-word; /* IE 5+ */
+  }
+
+}
+/* vim: set ts=2 sw=2 sts=2 et: */
diff --git a/static/index.js b/static/index.js
new file mode 100644
index 0000000..291c256
--- /dev/null
+++ b/static/index.js
@@ -0,0 +1,25 @@
+/* Allow toggling the checkboxes with space, enter, and left/right */
+let myLabels = document.querySelectorAll('.lbl-toggle');
+Array.from(myLabels).forEach(label => {
+  label.addEventListener('keydown', e => {
+    // 32 spacebar, 13 enter
+    if (e.which === 32 || e.which === 13) {
+      e.preventDefault(); label.click();
+    };
+    // 37 left, 39 right
+    if (e.which === 37 || e.which === 39) {
+      var inputs = document.getElementsByTagName('INPUT');
+      for (var i=0; i < inputs.length; i++) {
+        if (inputs[i].id === e.target.htmlFor) {
+          if (!inputs[i].checked && e.which === 39) {
+            e.preventDefault(); label.click();
+          }
+          if (inputs[i].checked && e.which === 37) {
+            e.preventDefault(); label.click();
+          }
+        }
+      }
+    }
+  });
+});
+
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 0000000..1f53798
--- /dev/null
+++ b/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
diff --git a/static/upload.css b/static/upload.css
new file mode 100644
index 0000000..0b37238
--- /dev/null
+++ b/static/upload.css
@@ -0,0 +1,72 @@
+/* (A) UPLOAD ZONE */
+/* vim:set ts=2 sw=2 sts=2 et: */
+
+:root {
+  --blue: #cfd5ff;
+  --radius: 5px;
+  --yellow: #f9fcbd;
+  --green: #bdfcbe;
+  --red: #ffcfd5;
+  --boxshadow1: inset 0px 0px 0px 8px;
+  --boxshadow2: 0px 0px 0px 8px;
+}
+
+#upzone {
+  width: 300px;
+  height: 200px;
+  background: var(--blue);
+  padding: 0px;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
+  /* border: 5px solid var(--blue); */
+    ;
+  box-shadow: var(--boxshadow1) var(--blue),
+    var(--boxshadow2) var(--blue);
+}
+
+/* when hovering over it with a file */
+#upzone.highlight {
+  background: var(--green);
+  box-shadow: var(--boxshadow1) var(--green),
+    var(--boxshadow2) var(--green);
+}
+
+/* when uploading files in the queue */
+#upzone.processing {
+  background: var(--yellow);
+  box-shadow: var(--boxshadow1) var(--yellow),
+    var(--boxshadow2) var(--yellow);
+}
+
+#upzone.invalid {
+  background: var(--red);
+  box-shadow: var(--boxshadow1) var(--red),
+    var(--boxshadow2) var(--red);
+}
+
+#upzone.processing, #upzone.highlight, #upzone.invalid, #upzone {
+  /* nice transition effect when beginning to upload */
+  -webkit-transition: all 0.25s linear;
+  -moz-transition: all 0.25s linear;
+  -o-transition: all 0.25s linear;
+  transition: all 0.25s linear;
+  border: 3px solid rgba(0,0,0,0.1);
+  border-radius: var(--radius);
+  border-style: dashed;
+}
+
+/* (B) UPLOAD FORM */
+#upform {
+  /* display anyway, even with upload zone visible */
+  display: block;
+}
+
+#upstat {
+  font-size: 70%;
+}
+
+/* this div will be set to display: block by javascript */
+#hiddenfirst {
+  display: none;
+}