Commit 12a3c766 authored by Kylian ou Nathan's avatar Kylian ou Nathan
Browse files

Up

parent cb1c4ded
......@@ -23,75 +23,68 @@
</header>
<main>
<div class="container">
<div class="subtitle_container subcontainer">
<i class='uil uil-file'></i>
<div class="subtitle">Filtres</div>
</div>
<div class="anciennte_container subcontainer">
<div>
<h3>Capteurs</h3>
</div>
<form method="post">
<input class="checkbox_input" type="checkbox" name="time" id="capteur1">
<label class="input_label" for="capteur1">Capteur 1</label>
<input class="checkbox_input" type="checkbox" name="time" id="capteur2">
<label class="input_label" for="capteur2">Capteur 2</label>
<input class="checkbox_input" type="checkbox" name="time" id="capteur3">
<label class="input_label" for="capteur3">Capteur 3</label>
</form>
</div>
<div class="action_container subcontainer">
<div>
<h3>Action</h3>
</div>
<form method="post">
<input class="checkbox_input" type="checkbox" name="choix1" id="ac1" checked>
<label class="input_label" for="ac1">Activation capteur</label>
<input class="checkbox_input" type="checkbox" name="choix2" id="ac2" checked>
<label class="input_label" for="ac2">Désactivation capteur</label>
<input class="checkbox_input" type="checkbox" name="choix3" id="ac3" checked>
<label class="input_label" for="ac3">Probleme capteur</label>
</form>
</div>
<div class="anciennte_container subcontainer">
<div>
<h3>Ancienneté</h3>
</div>
<form method="post">
<input class="radio_input" type="radio" name="time" id="an1">
<label class="input_label" for="an1">1 jour</label>
<input class="radio_input" type="radio" name="time" id="an2">
<label class="input_label" for="an2">1 semaine</label>
<input class="radio_input" type="radio" name="time" id="an3">
<label class="input_label" for="an3">1 mois</label>
<input class="radio_input" type="radio" name="time" id="an4">
<label class="input_label" for="an4">Tout</label>
</form>
</div>
<div class="confirmer_container subcontainer">
<input type="submit" value="Confirmer" id="bouton">
<div class="container_title orange">
<i class='uil uil-file'></i>
<div class="subtitle">Logs</div>
</div>
<div class="month">
<i class='uil uil-arrow-left'></i>
<p>Janvier</p>
</div>
<div class="container">
<?php
for($i = 1 ; $i < 32 ; $i++)
{
echo "<div class='one_day'><p>".$i."</p></div>";
}
?>
</div>
<div class="container">
<div class="subtitle_container subcontainer">
<i class='uil uil-file'></i>
<div class="subtitle">Logs</div>
</div>
<div class="log_container subcontainer">
<div>
<p>-> activation 07/11/2019 - 10h21: capteur porte</p>
</div>
<div>
<p>-> désactivation 07/11/2019 - 10h20: capteur porte</p>
</div>
<div>
<p>-> désactivation 02/11/2019 - 17h47: capteur de mouvement</p>
</div>
<div class="timeline">
<div class="container">
<ul>
<li>
<span></span>
<div>
<div class="title">Codify</div>
<div class="info">Let's make coolest things in css</div>
<div class="type">Prensetation</div>
</div>
<span class="number">
<span>10:00</span>
<span>12:00</span>
</span>
</li>
<li>
<div>
<span></span>
<div class="title">Codify</div>
<div class="info">Let's make coolest things in javascript</div>
<div class="type">Prensetation</div>
</div>
<span class="number">
<span>13:00</span>
<span>14:00</span>
</span>
</li>
<li>
<div>
<span></span>
<div class="title">Codify</div>
<div class="info">Let's make coolest things in css</div>
<div class="type">Review</div>
</div>
<span class="number">
<span>15:00</span>
<span>17:45</span>
</span>
</li>
</ul>
</div>
</div>
</main>
</body>
</html>
\ No newline at end of file
......@@ -360,6 +360,11 @@ main .green,
color: #27AE60;
}
main .orange,
.orange {
color: orange;
}
/***************************************************************************
##### EXEMPLE INDICATEUR DE COULEUR #####
......
......@@ -37,7 +37,6 @@ main {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 15px;
height: 100%;
padding-top: 50px;
......@@ -49,49 +48,143 @@ main {
/****************************************************/
.container_title {
margin: 40px 0px 20px 0px;
display: flex;
align-items: center;
font-size: 24px;
}
main .container {
height: auto;
display: flex;
flex-wrap: wrap;
}
main .month {
margin: 0 auto;
align-items: center;
display: flex;
font-size: 20px;
}
main .one_day {
height: 40px;
width: 40px;
color: black;
background: white;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
margin: 2%;
padding: 20px;
}
main .one_day p {
margin: 5px 0 0 0;
font-size: 24px;
text-align: center;
}
/*******************/
.timeline {
height: fit-content;
width: 90%;
color: black;
background: white;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
margin-top: 30px;
margin: 20px auto;
padding: 20px;
}
h3 {
margin-bottom: 10px;
.container ul {
list-style: none;
transform: translate(0%, 0%);
padding: 1px 30px 1px 50px;
}
p {
margin: 5px 0px 5px 0px
.container ul:before {
content: '';
width: 1px;
height: 100%;
position: absolute;
border-left: 2px dashed #000;
}
.subcontainer:not(.subtitle_container) {
margin-top: 25px;
.container ul li {
position: relative;
margin-left: 30px;
background-color: rgba(255, 255, 255, 0.2);
padding: 14px;
border-radius: 6px;
width: 250px;
box-shadow: 0 0 4px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .08)
}
.subtitle_container {
display: flex;
align-items: center;
font-size: 24px;
.container ul li:not(:first-child) {
margin-top: 60px;
}
.subtitle {
color: orange;
.container ul li>span {
width: 2px;
height: 100%;
background: #000;
left: -30px;
top: 0;
position: absolute;
}
#bouton {
background-color: transparent;
border: 1px #1B6DC1 solid;
border-radius: 5px;
padding: 10px 20px 10px 20px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
outline: none;
color: #1B6DC1;
.container ul li>span:before,
.container ul li>span:after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
border: 2px solid #000;
position: absolute;
background: #4C84FF;
left: -5px;
top: 0;
}
.container ul li span:after {
top: 100%;
}
.container ul li>div {
margin-left: 10px;
}
.container div .title,
.container div .type {
font-weight: 600;
font-size: 12px;
}
.container div .info {
font-weight: 300;
}
.container div>div {
margin-top: 5px;
}
.container span.number {
height: 100%;
}
.container span.number span {
position: absolute;
font-size: 10px;
left: -35px;
font-weight: bold;
}
.container span.number span:first-child {
top: 0;
}
#bouton:hover {
cursor: pointer;
.container span.number span:last-child {
top: 100%;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment