commit 1 @template_1
This commit is contained in:
xdrm-brackets
parent
f6f257067f
commit
20d1689bea
262
css/layout.css
262
css/layout.css
|
|
@ -39,7 +39,9 @@ body{
|
|||
height: 100%;
|
||||
|
||||
/* background */
|
||||
background: #fff;
|
||||
background: #ecf0f1;
|
||||
background: url(../src/wallpaper.jpg) top left no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
/* overflow */
|
||||
overflow-x: hidden; /* empêche la barre horizontale de scroll [précaution] */
|
||||
|
|
@ -50,193 +52,91 @@ body{
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*****************/
|
||||
/*** 2. HEADER ***/
|
||||
/*****************/
|
||||
#HEADER{
|
||||
#WRAPPER{
|
||||
/* position */
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
|
||||
/* flex (as container) */
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
|
||||
/* background */
|
||||
background: #1d1d1d;
|
||||
|
||||
/* foreground */
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/***************/
|
||||
/*** 3. MENU ***/
|
||||
/***************/
|
||||
#HEADER #MENU{
|
||||
/* 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;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc( 100% - 25px );
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: calc( 100% - 2*100px );
|
||||
min-height: calc( 100% - 2*100px );
|
||||
margin: 100px;
|
||||
|
||||
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-radius: 3px;
|
||||
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-color: #279cea;
|
||||
|
||||
/* xTra */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#AUTH input[type=submit]:hover{
|
||||
background-color: #2494de;
|
||||
box-shadow: 0 0 5px #777;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/********************/
|
||||
/*** 5. CONTAINER ***/
|
||||
/********************/
|
||||
#CONTAINER{
|
||||
}
|
||||
#HEADER{
|
||||
/* position */
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 11em;
|
||||
width: calc( 100% - 11em );
|
||||
height: 5em;
|
||||
|
||||
/* border */
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
|
||||
/* background */
|
||||
background-color: #fff;
|
||||
|
||||
/* Z */
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
|
||||
/*****************/
|
||||
/*** 6. MSGBOX ***/
|
||||
/*****************/
|
||||
#MSGBOX{
|
||||
}
|
||||
#SUBHEADER{
|
||||
/* 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 */
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
/* background */
|
||||
background-color: #34495e;
|
||||
|
||||
/* Z */
|
||||
z-index: 10;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#CONTAINER{
|
||||
/* position */
|
||||
display: block;
|
||||
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 ***/
|
||||
/*******************************************/
|
||||
#HEADER #MENU a,
|
||||
#HEADER a{
|
||||
#MENU .icon{
|
||||
/* position */
|
||||
height: 5em;
|
||||
|
||||
/* background */
|
||||
background-color: #2dcc70;
|
||||
}
|
||||
|
||||
|
||||
#MENU a{
|
||||
/* position */
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0 1em;
|
||||
height: 4em;
|
||||
padding-left: 4em;
|
||||
margin-bottom: 1em ;
|
||||
|
||||
/* border */
|
||||
border-bottom: 3px solid transparent;
|
||||
|
||||
/* foreground */
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
color: #92a6b0;
|
||||
font-size: 12px;
|
||||
line-height: 4em;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
/* xTra */
|
||||
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,
|
||||
#HEADER a:hover{ background-color: #6c336d; }
|
||||
#HEADER #MENU a:nth-child(2):hover{ background-color: #6eab2e; }
|
||||
#HEADER #MENU a:nth-child(3):hover{ background-color: #f98012; }
|
||||
#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; }
|
||||
#MENU a:hover,
|
||||
#MENU a.active{
|
||||
background-color: #233343;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/***********************/
|
||||
/* 2. Authentification */
|
||||
/***********************/
|
||||
|
|
|
|||
97
index.php
97
index.php
|
|
@ -52,15 +52,16 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen
|
|||
<body><!-- CORPS DE LA PAGE -->
|
||||
|
||||
|
||||
<div id='WRAPPER'>
|
||||
|
||||
<!-- HEADER DE LA PAGE -->
|
||||
<div id='HEADER'></div>
|
||||
|
||||
<!-- HEADER DE LA PAGE -->
|
||||
<div id='HEADER'>
|
||||
<div id='SUBHEADER'></div>
|
||||
|
||||
<div id='icon' style='width:100px; height:100%; background: blue;'></div>
|
||||
|
||||
<!-- MENU DE LA PAGE -->
|
||||
<nav id='MENU'>
|
||||
<div class='icon'></div>
|
||||
<a href='home.php' >Accueil </a>
|
||||
<a href='groups.php' >Groupes </a>
|
||||
<a href='ue.php' >Suivi </a>
|
||||
|
|
@ -76,44 +77,72 @@ if( !(isset($_SESSION['username']) && is_string($_SESSION['username']) && strlen
|
|||
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>
|
||||
|
||||
|
||||
<?php
|
||||
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 "<form id='AUTH' action='' method='POST'>";
|
||||
echo "<label>Connection</label>";
|
||||
echo "<input type='text' name='username' placeholder='Username' value='".$_POST['username']."'>";
|
||||
echo "<input type='password' name='password' placeholder='Password' value='".$_POST['password']."'>";
|
||||
echo "<span class='errorbox'>  Identifiants incorrects.</span>";
|
||||
echo "<input type='submit' value='Connection'>";
|
||||
echo "</form>";
|
||||
<div style='display:none;'>
|
||||
<?php
|
||||
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 "<form id='AUTH' action='' method='POST'>";
|
||||
echo "<label>Connection</label>";
|
||||
echo "<input type='text' name='username' placeholder='Username' value='".$_POST['username']."'>";
|
||||
echo "<input type='password' name='password' placeholder='Password' value='".$_POST['password']."'>";
|
||||
echo "<span class='errorbox'>  Identifiants incorrects.</span>";
|
||||
echo "<input type='submit' value='Connection'>";
|
||||
echo "</form>";
|
||||
|
||||
}else{ // si chargement normal de la page
|
||||
}else{ // si chargement normal de la page
|
||||
|
||||
echo "<div id='AUTH_FILTER'></div>";
|
||||
echo "<form id='AUTH' action='' method='POST'>";
|
||||
echo "<label>Connection</label>";
|
||||
echo "<input type='text' name='username' placeholder='Username'>";
|
||||
echo "<input type='password' name='password' placeholder='Password'>";
|
||||
echo "<span class='errorbox'> </span>";
|
||||
echo "<input type='submit' value='Connection'>";
|
||||
echo "</form>";
|
||||
}
|
||||
?>
|
||||
echo "<div id='AUTH_FILTER'></div>";
|
||||
echo "<form id='AUTH' action='' method='POST'>";
|
||||
echo "<label>Connection</label>";
|
||||
echo "<input type='text' name='username' placeholder='Username'>";
|
||||
echo "<input type='password' name='password' placeholder='Password'>";
|
||||
echo "<span class='errorbox'> </span>";
|
||||
echo "<input type='submit' value='Connection'>";
|
||||
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 -->
|
||||
<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