Add some minimal styling

resources/public/fonts/M+ Fonts License.txt

@@ -0,0 +1,16 @@
+M+ FONTS                                Copyright (C) 2002-2008 M+ FONTS PROJECT
+
+-
+
+LICENSE_E
+
+
+
+
+These fonts are free softwares.
+Unlimited permission is granted to use, copy, and distribute it, with
+or without modification, either commercially and noncommercially.
+THESE FONTS ARE PROVIDED "AS IS" WITHOUT WARRANTY.
+
+
+http://mplus-fonts.sourceforge.jp/mplus-outline-fonts/

resources/public/style.css

@@ -1,3 +1,10 @@
+@font-face {
+    font-family: 'mplus-1m';
+    font-weight: normal;
+    src: url('fonts/mplus-1m-regular-webfont.woff2') format('woff2'),
+         url('fonts/mplus-1m-regular-webfont.woff') format('woff');
+}
+
 *,
 *::before,
 *::after {
@@ -12,8 +19,60 @@ body {
 }
 
 body {
-    color: #222;
+    font-family: 'mplus-1m', monospace;
-    line-height: 1.2
+    line-height: 1.5;
+    font-size: 18px;
+    color: #444;
+}
+
+h1 {
+    font-size: 18px;
+    color: hsl(240, 100%, 70%);
+    display: inline-block;
+    border-bottom: 2px solid currentcolor;
+    margin: 0
+}
+
+p {
+    margin: 18px 0;
+}
+
+p:first-of-type {
+    margin-top: 24px;
+}
+
+p:last-of-type {
+    margin-bottom: 24px
+}
+
+button {
+    background: hsl(240, 100%, 70%);
+    border-radius: 4px;
+    border: none;
+    padding: 4px 8px;
+    color: #fff;
+    line-height: 24px;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+button:hover {
+    transform: translateY(-1px);
+    cursor: pointer
+}
+
+input {
+    border: none;
+    border-bottom: 2px solid hsl(240, 100%, 70%);
+    color: hsl(240, 100%, 70%);
+    background: none;
+    font-family: inherit;
+    font-size: inherit;
+    height: 30px;
+    line-height: 24px;
+    margin-right: 8px;
+    width: 120px;
+    text-align: center;
 }
 
 #welcome-message {
@@ -46,6 +105,13 @@ body {
     text-align: center;
 }
 
+.capture-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 28px;
+}
+
 canvas#result {
     /* needs position: absolute so it's rendered above the video */
     position: absolute;
@@ -59,5 +125,6 @@ video#capture {
 
 canvas#result,
 video#capture {
-    transform: scale(-1, 1)
+    transform: scale(-1, 1);
+    border-radius: 4px;
 }

src/heyarne/all_my_friends/core.cljs

@@ -3,12 +3,13 @@
             [reagent.dom :as dom]
             [heyarne.all-my-friends.views :as views]))
 
+
 (defn draw-results [ctx _video predictions]
   ;; remove previous results
   (.clearRect ctx 0 0 (.. ctx -canvas -width) (.. ctx -canvas -height))
 
   ;; draw and append new results
-  (set! (.-strokeStyle ctx) "pink")
+  (set! (.-strokeStyle ctx) "white")
   (doseq [prediction predictions
           [x y _] (j/get prediction :scaledMesh)]
     (doto ctx

src/heyarne/all_my_friends/views.cljs

@@ -1,6 +1,5 @@
 (ns heyarne.all-my-friends.views
   (:require [reagent.core :as r]
-            [reagent.dom :as dom]
             [heyarne.all-my-friends.facemesh :refer [webcam-facemesh]]))
 
 ;; minimalistic re-frame-like event handling
@@ -26,8 +25,8 @@
    [:p "Ich möchte dir kurz erklären, was dich hier erwartet:
 Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen Kontakt weitgehend zu verzichten. Ein Großteil der Zeit, die ich mit euch verbringe, hat sich ins Digitale verlagert."]
    [:p "Das fühlt sich sicher bald komplett normal an -- vorher möchte ich aber gerne irgendwas mit dem komischen Gefühl machen, das das hinterlässt."]
-   [:p "Ich würde mich freuen, wenn du mir dabei hilfst. Folge dazu einfach den Anweisungen. Das Ergebnis wird hoffentlich eine schöne Sammlung von Webcambildern und 3D-Modellen eurer Köpfe" [:sup "1"] "."]
+   [:p "Ich würde mich freuen, wenn du mir dabei hilfst. Folge dazu einfach den Anweisungen. Das Ergebnis wird hoffentlich eine schöne Sammlung von Webcambildern und 3D-Modellen eurer Köpfe."]
-   [:button {:on-click #(dispatch [:welcome/continue])} "Weiter"]])
+   [:button {:on-click #(dispatch [:welcome/continue])} "Cool cool, weiter bitte"]])
 
 (defn video-snapshot [video-elem]
   (let [canvas (js/document.createElement "canvas")
@@ -43,7 +42,7 @@ Seit der globalen Covid19-Pandemie sind wir alle dazu gezwungen, auf physischen
                       :predictions nil})]
     (fn [{:keys [on-faces-detected halt?]}]
       [:div.container
-       [:p "Tippe auf den Button um mir das untere Bild zu schicken."]
+       [:p "Tippe auf den Button um ein Bild zu machen."]
        [webcam-facemesh {:on-faces-detected (fn [ctx video predictions]
                                               (swap! result assoc
                                                      :video video