fin

README.md

@@ -0,0 +1,21 @@
+# Site de tiquet de panne
+
+Le mdp référant est: **3.1415926535**
+Le mdp prof est: **1NSI**
+
+C'est un site permettant de créer et gérer des tiquets de panne. Il est composé de **deux parties**:
+- Une partie *formulaire*, accessible à **tous**.
+- Une partie *gestion*, accessible seulement des référants.
+
+## Partie formulaire
+
+Il s'agit d'un simple formulaire demandant des informations précises à propos de la panne et du matériel défécteux
+
+## Partie gestion
+
+Cette partie est composée de 5 onglets:
+- accueil
+- recherche
+- liste
+- admin
+- export

css/style.css

@@ -0,0 +1,337 @@
+@font-face {
+  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;
+}
+body > a {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  margin: auto;
+}
+body .logo {
+  display: block;
+}
+body h1 {
+  margin: 40px;
+  font-weight: bold;
+  color: #454545;
+}
+body p {
+  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;
+}
+.nav ul {
+  margin: auto;
+  padding: 0;
+  width: 60%;
+}
+.nav ul::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.nav__link {
+  width: 20%;
+  min-width: 100px;
+  float: left;
+  position: relative;
+  text-align: center;
+  list-style-type: none;
+}
+.nav__link:hover {
+  background-color: #59184E;
+  transition: 0.65s;
+  border-radius: 10px;
+}
+.nav__link a {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  color: white;
+  font-weight: bold;
+  display: inline-block;
+  text-decoration: none;
+}
+.nav__link a:hover {
+  color: white;
+}
+
+form {
+  width: 20%;
+  min-width: 300px;
+  background-color: white;
+  display: block;
+  position: relative;
+  margin: auto;
+  border-radius: 30px;
+  padding: 20px;
+}
+
+.container-field {
+  position: relative;
+}
+.container-field small {
+  display: none;
+  color: red;
+}
+.container-field__img {
+  display: none;
+  position: relative;
+  float: right;
+  width: 20px;
+  top: 12px;
+}
+.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;
+}
+.container-field__field:focus, .container-field__field:hover {
+  width: 70%;
+  border-color: #ac2a8d;
+  background-color: white;
+}
+.container-field__field--submit:hover {
+  width: 65%;
+  border-color: #2ecc71;
+  background-color: #82E6AC;
+}
+
+.hint {
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.hint__int {
+  position: relative;
+  left: 25%;
+}
+.hint__help {
+  display: none;
+  z-index: 2;
+  position: relative;
+  width: 170px;
+  left: 71%;
+  border-radius: 30px;
+  box-shadow: 0 0 10px black;
+  padding: 15px;
+  margin: 0;
+  background-color: #e5e5e5;
+  font-size: 14px;
+}
+.hint__help:hover {
+  display: block;
+}
+.hint__help p {
+  position: relative;
+  font-size: 14px;
+}
+.hint__help img {
+  border-radius: 15px;
+  width: 100%;
+}
+.hint__help code {
+  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;
+}
+.table th {
+  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;
+}
+.table td img {
+  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;
+}
+.table td .input:hover {
+  font-weight: bold;
+}
+.table td .input:focus {
+  font-weight: bold;
+  border: 4px solid #ac2a8d;
+}
+.table__title td {
+  color: #ac2a8d;
+  font-weight: bold;
+  word-break: normal;
+}
+.table__switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+.table__switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.table__switch input:checked + .table__switch__slider {
+  background-color: #2ecc71;
+}
+.table__switch input:focus + .table__switch__slider {
+  box-shadow: 0 0 1px #2ecc71;
+}
+.table__switch input:checked + .table__switch__slider:before {
+  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;
+}
+.table__switch__slider:before {
+  position: absolute;
+  border-radius: 50%;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  transition: 0.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;
+}
+.container-popup:target {
+  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;
+}
+.container-popup__popup h2 {
+  margin-top: 0;
+  color: #333;
+}
+.container-popup__popup p {
+  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;
+}
+.container-popup__popup__close:hover {
+  color: #06D85F;
+}
+
+.button {
+  border: 3px solid #ac2a8d;
+  background-color: #e5e5e5;
+  font-weight: bold;
+  text-decoration: none;
+  transition: 0.5s;
+}
+.button:hover {
+  color: #e5e5e5;
+  background-color: #ac2a8d;
+}
+.button--small {
+  width: 3rem;
+  border-width: medium;
+  border-radius: 5px;
+  margin: 5px;
+  color: #84878C;
+}
+.button--large {
+  color: #ac2a8d;
+  display: inline-block;
+  margin-bottom: 3%;
+  padding: 10px 40px;
+  border-radius: 20px;
+}
+
+/*# sourceMappingURL=style.css.map */

css/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../sass/main.scss"],"names":[],"mappings":"AAMA;EACI;EACA;;AAGJ;EACI;EACA;EACA,kBAbS;EAcT;EACA;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA,OA9BE;EA+BF;EACA;;;AAOR;EACI;EACA;EACA;EACA,kBA9CQ;EA+CR;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBAhEG;EAiEH;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAUhB;EACI;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA,cAlIF;EAmIE;;AAEJ;EACI;EACA;EACA;;;AASZ;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EAII;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAxKK;EAyKL;;AAbA;EACI;;AAaJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAWZ;EACI;EACA;EACA;EACA;EACA,kBAxMQ;EAyMR;EACA;;AACA;EACI;;AAEJ;EACI,kBA9MK;EAgNL;EACA;EACA;EACA;EAEA;EACA;EACA,OAxNI;;AAyNJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,OAlOA;EAmOA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI,OA3OE;EA4OF;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAOhB;EACI;EACA,kBArVS;EAsVT;EACA;EACA;;AACA;EACI,OA1VK;EA2VL,kBAzVE;;AA2VN;EACI;EACA;EACA;EACA;EACA,OAnWI;;AAqWR;EACI,OAnWE;EAoWF;EACA;EACA;EACA","file":"style.css"}

login/cible.php

@@ -1,10 +1,10 @@
 <?php
 if (isset($_POST['login']) && isset($_POST['pwd'])) {
-    $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+    $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
     $reponse = $bdd->query("SELECT * FROM logins");
 
-    while ($line = $reponse->fetch()) {
+    while ($line = $reponse->fetchArray()) {
         if ($line[0] == $_POST['login'] && $line[1] == $_POST['pwd']) {
             session_start();
             $_SESSION['login'] = $_POST['login'];
@@ -12,7 +12,6 @@ if (isset($_POST['login']) && isset($_POST['pwd'])) {
             header('location: ../prof/index.php');
         }
     }
-    $reponse->closeCursor();
 }
 
 echo '<meta http-equiv="refresh" content="0;URL=index.php">';

login/index.php

@@ -2,30 +2,24 @@
 <html>
     <head>
         <title>Login</title>
-        <link rel="stylesheet" href="../stylepage.css">
+        <a href="index.php"><img class="logo" src="../img/logo_PC.png" alt="logo_PC"></a>
-        <img class="logo" src="../img/logo_PC.png" alt="logo_PC" width="200px">
+        <link rel="stylesheet" href="../css/style.css">
     </head>
     <body>
         <form id='form' action="cible.php" method="post">
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Login:</p>
-                <div class="input">
+                <select class="container-field__field" name="login">
-                    <select class="entry" name="login">
                     <option value="prof">prof</option>
                     <option value="referant">Référant</option>
                 </select>
             </div>
-            </div>
+            <div class="container-field">
-            <div class="container-champ">
                 <p>Pwd:</p>
-                <div class="input">
+                <input class="container-field__field" type="password" name="pwd">
-                    <input class="entry" type="password" name="pwd">
-                </div>
-            </div>
-            <div class="container-champ">
-                <div class="input" id="submit">
-                    <input class="entry" type="submit" value="conexion">
             </div>
+            <div class="container-field">
+                <input class="container-field__field container-field__field--submit" type="submit" value="conexion">
             </div>
         </form>
     </body>

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "ticket_panne",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "sass": "sass --watch ./sass/main.scss:./css/style.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://paulconstans.ddns.info/gitea/barraux.a/ticket_panne.git"
+  },
+  "author": "",
+  "license": "ISC"
+}

prof/cible/index.php

@@ -1,22 +1,22 @@
 <?php
 
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
-$req = $bdd->prepare('INSERT INTO pannes(dates, details, lieu, salle, pos, materiel, marque, model, nserie, demandeur, traitement) VALUES(:dates, :details, :lieu, :salle, :pos, :materiel, :marque, :model, :nserie, :demandeur, :traitement)');
+$stmt = $bdd->prepare('INSERT INTO pannes(dates, details, lieu, salle, pos, materiel, marque, model, nserie, demandeur, traitement) VALUES(:dates, :details, :lieu, :salle, :pos, :materiel, :marque, :model, :nserie, :demandeur, :traitement)');
 
-$req->execute(array(
+$stmt->bindValue(':dates', $_POST['dates']);
-	'dates' => $_POST['dates'],
+$stmt->bindValue(':details', $_POST['details']);
-	'details' => $_POST['details'],
+$stmt->bindValue(':lieu', $_POST['lieu']);
-	'lieu' => $_POST['lieu'],
+$stmt->bindValue(':salle', $_POST['salle']);
-	'salle' => $_POST['salle'],
+$stmt->bindValue(':pos', $_POST['pos']);
-	'pos' => $_POST['pos'],
+$stmt->bindValue(':materiel', $_POST['materiel']);
-	'materiel' => $_POST['materiel'],
+$stmt->bindValue(':marque', $_POST['marque']);
-	'marque' => $_POST['marque'],
+$stmt->bindValue(':model', $_POST['model']);
-	'model' => $_POST['model'],
+$stmt->bindValue(':nserie', $_POST['nserie']);
-	'nserie' => $_POST['nserie'],
+$stmt->bindValue(':demandeur', $_POST['demandeur']);
-	'demandeur' => $_POST['demandeur'],
+$stmt->bindValue(':traitement', 0);
-	'traitement' => 0
+
-	));
+$stmt->execute();
 
 echo 'Votre ticket à bien été pris en compte';
 ?>

prof/include/champ.php

@@ -1,13 +1,7 @@
 <?php
-echo '<p> ',$titre,' : ';
+echo '<p> ',$titre,' : </p>
-if ($help) {
+    <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
-    echo '<a class="int" href="#" onmouseover=displayHelp(',$sql_name,') onmouseout=hideHelp(',$sql_name,') ><img src="../img/int.png" alt="point_int" width=20px ></a>';
+    <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
-}
+    <input class="container-field__field" type=',$type,' name=',$sql_name,'><br>
-echo '</p>
+    <small>',$error,'</small>';
-    <div class="input">
-        <input class="entry" type=',$type,' name=',$sql_name,'><br>
-        <img class="check" src="../img/check.png" alt="check">
-        <img class="excla" src="../img/excla.png" alt="exclamation">
-    </div>
-    <small>Error: ',$error,'</small>';
 ?>

prof/index.php

@@ -1,5 +1,5 @@
 <?php
-include '../session.php';
+include '../sessions/session.php';
 ?>
 
 <!DOCTYPE html>
@@ -7,98 +7,100 @@ include '../session.php';
     <head>
         <meta charset="utf-8">
         <title>Tickets de panne</title>
-        <link href="../stylepage.css" rel="stylesheet">
+        <link href="../css/style.css" rel="stylesheet">
         <script type="text/javascript" src="js/script.js" defer></script>
-        <img class="logo" src="../img/logo_PC.png" alt="logo_PC" width="200px">
+        <a href="index.php"><img class="logo" src="../img/logo_PC.png" alt="logo_PC"></a>
 
     </head>
     <body id="page">
         <?php
         if ($_SESSION['login'] == 'referant') {
-            echo '<a class="input" href="../referant/index.php">site référant</a>';
+            echo '<div class="container-field"><a class="button button--large" href="../referant/index.php">site référant</a></div>';
         }
         ?>
         <h1 id="titre">
             Formulaire de panne informatique
         </h1>
         <form id='form' method="POST" action="cible/index.php">
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Date';
                     $sql_name = 'dates';
                     $type = 'date';
                     $error = 'Veuillez saisir une date';
-                    $help = false;
                     include("include/champ.php");
                 ?>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Détails :</p>
-                <div class="input">
+                <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
-                    <textarea class="entry" rows="10" cols="30" name='details'></textarea><br>
+                <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
-                    <img class="check" src="../img/check.png" alt="check">
+                <textarea class="container-field__field" rows="10" cols="30" name='details'></textarea><br>
-                    <img class="excla" src="../img/excla.png" alt="exclamation">
-                </div>
                 <small>Error: Veuillez remplir ce champ</small>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <?php
                     $titre = 'Lieu';
                     $sql_name = 'lieu';
                     $type = 'text';
                     $error = "Vous n'avez saisie de lieu";
-                    $help = true;
                     include("include/champ.php");
                 ?>
-                <div class="help" id="lieu">
+                <div class="hint" onmouseleave='hideHelp(lieu)'>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(lieu)><img src="../img/int.png" alt="point_int" width=20px ></a>
+                  <div class="hint__help" id="lieu">
                       <p>Entrez le nom du bâtiment dans lequel se trouve le matériel</p><br>
                       <code>Ex: bâtiment A</code>
                   </div>
                 </div>
-            <div class="container-champ">
+
+            </div>
+            <div class="container-field">
                 <?php
                     $titre = 'Salle';
                     $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 class="container-champ">
+            </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 class="container-champ">
+            </div>
+            <div class="container-field">
                 <p>Matériel :</p>
-                <div class="input">
+                <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
-                    <select class="entry" name='materiel'>
+                <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
+                <select class="container-field__field" name='materiel'>
                     <option value="UC">Unité Centrale</option>
                     <option value="IMP">Imprimante</option>
                     <option value="ECR">Ecran</option>
                     <option value="VID">Vidéo Projecteur</option>
                     <option value="TBI">Tableau Blanc Interactif</option>
                 </select>
-                    <img class="check" src="../img/check.png" alt="check">
+                <small>test</small>
-                    <img class="excla" src="../img/excla.png" alt="exclamation">
             </div>
-                <small></small>
+            <div class="container-field">
-            </div>
-            <div class="container-champ">
                 <?php
                     $titre = 'Marque';
                     $sql_name = 'marque';
@@ -107,54 +109,58 @@ include '../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 class="container-champ">
+            </div>
+            <div class="container-field">
                 <?php
                     $titre = 'Model';
                     $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 class="container-champ">
+            </div>
+            <div class="container-field">
                 <?php
                     $titre = 'N° de série';
                     $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">
+                <div class="hint" onmouseleave='hideHelp(nserie)'>
-                    <img src="../img/voile.JPG" alt="voile"> <br>
+                  <a class="hint__int" href="#" onmouseover=displayHelp(nserie)><img src="../img/int.png" alt="point_int" width=20px ></a>
-                    <code>Ex: bâtiment A</code>
+                  <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 class="container-champ">
+            </div>
+            <div class="container-field">
                 <?php
                     $titre = 'Nom';
                     $sql_name = 'demandeur';
                     $type = 'text';
                     $error = 'Veulliez entrer votre nom';
-                    $help = false;
                     include("include/champ.php");
                 ?>
             </div>
-            <div class="container-champ">
+            <div class="container-field">
                 <br>
-                <div class="input" id="submit">
+                <input class="container-field__field container-field__field--submit" type="submit" value="Valider">
-                    <input class="entry" type="submit" value="Valider">
-                </div>
             </div>
 
         </form>

prof/js/script.js

@@ -1,6 +1,6 @@
-const check = document.getElementsByClassName('check');
+const check = document.getElementsByClassName('container-field__img--check');
-const excla = document.getElementsByClassName('excla');
+const excla = document.getElementsByClassName('container-field__img--excla');
-const entry = document.getElementsByClassName('entry');
+const entry = document.getElementsByTagName('form')[0].getElementsByClassName('container-field__field');
 
 
 document.getElementById("form").addEventListener('submit', function(e) {

referant/admin.php

@@ -1,12 +1,11 @@
 <?php
-    include '../session_restraintes.php';
+    include '../sessions/session_restraintes.php';
-    $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+    $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
     $reponse = $bdd->query("SELECT * FROM logins");
     $arr = [];
-    while ($line = $reponse->fetch()) {
+    while ($line = $reponse->fetchArray()) {
         $arr[$line[0]] = $line[1];
     }
-    $reponse->closeCursor();
 ?>
 
 <html>
@@ -16,29 +15,26 @@
     </head>
     <body>
         <?php include 'include/nav.php'; ?>
-        <table>
+        <table class="table">
             <thead>
                 <tr>
                     <th colspan="3">Mot de passe</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class='table-title'>
+                <tr class='table__title'>
-                    <td>Login</td>
+                    <td>Identifiant</td>
-                    <td>Password</td>
+                    <td>Mot de passe</td>
                 </tr>
-                <tr>
                 <?php
                 foreach ($arr as $key => $value) {
                     echo '<tr>
                         <td class=',$key,' style="font-weight: bold;">', $key,'</td>
                         <td class=',$key,'>', $value,'</td>
-                            <td class=',$key,'><input class="edit" type="button" value="edit" onclick="Edit(\'',$key,'\')"></td>
+                        <td class=',$key,'><input class="button button--small" type="button" value="edit" onclick="Edit(\'',$key,'\')"></td>
                     </tr>';
                 }
                 ?>
-                </tr>
-                    
             </tbody>
         </table>
     </body>

referant/cible/admin.php

@@ -1,8 +1,15 @@
 <?php
 $decode = json_decode($_POST['value'], TRUE);
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
-$update = $bdd->query('UPDATE `logins` SET `pwd` = "' .$decode['pwd'] .'" WHERE `login` = "' .$decode['login'] .'"');
 
-$traitement = $bdd->query("SELECT * FROM `logins` WHERE `login`= '" .$decode['login'] ."'");
+$stmt = $bdd->prepare('UPDATE `logins` SET `pwd` = :pwd WHERE `login` = :login');
-print_r(json_encode($traitement->fetch()));
+$stmt->bindValue(':pwd', $decode['pwd']);
+$stmt->bindValue(':login', $decode['login']);
+
+$stmt->execute();
+
+$select = $bdd->prepare("SELECT * FROM `logins` WHERE `login` = :login");
+$select->bindValue(':login', $decode['login']);
+$traitement = $select->execute();
+print_r(json_encode($traitement->fetchArray()));
 ?>

referant/cible/delete.php

@@ -0,0 +1,7 @@
+<?php
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
+
+$request = $bdd->prepare('DELETE FROM pannes WHERE ID=:id');
+$request->bindValue(':id', $_POST['id']);
+$request->execute();
+ ?>

referant/cible/edit.php

@@ -1,21 +1,25 @@
 <?php
 $decode = json_decode($_POST['value'], TRUE);
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
-$request = 'UPDATE pannes SET 
+$stmt = $bdd->prepare('UPDATE pannes SET dates=:dates, details=:details, lieu=:lieu, salle=:salle, pos=:pos, materiel=:materiel, marque=:marque, model=:model, nserie=:nserie, demandeur=:demandeur, traitement=:traitement WHERE ID=:id');
-dates = "' .$decode["dates"] .'",
-details = "' .$decode["details"] .'",
-lieu = "' .$decode["lieu"] .'",
-salle = "' .$decode["salle"] .'",
-pos = "' .$decode["pos"] .'",
-materiel = "' .$decode["materiel"] .'",
-marque = "' .$decode["marque"] .'",
-model = "' .$decode["model"] .'",
-nserie = "' .$decode["nserie"] .'",
-demandeur = "' .$decode["demandeur"] .'",
-traitement = "' .$decode["traitement"] .'"
-WHERE ID= "' .$decode['id'] .'"';
-$update = $bdd->query($request);
 
-$traitement = $bdd->query("SELECT * FROM pannes WHERE ID=" .$decode['id']);
+$stmt->bindValue(':id', $decode['id']);
-print_r(json_encode($traitement->fetch()));
+$stmt->bindValue(':dates', $decode['dates']);
+$stmt->bindValue(':details', $decode['details']);
+$stmt->bindValue(':lieu', $decode['lieu']);
+$stmt->bindValue(':salle', $decode['salle']);
+$stmt->bindValue(':pos', $decode['pos']);
+$stmt->bindValue(':materiel', $decode['materiel']);
+$stmt->bindValue(':marque', $decode['marque']);
+$stmt->bindValue(':model', $decode['model']);
+$stmt->bindValue(':nserie', $decode['nserie']);
+$stmt->bindValue(':demandeur', $decode['demandeur']);
+$stmt->bindValue(':traitement', $decode['traitement']);
+
+$stmt->execute();
+
+$traitement = $bdd->prepare("SELECT * FROM pannes WHERE ID=:id");
+$traitement->bindValue(':id', $decode['id']);
+$res = $traitement->execute();
+print_r(json_encode($res->fetchArray()));
 ?>

referant/cible/export.php

@@ -1,15 +1,17 @@
 <?php
-
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
-$connect = mysqli_connect("localhost", "root", "", "ticket");
+$res = $bdd->query('SELECT * FROM ' .$_POST['bdd']);
-$query = "SELECT * FROM `" .$_POST['bdd'] ."`";
-$title = array_keys(mysqli_fetch_assoc(mysqli_query($connect, $query)));
 
 header('Content-Type: text/csv; charset=utf-8');
 header('Content-Disposition: attachment; filename=' .$_POST['bdd'] .'.csv');
 $output = fopen("php://output", "w");
+
+$title = $res->fetchArray(SQLITE3_ASSOC);
+
+fputcsv($output, array_keys($title));
 fputcsv($output, $title);
-$result = mysqli_query($connect, $query);
+
-while($row = mysqli_fetch_assoc($result)) {
+while($row = $res->fetchArray(SQLITE3_ASSOC)) {
     fputcsv($output, $row);
 }
 fclose($output);

referant/cible/search.php

@@ -1,10 +1,13 @@
 <?php
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
 try {
-    $reponse = $bdd->query("SELECT * FROM pannes WHERE `" .$_POST['champ'] ."`='" .$_POST['value'] ."'");
+    // $reponse = $bdd->query("SELECT * FROM pannes WHERE `" .$_POST['champ'] ."`='" .$_POST['value'] ."'");
+    $reponse = $bdd->prepare("SELECT * FROM pannes WHERE ".$_POST['champ'] ."=:value");
+    $reponse->bindValue(':value', $_POST['value']);
+    $fetch = $reponse->execute();
     $result = [];
-    while ($line = $reponse->fetch()) {
+    while ($line = $fetch->fetchArray()) {
         array_push($result, $line);
     };
 

referant/cible/slider.php

@@ -1,9 +1,9 @@
 <?php
-$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+$bdd = new SQLite3('../../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
 $update = $bdd->query("UPDATE pannes SET traitement = " .$_POST['is_checked'] ." WHERE ID = " .$_POST['id']);
 
 $traitement = $bdd->query("SELECT traitement FROM pannes WHERE ID=" .$_POST['id']);
-$res = $traitement->fetch()['traitement'];
+$res = $traitement->fetchArray()['traitement'];
 echo $res;
 ?>

referant/export.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -11,28 +11,22 @@ include '../session_restraintes.php';
     <body>
         <?php include 'include/nav.php'?>
         <form id='form' action="cible/export.php" method="post">
-            <div class="container-champ">
+            <div class="container-field">
                 <p>Type:</p>
-                <div class="input">
+                <select class="container-field__field" name="type">
-                    <select class="entry" name="type">
+                    <option value="csv" onclick="document.getElementById('base-choice').style.display = 'block'; document.getElementById('form').setAttribute('action','cible/export.php');">CSV</option>
-                        <option value="csv">CSV</option>
+                    <option value="sqlite" onclick="document.getElementById('base-choice').style.display = 'none'; document.getElementById('form').setAttribute('action','../database/ticket_panne.db');">SQLite</option>
-                        <!-- <option value="sql">SQL</option> -->
                 </select>
             </div>
-            </div>
+            <div id="base-choice" class="container-field">
-            <div class="container-champ">
                 <p>Base:</p>
-                <div class="input">
+                <select class="container-field__field" name="bdd">
-                    <select class="entry" name="bdd">
                     <option value="pannes">pannes</option>
                     <option value="logins">logins</option>
                 </select>
             </div>
-            </div>
+            <div class="container-field">
-            <div class="container-champ">
+                <input class="container-field__field container-field__field--submit" type="submit" value="Download">
-                <div class="input" id="submit">
-                    <input class="entry" type="submit" value="Download">
-                </div>
             </div>
         </form>
     </body>

referant/include/line.php

@@ -5,7 +5,7 @@ if (isset($_POST['class'])) {
 
 if (isset($line)) {
     echo '<tr>
-        <td class=', $class , ' style="font-weight: bold;" >',$class,'</td>
+        <td class=', $class , ' style="font-weight: bold; font-size: 24px;" >',$class,'</td>
         <td class=', $class , '>',$line[1],'</td>
         <td class=', $class , '>',$line[2],'</td>
         <td class=', $class , '>',$line[3],'</td>
@@ -24,20 +24,19 @@ if (isset($line)) {
         echo '<td class=', $class , '><img src="../img/excla.png" ></td>';
     }
 
-
-
     echo '    <td class=', $class , '>
-            <label class="switch">
+            <label class="table__switch">
                 <input class="checkbox" type="checkbox" onchange="Slider(\'',$class,'\')">
-                <span class="slider"></span>
+                <span class="table__switch__slider"></span>
             </label>
         </td>
-        <td class=',$class,'><input class="edit" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><input class="button button--small" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><a href="#popup"><input class="button button--small" type="button" value="del" onclick="ModifPop(\'',$class,'\')"></a></td>
     </tr>';
 }
 else {
     echo '<tr>
-        <td class=', $class , ' style="font-weight: bold;" ></td>
+        <td class=', $class , ' style="font-weight: bold; font-size: 24px;" ></td>
         <td class=', $class , '></td>
         <td class=', $class , '></td>
         <td class=', $class , '></td>
@@ -50,12 +49,13 @@ else {
         <td class=', $class , '></td>
         <td class=', $class , '><img src="../img/check.png"></td>
         <td class=', $class , '>
-            <label class="switch">
+            <label class="table__switch">
                 <input class="checkbox" type="checkbox" onchange="Slider(\'',$class,'\')">
-                <span class="slider"></span>
+                <span class="table__switch__slider"></span>
             </label>
         </td>
-        <td class=',$class,'><input class="edit" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><input class="button button--small" type="button" value="edit" onclick="Edit(\'',$class,'\')"></td>
+        <td class=',$class,'><a href="popup"><input class="button button--small" type="button" value="del" onclick="ModifPop(\'',$class,'\')"></a></td>
     </tr>';
 }
 ?>

referant/include/menu.html

@@ -1,4 +1,4 @@
 <meta charset="utf-8">
 <title>Admin ticket</title>
-<link href="../stylepage.css" rel="stylesheet">
+<link href="../css/style.css" rel="stylesheet">
-<img class="logo" src="../img/logo_PC.png" alt="logo_PC" width="200px">
+<a href="index.php"><img class="logo" src="../img/logo_PC.png" alt="logo_PC"></a>

referant/include/nav.php

@@ -1,11 +1,11 @@
 <header>
-    <nav>
+    <nav class="nav">
         <ul>
-            <li class="menu"><a href="index.php">Accueil</a></li>
+            <li class="nav__link"><a href="index.php">Accueil</a></li>
-            <li class="menu"><a href="search.php">Recherche</a></li>
+            <li class="nav__link"><a href="search.php">Recherche</a></li>
-            <li class="menu"><a href="liste.php">Liste</a></li>
+            <li class="nav__link"><a href="liste.php">Liste</a></li>
-            <li class="menu"><a href="admin.php">Admin</a></li>
+            <li class="nav__link"><a href="admin.php">Admin</a></li>
-            <li class="menu"><a href="export.php">Export</a></li>
+            <li class="nav__link"><a href="export.php">Export</a></li>
         </ul>
     </nav>
 </header>

referant/include/popup.html

@@ -0,0 +1,8 @@
+<div id="popup" class="container-popup">
+    <div class="container-popup__popup">
+        <h2>Attention!</h2>
+        <a class="container-popup__popup__close" href="#">X</a>
+        <p>Voulez-vous vraiment supprimer ce ticket?</p>
+        <a href="#"><input class="button button--large" type="button" value="supprimer"></a>
+    </div>
+</div>

referant/index.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -9,26 +9,27 @@ include '../session_restraintes.php';
     </head>
 
     <body>
-        <a class="input" href="../prof/index.php">client</a>
+        <div class="contaner-field"><a class="button button--large" href="../prof/index.php">formulaire</a></div>
         <?php include 'include/nav.php'; ?>
+        <?php include 'include/popup.html'; ?>
         <script type="text/javascript" src="js/edit.js" defer></script>
-        <table id="table">
+        <table class="table">
             <thead>
                 <tr>
-                    <th colspan="14">Ticket récents non traités</th>
+                    <th colspan="15">Ticket récents non traités</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class="table-title">
+                <tr class="table__title">
                     <td>ID</td>
                     <td>date</td>
-                    <td>details</td>
+                    <td>détails</td>
                     <td>lieu</td>
                     <td>salle</td>
                     <td>pos</td>
-                    <td>materiel</td>
+                    <td>matériel</td>
                     <td>marque</td>
-                    <td>model</td>
+                    <td>modèle</td>
                     <td>nserie</td>
                     <td>demandeur</td>
                     <td>traitement</td>
@@ -36,13 +37,15 @@ include '../session_restraintes.php';
                 </tr>
 
             <?php
-            $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+            $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
             $reponse = $bdd->query("SELECT * FROM pannes ORDER BY ID DESC");
-
+            $non_traite = 0;
             for ($j=0; $j < 3; $j++) {
-                $line = $reponse->fetch();
+                $line = $reponse->fetchArray();
+                if (isset($line['traitement'])) {
                     if ($line['traitement'] == 0) {
+                        $non_traite ++;
                         $class = $line[0];
                         include 'include/line.php';
                     }
@@ -50,7 +53,13 @@ include '../session_restraintes.php';
                         $j--;
                     }
                 }
-            $reponse->closeCursor();
+                else {
+                    break;
+                }
+            }
+            if ($non_traite == 0) {
+                echo "<h2>Aucun ticket non traité</h2>";
+            }
             ?>
             </tbody>
         </table>

referant/js/edit.js

@@ -28,7 +28,7 @@ function Edit(clas) {
     let data = new FormData();
     if (obj[13].querySelector('input').value == 'edit') {
         for (let i=1; i< 11; i++) {
-                obj[i].innerHTML = '<input type="text" style="width: 80%;" value="' + obj[i].textContent + '">';
+                obj[i].innerHTML = '<input class="input" type="text" style="width: 80%;" value="' + obj[i].textContent + '">';
             }
             obj[13].querySelector('input').value = 'ok';
     }
@@ -70,3 +70,22 @@ function Value(list) {
     }
 
 }
+
+function ModifPop(clas) {
+    const popup = document.getElementsByClassName('container-popup__popup')[0];
+    popup.querySelector('p').textContent = 'Voulez-vous vraiment supprimer le ticket ' + clas + ' ?';
+    popup.querySelector('a > input').setAttribute('onclick', 'DelTicket('+clas+')');
+}
+
+function DelTicket(clas) {
+    let xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            location.reload();
+        }
+    };
+    xhr.open('POST', 'cible/delete.php', true);
+    xhr.responseType = 'text';
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.send("id=" + encodeURI(clas));
+}

referant/liste.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -10,38 +10,49 @@ include '../session_restraintes.php';
     </head>
     <body id="corps">
         <?php include 'include/nav.php';?>
-        <table>
+        <?php include 'include/popup.html'; ?>
+
+        </div>
+        <table class="table">
             <thead>
                 <tr>
-                    <th colspan="14">Ticket</th>
+                    <th colspan="15">Ticket</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class='table-title'>
+                <tr class='table__title'>
                     <td>ID</td>
                     <td>date</td>
-                    <td>details</td>
+                    <td>détails</td>
                     <td>lieu</td>
                     <td>salle</td>
                     <td>pos</td>
-                    <td>materiel</td>
+                    <td>matériel</td>
                     <td>marque</td>
-                    <td>model</td>
+                    <td>modèle</td>
                     <td>nserie</td>
                     <td>demandeur</td>
                     <td>traitement</td>
                     <td>valider</td>
                 </tr>
                 <?php
-                $bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
+                $bdd = new SQLite3('../database/ticket_panne.db', SQLITE3_OPEN_READWRITE);
 
                 $reponse = $bdd->query("SELECT * FROM pannes ORDER BY ID");
-
+                $non_traite = 0;
-                while ($line = $reponse->fetch()) {
+                while ($line = $reponse->fetchArray()) {
+                    if (isset($line['traitement'])) {
+                        $non_traite ++;
                         $class = $line[0];
                         include 'include/line.php';
                     }
-                $reponse->closeCursor();
+                    else {
+                        break;
+                    }
+                }
+                if ($non_traite == 0) {
+                    echo "<h2>Aucun ticket dans la base</h2>";
+                }
                 ?>
             </tbody>
         </table>

referant/search.php

@@ -1,5 +1,5 @@
 <?php
-include '../session_restraintes.php';
+include '../sessions/session_restraintes.php';
 ?>
 
 <!DOCTYPE html>
@@ -12,11 +12,11 @@ include '../session_restraintes.php';
 
     <body id='corps'>
         <?php include 'include/nav.php'; ?>
+        <?php include 'include/popup.html'; ?>
         <form id="form" action="js/search.php" method="POST">
-            <div class="container-champ">
+            <div class="container-field">
-                <p>Recherche :</p><br>
+                <p>Recherche :</p>
-                <div class="input">
+                    <select class="container-field__field" name='champ'>
-                    <select class="entry" name='champ'>
                         <option value="ID">ID</option>
                         <option value="dates">Date</option>
                         <option value="lieu">Lieu</option>
@@ -27,41 +27,36 @@ include '../session_restraintes.php';
                         <option value="nserie">N°Série</option>
                         <option value="demandeur">Demandeur</option>
                     </select>
-                    <img class="check" src="../img/check.png" alt="check">
+                    <img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
-                    <img class="excla" src="../img/excla.png" alt="exclamation">
+                    <img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
             </div>
+            <div class="container-field">
+                <p>mot clé :</p>
+                <input class="container-field__field" type="input" name="value">
             </div>
-            <div class="container-champ">
+            <div class="container-field">
-                <p>mot clé :</p><br>
+                <input class="container-field__field container-field__field--submit" type="submit" value="Rechercher">
-                <div class="input">
-                    <input class="entry" type="input" name="value">
-                </div>
-            </div>
-            <div class="container-champ">
-                <div class="input" id="submit">
-                    <input class="entry" type="submit">
-                </div>
             </div>
 
 
         </form>
-        <table style="display: none;">
+        <table class="table" style="display: none;">
             <thead>
                 <tr>
-                    <th colspan="14">Ticket</th>
+                    <th colspan="15">Ticket</th>
                 </tr>
             </thead>
             <tbody>
-                <tr class='table-title'>
+                <tr class='table__title'>
                     <td>ID</td>
                     <td>date</td>
-                    <td>details</td>
+                    <td>détails</td>
                     <td>lieu</td>
                     <td>salle</td>
                     <td>pos</td>
-                    <td>materiel</td>
+                    <td>matériel</td>
                     <td>marque</td>
-                    <td>model</td>
+                    <td>modèle</td>
                     <td>nserie</td>
                     <td>demandeur</td>
                     <td>traitement</td>

sass/main.scss

@@ -0,0 +1,365 @@
+$dark-grey: #84878C;
+$light-grey: #e5e5e5;
+$dark-bordeau: #59184E;
+$bordeau: #ac2a8d;
+
+
+@font-face {
+    font-family: "monofonto";
+    src: url('../font/raleway.ttf') format('truetype');
+}
+
+body {
+    z-index: 1;
+    font-family: monofonto;
+    background-color: $light-grey;
+    margin: 143px 20px;
+    text-align: center;
+    &>a {
+        position: absolute;
+        left: 20px;
+        top: 20px;
+        margin: auto;
+    }
+    .logo {
+        display: block;
+    }
+    h1 {
+        margin: 40px;
+        font-weight: bold;
+        color: #454545;
+    }
+    p {
+        font-weight: bold;
+        color: $bordeau;
+        font-size: 20px;
+        height: 20px;
+    }
+}
+
+// nav
+
+
+.nav {
+    width: 80%;
+    margin-left: 10%;
+    margin-bottom: 3%;
+    background-color: $dark-grey;
+    border-radius: 20px;
+    ul {
+        margin: auto;
+        padding: 0;
+        width: 60%;
+        &::after {
+            content: "";
+            display: block;
+            clear: both;
+        }
+    }
+    &__link{
+        width: 20%;
+        min-width: 100px;
+        float: left;
+        position: relative;
+        text-align: center;
+        list-style-type: none;
+        &:hover {
+            background-color: $dark-bordeau;
+            transition: .65s;
+            border-radius: 10px;
+        }
+        a {
+            padding-top: 10px;
+            padding-bottom: 10px;
+            color: white;
+            font-weight: bold;
+            display: inline-block;
+            text-decoration: none;
+            &:hover {
+                color: white;
+            }
+        }
+    }
+}
+
+
+// formulaire
+
+
+form {
+    width: 20%;
+    min-width: 300px;
+
+    background-color: white;
+    display: block;
+
+    position: relative;
+    margin: auto;
+    border-radius: 30px;
+    padding: 20px;
+}
+
+.container-field {
+    position: relative;
+    small {
+        display: none;
+        color: red;
+    }
+    &__img {
+        display: none;
+        position: relative;
+        float: right;
+        width: 20px;
+        top: 12px;
+    }
+    &__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: .25s;
+        &:focus, &:hover {
+            width: 70%;
+            border-color: $bordeau;
+            background-color: white;
+        }
+        &--submit:hover {
+            width: 65%;
+            border-color: #2ecc71;
+            background-color: #82E6AC;
+        }
+    }
+}
+
+
+// help
+
+
+.hint {
+    position: absolute;
+    width: 100%;
+    top: 0;
+    &__int {
+        position: relative;
+        left: 25%;
+    }
+    &__help {
+        &:hover {
+            display: block;
+        }
+        display: none;
+        z-index: 2;
+        position: relative;
+        width: 170px;
+        left: 71%;
+        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
+
+
+.table {
+    width: 80%;
+    border-radius: 5px;
+    margin-left: 10%;
+    margin-top: 2%;
+    background-color: $dark-grey;
+    color: white;
+    border: 1px solid $dark-grey;
+    th {
+        width: 1%;
+    }
+    td {
+        background-color: $light-grey;
+
+        border: 1px solid $dark-grey;
+        width: 1%;
+        min-width: 20px;
+        border-radius: 5px;
+
+        text-align: center;
+        word-break: break-all;
+        color: $dark-grey;
+        img {
+            width: 40%;
+            max-width: 40px;
+        }
+        .input {
+            border: 2px solid $bordeau;
+            border-radius: 5px;
+            text-align: inherit;
+            outline: none;
+            color: $dark-grey;
+            transition: .05s;
+            &:hover {
+                font-weight: bold;
+            }
+            &:focus {
+                font-weight: bold;
+                border: 4px solid $bordeau;
+            }
+        }
+    }
+    &__title td{
+        color: $bordeau;
+        font-weight: bold;
+        word-break: normal;
+    }
+    &__switch {
+        position: relative;
+        display: inline-block;
+        width: 60px;
+        height: 34px;
+        input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+            &:checked + .table__switch__slider {
+                background-color: #2ecc71;
+            }
+            &:focus + .table__switch__slider {
+                box-shadow: 0 0 1px #2ecc71;
+            }
+            &:checked + .table__switch__slider:before {
+                transform: translateX(26px);
+            }
+        }
+        &__slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: crimson;
+            border-radius: 34px;
+            transition: .4s;
+            &:before {
+                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,.7);
+    transition: opacity 500ms;
+    visibility: hidden;
+    opacity: 0;
+    &:target {
+        visibility: visible;
+        opacity: 1;
+    }
+    &__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;
+        h2 {
+            margin-top: 0;
+            color: #333;
+        }
+        p {
+            max-height: 30%;
+            overflow: auto;
+        }
+        &__close {
+            position: absolute;
+            top: 20px;
+            right: 30px;
+            transition: all 200ms;
+            font-size: 30px;
+            font-weight: bold;
+            text-decoration: none;
+            color: #333;
+            &:hover {
+                color: #06D85F;
+            }
+        }
+    }
+}
+
+
+.button {
+    border: 3px solid $bordeau;
+    background-color: $light-grey;
+    font-weight: bold;
+    text-decoration: none;
+    transition: .5s;
+    &:hover {
+        color: $light-grey;
+        background-color: $bordeau;
+    }
+    &--small {
+        width: 3rem;
+        border-width: medium;
+        border-radius: 5px;
+        margin: 5px;
+        color: $dark-grey;
+    }
+    &--large {
+        color: $bordeau;
+        display: inline-block;
+        margin-bottom: 3%;
+        padding: 10px 40px;
+        border-radius: 20px;
+    }
+}

stylepage.css

@@ -1,298 +0,0 @@
-/*2eme test de versio,*/
-
-@font-face {
-    font-family: "monofonto";
-    src: url('font/raleway.ttf') format('truetype');
-}
-
-
-body{
-    z-index: 1;
-    font-family: monofonto;
-    background-color: #e5e5e5;
-    margin: 20px;
-    text-align: center;
-}
-
-.logo{
-    display: block;
-}
-
-h1{
-    margin: 40px;
-    font-weight: bold;
-    color: #454545;
-}
-
-p{
-    font-weight: bold;
-    color: #454444;
-    font-size: 20px;
-    height: 20px;
-}
-
-
-/*     Form     */
-
-
-form{
-    width: 20%;
-    min-width: 300px;
-
-    background-color: #ffffff;
-    display: block;
-
-    position: relative;
-    margin: auto;
-    border-radius: 30px;
-    padding: 20px;
-}
-
-.container-champ{
-    position: relative;
-}
-
-.container-champ small{
-    display: none;
-    color: red;
-}
-
-
-.input{
-    background-color: inherit;
-    position: relative;
-    display: block;
-
-    text-decoration-line: none;
-    text-align: center;
-    color: #454444;
-
-    margin: 10px auto;
-    border: 4px solid #4e4d4d;
-    padding: 10px 10px;
-    border-radius: 30px;
-
-    width: 60%;
-    max-width: 300px;
-
-    transition: .25s;
-}
-
-.input:focus, .input:hover{
-    width: 70%;
-    border-color: #ac2a8d;
-    background-color: #dddddd;
-}
-
-.input img{
-    display: none;
-    position: relative;
-    float: right;
-    width: 20px;
-    bottom: 20px;
-    right: 20px;
-}
-
-.entry{
-    border: none;
-    resize: none;
-    outline: none;
-    width: 100%;
-    text-align: center;
-    background-color: rgba(0, 0, 0, 0);
-    appearance: none;
-}
-
-#submit:hover{
-    width: 65%;
-    border-color: #2ecc71;
-    background-color: #82E6AC;
-}
-
-
-/*     Indice     */
-
-
-.help{
-    display: none;
-    z-index: 2;
-    position: absolute;
-    width: 170px;
-    right: 0;
-    top: 30%;
-    border-radius: 30px;
-    padding: 15px;
-    margin: 0;
-    background-color: #dddddd;
-
-}
-
-.help * {
-    font-size: 14px;
-    width: 100%;
-}
-
-.help p{
-    position: relative;
-}
-
-.help img{
-    border-radius: 15px;
-}
-
-code {
-    background-color: #aaa;
-    border-radius: 5px;
-    font-family: courier, monospace;
-    padding: 3px 5px;
-}
-
-
-/*     Nav     */
-
-
-nav{
-	width: 80%;
-    margin-left: 10%;
-    margin-bottom: 5%;
-	background-color: #84878C; /*couleur nav entière*/
-    border-radius: 20px;
-}
-
-nav > ul{
-	margin-left: auto;
-	margin-right: auto;
-	padding: 0px;
-	width: 60%;
-}
-
-nav > ul::after{
-	content: "";
-	display: block;
-	clear: both;
-}
-
-nav > ul > li{
-	width: 20%;
-	float: left;
-	position: relative;
-	text-align: center;
-    list-style-type: none;
-}
-
-nav> ul > li > a{
-	font-size: 100%;
-	padding-top: 10px;
-	padding-bottom: 10px;
-	color: #eee;
-    display: inline-block;
-	text-decoration: none;
-}
-
-.menu:hover{
-	background-color: #59184E;
-    transition: .25s;
-    border-radius: 10px;
-}
-
-.menu:hover > a{
-	color: #fff;
-	font-weight: bold;
-}
-
-
-/*     Table     */
-
-
-.table-title td{
-    color: #ac2a8d;
-    font-weight: bold;
-}
-
-table{
-    width: 80%;
-    border-radius: 5px;
-    margin-left: 10%;
-    margin-top: 2%;
-    background-color: #84878C;
-    color: #fff;
-    border: 1px solid #84878C;
-}
-
-th{
-    width: 100%;
-}
-
-td {
-    background-color: #e5e5e5;
-
-    border: 1px solid #84878C;
-    min-width: 20px;
-    border-radius: 5px;
-
-    text-align: center;
-    word-break: break-all;
-    color: #84878C;
-}
-
-td img {
-    width: 40%;
-    max-width: 40px;
-}
-
-
-/*     SWITCH     */
-
-
-.switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-}
-
-.switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: crimson;
-    border-radius: 34px;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-.slider:before {
-    position: absolute;
-    border-radius: 50%;
-    content: "";
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: .4s;
-    transition: .4s;
-}
-
-input:checked + .slider {
-    background-color:#2ecc71;
-}
-
-input:focus + .slider {
-    box-shadow: 0 0 1px #2ecc71;
-}
-
-input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-}

ticket.sql

@@ -1,79 +0,0 @@
--- phpMyAdmin SQL Dump
--- version 5.1.1
--- https://www.phpmyadmin.net/
---
--- Host: localhost
--- Generation Time: Oct 30, 2021 at 07:45 PM
--- Server version: 10.4.21-MariaDB
--- PHP Version: 8.0.10
-
-SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
-START TRANSACTION;
-SET time_zone = "+00:00";
-
-
-/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
-/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
-/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
-/*!40101 SET NAMES utf8mb4 */;
-
---
--- Database: `ticket`
---
-
--- --------------------------------------------------------
-
---
--- Table structure for table `logins`
---
-
-CREATE TABLE `logins` (
-  `login` varchar(255) NOT NULL,
-  `pwd` varchar(255) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-
--- --------------------------------------------------------
-
---
--- Table structure for table `pannes`
---
-
-CREATE TABLE `pannes` (
-  `ID` int(11) NOT NULL,
-  `dates` date NOT NULL,
-  `details` text NOT NULL,
-  `lieu` text NOT NULL,
-  `salle` varchar(255) NOT NULL,
-  `pos` text NOT NULL,
-  `materiel` varchar(255) NOT NULL,
-  `marque` varchar(255) NOT NULL,
-  `model` varchar(255) NOT NULL,
-  `nserie` text NOT NULL,
-  `demandeur` text NOT NULL,
-  `traitement` tinyint(1) NOT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
-
---
--- Indexes for dumped tables
---
-
---
--- Indexes for table `pannes`
---
-ALTER TABLE `pannes`
-  ADD PRIMARY KEY (`ID`);
-
---
--- AUTO_INCREMENT for dumped tables
---
-
---
--- AUTO_INCREMENT for table `pannes`
---
-ALTER TABLE `pannes`
-  MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
-COMMIT;
-
-/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
-/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
-/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;