Browse Source

indice

master
BARRAUX Arthur 3 years ago
parent
commit
354a5eee3f
  1. 67
      css/style.css
  2. 34
      prof/index.php
  3. 18
      sass/main.scss

67
css/style.css

@ -2,6 +2,7 @@
font-family: "monofonto"; font-family: "monofonto";
src: url("../font/raleway.ttf") format("truetype"); src: url("../font/raleway.ttf") format("truetype");
} }
body { body {
z-index: 1; z-index: 1;
font-family: monofonto; font-family: monofonto;
@ -9,20 +10,24 @@ body {
margin: 143px 20px; margin: 143px 20px;
text-align: center; text-align: center;
} }
body > a { body > a {
position: absolute; position: absolute;
left: 20px; left: 20px;
top: 20px; top: 20px;
margin: auto; margin: auto;
} }
body .logo { body .logo {
display: block; display: block;
} }
body h1 { body h1 {
margin: 40px; margin: 40px;
font-weight: bold; font-weight: bold;
color: #454545; color: #454545;
} }
body p { body p {
font-weight: bold; font-weight: bold;
color: #ac2a8d; color: #ac2a8d;
@ -37,16 +42,19 @@ body p {
background-color: #84878C; background-color: #84878C;
border-radius: 20px; border-radius: 20px;
} }
.nav ul { .nav ul {
margin: auto; margin: auto;
padding: 0; padding: 0;
width: 60%; width: 60%;
} }
.nav ul::after { .nav ul::after {
content: ""; content: "";
display: block; display: block;
clear: both; clear: both;
} }
.nav__link { .nav__link {
width: 20%; width: 20%;
min-width: 100px; min-width: 100px;
@ -55,11 +63,13 @@ body p {
text-align: center; text-align: center;
list-style-type: none; list-style-type: none;
} }
.nav__link:hover { .nav__link:hover {
background-color: #59184E; background-color: #59184E;
transition: 0.25s; transition: .25s;
border-radius: 10px; border-radius: 10px;
} }
.nav__link a { .nav__link a {
padding-top: 10px; padding-top: 10px;
padding-bottom: 10px; padding-bottom: 10px;
@ -68,6 +78,7 @@ body p {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
.nav__link a:hover { .nav__link a:hover {
color: white; color: white;
} }
@ -86,10 +97,12 @@ form {
.container-field { .container-field {
position: relative; position: relative;
} }
.container-field small { .container-field small {
display: none; display: none;
color: red; color: red;
} }
.container-field__img { .container-field__img {
display: none; display: none;
position: relative; position: relative;
@ -98,6 +111,7 @@ form {
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
} }
.container-field__field { .container-field__field {
background-color: inherit; background-color: inherit;
position: relative; position: relative;
@ -114,13 +128,15 @@ form {
border-radius: 30px; border-radius: 30px;
width: 60%; width: 60%;
max-width: 300px; max-width: 300px;
transition: 0.25s; transition: .25s;
} }
.container-field__field:focus, .container-field__field:hover { .container-field__field:focus, .container-field__field:hover {
width: 70%; width: 70%;
border-color: #ac2a8d; border-color: #ac2a8d;
background-color: white; background-color: white;
} }
.container-field__field--submit:hover { .container-field__field--submit:hover {
width: 65%; width: 65%;
border-color: #2ecc71; border-color: #2ecc71;
@ -128,22 +144,22 @@ form {
} }
.hint { .hint {
position: relative; position: absolute;
width: 100%;
top: 0; top: 0;
} }
.hint__int { .hint__int {
position: relative; position: relative;
width: 100%; left: 35%;
} }
.hint__help { .hint__help {
display: none; display: none;
z-index: 2; z-index: 2;
position: absolute; position: relative;
width: 170px; width: 170px;
right: 0; right: -50px;
top: 30%;
border-radius: 30px; border-radius: 30px;
box-shadow: 0 0 10px black; box-shadow: 0 0 10px black;
padding: 15px; padding: 15px;
@ -151,17 +167,21 @@ form {
background-color: #e5e5e5; background-color: #e5e5e5;
font-size: 14px; font-size: 14px;
} }
.hint__help:hover { .hint__help:hover {
display: block; display: block;
} }
.hint__help p { .hint__help p {
position: relative; position: relative;
font-size: 14px; font-size: 14px;
} }
.hint__help img { .hint__help img {
border-radius: 15px; border-radius: 15px;
width: 100%; width: 100%;
} }
.hint__help code { .hint__help code {
background-color: #aaa; background-color: #aaa;
border-radius: 5px; border-radius: 5px;
@ -179,9 +199,11 @@ form {
color: white; color: white;
border: 1px solid #84878C; border: 1px solid #84878C;
} }
.table th { .table th {
width: 1%; width: 1%;
} }
.table td { .table td {
background-color: #e5e5e5; background-color: #e5e5e5;
border: 1px solid #84878C; border: 1px solid #84878C;
@ -192,50 +214,61 @@ form {
word-break: break-all; word-break: break-all;
color: #84878C; color: #84878C;
} }
.table td img { .table td img {
width: 40%; width: 40%;
max-width: 40px; max-width: 40px;
} }
.table td input { .table td input {
border: 2px solid #ac2a8d; border: 2px solid #ac2a8d;
border-radius: 5px; border-radius: 5px;
text-align: inherit; text-align: inherit;
outline: none; outline: none;
color: #84878C; color: #84878C;
transition: 0.05s; transition: .05s;
} }
.table td input:hover { .table td input:hover {
font-weight: bold; font-weight: bold;
} }
.table td input:focus { .table td input:focus {
font-weight: bold; font-weight: bold;
border: 4px solid #ac2a8d; border: 4px solid #ac2a8d;
} }
.table__title td { .table__title td {
color: #ac2a8d; color: #ac2a8d;
font-weight: bold; font-weight: bold;
word-break: normal; word-break: normal;
} }
.table__switch { .table__switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 60px; width: 60px;
height: 34px; height: 34px;
} }
.table__switch input { .table__switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
.table__switch input:checked + .table__switch__slider { .table__switch input:checked + .table__switch__slider {
background-color: #2ecc71; background-color: #2ecc71;
} }
.table__switch input:focus + .table__switch__slider { .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 { .table__switch input:checked + .table__switch__slider:before {
transform: translateX(26px); transform: translateX(26px);
} }
.table__switch__slider { .table__switch__slider {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
@ -245,8 +278,9 @@ form {
bottom: 0; bottom: 0;
background-color: crimson; background-color: crimson;
border-radius: 34px; border-radius: 34px;
transition: 0.4s; transition: .4s;
} }
.table__switch__slider:before { .table__switch__slider:before {
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
@ -256,7 +290,7 @@ form {
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: white;
transition: 0.4s; transition: .4s;
} }
.container-popup { .container-popup {
@ -271,10 +305,12 @@ form {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
.container-popup:target { .container-popup:target {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
.container-popup__popup { .container-popup__popup {
margin: auto; margin: auto;
padding: 20px; padding: 20px;
@ -289,14 +325,17 @@ form {
position: absolute; position: absolute;
transition: all 5s ease-in-out; transition: all 5s ease-in-out;
} }
.container-popup__popup h2 { .container-popup__popup h2 {
margin-top: 0; margin-top: 0;
color: #333; color: #333;
} }
.container-popup__popup p { .container-popup__popup p {
max-height: 30%; max-height: 30%;
overflow: auto; overflow: auto;
} }
.container-popup__popup__close { .container-popup__popup__close {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -307,6 +346,7 @@ form {
text-decoration: none; text-decoration: none;
color: #333; color: #333;
} }
.container-popup__popup__close:hover { .container-popup__popup__close:hover {
color: #06D85F; color: #06D85F;
} }
@ -316,18 +356,21 @@ form {
background-color: #e5e5e5; background-color: #e5e5e5;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
transition: 0.5s; transition: .5s;
} }
.button:hover { .button:hover {
color: #e5e5e5; color: #e5e5e5;
background-color: #ac2a8d; background-color: #ac2a8d;
} }
.button--small { .button--small {
width: 3rem; width: 3rem;
border-radius: 5px; border-radius: 5px;
margin: 5px; margin: 5px;
color: #84878C; color: #84878C;
} }
.button--large { .button--large {
color: #ac2a8d; color: #ac2a8d;
display: inline-block; display: inline-block;
@ -335,5 +378,3 @@ form {
padding: 10px 40px; padding: 10px 40px;
border-radius: 20px; border-radius: 20px;
} }
/*# sourceMappingURL=style.css.map */

34
prof/index.php

@ -28,7 +28,6 @@ include '../sessions/session.php';
$sql_name = 'dates'; $sql_name = 'dates';
$type = 'date'; $type = 'date';
$error = 'Veuillez saisir une date'; $error = 'Veuillez saisir une date';
$help = false;
include("include/champ.php"); include("include/champ.php");
?> ?>
</div> </div>
@ -45,7 +44,6 @@ include '../sessions/session.php';
$sql_name = 'lieu'; $sql_name = 'lieu';
$type = 'text'; $type = 'text';
$error = "Vous n'avez saisie de lieu"; $error = "Vous n'avez saisie de lieu";
$help = true;
include("include/champ.php"); include("include/champ.php");
?> ?>
<div class="hint" onmouseleave='hideHelp(lieu)'> <div class="hint" onmouseleave='hideHelp(lieu)'>
@ -63,28 +61,32 @@ include '../sessions/session.php';
$sql_name = 'salle'; $sql_name = 'salle';
$type = 'text'; $type = 'text';
$error = "Vous n'avez pas saisie de salle"; $error = "Vous n'avez pas saisie de salle";
$help = true;
include("include/champ.php"); 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> <p>Entrez le nom de la salle dans lequel se trouve le matériel</p><br>
<code>Ex: A 11 codage</code> <code>Ex: A 11 codage</code>
</div> </div>
</div> </div>
</div>
<div class="container-field"> <div class="container-field">
<?php <?php
$titre = 'Position dans la salle'; $titre = 'Position :';
$sql_name = 'pos'; $sql_name = 'pos';
$type = 'text'; $type = 'text';
$error = 'Veuillez remplir ce champ'; $error = 'Veuillez remplir ce champ';
$help = true;
include("include/champ.php"); 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> <p>Veillez fournir des présision sur la position du matériel</p><br>
<code>Ex: PC-42 au fond à droite</code> <code>Ex: PC-42 au fond à droite</code>
</div> </div>
</div> </div>
</div>
<div class="container-field"> <div class="container-field">
<p>Matériel :</p> <p>Matériel :</p>
<select class="container-field__field" name='materiel'> <select class="container-field__field" name='materiel'>
@ -107,46 +109,52 @@ include '../sessions/session.php';
$help = true; $help = true;
include("include/champ.php"); 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> <p>Veillez renseigner la marque du matériel</p><br>
<code>Ex: Asus</code> <code>Ex: Asus</code>
</div> </div>
</div> </div>
</div>
<div class="container-field"> <div class="container-field">
<?php <?php
$titre = 'Model'; $titre = 'Model';
$sql_name = 'model'; $sql_name = 'model';
$type = 'text'; $type = 'text';
$error = "Veuillez saisir le model"; $error = "Veuillez saisir le model";
$help = true;
include("include/champ.php"); 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> <p>Veillez renseigner le modèle du matériel</p><br>
<code>Ex: Lattitude E6410</code> <code>Ex: Lattitude E6410</code>
</div> </div>
</div> </div>
</div>
<div class="container-field"> <div class="container-field">
<?php <?php
$titre = 'N° de série'; $titre = 'N° de série';
$sql_name = 'nserie'; $sql_name = 'nserie';
$type = 'text'; $type = 'text';
$error = "Vous n'avez saisie le n° de série"; $error = "Vous n'avez saisie le n° de série";
$help = true;
include("include/champ.php"); 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> <p>Voici un exemple. Pour plus d'aide: <a href="#">ici</a> </p> <br>
<code>Ex: 3A42B14</code> <code>Ex: 3A42B14</code>
</div> </div>
</div> </div>
</div>
<div class="container-field"> <div class="container-field">
<?php <?php
$titre = 'Nom'; $titre = 'Nom';
$sql_name = 'demandeur'; $sql_name = 'demandeur';
$type = 'text'; $type = 'text';
$error = 'Veulliez entrer votre nom'; $error = 'Veulliez entrer votre nom';
$help = false;
include("include/champ.php"); include("include/champ.php");
?> ?>
</div> </div>

18
sass/main.scss

@ -147,16 +147,23 @@ form {
// help // help
.help { .hint {
position: absolute;
width: 100%;
top: 0;
&__int {
position: relative;
left: 35%;
}
&__help {
&:hover { &:hover {
display: block; display: block;
} }
display: none; display: none;
z-index: 2; z-index: 2;
position: absolute; position: relative;
width: 170px; width: 170px;
right: 0; right: -50px;
top: 30%;
border-radius: 30px; border-radius: 30px;
box-shadow: 0 0 10px black; box-shadow: 0 0 10px black;
padding: 15px; padding: 15px;
@ -179,6 +186,9 @@ form {
font-size: 14px; font-size: 14px;
} }
} }
}
// table // table

Loading…
Cancel
Save