Skip to content

Commit

Permalink
Change background of login/loading/setup/totp pages in web UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@TheophileDiot
TheophileDiot committed Oct 23, 2024
1 parent 2bcf8c5 commit b73861d
Show file tree
Hide file tree
Showing 8 changed files with 1,117 additions and 739 deletions.
9 changes: 9 additions & 0 deletions src/ui/app/static/css/overrides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -773,3 +773,12 @@ a.courier-prime:hover {
--bs-tooltip-bg: var(--bs-warning);
--bs-tooltip-color: var(--bs-white);
}

.login-background {
background-image: url("../img/login-background.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}
12 changes: 6 additions & 6 deletions src/ui/app/static/css/pages/login.css
View file

Large diffs are not rendered by default.

345 changes: 345 additions & 0 deletions src/ui/app/static/img/login-background.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 27 additions & 23 deletions src/ui/app/templates/loading.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,39 @@
{% extends "base.html" %}
{% block page %}
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="position-absolute top-0 p-4 pe-6 ps-6 w-70">
<div class="bg-bw-green position-relative w-100 p-2 text-white rounded fw-bold overflow-hidden">
<div class="d-flex justify-content-between align-items-center">
<div class="flex-grow-1 overflow-hidden me-2">
<div id="banner-container">
<p id="banner-text" class="mb-0 slide-in">
Get the most of BunkerWeb by upgrading to the PRO version. More info and free trial <a class="light-href text-white-80"
<div class="bg-light-subtle">
<div class="login-background">
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="position-absolute top-0 p-4 pe-6 ps-6 w-70">
<div class="bg-bw-green position-relative w-100 p-2 text-white rounded fw-bold overflow-hidden">
<div class="d-flex justify-content-between align-items-center">
<div class="flex-grow-1 overflow-hidden me-2">
<div id="banner-container">
<p id="banner-text" class="mb-0 slide-in">
Get the most of BunkerWeb by upgrading to the PRO version. More info and free trial <a class="light-href text-white-80"
target="_blank"
rel="noopener"
href="https://panel.bunkerweb.io/?utm_campaign=self&utm_source=banner#pro">here</a>.
</p>
</p>
</div>
</div>
<i id="next-news" role="button" class='bx bx-sm bx-chevron-right'></i>
</div>
</div>
<i id="next-news" role="button" class='bx bx-sm bx-chevron-right'></i>
</div>
</div>
</div>
<div class="container-xxl d-flex justify-content-center align-items-center">
<div class="authentication-inner loading">
<div class="layout-main-wrapper mt-0 mb-0">
<div class="layout-main-placeholder d-flex justify-content-center align-items-center">
<lottie-player src="{{ url_for('static', filename='json/blockhaus.min.json') }}" background="transparent" speed="1" class="img-fluid" loop autoplay></lottie-player>
</div>
{% if message %}
<div class="layout-main-info mt-1 mb-1">
<h3 class="mb-0 don-jose">{{ message }}</h3>
<div class="container-xxl d-flex justify-content-center align-items-center">
<div class="authentication-inner">
<div class="layout-main-wrapper mt-0 mb-0">
<div class="layout-main-placeholder d-flex justify-content-center align-items-center">
<lottie-player src="{{ url_for('static', filename='json/blockhaus.min.json') }}" background="transparent" speed="1" class="img-fluid" loop autoplay></lottie-player>
</div>
{% if message %}
<div class="layout-main-info mt-1 mb-1">
<h3 class="mb-0 don-jose">{{ message }}</h3>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
Expand Down
134 changes: 69 additions & 65 deletions src/ui/app/templates/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,81 @@
{% extends "base.html" %}
{% block page %}
<!-- Content -->
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="authentication-inner">
<!-- Register -->
<div class="card px-sm-6 px-0">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center">
<a href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
target="_blank"
rel="noopener"
class="app-brand-link gap-2">
<span class="app-brand-logo login w-50">
<img class="img-fluid"
src="{{ url_for('static', filename='img/logo-menu.png') }}"
alt="BunkerWeb logo">
</span>
</a>
</div>
<!-- /Logo -->
<form class="mb-6" method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="hidden"
name="next"
value="{{ request.values.get('next', '') }}" />
<div class="mb-6">
<label for="username" class="form-label">Username</label>
<input type="text"
class="form-control"
id="username"
name="username"
placeholder="Enter your username"
autofocus
required />
</div>
<div class="mb-6 form-password-toggle">
<label class="form-label" for="password">Password</label>
<div class="input-group input-group-merge">
<input type="password"
id="password"
class="form-control"
name="password"
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
aria-describedby="password"
required />
<span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="mb-8">
<div class="d-flex justify-content-between mt-8">
<div class="form-check mb-0 ms-2">
<input class="form-check-input"
type="checkbox"
id="remember-me"
name="remember-me" />
<label class="form-check-label" for="remember-me">Remember Me</label>
</div>
<a href="https://docs.bunkerweb.io/latest/troubleshooting/?utm_campaign=self&utm_source=ui#__tabbed_6_2"
<div class="bg-light-subtle">
<div class="login-background">
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="authentication-inner">
<!-- Register -->
<div class="card px-sm-6 px-0">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center">
<a href="https://www.bunkerweb.io/?utm_campaign=self&utm_source=ui"
target="_blank"
rel="noopener">
<span>Forgot Password?</span>
rel="noopener"
class="app-brand-link gap-2">
<span class="app-brand-logo login w-50">
<img class="img-fluid"
src="{{ url_for('static', filename='img/logo-menu.png') }}"
alt="BunkerWeb logo">
</span>
</a>
</div>
<!-- /Logo -->
<form class="mb-6" method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="hidden"
name="next"
value="{{ request.values.get('next', '') }}" />
<div class="mb-6">
<label for="username" class="form-label">Username</label>
<input type="text"
class="form-control"
id="username"
name="username"
placeholder="Enter your username"
autofocus
required />
</div>
<div class="mb-6 form-password-toggle">
<label class="form-label" for="password">Password</label>
<div class="input-group input-group-merge">
<input type="password"
id="password"
class="form-control"
name="password"
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
aria-describedby="password"
required />
<span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="mb-8">
<div class="d-flex justify-content-between mt-8">
<div class="form-check mb-0 ms-2">
<input class="form-check-input"
type="checkbox"
id="remember-me"
name="remember-me" />
<label class="form-check-label" for="remember-me">Remember Me</label>
</div>
<a href="https://docs.bunkerweb.io/latest/troubleshooting/?utm_campaign=self&utm_source=ui#__tabbed_6_2"
target="_blank"
rel="noopener">
<span>Forgot Password?</span>
</a>
</div>
</div>
<div class="mb-6">
<button class="btn btn-primary d-grid w-100 don-jose" type="submit">Login</button>
</div>
</form>
</div>
<div class="mb-6">
<button class="btn btn-primary d-grid w-100 don-jose" type="submit">Login</button>
</div>
</form>
</div>
<!-- /Register -->
</div>
</div>
<!-- /Register -->
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/ui/app/templates/reports.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<td>
<div class="d-flex align-items-center">
<img src="{{ base_flags_url }}/{% if report['country'] == "local" %}zz{% else %}{{ report['country']|lower }}{% endif %}.svg"
class="border border-1 p-0 me-1"
class="border border-1 p-0 me-1"
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-original-title="{% if report['country'] == "local" %}N/A{% else %}{{ report["country"] }}{% endif %}"
Expand Down
Loading

0 comments on commit b73861d

Please sign in to comment.