From 354a5eee3fbcd047caf2e876a9484b2a17b0c987 Mon Sep 17 00:00:00 2001
From: "barraux.a" <barraux.a@example.com>
Date: Mon, 13 Dec 2021 09:54:35 +0100
Subject: [PATCH] indice

---
 css/style.css  | 489 +++++++++++++++++++++++++++----------------------
 prof/index.php |  34 ++--
 sass/main.scss |  62 ++++---
 3 files changed, 322 insertions(+), 263 deletions(-)

diff --git a/css/style.css b/css/style.css
index f85ab6f..c65c851 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,339 +1,380 @@
 @font-face {
-  font-family: "monofonto";
-  src: url("../font/raleway.ttf") format("truetype");
+	font-family: "monofonto";
+	src: url("../font/raleway.ttf") format("truetype");
 }
+
 body {
-  z-index: 1;
-  font-family: monofonto;
-  background-color: #e5e5e5;
-  margin: 143px 20px;
-  text-align: center;
+	z-index: 1;
+	font-family: monofonto;
+	background-color: #e5e5e5;
+	margin: 143px 20px;
+	text-align: center;
 }
+
 body > a {
-  position: absolute;
-  left: 20px;
-  top: 20px;
-  margin: auto;
+	position: absolute;
+	left: 20px;
+	top: 20px;
+	margin: auto;
 }
+
 body .logo {
-  display: block;
+	display: block;
 }
+
 body h1 {
-  margin: 40px;
-  font-weight: bold;
-  color: #454545;
+	margin: 40px;
+	font-weight: bold;
+	color: #454545;
 }
+
 body p {
-  font-weight: bold;
-  color: #ac2a8d;
-  font-size: 20px;
-  height: 20px;
+	font-weight: bold;
+	color: #ac2a8d;
+	font-size: 20px;
+	height: 20px;
 }
 
 .nav {
-  width: 80%;
-  margin-left: 10%;
-  margin-bottom: 3%;
-  background-color: #84878C;
-  border-radius: 20px;
+	width: 80%;
+	margin-left: 10%;
+	margin-bottom: 3%;
+	background-color: #84878C;
+	border-radius: 20px;
 }
+
 .nav ul {
-  margin: auto;
-  padding: 0;
-  width: 60%;
+	margin: auto;
+	padding: 0;
+	width: 60%;
 }
+
 .nav ul::after {
-  content: "";
-  display: block;
-  clear: both;
+	content: "";
+	display: block;
+	clear: both;
 }
+
 .nav__link {
-  width: 20%;
-  min-width: 100px;
-  float: left;
-  position: relative;
-  text-align: center;
-  list-style-type: none;
+	width: 20%;
+	min-width: 100px;
+	float: left;
+	position: relative;
+	text-align: center;
+	list-style-type: none;
 }
+
 .nav__link:hover {
-  background-color: #59184E;
-  transition: 0.25s;
-  border-radius: 10px;
+	background-color: #59184E;
+	transition: .25s;
+	border-radius: 10px;
 }
+
 .nav__link a {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  color: white;
-  font-weight: bold;
-  display: inline-block;
-  text-decoration: none;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	color: white;
+	font-weight: bold;
+	display: inline-block;
+	text-decoration: none;
 }
+
 .nav__link a:hover {
-  color: white;
+	color: white;
 }
 
 form {
-  width: 20%;
-  min-width: 300px;
-  background-color: white;
-  display: block;
-  position: relative;
-  margin: auto;
-  border-radius: 30px;
-  padding: 20px;
+	width: 20%;
+	min-width: 300px;
+	background-color: white;
+	display: block;
+	position: relative;
+	margin: auto;
+	border-radius: 30px;
+	padding: 20px;
 }
 
 .container-field {
-  position: relative;
+	position: relative;
 }
+
 .container-field small {
-  display: none;
-  color: red;
+	display: none;
+	color: red;
 }
+
 .container-field__img {
-  display: none;
-  position: relative;
-  float: right;
-  width: 20px;
-  bottom: 20px;
-  right: 20px;
+	display: none;
+	position: relative;
+	float: right;
+	width: 20px;
+	bottom: 20px;
+	right: 20px;
 }
