lock screen added

ColorlibHQ · Jul 18, 2023 · eaefd70 · eaefd70
1 parent adb7949
commit eaefd70
Show file tree

Hide file tree

Showing 4 changed files with 145 additions and 1 deletion.
diff --git a/src/html/components/dashboard/_sidenav.astro b/src/html/components/dashboard/_sidenav.astro
@@ -279,7 +279,7 @@ const htmlPath = convertPathToHtml(path);
           <a href="#" class="nav-link">
             <i class="nav-icon bi bi-box-arrow-in-right"></i>
             <p>
-              Login & Register
+              Auth
               <i class="nav-arrow bi bi-chevron-right"></i>
             </p>
           </a>
@@ -296,6 +296,12 @@ const htmlPath = convertPathToHtml(path);
                 <p>Register v1</p>
               </a>
             </li>
+            <li class="nav-item">
+              <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Lockscreen</p>
+              </a>
+            </li>
           </ul>
         </li>
 

diff --git a/src/html/pages/examples/lockscreen.astro b/src/html/pages/examples/lockscreen.astro
@@ -0,0 +1,63 @@
+---
+import Head from "@components/_head.astro";
+import Scripts from "@components/_scripts.astro";
+
+const title = "AdminLTE 4 | Lockscreen";
+const path = "../../../dist";
+const htmlPath = "..";
+const year = new Date().getFullYear();
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="lockscreen bg-body-secondary">
+    <div class="lockscreen-wrapper">
+      <div class="lockscreen-logo">
+        <a href={htmlPath + "/index2.html"}><b>Admin</b>LTE</a>
+      </div>
+
+      <div class="lockscreen-name">John Doe</div>
+
+      <div class="lockscreen-item">
+        <div class="lockscreen-image">
+          <img src={path + "/assets/img/user1-128x128.jpg"} alt="User Image" />
+        </div>
+
+        <form class="lockscreen-credentials">
+          <div class="input-group">
+            <input
+              type="password"
+              class="form-control shadow-none"
+              placeholder="password"
+            />
+            <div class="input-group-text border-0 bg-transparent px-1">
+              <button type="button" class="btn shadow-none">
+                <i class="bi bi-box-arrow-right text-body-secondary"></i>
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      <div class="help-block text-center">
+        Enter your password to retrieve your session
+      </div>
+      <div class="text-center">
+        <a href="login.html">Or sign in as a different user</a>
+      </div>
+      <div class="lockscreen-footer text-center">
+        Copyright © 2014-{year}
+        <b><a href="https://adminlte.io">AdminLTE.io</a></b><br />
+        All rights reserved
+      </div>
+    </div>
+
+    <Scripts />
+  </body><!--end::Body-->
+</html>
diff --git a/src/scss/pages/_lockscreen.scss b/src/scss/pages/_lockscreen.scss
@@ -0,0 +1,74 @@
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
+.lockscreen {
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
+
+  .lockscreen-logo {
+    margin-bottom: 25px;
+    font-size: 35px;
+    font-weight: 300;
+    text-align: center;
+
+    a {
+      color: var(--#{$prefix}emphasis-color);
+    }
+  }
+
+  .lockscreen-wrapper {
+    max-width: 400px;
+    margin: 0 auto;
+    margin-top: 10%;
+  }
+
+  // Will contain the image and the sign in form
+  .lockscreen-item {
+    position: relative;
+    width: 290px;
+    padding: 0;
+    margin: 10px auto 30px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(4px);
+  }
+
+  // User image
+  .lockscreen-image {
+    position: absolute;
+    top: -25px;
+    left: -10px;
+    z-index: 10;
+    padding: 5px;
+    background-color: var(--#{$prefix}body-bg);
+    @include border-radius(50%);
+
+    > img {
+      @include border-radius(50%);
+      width: 70px;
+      height: 70px;
+    }
+  }
+
+  // Contains the password input and the login button
+  .lockscreen-credentials {
+    margin-left: 70px;
+
+    .form-control {
+      border: 0;
+    }
+
+    .btn {
+      padding: 0 10px;
+      border: 0;
+    }
+  }
+
+  .lockscreen-footer {
+    margin-top: 10px;
+  }
+}
diff --git a/src/scss/parts/_pages.scss b/src/scss/parts/_pages.scss
@@ -3,3 +3,4 @@
 //
 
 @import "../pages/login_and_register";
+@import "../pages/lockscreen";