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.
This commit is contained in:
Basile Clement 2018-04-07 13:53:55 +02:00
parent 5410b26125
commit e3d1dff9ad
4 changed files with 95 additions and 17 deletions

1
static/hasrung.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

3
static/toomuch.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 1 KiB

View file

@ -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 %}

View file

@ -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 %}