mirror of https://github.com/ColorlibHQ/AdminLTE
feat: add login/register v2 + fix input border change
REJack
parent
6c8c3003e2
commit
82b46ab688
|
|
@ -285,16 +285,50 @@ const htmlPath = convertPathToHtml(path);
|
|||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + "/examples/login.html"} class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Login v1</p>
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-box-arrow-in-right"></i>
|
||||
<p>
|
||||
Version 1
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + "/examples/login.html"} class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Login</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + "/examples/register.html"} class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Register</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + "/examples/register.html"} class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Register v1</p>
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon bi bi-box-arrow-in-right"></i>
|
||||
<p>
|
||||
Version 2
|
||||
<i class="nav-arrow bi bi-chevron-right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + "/examples/login-v2.html"} class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Login</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + "/examples/register-v2.html"} class="nav-link">
|
||||
<i class="nav-icon bi bi-circle"></i>
|
||||
<p>Register</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Login Page v2";
|
||||
const path = "../../../dist";
|
||||
const htmlPath = "..";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="login-page bg-body-secondary">
|
||||
<div class="login-box">
|
||||
<div class="card card-outline card-primary">
|
||||
<div class="card-header">
|
||||
<a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
|
||||
<h1 class="mb-0">
|
||||
<b>Admin</b>LTE
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body login-card-body">
|
||||
<p class="login-box-msg">Sign in to start your session</p>
|
||||
|
||||
<form action={htmlPath + "/index3.html"} method="post">
|
||||
<div class="input-group mb-1">
|
||||
<div class="form-floating">
|
||||
<input id="loginEmail" type="email" class="form-control" value="" placeholder="" />
|
||||
<label for="loginEmail">Email</label>
|
||||
</div>
|
||||
<div class="input-group-text">
|
||||
<span class="bi bi-envelope"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-1">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
id="loginPassword"
|
||||
type="password"
|
||||
class="form-control"
|
||||
placeholder=""
|
||||
/>
|
||||
<label for="loginPassword">Password</label>
|
||||
</div>
|
||||
<div class="input-group-text">
|
||||
<span class="bi bi-lock-fill"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-8 d-inline-flex align-items-center">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="flexCheckDefault"
|
||||
/>
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
Remember Me
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-4">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</form>
|
||||
|
||||
<div class="social-auth-links text-center mb-3 d-grid gap-2">
|
||||
<p>- OR -</p>
|
||||
<a href="#" class="btn btn-primary">
|
||||
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger">
|
||||
<i class="bi bi-google me-2"></i> Sign in using Google+
|
||||
</a>
|
||||
</div>
|
||||
<!-- /.social-auth-links -->
|
||||
|
||||
<p class="mb-1">
|
||||
<a href="forgot-password.html">I forgot my password</a>
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
<a href="register.html" class="text-center">
|
||||
Register a new membership
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.login-card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.login-box -->
|
||||
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
---
|
||||
import Head from "@components/_head.astro";
|
||||
import Scripts from "@components/_scripts.astro";
|
||||
|
||||
const title = "AdminLTE 4 | Register Page v2";
|
||||
const path = "../../../dist";
|
||||
const htmlPath = "..";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<!--begin::Head-->
|
||||
<head>
|
||||
<Head title={title} path={path} />
|
||||
</head>
|
||||
<!--end::Head-->
|
||||
<!--begin::Body-->
|
||||
<body class="register-page bg-body-secondary">
|
||||
<div class="register-box">
|
||||
<!-- /.register-logo -->
|
||||
<div class="card card-outline card-primary">
|
||||
<div class="card-header">
|
||||
<a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
|
||||
<h1 class="mb-0">
|
||||
<b>Admin</b>LTE
|
||||
</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body register-card-body">
|
||||
<p class="register-box-msg">Register a new membership</p>
|
||||
|
||||
<form action={htmlPath + "/index3.html"} method="post">
|
||||
<div class="input-group mb-1">
|
||||
<div class="form-floating">
|
||||
<input id="registerFullName" type="text" class="form-control" placeholder="" />
|
||||
<label for="registerFullName">Full Name</label>
|
||||
</div>
|
||||
<div class="input-group-text">
|
||||
<span class="bi bi-person"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-1">
|
||||
<div class="form-floating">
|
||||
<input id="registerEmail" type="email" class="form-control" placeholder="" />
|
||||
<label for="registerEmail">Email</label>
|
||||
</div>
|
||||
<div class="input-group-text">
|
||||
<span class="bi bi-envelope"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-group mb-1">
|
||||
<div class="form-floating">
|
||||
<input
|
||||
id="registerPassword"
|
||||
type="password"
|
||||
class="form-control"
|
||||
placeholder=""
|
||||
/>
|
||||
<label for="registerPassword">Password</label>
|
||||
</div>
|
||||
<div class="input-group-text">
|
||||
<span class="bi bi-lock-fill"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!--begin::Row-->
|
||||
<div class="row">
|
||||
<div class="col-8 d-inline-flex align-items-center">
|
||||
<div class="form-check">
|
||||
<input
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
id="flexCheckDefault"
|
||||
/>
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
I agree to the <a href="#">terms</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-4">
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!--end::Row-->
|
||||
</form>
|
||||
|
||||
<div class="social-auth-links text-center mb-3 d-grid gap-2">
|
||||
<p>- OR -</p>
|
||||
<a href="#" class="btn btn-primary">
|
||||
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
|
||||
</a>
|
||||
<a href="#" class="btn btn-danger">
|
||||
<i class="bi bi-google me-2"></i> Sign in using Google+
|
||||
</a>
|
||||
</div>
|
||||
<!-- /.social-auth-links -->
|
||||
|
||||
<p class="mb-0">
|
||||
<a href="login.html" class="link-primary text-center">
|
||||
I already have a membership
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<!-- /.register-card-body -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.register-box -->
|
||||
|
||||
<Scripts path={path} />
|
||||
<!--end::Script-->
|
||||
</body><!--end::Body-->
|
||||
</html>
|
||||
|
|
@ -46,8 +46,6 @@
|
|||
|
||||
.input-group {
|
||||
.form-control {
|
||||
border-right: 0;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
|
||||
|
|
@ -82,7 +80,6 @@
|
|||
.input-group-text {
|
||||
color: var(--#{$prefix}secondary-color);
|
||||
background-color: transparent;
|
||||
border-left: 0;
|
||||
@include border-top-end-radius($border-radius);
|
||||
@include border-bottom-end-radius($border-radius);
|
||||
@include transition($input-transition);
|
||||
|
|
|
|||
Loading…
Reference in New Issue