From 5410b26125a68382708c3db38255cc136062b26a Mon Sep 17 00:00:00 2001
From: Basile Clement <basile@clement.pm>
Date: Sat, 7 Apr 2018 11:14:54 +0200
Subject: [PATCH 1/2] Add Pipfile with dependencies

---
 Pipfile      |  9 ++++++++
 Pipfile.lock | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 Pipfile
 create mode 100644 Pipfile.lock

diff --git a/Pipfile b/Pipfile
new file mode 100644
index 0000000..0719cf7
--- /dev/null
+++ b/Pipfile
@@ -0,0 +1,9 @@
+[[source]]
+url = "https://pypi.python.org/simple"
+verify_ssl = true
+name = "pypi"
+
+[packages]
+flask = "*"
+
+[dev-packages]
diff --git a/Pipfile.lock b/Pipfile.lock
new file mode 100644
index 0000000..f9ad71a
--- /dev/null
+++ b/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": {}
+}

From e3d1dff9adf9dc603bce4861cd2772b6b340470b Mon Sep 17 00:00:00 2001
From: Basile Clement <basile@clement.pm>
Date: Sat, 7 Apr 2018 13:53:55 +0200
Subject: [PATCH 2/2] 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.
---
 static/hasrung.svg      |  1 +
 static/toomuch.svg      |  3 ++
 templates/base.html     | 77 ++++++++++++++++++++++++++++++++++++++++-
 templates/homepage.html | 31 ++++++++---------
 4 files changed, 95 insertions(+), 17 deletions(-)
 create mode 100644 static/hasrung.svg
 create mode 100644 static/toomuch.svg

diff --git a/static/hasrung.svg b/static/hasrung.svg
new file mode 100644
index 0000000..efa1e7e
--- /dev/null
+++ b/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>
diff --git a/static/toomuch.svg b/static/toomuch.svg
new file mode 100644
index 0000000..a365073
--- /dev/null
+++ b/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>
diff --git a/templates/base.html b/templates/base.html
index c6169fb..6a5f741 100644
--- a/templates/base.html
+++ b/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 %}
diff --git a/templates/homepage.html b/templates/homepage.html
index ed17464..634887d 100644
--- a/templates/homepage.html
+++ b/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 %}