Browse Source

on appproche dangereusement de la perfection

master
BARRAUX Arthur 3 years ago
parent
commit
f9a3c4d7ed
  1. 25
      champ.php
  2. BIN
      img/int_hov.png
  3. 58
      index.php
  4. 1
      script.js
  5. 30
      stylepage.css

25
champ.php

@ -1,5 +1,4 @@
<?php <?php
if ($balise == 'input'){
echo '<p> ',$titre,' : '; echo '<p> ',$titre,' : ';
if ($help) { if ($help) {
echo '<a class="int" href="#" onmouseover=displayHelp(',$sql_name,') onmouseout=hideHelp(',$sql_name,') ><img src="img/int.png" alt="point_int" width=20px ></a>'; echo '<a class="int" href="#" onmouseover=displayHelp(',$sql_name,') onmouseout=hideHelp(',$sql_name,') ><img src="img/int.png" alt="point_int" width=20px ></a>';
@ -11,28 +10,4 @@ if ($balise == 'input'){
<img class="excla" src="img/excla.png" alt="exclamation"> <img class="excla" src="img/excla.png" alt="exclamation">
</div> </div>
<small>Error: ',$error,'</small>'; <small>Error: ',$error,'</small>';
}
elseif ($balise == 'select') {
echo '<p>',$titre,' :</p>
<div class="champ">
<select class="entry" name=',$sql_name,' required>
<option value="UC">UC</option>
<option value="IMP">IMP</option>
<option value="ECR">ECR</option>
<option value="VID">VID</option>
<option value="TBI">TBI</option>
</select>
<img class="check" src="img/check.png" alt="check">
<img class="excla" src="img/excla.png" alt="exclamation">
</div>';
}
elseif ($balise == 'textarea') {
echo '<p>',$titre,' :</p>
<div class="champ">
<textarea class="entry" rows="10" cols="30" name=',$titre,' required></textarea><br>
<img class="check" src="img/check.png" alt="check">
<img class="excla" src="img/excla.png" alt="exclamation">
</div>
<small>Error: ',$error,'</small>';
}
?> ?>

BIN
img/int_hov.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

58
index.php

@ -17,34 +17,32 @@
$titre = 'Date'; $titre = 'Date';
$sql_name = 'dates'; $sql_name = 'dates';
$type = 'date'; $type = 'date';
$balise = 'input';
$error = 'Veuillez saisir une date'; $error = 'Veuillez saisir une date';
$help = false; $help = false;
include("champ.php"); include("champ.php");
?> ?>
</div> </div>
<div class="container-champ"> <div class="container-champ">
<?php <p>Détails :</p>
$titre = 'Details'; <div class="champ">
$sql_name = 'details'; <textarea class="entry" rows="10" cols="30" name='details' required></textarea><br>
$balise = 'textarea'; <img class="check" src="img/check.png" alt="check">
$error = "Vous n'avez pas remplie ce champ"; <img class="excla" src="img/excla.png" alt="exclamation">
include("champ.php"); </div>
?> <small>Error: Veuillez remplir ce champ</small>
</div> </div>
<div class="container-champ"> <div class="container-champ">
<?php <?php
$titre = 'Lieu'; $titre = 'Lieu';
$sql_name = 'lieu'; $sql_name = 'lieu';
$type = 'text'; $type = 'text';
$balise = 'input';
$error = "Vous n'avez saisie de lieu"; $error = "Vous n'avez saisie de lieu";
$help = true; $help = true;
include("champ.php"); include("champ.php");
?> ?>
<div class="help" id="lieu"> <div class="help" id="lieu">
<p>Entrez le nom du bâtiment dans lequel se trouve le matériel</p><br> <p>Entrez le nom du bâtiment dans lequel se trouve le matériel</p><br>
<code>Exemple: bâtiment A</code> <code>Ex: bâtiment A</code>
</div> </div>
</div> </div>
<div class="container-champ"> <div class="container-champ">
@ -52,14 +50,13 @@
$titre = 'Salle'; $titre = 'Salle';
$sql_name = 'salle'; $sql_name = 'salle';
$type = 'text'; $type = 'text';
$balise = 'input';
$error = "Vous n'avez pas saisie de salle"; $error = "Vous n'avez pas saisie de salle";
$help = true; $help = true;
include("champ.php"); include("champ.php");
?> ?>
<div class="help" id="salle"> <div class="help" id="salle">
<p>Entrez le nom de la salle dans lequel se trouve le matériel</p><br> <p>Entrez le nom de la salle dans lequel se trouve le matériel</p><br>
<code>Exemple: A 11 codage</code> <code>Ex: A 11 codage</code>
</div> </div>
</div> </div>
<div class="container-champ"> <div class="container-champ">
@ -67,49 +64,61 @@
$titre = 'Position dans la salle'; $titre = 'Position dans la salle';
$sql_name = 'pos'; $sql_name = 'pos';
$type = 'text'; $type = 'text';
$balise = 'input';
$error = 'Veuillez remplir ce champ'; $error = 'Veuillez remplir ce champ';
$help = true; $help = true;
include("champ.php"); include("champ.php");
?> ?>
<div class="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-champ"> <div class="container-champ">
<?php <p>Matériel :</p>
$titre = 'Matériel'; <div class="champ">
$sql_name = 'materiel'; <select class="entry" name='materiel' required>
$balise = 'select'; <option value="UC">Unité Centrale</option>
$error = ''; <option value="IMP">Imprimante</option>
include("champ.php"); <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">
<img class="excla" src="img/excla.png" alt="exclamation">
</div> </div>
<div class="container-champ"> <div class="container-champ">
<?php <?php
$titre = 'Marque'; $titre = 'Marque';
$sql_name = 'marque'; $sql_name = 'marque';
$type = 'text'; $type = 'text';
$balise = 'input';
$error = "Vous n'avez pas saisie la marque"; $error = "Vous n'avez pas saisie la marque";
$help = true; $help = true;
include("champ.php"); include("champ.php");
?> ?>
<div class="help" id="marque">
<p>Veillez renseigner la marque du matériel</p><br>
<code>Ex: Asus</code>
</div>
</div> </div>
<div class="container-champ"> <div class="container-champ">
<?php <?php
$titre = 'Model'; $titre = 'Model';
$sql_name = 'model'; $sql_name = 'model';
$type = 'text'; $type = 'text';
$balise = 'input';
$error = "Veuillez saisir le model"; $error = "Veuillez saisir le model";
$help = true; $help = true;
include("champ.php"); include("champ.php");
?> ?>
<div class="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-champ"> <div class="container-champ">
<?php <?php
$titre = 'N° de série'; $titre = 'N° de série';
$sql_name = 'nserie'; $sql_name = 'nserie';
$type = 'text'; $type = 'text';
$balise = 'input';
$error = "Vous n'avez saisie le n° de série"; $error = "Vous n'avez saisie le n° de série";
$help = true; $help = true;
include("champ.php"); include("champ.php");
@ -120,7 +129,6 @@
$titre = 'Nom'; $titre = 'Nom';
$sql_name = 'demandeur'; $sql_name = 'demandeur';
$type = 'text'; $type = 'text';
$balise = 'input';
$error = 'Veillez entrer votre nom'; $error = 'Veillez entrer votre nom';
$help = true; $help = true;
include("champ.php"); include("champ.php");
@ -128,7 +136,7 @@
</div> </div>
<div class="container-champ"> <div class="container-champ">
<br> <br>
<div class="champ"> <div class="submit">
<input id="submit" class="entry" type="button" onclick="checkInputs()" value="Valider"> <input id="submit" class="entry" type="button" onclick="checkInputs()" value="Valider">
</div> </div>
</div> </div>

1
script.js

@ -8,7 +8,6 @@ const help = document.getElementsByClassName('help');
function displayHelp(id) { function displayHelp(id) {
console.log(id);
id.style.display = 'block'; id.style.display = 'block';
} }

30
stylepage.css

@ -71,7 +71,7 @@ form{
.champ:focus, .champ:hover{ .champ:focus, .champ:hover{
width: 300px; width: 300px;
border-color: #2ecc71; border-color: #ac2a8d;
background-color: #dddddd; background-color: #dddddd;
} }
@ -84,9 +84,25 @@ form{
right: 20px; right: 20px;
} }
.submit:hover, .submit:focus{ .submit{
background-color: inherit;
display: flex;
position: relative;
flex-direction: row-reverse;
text-align: center;
color: #454444;
display: block;
margin: 10px auto;
border: 4px solid #4e4d4d;
padding: 10px 10px;
width: 200px;
border-radius: 30px;
transition: 0.25s;
}
.submit:hover{
width: 250px; width: 250px;
background-color: rgba(46, 204, 113, 0.3); background-color: #82E6AC;
border-color: #2ecc71; border-color: #2ecc71;
} }
@ -98,14 +114,18 @@ form{
right: 0; right: 0;
top: 30%; top: 30%;
border-radius: 30px; border-radius: 30px;
padding: 20px; padding: 15px;
margin: 0; margin: 0;
background-color: #dddddd; background-color: #dddddd;
} }
.help * { .help * {
font-size: 14px font-size: 14px;
width: 100%;
}
.help p{
position: relative;
} }
code { code {

Loading…
Cancel
Save