]> _ Git - eif-extranet.git/commitdiff
wip #5719 @2.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 20 Feb 2023 16:53:44 +0000 (17:53 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Mon, 20 Feb 2023 16:53:44 +0000 (17:53 +0100)
images/login-background.jpg [new file with mode: 0644]
login.php [new file with mode: 0644]
placeholders/captcha.png [new file with mode: 0644]
style/inc/_common.sass
style/inc/_forms.sass
style/inc/_login.sass [new file with mode: 0644]
style/inc/_mixins.sass
style/inc/_variables.sass
style/style.sass

diff --git a/images/login-background.jpg b/images/login-background.jpg
new file mode 100644 (file)
index 0000000..12a5f38
Binary files /dev/null and b/images/login-background.jpg differ
diff --git a/login.php b/login.php
new file mode 100644 (file)
index 0000000..c27c4bd
--- /dev/null
+++ b/login.php
@@ -0,0 +1,26 @@
+<?php
+$mainClass = "login";
+?><!DOCTYPE html>
+<html lang="fr">
+<head>
+       <meta charset="UTF-8">
+       <title>EIF - Unibail Rodamco Westfield</title>
+       <link rel="preconnect" href="https://fonts.googleapis.com">
+       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+       <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
+       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tippy.js/6.3.7/tippy.min.css" integrity="sha512-HbPh+j4V7pXprvQMt2dtmK/zCEsUeZWYXRln4sOwmoyHPQAPqy/k9lIquKUyKNpNbDGAY06UdiDHcEkBc72yCQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+       <link rel="stylesheet" href="style/style.css">
+</head>
+<body>
+<?php include "inc/svg-sprite.php" ?>
+<main <?php echo isset($mainClass) ? 'class="' . $mainClass . '"' : '' ?>>
+       <form method="post" action="login.php">
+               <div class="logo" data-icon="logo-EIF"></div>
+               <label><span>Adresse email ou identifiant</span><input type="text" name="username"></label>
+               <label><span>Mot de passe</span><input type="password" name="password"><a href="#">Oublié ?</a></label>
+               <div class="captcha"><img src="placeholders/captcha.png" /></div>
+               <a href="#" class="submit">Connexion</a>
+               <footer>© EIF Expertise & Innovation 2023</footer>
+       </form>
+
+       <?php include "inc/foot.php" ?>
diff --git a/placeholders/captcha.png b/placeholders/captcha.png
new file mode 100644 (file)
index 0000000..a0236c8
Binary files /dev/null and b/placeholders/captcha.png differ
index 70b80e5fef1f12f52bf7445870bd54c75b432a32..b6d9e263a7981599a02c393291e010390902daa8 100644 (file)
@@ -1,5 +1,6 @@
 html, body, main
   min-height: 100%
+  height: 100%
 
 body
   background-color: $background-color
index 9ce9fcfc9d9dfa77b75f7362c11a70b255770d17..5310d57ea5ec0bbc80d1793d4de351ecb6fb3eec 100644 (file)
@@ -1,4 +1,4 @@
-.submit, input[type="text"], input[type="search"], select, textarea
+.submit, input[type="text"], input[type="search"], input[type="password"], select, textarea
   height: 50px
   padding: 15px
   border: 0
diff --git a/style/inc/_login.sass b/style/inc/_login.sass
new file mode 100644 (file)
index 0000000..8aa80d3
--- /dev/null
@@ -0,0 +1,57 @@
+main.login
+  background-image: url("../images/login-background.jpg")
+  background-size: cover
+  background-position: 50% 50%
+  height: 100%
+  min-height: 100%
+  padding: 0
+  min-width: auto
+  display: flex
+  align-items: center
+  justify-content: center
+
+  form
+    min-width: 500px
+    width: 500px
+    max-width: 100%
+    margin: 0 auto
+    border-radius: 8px
+    background-color: #fff
+    padding: 50px
+
+    @include media-x-small
+      width: 100%
+      min-width: auto
+      height: 100%
+
+    input
+      background-color: $background-color
+      width: 100%
+
+    label
+      display: block
+      margin: 50px 0
+      position: relative
+
+      a
+        position: absolute
+        right: 12px
+        top: 17px
+
+    .logo
+      width: 98px
+      height: auto
+      margin: 0 auto 50px
+
+    .submit
+      width: 100%
+      text-align: center
+      font-size: 17px
+      padding: 25px
+      height: 70px
+      margin: 50px 0
+
+  footer
+    color: $light-color
+    font-size: 12px
+    text-align: center
index 2ab7a909195e997f07b687402ec4060008d0b85c..eb6c39f145bf1b595552f968f6ffbd0e24b3fc1f 100644 (file)
 
 @mixin media-small
   @media screen and (max-width: $breakpoint-small)
+    &
+      @content
+
+@mixin media-x-small
+  @media screen and (max-width: $breakpoint-x-small)
     &
       @content
\ No newline at end of file
index 836c4e9e1c2174a9ee10d109d45ff27637b5a17b..e6d72d48ec0f3e8749f11d8024a8452c8ca14149 100644 (file)
@@ -35,4 +35,5 @@ $evolution-desc: #C1CE3A
 
 // Responsive breakpoints
 $breakpoint-medium: 1300px
-$breakpoint-small: 900px
\ No newline at end of file
+$breakpoint-small: 900px
+$breakpoint-x-small: 600px
\ No newline at end of file
index 6d31b6d656798d02ca6776551810ef3b31c5ee47..d27290d36a07edb188a3473114af117931a4d598 100644 (file)
@@ -10,4 +10,5 @@
 @import "inc/_switch"
 @import "inc/_tags"
 @import "inc/_dialogs"
-@import "inc/_msie"
+@import "inc/_login"
+@import "inc/_msie"
\ No newline at end of file