From 9fdcb6ed9fb463efbe18aff97a625a2b3a3edbc4 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Sun, 13 Dec 2015 18:31:08 +0100
Subject: [PATCH] Connection FLAT inputs + css/js issue

---
 css/login-material.css | 211 +++++++++++++++++++++++++++++++++++++++++
 index.php              |  26 +++--
 2 files changed, 228 insertions(+), 9 deletions(-)
 create mode 100644 css/login-material.css

diff --git a/css/login-material.css b/css/login-material.css
new file mode 100644
index 0000000..8098448
--- /dev/null
+++ b/css/login-material.css
@@ -0,0 +1,211 @@
+/*******************************/
+/*** RECTIFICATIONS GLOBALES ***/
+/*******************************/
+*{ margin: 0; padding: 0; }
+
+body{
+	/* position */
+	display: block;
+	position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+	/* background */
+	background-color: #233342;
+	font-size: 16px;
+
+	/* foreground */
+	font: 16px 'Open Sans';
+	color: #fff;
+}
+
+
+
+/*******************/
+/*** FORMULAIRES ***/
+/*******************/
+form{
+	/* position */
+	display: block;
+	position: absolute;
+		left: calc( 50% - 20em/2 );
+		width: 20em;
+		height: auto;
+	margin: 2em;
+	padding: 2em;
+
+	/* border */
+	border-radius: 5px;
+	box-shadow: inset 0 0 10px #0a0f14;
+
+	/* background */
+	background-color: #151f28;
+}
+
+
+
+
+
+
+
+/************************/
+/*** CHAMPS DE SAISIE ***/
+/************************/
+input[type=text],
+input[type=password]{
+	/* position */
+	display: inline-block;
+	width: calc( 100% - 2*2em - 2*1em );
+	padding: 1em 2em;
+	margin: 1em; 
+
+	/* border */
+	border: 0;
+
+	/* background */
+	/*background-color: #ddd;*/ background-color: transparent;
+	background-image: -webkit-linear-gradient( right, #3272d8, #3272d8), -webkit-linear-gradient( right, white, white);
+	background-image:    -moz-linear-gradient( right, #3272d8, #3272d8),    -moz-linear-gradient( right, white, white);
+	background-image:     -ms-linear-gradient( right, #3272d8, #3272d8),     -ms-linear-gradient( right, white, white);
+	background-image:      -o-linear-gradient( right, #3272d8, #3272d8),      -o-linear-gradient( right, white, white);
+	background-image:         linear-gradient( to left, #3272d8, #3272d8),       linear-gradient( to left, white, white);
+
+	background-repeat: no-repeat, no-repeat;
+	background-position: bottom center, bottom center;
+	background-size: 0 1px, 100% 1px;
+
+	/* foreground */
+	color: #fff;
+	font-size: .9em;
+
+	/* animation */
+	transition: background-size .2s ease-in;
+	-moz-transition: background-size .2s ease-in;
+	-webkit-transition: background-size .2s ease-in;
+	-ms-transition: background-size .2s ease-in;
+	-o-transition: background-size .2s ease-in;
+}
+
+input[type=text] + label,
+input[type=password] + label{
+	/* position */
+	display: block;
+	position: absolute;
+		margin-left: 3em;
+		margin-top: -3.1em;
+
+	/* foreground */
+	font-size: .9em;
+
+	/* animation */
+	transition: margin .2s ease-in-out;
+	-moz-transition: margin .2s ease-in-out;
+	-webkit-transition: margin .2s ease-in-out;
+	-ms-transition: margin .2s ease-in-out;
+	-o-transition: margin .2s ease-in-out;
+}
+
+input[type=text]:focus,
+input[type=password]:focus{
+	background-size: 100% 1px, 100% 1px;
+}
+
+input[type=text]:focus + label,     input[type=text]:not([value='']) + label,
+input[type=password]:focus + label, input[type=password]:not([value='']) + label{
+	/* position */
+	margin-left: 1em;
+	margin-top: -5.1em;
+
+	/* foreground */
+	font-size: 1em;
+}
+
+/****************************/
+/*** CHAMPS DE VALIDATION ***/
+/****************************/
+input[type=submit]{
+	/* position */
+	display: inline-block;
+	padding: 1em 2em;
+	margin: 1em; 
+	width: calc( 100% - 2*2em - 5px - 2*1em );
+
+	/* border */
+	border-radius: 3px 0 0 3px;
+	border: 0;
+		border-right: 5px solid #aaa;
+
+	/* background */
+	background-color: #ddd;
+
+	/* animation */
+	transition: all .2s ease-in-out;
+	-moz-transition: all .2s ease-in-out;
+	-webkit-transition: all .2s ease-in-out;
+	-ms-transition: all .2s ease-in-out;
+	-o-transition: all .2s ease-in-out;
+}
+
+
+/*****************************/
+/*** BOUTONS DE VALIDATION ***/
+/*****************************/
+input[type=submit],
+input[type=button]{
+	/* position */
+	width: auto;
+	float: right;
+
+	/* foreground */
+	font-weight: bold;
+}
+
+input[type=submit]:hover,
+input[type=button]:hover{
+
+	/* border */
+	border-right-color: #1b84db;
+
+	/* background */
+	background-color: #fff;
+
+	/* foreground */
+	color: #1b84db;
+
+	/* extra */
+	cursor: pointer;
+}
+
+/* @hover */
+/*input:focus                { background-color: #fff;      }
+input:nth-child(4n+0):focus{ border-right-color: #f45b2a; }
+input:nth-child(4n+1):focus{ border-right-color: #1b84db; }
+input:nth-child(4n+2):focus{ border-right-color: #f4b92a; }
+input:nth-child(4n+3):focus{ border-right-color: #b62af4; }*/
+
+/****************/
+/*** MESSAGES ***/
+/****************/
+.error{
+	font-size: .8em;
+	padding: 1em 1em;
+	color: #f14973;
+	text-shadow: 1px 1px 0 #000;
+}
+
+.success{
+	font-size: .8em;
+	padding: 1em 1em;
+	color: #49f16b;
+	text-shadow: 1px 1px 0 #000;
+}
+
+
+
+
+
+
+
+
diff --git a/index.php b/index.php
index 35bd17d..d464072 100755
--- a/index.php
+++ b/index.php
@@ -29,21 +29,29 @@ if(Authentification::checkUser(0)){
 		<meta name='author' value='{xdrm} & SeekDaSky'/>
 
 
-		<link rel='stylesheet' href='css/login.css'/>
+		<link rel='stylesheet' href='css/login-material.css'/>
 	</head>
 	<body>
 
 
-	<?php 
+		<?php 
 
-	echo "<form action='#auth' method='POST'>";
-		echo "<input type='text' name='username' placeholder='username'>";
-		echo "<input type='password' name='password' placeholder='password'>";
-		echo "<input type='submit' name='co' value='Me connecter'>";
-	echo "</form>";
-
-	?>
+			echo "<form action='#auth' method='POST'>";
+				echo "<input type='text' name='username' id='username' value=''><label for='username'>Username</label>";
+				echo "<input type='password' name='password' id='password' value=''><label for='password'>Password</label>";
+				echo "<input type='submit' name='co' value='Me connecter'>";
+			echo "</form>";
 
+		?>
 
+		<script type='text/javascript'>
+			/* On règle le pb d'accessibilité à l'attribut "value" des inputs
+			*  au niveau du CSS
+			*/
+		
+			var inputs = document.querySelectorAll('input[type=text], input[type=password]');
+			for( var i = 0 ; i < inputs.length ; i++ )
+				inputs[i].addEventListener('change', function(e){ e.target.setAttribute('value', e.target.value); }, false);
+		</script>
 	</body>
 </html>