maj

3 years ago · 4682db9f44
parent d7477bf8a9
commit 4682db9f44
3 changed files with 138 additions and 16 deletions
--- a/Style/add.css
+++ b/Style/add.css
@ -0,0 +1,116 @@
+* { box-sizing:border-box; }
+
+/* basic stylings ------------------------------------------ */
+body         { background:url(https://scotch.io/wp-content/uploads/2014/07/61.jpg); }
+.container    { 
+  font-family:'Roboto';
+  width:600px; 
+  margin:30px auto 0; 
+  display:block; 
+  background:#FFF;
+  padding:10px 50px 50px;
+}
+h2     { 
+  text-align:center; 
+  margin-bottom:50px; 
+}
+h2 small { 
+  font-weight:normal; 
+  color:#888; 
+  display:block; 
+}
+.footer   { text-align:center; }
+.footer a  { color:#53B2C8; }
+
+/* form starting stylings ------------------------------- */
+.group        { 
+  position:relative; 
+  margin-bottom:45px; 
+}
+input         {
+  font-size:18px;
+  padding:10px 10px 10px 5px;
+  display:block;
+  width:300px;
+  border:none;
+  border-bottom:1px solid #757575;
+}
+input:focus     { outline:none; }
+
+/* LABEL ======================================= */
+label          {
+  color:#999; 
+  font-size:18px;
+  font-weight:normal;
+  position:absolute;
+  pointer-events:none;
+  left:5px;
+  top:10px;
+  transition:0.2s ease all; 
+  -moz-transition:0.2s ease all; 
+  -webkit-transition:0.2s ease all;
+}
+
+/* active state */
+input:focus ~ label, input:valid ~ label    {
+  top:-20px;
+  font-size:14px;
+  color:#5264AE;
+}
+
+/* BOTTOM BARS ================================= */
+.bar  { position:relative; display:block; width:300px; }
+.bar:before, .bar:after   {
+  content:'';
+  height:2px; 
+  width:0;
+  bottom:1px; 
+  position:absolute;
+  background:#5264AE; 
+  transition:0.2s ease all; 
+  -moz-transition:0.2s ease all; 
+  -webkit-transition:0.2s ease all;
+}
+.bar:before {
+  left:50%;
+}
+.bar:after {
+  right:50%; 
+}
+
+/* active state */
+input:focus ~ .bar:before, input:focus ~ .bar:after {
+  width:50%;
+}
+
+/* HIGHLIGHTER ================================== */
+.highlight {
+  position:absolute;
+  height:60%; 
+  width:100px; 
+  top:25%; 
+  left:0;
+  pointer-events:none;
+  opacity:0.5;
+}
+
+/* active state */
+input:focus ~ .highlight {
+  -webkit-animation:inputHighlighter 0.3s ease;
+  -moz-animation:inputHighlighter 0.3s ease;
+  animation:inputHighlighter 0.3s ease;
+}
+
+/* ANIMATIONS ================ */
+@-webkit-keyframes inputHighlighter {
+  from { background:#5264AE; }
+  to  { width:0; background:transparent; }
+}
+@-moz-keyframes inputHighlighter {
+  from { background:#5264AE; }
+  to  { width:0; background:transparent; }
+}
+@keyframes inputHighlighter {
+  from { background:#5264AE; }
+  to  { width:0; background:transparent; }
+}
--- a/Vues/addList.php
+++ b/Vues/addList.php
@ -3,25 +3,31 @@
 <head>
  <title>Ajouter une Liste</title>
  <link rel="stylesheet" href="Style/bootstrap.css">
-  <link rel="stylesheet" href="Style/mycoolstyle.css">
+  <link rel="stylesheet" href="Style/add.css">
 </head>

-<body>  
+<body>   
+    

-    <ul class="navbar">
-        <li><button onclick="location.href='addList.php'" type="button" class="addList">Ajouter une Liste</button>
-        <li><button onclick="location.href='addTask.php'" type="button" class="addTask">Ajouter une Tache</button>
-    </ul>
+<div class="container">
+  
+  <h2>Ajouter une liste</h2>
+  
+  <form>
+    
+    <div class="group">      
+      <input type="text" required>
+      <span class="highlight"></span>
+      <span class="bar"></span>
+      <label>Nom de la liste</label>
+    </div>   
+   </form>
+      
+    <p>Privée ?</p>
+   <input type="checkbox"></input>

-    <h1>Ajouter</h1>
+   <input type="submit"/>
+</div>

-    <input type="text" id="name" name="name" placeholder="name">
-    <br>
-    <div>
-        Liste privee ?
-        <input type="checkbox" id="private" name="private">
-    </div>
-    <br>
-    <button class="valider" onclick="location.href='page.php'">Valider</button>

 </body>
--- a/index.php
+++ b/index.php
@ -8,7 +8,7 @@ require_once('config/Autoload.php');
 Autoload::charger();

 try{
-    require("Vues/accueil.php");
+    require("Vues/addList.php");
 }
 catch( PDOException $Exception ) {
    echo 'erreur';