+
 .container-field__field {
-  background-color: inherit;
-  position: relative;
-  display: block;
-  text-decoration-line: none;
-  appearance: none;
-  text-align: center;
-  color: #454444;
-  resize: none;
-  outline: none;
-  margin: 10px auto;
-  border: 4px solid #4e4d4d;
-  padding: 10px 10px;
-  border-radius: 30px;
-  width: 60%;
-  max-width: 300px;
-  transition: 0.25s;
+	background-color: inherit;
+	position: relative;
+	display: block;
+	text-decoration-line: none;
+	appearance: none;
+	text-align: center;
+	color: #454444;
+	resize: none;
+	outline: none;
+	margin: 10px auto;
+	border: 4px solid #4e4d4d;
+	padding: 10px 10px;
+	border-radius: 30px;
+	width: 60%;
+	max-width: 300px;
+	transition: .25s;
 }
+
 .container-field__field:focus, .container-field__field:hover {
-  width: 70%;
-  border-color: #ac2a8d;
-  background-color: white;
+	width: 70%;
+	border-color: #ac2a8d;
+	background-color: white;
 }
+
 .container-field__field--submit:hover {
-  width: 65%;
-  border-color: #2ecc71;
-  background-color: #82E6AC;
+	width: 65%;
+	border-color: #2ecc71;
+	background-color: #82E6AC;
 }
 
 .hint {
-  position: relative;
-  top: 0;
+	position: absolute;
+	width: 100%;
+	top: 0;
 }
 
 .hint__int {
-  position: relative;
-  width: 100%;
+	position: relative;
+	left: 35%;
 }
 
 .hint__help {
-  display: none;
-  z-index: 2;
-  position: absolute;
-  width: 170px;
-  right: 0;
-  top: 30%;
-  border-radius: 30px;
-  box-shadow: 0 0 10px black;
-  padding: 15px;
-  margin: 0;
-  background-color: #e5e5e5;
-  font-size: 14px;
+	display: none;
+	z-index: 2;
+	position: relative;
+	width: 170px;
+	right: -50px;
+	border-radius: 30px;
+	box-shadow: 0 0 10px black;
+	padding: 15px;
+	margin: 0;
+	background-color: #e5e5e5;
+	font-size: 14px;
 }
+
 .hint__help:hover {
-  display: block;
+	display: block;
 }
+
 .hint__help p {
-  position: relative;
-  font-size: 14px;
+	position: relative;
+	font-size: 14px;
 }
+
 .hint__help img {
-  border-radius: 15px;
-  width: 100%;
+	border-radius: 15px;
+	width: 100%;
 }
+
 .hint__help code {
-  background-color: #aaa;
-  border-radius: 5px;
-  font-family: courier, monospace;
-  padding: 3px 5px;
-  font-size: 14px;
+	background-color: #aaa;
+	border-radius: 5px;
+	font-family: courier, monospace;
+	padding: 3px 5px;
+	font-size: 14px;
 }
 
 .table {
-  width: 80%;
-  border-radius: 5px;
-  margin-left: 10%;
-  margin-top: 2%;
-  background-color: #84878C;
-  color: white;
-  border: 1px solid #84878C;
+	width: 80%;
+	border-radius: 5px;
+	margin-left: 10%;
+	margin-top: 2%;
+	background-color: #84878C;
+	color: white;
+	border: 1px solid #84878C;
 }
+
 .table th {
-  width: 1%;
+	width: 1%;
 }
+
 .table td {
-  background-color: #e5e5e5;
-  border: 1px solid #84878C;
-  width: 1%;
-  min-width: 20px;
-  border-radius: 5px;
-  text-align: center;
-  word-break: break-all;
-  color: #84878C;
+	background-color: #e5e5e5;
+	border: 1px solid #84878C;
+	width: 1%;
+	min-width: 20px;
+	border-radius: 5px;
+	text-align: center;
+	word-break: break-all;
+	color: #84878C;
 }
+
 .table td img {
-  width: 40%;
-  max-width: 40px;
+	width: 40%;
+	max-width: 40px;
 }
+
 .table td input {
-  border: 2px solid #ac2a8d;
-  border-radius: 5px;
-  text-align: inherit;
-  outline: none;
-  color: #84878C;
-  transition: 0.05s;
+	border: 2px solid #ac2a8d;
+	border-radius: 5px;
+	text-align: inherit;
+	outline: none;
+	color: #84878C;
+	transition: .05s;
 }
+
 .table td input:hover {
-  font-weight: bold;
+	font-weight: bold;
 }
+
 .table td input:focus {
-  font-weight: bold;
-  border: 4px solid #ac2a8d;
+	font-weight: bold;
+	border: 4px solid #ac2a8d;
 }
+
 .table__title td {
-  color: #ac2a8d;
-  font-weight: bold;
-  word-break: normal;
+	color: #ac2a8d;
+	font-weight: bold;
+	word-break: normal;
 }
+
 .table__switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 34px;
