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;
}
/* Hide noscript element */
noscript {
display: none;
}
/* --- Left Panel (Form) --- */
.left-panel {
flex: 1;
@@ -295,6 +300,18 @@ body {
/* --- 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 */
.web-footer {
display: none;

135
nexus/www/login.html
View File

@@ -42,7 +42,7 @@
{% endblock %}
{% block page_content %}
<div class="main-container">
<div>
<noscript>
<div class="text-center my-5">
<h4>{{ _("Javascript is disabled on your browser") }}</h4>
@@ -53,49 +53,104 @@
</div>
</noscript>
<!-- Left Side: Form -->
<div class="left-panel">
<div class="brand">
<a href="#" class="brand-link">
<div class="brand-icon">
<!-- Your Custom 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>
<!-- 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>
<!-- Login Section -->
<section class='for-login'>
<!-- Left Side: Form -->
<div class="left-panel">
<div class="brand">
<a href="#" class="brand-link">
<div class="brand-icon">
<!-- Your Custom 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>
<form class="form-signin form-login" role="form">
{{ email_login_body() }}
<button class="btn-primary btn-login" type="submit">
{{ _("Login") }}
</button>
</form>
<!-- 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>
<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>
<!-- Right Side: Image -->
<div class="right-panel">
<div class="frame-panel">
<img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder">
<!-- Right Side: Image -->
<div class="right-panel">
<div class="frame-panel">
<img src="/assets/nexus/images/bg.png" alt="Abstract Placeholder" class="image-placeholder">
</div>
</div>
</div>
</div>
{% endblock %}
</section>
{% block script %}
<script>{% include "templates/includes/login/login.js" %}</script>
{% endblock %}
<!-- Forgot Password Section -->
<section class='for-forgot'>
<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 %}