e3d1dff9ad
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.
90 lines
1.5 KiB
HTML
90 lines
1.5 KiB
HTML
<!doctype html>
|
|
|
|
<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">
|
|
<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 %}
|
|
{% endblock content %}
|
|
</body>
|
|
</html>
|