Browse Source

indice

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

489
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 */

34
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>

62
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

Loading…
Cancel
Save