+	position: relative;
+	display: inline-block;
+	width: 60px;
+	height: 34px;
 }
+
 .table__switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
+	opacity: 0;
+	width: 0;
+	height: 0;
 }
+
 .table__switch input:checked + .table__switch__slider {
-  background-color: #2ecc71;
+	background-color: #2ecc71;
 }
+
 .table__switch input:focus + .table__switch__slider {
-  box-shadow: 0 0 1px #2ecc71;
+	box-shadow: 0 0 1px #2ecc71;
 }
+
 .table__switch input:checked + .table__switch__slider:before {
-  transform: translateX(26px);
+	transform: translateX(26px);
 }
+
 .table__switch__slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: crimson;
-  border-radius: 34px;
-  transition: 0.4s;
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: crimson;
+	border-radius: 34px;
+	transition: .4s;
 }
+
 .table__switch__slider:before {
-  position: absolute;
-  border-radius: 50%;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  transition: 0.4s;
+	position: absolute;
+	border-radius: 50%;
+	content: "";
+	height: 26px;
+	width: 26px;
+	left: 4px;
+	bottom: 4px;
+	background-color: white;
+	transition: .4s;
 }
 
 .container-popup {
-  z-index: 1;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(0, 0, 0, 0.7);
-  transition: opacity 500ms;
-  visibility: hidden;
-  opacity: 0;
+	z-index: 1;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: rgba(0, 0, 0, 0.7);
+	transition: opacity 500ms;
+	visibility: hidden;
+	opacity: 0;
 }
+
 .container-popup:target {
-  visibility: visible;
-  opacity: 1;
+	visibility: visible;
+	opacity: 1;
 }
+
 .container-popup__popup {
-  margin: auto;
-  padding: 20px;
-  background: #fff;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-radius: 5px;
-  width: 30%;
-  height: 150px;
-  position: absolute;
-  transition: all 5s ease-in-out;
+	margin: auto;
+	padding: 20px;
+	background: #fff;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	border-radius: 5px;
+	width: 30%;
+	height: 150px;
+	position: absolute;
+	transition: all 5s ease-in-out;
 }
+
 .container-popup__popup h2 {
-  margin-top: 0;
-  color: #333;
+	margin-top: 0;
+	color: #333;
 }
+
 .container-popup__popup p {
-  max-height: 30%;
-  overflow: auto;
+	max-height: 30%;
+	overflow: auto;
 }
+
 .container-popup__popup__close {
-  position: absolute;
-  top: 20px;
-  right: 30px;
-  transition: all 200ms;
-  font-size: 30px;
-  font-weight: bold;
-  text-decoration: none;
-  color: #333;
+	position: absolute;
+	top: 20px;
+	right: 30px;
+	transition: all 200ms;
+	font-size: 30px;
+	font-weight: bold;
+	text-decoration: none;
+	color: #333;
 }
+
 .container-popup__popup__close:hover {
-  color: #06D85F;
+	color: #06D85F;
 }
 
 .button {
-  border: 3px solid #ac2a8d;
-  background-color: #e5e5e5;
-  font-weight: bold;
-  text-decoration: none;
-  transition: 0.5s;
+	border: 3px solid #ac2a8d;
+	background-color: #e5e5e5;
+	font-weight: bold;
+	text-decoration: none;
+	transition: .5s;
 }
+
 .button:hover {
-  color: #e5e5e5;
-  background-color: #ac2a8d;
+	color: #e5e5e5;
+	background-color: #ac2a8d;
 }
+
 .button--small {
-  width: 3rem;
-  border-radius: 5px;
-  margin: 5px;
-  color: #84878C;
+	width: 3rem;
+	border-radius: 5px;
+	margin: 5px;
+	color: #84878C;
 }
+
 .button--large {
-  color: #ac2a8d;
-  display: inline-block;
-  margin-bottom: 3%;
-  padding: 10px 40px;
-  border-radius: 20px;
+	color: #ac2a8d;
+	display: inline-block;
+	margin-bottom: 3%;
+	padding: 10px 40px;
+	border-radius: 20px;
 }
-
-/*# sourceMappingURL=style.css.map */
diff --git a/prof/index.php b/prof/index.php
index 7f77207..e8b3fe4 100755
--- a/prof/index.php
+++ b/prof/index.php
@@ -28,7 +28,6 @@ include '../sessions/session.php';
                     $sql_name = 'dates';
                     $type = 'date';
                     $error = 'Veuillez saisir une date';
-                    $help = false;
                     include("include/champ.php");
                 ?>
             </div>
