Add some basic styling to the sonnette #1
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">
|
||||
<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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue