forked from tobast/sonnetteweb
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
parent
5410b26125
commit
e3d1dff9ad
4 changed files with 95 additions and 17 deletions
1
static/hasrung.svg
Normal file
1
static/hasrung.svg
Normal 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
3
static/toomuch.svg
Normal 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 |
|
|
@ -3,10 +3,85 @@
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
<title>Sonnette de l'Arcoloc</title>
|
<title>Sonnette de l'Arcoloc</title>
|
||||||
<meta name="author" content="Arcoloc.eu">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,22 @@
|
||||||
|
|
||||||
{% block content %}
|
{% 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">
|
<form method="post">
|
||||||
<input type="hidden" name='ding' value='dong' />
|
<button type="submit" name="ding" value="dong">
|
||||||
<input type="submit" value="Dring !" />
|
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>
|
</form>
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue