commit 1 @template_1
This commit is contained in:
xdrm-brackets
parent
f6f257067f
commit
20d1689bea
236
css/layout.css
236
css/layout.css
|
|
@ -39,7 +39,9 @@ body{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
/* background */
|
/* background */
|
||||||
background: #fff;
|
background: #ecf0f1;
|
||||||
|
background: url(../src/wallpaper.jpg) top left no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
/* overflow */
|
/* overflow */
|
||||||
overflow-x: hidden; /* empêche la barre horizontale de scroll [précaution] */
|
overflow-x: hidden; /* empêche la barre horizontale de scroll [précaution] */
|
||||||
|
|
@ -50,193 +52,91 @@ body{
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#WRAPPER{
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*****************/
|
|
||||||
/*** 2. HEADER ***/
|
|
||||||
/*****************/
|
|
||||||
#HEADER{
|
|
||||||
/* position */
|
/* position */
|
||||||
display: flex;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
width: calc( 100% - 2*100px );
|
||||||
left: 0;
|
min-height: calc( 100% - 2*100px );
|
||||||
width: 100%;
|
margin: 100px;
|
||||||
height: 48px;
|
|
||||||
|
|
||||||
/* flex (as container) */
|
box-shadow: 0 0 5px #777;
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
/* background */
|
|
||||||
background: #1d1d1d;
|
|
||||||
|
|
||||||
/* foreground */
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#HEADER{
|
||||||
|
|
||||||
/***************/
|
|
||||||
/*** 3. MENU ***/
|
|
||||||
/***************/
|
|
||||||
#HEADER #MENU{
|
|
||||||
/* position */
|
/* position */
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
/* flex (as container) */
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/***************/
|
|
||||||
/*** 4. AUTH ***/
|
|
||||||
/***************/
|
|
||||||
#AUTH_FILTER{
|
|
||||||
/* position */
|
|
||||||
/*display: block;*/ display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
/* background */
|
|
||||||
background: rgba(0,0,0,.2);
|
|
||||||
|
|
||||||
/* z axis */
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
#AUTH_FILTER.active{ display: block; }
|
|
||||||
|
|
||||||
#AUTH{
|
|
||||||
/* position */
|
|
||||||
/*display: block;*/ display: none;
|
|
||||||
position: fixed;
|
|
||||||
top: 30%;
|
|
||||||
left: calc( 50% - 250px/2 );
|
|
||||||
width: 250px;
|
|
||||||
|
|
||||||
/* z axis */
|
|
||||||
z-index: 101;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* style des labels */
|
|
||||||
#AUTH label{
|
|
||||||
/* foreground */
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
line-height: 3em;
|
|
||||||
text-shadow: 1px 1px 0 #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* bouton quitter */
|
|
||||||
#AUTH::after{
|
|
||||||
content: 'x';
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: calc( 100% - 25px );
|
left: 11em;
|
||||||
width: 25px;
|
width: calc( 100% - 11em );
|
||||||
height: 25px;
|
height: 5em;
|
||||||
|
|
||||||
border-radius: 100% / 100%;
|
|
||||||
border: 2px solid #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* message qui dit que les identifiants sont incorrects */
|
|
||||||
#AUTH .errorbox{
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: 2em;
|
|
||||||
|
|
||||||
font-size: .8em;
|
|
||||||
color: #d50c4d;
|
|
||||||
line-height: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#AUTH_FILTER.active + #AUTH{ display: block; }
|
|
||||||
|
|
||||||
/* tout les INPUT */
|
|
||||||
#AUTH input{
|
|
||||||
/* position */
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: calc( 100% - 2*.8em );
|
|
||||||
margin-bottom: 2em;
|
|
||||||
padding: .8em;
|
|
||||||
|
|
||||||
/* border */
|
/* border */
|
||||||
border-radius: 3px;
|
border-bottom: 1px solid #e5e5e5;
|
||||||
border: 1px solid #A1A1A1;
|
|
||||||
|
|
||||||
/* foreground */
|
|
||||||
font-family: inherit;
|
|
||||||
|
|
||||||
transition: .2s ease-in-out;
|
|
||||||
-moz-transition: .2s ease-in-out;
|
|
||||||
-webkit-transition: .2s ease-in-out;
|
|
||||||
-ms-transition: .2s ease-in-out;
|
|
||||||
-o-transition: .2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#AUTH input[type=password]{ margin-bottom: 0; }
|
|
||||||
|
|
||||||
/* INPUT text/password */
|
|
||||||
#AUTH input[type=text]:focus,
|
|
||||||
#AUTH input[type=password]:focus{
|
|
||||||
border-color: #21a4a8;
|
|
||||||
box-shadow: 0 0 3px #2bccd4;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* SUBMIT */
|
|
||||||
#AUTH input[type=submit]{
|
|
||||||
/* position */
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
/* foreground */
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
/* background */
|
/* background */
|
||||||
background-color: #279cea;
|
background-color: #fff;
|
||||||
|
|
||||||
/* xTra */
|
/* Z */
|
||||||
cursor: pointer;
|
z-index: 9;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#AUTH input[type=submit]:hover{
|
#SUBHEADER{
|
||||||
background-color: #2494de;
|
/* position */
|
||||||
}
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 5em;
|
||||||
|
left: 11em;
|
||||||
|
width: calc( 100% - 11em );
|
||||||
|
height: 10em;
|
||||||
|
|
||||||
|
/* background */
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
/* Z */
|
||||||
|
z-index: 8;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#MENU{
|
||||||
|
/* position */
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 11em;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
/********************/
|
/* flex */
|
||||||
/*** 5. CONTAINER ***/
|
flex-direction: column;
|
||||||
/********************/
|
flex-wrap: nowrap;
|
||||||
#CONTAINER{
|
justify-content: flex-start;
|
||||||
}
|
|
||||||
|
/* background */
|
||||||
|
background-color: #34495e;
|
||||||
|
|
||||||
|
/* Z */
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/*****************/
|
#CONTAINER{
|
||||||
/*** 6. MSGBOX ***/
|
/* position */
|
||||||
/*****************/
|
display: block;
|
||||||
#MSGBOX{
|
position: relative;
|
||||||
}
|
margin-top: 5em;
|
||||||
|
margin-left: 11em;
|
||||||
|
width: calc( 100% - 11em );
|
||||||
|
min-height: calc( 100% - 5em );
|
||||||
|
|
||||||
|
/* background */
|
||||||
|
background-color: #ecf0f1;
|
||||||
|
|
||||||
|
/* Z */
|
||||||
|
z-index: 7;
|
||||||
|
}
|
||||||
48
css/menu.css
48
css/menu.css
|
|
@ -15,38 +15,48 @@
|
||||||
/*******************************************/
|
/*******************************************/
|
||||||
/*** 1. Propriétés complémentaires #MENU ***/
|
/*** 1. Propriétés complémentaires #MENU ***/
|
||||||
/*******************************************/
|
/*******************************************/
|
||||||
#HEADER #MENU a,
|
#MENU .icon{
|
||||||
#HEADER a{
|
/* position */
|
||||||
|
height: 5em;
|
||||||
|
|
||||||
|
/* background */
|
||||||
|
background-color: #2dcc70;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#MENU a{
|
||||||
/* position */
|
/* position */
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0 1em;
|
height: 4em;
|
||||||
|
padding-left: 4em;
|
||||||
|
margin-bottom: 1em ;
|
||||||
|
|
||||||
/* border */
|
/* border */
|
||||||
border-bottom: 3px solid transparent;
|
border-bottom: 3px solid transparent;
|
||||||
|
|
||||||
/* foreground */
|
/* foreground */
|
||||||
color: #fff;
|
color: #92a6b0;
|
||||||
line-height: 48px;
|
font-size: 12px;
|
||||||
|
line-height: 4em;
|
||||||
|
font-weight: bold;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 1px;
|
|
||||||
|
|
||||||
/* xTra */
|
/* xTra */
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
/* animation */
|
||||||
|
transition: .2s ease-in-out;
|
||||||
|
-moz-transition: .2s ease-in-out;
|
||||||
|
-webkit-transition: .2s ease-in-out;
|
||||||
|
-ms-transition: .2s ease-in-out;
|
||||||
|
-o-transition: .2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
#HEADER a.colored{ background: #6c336d; }
|
|
||||||
|
|
||||||
#HEADER #MENU a:nth-child(1):hover,
|
#MENU a:hover,
|
||||||
#HEADER a:hover{ background-color: #6c336d; }
|
#MENU a.active{
|
||||||
#HEADER #MENU a:nth-child(2):hover{ background-color: #6eab2e; }
|
background-color: #233343;
|
||||||
#HEADER #MENU a:nth-child(3):hover{ background-color: #f98012; }
|
color: #fff;
|
||||||
#HEADER #MENU a:nth-child(4):hover{ background-color: #999999; }
|
}
|
||||||
#HEADER #MENU a:nth-child(5):hover{ background-color: #DD9F22; }
|
|
||||||
#HEADER #MENU a:nth-child(6):hover{ background-color: #4653b4; }
|
|
||||||
#HEADER #MENU a:nth-child(7):hover{ background-color: #a62a3e; }
|
|
||||||
#HEADER #MENU a:nth-child(8):hover{ background-color: #fb4b28; }
|
|
||||||
|
|
||||||
/***********************/
|
|
||||||
/* 2. Authentification */
|
|
||||||
/***********************/
|
|
||||||
|
|
|
||||||
55
index.php
55
index.php
|
|
@ -52,15 +52,16 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen
|
||||||
<body><!-- CORPS DE LA PAGE -->
|
<body><!-- CORPS DE LA PAGE -->
|
||||||
|
|
||||||
|
|
||||||
|
<div id='WRAPPER'>
|
||||||
|
|
||||||
<!-- HEADER DE LA PAGE -->
|
<!-- HEADER DE LA PAGE -->
|
||||||
<div id='HEADER'>
|
<div id='HEADER'></div>
|
||||||
|
|
||||||
<div id='icon' style='width:100px; height:100%; background: blue;'></div>
|
<div id='SUBHEADER'></div>
|
||||||
|
|
||||||
<!-- MENU DE LA PAGE -->
|
<!-- MENU DE LA PAGE -->
|
||||||
<nav id='MENU'>
|
<nav id='MENU'>
|
||||||
|
<div class='icon'></div>
|
||||||
<a href='home.php' >Accueil </a>
|
<a href='home.php' >Accueil </a>
|
||||||
<a href='groups.php' >Groupes </a>
|
<a href='groups.php' >Groupes </a>
|
||||||
<a href='ue.php' >Suivi </a>
|
<a href='ue.php' >Suivi </a>
|
||||||
|
|
@ -76,8 +77,45 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen
|
||||||
echo "<a class='active'>Authentification</a>";
|
echo "<a class='active'>Authentification</a>";
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CONTENEUR DE LA PAGE -->
|
||||||
|
<div id='CONTAINER'>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br>
|
||||||
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||||
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>
|
||||||
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br><br><br>
|
||||||
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br>
|
||||||
|
proident, sunt <br>in culpa qui officia deserunt mollit anim id est laborum.Lorem ips<br>um dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br>
|
||||||
|
quis nostrud exercitation ullamco <br>laboris nisi ut aliquip ex ea commodo<br>
|
||||||
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>
|
||||||
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br>
|
||||||
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ips<br>um dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br>
|
||||||
|
quis nostrud exercitation ullamco laboris nisi ut aliq<br>uip ex ea commodo<br><br>
|
||||||
|
consequa<br>t. Duis au<br>te irure dolor in reprehenderit in voluptate velit esse<br>
|
||||||
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br>
|
||||||
|
proident, sunt in culpa qui<br> officia deserunt <br>mollit anim id est laborum.Lorem ips<br>um dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||||
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br>
|
||||||
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>
|
||||||
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>
|
||||||
|
cillum dolore eu fugi<br>at nulla pariatur. Excepteur <br>sint occaecat cupidatat non<br>
|
||||||
|
proident, sunt in culpa qui of<br>ficia deserunt mollit anim id est laborum.kireloem<br>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br>
|
||||||
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,<br>
|
||||||
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo<br>
|
||||||
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse<br>
|
||||||
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non<br>
|
||||||
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div style='display:none;'>
|
||||||
<?php
|
<?php
|
||||||
if( $LOGIN_postAreSet && $_SESSION['username'] == null ){ // si on a soumis un formulaire (mais sans succès)
|
if( $LOGIN_postAreSet && $_SESSION['username'] == null ){ // si on a soumis un formulaire (mais sans succès)
|
||||||
echo "<div id='AUTH_FILTER' class='active'></div>";
|
echo "<div id='AUTH_FILTER' class='active'></div>";
|
||||||
|
|
@ -100,20 +138,11 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen
|
||||||
echo "<input type='submit' value='Connection'>";
|
echo "<input type='submit' value='Connection'>";
|
||||||
echo "</form>";
|
echo "</form>";
|
||||||
}
|
}
|
||||||
?>
|
?></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- CONTENEUR DE LA PAGE -->
|
|
||||||
<div id='CONTAINER'></div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- MESSAGE BOX DE LA PAGE -->
|
|
||||||
<div id='MSGBOX' class=''>Hey! Your password is not the right one.</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Dépendences Javascript après chargement des éléments -->
|
<!-- Dépendences Javascript après chargement des éléments -->
|
||||||
<script type='text/javascript' src='js/actionScript.js'></script>
|
<script type='text/javascript' src='js/actionScript.js'></script>
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Loading…
Reference in New Issue