@@ -45,7 +44,6 @@ include '../sessions/session.php';
                     $sql_name = 'lieu';
                     $type = 'text';
                     $error = "Vous n'avez saisie de lieu";
-                    $help = true;
                     include("include/champ.php");
                 ?>
                 <div class="hint" onmouseleave='hideHelp(lieu)'>
@@ -63,26 +61,30 @@ include '../sessions/session.php';
                     $sql_name = 'salle';
                     $type = 'text';
                     $error = "Vous n'avez pas saisie de salle";
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="salle">
+                <div class="hint" onmouseleave='hideHelp(salle)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(salle)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="salle">
                     <p>Entrez le nom de la salle dans lequel se trouve le matériel</p><br>
                     <code>Ex: A 11 codage</code>
+                  </div>
                 </div>
             </div>
             <div class="container-field">
                 <?php
-                    $titre = 'Position dans la salle';
+                    $titre = 'Position :';
                     $sql_name = 'pos';
                     $type = 'text';
                     $error = 'Veuillez remplir ce champ';
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="pos">
+                <div class="hint" onmouseleave='hideHelp(pos)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(pos)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="pos">
                     <p>Veillez fournir des présision sur la position du matériel</p><br>
                     <code>Ex: PC-42 au fond à droite</code>
+                  </div>
                 </div>
             </div>
             <div class="container-field">
@@ -107,9 +109,12 @@ include '../sessions/session.php';
                     $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="marque">
+                <div class="hint" onmouseleave='hideHelp(marque)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(marque)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="marque">
                     <p>Veillez renseigner la marque du matériel</p><br>
                     <code>Ex: Asus</code>
+                  </div>
                 </div>
             </div>
             <div class="container-field">
@@ -118,12 +123,14 @@ include '../sessions/session.php';
                     $sql_name = 'model';
                     $type = 'text';
                     $error = "Veuillez saisir le model";
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="model">
+                <div class="hint" onmouseleave='hideHelp(model)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(model)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="model">
                     <p>Veillez renseigner le modèle du matériel</p><br>
                     <code>Ex: Lattitude E6410</code>
+                  </div>
                 </div>
             </div>
             <div class="container-field">
@@ -132,12 +139,14 @@ include '../sessions/session.php';
                     $sql_name = 'nserie';
                     $type = 'text';
                     $error = "Vous n'avez saisie le n° de série";
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="nserie" onmouseleave='hideHelp(nserie)'>
+                <div class="hint" onmouseleave='hideHelp(nserie)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(nserie)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="nserie">
                     <p>Voici un exemple. Pour plus d'aide: <a href="#">ici</a> </p> <br>
                     <code>Ex: 3A42B14</code>
+                  </div>
                 </div>
             </div>
             <div class="container-field">
@@ -146,7 +155,6 @@ include '../sessions/session.php';
                     $sql_name = 'demandeur';
                     $type = 'text';
                     $error = 'Veulliez entrer votre nom';
-                    $help = false;
                     include("include/champ.php");
                 ?>
             </div>
diff --git a/sass/main.scss b/sass/main.scss
index 0cb5232..5570d6a 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -147,40 +147,50 @@ form {
 // help
 
 
-.help {
-    &:hover {
-        display: block;
-    }
-    display: none;
-    z-index: 2;
+.hint {
     position: absolute;
-    width: 170px;
-    right: 0;
-    top: 30%;
-    border-radius: 30px;
-    box-shadow: 0 0 10px black;
-    padding: 15px;
-    margin: 0;
-    background-color: $light-grey;
-    font-size: 14px;
-    p {
+    width: 100%;
+    top: 0;
+    &__int {
         position: relative;
-        font-size: 14px;
-    }
-    img {
-        border-radius: 15px;
-        width: 100%;
+        left: 35%;
     }
-    code {
-        background-color: #aaa;
-        border-radius: 5px;
-        font-family: courier, monospace;
-        padding: 3px 5px;
+    &__help {
+        &:hover {
+            display: block;
+        }
+        display: none;
+        z-index: 2;
+        position: relative;
+        width: 170px;
+        right: -50px;
+        border-radius: 30px;
+        box-shadow: 0 0 10px black;
+        padding: 15px;
+        margin: 0;
+        background-color: $light-grey;
         font-size: 14px;
+        p {
+            position: relative;
+            font-size: 14px;
+        }
+        img {
+            border-radius: 15px;
+            width: 100%;
+        }
+        code {
+            background-color: #aaa;
+            border-radius: 5px;
+            font-family: courier, monospace;
+            padding: 3px 5px;
+            font-size: 14px;
+        }
     }
 }
 
 
+
+
 // table