admin/nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update login ui

Browse Source
This commit is contained in:
reksamamur
2026-03-18 16:44:45 +07:00
parent 778f82635d
commit 8eb53e48c2
2 changed files with 112 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
nexus/public/css/login.css
View File

@@ -31,6 +31,11 @@ body {
min-height: 100vh; min-height: 100vh;
} }
/* Hide noscript element */
noscript {
display: none;
}
/* --- Left Panel (Form) --- */ /* --- Left Panel (Form) --- */
.left-panel { .left-panel {
flex: 1; flex: 1;
@@ -295,6 +300,18 @@ body {
/* --- Footer Styling Override --- */ /* --- Footer Styling Override --- */
/* Toggle visibility between login and forgot password sections */
.for-login, .for-forgot {
display: flex;
width: 100%;
min-height: 100vh;
}
.for-login.active, .for-forgot.active {
display: flex;
flex-direction: row;
}
/* Reduce footer padding */ /* Reduce footer padding */
.web-footer { .web-footer {
display: none; display: none;

135
nexus/www/login.html
View File

@@ -42,7 +42,7 @@
{% endblock %} {% endblock %}
{% block page_content %} {% block page_content %}
<div class="main-container"> <div>
<noscript> <noscript>
<div class="text-center my-5"> <div class="text-center my-5">
<h4>{{ _("Javascript is disabled on your browser") }}</h4> <h4>{{ _("Javascript is disabled on your browser") }}</h4>
@@ -53,49 +53,104 @@
</div> </div>
</noscript> </noscript>
<!-- Left Side: Form --> <!-- Login Section -->
<div class="left-panel"> <section class='for-login'>
<div class="brand"> <!-- Left Side: Form -->
<a href="#" class="brand-link"> <div class="left-panel">
<div class="brand-icon"> <div class="brand">
<!-- Your Custom Icon --> <a href="#" class="brand-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <div class="brand-icon">
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <!-- Your Custom Icon -->
<path d="m7 7 10 10" /> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
<path d="M17 7v10H7" /> stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
</svg> <path d="m7 7 10 10" />
</div> <path d="M17 7v10H7" />
Nexus </svg>
</a> </div>
</div> Nexus
</a>
<!-- Centered Form Area -->
<div class="form-container">
<div class="form-header">
<h1>Welcome back</h1>
<p>Please enter your credentials to access your account.</p>
</div> </div>
<form class="form-signin form-login" role="form"> <!-- Centered Form Area -->
{{ email_login_body() }} <div class="form-container">
<button class="btn-primary btn-login" type="submit"> <div class="form-header">
{{ _("Login") }} <h1>Welcome back</h1>
</button> <p>Please enter your credentials to access your account.</p>
</form> </div>
<form class="form-signin form-login" role="form">
{{ email_login_body() }}
<button class="btn-primary btn-login" type="submit">
{{ _("Login") }}
</button>
</form>
</div>
</div> </div>
</div>
<!-- Right Side: Image --> <!-- Right Side: Image -->
<div class="right-panel"> <div class="right-panel">
<div class="frame-panel"> <div class="frame-panel">
<img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder"> <img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder">
</div>
</div> </div>
</div> </section>
</div>
{% endblock %}
{% block script %} <!-- Forgot Password Section -->
<script>{% include "templates/includes/login/login.js" %}</script> <section class='for-forgot'>
{% endblock %} <div class="left-panel">
<div class="brand">
<a href="#" class="brand-link">
<div class="brand-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="m7 7 10 10" />
<path d="M17 7v10H7" />
</svg>
</div>
Nexus
</a>
</div>
{% block sidebar %}{% endblock %} <div class="form-container">
<div class="form-header">
<h1>Forgot Password</h1>
<p>Enter your email address to reset your password.</p>
</div>
<form class="form-signin form-forgot hide" role="form">
<div class="input-group">
<label class="input-label" for="forgot_email">{{ _("Email Address") }}</label>
<div class="email-field">
<input type="email" id="forgot_email" class="input-field"
placeholder="{{ _('jane@example.com') }}" required autofocus autocomplete="username">
<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg">
<use class="es-lock" href="#es-line-email"></use>
</svg>
</div>
</div>
<button class="btn-primary btn-login" type="submit">
{{ _("Reset Password") }}
</button>
<div class="form-actions">
<a href="#login" class="link-btn">{{ _("Back to Login") }}</a>
</div>
</form>
</div>
</div>
<div class="right-panel">
<div class="frame-panel">
<img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder">
</div>
</div>
</section>
{% endblock %}
{% block script %}
<script>{% include "templates/includes/login/login.js" %}</script>
{% endblock %}
{% block sidebar %}{% endblock %}