initilisation : header nav login-modal signin-modal

zoutigo · Sep 19, 2020 · f513b0b · f513b0b
1 parent a618ff5
commit f513b0b
Show file tree

Hide file tree

Showing 5 changed files with 140 additions and 5 deletions.
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -1,8 +1,61 @@
+
+*, html, body {
+ margin : 0 ;
+ padding : 0 ;
+ text-decoration: none;
+ list-style: none;
+}
+
 body {
- padding: 50px;
+ padding-top: 2vh ;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+ background-color: black;
+}
+
+
+header {
+ background-color: rgb(199, 198, 190);
+
+ height: 10vh;
+ margin: 0;
+ padding: 2vh 0
+}
+
+header > ul {
+height: 6vh;
+display: flex;
+justify-content: space-between;
+align-items: center;
+margin: 0 1em
+}
+
+.logo{
+ font-size: 3em;
+ font-weight: bold;
+ color: rgb(0, 174, 255)
+}
+.idBlock {
+ align-self: center;
+}
+.mrg-3 {
+ margin-right: 3em;
+}
+
+.navList {
+ display: flex;
+
+}
+nav ul {
+ padding : 0 1.5em ;
+ background-color: rgb(0, 195, 255);
 }
 
-a {
- color: #00B7FF;
+nav ul li {
+
+ height: 1.8em;
+ width:15em;
+ font-size: 1.5em;
 }
+aside {
+ background-color: red;
+}
diff --git a/views/includes/aside.pug b/views/includes/aside.pug
@@ -0,0 +1,2 @@
+
+h1 Pourquoi ça ne marche pas tout le temps ?
diff --git a/views/includes/modals.pug b/views/includes/modals.pug
@@ -0,0 +1,55 @@
+
+#loginModal.modal.fade(tabindex='-1' aria-labelledby='exampleModalLabel' aria-hidden='true')
+ .modal-dialog.modal-dialog-centered
+ .modal-content
+ .modal-header
+ h5#exampleModalLabel.modal-title Ravi de vous revoir parmi nous
+ button.close(type='button' data-dismiss='modal' aria-label='Close')
+ span(aria-hidden='true') &times;
+ .modal-body
+ form
+ .form-group
+ label(for='loginInputEmail1') Adresse mail
+ input#loginInputEmail1.form-control(type='email' aria-describedby='emailHelp')
+ small#loginEmailHelp.form-text.text-muted 
+ .form-group
+ label(for='loginInputPassword1') Mot de pass
+ input#loginInputPassword1.form-control(type='password')
+ small#loginPasswordHelp.form-text.text-muted 
+
+ .form-group
+ small#loginHelp.form-text.text-muted 
+
+ .modal-footer
+ button.btn.btn-warning(type='button' data-dismiss='modal') J'annulle
+ button.btn.btn-success(type='button' disabled) Je me connecte
+
+
+#signinModal.modal.fade(tabindex='-1' aria-labelledby='signinModalLabel' aria-hidden='true')
+ .modal-dialog.modal-dialog-centered.modal-lg
+ .modal-content
+ .modal-header
+ h5#exampleModalLabel.modal-title Inscrivez vous pour blablater pendant votre shopping
+ button.close(type='button' data-dismiss='modal' aria-label='Close')
+ span(aria-hidden='true') &times;
+ .modal-body
+ form
+ .form-group
+ label(for='signinInputEmail') Email address
+ input#signinInputEmail.form-control(type='email' aria-describedby='emailHelp')
+ small#signinEmailHelp.form-text.text-muted Votre email restera nonyme et ne sera pas communiquée à des tiers.
+ small#signinEmailError.form-text.text-muted 
+ .form-group
+ label(for='signinInputPassword1') Mot de pass
+ input#signInputPassword1.form-control(type='password')
+ small#signinPasswordHelp1.form-text.text-muted Le mot de pass doit contenir au moins 8 caractères dont une majuscule, une minuscule et un chiffre
+ small#signinPassword1Error.form-text.text-muted 
+ .form-group
+ label(for='signinInputPassword2') Mot de pass confirmation
+ input#signinInputPassword2.form-control(type='password')
+ small#signinPasswordHelp2.form-text.text-muted Veillez confirmer le mot de pass
+ small#signinPassword2Error.form-text.text-muted 
+
+ .modal-footer
+ button.btn.btn-secondary(type='button' data-dismiss='modal') Fermer et annuler
+ button.btn.btn-primary(type='button' disabled) S'inscrire et blablachopper
diff --git a/views/index.pug b/views/index.pug
@@ -1,5 +1,21 @@
 extends layout
 
 block content
- h1= title
- p Welcome to #{title}
+
+ div.container
+ header
+ ul
+ li.logo Blabla.Shopping
+ li#idBlock.idBlock
+ button.btn.btn-info.mrg-3(type='button' data-toggle='modal' data-target='#loginModal') Je me connecte . Bla
+ button.btn.btn-warning(type='button' data-toggle='modal' data-target='#signinModal') Je m'incris . BlaBla
+
+ nav
+ ul.navList
+ li(id="news") Actualite
+ li(id="messenger") Messagerie privée
+ li(id="shop") Boutique en ligne
+ li(id="chat") Discussion instantanée
+ aside
+ block aside 
+
diff --git a/views/layout.pug b/views/layout.pug
@@ -2,6 +2,15 @@ doctype html
 html
  head
  title= title
+ link(rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous")
  link(rel='stylesheet', href='/stylesheets/style.css')
+
+
  body
+ include includes/modals.pug
  block content
+ block scripts
+ script(src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous")
+ script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous")
+ script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous")
+