première version html/css de la page de connection/inscription

2 years ago · de3490a9e9
parent 01ed584c99
commit de3490a9e9
3 changed files with 63 additions and 1 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,7 +2,7 @@

 # Generated by package manager
 node_modules/
-
+*ionicons
 # Generated by Cordova
 /plugins/
 /platforms/
--- a/www/login/index.html
+++ b/www/login/index.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Connection</title>
+    <link rel="stylesheet" href="login.css">
+    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+</head>
+<body>
+    <div class="container">
+        <form action="#" method="POST">
+            <h3>S'identifier</h3>
+            <div class="Input">
+                <span>Identifiant (eMail)</span>
+                <div class="box">
+                    <div class="icon">
+                        <ion-icon name="person-circle-outline"></ion-icon>
+                    </div>
+                    <input type="text" name="username" required>
+                </div>
+            </div>
+            <div class="Input">
+                <span>Mot de passe</span>
+                <div class="box">
+                    <div class="icon">
+                        <ion-icon name="lock-closed"></ion-icon>
+                    </div>
+                    <input type="password" name="password" required>
+                </div>
+            </div>
+            <a href="#" class="forgot">Mot de passe oublié</a>
+            <br><a href="register.html" class="register">S'inscrire</a>
+        </form>
+    </div>
+</body>
+</html>
--- a/www/login/login.css
+++ b/www/login/login.css
@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Alegreya',sans-serif;
+}
+a{
+    text-decoration: none;
+}
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #585858;
+}
+
+.container{
+    position: relative;
+    width: 400px;
+    min-height: 550px;
+    justify-content: center;
+    align-items: center;
+}