Commit

Added login page
PlatePilot · Feb 18, 2024 · 639c019 · 639c019
1 parent 972a686
commit 639c019
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 5 deletions.
diff --git a/src/client/_src/template.js b/src/client/_src/template.js
@@ -7,7 +7,6 @@ for (const template of document.getElementsByTagName('template')) {
         .then(content => {
             const html = document.createElement('html');
             html.innerHTML = content;
-            console.dir(document.head)
             document.head.insertAdjacentHTML('afterend', html.getElementsByTagName('head')[0].innerHTML);
             template.insertAdjacentHTML('afterend', html.getElementsByTagName('body')[0].innerHTML);
     });

diff --git a/src/client/_styles/index.scss b/src/client/_styles/index.scss
@@ -3,7 +3,6 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins:700|Poppins:400');
 
 
-
 body {
     font-family: 'Poppins';
     font-weight: 400;

diff --git a/src/client/_templates/header.html b/src/client/_templates/header.html
@@ -5,7 +5,7 @@
     <body>
         <header>
             <a href="../../"><h4>Plate Pilot</h4></a>
-            <span>Sign In</span>
+            <a href="./../login/" >Log In</a>
         </header>
         <div class="nav-wrapper">
             <nav>

diff --git a/src/client/index.html b/src/client/index.html
@@ -57,8 +57,8 @@
 
         -->
         <!-- script -->
-        <script type="module" src="./_src/bundle.min.js" defer></script>
-        <script type="module" src="./_src/template.js" defer></script>
+        <script type="module" src="./_src/template.js" defer async="false"></script>
+        <script type="module" src="./_src/bundle.min.js" defer async="false"></script>
 
         <!-- style -->
         <link rel="stylesheet" href="./_styles/bundle.min.css">

diff --git a/src/client/login/_src/index.ts b/src/client/login/_src/index.ts
@@ -0,0 +1,3 @@
+document.getElementById("login-close")?.addEventListener("click", () => {
+    history.back();
+});
diff --git a/src/client/login/_styles/index.scss b/src/client/login/_styles/index.scss
@@ -0,0 +1,101 @@
+@import "./../../_styles/props.scss";
+@import "../../_styles/index.scss";
+
+.login {
+    z-index: 9999;
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    background-color: var(--background);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    .login-close {
+        color: var(--error);
+        font-weight: bold;
+        cursor: pointer;
+        padding: var(--gap);
+    }
+
+    .login-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .login-content {
+            display: flex;
+            flex-direction: column;
+            gap: var(--gap);
+            border: 2px solid var(--dark-2);
+            border-radius: var(--border-radius);
+            box-shadow: 0 0 10px 5px var(--dark-4);
+            padding: var(--gap);
+            width: 350px;
+            margin: 2px;
+
+            .login-header {
+                text-align: center;
+                color: var(--dark-text);
+                display: flex;
+                flex-direction: column;
+                gap: var(--gap);
+
+                .login-header-1 {
+                    font-size: 35px;
+                    font-weight: bold;
+                    color: var(--text);
+                }
+            }
+
+            .login-item {
+                display: flex;
+                flex-direction: column;
+                gap: 4px;
+
+                .login-item-head {
+                    color: var(--text);
+                }
+
+                .login-input {
+                    background-color: var(--background);
+                    outline: var(--dark-2);
+                    border: 2px solid var(--dark-3);
+                    border-radius: var(--border-radius);
+                    padding: var(--small-gap);
+                    color: var(--dark-text);
+                }
+
+                .login-item-info {
+                    color: var(--dark-2);
+                    font-size: small;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 4px;
+
+                    .bx {
+                        font-size: 16px;
+                    }
+                }
+            }
+
+            .login-done-button {
+                background-color: var(--primary);
+                color: var(--text-opposite);
+                font-weight: bold;
+                text-align: center;
+                border-radius: var(--border-radius);
+                padding: 4px;
+                margin-top: 20px;
+                cursor: pointer;
+            }
+
+            .key-item {
+                margin-top: 20px;
+            }
+        }
+    }
+}
diff --git a/src/client/login/index.html b/src/client/login/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+        <title>PlatePilot | Saved Plates</title>
+
+        <!-- script --> 
+        <script type="module" src="./_src/bundle.min.js" defer></script>
+        <script type="module" src="../_src/template.js" defer></script>
+
+        <!-- style -->
+        <link rel="stylesheet" href="./_styles/bundle.min.css">
+
+        <!-- icons -->
+        <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+    </head>
+    <body data-theme="dark">
+        <div class="login">
+            <div class="login-close" id="login-close" >Close</div>
+            <div class="login-container">
+                <div class="login-content">
+                    <div class="login-header">
+                        <span class="login-header-1">Plate Pilot</span>
+                        <span>Enter your key to log in</span>
+                    </div>
+                    <div class="login-item key-item">
+                        <span class="login-item-head">Your key</span>
+                        <input class="login-input" type="text" placeholder="Enter unique key">
+                    </div>
+                    <div class="login-done-button">Log In</div>
+                </div>
+            </div>
+        </>
+    </body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,6 @@ @@
     @import url('https://fonts.googleapis.com/css?family=Poppins:700|Poppins:400');
     body {
         font-family: 'Poppins';
         font-weight: 400;
@@ Expand Down @@