feat: initial commit - Band Management application

This commit is contained in:
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions

View File

@@ -0,0 +1,66 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Forgot Password Basic - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="authentication-inner py-6">
<!-- Forgot Password -->
<div class="card">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center mb-6">
<a href="{% url 'index' %}" class="app-brand-link">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
</div>
<!-- /Logo -->
<h4 class="mb-1">Forgot Password? 🔒</h4>
<p class="mb-6">Enter your email and we'll send you instructions to reset your password</p>
<form id="formAuthentication" class="mb-6" action="{% url 'auth-reset-password-basic' %}" method="GET">
<div class="mb-6 form-control-validation">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" autofocus />
</div>
<button class="btn btn-primary d-grid w-100">Send Reset Link</button>
</form>
<div class="text-center">
<a href="{% url 'auth-login-basic' %}" class="d-flex justify-content-center">
<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
Back to login
</a>
</div>
</div>
</div>
<!-- /Forgot Password -->
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,72 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Forgot Password Cover - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="authentication-wrapper authentication-cover">
<!-- Logo -->
<a href="{% url 'index' %}" class="app-brand auth-cover-brand">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
<!-- /Logo -->
<div class="authentication-inner row m-0">
<!-- /Left Text -->
<div class="d-none d-xl-flex col-xl-8 p-0">
<div class="auth-cover-bg d-flex justify-content-center align-items-center">
<img src="{% static 'img/illustrations/auth-forgot-password-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-forgot-password-cover" class="my-5 auth-illustration d-lg-block d-none" data-app-light-img="illustrations/auth-forgot-password-illustration-light.png" data-app-dark-img="illustrations/auth-forgot-password-illustration-dark.png" />
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-forgot-password-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
</div>
<!-- /Left Text -->
<!-- Forgot Password -->
<div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
<div class="w-px-400 mx-auto mt-12 mt-5">
<h4 class="mb-1">Forgot Password? 🔒</h4>
<p class="mb-6">Enter your email and we'll send you instructions to reset your password</p>
<form id="formAuthentication" class="mb-6" action="{% url 'auth-reset-password-cover' %}">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" autofocus />
</div>
<button class="btn btn-primary d-grid w-100">Send Reset Link</button>
</form>
<div class="text-center">
<a href="{% url 'auth-login-cover' %}" class="d-flex justify-content-center">
<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
Back to login
</a>
</div>
</div>
</div>
<!-- /Forgot Password -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,114 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Login Basic - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}">
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="authentication-inner py-6">
<!-- Login -->
<div class="card">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center mb-6">
<a href="{% url 'index' %}" class="app-brand-link">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
</div>
<!-- /Logo -->
<h4 class="mb-1">Welcome to {% get_theme_variables 'template_name' %}! 👋</h4>
<p class="mb-6">Please sign-in to your account and start the adventure</p>
<form id="formAuthentication" class="mb-4" action="{% url 'index' %}">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<label for="email" class="form-label">Email or Username</label>
<input type="text" class="form-control" id="email" name="email-username" placeholder="Enter your email or username" autofocus />
</div>
<div class="mb-6 form-password-toggle form-control-validation">
<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" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="my-8">
<div class="d-flex justify-content-between">
<div class="form-check mb-0 ms-2">
<input class="form-check-input" type="checkbox" id="remember-me" />
<label class="form-check-label" for="remember-me"> Remember Me </label>
</div>
<a href="{% url 'auth-forgot-password-basic' %}">
<p class="mb-0">Forgot Password?</p>
</a>
</div>
</div>
<div class="mb-6">
<button class="btn btn-primary d-grid w-100" type="submit">Login</button>
</div>
</form>
<p class="text-center">
<span>New on our platform?</span>
<a href="{% url 'auth-register-basic' %}">
<span>Create an account</span>
</a>
</p>
<div class="divider my-6">
<div class="divider-text">or</div>
</div>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
<i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
<i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
<i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
<i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
</a>
</div>
</div>
</div>
<!-- /Login -->
</div>
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,114 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Login Cover - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="authentication-wrapper authentication-cover">
<!-- Logo -->
<a href="{% url 'index' %}" class="app-brand auth-cover-brand">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
<!-- /Logo -->
<div class="authentication-inner row m-0">
<!-- /Left Text -->
<div class="d-none d-xl-flex col-xl-8 p-0">
<div class="auth-cover-bg d-flex justify-content-center align-items-center">
<img src="{% static 'img/illustrations/auth-login-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-login-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-login-illustration-light.png" data-app-dark-img="illustrations/auth-login-illustration-dark.png" />
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-login-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
</div>
<!-- /Left Text -->
<!-- Login -->
<div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
<div class="w-px-400 mx-auto mt-12 pt-5">
<h4 class="mb-1">Welcome to {% get_theme_variables 'template_name' %}! 👋</h4>
<p class="mb-6">Please sign-in to your account and start the adventure</p>
<form id="formAuthentication" class="mb-6" action="{% url 'index' %}">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<label for="email" class="form-label">Email or Username</label>
<input type="text" class="form-control" id="email" name="email-username" placeholder="Enter your email or username" autofocus />
</div>
<div class="mb-6 form-password-toggle form-control-validation">
<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" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="my-8">
<div class="d-flex justify-content-between">
<div class="form-check mb-0 ms-2">
<input class="form-check-input" type="checkbox" id="remember-me" />
<label class="form-check-label" for="remember-me"> Remember Me </label>
</div>
<a href="{% url 'auth-forgot-password-cover' %}">
<p class="mb-0">Forgot Password?</p>
</a>
</div>
</div>
<button class="btn btn-primary d-grid w-100">Sign in</button>
</form>
<p class="text-center">
<span>New on our platform?</span>
<a href="{% url 'auth-register-cover' %}">
<span>Create an account</span>
</a>
</p>
<div class="divider my-6">
<div class="divider-text">or</div>
</div>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
<i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
<i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
<i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
<i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
</a>
</div>
</div>
</div>
<!-- /Login -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,113 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Register Basic - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}">
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="authentication-inner py-6">
<!-- Register Card -->
<div class="card">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center mb-6">
<a href="{% url 'index' %}" class="app-brand-link">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
</div>
<!-- /Logo -->
<h4 class="mb-1">Adventure starts here 🚀</h4>
<p class="mb-6">Make your app management easy and fun!</p>
<form id="formAuthentication" class="mb-6" action="{% url 'index' %}">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" autofocus />
</div>
<div class="mb-6 form-control-validation">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" />
</div>
<div class="mb-6 form-password-toggle form-control-validation">
<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" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="my-8 form-control-validation">
<div class="form-check mb-0 ms-2">
<input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
<label class="form-check-label" for="terms-conditions">
I agree to
<a href="javascript:void(0);">privacy policy & terms</a>
</label>
</div>
</div>
<button class="btn btn-primary d-grid w-100">Sign up</button>
</form>
<p class="text-center">
<span>Already have an account?</span>
<a href="{% url 'auth-login-basic' %}">
<span>Sign in instead</span>
</a>
</p>
<div class="divider my-6">
<div class="divider-text">or</div>
</div>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
<i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
<i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
<i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
<i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
</a>
</div>
</div>
</div>
<!-- Register Card -->
</div>
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,116 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Register Cover - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="authentication-wrapper authentication-cover">
<!-- Logo -->
<a href="{% url 'index' %}" class="app-brand auth-cover-brand">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
<!-- /Logo -->
<div class="authentication-inner row m-0">
<!-- /Left Text -->
<div class="d-none d-xl-flex col-xl-8 p-0">
<div class="auth-cover-bg d-flex justify-content-center align-items-center">
<img src="{% static 'img/illustrations/auth-register-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-register-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-register-illustration-light.png" data-app-dark-img="illustrations/auth-register-illustration-dark.png" />
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-register-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
</div>
<!-- /Left Text -->
<!-- Register -->
<div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-sm-12 p-6">
<div class="w-px-400 mx-auto mt-12 pt-5">
<h4 class="mb-1">Adventure starts here 🚀</h4>
<p class="mb-6">Make your app management easy and fun!</p>
<form id="formAuthentication" class="mb-6" action="{% url 'index' %}">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" autofocus />
</div>
<div class="mb-6 form-control-validation">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Enter your email" />
</div>
<div class="mb-6 form-password-toggle form-control-validation">
<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" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="mb-6 mt-8">
<div class="form-check mb-8 ms-2 form-control-validation">
<input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" />
<label class="form-check-label" for="terms-conditions">
I agree to
<a href="javascript:void(0);">privacy policy & terms</a>
</label>
</div>
</div>
<button class="btn btn-primary d-grid w-100">Sign up</button>
</form>
<p class="text-center">
<span>Already have an account?</span>
<a href="{% url 'auth-login-cover' %}">
<span>Sign in instead</span>
</a>
</p>
<div class="divider my-6">
<div class="divider-text">or</div>
</div>
<div class="d-flex justify-content-center">
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-facebook me-1_5">
<i class="icon-base ti tabler-brand-facebook-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-twitter me-1_5">
<i class="icon-base ti tabler-brand-twitter-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-github me-1_5">
<i class="icon-base ti tabler-brand-github-filled icon-20px"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
<i class="icon-base ti tabler-brand-google-filled icon-20px"></i>
</a>
</div>
</div>
</div>
<!-- /Register -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,349 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Multi Steps Sign-up - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/bs-stepper/bs-stepper.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/bootstrap-select/bootstrap-select.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/select2/select2.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/bs-stepper/bs-stepper.js' %}"></script>
<script src="{% static 'vendor/libs/select2/select2.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth-multisteps.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="authentication-wrapper authentication-cover authentication-bg">
<!-- Logo -->
<a href="{% url 'index' %}" class="app-brand auth-cover-brand">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
<!-- /Logo -->
<div class="authentication-inner row">
<!-- Left Text -->
<div class="d-none d-lg-flex col-lg-4 align-items-center justify-content-center p-5 position-relative auth-multisteps-bg-height">
<img src="{% static 'img/illustrations/auth-register-multisteps-illustration.png' %}" alt="auth-register-multisteps" class="img-fluid" width="280" />
<img src="{% static 'img/illustrations/auth-register-multisteps-shape-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-register-multisteps" class="platform-bg" data-app-light-img="illustrations/auth-register-multisteps-shape-light.png" data-app-dark-img="illustrations/auth-register-multisteps-shape-dark.png" />
</div>
<!-- /Left Text -->
<!-- Multi Steps Registration -->
<div class="d-flex col-lg-8 align-items-center justify-content-center authentication-bg p-5">
<div class="w-px-700">
<div id="multiStepsValidation" class="bs-stepper border-none shadow-none mt-5">
<div class="bs-stepper-header border-none pt-12 px-0">
<div class="step" data-target="#accountDetailsValidation">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-file-analytics icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Account</span>
<span class="bs-stepper-subtitle">Account Details</span>
</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#personalInfoValidation">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-user icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Personal</span>
<span class="bs-stepper-subtitle">Enter Information</span>
</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#billingLinksValidation">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-credit-card icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title">Billing</span>
<span class="bs-stepper-subtitle">Payment Details</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content px-0">
<form id="multiStepsForm" onSubmit="return false">
<!-- Account Details -->
<div id="accountDetailsValidation" class="content">
<div class="content-header mb-6">
<h4 class="mb-0">Account Information</h4>
<p class="mb-0">Enter Your Account Details</p>
</div>
<div class="row g-6">
<div class="col-sm-6 form-control-validation">
<label class="form-label" for="multiStepsUsername">Username</label>
<input type="text" name="multiStepsUsername" id="multiStepsUsername" class="form-control" placeholder="johndoe" />
</div>
<div class="col-sm-6 form-control-validation">
<label class="form-label" for="multiStepsEmail">Email</label>
<input type="email" name="multiStepsEmail" id="multiStepsEmail" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
</div>
<div class="col-sm-6 form-password-toggle form-control-validation">
<label class="form-label" for="multiStepsPass">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="multiStepsPass" name="multiStepsPass" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multiStepsPass2" />
<span class="input-group-text cursor-pointer" id="multiStepsPass2"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle form-control-validation">
<label class="form-label" for="multiStepsConfirmPass">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="multiStepsConfirmPass" name="multiStepsConfirmPass" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multiStepsConfirmPass2" />
<span class="input-group-text cursor-pointer" id="multiStepsConfirmPass2"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="col-md-12">
<label class="form-label" for="multiStepsURL">Profile Link</label>
<input type="text" name="multiStepsURL" id="multiStepsURL" class="form-control" placeholder="johndoe/profile" aria-label="johndoe" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev" disabled>
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personalInfoValidation" class="content">
<div class="content-header mb-6">
<h4 class="mb-0">Personal Information</h4>
<p class="mb-0">Enter Your Personal Information</p>
</div>
<div class="row g-6">
<div class="col-sm-6 form-control-validation">
<label class="form-label" for="multiStepsFirstName">First Name</label>
<input type="text" id="multiStepsFirstName" name="multiStepsFirstName" class="form-control" placeholder="John" />
</div>
<div class="col-sm-6">
<label class="form-label" for="multiStepsLastName">Last Name</label>
<input type="text" id="multiStepsLastName" name="multiStepsLastName" class="form-control" placeholder="Doe" />
</div>
<div class="col-sm-6">
<label class="form-label" for="multiStepsMobile">Mobile</label>
<div class="input-group">
<span class="input-group-text">US (+1)</span>
<input type="text" id="multiStepsMobile" name="multiStepsMobile" class="form-control multi-steps-mobile" placeholder="202 555 0111" />
</div>
</div>
<div class="col-sm-6">
<label class="form-label" for="multiStepsPincode">Pincode</label>
<input type="text" id="multiStepsPincode" name="multiStepsPincode" class="form-control multi-steps-pincode" placeholder="Postal Code" maxlength="6" />
</div>
<div class="col-md-12 form-control-validation">
<label class="form-label" for="multiStepsAddress">Address</label>
<input type="text" id="multiStepsAddress" name="multiStepsAddress" class="form-control" placeholder="Address" />
</div>
<div class="col-md-12">
<label class="form-label" for="multiStepsArea">Landmark</label>
<input type="text" id="multiStepsArea" name="multiStepsArea" class="form-control" placeholder="Area/Landmark" />
</div>
<div class="col-sm-6 form-control-validation">
<label class="form-label" for="multiStepsCity">City</label>
<input type="text" id="multiStepsCity" class="form-control" placeholder="Jackson" />
</div>
<div class="col-sm-6 form-control-validation">
<label class="form-label" for="multiStepsState">State</label>
<select id="multiStepsState" class="select2 form-select" data-allow-clear="true">
<option value="">Select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev">
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"><span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
</div>
<!-- Billing Links -->
<div id="billingLinksValidation" class="content">
<div class="content-header mb-6">
<h4 class="mb-0">Select Plan</h4>
<p class="mb-0">Select plan as per your requirement</p>
</div>
<!-- Custom plan options -->
<div class="row gap-md-0 gap-4 mb-12">
<div class="col-md">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="basicOption">
<span class="custom-option-body">
<span class="d-block mb-2 h5">Basic</span>
<span>A simple start for start ups & Students</span>
<span class="d-flex justify-content-center mt-2">
<sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
<span class="fw-medium h3 text-primary mb-0">0</span>
<sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/month</sub>
</span>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="basicOption" />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="standardOption">
<span class="custom-option-body">
<span class="d-block mb-2 h5">Standard</span>
<span>For small to medium businesses</span>
<span class="d-flex justify-content-center mt-2">
<sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
<span class="fw-medium h3 text-primary mb-0">99</span>
<sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/month</sub>
</span>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="standardOption" checked />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="enterpriseOption">
<span class="custom-option-body">
<span class="d-block mb-2 h5">Enterprise</span>
<span>Solution for enterprise & organizations</span>
<span class="d-flex justify-content-center mt-2">
<sup class="text-primary h6 fw-normal pt-2 mb-0">$</sup>
<span class="fw-medium h3 text-primary mb-0">499</span>
<sub class="h6 fw-normal mt-3 mb-0 text-body-secondary">/year</sub>
</span>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="enterpriseOption" />
</label>
</div>
</div>
</div>
<!--/ Custom plan options -->
<div class="content-header mb-6">
<h4 class="mb-0">Payment Information</h4>
<p class="mb-0">Enter your card information</p>
</div>
<!-- Credit Card Details -->
<div class="row g-6">
<div class="col-md-12 form-control-validation">
<label class="form-label w-100" for="multiStepsCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="multiStepsCard" class="form-control multi-steps-card" name="multiStepsCard" type="text" placeholder="1356 3215 6548 7898" aria-describedby="multiStepsCardImg" />
<span class="input-group-text cursor-pointer" id="multiStepsCardImg"><span class="card-type"></span></span>
</div>
</div>
<div class="col-md-5">
<label class="form-label" for="multiStepsName">Name On Card</label>
<input type="text" id="multiStepsName" class="form-control" name="multiStepsName" placeholder="John Doe" />
</div>
<div class="col-6 col-md-4">
<label class="form-label" for="multiStepsExDate">Expiry Date</label>
<input type="text" id="multiStepsExDate" class="form-control multi-steps-exp-date" name="multiStepsExDate" placeholder="MM/YY" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="multiStepsCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="multiStepsCvv" class="form-control multi-steps-cvv" name="multiStepsCvv" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer" id="multiStepsCvvHelp"><i class="icon-base ti tabler-help text-body-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between form-control-validation">
<button class="btn btn-label-secondary btn-prev">
<i class="icon-base ti tabler-arrow-left icon-xs me-sm-2 me-0"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button type="submit" class="btn btn-success btn-next btn-submit">Submit</button>
</div>
</div>
<!--/ Credit Card Details -->
</div>
</form>
</div>
</div>
</div>
</div>
<!-- / Multi Steps Registration -->
</div>
</div>
<script>
// Check selected custom option
window.Helpers.initCustomOptionCheck();
</script>
{% endblock content %}

