Browse Source

scss

master
BARRAUX Arthur 3 years ago
parent
commit
b212941f88
  1. 271
      css/style.css
  2. 1
      css/style.css.map
  3. 20
      login/index.php
  4. 15
      package.json
  5. 10
      prof/include/champ.php
  6. 50
      prof/index.php
  7. 6
      prof/js/script.js
  8. 11
      referant/admin.php
  9. 4
      referant/cible/search.php
  10. 20
      referant/export.php
  11. 12
      referant/include/line.php
  12. 4
      referant/include/menu.html
  13. 12
      referant/include/nav.php
  14. 8
      referant/index.php
  15. 6
      referant/liste.php
  16. 32
      referant/search.php
  17. 296
      sass/main.scss
  18. 0
      sessions/session.php
  19. 0
      sessions/session_restraintes.php
  20. 298
      stylepage.css

271
css/style.css

@ -0,0 +1,271 @@
@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;
}
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.25s;
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;
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;
}
.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;
}
.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;
}
.help p {
position: relative;
font-size: 14px;
}
.help img {
border-radius: 15px;
width: 100%;
}
.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;
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 {
-webkit-transform: translateX(26px);
-ms-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;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.table__switch__slider:before {
position: absolute;
border-radius: 50%;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.button {
border: 3px solid #ac2a8d;
background-color: #e5e5e5;
color: #ac2a8d;
font-weight: bold;
text-decoration: none;
transition: 0.5s;
}
.button:hover {
color: #e5e5e5;
background-color: #ac2a8d;
}
.button--small {
width: 3rem;
border-radius: 5px;
margin: 5px;
}
.button--large {
display: inline-block;
width: 6%;
margin-bottom: 3%;
padding: 10px 40px;
border-radius: 20px;
}
/*# sourceMappingURL=style.css.map */

1
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;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA,OAxBE;EAyBF;EACA;;;AAOR;EACI;EACA;EACA;EACA,kBAxCQ;EAyCR;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBA1DG;EA2DH;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;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA,cA7HF;EA8HE;;AAEJ;EACI;EACA;EACA;;;AASZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAzJS;EA0JT;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;;AAQR;EACI;EACA;EACA;EACA;EACA,kBAtLQ;EAuLR;EACA;;AACA;EACI;;AAEJ;EACI,kBA5LK;EA8LL;EACA;EACA;EAEA;EACA;EACA,OArMI;;AAsMJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA,OA/MA;EAgNA;;AACA;EACI;;AAEJ;EACI;EACA;;AAIZ;EACI,OAxNE;EAyNF;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOhB;EACI;EACA,kBAjRS;EAkRT,OAhRM;EAiRN;EACA;EACA;;AACA;EACI,OAvRK;EAwRL,kBAtRE;;AAwRN;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA","file":"style.css"}

20
login/index.php

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

15
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"
}

10
prof/include/champ.php

@ -4,10 +4,8 @@ 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 '</p>
<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>';
<input class="container-field__field" type=',$type,' name=',$sql_name,'><br>
<img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
<img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
<small>',$error,'</small>';
?>

50
prof/index.php

@ -1,5 +1,5 @@
<?php
include '../session.php';
include '../sessions/session.php';
?>
<!DOCTYPE html>
@ -7,7 +7,7 @@ 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">
@ -15,14 +15,14 @@ include '../session.php';
<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';
@ -32,16 +32,14 @@ include '../session.php';
include("include/champ.php");
?>
</div>
<div class="container-champ">
<div class="container-field">
<p>Détails :</p>
<div class="input">
<textarea class="entry" rows="10" cols="30" name='details'></textarea><br>
<img class="check" src="../img/check.png" alt="check">
<img class="excla" src="../img/excla.png" alt="exclamation">
</div>
<textarea class="container-field__field" rows="10" cols="30" name='details'></textarea><br>
<img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
<img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
<small>Error: Veuillez remplir ce champ</small>
</div>
<div class="container-champ">
<div class="container-field">
<?php
$titre = 'Lieu';
$sql_name = 'lieu';
@ -55,7 +53,7 @@ include '../session.php';
<code>Ex: bâtiment A</code>
</div>
</div>
<div class="container-champ">
<div class="container-field">
<?php
$titre = 'Salle';
$sql_name = 'salle';
@ -69,7 +67,7 @@ include '../session.php';
<code>Ex: A 11 codage</code>
</div>
</div>
<div class="container-champ">
<div class="container-field">
<?php
$titre = 'Position dans la salle';
$sql_name = 'pos';
@ -83,22 +81,20 @@ include '../session.php';
<code>Ex: PC-42 au fond à droite</code>
</div>
</div>
<div class="container-champ">
<div class="container-field">
<p>Matériel :</p>
<div class="input">
<select class="entry" name='materiel'>
<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">
<img class="excla" src="../img/excla.png" alt="exclamation">
</div>
<small></small>
<img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
<img class="container-field__img container-field__img--excla" src="../img/excla.png" alt="exclamation">
<small>test</small>
</div>
<div class="container-champ">
<div class="container-field">
<?php
$titre = 'Marque';
$sql_name = 'marque';
@ -112,7 +108,7 @@ include '../session.php';
<code>Ex: Asus</code>
</div>
</div>
<div class="container-champ">
<div class="container-field">
<?php
$titre = 'Model';
$sql_name = 'model';
@ -126,7 +122,7 @@ include '../session.php';
<code>Ex: Lattitude E6410</code>
</div>
</div>
<div class="container-champ">
<div class="container-field">
<?php
$titre = 'N° de série';
$sql_name = 'nserie';
@ -140,7 +136,7 @@ include '../session.php';
<code>Ex: bâtiment A</code>
</div>
</div>
<div class="container-champ">
<div class="container-field">
<?php
$titre = 'Nom';
$sql_name = 'demandeur';
@ -150,11 +146,9 @@ include '../session.php';
include("include/champ.php");
?>
</div>
<div class="container-champ">
<div class="container-field">
<br>
<div class="input" id="submit">
<input class="entry" type="submit" value="Valider">
</div>
<input class="container-field__field container-field__field--submit" type="submit" value="Valider">
</div>
</form>

6
prof/js/script.js

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

11
referant/admin.php

@ -1,5 +1,5 @@
<?php
include '../session_restraintes.php';
include '../sessions/session_restraintes.php';
$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
$reponse = $bdd->query("SELECT * FROM logins");
$arr = [];
@ -16,29 +16,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>Password</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>

4
referant/cible/search.php

@ -2,7 +2,9 @@
$bdd = new PDO('mysql:host=localhost;dbname=ticket;charset:utf8', 'root', '');
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'] ."`='" .$_POST['value'] ."'");
$reponse->execute();
$result = [];
while ($line = $reponse->fetch()) {
array_push($result, $line);

20
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="entry" name="type">
<select class="container-field__field" name="type">
<option value="csv">CSV</option>
<!-- <option value="sql">SQL</option> -->
</select>
</div>
</div>
<div class="container-champ">
<div class="container-field">
<p>Base:</p>
<div class="input">
<select class="entry" name="bdd">
<select class="container-field__field" name="bdd">
<option value="pannes">pannes</option>
<option value="logins">logins</option>
</select>
</div>
</div>
<div class="container-champ">
<div class="input" id="submit">
<input class="entry" type="submit" value="Download">
</div>
<div class="container-field">
<input class="container-field__field container-field__field--submit" type="submit" value="Download">
</div>
</form>
</body>

12
referant/include/line.php

@ -27,12 +27,12 @@ if (isset($line)) {
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>
</tr>';
}
else {
@ -50,12 +50,12 @@ 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>
</tr>';
}
?>

4
referant/include/menu.html

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

12
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="menu"><a href="search.php">Recherche</a></li>
<li class="menu"><a href="liste.php">Liste</a></li>
<li class="menu"><a href="admin.php">Admin</a></li>
<li class="menu"><a href="export.php">Export</a></li>
<li class="nav__link"><a href="index.php">Accueil</a></li>
<li class="nav__link"><a href="search.php">Recherche</a></li>
<li class="nav__link"><a href="liste.php">Liste</a></li>
<li class="nav__link"><a href="admin.php">Admin</a></li>
<li class="nav__link"><a href="export.php">Export</a></li>
</ul>
</nav>
</header>

8
referant/index.php

@ -1,5 +1,5 @@
<?php
include '../session_restraintes.php';
include '../sessions/session_restraintes.php';
?>
<!DOCTYPE html>
@ -9,17 +9,17 @@ 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">client</a></div>
<?php include 'include/nav.php'; ?>
<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>
</tr>
</thead>
<tbody>
<tr class="table-title">
<tr class="table__title">
<td>ID</td>
<td>date</td>
<td>details</td>

6
referant/liste.php

@ -1,5 +1,5 @@
<?php
include '../session_restraintes.php';
include '../sessions/session_restraintes.php';
?>
<!DOCTYPE html>
@ -10,14 +10,14 @@ include '../session_restraintes.php';
</head>
<body id="corps">
<?php include 'include/nav.php';?>
<table>
<table class="table">
<thead>
<tr>
<th colspan="14">Ticket</th>
</tr>
</thead>
<tbody>
<tr class='table-title'>
<tr class='table__title'>
<td>ID</td>
<td>date</td>
<td>details</td>

32
referant/search.php

@ -1,5 +1,5 @@
<?php
include '../session_restraintes.php';
include '../sessions/session_restraintes.php';
?>
<!DOCTYPE html>
@ -13,10 +13,9 @@ include '../session_restraintes.php';
<body id='corps'>
<?php include 'include/nav.php'; ?>
<form id="form" action="js/search.php" method="POST">
<div class="container-champ">
<p>Recherche :</p><br>
<div class="input">
<select class="entry" name='champ'>
<div class="container-field">
<p>Recherche :</p>
<select class="container-field__field" name='champ'>
<option value="ID">ID</option>
<option value="dates">Date</option>
<option value="lieu">Lieu</option>
@ -27,32 +26,27 @@ 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="excla" src="../img/excla.png" alt="exclamation">
<img class="container-field__img container-field__img--check" src="../img/check.png" alt="check">
<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">
<p>mot clé :</p><br>
<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 class="container-field">
<input class="container-field__field container-field__field--submit" type="submit">
</div>
</form>
<table style="display: none;">
<table class="table" style="display: none;">
<thead>
<tr>
<th colspan="14">Ticket</th>
</tr>
</thead>
<tbody>
<tr class='table-title'>
<tr class='table__title'>
<td>ID</td>
<td>date</td>
<td>details</td>

296
sass/main.scss

@ -0,0 +1,296 @@
$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: 20px;
text-align: center;
.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: .25s;
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;
bottom: 20px;
right: 20px;
}
&__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
.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: $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;
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 {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
}
&__slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: crimson;
border-radius: 34px;
-webkit-transition: .4s;
transition: .4s;
&:before {
position: absolute;
border-radius: 50%;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
}
}
}
.button {
border: 3px solid $bordeau;
background-color: $light-grey;
color: $bordeau;
font-weight: bold;
text-decoration: none;
transition: .5s;
&:hover {
color: $light-grey;
background-color: $bordeau;
}
&--small {
width: 3rem;
border-radius: 5px;
margin: 5px;
}
&--large {
display: inline-block;
width: 6%;
margin-bottom: 3%;
padding: 10px 40px;
border-radius: 20px;
}
}

0
session.php → sessions/session.php

0
session_restraintes.php → sessions/session_restraintes.php

298
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);
}
Loading…
Cancel
Save