Add some basic styling to the sonnette #1

Merged
tobast merged 1 commit from Elarnon/sonnetteweb:master into master 2023-09-01 09:33:39 +02:00
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 %}