Skip to content

GitLab

Commit 3c9a8096 authored by LockhomeDevelopper's avatar LockhomeDevelopper
Browse files

Mise à jour du CSS terminée

parent 15afe14a
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 620 deletions
application/views/accueil/accueil.php
View file @ 3c9a8096
......@@ -4,7 +4,6 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?= base_url("/static/accueil.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/commun.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/style_general_commun.css") ?>">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.0.1/css/unicons.css">
......
application/views/camera/edit.php
View file @ 3c9a8096
......@@ -8,7 +8,6 @@
<title>Edition caméra - LockHome</title>
<link rel="stylesheet" type="text/css" href="<?= base_url("/static/style_general_commun.css") ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url("/static/commun.css") ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url("/static/camera_edition.css") ?>">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.0.1/css/unicons.css">
</head>
......
application/views/camera/list.php
View file @ 3c9a8096
......@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Caméras - LockHome</title>
<link rel="stylesheet" href="<?=base_url("/static/camera_liste.css")?>">
<link rel="stylesheet" href="<?=base_url("/static/commun.css")?>">
<link rel="stylesheet" href="<?= base_url("/static/style_general_commun.css") ?>">
......@@ -67,18 +66,20 @@
else{
foreach($cameras as $camera){ ?>
<a href="<?=base_url("/camera/view/" . $camera->id)?>" class="image_button_link">
<img src="<?= base_url("/camera/stream/$camera->ip/stream.mjpg") ?>" />
<div class="button l_r">
<div class="left">
<i class='uil uil-camera'></i>
<p class="title"><?= $camera->nom ?></p>
<div class="bloc white_b">
<a href="<?=base_url("/camera/view/" . $camera->id)?>" class="container_bloc l_r black">
<img src="<?= base_url("/camera/stream/$camera->ip/stream.mjpg") ?>" />
<div class="container_bloc one_line_bloc l_r">
<div class="left">
<i class='uil uil-camera'></i>
<p class="title"><?= $camera->nom ?></p>
</div>
<div class="right">
<i class='uil uil-angle-right'></i>
</div>
</div>
<div class="right">
<i class='uil uil-angle-right'></i>
</div>
</div>
</a>
</a>
</div>
<?php }} } ?>
</div>
......
application/views/camera/view.php
View file @ 3c9a8096
......@@ -29,19 +29,21 @@
</header>
<main>
<div class="container">
<section class="guide">
<div class="l_r">
<div class="left blue">
<i class='uil uil-comment-info-alt'></i>
<p>Guide d'utilisation de cette page</p>
<section class="bloc white_b black">
<div class="container_bloc severals_lines_bloc">
<div class="l_r">
<div class="title_bloc left blue">
<i class='uil uil-comment-info-alt'></i>
<p>Guide d'utilisation de cette page</p>
</div>
<div class="right"><i class='uil uil-angle-down'></i></div>
</div>
<div class="content_bloc">
<p class="text">
Cette page vous permet de visualiser la caméra en temps réel ainsi que de visionner
les vidéos enregistrées lors d'une intrusion.
</p>
</div>
<div class="right"><i class='uil uil-angle-down'></i></div>
</div>
<div class="info">
<p>
Cette page vous permet de visualiser la caméra en temps réel ainsi que de visionner
les vidéos enregistrées lors d'une intrusion.
</p>
</div>
</section>
......
application/views/capteur/edit.php
View file @ 3c9a8096
......@@ -7,7 +7,6 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Capteur - LockHome</title>
<link rel="stylesheet" href="<?= base_url("/static/commun.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/capteur_edition.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/style_general_commun.css") ?>">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
......
application/views/capteur/list.php
View file @ 3c9a8096
......@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gestion des capteurs - LockHome</title>
<link rel="stylesheet" href="<?= base_url("/static/capteur_liste.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/commun.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/style_general_commun.css") ?>">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
......
application/views/profil/edit.php
View file @ 3c9a8096
......@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Profil - LockHome</title>
<link rel="stylesheet" href="<?= base_url("/static/profil_edition.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/commun.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/style_general_commun.css") ?>">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
......
application/views/profil/list.php
View file @ 3c9a8096
......@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gestion des profils - LockHome</title>
<link rel="stylesheet" href="<?= base_url("/static/profil_liste.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/commun.css") ?>">
<link rel="stylesheet" href="<?= base_url("/static/style_general_commun.css") ?>">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
......
static/accueil.css deleted 100755 → 0
View file @ 15afe14a
.intrusion{
color: white;
border-radius: 5px;
}
.red_intrusion {
flex-direction: column;
background: #c62828;
}
.green_intrusion {
flex-direction: row;
background: #27AE60;
}
.intrusion > * {
width: 100%;
}
.intrusion .uil-shield-exclamation {
font-size: 28px;
}
.intrusion > div:nth-child(1){
margin: 15px 0px;
}
.intrusion_detected {
font-size: 19px;
display: flex;
align-items: center;
}
.detailIntrusion {
margin-bottom: 15px;
}
a.go_to_camera {
padding: 10px 0;
background: rgba(255, 255, 255, 0.1);
transition: background .3s;
color: white;
}
a.go_to_camera:hover {
background: rgba(255, 255, 255, 0.3);
}
.maison {
height: auto;
background: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
}
.maison img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 200px;
object-fit: cover;
}
.maison .maison_protege {
margin-top: 15px;
margin-bottom: 15px;
}
.maison .maison_protege p,
.maison .maison_protege i {
font-size: 26px;
}
.maison select {
margin: auto 0 auto 0;
height: 25px;
border-radius: 5px;
width: 100px;
}
.maison .title {
font-weight: bolder;
margin-right: 10px;
}
.maison .maison_profil,
.maison .maison_horaire{
padding: 15px 0 20px 15px;
font-size: 16px;
}
.maison .maison_profil,
.maison .maison_horaire {
display: flex;
}
/*************************************************************************/
@media only screen and (min-width: 1240px) {
.menu {
display: flex;
justify-content: space-between;
}
.menu {
flex-wrap: wrap;
}
.menu a.simple_button_link {
width: 24%;
}
}
\ No newline at end of file
static/commun.css
View file @ 3c9a8096
......@@ -56,158 +56,214 @@ Permet de disposer les éléments à gauche et à droite
}
/**************************************************************************
##### EXEMPLE SIMPLE LAYOUT #####
Permet de faire un bloc sans lien
<section class="simple_layout">
<div class="green_intrusion l_r">
<div class="left">
<i class='uil uil-shield-exclamation'></i>
<p>Votre texte</p>
</div>
</div>
</section>
*/
/*
section.simple_layout {
font-weight: 400;
color: white;
border-radius: 5px;
/* CLASSE A UTILISER POUR LES DIFFERENTS BLOC DU SITE */
.bloc{
min-height: 30px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
display: flex;
}*/
border-radius: 5px;
}
.bloc .content_bloc .text{
margin: auto 15px auto 30px;
padding-bottom: 20px;
}
/**************************************************************************
##### EXEMPLE SIMPLE LINK BUTTON #####
Permet de faire le cadre du bouton
.container_bloc{
border-radius: 5px;
flex-direction: column;
}
<a href="###" class="simple_button_link l_r">
<div class="left">
<i class='uil uil-plus-circle'></i>
<div class="title">Texte sur le bouton</div>
</div>
<div class="right">
<i class='uil uil-angle-right'></i>
</div>
</a>
*/
/*
a.simple_button_link {
.container_bloc > *{
width: 100%;
}
.container_bloc.one_line_bloc{
flex-direction: row;
height: 50px;
color: black;
background: white;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
}
.container_bloc.severals_lines_bloc{
flex-direction: column;
}
a.container_bloc{
transition: box-shadow .3s, background .3s, color .3s;
}
a.simple_button_link:hover {
a.container_bloc:hover{
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
main a.simple_button_link.red:hover {
background: #E62929;
color: #fff;
.container_bloc .link_in_bloc{
padding: 10px 0;
background: rgba(255, 255, 255, 0.1);
transition: background .3s;
}
*/
/***************************************************************************
##### EXEMPLE IMAGE LINK BUTTON #####
Permet de faire le cadre du bouton
<a href="####" class="image_button_link">
<img src="###" alt="###">
<div class="button l_r">
<div class="left">
<i class='uil uil-webcam'></i>
<p class="title">Text sur le bouton sous l'image</p>
</div>
<div class="right">
<i class='uil uil-angle-right'></i>
</div>
</div>
</a>
*/
/*
a.image_button_link {
margin-bottom: 15px;
height: auto;
width: 90%;
background: #FFFFFF;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
color: #000;
.container_bloc .link_in_bloc:hover{
background: rgba(255, 255, 255, 0.3);
}
a.image_button_link:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
.container_bloc .title_bloc{
margin: 15px 0px 15px 0px;
font-size: 19px;
}
a.image_button_link img {
display: block;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
max-height: 450px;
.content_bloc .content_title{
font-weight: bold;
margin-right: 10px;
}
.bloc img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 200px;
object-fit: cover;
}
*/
/***************************************************************************
##### EXEMPLE INPUT #####
Permet de faire le cadre des inputs
.container_bloc .spacing_bottom {
margin-bottom: 15px;
}
<label for="NOM" class="input l_r">
<div class="left">
<i class='uil uil-processor'></i>
<input id="NOM" type="text" value="Porte d'entrée" />
</div>
</label>
*/
/*
main label.input {
height: 50px;
font-weight: 400;
color: black;
background: white;
.container_bloc .spacing_left {
margin-left: 10px;
}
.container_bloc input{
flex: 1;
outline: none;
border: none;
}
.timer_input_bloc{
display: flex;
justify-content: center;
border: 0;
}
.timer_input_bloc > div:nth-child(1){
margin-right: 15px;
}
.timer_input_bloc > div input{
border: 0;
outline: none;
border-radius: 5px;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
margin-bottom: 15px;
transition: box-shadow .3s;
cursor: pointer;
overflow: hidden;
padding: 15px;
}
main label .left {
width: calc(100% - 15px);
.timer_input_bloc div > p{
margin-bottom: 10px;
font-weight: bolder;
}
main label.input input {
flex: 1;
padding: 0;
.bloc .element{
padding: 15px;
}
.container_bloc .content_in_column{
flex-direction: column;
margin-left: 15px;
}
.container_bloc .content_in_column > div:nth-child(1){
font-size: 19px;
display: flex;
align-items: center;
margin: 15px auto;
}
.container_bloc .selecteur_input{
flex-shrink: 0;
border-radius: 5px;
padding: 15px;
border: 0;
outline: none;
}
*/
.redHover:hover{
background-color: #c62828;
color: white;
}
main .bottom {
position: absolute;
bottom: 15px;
width: 90%;
}
/***************************************************************************
##### EXEMPLE POSITIONNER UN BOUTON EN BAS #####
<a href="liste_capteur.html" class="simple_button_link l_r red bottom">
##### EXEMPLE COULEUR #####
Ajout des couleurs (utilisé pour nimporte quel composant)
<a href="###" class="simple_button_link l_r blue">
<div class="left">
<i class='uil uil-trash-alt'></i>
<div class="title">Supprimer ce capteur</div>
<i class='uil uil-plus-circle'></i>
<div class="title">Text</div>
</div>
<div class="right">
<i class='uil uil-angle-right'></i>
</div>
</a>
*/
main .bottom {
position: absolute;
bottom: 15px;
width: 90%;
main .red,
.red {
color: #c62828;
}
main .blue,
.blue {
color: #4C84FF;
}
main .black,
.black {
color: black;
}
main .green,
.green {
color: #27AE60;
}
main .orange,
.orange {
color: orange;
}
main .white,
.white {
color: white;
}
.red_b {
background-color: #c62828;
}
.blue_b {
background-color: #4C84FF;
}
.black_b {
background-color: black;
}
.green_b {
background-color: #27AE60;
}
.orange_b {
background-color: orange;
}
.white_b {
background-color: white;
}
/***************************************************************************
##### EXEMPLE CHECKBOX #####
......@@ -222,11 +278,6 @@ Mise en forme des checkbox
</label>
*/
main .profil_capteur {
cursor: pointer;
padding: 5px;
}
input[type="checkbox"] {
display: none;
}
......@@ -316,110 +367,6 @@ input[type="radio"].radio_input:checked+label {
border-radius: 8px;
}
/***************************************************************************
##### EXEMPLE COULEUR #####
Ajout des couleurs (utilisé pour nimporte quel composant)
<a href="###" class="simple_button_link l_r blue">
<div class="left">
<i class='uil uil-plus-circle'></i>
<div class="title">Text</div>
</div>
<div class="right">
<i class='uil uil-angle-right'></i>
</div>
</a>
*/
main .red,
.red {
color: #c62828;
}
main .blue,
.blue {
color: #4C84FF;
}
main .black,
.black {
color: black;
}
main .green,
.green {
color: #27AE60;
}
main .orange,
.orange {
color: orange;