Add some basic styling to the sonnette

The style is inline in the HTML because it avoids another HTTP request
before displaying the page, and that makes it more performant. This is
an important feature when it rains, and people don't want to wait
outside for too long.

Pipfile

@@ -0,0 +1,9 @@
+[[source]]
+url = "https://pypi.python.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+flask = "*"
+
+[dev-packages]

Pipfile.lock

@@ -0,0 +1,60 @@
+{
+    "_meta": {
+        "hash": {
+            "sha256": "903ea670e1e389320ed1f7cac23eb9b152bf693ab77c2e9e1ac1c68d43d3d473"
+        },
+        "pipfile-spec": 6,
+        "requires": {},
+        "sources": [
+            {
+                "name": "pypi",
+                "url": "https://pypi.python.org/simple",
+                "verify_ssl": true
+            }
+        ]
+    },
+    "default": {
+        "click": {
+            "hashes": [
+                "sha256:29f99fc6125fbc931b758dc053b3114e55c77a6e4c6c3a2674a2dc986016381d",
+                "sha256:f15516df478d5a56180fbf80e68f206010e6d160fc39fa508b65e035fd75130b"
+            ],
+            "version": "==6.7"
+        },
+        "flask": {
+            "hashes": [
+                "sha256:0749df235e3ff61ac108f69ac178c9770caeaccad2509cb762ce1f65570a8856",
+                "sha256:49f44461237b69ecd901cc7ce66feea0319b9158743dd27a2899962ab214dac1"
+            ],
+            "index": "pypi",
+            "version": "==0.12.2"
+        },
+        "itsdangerous": {
+            "hashes": [
+                "sha256:cbb3fcf8d3e33df861709ecaf89d9e6629cff0a217bc2848f1b41cd30d360519"
+            ],
+            "version": "==0.24"
+        },
+        "jinja2": {
+            "hashes": [
+                "sha256:74c935a1b8bb9a3947c50a54766a969d4846290e1e788ea44c1392163723c3bd",
+                "sha256:f84be1bb0040caca4cea721fcbbbbd61f9be9464ca236387158b0feea01914a4"
+            ],
+            "version": "==2.10"
+        },
+        "markupsafe": {
+            "hashes": [
+                "sha256:a6be69091dac236ea9c6bc7d012beab42010fa914c459791d627dad4910eb665"
+            ],
+            "version": "==1.0"
+        },
+        "werkzeug": {
+            "hashes": [
+                "sha256:c3fd7a7d41976d9f44db327260e263132466836cef6f91512889ed60ad26557c",
+                "sha256:d5da73735293558eb1651ee2fddc4d0dedcfa06538b8813a2e20011583c9e49b"
+            ],
+            "version": "==0.14.1"
+        }
+    },
+    "develop": {}
+}

static/hasrung.svg

@@ -0,0 +1 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M75.3,35.7c0.3,0.5,6.3,11.4,0.1,24.3c-0.3,0.7-1,1-1.7,1c-0.3,0-0.5-0.1-0.8-0.2c-0.9-0.4-1.3-1.6-0.9-2.5  c5.4-11.1,0.3-20.5,0.1-20.9c-0.5-0.9-0.2-2,0.7-2.5C73.7,34.5,74.8,34.8,75.3,35.7z M84.9,26.2c-0.5-0.9-1.6-1.2-2.5-0.7  c-0.9,0.5-1.2,1.6-0.7,2.5c0.1,0.2,10.3,18.5-0.1,39.8c-0.4,0.9-0.1,2,0.9,2.5c0.3,0.1,0.5,0.2,0.8,0.2c0.7,0,1.3-0.4,1.7-1  C96.1,46.5,85.3,27,84.9,26.2z M63.6,21.4v53.8c0,0,0,0.1,0,0.1c-0.1,1.9-1.4,2.7-2.6,2.7c-0.8,0-1.6-0.4-2.6-1.1L42.9,64.5h-6.1  v11.9c0,3.4-2.7,6.1-6.1,6.1h-5.4c-3.4,0-6.1-2.7-6.1-6.1V64.5h-4.5c-3.3,0-6-2.7-6-6V36.8c0-3.3,2.7-6,6-6h28.3L58,18.7  c0.1-0.1,0.3-0.2,0.4-0.3c0.2-0.1,1.1-0.4,2-0.4C62.3,18,63.6,19.4,63.6,21.4z M14.6,60.8H21h13.9h6.8V34.5H14.6  c-1.2,0-2.3,1-2.3,2.3v21.7C12.4,59.8,13.4,60.8,14.6,60.8z M33.1,64.5H22.9v11.9c0,1.3,1.1,2.4,2.4,2.4h5.4c1.3,0,2.4-1.1,2.4-2.4  V64.5z M59.9,21.9L45.4,33.5v28.2l14.5,11.6V21.9z"></path></svg>

static/toomuch.svg

@@ -0,0 +1,3 @@
+<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
+  <path d="M89.9,55.3c0.7,0.7,0.7,1.9,0,2.6c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5L81,51.6l-6.3,6.3  c-0.4,0.4-0.8,0.5-1.3,0.5c-0.5,0-0.9-0.2-1.3-0.5c-0.7-0.7-0.7-1.9,0-2.6l6.3-6.3l-6.3-6.3c-0.7-0.7-0.7-1.9,0-2.6  c0.7-0.7,1.9-0.7,2.6,0l6.3,6.3l6.3-6.3c0.7-0.7,1.9-0.7,2.6,0c0.7,0.7,0.7,1.9,0,2.6L83.6,49L89.9,55.3z M63.2,21.2V75  c0,0,0,0.1,0,0.1c-0.1,1.9-1.4,2.7-2.6,2.7h0c-0.8,0-1.6-0.4-2.6-1.1L42.4,64.3h-6.1v11.9c0,3.4-2.7,6.1-6.1,6.1h-5.4  c-3.4,0-6.1-2.7-6.1-6.1V64.3h-4.5c-3.3,0-6-2.7-6-6V36.6c0-3.3,2.7-6,6-6h28.3l15.1-12.1c0.1-0.1,0.2-0.2,0.3-0.2  c0,0,1-0.5,2.1-0.5C61.9,17.8,63.2,19.2,63.2,21.2z M14.2,60.6h6.4h13.9h6.8V34.3H14.2c-1.2,0-2.3,1-2.3,2.3v21.7  C11.9,59.6,12.9,60.6,14.2,60.6z M32.6,64.3H22.4v11.9c0,1.3,1.1,2.4,2.4,2.4h5.4c1.3,0,2.4-1.1,2.4-2.4V64.3z M59.5,21.7L44.9,33.4  v28.2l14.5,11.6V21.7z"></path>
+</svg>

templates/base.html

@@ -3,10 +3,85 @@
 <html lang="fr">
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>Sonnette de l'Arcoloc</title>
     <meta name="author" content="Arcoloc.eu">
-    <!-- <link rel="stylesheet" href="static/style.css"> -->
+    <style>
+* {
+  box-sizing: border-box;
+}
+html, body {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+form {
+  background: #97022c;
+  color: #FFF;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+  width: initial;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+button {
+  flex: 0 0 auto;
+  font-size: 52px;
+  line-height: 28px;
+  font-weight: bold;
+  text-align: center;
+
+  display: block;
+  background: none;
+  color: inherit;
+  border: none;
+  outline: inherit;
+  cursor: pointer;
+}
+button span {
+  display: block;
+  font-size: 22px;
+  margin: 10px 0 0 100px;
+}
+div.notification {
+  position: relative;
+  flex: 0 0 auto;
+  width: 320px;
+  max-width: 90%;
+}
+p {
+  position: absolute;
+  width: 100%;
+  background: #fff;
+  padding: 10px 2px;
+  color: #000;
+  line-height: 18px;
+  min-height: 56px;
+  background: #e6e7ea;
+}
+p::before {
+  content: '';
+  width: 36px;
+  height: 36px;
+  margin: 0 8px;
+  float: left;
+}
+p.hasrung::before {
+  background: url(static/hasrung.svg);
+}
+p.toomuch::before {
+  background: url(static/toomuch.svg);
+}
+    </style>
   </head>
   <body>
     {% block content %}

templates/homepage.html

@@ -2,23 +2,22 @@
 
 {% block content %}
 
-<h1>Sonnette de l'Arcoloc</h1>
-
-{% if has_rung %}
-<div id="hasrung">
-  <p>Dring :)</p>
-</div>
-{% endif %}
-
-{% if too_much_dring %}
-<div id="toomuch">
-  <p>Non mais on est pas sourd·e·s, hein. Nonmaisoh.</p>
-</div>
-{% endif %}
-
 <form method="post">
-  <input type="hidden" name='ding' value='dong' />
-  <input type="submit" value="Dring !" />
+  <button type="submit" name="ding" value="dong">
+    Sonner <span>à l'Arcoloc</span>
+  </button>
+  <div class="notification">
+{% if has_rung %}
+    <p class="hasrung">
+      Dring :)
+    </p>
+{% endif %}
+{% if too_much_dring %}
+    <p class="toomuch">
+      Non mais on est pas sourd·e·s, hein. Nonmaisoh.
+    </p>
+{% endif %}
+  </div>
 </form>
 
 {% endblock content %}