barraux.a
/
siteWeb
1
0
Fork 0
Code Issues Pull Requests Projects Releases 4 Wiki Activity
Browse Source

indice

master
BARRAUX Arthur 3 years ago
parent
e18eb42cdd
commit
354a5eee3f
3 changed files with 322 additions and 263 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 489
      css/style.css
  2. 34
      prof/index.php
  3. 62
      sass/main.scss

489
css/style.css
View File

@ -1,339 +1,380 @@
@font-face { @font-face {
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;
background-color: #e5e5e5; background-color: #e5e5e5;
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;
font-size: 20px; font-size: 20px;
height: 20px; height: 20px;
} }
.nav { .nav {
width: 80%; width: 80%;
margin-left: 10%; margin-left: 10%;
margin-bottom: 3%; margin-bottom: 3%;
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;
float: left; float: left;
position: relative; position: relative;
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;
color: white; color: white;
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
.nav__link a:hover { .nav__link a:hover {
color: white; color: white;
} }
form { form {
width: 20%; width: 20%;
min-width: 300px; min-width: 300px;
background-color: white; background-color: white;
display: block; display: block;
position: relative; position: relative;
margin: auto; margin: auto;
border-radius: 30px; border-radius: 30px;
padding: 20px; padding: 20px;
} }
.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;
float: right; float: right;
width: 20px; width: 20px;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
} }
.container-field__field { .container-field__field {
background-color: inherit; background-color: inherit;
position: relative; position: relative;
display: block; display: block;
text-decoration-line: none; text-decoration-line: none;
appearance: none; appearance: none;
text-align: center; text-align: center;
color: #454444; color: #454444;
resize: none; resize: none;
outline: none; outline: none;
margin: 10px auto; margin: 10px auto;
border: 4px solid #4e4d4d; border: 4px solid #4e4d4d;
padding: 10px 10px; padding: 10px 10px;
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;
background-color: #82E6AC; background-color: #82E6AC;
} }
.hint { .hint {
position: relative; position: absolute;
top: 0; width: 100%;
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; margin: 0;
margin: 0; 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;
font-family: courier, monospace; font-family: courier, monospace;
padding: 3px 5px; padding: 3px 5px;
font-size: 14px; font-size: 14px;
} }
.table { .table {
width: 80%; width: 80%;
border-radius: 5px; border-radius: 5px;
margin-left: 10%; margin-left: 10%;
margin-top: 2%; margin-top: 2%;
background-color: #84878C; background-color: #84878C;
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;
width: 1%; width: 1%;
min-width: 20px; min-width: 20px;
border-radius: 5px; border-radius: 5px;
text-align: center; text-align: center;
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;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
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%;
content: ""; content: "";
height: 26px; height: 26px;
width: 26px; width: 26px;
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
background-color: white; background-color: white;
transition: 0.4s; transition: .4s;
} }
.container-popup { .container-popup {
z-index: 1; z-index: 1;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms; transition: opacity 500ms;
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;
background: #fff; background: #fff;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
border-radius: 5px; border-radius: 5px;
width: 30%; width: 30%;
height: 150px; height: 150px;
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;
right: 30px; right: 30px;
transition: all 200ms; transition: all 200ms;
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
color: #333; color: #333;
} }
.container-popup__popup__close:hover { .container-popup__popup__close:hover {
color: #06D85F; color: #06D85F;
} }
.button { .button {
border: 3px solid #ac2a8d; border: 3px solid #ac2a8d;
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;
margin-bottom: 3%; margin-bottom: 3%;
padding: 10px 40px; padding: 10px 40px;
border-radius: 20px; border-radius: 20px;
} }
/*# sourceMappingURL=style.css.map */

34
prof/index.php
View File

@ -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,26 +61,30 @@ 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">
@ -107,9 +109,12 @@ 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">
@ -118,12 +123,14 @@ include '../sessions/session.php';
$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">
@ -132,12 +139,14 @@ include '../sessions/session.php';
$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">
@ -146,7 +155,6 @@ include '../sessions/session.php';
$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>

62
sass/main.scss
View File

@ -147,40 +147,50 @@ form {
// help // help
.help { .hint {
&:hover {
display: block;
}
display: none;
z-index: 2;
position: absolute; position: absolute;
width: 170px; width: 100%;
right: 0; top: 0;
top: 30%; &__int {
border-radius: 30px;
box-shadow: 0 0 10px black;
padding: 15px;
margin: 0;
background-color: $light-grey;
font-size: 14px;
p {
position: relative; position: relative;
font-size: 14px; left: 35%;
}
img {
border-radius: 15px;
width: 100%;
} }
code { &__help {
background-color: #aaa; &:hover {
border-radius: 5px; display: block;
font-family: courier, monospace; }
padding: 3px 5px; 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; 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

Write Preview
Loading…
Cancel
Save