View File

@@ -0,0 +1,77 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Reset Password Basic - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="container-xxl">
<div class="authentication-wrapper authentication-basic container-p-y">
<div class="authentication-inner py-6">
<!-- Reset Password -->
<div class="card">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center mb-6">
<a href="{% url 'index' %}" class="app-brand-link">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
</div>
<!-- /Logo -->
<h4 class="mb-1">Reset Password 🔒</h4>
<p class="mb-6"><span class="fw-medium">Your new password must be different from previously used passwords</span></p>
<form id="formAuthentication" action="{% url 'auth-login-basic' %}">
{% csrf_token %}
<div class="mb-6 form-password-toggle form-control-validation">
<label class="form-label" for="password">New 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" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="mb-6 form-password-toggle form-control-validation">
<label class="form-label" for="confirm-password">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password" class="form-control" name="confirm-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<button class="btn btn-primary d-grid w-100 mb-6">Set new password</button>
<div class="text-center">
<a href="{% url 'auth-login-basic' %}" class="d-flex justify-content-center">
<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
Back to login
</a>
</div>
</form>
</div>
</div>
<!-- /Reset Password -->
</div>
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,82 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Reset Password Cover - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="authentication-wrapper authentication-cover">
<!-- Logo -->
<a href="{% url 'index' %}" class="app-brand auth-cover-brand">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
<!-- /Logo -->
<div class="authentication-inner row m-0">
<!-- /Left Text -->
<div class="d-none d-xl-flex col-xl-8 p-0">
<div class="auth-cover-bg d-flex justify-content-center align-items-center">
<img src="{% static 'img/illustrations/auth-reset-password-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-reset-password-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-reset-password-illustration-light.png" data-app-dark-img="illustrations/auth-reset-password-illustration-dark.png" />
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-reset-password-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
</div>
<!-- /Left Text -->
<!-- Reset Password -->
<div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
<div class="w-px-400 mx-auto mt-12 pt-5">
<h4 class="mb-1">Reset Password 🔒</h4>
<p class="mb-6"><span class="fw-medium">Your new password must be different from previously used passwords</span></p>
<form id="formAuthentication" class="mb-6" action="{% url 'auth-login-cover' %}">
{% csrf_token %}
<div class="mb-6 form-password-toggle form-control-validation">
<label class="form-label" for="password">New 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" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<div class="mb-6 form-password-toggle form-control-validation">
<label class="form-label" for="confirm-password">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password" class="form-control" name="confirm-password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="password" />
<span class="input-group-text cursor-pointer"><i class="icon-base ti tabler-eye-off"></i></span>
</div>
</div>
<button class="btn btn-primary d-grid w-100 mb-6">Set new password</button>
<div class="text-center">
<a href="{% url 'auth-login-cover' %}" class="d-flex justify-content-center">
<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl me-1_5"></i>
Back to login
</a>
</div>
</form>
</div>
</div>
<!-- /Reset Password -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,78 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Two Steps Verifications Basic - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
<script src="{% static 'js/pages-auth-two-steps.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="authentication-wrapper authentication-basic px-6">
<div class="authentication-inner py-6">
<!-- Two Steps Verification -->
<div class="card">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center mb-6">
<a href="{% url 'index' %}" class="app-brand-link">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
</div>
<!-- /Logo -->
<h4 class="mb-1">Two Step Verification 💬</h4>
<p class="text-start mb-6">
We sent a verification code to your mobile. Enter the code from the mobile in the field below.
<span class="fw-medium d-block mt-1 text-heading">******1234</span>
</p>
<p class="mb-0">Type your 6 digit security code</p>
<form id="twoStepsForm" action="{% url 'index' %}">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<div class="auth-input-wrapper d-flex align-items-center justify-content-between numeral-mask-wrapper">
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" autofocus />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
</div>
<!-- Create a hidden field which is combined by 3 fields above -->
<input type="hidden" name="otp" />
</div>
<button class="btn btn-primary d-grid w-100 mb-6">Verify my account</button>
<div class="text-center">
Didn't get the code?
<a href="javascript:void(0);"> Resend </a>
</div>
</form>
</div>
</div>
<!-- / Two Steps Verification -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,84 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Two Steps Verifications Cover - Pages{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/@form-validation/form-validation.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/cleave-zen/cleave-zen.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/popular.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/bootstrap5.js' %}"></script>
<script src="{% static 'vendor/libs/@form-validation/auto-focus.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/pages-auth.js' %}"></script>
<script src="{% static 'js/pages-auth-two-steps.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="authentication-wrapper authentication-cover">
<!-- Logo -->
<a href="{% url 'index' %}" class="app-brand auth-cover-brand">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
<!-- /Logo -->
<div class="authentication-inner row m-0">
<!-- /Left Text -->
<div class="d-none d-xl-flex col-xl-8 p-0">
<div class="auth-cover-bg d-flex justify-content-center align-items-center">
<img src="{% static 'img/illustrations/auth-two-step-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-two-steps-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-two-step-illustration-light.png" data-app-dark-img="illustrations/auth-two-step-illustration-dark.png" />
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-two-steps-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
</div>
<!-- /Left Text -->
<!-- Two Steps Verification -->
<div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
<div class="w-px-400 mx-auto mt-12 mt-5">
<h4 class="mb-1">Two Step Verification 💬</h4>
<p class="text-start mb-6">
We sent a verification code to your mobile. Enter the code from the mobile in the field below.
<span class="fw-medium d-block mt-1 text-heading">******1234</span>
</p>
<p class="mb-0">Type your 6 digit security code</p>
<form id="twoStepsForm" action="{% url 'index' %}">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<div class="auth-input-wrapper d-flex align-items-center justify-content-between numeral-mask-wrapper">
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" autofocus />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
<input type="tel" class="form-control auth-input h-px-50 text-center numeral-mask mx-sm-1 my-2" maxlength="1" />
</div>
<!-- Create a hidden field which is combined by 3 fields above -->
<input type="hidden" name="otp" />
</div>
<button class="btn btn-primary d-grid w-100 mb-6">Verify my account</button>
<div class="text-center">
Didn't get the code?
<a href="javascript:void(0);"> Resend </a>
</div>
</form>
</div>
</div>
<!-- /Two Steps Verification -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,39 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Verify Email Basic - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block content %}
<div class="authentication-wrapper authentication-basic px-6">
<div class="authentication-inner py-6">
<!-- Verify Email -->
<div class="card">
<div class="card-body">
<!-- Logo -->
<div class="app-brand justify-content-center mb-6">
<a href="{% url 'index' %}" class="app-brand-link">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
</div>
<!-- /Logo -->
<h4 class="mb-1">Verify your email ✉️</h4>
<p class="text-start mb-0">Account activation link sent to your email address: <span class="fw-medium">hello@example.com</span> Please follow the link inside to continue.</p>
<a class="btn btn-primary w-100 my-6" href="{% url 'index' %}"> Skip for now </a>
<p class="text-center mb-0">
Didn't get the mail?
<a href="javascript:void(0);"> Resend </a>
</p>
</div>
</div>
<!-- /Verify Email -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,47 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Verify Email Cover - Pages{% endblock %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/page-auth.css' %}" />
{% endblock page_css %}
{% block content %}
<div class="authentication-wrapper authentication-cover">
<!-- Logo -->
<a href="{% url 'index' %}" class="app-brand auth-cover-brand">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo text-heading fw-bold">{% get_theme_variables 'template_name' %}</span>
</a>
<!-- /Logo -->
<div class="authentication-inner row m-0">
<!-- /Left Text -->
<div class="d-none d-xl-flex col-xl-8 p-0">
<div class="auth-cover-bg d-flex justify-content-center align-items-center">
<img src="{% static 'img/illustrations/auth-verify-email-illustration-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-verify-email-cover" class="my-5 auth-illustration" data-app-light-img="illustrations/auth-verify-email-illustration-light.png" data-app-dark-img="illustrations/auth-verify-email-illustration-dark.png" />
<img src="{% static 'img/illustrations/bg-shape-image-' %}{{ COOKIES.theme|default:theme }}.png" alt="auth-verify-email-cover" class="platform-bg" data-app-light-img="illustrations/bg-shape-image-light.png" data-app-dark-img="illustrations/bg-shape-image-dark.png" />
</div>
</div>
<!-- /Left Text -->
<!-- Verify email -->
<div class="d-flex col-12 col-xl-4 align-items-center authentication-bg p-6 p-sm-12">
<div class="w-px-400 mx-auto mt-12 mt-5">
<h4 class="mb-1">Verify your email ✉️</h4>
<p class="text-start mb-0">Account activation link sent to your email address: <span class="fw-medium">hello@example.com</span> Please follow the link inside to continue.</p>
<a class="btn btn-primary w-100 my-6" href="{% url 'index' %}"> Skip for now </a>
<p class="text-center mb-0">
Didn't get the mail?
<a href="javascript:void(0);"> Resend </a>
</p>
</div>
</div>
<!-- / Verify email -->
</div>
</div>
{% endblock content %}