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,83 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Forgot Password - 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/authentication.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>
{% if messages %}
{% for message in messages %}
<div class="alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-danger{% else %}alert-warning{% endif %}" role="alert">
{{ message }}
</div>
{% endfor %}
{% endif %}
<form id="formAuthentication" class="mb-6" action="{% url 'forgot-password' %}" method="post">
{% 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 id="btnSubmit" class="btn btn-primary w-100" type="submit">
<span id="btnText" class="me-1">Send Reset Link</span>
<span id="btnLoader" class="spinner-border spinner-border visually-hidden" role="status" aria-hidden="true"></span>
</button>
</form>
<div class="text-center">
<a href="{% url 'login' %}" 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 - 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/authentication.js' %}"></script>
<script src="{% static 'js/ui-popover.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>
<div class="alert alert-primary small">
<p class="text-caption mb-1"> Admin Email: <strong>admin@demo.com</strong> / Username: <strong>admin</strong>
<span class="cursor-pointer" id="admin-user"><i class="icon-base ti tabler-help icon-xs text-body mb-1" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" title="Admin User" data-bs-content="Can access User, Roles, and Permissions pages. Possesses permissions to View, Update, Delete, and Create transactions on the Transaction Page."></i></span>
</p>
<p class="text-caption mb-1"> Client Email: <strong>client@demo.com</strong> / Username: <strong>client</strong>
<span class="cursor-pointer" id="client-user"><i class="icon-base ti tabler-help icon-xs text-body mb-1" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover focus" title="Client User" data-bs-content="Unable to access User, Roles, and Permissions pages. Limited to viewing the Transaction page exclusively."></i></span>
</p>
<p class="text-caption mb-0">Password: <strong>Pwd_1234</strong></p>
</div>
{% if messages %}
{% for message in messages %}
<div class="alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-danger{% else %}alert-warning{% endif %}" role="alert">
{{ message }}
</div>
{% endfor %}
{% endif %}
<form id="formAuthentication" class="mb-6" action="{% url 'login' %}" method="post">
{% csrf_token %}
<div class="mb-6 form-control-validation">
<label for="email" class="form-label">Email or Username</label>
<input type="email" class="form-control" id="email" name="email-username" value="admin@demo.com" placeholder="Email/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" value="Pwd_1234" 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 'forgot-password' %}">
<p class="mb-0">Forgot Password?</p>
</a>
</div>
</div>
{% if request.GET.next %}
<input type="hidden" name="next" value="{{request.GET.next}}">
{% endif %}
<button class="btn btn-primary d-grid w-100" type="submit">Sign in</button>
</form>
<p class="text-center">
<span>New on our platform?</span>
<a href="{% url 'register' %}">
<span>Create an account</span>
</a>
</p>
</div>
</div>
<!-- /Login -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,105 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Register - 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/authentication.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>
{% if messages %}
{% for message in messages %}
<div class="alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-danger{% else %}alert-warning{% endif %}" role="alert">
{{ message }}
</div>
{% endfor %}
{% endif %}
<form id="formAuthentication" class="mb-6" action="{% url 'register' %}" method="post">
{% 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 id="btnSubmit" class="btn btn-primary w-100" type="submit">
<span id="btnText" class="me-1">Sign up</span>
<span id="btnLoader" class="spinner-border spinner-border-sm visually-hidden" role="status" aria-hidden="true"></span>
</button>
</form>
<p class="text-center">
<span>Already have an account?</span>
<a href="{% url 'login' %}">
<span>Sign in instead</span>
</a>
</p>
</div>
</div>
<!-- /Register -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,89 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Reset Password - 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/authentication.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>
{% if messages %}
{% for message in messages %}
<div class="alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-danger{% else %}alert-warning{% endif %}" role="alert">
{{ message }}
</div>
{% endfor %}
{% endif %}
<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" method="post">
{% 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" type="submit">Set new password</button>
<div class="text-center">
<a href="{% url 'login' %}">
<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,81 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Verify Email - Pages{% endblock %}
{% 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/auth-click-loader.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-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>
{% if request.user.is_authenticated %}
<p class="text-start mb-4">
Verification link will be send to this email: {{request.user.email}}.
</p>
{% else %}
<p class="text-start">
Verification link send to your email address.
</p>
{% endif %}
{% if messages %}
{% for message in messages %}
<div class="alert {% if message.tags == 'success' %}alert-success{% elif message.tags == 'error' %}alert-danger{% else %}alert-warning{% endif %}" role="alert">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% if request.user.is_authenticated %}
<a id="btnSubmit" class="btn btn-primary w-100 my-2" href="{% url 'send-verification' %}">
<span id="btnText" class="me-1">Verify Email</span>
<span id="btnLoader" class="spinner-border spinner-border-sm visually-hidden" role="status" aria-hidden="true"></span>
</a>
<a class="btn btn-primary w-100 my-2" href="{% url 'index' %}">
Back
</a>
{% else %}
<a class="btn btn-primary w-100 my-3" href="{% url 'login' %}">
Skip for now & Login
</a>
<p class="text-center">Didn't get the mail?
<a id="btnSubmit" class="text-center" href="{% url 'send-verification' %}">
<span id="btnText" class="me-1">Resend</span>
<span id="btnLoader" class="spinner-border spinner-border-sm visually-hidden" role="status" aria-hidden="true"></span>
</a>
</p>
{% endif %}
</div>
</div>
<!-- / Verify email -->
</div>
</div>
{% endblock content %}

View File

@@ -0,0 +1,22 @@
from web_project.template_helpers.theme import TemplateHelper
"""
This is an entry and Bootstrap class for the theme level.
The init() function will be called in web_project/__init__.py
"""
class TemplateBootstrapLayoutBlank:
def init(context):
context.update(
{
"layout": "blank",
"content_layout": "wide",
"display_customizer": False,
}
)
# map_context according to updated context values
TemplateHelper.map_context(context)
return context

View File

@@ -0,0 +1,23 @@
from web_project.template_helpers.theme import TemplateHelper
"""
This is an entry and Bootstrap class for the theme level.
The init() function will be called in web_project/__init__.py
"""
class TemplateBootstrapLayoutFront:
def init(context):
context.update(
{
"layout": "front",
"is_front": True,
"display_customizer": True,
"content_layout": "wide",
"navbar_type": "fixed",
}
)
# map_context according to updated context values
TemplateHelper.map_context(context)
return context

View File

@@ -0,0 +1,42 @@
from django.conf import settings
import json
from web_project.template_helpers.theme import TemplateHelper
menu_file_path = settings.BASE_DIR / "templates" / "layout" / "partials" / "menu" / "horizontal" / "json" / "horizontal_menu.json"
"""
This is an entry and Bootstrap class for the theme level.
The init() function will be called in web_project/__init__.py
"""
class TemplateBootstrapLayoutHorizontal:
def init(context):
context.update(
{
"layout": "horizontal",
"is_navbar": True,
"navbar_full": True,
"is_menu": True,
"menu_horizontal": True,
"is_footer": True,
"navbar_detached": False,
}
)
# map_context according to updated context values
TemplateHelper.map_context(context)
# Init menu data and update context
TemplateBootstrapLayoutHorizontal.init_menu_data(context)
return context
def init_menu_data(context):
# Load the menu data from the JSON file
menu_data = json.load(menu_file_path.open()) if menu_file_path.exists() else []
# Updated context with menu_data
context.update({"menu_data": menu_data})

View File

@@ -0,0 +1,40 @@
from django.conf import settings
import json
from web_project.template_helpers.theme import TemplateHelper
menu_file_path = settings.BASE_DIR / "templates" / "layout" / "partials" / "menu" / "vertical" / "json" / "vertical_menu.json"
"""
This is an entry and Bootstrap class for the theme level.
The init() function will be called in web_project/__init__.py
"""
class TemplateBootstrapLayoutVertical:
def init(context):
context.update(
{
"layout": "vertical",
"content_navbar": True,
"is_navbar": True,
"is_menu": True,
"is_footer": True,
"navbar_detached": True,
}
)
# map_context according to updated context values
TemplateHelper.map_context(context)
TemplateBootstrapLayoutVertical.init_menu_data(context)
return context
def init_menu_data(context):
# Load the menu data from the JSON file
menu_data = json.load(menu_file_path.open()) if menu_file_path.exists() else []
# Updated context with menu_data
context.update({"menu_data": menu_data})

View File

@@ -0,0 +1,21 @@
from web_project.template_helpers.theme import TemplateHelper
"""
This is an entry and Bootstrap class for the theme level.
The init() function will be called in web_project/__init__.py
"""
class TemplateBootstrapSystem:
def init(context):
context.update(
{
"layout": "blank",
"content_layout": "wide",
"display_customizer": False,
}
)
# map_context according to updated context values
TemplateHelper.map_context(context)
return context

View File

@@ -0,0 +1,11 @@
{% extends 'layout/master.html' %}
{% block layout %}
<!-- Content: Start -->
{% block content %}
{% endblock content %}
<!-- Content: End -->
{% endblock layout %}

View File

@@ -0,0 +1,23 @@
{% extends 'layout/master.html' %}
{% block layout %}
{% if is_navbar %}
<!-- Navbar: Start -->
{% include "../layout/partials/navbar/navbar_front.html" %}
<!-- Navbar: End -->
{% endif %}
<!-- Content:Start -->
{% block content %}
{% endblock content %}
<!-- Content: End -->
{% if is_footer %}
<!-- Footer: Start -->
{% include "../layout/partials/footer/footer_front.html" %}
<!-- Footer: End -->
{% endif %}
{% endblock layout %}

View File

@@ -0,0 +1,65 @@
{% extends 'layout/master.html' %}
{% block layout %}
<!-- Layout wrapper: Start -->
<div class="layout-wrapper layout-navbar-full layout-horizontal layout-without-menu">
<div class="layout-container">
{% if is_navbar %}
<!-- Navbar: Start -->
{% include "../layout/partials/navbar/navbar.html" %}
<!-- Navbar: End -->
{% endif %}
<!-- Layout page: Start -->
<div class="layout-page">
<!-- Content wrapper: Start -->
<div class="content-wrapper">
{% if is_menu %}
<!-- Menu: Start -->
{% include "../layout/partials/menu/horizontal/horizontal_menu.html" %}
<!-- Menu: End -->
{% endif %}
<!-- Content: Start -->
{% if is_flex %}
<div class="{{container_class}} d-flex align-items-stretch flex-grow-1 p-0">
{% else %}
<div class="{{container_class}} flex-grow-1 container-p-y">
{% endif %}
{% block content %}
{% endblock content %}
</div>
<!-- / Content: End -->
{% if is_footer %}
<!-- Footer: Start -->
{% include "../layout/partials/footer/footer.html" %}
<!-- Footer: End -->
{% endif %}
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper: End -->
</div>
<!-- / Layout page: End -->
</div>
{% if is_menu %}
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
{% endif %}
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!-- Layout wrapper: End -->
{% endblock layout %}

View File

@@ -0,0 +1,61 @@
{% extends 'layout/master.html' %}
{% block layout %}
<!-- Layout wrapper: Start -->
<div class="layout-wrapper layout-content-navbar {{ is_menu|yesno:',layout-without-menu' }}">
<div class="layout-container">
{% if is_menu %}
<!-- Menu: Start -->
{% include "../layout/partials/menu/vertical/vertical_menu.html" %}
<!-- Menu: End -->
{% endif %}
<!-- Layout page: Start -->
<div class="layout-page">
{% if is_navbar %}
<!-- Navbar: Start -->
{% include "../layout/partials/navbar/navbar.html" %}
<!-- Navbar: End -->
{% endif %}
<!-- Content wrapper: Start -->
<div class="content-wrapper">
<!-- Content: Start -->
{% if is_flex %}
<div class="{{container_class}} d-flex align-items-stretch flex-grow-1 p-0">
{% else %}
<div class="{{container_class}} flex-grow-1 container-p-y">
{% endif %}
{% block content %}
{% endblock content %}
</div>
<!-- / Content: End -->
{% if is_footer %}
<!-- Footer: Start -->
{% include "../layout/partials/footer/footer.html" %}
<!-- Footer: End -->
{% endif %}
<div class="content-backdrop fade"></div>
</div>
<!--/ Content wrapper: End -->
</div>
<!-- / Layout page: End -->
</div>
{% if is_menu %}
<!-- Overlay -->
<div class="layout-overlay layout-menu-toggle"></div>
{% endif %}
<!-- Drag Target Area To SlideIn Menu On Small Screens -->
<div class="drag-target"></div>
</div>
<!-- Layout wrapper: End -->
{% endblock layout %}

View File

@@ -0,0 +1,49 @@
{% load static %}
<!DOCTYPE html>
<html lang="en" class="{{navbar_type_class}} {{header_type_class}} {{menu_fixed_class}} {{menu_collapsed_class}} {{footer_fixed_class}} {{display_customizer_class}} {{content_layout_class}}" dir="{{text_direction_value}}" data-skin="{{skins}}" data-bs-theme="{{theme}}" data-assets-path="{% static '/' %}" data-base-url="{{url}}" data-framework="django" data-template="{{ menu_horizontal|yesno:'horizontal,vertical' }}-menu-{{ is_front|yesno:'front,' }}-{{ skins }}-{{ theme}}">
<head>
<title>{% block title %}{% endblock title %} | {% get_theme_variables 'template_name' %} - {% get_theme_variables 'template_suffix' %}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="description" content="" />
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="{% static 'img/favicon/favicon.ico' %}" />
<!-- Include the styles partial -->
{% include is_front|yesno:"./partials/styles_front.html,./partials/styles.html" %}
{% block vendor_css %}{% endblock vendor_css %}
<!--Page CSS-->
{% block page_css %}{% endblock page_css %}
<!-- Include the scripts partial (required ) -->
{% include is_front|yesno:"./partials/scripts_includes_front.html,./partials/scripts_includes.html" %}
</head>
<body>
<!-- beautify ignore:end -->
{% block layout %}
{% endblock layout %}
{% include is_front|yesno:"./partials/scripts_front.html,./partials/scripts.html" %}
<!--Vendors Javascript-->
{% block vendor_js %} {% endblock vendor_js %}
<!--Page Javascript-->
{% block page_js %} {% endblock page_js %}
</body>
</html>

View File

@@ -0,0 +1,20 @@
<!-- Footer -->
<footer class="content-footer footer bg-footer-theme">
<div class="{{container_class}}">
<div class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
<div class="text-body">
© <script>
document.write(new Date().getFullYear())
</script>, made with ❤️ by <a href="{% get_theme_variables 'creator_url' %}" target="_blank" class="footer-link">{% get_theme_variables 'creator_name' %}</a>
</div>
<div class="d-none d-lg-inline-block">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-4" target="_blank">License</a>
<a href="{% get_theme_variables 'more_themes' %}" target="_blank" class="footer-link me-4">More Themes</a>
<a href="{% get_theme_variables 'documentation' %}" target="_blank" class="footer-link me-4">Documentation</a>
<a href="{% get_theme_variables 'support' %}" target="_blank" class="footer-link d-none d-sm-inline-block">Support</a>
</div>
</div>
</div>
</footer>
<!-- / Footer -->

View File

@@ -0,0 +1,124 @@
<!-- Footer: Start -->
<footer class="landing-footer bg-body footer-text">
<div class="footer-top position-relative overflow-hidden z-1">
<img src="{% static 'img/front-pages/backgrounds/footer-bg.png' %}" alt="footer bg" class="footer-bg banner-bg-img z-n1" />
<div class="container">
<div class="row gx-0 gy-6 g-lg-10">
<div class="col-lg-5">
<a href="{% url 'landing-page' %}" class="app-brand-link mb-6">
<span class="app-brand-logo demo">
{% include 'partials/logo.html' %}
</span>
<span class="app-brand-text demo footer-link fw-bold ms-2 ps-1">{% get_theme_variables 'template_name' %}</span>
</a>
<p class="footer-text footer-logo-description mb-6">Most developer friendly & highly customisable Admin Dashboard Template.</p>
<form class="footer-form">
<label for="footer-email" class="small">Subscribe to newsletter</label>
<div class="d-flex mt-1">
<input type="email" class="form-control rounded-0 rounded-start-bottom rounded-start-top" id="footer-email" placeholder="Your email" />
<button type="submit" class="btn btn-primary shadow-none rounded-0 rounded-end-bottom rounded-end-top">Subscribe</button>
</div>
</form>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<h6 class="footer-title mb-6">Demos</h6>
<ul class="list-unstyled">
<li class="mb-4">
<a href="../demo-1/" target="_blank" class="footer-link">Vertical Layout</a>
</li>
<li class="mb-4">
<a href="../demo-5/" target="_blank" class="footer-link">Horizontal Layout</a>
</li>
<li class="mb-4">
<a href="../demo-2/" target="_blank" class="footer-link">Bordered Layout</a>
</li>
<li class="mb-4">
<a href="../demo-3/" target="_blank" class="footer-link">Semi Dark Layout</a>
</li>
<li class="mb-4">
<a href="../demo-4/" target="_blank" class="footer-link">Dark Layout</a>
</li>
</ul>
</div>
<div class="col-lg-2 col-md-4 col-sm-6">
<h6 class="footer-title mb-6">Pages</h6>
<ul class="list-unstyled">
<li class="mb-4">
<a href="{% url 'pricing-page' %}" class="footer-link">Pricing</a>
</li>
<li class="mb-4">
<a href="{% url 'payment-page' %}" class="footer-link">Payment<span class="badge bg-primary ms-2">New</span></a>
</li>
<li class="mb-4">
<a href="{% url 'checkout-page' %}" class="footer-link">Checkout</a>
</li>
<li class="mb-4">
<a href="{% url 'help-center-landing' %}" class="footer-link">Help Center</a>
</li>
<li class="mb-4">
<a href="{% url 'auth-login-cover' %}" target="_blank" class="footer-link">Login/Register</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-4">
<h6 class="footer-title mb-6">Download our app</h6>
<a href="javascript:void(0);" class="d-block mb-4"><img src="{% static 'img/front-pages/landing-page/apple-icon.png' %}" alt="apple icon" /></a>
<a href="javascript:void(0);" class="d-block"><img src="{% static 'img/front-pages/landing-page/google-play-icon.png' %}" alt="google play icon" /></a>
</div>
</div>
</div>
</div>
<div class="footer-bottom py-3 py-md-5">
<div class="container d-flex flex-wrap justify-content-between flex-md-row flex-column text-center text-md-start">
<div class="mb-2 mb-md-0">
<span class="footer-bottom-text"
<script>
document.write(new Date().getFullYear());
</script>
</span>
<a href="{% get_theme_variables 'creator_url' %}" target="_blank" class="fw-medium text-white">{% get_theme_variables 'creator_name' %},</a>
<span class="footer-bottom-text"> Made with ❤️ for a better web.</span>
</div>
<div>
<a href="{% get_theme_variables 'github_url' %}" class="me-1 text-white" target="_blank">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.7184 2.19556C6.12757 2.19556 2.40674 5.91639 2.40674 10.5072C2.40674 14.1789 4.78757 17.2947 8.0909 18.3947C8.50674 18.4697 8.65674 18.2139 8.65674 17.9939C8.65674 17.7964 8.65007 17.2731 8.64757 16.5806C6.33507 17.0822 5.84674 15.4656 5.84674 15.4656C5.47007 14.5056 4.92424 14.2497 4.92424 14.2497C4.17007 13.7339 4.98174 13.7456 4.98174 13.7456C5.81674 13.8039 6.25424 14.6022 6.25424 14.6022C6.9959 15.8722 8.2009 15.5056 8.67257 15.2931C8.7484 14.7556 8.96507 14.3889 9.20174 14.1814C7.35674 13.9722 5.41674 13.2589 5.41674 10.0731C5.41674 9.16722 5.74091 8.42389 6.27007 7.84389C6.1859 7.63306 5.89841 6.78722 6.35257 5.64389C6.35257 5.64389 7.05007 5.41972 8.63757 6.49472C9.31557 6.31028 10.0149 6.21614 10.7176 6.21472C11.4202 6.21586 12.1196 6.31001 12.7976 6.49472C14.3859 5.41889 15.0826 5.64389 15.0826 5.64389C15.5367 6.78722 15.2517 7.63306 15.1651 7.84389C15.6984 8.42389 16.0184 9.16639 16.0184 10.0731C16.0184 13.2672 14.0767 13.9689 12.2251 14.1747C12.5209 14.4314 12.7876 14.9381 12.7876 15.7131C12.7876 16.8247 12.7776 17.7214 12.7776 17.9939C12.7776 18.2164 12.9259 18.4747 13.3501 18.3931C16.6517 17.2914 19.0301 14.1781 19.0301 10.5072C19.0301 5.91639 15.3092 2.19556 10.7184 2.19556Z"
fill="currentColor" />
</svg>
</a>
<a href="{% get_theme_variables 'facebook_url' %}" class="me-1 text-white" target="_blank">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8609 18.0262V11.1962H14.1651L14.5076 8.52204H11.8609V6.81871C11.8609 6.04704 12.0759 5.51871 13.1834 5.51871H14.5868V3.13454C13.904 3.06136 13.2176 3.02603 12.5309 3.02871C10.4943 3.02871 9.09593 4.27204 9.09593 6.55454V8.51704H6.80676V11.1912H9.10093V18.0262H11.8609Z" fill="currentColor" />
</svg>
</a>
<a href="{% get_theme_variables 'twitter_url' %}" class="me-1 text-white" target="_blank">
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.0576 7.19293C17.0684 7.33876 17.0684 7.48376 17.0684 7.62876C17.0684 12.0663 13.6909 17.1796 7.5184 17.1796C5.61674 17.1796 3.85007 16.6288 2.3634 15.6721C2.6334 15.7029 2.8934 15.7138 3.17424 15.7138C4.68506 15.7174 6.15311 15.2122 7.34174 14.2796C6.64125 14.2669 5.96222 14.0358 5.39943 13.6185C4.83665 13.2013 4.41822 12.6187 4.20257 11.9521C4.41007 11.9829 4.6184 12.0038 4.83674 12.0038C5.13757 12.0038 5.44007 11.9621 5.7209 11.8896C4.9607 11.7361 4.27713 11.3241 3.78642 10.7235C3.29571 10.1229 3.02815 9.37097 3.02924 8.59543V8.55376C3.47674 8.80293 3.9959 8.95876 4.5459 8.9796C4.08514 8.67342 3.70734 8.25795 3.44619 7.77026C3.18504 7.28256 3.04866 6.73781 3.04924 6.1846C3.04924 5.56126 3.21507 4.9896 3.5059 4.49126C4.34935 5.52878 5.40132 6.37756 6.59368 6.98265C7.78604 7.58773 9.0922 7.93561 10.4276 8.00376C10.3759 7.75376 10.3442 7.4946 10.3442 7.2346C10.344 6.79373 10.4307 6.35715 10.5993 5.9498C10.7679 5.54245 11.0152 5.17233 11.3269 4.86059C11.6386 4.54885 12.0088 4.30161 12.4161 4.133C12.8235 3.96438 13.26 3.87771 13.7009 3.87793C14.6676 3.87793 15.5401 4.28293 16.1534 4.93793C16.9049 4.79261 17.6255 4.51828 18.2834 4.1271C18.0329 4.90278 17.5082 5.56052 16.8076 5.9771C17.4741 5.90108 18.1254 5.72581 18.7401 5.4571C18.281 6.12635 17.7122 6.71322 17.0576 7.19293Z"
fill="currentColor" />
</svg>
</a>
<a href="{% get_theme_variables 'instagram_url' %}" class="text-white" target="_blank">
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1833_185630)">
<path
d="M17.5869 6.33973C17.5774 5.62706 17.444 4.9215 17.1926 4.25456C16.9747 3.69202 16.6418 3.18112 16.2152 2.75453C15.7886 2.32793 15.2776 1.995 14.7151 1.77703C14.0568 1.5299 13.3613 1.39627 12.6582 1.38183C11.753 1.34137 11.466 1.33008 9.16819 1.33008C6.87039 1.33008 6.57586 1.33008 5.67725 1.38183C4.97451 1.39637 4.27932 1.53 3.62127 1.77703C3.05863 1.99485 2.54765 2.32772 2.12103 2.75434C1.69442 3.18096 1.36155 3.69193 1.14373 4.25456C0.896101 4.91242 0.76276 5.60776 0.749471 6.31056C0.70901 7.2167 0.696777 7.50368 0.696777 9.8015C0.696777 12.0993 0.696777 12.3928 0.749471 13.2924C0.763585 13.9963 0.89626 14.6907 1.14373 15.3503C1.36192 15.9128 1.69503 16.4236 2.1218 16.85C2.54855 17.2765 3.05957 17.6091 3.6222 17.8269C4.27846 18.084 4.97377 18.2272 5.67819 18.2504C6.58433 18.2908 6.87133 18.303 9.16913 18.303C11.4669 18.303 11.7615 18.303 12.6601 18.2504C13.3632 18.2365 14.0587 18.1032 14.717 17.8561C15.2794 17.6378 15.7902 17.3048 16.2167 16.8782C16.6433 16.4517 16.9763 15.941 17.1945 15.3785C17.442 14.7198 17.5746 14.0254 17.5888 13.3207C17.6293 12.4155 17.6414 12.1285 17.6414 9.82973C17.6396 7.53191 17.6396 7.24021 17.5869 6.33973ZM9.16255 14.1468C6.75935 14.1468 4.81251 12.2 4.81251 9.79679C4.81251 7.39359 6.75935 5.44676 9.16255 5.44676C10.3163 5.44676 11.4227 5.90506 12.2385 6.72085C13.0543 7.53664 13.5126 8.64309 13.5126 9.79679C13.5126 10.9505 13.0543 12.057 12.2385 12.8727C11.4227 13.6885 10.3163 14.1468 9.16255 14.1468ZM13.6857 6.3002C13.5525 6.30033 13.4206 6.27417 13.2974 6.22325C13.1743 6.17231 13.0624 6.09759 12.9682 6.00338C12.874 5.90917 12.7992 5.79729 12.7483 5.67417C12.6974 5.55105 12.6712 5.41909 12.6713 5.28585C12.6713 5.15271 12.6976 5.02087 12.7485 4.89786C12.7994 4.77485 12.8742 4.66308 12.9683 4.56893C13.0625 4.47479 13.1743 4.4001 13.2973 4.34915C13.4202 4.2982 13.5521 4.27197 13.6853 4.27197C13.8184 4.27197 13.9503 4.2982 14.0732 4.34915C14.1962 4.4001 14.3081 4.47479 14.4022 4.56893C14.4963 4.66308 14.571 4.77485 14.622 4.89786C14.6729 5.02087 14.6991 5.15271 14.6991 5.28585C14.6991 5.84666 14.2456 6.3002 13.6857 6.3002Z"
fill="currentColor" />
<path d="M9.16296 12.6226C10.7236 12.6226 11.9887 11.3575 11.9887 9.79688C11.9887 8.23629 10.7236 6.97119 9.16296 6.97119C7.60238 6.97119 6.33728 8.23629 6.33728 9.79688C6.33728 11.3575 7.60238 12.6226 9.16296 12.6226Z" fill="currentColor" />
</g>
<defs>
<clipPath id="clip0_1833_185630">
<rect width="16.9412" height="18" fill="currentColor" transform="translate(0.696777 0.528809)" />
</clipPath>
</defs>
</svg>
</a>
</div>
</div>
</div>
</footer>
<!-- Footer: End -->

View File

@@ -0,0 +1,10 @@
<aside id="layout-menu" class="layout-menu-horizontal menu-horizontal menu flex-grow-0">
<div class="{{container_class}} d-flex h-100">
<ul class="menu-inner">
{% for item in menu_data.menu %}
{% comment %} Menu Item {% endcomment %}
{% include './partials/menu_item_template.html' with item=item %}
{% endfor %}
</ul>
</div>
</aside>

View File

@@ -0,0 +1,17 @@
{% load i18n %}
{% with is_group=item.submenu|filter_by_url:request %}
{% if not item.permission or request.user|has_permission:item.permission %}
<li class="menu-item {% if is_group %}active{% endif %}">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="{{ item.icon }}"></i>
<div>{% trans item.name %}</div>
</a>
<ul class="menu-sub">
{% for sub_item in item.submenu %}
{% include './menu_item_template.html' with item=sub_item %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endwith %}

View File

@@ -0,0 +1,7 @@
{% if item.submenu %}
{% comment %} Menu Item has Submenu (Collapsible) {% endcomment %}
{% include './menu_collapsible_template.html' with item=item %}
{% else %}
{% comment %} Menu Item has link {% endcomment %}
{% include './menu_link_template.html' with item=item %}
{% endif %}

View File

@@ -0,0 +1,12 @@
{% load i18n %}
{% if item %}
{% if not item.permission or request.user|has_permission:item.permission %}
<li class="menu-item {% if item.url == request.resolver_match.url_name or item.url == request.path %}active{% endif %}">
<a href="{% if item.external == True %}{{ item.url }}{% else %}{% url item.url %}{% endif %}" class="menu-link" {% if item.target == "_blank" %}target="_blank" {% endif %}>
<i class="{{ item.icon }}"></i>
<div>{% trans item.name %}</div>
</a>
</li>
{% endif %}
{% endif %}

View File

@@ -0,0 +1,20 @@
{% load i18n %}
{% with is_group=item.submenu|filter_by_url:request %}
{% if not item.permission or request.user|has_permission:item.permission %}
<li class="menu-item {% if is_group %}active open{% endif %}">
<a href="javascript:void(0);" class="menu-link menu-toggle">
<i class="{{ item.icon }}"></i>
<div>{% trans item.name %}</div>
{% if item.badge %}
<div class="badge bg-{{ item.badge.0 }} rounded-pill ms-auto">{{ item.badge.1 }}</div>
{% endif %}
</a>
<ul class="menu-sub">
{% for sub_item in item.submenu %}
{% include './menu_item_template.html' with item=sub_item %}
{% endfor %}
</ul>
</li>
{% endif %}
{% endwith %}

View File

@@ -0,0 +1,7 @@
{% load i18n %}
{% if not item.permission or request.user|has_permission:item.permission %}
<li class="menu-header small text-uppercase">
<span class="menu-header-text">{% trans header_text %}</span>
</li>
{% endif %}

View File

@@ -0,0 +1,7 @@
{% if item.submenu %}
{% comment %} Menu Item has Submenu (Collapsible) {% endcomment %}
{% include './menu_collapsible_template.html' with item=item %}
{% else %}
{% comment %} Menu Item has link{% endcomment %}
{% include './menu_link_template.html' with item=item %}
{% endif %}

View File

@@ -0,0 +1,15 @@
{% load i18n %}
{% if item %}
{% if not item.permission or request.user|has_permission:item.permission %}
<li class="menu-item {% if item.url == request.resolver_match.url_name or item.url == request.path %}active{% endif %}">
<a href="{% if item.external == True %}{{ item.url }}{% else %}{% url item.url %}{% endif %}" class="menu-link" {% if item.target == "_blank" %}target="_blank" {% endif %}>
<i class="{{ item.icon }}"></i>
<div>{% trans item.name %}</div>
{% if item.badge %}
<div class="badge bg-{{ item.badge.0 }} rounded-pill ms-auto">{{ item.badge.1 }}</div>
{% endif %}
</a>
</li>
{% endif %}
{% endif %}

View File

@@ -0,0 +1,37 @@
<aside id="layout-menu" class="layout-menu menu-vertical menu bg-menu-theme">
<!-- ! Hide app brand if navbar-full -->
{% if not navbar_full %}
<div class="app-brand demo">
<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 menu-text fw-bold ms-3">{% get_theme_variables 'template_name' %}</span>
</a>
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
<i class="icon-base ti menu-toggle-icon d-none d-xl-block"></i>
<i class="icon-base ti tabler-x d-block d-xl-none"></i>
</a>
</div>
{% endif %}
<div class="menu-inner-shadow"></div>
<ul class="menu-inner py-1">
{% for item in menu_data.menu %}
{% comment %} Menu Header {% endcomment %}
{% if "menu_header" in item %}
{% include './partials/menu_header_template.html' with header_text=item.menu_header %}
{% else %}
{% comment %} Menu Item {% endcomment %}
{% include './partials/menu_item_template.html' with item=item %}
{% endif %}
{% endfor %}
</ul>
</aside>

View File

@@ -0,0 +1,508 @@
{% load i18n %}
{% load static %}
{% if navbar_detached %}
<nav class="layout-navbar {{container_class}} navbar navbar-expand-xl {{navbar_detached_class}} align-items-center bg-navbar-theme" id="layout-navbar">
{% endif %}
{# Horizontal layout (navbar not detached) #}
{% if not navbar_detached %}
<nav class="layout-navbar navbar navbar-expand-xl align-items-center" id="layout-navbar">
<div class="{{container_class}}">
{% endif %}
<!-- Brand demo (display only for navbar-full and hide on below xl) -->
{% if navbar_full %}
<div class="navbar-brand app-brand demo d-none d-xl-flex py-0 me-4 ms-0">
<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 menu-text fw-bold text-heading">{% get_theme_variables 'template_name' %}</span>
</a>
{% if menu_horizontal %}
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto d-xl-none">
<i class="icon-base ti tabler-x icon-sm d-flex align-items-center justify-content-center"></i>
</a>
{% endif %}
</div>
{% endif %}
<!-- ! Not required for layout-without-menu -->
{% if not navbar_hide_toggle %}
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 {{ menu_horizontal|yesno:'d-xl-none,' }} {{ content_navbar|yesno:'d-xl-none,' }}">
<a class="nav-item nav-link px-0 me-xl-6" href="javascript:void(0)">
<i class="icon-base ti tabler-menu-2 icon-md"></i>
</a>
</div>
{% endif %}
<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
{% if not menu_horizontal %}
<!-- Search -->
<div class="navbar-nav align-items-center">
<div class="nav-item navbar-search-wrapper px-md-0 px-2 mb-0">
<a class="nav-item nav-link search-toggler d-flex align-items-center px-0" href="javascript:void(0);">
<span class="d-inline-block text-body-secondary fw-normal" id="autocomplete"></span>
</a>
</div>
</div>
<!-- /Search -->
{% endif %}
<ul class="navbar-nav flex-row align-items-center ms-auto">
<!--/ Language -->
{% if menu_horizontal %}
<!-- Search -->
<li class="nav-item navbar-search-wrapper btn btn-text-secondary btn-icon rounded-pill">
<a class="nav-item nav-link search-toggler px-0" href="javascript:void(0);">
<span class="d-inline-block text-body-secondary fw-normal" id="autocomplete"></span>
</a>
</li>
<!-- /Search -->
{% endif %}
<!-- Language -->
<li class="nav-item dropdown-language dropdown me-2 me-xl-0">
<a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
<i class="icon-base ti tabler-language icon-22px text-heading"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active{% endif %}" href="{% current_url request %}" data-language="en" data-text-direction="ltr">
<span class="align-middle">{% trans "English"%}</span>
</a>
</li>
<li>
<a class="dropdown-item {% if LANGUAGE_CODE == 'fr' %}active{% endif %}" href="{% current_url request %}" data-language="fr" data-text-direction="ltr">
<span class="align-middle">{% trans "French"%}</span>
</a>
</li>
<li>
<a class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active{% endif %}" href="{% current_url request %}" data-language="ar" data-text-direction="rtl">
<span class="align-middle">{% trans "Arabic"%}</span>
</a>
</li>
<li>
<a class="dropdown-item {% if LANGUAGE_CODE == 'de' %}active{% endif %}" href="{% current_url request %}" data-language="de" data-text-direction="ltr">
<span class="align-middle">{% trans "German"%}</span>
</a>
</li>
</ul>
</li>
<!--/ Language -->
{% if has_customizer %}
<!-- Style Switcher -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill" id="nav-theme" href="javascript:void(0);" data-bs-toggle="dropdown">
<i class="icon-base ti tabler-sun icon-22px theme-icon-active text-heading"></i>
<span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text">
<li>
<button type="button" class="dropdown-item align-items-center active" data-bs-theme-value="light" aria-pressed="false">
<span><i class="icon-base ti tabler-sun icon-22px me-3" data-icon="sun"></i>Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item align-items-center" data-bs-theme-value="dark" aria-pressed="true">
<span><i class="icon-base ti tabler-moon-stars icon-22px me-3" data-icon="moon-stars"></i>Dark</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item align-items-center" data-bs-theme-value="system" aria-pressed="false">
<span><i class="icon-base ti tabler-device-desktop-analytics icon-22px me-3" data-icon="device-desktop-analytics"></i>System</span>
</button>
</li>
</ul>
</li>
<!--/ Style Switcher -->
{% endif %}
<!-- Quick links -->
<li class="nav-item dropdown-shortcuts navbar-dropdown dropdown">
<a class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<i class="icon-base ti tabler-layout-grid-add icon-22px text-heading"></i>
</a>
<div class="dropdown-menu dropdown-menu-end p-0">
<div class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h6 class="mb-0 me-auto">Shortcuts</h6>
<a href="javascript:void(0)" class="dropdown-shortcuts-add py-2 btn btn-text-secondary rounded-pill btn-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Add shortcuts"><i class="icon-base ti tabler-plus icon-20px text-heading"></i></a>
</div>
</div>
<div class="dropdown-shortcuts-list scrollable-container">
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-calendar icon-26px text-heading"></i>
</span>
<a href="{% url 'app-calendar' %}" class="stretched-link">Calendar</a>
<small>Appointments</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-file-dollar icon-26px text-heading"></i>
</span>
<a href="{% url 'app-invoice-list' %}" class="stretched-link">Invoice App</a>
<small>Manage Accounts</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-user icon-26px text-heading"></i>
</span>
<a href="{% url 'app-user-list' %}" class="stretched-link">User App</a>
<small>Manage Users</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-users icon-26px text-heading"></i>
</span>
<a href="{% url 'app-access-roles' %}" class="stretched-link">Role Management</a>
<small>Permission</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-device-desktop-analytics icon-26px text-heading"></i>
</span>
<a href="{% url 'index' %}" class="stretched-link">Dashboard</a>
<small>User Dashboard</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-settings icon-26px text-heading"></i>
</span>
<a href="{% url 'pages-account-settings-security' %}" class="stretched-link">Setting</a>
<small>Account Settings</small>
</div>
</div>
<div class="row row-bordered overflow-visible g-0">
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-help-circle icon-26px text-heading"></i>
</span>
<a href="{% url 'pages-faq' %}" class="stretched-link">FAQs</a>
<small>FAQs & Articles</small>
</div>
<div class="dropdown-shortcuts-item col">
<span class="dropdown-shortcuts-icon rounded-circle mb-3">
<i class="icon-base ti tabler-square icon-26px text-heading"></i>
</span>
<a href="{% url 'modal-examples' %}" class="stretched-link">Modals</a>
<small>Useful Popups</small>
</div>
</div>
</div>
</div>
</li>
<!-- Quick links -->
<!-- Notification -->
<li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
<a class="nav-link dropdown-toggle hide-arrow btn btn-icon btn-text-secondary rounded-pill" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<span class="position-relative">
<i class="icon-base ti tabler-bell icon-22px text-heading"></i>
<span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-end p-0">
<li class="dropdown-menu-header border-bottom">
<div class="dropdown-header d-flex align-items-center py-3">
<h6 class="mb-0 me-auto">Notification</h6>
<div class="d-flex align-items-center h6 mb-0">
<span class="badge bg-label-primary me-2">8 New</span>
<a href="javascript:void(0)" class="dropdown-notifications-all p-2 btn btn-icon" data-bs-toggle="tooltip" data-bs-placement="top" title="Mark all as read"><i class="icon-base ti tabler-mail-opened text-heading"></i></a>
</div>
</div>
</li>
<li class="dropdown-notifications-list scrollable-container">
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="{% static 'img/avatars/1.png' %}" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="small mb-1">Congratulation Lettie 🎉</h6>
<small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
<small class="text-body-secondary">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-danger">CF</span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Charles Franklin</h6>
<small class="mb-1 d-block text-body">Accepted your connection</small>
<small class="text-body-secondary">12hr ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="{% static 'img/avatars/2.png' %}" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">New Message ✉️</h6>
<small class="mb-1 d-block text-body">You have new message from Natalie</small>
<small class="text-body-secondary">1h ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-success"><i class="icon-base ti tabler-shopping-cart"></i></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Whoo! You have new order 🛒</h6>
<small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
<small class="text-body-secondary">1 day ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="{% static 'img/avatars/9.png' %}" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Application has been approved 🚀</h6>
<small class="mb-1 d-block text-body">Your ABC project application has been approved.</small>
<small class="text-body-secondary">2 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-success"><i class="icon-base ti tabler-chart-pie"></i></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Monthly report is generated</h6>
<small class="mb-1 d-block text-body">July monthly financial report is generated </small>
<small class="text-body-secondary">3 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="{% static 'img/avatars/5.png' %}" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">Send connection request</h6>
<small class="mb-1 d-block text-body">Peter sent you connection request</small>
<small class="text-body-secondary">4 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<img src="{% static 'img/avatars/6.png' %}" alt class="rounded-circle" />
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">New message from Jane</h6>
<small class="mb-1 d-block text-body">Your have new message from Jane</small>
<small class="text-body-secondary">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
<li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar">
<span class="avatar-initial rounded-circle bg-label-warning"><i class="icon-base ti tabler-alert-triangle"></i></span>
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-1 small">CPU is running high</h6>
<small class="mb-1 d-block text-body">CPU Utilization Percent is currently at 88.63%,</small>
<small class="text-body-secondary">5 days ago</small>
</div>
<div class="flex-shrink-0 dropdown-notifications-actions">
<a href="javascript:void(0)" class="dropdown-notifications-read"><span class="badge badge-dot"></span></a>
<a href="javascript:void(0)" class="dropdown-notifications-archive"><span class="icon-base ti tabler-x"></span></a>
</div>
</div>
</li>
</ul>
</li>
<li class="border-top">
<div class="d-grid p-4">
<a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
<small class="align-middle">View all notifications</small>
</a>
</div>
</li>
</ul>
</li>
<!--/ Notification -->
<!-- User -->
<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
<div class="avatar avatar-online">
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt class="h-auto rounded-circle">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt class="h-auto rounded-circle">
{% endif %}
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item mt-0" href="{% url 'pages-account-settings-account' %}">
<div class="d-flex align-items-center">
<div class="flex-shrink-0 me-2">
<div class="avatar avatar-online">
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt class="rounded-circle">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt class="rounded-circle">
{% endif %}
</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-0">{{ request.user.username }}</h6>
{% for group in request.user.groups.all %}
<small class="text-muted">{{ group.name }}</small>
{% endfor %}
</div>
</div>
</a>
</li>
<li>
<div class="dropdown-divider my-1 mx-n2"></div>
</li>
<li>
<a class="dropdown-item" href="{% url 'pages-profile-user' %}">
<i class="icon-base ti tabler-user me-3 icon-md"></i><span class="align-middle">My Profile</span>
</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'pages-account-settings-account' %}">
<i class="icon-base ti tabler-settings me-3 icon-md"></i><span class="align-middle">Settings</span>
</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'pages-account-settings-billing' %}">
<span class="d-flex align-items-center align-middle">
<i class="flex-shrink-0 icon-base ti tabler-file-dollar me-3 icon-md"></i><span class="flex-grow-1 align-middle">Billing</span>
<span class="flex-shrink-0 badge bg-danger d-flex align-items-center justify-content-center">4</span>
</span>
</a>
</li>
<li>
<div class="dropdown-divider my-1 mx-n2"></div>
</li>
<li>
<a class="dropdown-item" href="{% url 'pages-faq' %}">
<i class="icon-base ti tabler-currency-dollar me-3 icon-md"></i><span class="align-middle">Pricing</span>
</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'pages-pricing' %}">
<i class="icon-base ti tabler-question-mark me-3 icon-md"></i><span class="align-middle">FAQ</span>
</a>
</li>
<li>
<div class="dropdown-divider"></div>
</li>
<li>
{% if request.user.is_authenticated and request.user.profile.is_verified %}
<span class="dropdown-item d-flex justify-content-between align-content-center">
<span>
<i class='icon-base ti tabler-user-circle me-2 ti-md'></i>
<span class="align-middle">Verified</span>
</span>
<span class="text-success"><i class='icon-base ti tabler-circle-check ti-md'></i></span>
</span>
{% else %}
<a class="dropdown-item d-flex justify-content-between align-content-center" href="{% url 'verify-email-page' %}">
<span>
<i class='icon-base ti tabler-user-circle me-2 ti-md'></i>
<span class="align-middle">Not Verified</span>
</span>
<span class="text-danger"><i class='icon-base ti tabler-circle-x ti-md'></i></span>
</a>
{% endif %}
</li>
<li class="mt-1">
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-danger d-flex w-100">
<span class="align-middle">Log Out</span>
<i class="icon-base ti tabler-logout ms-2 icon-14px"></i>
</button>
</form>
</li>
</ul>
</li>
<!--/ User -->
</ul>
</div>
{% if not navbar_detached %}
</div>
</nav>
{% endif %}
{% if navbar_detached %}
</nav>
{% endif %}

View File

@@ -0,0 +1,324 @@
<!-- Navbar: Start -->
<nav class="layout-navbar shadow-none py-0">
<div class="container">
<div class="navbar navbar-expand-lg landing-navbar px-3 px-md-8">
<!-- Menu logo wrapper: Start -->
<div class="navbar-brand app-brand demo d-flex py-0 me-4 me-xl-8 ms-0">
<!-- Mobile menu toggle: Start-->
<button class="navbar-toggler border-0 px-0 me-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon-base ti tabler-menu-2 icon-lg align-middle text-heading fw-medium"></i>
</button>
<!-- Mobile menu toggle: End-->
<a href="{% url 'landing-page' %}" class="app-brand-link">
<span class="app-brand-logo demo">{% include 'partials/logo.html' %}</span>
<span class="app-brand-text demo menu-text fw-bold ms-2 ps-1">{% get_theme_variables 'template_name' %}</span>
</a>
</div>
<!-- Menu logo wrapper: End -->
<!-- Menu wrapper: Start -->
<div class="collapse navbar-collapse landing-nav-menu" id="navbarSupportedContent">
<button class="navbar-toggler border-0 text-heading position-absolute end-0 top-0 scaleX-n1-rtl p-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon-base ti tabler-x icon-lg"></i>
</button>
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link fw-medium" aria-current="page" href="{% url 'landing-page' %}#landingHero">Home</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="{% url 'landing-page' %}#landingFeatures">Features</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="{% url 'landing-page' %}#landingTeam">Team</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="{% url 'landing-page' %}#landingFAQ">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="{% url 'landing-page' %}#landingContact">Contact us</a>
</li>
<li class="nav-item mega-dropdown {% if '/front/pricing/' in active_url or '/front/payment/' in active_url or '/front/checkout/' in active_url or '/front/help_center/' in active_url %}active{% endif %}">
<a href="javascript:void(0);" class="nav-link dropdown-toggle navbar-ex-14-mega-dropdown mega-dropdown fw-medium" aria-expanded="false" data-bs-toggle="mega-dropdown" data-trigger="hover">
<span data-i18n="Pages">Pages</span>
</a>
<div class="dropdown-menu p-4 p-xl-8">
<div class="row gy-4">
<div class="col-12 col-lg">
<div class="h6 d-flex align-items-center mb-3 mb-lg-5">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-layout-grid icon-lg"></i></span>
</div>
<span class="ps-1">Other</span>
</div>
<ul class="nav flex-column">
<li class="nav-item {% if '/front/pricing/' in active_url %}active{% endif %}">
<a class="nav-link mega-dropdown-link" href="{% url 'pricing-page' %}">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
<span data-i18n="Pricing">Pricing</span>
</a>
</li>
<li class="nav-item {% if '/front/payment/' in active_url %}active{% endif %}">
<a class="nav-link mega-dropdown-link" href="{% url 'payment-page' %}">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
<span data-i18n="Payment">Payment</span>
</a>
</li>
<li class="nav-item {% if '/front/checkout/' in active_url %}active{% endif %}">
<a class="nav-link mega-dropdown-link" href="{% url 'checkout-page' %}">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
<span data-i18n="Checkout">Checkout</span>
</a>
</li>
<li class="nav-item {% if '/front/help_center/' in active_url %}active{% endif %}">
<a class="nav-link mega-dropdown-link" href="{% url 'help-center-landing' %}">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
<span data-i18n="Help Center">Help Center</span>
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg">
<div class="h6 d-flex align-items-center mb-3 mb-lg-5">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-lock-open icon-lg"></i></span>
</div>
<span class="ps-1">Auth Demo</span>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-login-basic' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Login (Basic)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-login-cover' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Login (Cover)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-register-basic' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Register (Basic)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-register-cover' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Register (Cover)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-register-multisteps' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Register (Multi-steps)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-forgot-password-basic' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Forgot Password (Basic)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-forgot-password-cover' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Forgot Password (Cover)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-reset-password-basic' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Reset Password (Basic)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-reset-password-cover' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Reset Password (Cover)
</a>
</li>
</ul>
</div>
<div class="col-12 col-lg">
<div class="h6 d-flex align-items-center mb-3 mb-lg-5">
<div class="avatar flex-shrink-0 me-3">
<span class="avatar-initial rounded bg-label-primary"><i class="icon-base ti tabler-file-analytics icon-lg"></i></span>
</div>
<span class="ps-1">Other</span>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'pages-misc-error' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Error
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'pages-misc-under-maintenance' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Under Maintenance
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'pages-misc-comingsoon' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Coming Soon
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'pages-misc-not-authorized' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Not Authorized
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-verify-email-basic' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Verify Email (Basic)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-verify-email-cover' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Verify Email (Cover)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-two-steps-basic' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Two Steps (Basic)
</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="{% url 'auth-two-steps-cover' %}" target="_blank">
<i class="icon-base ti tabler-circle me-1 icon-12px"></i>
Two Steps (Cover)
</a>
</li>
</ul>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="bg-body nav-img-col p-2">
<img src="{% static 'img/front-pages/misc/nav-item-col-img.png' %}" alt="nav item col image" class="w-100" />
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link fw-medium" href="{% url 'index' %}" target="_blank">Admin</a>
</li>
</ul>
</div>
<div class="landing-menu-overlay d-lg-none"></div>
<!-- Menu wrapper: End -->
<!-- Toolbar: Start -->
<ul class="navbar-nav flex-row align-items-center ms-auto">
{% if has_customizer %}
<!-- Style Switcher -->
<li class="nav-item dropdown-style-switcher dropdown me-2 me-xl-1">
<a class="nav-link dropdown-toggle hide-arrow" id="nav-theme" href="javascript:void(0);" data-bs-toggle="dropdown">
<i class="icon-base ti tabler-sun icon-lg theme-icon-active"></i>
<span class="d-none ms-2" id="nav-theme-text">Toggle theme</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-theme-text">
<li>
<button type="button" class="dropdown-item align-items-center active" data-bs-theme-value="light" aria-pressed="false">
<span><i class="icon-base ti tabler-sun icon-md me-3" data-icon="sun"></i>Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item align-items-center" data-bs-theme-value="dark" aria-pressed="true">
<span><i class="icon-base ti tabler-moon-stars icon-md me-3" data-icon="moon-stars"></i>Dark</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item align-items-center" data-bs-theme-value="system" aria-pressed="false">
<span><i class="icon-base ti tabler-device-desktop-analytics icon-md me-3" data-icon="device-desktop-analytics"></i>System</span>
</button>
</li>
</ul>
</li>
<!-- / Style Switcher-->
{% endif %}
<!-- navbar button: Start -->
{% if request.user.is_authenticated %}
<li class="nav-item navbar-dropdown dropdown-user dropdown">
<a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
<div class="avatar avatar-online">
<!-- Moke condition for displaying user avatar -->
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt class="w-px-40 h-auto rounded-circle">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt class="w-px-40 h-auto rounded-circle">
{% endif %}
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="{% url 'pages-account-settings-account' %}">
<div class="d-flex">
<div class="flex-shrink-0 me-3">
<div class="avatar avatar-online">
<!-- Moke condition for displaying user avatar -->
{% if request.user|has_group:"admin" %}
<img src="{% static 'img/avatars/1.png' %}" alt class="w-px-40 h-auto rounded-circle">
{% else %}
<img src="{% static 'img/avatars/3.png' %}" alt class="w-px-40 h-auto rounded-circle">
{% endif %}
</div>
</div>
<div class="flex-grow-1">
<span class="fw-medium d-block">{{ request.user.username }}</span>
{% for group in request.user.groups.all %}
<small class="text-body-secondary">{{ group.name }}</small>
{% endfor %}
</div>
</div>
</a>
</li>
<li>
{% if request.user.is_authenticated and request.user.profile.is_verified %}
<span class="dropdown-item d-flex justify-content-between align-content-center">
<span>
<i class='icon-base ti tabler-user-circle me-2 icon-md'></i>
<span class="align-middle">Verified</span>
</span>
<span class="text-success"><i class='icon-base ti tabler-circle-check icon-md'></i></span>
</span>
{% else %}
<a class="dropdown-item d-flex justify-content-between align-content-center" href="{% url 'verify-email-page' %}">
<span>
<i class='icon-base ti tabler-user-circle me-2 icon-md'></i>
<span class="align-middle">Not Verified</span>
</span>
<span class="text-danger"><i class='icon-base ti tabler-circle-x icon-md'></i></span>
</a>
{% endif %}
</li>
<li class="mt-1">
<form action="{% url 'logout' %}" method="post">
{% csrf_token %}
<button type="submit" class="btn btn-sm btn-danger d-flex w-100">
<span class="align-middle">Log Out</span>
<i class="icon-base ti tabler-logout ms-2 icon-14px"></i>
</button>
</form>
</li>
</ul>
</li>
{% else %}
<li>
<a href="{% url 'login' %}" class="btn btn-primary" target="_blank"><span class="icon-base ti tabler-login scaleX-n1-rtl me-md-1"></span><span class="d-none d-md-block">Login/Register</span></a>
</li>
{% endif %}
<!-- navbar button: End -->
</ul>
<!-- Toolbar: End -->
</div>
</div>
</nav>
<!-- Navbar: End -->

View File

@@ -0,0 +1,17 @@
{% load static %}
<!--Core Javascript-->
{% if has_customizer %}
<script src="{% static 'vendor/libs/pickr/pickr.js' %}"></script>
{% endif %}
<script src="{% static 'vendor/libs/jquery/jquery.js' %}"></script>
<script src="{% static 'vendor/libs/popper/popper.js' %}"></script>
<script src="{% static 'vendor/js/bootstrap.js' %}"></script>
<script src="{% static 'vendor/libs/@algolia/autocomplete-js.js' %}"></script>
<script src="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.js' %}"></script>
<script src="{% static 'vendor/libs/node-waves/node-waves.js' %}"></script>
<script src="{% static 'vendor/libs/hammer/hammer.js' %}"></script>
<script src="{% static 'vendor/js/menu.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>

View File

@@ -0,0 +1,14 @@
{% load static %}
<!--Core Javascript-->
{% if has_customizer %}
<script src="{% static 'vendor/libs/pickr/pickr.js' %}"></script>
{% endif %}
<!--Vendors Javascript-->
<script src="{% static 'vendor/js/dropdown-hover.js' %}"></script>
<script src="{% static 'vendor/js/mega-dropdown.js' %}"></script>
<script src="{% static 'vendor/libs/popper/popper.js' %}"></script>
<script src="{% static 'vendor/js/bootstrap.js' %}"></script>
<script src="{% static 'vendor/libs/node-waves/node-waves.js' %}"></script>
<script src="{% static 'js/front-main.js' %}"></script>

View File

@@ -0,0 +1,29 @@
{% load static %} {% load i18n %}
<!-- Helpers -->
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<script src="{% static 'vendor/js/helpers.js' %}"></script>
<!--? Template customizer: To hide customizer set display_customizer value false in config.js. -->
{% if has_customizer %}
<script src="{% static 'vendor/js/template-customizer.js' %}"></script>
{% endif %}
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="{% static 'js/config.js' %}"></script>
<!-- beautify ignore:start -->
{% if has_customizer %}
<script>
if (typeof TemplateCustomizer !== 'undefined') {
window.templateCustomizer = new TemplateCustomizer({
defaultTheme: "{{theme}}", // Required as system style can't decided without JS
{% if primary_color %}
defaultPrimaryColor: "{{ primary_color }}",
{% endif %}
defaultTextDir: '{% if rtl_mode %}rtl{% else %}ltr{% endif %}',
defaultSemiDark: {{ semi_dark_value }},
defaultShowDropdownOnHover: {{ show_dropdown_onhover_value }},
lang: '{{LANGUAGE_CODE}}',
controls: {{ customizer_controls | safe }}
});
}
</script>
{% endif %}
<!-- beautify ignore:end -->

View File

@@ -0,0 +1,26 @@
{% load static %}
<!-- Helpers -->
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<script src="{% static 'vendor/js/helpers.js' %}"></script>
<!--? Template customizer: To hide customizer set display_customizer value false in config.js. -->
{% if has_customizer %}
<script src="{% static 'vendor/js/template-customizer.js' %}"></script>
{% endif %}
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="{% static 'js/config.js' %}"></script>
<!-- beautify ignore:start -->
{% if has_customizer %}
<script>
if (typeof TemplateCustomizer !== 'undefined') {
window.templateCustomizer = new TemplateCustomizer({
{% if primary_color %}
defaultPrimaryColor: "{{ primary_color }}",
{% endif %}
defaulttheme: "{{theme}}", // Required as system style can't decided without JS
controls: ['rtl', 'theme', 'color'],
});
}
</script>
{% endif %}
<!-- beautify ignore:end -->

View File

@@ -0,0 +1,25 @@
{% load static %}
<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap" rel="stylesheet" />
<!-- Icons -->
<link rel="stylesheet" href="{% static 'vendor/fonts/iconify-icons.css' %}" />
<!-- Vendors -->
<link rel="stylesheet" href="{% static 'vendor/libs/node-waves/node-waves.css' %}" />
{% if has_customizer %}
<link rel="stylesheet" href="{% static 'vendor/libs/pickr/pickr-themes.css' %}" />
{% endif %}
<!--Core CSS-->
<link rel="stylesheet" href="{% static 'vendor/css/core.css' %}" />
<link rel="stylesheet" href="{% static 'css/demo.css' %}" />
<!-- Vendors -->
<link rel="stylesheet" href="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.css' %}" />

View File

@@ -0,0 +1,20 @@
{% load static %}
<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&ampdisplay=swap" rel="stylesheet" />
<!-- Icons -->
<link rel="stylesheet" href="{% static 'vendor/fonts/iconify-icons.css' %}" />
<!--Vendor CSS-->
<link rel="stylesheet" href="{% static 'vendor/libs/node-waves/node-waves.css' %}" />
{% if has_customizer %}
<link rel="stylesheet" href="{% static 'vendor/libs/pickr/pickr-themes.css' %}" />
{% endif %}
<!--Core CSS -->
<link rel="stylesheet" href="{% static 'vendor/css/core.css' %}" />
<link rel="stylesheet" href="{% static 'css/demo.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/css/pages/front-page.css' %}" />

View File

@@ -0,0 +1,11 @@
{% extends 'layout/master.html' %}
{% block layout %}
<!-- Content: Start -->
{% block content %}
{% endblock content %}
<!-- Content: End -->
{% endblock layout %}

View File

@@ -0,0 +1,133 @@
<!-- Add New Address Modal -->
<div class="modal fade" id="addNewAddress" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-add-new-address">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="address-title mb-2">Add New Address</h4>
<p class="address-subtitle">Add new address for express delivery</p>
</div>
<form id="addNewAddressForm" class="row g-6" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<div class="row">
<div class="col-md mb-md-0 mb-4">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioHome">
<span class="custom-option-body">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M16.625 23.625V16.625H11.375V23.625H4.37501V12.6328C4.37437 12.5113 4.39937 12.391 4.44837 12.2798C4.49737 12.1686 4.56928 12.069 4.65939 11.9875L13.4094 4.03592C13.5689 3.88911 13.7778 3.80762 13.9945 3.80762C14.2113 3.80762 14.4202 3.88911 14.5797 4.03592L23.3406 11.9875C23.4287 12.0706 23.4992 12.1706 23.548 12.2814C23.5969 12.3922 23.6231 12.5117 23.625 12.6328V23.625H16.625Z" />
<path
d="M23.625 23.625V12.6328C23.623 12.5117 23.5969 12.3922 23.548 12.2814C23.4992 12.1706 23.4287 12.0706 23.3406 11.9875L14.5797 4.03592C14.4202 3.88911 14.2113 3.80762 13.9945 3.80762C13.7777 3.80762 13.5689 3.88911 13.4094 4.03592L4.65937 11.9875C4.56926 12.069 4.49736 12.1686 4.44836 12.2798C4.39936 12.391 4.37436 12.5113 4.375 12.6328V23.625M1.75 23.625H26.25M16.625 23.625V17.5C16.625 17.2679 16.5328 17.0454 16.3687 16.8813C16.2046 16.7172 15.9821 16.625 15.75 16.625H12.25C12.0179 16.625 11.7954 16.7172 11.6313 16.8813C11.4672 17.0454 11.375 17.2679 11.375 17.5V23.625"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span class="custom-option-title">Home</span>
<small> Delivery time (9am 9pm) </small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioHome" checked />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-4">
<div class="form-check custom-option custom-option-icon">
<label class="form-check-label custom-option-content" for="customRadioOffice">
<span class="custom-option-body">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625" />
<path
d="M1.75 23.625H26.25M15.75 23.625V4.375C15.75 4.14294 15.6578 3.92038 15.4937 3.75628C15.3296 3.59219 15.1071 3.5 14.875 3.5H4.375C4.14294 3.5 3.92038 3.59219 3.75628 3.75628C3.59219 3.92038 3.5 4.14294 3.5 4.375V23.625M24.5 23.625V11.375C24.5 11.1429 24.4078 10.9204 24.2437 10.7563C24.0796 10.5922 23.8571 10.5 23.625 10.5H15.75M7 7.875H10.5M8.75 14.875H12.25M7 19.25H10.5M19.25 19.25H21M19.25 14.875H21"
stroke-opacity="0.9"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<span class="custom-option-title"> Office </span>
<small> Delivery time (9am 5pm) </small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioOffice" />
</label>
</div>
</div>
</div>
</div>
<div class="col-12 form-control-validation col-md-6">
<label class="form-label" for="modalAddressFirstName">First Name</label>
<input type="text" id="modalAddressFirstName" name="modalAddressFirstName" class="form-control" placeholder="John" />
</div>
<div class="col-12 form-control-validation col-md-6">
<label class="form-label" for="modalAddressLastName">Last Name</label>
<input type="text" id="modalAddressLastName" name="modalAddressLastName" class="form-control" placeholder="Doe" />
</div>
<div class="col-12">
<label class="form-label" for="modalAddressCountry">Country</label>
<select id="modalAddressCountry" name="modalAddressCountry" class="select2 form-select" data-allow-clear="true">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12">
<label class="form-label" for="modalAddressAddress1">Address Line 1</label>
<input type="text" id="modalAddressAddress1" name="modalAddressAddress1" class="form-control" placeholder="12, Business Park" />
</div>
<div class="col-12">
<label class="form-label" for="modalAddressAddress2">Address Line 2</label>
<input type="text" id="modalAddressAddress2" name="modalAddressAddress2" class="form-control" placeholder="Mall Road" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressLandmark">Landmark</label>
<input type="text" id="modalAddressLandmark" name="modalAddressLandmark" class="form-control" placeholder="Nr. Hard Rock Cafe" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressCity">City</label>
<input type="text" id="modalAddressCity" name="modalAddressCity" class="form-control" placeholder="Los Angeles" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressLandmark">State</label>
<input type="text" id="modalAddressState" name="modalAddressState" class="form-control" placeholder="California" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddressZipCode">Zip Code</label>
<input type="text" id="modalAddressZipCode" name="modalAddressZipCode" class="form-control" placeholder="99950" />
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="billingAddress" />
<label for="billingAddress" class="form-switch-label">Use as a billing address?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Address Modal -->

View File

@@ -0,0 +1,50 @@
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="addNewCCModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered1 modal-simple modal-add-new-cc">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Add New Card</h4>
<p>Add new card to complete payment</p>
</div>
<form id="addNewCCForm" class="row g-6" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<label class="form-label w-100" for="modalAddCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="modalAddCard" name="modalAddCard" class="form-control credit-card-mask" type="text" placeholder="1356 3215 6548 7898" aria-describedby="modalAddCard2" />
<span class="input-group-text cursor-pointer p-1" id="modalAddCard2"><span class="card-type"></span></span>
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalAddCardName">Name</label>
<input type="text" id="modalAddCardName" class="form-control" placeholder="John Doe" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalAddCardExpiryDate">Exp. Date</label>
<input type="text" id="modalAddCardExpiryDate" class="form-control expiry-date-mask" placeholder="MM/YY" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalAddCardCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="modalAddCardCvv" class="form-control cvv-code-mask pe-0" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer ps-0" id="modalAddCardCvv2"><i class="text-body-secondary icon-base ti tabler-help" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="futureAddress" />
<label for="futureAddress" class="switch-label">Save card for future billing?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button type="reset" class="btn btn-label-secondary btn-reset" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->

View File

@@ -0,0 +1,32 @@
<!-- Add Permission Modal -->
<div class="modal fade" id="addPermissionModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h3>Add New Permission</h3>
<p class="text-body-secondary">Permissions you may use and assign to your users.</p>
</div>
<form id="addPermissionForm" class="row" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation mb-4">
<label class="form-label" for="modalPermissionName">Permission Name</label>
<input type="text" id="modalPermissionName" name="modalPermissionName" class="form-control" placeholder="Permission Name" autofocus />
</div>
<div class="col-12 mb-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="corePermission" />
<label class="form-check-label" for="corePermission"> Set as core permission </label>
</div>
</div>
<div class="col-12 text-center demo-vertical-spacing">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Create Permission</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Discard</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add Permission Modal -->

View File

@@ -0,0 +1,224 @@
<!-- Add Role Modal -->
<div class="modal fade" id="addRoleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-dialog-centered modal-add-new-role">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="role-title">Add New Role</h4>
<p class="text-body-secondary">Set role permissions</p>
</div>
<!-- Add role form -->
<form id="addRoleForm" class="row g-3" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation mb-3">
<label class="form-label" for="modalRoleName">Role Name</label>
<input type="text" id="modalRoleName" name="modalRoleName" class="form-control" placeholder="Enter a role name" tabindex="-1" />
</div>
<div class="col-12">
<h5 class="mb-6">Role Permissions</h5>
<!-- Permission table -->
<div class="table-responsive">
<table class="table table-flush-spacing">
<tbody>
<tr>
<td class="text-nowrap fw-medium">
Administrator Access
<i class="icon-base ti tabler-info-circle icon-xs" data-bs-toggle="tooltip" data-bs-placement="top" title="Allows a full access to the system"></i>
</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="selectAll" />
<label class="form-check-label" for="selectAll"> Select All </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">User Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="userManagementRead" />
<label class="form-check-label" for="userManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="userManagementWrite" />
<label class="form-check-label" for="userManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="userManagementCreate" />
<label class="form-check-label" for="userManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Content Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="contentManagementRead" />
<label class="form-check-label" for="contentManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="contentManagementWrite" />
<label class="form-check-label" for="contentManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="contentManagementCreate" />
<label class="form-check-label" for="contentManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Disputes Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dispManagementRead" />
<label class="form-check-label" for="dispManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dispManagementWrite" />
<label class="form-check-label" for="dispManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="dispManagementCreate" />
<label class="form-check-label" for="dispManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Database Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dbManagementRead" />
<label class="form-check-label" for="dbManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="dbManagementWrite" />
<label class="form-check-label" for="dbManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="dbManagementCreate" />
<label class="form-check-label" for="dbManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Financial Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="finManagementRead" />
<label class="form-check-label" for="finManagementRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="finManagementWrite" />
<label class="form-check-label" for="finManagementWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="finManagementCreate" />
<label class="form-check-label" for="finManagementCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Reporting</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="reportingRead" />
<label class="form-check-label" for="reportingRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="reportingWrite" />
<label class="form-check-label" for="reportingWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="reportingCreate" />
<label class="form-check-label" for="reportingCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">API Control</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="apiRead" />
<label class="form-check-label" for="apiRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="apiWrite" />
<label class="form-check-label" for="apiWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="apiCreate" />
<label class="form-check-label" for="apiCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Repository Management</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="repoRead" />
<label class="form-check-label" for="repoRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="repoWrite" />
<label class="form-check-label" for="repoWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="repoCreate" />
<label class="form-check-label" for="repoCreate"> Create </label>
</div>
</div>
</td>
</tr>
<tr>
<td class="text-nowrap fw-medium text-heading">Payroll</td>
<td>
<div class="d-flex justify-content-end">
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="payrollRead" />
<label class="form-check-label" for="payrollRead"> Read </label>
</div>
<div class="form-check mb-0 me-4 me-lg-12">
<input class="form-check-input" type="checkbox" id="payrollWrite" />
<label class="form-check-label" for="payrollWrite"> Write </label>
</div>
<div class="form-check mb-0">
<input class="form-check-input" type="checkbox" id="payrollCreate" />
<label class="form-check-label" for="payrollCreate"> Create </label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Permission table -->
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
<!--/ Add role form -->
</div>
</div>
</div>
</div>
<!--/ Add Role Modal -->

View File

@@ -0,0 +1,308 @@
<!-- Create App Modal -->
<div class="modal fade" id="createApp" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple modal-upgrade-plan">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center">
<h4 class="mb-2">Create App</h4>
<p class="mb-5">Provide data with this form to create your app.</p>
</div>
<div id="wizard-create-app" class="bs-stepper vertical mt-2 shadow-none">
<div class="bs-stepper-header border-0 p-1">
<div class="step" data-target="#details">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-file-text icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Details</span>
<span class="bs-stepper-subtitle">Enter Details</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#frameworks">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-box icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Frameworks</span>
<span class="bs-stepper-subtitle">Select Framework</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#database">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-database icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Database</span>
<span class="bs-stepper-subtitle">Select Database</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#billing">
<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 text-uppercase">Billing</span>
<span class="bs-stepper-subtitle">Payment Details</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#submit">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle"><i class="icon-base ti tabler-check icon-md"></i></span>
<span class="bs-stepper-label">
<span class="bs-stepper-title text-uppercase">Submit</span>
<span class="bs-stepper-subtitle">Submit</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content p-1">
<form onSubmit="return false">
{% csrf_token %}
<!-- Details -->
<div id="details" class="content pt-4 pt-lg-0">
<div class="mb-6">
<label for="exampleInputEmail1" class="form-label">Application Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Application Name" />
</div>
<h5>Category</h5>
<ul class="p-0 m-0">
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-info p-2 me-3 rounded"><i class="icon-base ti tabler-file-text icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">CRM Application</h6>
<small>Scales with any business</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="details-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-success p-2 me-3 rounded"><i class="icon-base ti tabler-shopping-cart icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">eCommerce Platforms</h6>
<small>Grow Your Business With App</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="details-radio" class="form-check-input" type="radio" value="" checked />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start">
<div class="badge bg-label-danger p-2 me-3 rounded"><i class="icon-base ti tabler-device-laptop icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">Online Learning platform</h6>
<small>Start learning today</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="details-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
</ul>
<div class="col-12 d-flex justify-content-between mt-6">
<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-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- Frameworks -->
<div id="frameworks" class="content pt-4 pt-lg-0">
<h5>Select Framework</h5>
<ul class="p-0 m-0">
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-info p-2 me-3 rounded"><i class="icon-base ti tabler-brand-react-native icon-30px"></i></div>
<div class="d-flex justify-content-between w-100">
<div class="me-2">
<h6 class="mb-1">React Native</h6>
<small>Create truly native apps</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-danger p-2 me-3 rounded"><i class="icon-base ti tabler-brand-angular icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">Angular</h6>
<small>Most suited for your application</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" checked="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-warning p-2 me-3 rounded"><i class="icon-base ti tabler-brand-html5 icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">HTML</h6>
<small>Progressive Framework</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" checked />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start">
<div class="badge bg-label-success p-2 me-3 rounded"><i class="icon-base ti tabler-brand-vue icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">VueJs</h6>
<small>JS web frameworks</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="frameworks-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
</ul>
<div class="col-12 d-flex justify-content-between mt-6">
<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-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- Database -->
<div id="database" class="content pt-4 pt-lg-0">
<div class="mb-6">
<label for="exampleInputEmail2" class="form-label">Database Name</label>
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="Database Name" />
</div>
<h5>Select Database Engine</h5>
<ul class="p-0 m-0">
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-danger p-2 me-3 rounded"><i class="icon-base ti tabler-brand-firebase icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">Firebase</h6>
<small>Cloud Firestone</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="database-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start mb-4">
<div class="badge bg-label-warning p-2 me-3 rounded"><i class="icon-base ti tabler-brand-amazon icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">AWS</h6>
<small>Amazon Fast NoSQL Database</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="database-radio" class="form-check-input" type="radio" value="" checked />
</div>
</div>
</div>
</li>
<li class="d-flex align-items-start">
<div class="badge bg-label-info p-2 me-3 rounded"><i class="icon-base ti tabler-database icon-30px"></i></div>
<div class="d-flex justify-content-between w-100 flex-wrap gap-2">
<div class="me-2">
<h6 class="mb-1">MySQL</h6>
<small>Basic MySQL database</small>
</div>
<div class="d-flex align-items-center">
<div class="form-check form-check-inline">
<input name="database-radio" class="form-check-input" type="radio" value="" />
</div>
</div>
</div>
</li>
</ul>
<div class="col-12 d-flex justify-content-between mt-6">
<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-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- billing -->
<div id="billing" class="content">
<h5 class="mb-6">Payment Details</h5>
<div id="AppNewCCForm" class="row g-6 pt-3 pt-lg-0 mb-6" onsubmit="return false">
<div class="col-12">
<label for="modalAppCardNumber" class="form-label">Card Number</label>
<div class="input-group input-group-merge">
<input class="form-control app-credit-card-mask" type="text" placeholder="1356 3215 6548 7898" aria-describedby="modalAppAddCard" id="modalAppCardNumber" />
<span class="input-group-text cursor-pointer p-1" id="modalAppAddCard"><span class="app-card-type"></span></span>
</div>
</div>
<div class="col-12 col-md-6">
<label for="modalAppUserName" class="form-label">Name on Card</label>
<input type="text" class="form-control" placeholder="John Doe" id="modalAppUserName" />
</div>
<div class="col-6 col-md-3">
<label for="modalAppExpiry" class="form-label">Expiry</label>
<input type="text" class="form-control app-expiry-date-mask" placeholder="MM/YY" id="modalAppExpiry" />
</div>
<div class="col-6 col-md-3">
<label for="modalAppAddCardCvv" class="form-label">CVV</label>
<div class="input-group input-group-merge">
<input type="text" id="modalAppAddCardCvv" class="form-control app-cvv-code-mask pe-0" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer ps-0" id="modalAppAddCardCvv2"><i class="text-body-secondary icon-base ti tabler-help" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="appFutureAddress" />
<label for="appFutureAddress" class="form-label">Save card for future billing?</label>
</div>
</div>
</div>
<div class="col-12 d-flex justify-content-between mt-6">
<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-2">Next</span> <i class="icon-base ti tabler-arrow-right icon-xs"></i></button>
</div>
</div>
<!-- submit -->
<div id="submit" class="content text-center pt-4 pt-lg-0">
<h5 class="mb-1">Submit</h5>
<p class="small">Submit to kick start your project.</p>
<!-- image -->
<img src="{% static 'img/illustrations/girl-with-laptop.png' %}" class="img-fluid" alt="Create App img" width="175" />
<div class="col-12 d-flex justify-content-between mt-6">
<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-success btn-next btn-submit" data-bs-dismiss="modal" aria-label="Close"><span class="align-middle">Submit</span></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Create App Modal -->

View File

@@ -0,0 +1,50 @@
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="editCCModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-simple modal-add-new-cc">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h2>Edit Card</h2>
<p class="text-body-secondary">Edit your saved card details</p>
</div>
<form id="editCCForm" class="row g-3" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<label class="form-label w-100" for="modalEditCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="modalEditCard" name="modalEditCard" class="form-control credit-card-mask-edit" type="text" placeholder="4356 3215 6548 7898" value="4356 3215 6548 7898" aria-describedby="modalEditCard2" />
<span class="input-group-text cursor-pointer" id="modalEditCard2"><span class="card-type-edit"></span></span>
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditName">Name</label>
<input type="text" id="modalEditName" class="form-control" placeholder="John Doe" value="John Doe" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalEditExpiryDate">Exp. Date</label>
<input type="text" id="modalEditExpiryDate" class="form-control expiry-date-mask-edit" placeholder="MM/YY" value="08/28" />
</div>
<div class="col-6 col-md-3">
<label class="form-label" for="modalEditCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="modalEditCvv" class="form-control cvv-code-mask-edit" maxlength="3" placeholder="654" value="XXX" />
<span class="input-group-text cursor-pointer" id="modalEditCvv2"><i class="icon-base ti tabler-help-circle text-body-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Card Verification Value"></i></span>
</div>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="editPrimaryCard" />
<label for="editPrimaryCard">Set as primary card</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-sm-4 me-1">Update</button>
<button type="reset" class="btn btn-label-danger" data-bs-dismiss="modal" aria-label="Close">Remove</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->

View File

@@ -0,0 +1,36 @@
<!-- Edit Permission Modal -->
<div class="modal fade" id="editPermissionModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h3>Edit Permission</h3>
<p class="text-body-secondary">Edit permission as per your requirements.</p>
</div>
<div class="alert alert-warning" role="alert">
<h6 class="alert-heading mb-2">Warning</h6>
<p class="mb-0">By editing the permission name, you might break the system permissions functionality. Please ensure you're absolutely certain before proceeding.</p>
</div>
<form id="editPermissionForm" class="row" onsubmit="return false">
{% csrf_token %}
<div class="col-sm-9 form-control-validation">
<label class="form-label" for="editPermissionName">Permission Name</label>
<input type="text" id="editPermissionName" name="editPermissionName" class="form-control" placeholder="Permission Name" tabindex="-1" />
</div>
<div class="col-sm-3 mb-4">
<label class="form-label invisible d-none d-sm-inline-block">Button</label>
<button type="submit" class="btn btn-primary mt-1 mt-sm-0">Update</button>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="editCorePermission" />
<label class="form-check-label" for="editCorePermission"> Set as core permission </label>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Edit Permission Modal -->

View File

@@ -0,0 +1,108 @@
<!-- Edit User Modal -->
<div class="modal fade" id="editUser" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-edit-user">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Edit User Information</h4>
<p>Updating user details will receive a privacy audit.</p>
</div>
<form id="editUserForm" class="row g-6" onsubmit="return false">
{% csrf_token %}
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserFirstName">First Name</label>
<input type="text" id="modalEditUserFirstName" name="modalEditUserFirstName" class="form-control" placeholder="John" value="John" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserLastName">Last Name</label>
<input type="text" id="modalEditUserLastName" name="modalEditUserLastName" class="form-control" placeholder="Doe" value="Doe" />
</div>
<div class="col-12">
<label class="form-label" for="modalEditUserName">Username</label>
<input type="text" id="modalEditUserName" name="modalEditUserName" class="form-control" placeholder="johndoe007" value="johndoe007" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserEmail">Email</label>
<input type="text" id="modalEditUserEmail" name="modalEditUserEmail" class="form-control" placeholder="example@domain.com" value="example@domain.com" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserStatus">Status</label>
<select id="modalEditUserStatus" name="modalEditUserStatus" class="select2 form-select" aria-label="Default select example">
<option selected>Status</option>
<option value="1">Active</option>
<option value="2">Inactive</option>
<option value="3">Suspended</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditTaxID">Tax ID</label>
<input type="text" id="modalEditTaxID" name="modalEditTaxID" class="form-control modal-edit-tax-id" placeholder="123 456 7890" value="123 456 7890" />
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserPhone">Phone Number</label>
<div class="input-group">
<span class="input-group-text">US (+1)</span>
<input type="text" id="modalEditUserPhone" name="modalEditUserPhone" class="form-control phone-number-mask" placeholder="202 555 0111" value="202 555 0111" />
</div>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserLanguage">Language</label>
<select id="modalEditUserLanguage" name="modalEditUserLanguage" class="select2 form-select" multiple>
<option value="">Select</option>
<option value="english" selected>English</option>
<option value="spanish">Spanish</option>
<option value="french">French</option>
<option value="german">German</option>
<option value="dutch">Dutch</option>
<option value="hebrew">Hebrew</option>
<option value="sanskrit">Sanskrit</option>
<option value="hindi">Hindi</option>
</select>
</div>
<div class="col-12 col-md-6">
<label class="form-label" for="modalEditUserCountry">Country</label>
<select id="modalEditUserCountry" name="modalEditUserCountry" class="select2 form-select" data-allow-clear="true">
<option value="">Select</option>
<option value="Australia">Australia</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Belarus">Belarus</option>
<option value="Brazil">Brazil</option>
<option value="Canada">Canada</option>
<option value="China">China</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="India" selected>India</option>
<option value="Indonesia">Indonesia</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Japan">Japan</option>
<option value="Korea">Korea, Republic of</option>
<option value="Mexico">Mexico</option>
<option value="Philippines">Philippines</option>
<option value="Russia">Russian Federation</option>
<option value="South Africa">South Africa</option>
<option value="Thailand">Thailand</option>
<option value="Turkey">Turkey</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
</select>
</div>
<div class="col-12">
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="editBillingAddress" />
<label for="editBillingAddress" class="switch-label">Use as a billing address?</label>
</div>
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary me-3">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Edit User Modal -->

View File

@@ -0,0 +1,30 @@
<!-- Enable OTP Modal -->
<div class="modal fade" id="enableOTP" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-simple modal-enable-otp modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Enable One Time Password</h4>
<p>Verify Your Mobile Number for SMS</p>
</div>
<p>Enter your mobile phone number with country code and we will send you a verification code.</p>
<form id="enableOTPForm" class="row g-5" onsubmit="return false">
{% csrf_token %}
<div class="col-12 form-control-validation">
<label class="form-label" for="modalEnableOTPPhone">Phone Number</label>
<div class="input-group">
<span class="input-group-text">US (+1)</span>
<input type="text" id="modalEnableOTPPhone" name="modalEnableOTPPhone" class="form-control phone-number-otp-mask" placeholder="202 555 0111" />
</div>
</div>
<div class="col-12 d-flex gap-4 flex-wrap">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Enable OTP Modal -->

View File

@@ -0,0 +1,138 @@
{% load static %}
<!-- Pricing Modal -->
<div class="modal fade" id="pricingModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-simple modal-pricing">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<!-- Pricing Plans -->
<div class="rounded-top">
<h4 class="text-center mb-2">Pricing Plans</h4>
<p class="text-center mb-0">All plans include 40+ advanced tools and features to boost your product. Choose the best plan to fit your needs.</p>
<div class="d-flex align-items-center justify-content-center flex-wrap gap-2 pt-12 pb-4">
<label class="switch switch-sm ms-sm-12 ps-sm-12 me-0">
<span class="switch-label fs-6 text-body">Monthly</span>
<input type="checkbox" class="switch-input price-duration-toggler" checked />
<span class="switch-toggle-slider">
<span class="switch-on"></span>
<span class="switch-off"></span>
</span>
<span class="switch-label fs-6 text-body">Annually</span>
</label>
<div class="mt-n5 ms-n10 ml-2 mb-12 d-none d-sm-flex align-items-center gap-1">
<i class="icon-base ti tabler-corner-left-down icon-lg text-body-secondary scaleX-n1-rtl"></i>
<span class="badge badge-sm bg-label-primary rounded-1 mb-2 ">Save up to 10%</span>
</div>
</div>
<div class="row gy-6">
<!-- Basic -->
<div class="col-xl mb-md-0">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 p-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-basic.png' %}" alt="Basic Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Basic</h4>
<p class="text-center mb-5">A simple start for everyone</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="mb-0 text-primary">0</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
</div>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">100 responses a month</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Unlimited fields</li>
<li class="mb-4">Basic form creation tools</li>
<li class="mb-0">Up to 2 subdomains</li>
</ul>
<button type="button" class="btn btn-label-success d-grid w-100" data-bs-dismiss="modal">Your Current Plan</button>
</div>
</div>
</div>
<!-- Pro -->
<div class="col-xl mb-md-0">
<div class="card border-primary border shadow-none">
<div class="card-body position-relative pt-4 p-5">
<div class="position-absolute end-0 me-5 top-0 mt-4">
<span class="badge bg-label-primary rounded-1">Popular</span>
</div>
<div class="my-5 pt-6 text-center">
<img src="{% static 'img/illustrations/page-pricing-standard.png' %}" alt="Standard Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Standard</h4>
<p class="text-center mb-5">For small to medium businesses</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">7</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">9</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 480 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">Unlimited responses</li>
<li class="mb-4">Unlimited forms and surveys</li>
<li class="mb-4">Instagram profile page</li>
<li class="mb-4">Google Docs integration</li>
<li class="mb-0">Custom “Thank you” page</li>
</ul>
<button type="button" class="btn btn-primary d-grid w-100" data-bs-dismiss="modal">Upgrade</button>
</div>
</div>
</div>
<!-- Enterprise -->
<div class="col-xl">
<div class="card border rounded shadow-none">
<div class="card-body pt-12 p-5">
<div class="mt-3 mb-5 text-center">
<img src="{% static 'img/illustrations/page-pricing-enterprise.png' %}" alt="Enterprise Image" height="120" />
</div>
<h4 class="card-title text-center text-capitalize mb-1">Enterprise</h4>
<p class="text-center mb-5">Solution for big organizations</p>
<div class="text-center h-px-50">
<div class="d-flex justify-content-center">
<sup class="h6 text-body pricing-currency mt-2 mb-0 me-1">$</sup>
<h1 class="price-toggle price-yearly text-primary mb-0">16</h1>
<h1 class="price-toggle price-monthly text-primary mb-0 d-none">19</h1>
<sub class="h6 text-body pricing-duration mt-auto mb-1">/month</sub>
</div>
<small class="price-yearly price-yearly-toggle text-body-secondary">USD 960 / year</small>
</div>
<ul class="list-group ps-6 my-5 pt-9">
<li class="mb-4">PayPal payments</li>
<li class="mb-4">Logic Jumps</li>
<li class="mb-4">File upload with 5GB storage</li>
<li class="mb-4">Custom domain support</li>
<li class="mb-0">Stripe integration</li>
</ul>
<button type="button" class="btn btn-label-primary d-grid w-100" data-bs-dismiss="modal">Upgrade</button>
</div>
</div>
</div>
</div>
</div>
<!--/ Pricing Plans -->
</div>
</div>
</div>
</div>
<!--/ Pricing Modal -->
{% block page_js %}
<script src="{% static 'js/pages-pricing.js' %}"></script>
{% endblock page_js %}

View File

@@ -0,0 +1,107 @@
<!-- Refer & Earn Modal -->
<div class="modal fade" id="referAndEarn" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-refer-and-earn">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Refer & Earn</h4>
<p class="text-center mb-12 m-auto">Invite your friend to {% get_theme_variables 'template_name' %}, if they sign up, you and your friend will get 30 days free trial.</p>
</div>
<div class="row row-gap-6">
<div class="col-12 col-lg-4 px-6">
<div class="d-flex justify-content-center mb-4">
<div class="modal-refer-and-earn-step bg-label-primary">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
d="M32.8594 5.60945L3.73443 13.8126C3.4865 13.8804 3.2655 14.0229 3.10152 14.2208C2.93754 14.4188 2.83857 14.6624 2.81807 14.9186C2.79757 15.1748 2.85655 15.4311 2.98698 15.6526C3.11741 15.8741 3.31293 16.05 3.54693 16.1563L16.9219 22.4844C17.1839 22.6058 17.3943 22.8162 17.5157 23.0782L23.8438 36.4532C23.9501 36.6872 24.126 36.8827 24.3475 37.0131C24.569 37.1436 24.8253 37.2026 25.0815 37.1821C25.3377 37.1616 25.5814 37.0626 25.7793 36.8986C25.9772 36.7346 26.1198 36.5136 26.1876 36.2657L34.3907 7.1407C34.4528 6.92816 34.4567 6.70282 34.4018 6.48829C34.3469 6.27375 34.2354 6.07794 34.0788 5.92135C33.9222 5.76477 33.7264 5.6532 33.5118 5.59832C33.2973 5.54344 33.072 5.54729 32.8594 5.60945Z"
fill="#7367F0" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.7595 4.62951C33.3731 4.53065 32.9672 4.53707 32.5841 4.64806L3.47059 12.848L3.46635 12.8491C3.0218 12.9716 2.62557 13.2277 2.33135 13.5829C2.03619 13.9391 1.85803 14.3777 1.82113 14.8389C1.78424 15.3001 1.89041 15.7614 2.12517 16.1601C2.35845 16.5562 2.70742 16.8713 3.12507 17.0631L16.4941 23.3884L16.4941 23.3884L16.5016 23.3919C16.5486 23.4136 16.5864 23.4514 16.6081 23.4984L16.6081 23.4984L16.6116 23.5059L22.9369 36.8749C23.1287 37.2926 23.4438 37.6416 23.8399 37.8748C24.2386 38.1096 24.6999 38.2158 25.1611 38.1789C25.6223 38.142 26.0609 37.9638 26.4171 37.6687C26.7723 37.3744 27.0284 36.9782 27.1509 36.5337L27.152 36.5294L35.3503 7.42141L35.3521 7.41553C35.4629 7.03254 35.4693 6.62681 35.3705 6.24047C35.2712 5.85214 35.0692 5.49768 34.7858 5.21425C34.5023 4.93082 34.1479 4.72885 33.7595 4.62951ZM33.1304 6.572L32.8593 5.60954L33.14 6.56924C33.1804 6.55744 33.2232 6.55671 33.2639 6.56713C33.3046 6.57754 33.3418 6.59873 33.3715 6.62846C33.4013 6.65819 33.4225 6.69537 33.4329 6.73611C33.4433 6.77684 33.4426 6.81963 33.4308 6.85998L33.4307 6.85997L33.428 6.86959L25.2249 35.9946L25.2249 35.9946L25.2228 36.002C25.2093 36.0516 25.1808 36.0958 25.1412 36.1285C25.1016 36.1613 25.0529 36.1811 25.0016 36.1852C24.9504 36.1893 24.8991 36.1775 24.8548 36.1515C24.8105 36.1254 24.7754 36.0863 24.7541 36.0395L24.7476 36.0255L18.53 22.8842L25.0977 16.3166C25.4882 15.926 25.4882 15.2929 25.0977 14.9023C24.7072 14.5118 24.074 14.5118 23.6835 14.9023L17.1158 21.47L3.97449 15.2524L3.96054 15.2459C3.91374 15.2247 3.87463 15.1895 3.84854 15.1452C3.82246 15.1009 3.81066 15.0496 3.81476 14.9984C3.81886 14.9471 3.83866 14.8984 3.87145 14.8588C3.90425 14.8192 3.94845 14.7907 3.99803 14.7772L3.99804 14.7772L4.00541 14.7751L33.1304 6.572Z"
fill="#7367F0" />
</svg>
</div>
</div>
<div class="text-center">
<h5 class="mb-2">Send Invitation 👍🏻</h5>
<p class="mb-lg-0">Send your referral link to your friend</p>
</div>
</div>
<div class="col-12 col-lg-4 px-6">
<div class="d-flex justify-content-center mb-4">
<div class="modal-refer-and-earn-step bg-label-primary">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.2" d="M34.9219 8.75H5.07812C4.34462 8.75 3.75 9.34462 3.75 10.0781V29.9219C3.75 30.6554 4.34462 31.25 5.07812 31.25H34.9219C35.6554 31.25 36.25 30.6554 36.25 29.9219V10.0781C36.25 9.34462 35.6554 8.75 34.9219 8.75Z" fill="#7367F0" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.75 10.0781C4.75 9.89691 4.89691 9.75 5.07812 9.75H34.9219C35.1031 9.75 35.25 9.89691 35.25 10.0781V29.9219C35.25 30.1031 35.1031 30.25 34.9219 30.25H5.07812C4.89691 30.25 4.75 30.1031 4.75 29.9219V10.0781ZM5.07812 7.75C3.79234 7.75 2.75 8.79234 2.75 10.0781V29.9219C2.75 31.2077 3.79234 32.25 5.07812 32.25H34.9219C36.2077 32.25 37.25 31.2077 37.25 29.9219V10.0781C37.25 8.79234 36.2077 7.75 34.9219 7.75H5.07812ZM8.75 14C8.19772 14 7.75 14.4477 7.75 15C7.75 15.5523 8.19772 16 8.75 16H31.25C31.8023 16 32.25 15.5523 32.25 15C32.25 14.4477 31.8023 14 31.25 14H8.75ZM8.75 19C8.19772 19 7.75 19.4477 7.75 20C7.75 20.5523 8.19772 21 8.75 21H31.25C31.8023 21 32.25 20.5523 32.25 20C32.25 19.4477 31.8023 19 31.25 19H8.75ZM7.75 25C7.75 24.4477 8.19772 24 8.75 24H10C10.5523 24 11 24.4477 11 25C11 25.5523 10.5523 26 10 26H8.75C8.19772 26 7.75 25.5523 7.75 25ZM15 24C14.4477 24 14 24.4477 14 25C14 25.5523 14.4477 26 15 26H25C25.5523 26 26 25.5523 26 25C26 24.4477 25.5523 24 25 24H15ZM29 25C29 24.4477 29.4477 24 30 24H31.25C31.8023 24 32.25 24.4477 32.25 25C32.25 25.5523 31.8023 26 31.25 26H30C29.4477 26 29 25.5523 29 25Z"
fill="#7367F0" />
</svg>
</div>
</div>
<div class="text-center">
<h5 class="mb-2">Registration 😎</h5>
<p class="mb-lg-0">Let them register to our services</p>
</div>
</div>
<div class="col-12 col-lg-4 px-6">
<div class="d-flex justify-content-center mb-4">
<div class="modal-refer-and-earn-step bg-label-primary">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
opacity="0.2"
fill-rule="evenodd"
clip-rule="evenodd"
d="M33.2656 23.1875L28.3594 17.2969C28.5469 20.9062 27.6562 25.1094 24.9062 29.9062L29.5937 33.6562C29.7604 33.7886 29.9581 33.8762 30.1682 33.9108C30.3782 33.9453 30.5936 33.9257 30.7939 33.8537C30.9942 33.7817 31.1728 33.6598 31.3128 33.4995C31.4527 33.3391 31.5495 33.1457 31.5937 32.9375L33.5156 24.25C33.562 24.0658 33.5634 23.8732 33.5199 23.6883C33.4764 23.5034 33.3892 23.3317 33.2656 23.1875ZM6.64061 23.2813L11.5469 17.4062C11.3594 21.0156 12.25 25.2188 15 30L10.3125 33.75C10.1469 33.8823 9.95029 33.9704 9.74127 34.0058C9.53225 34.0413 9.31764 34.023 9.11764 33.9527C8.91763 33.8824 8.73879 33.7623 8.59794 33.6039C8.4571 33.4454 8.35887 33.2537 8.31249 33.0469L6.39061 24.3438C6.34428 24.1596 6.3428 23.967 6.3863 23.7821C6.4298 23.5972 6.51701 23.4255 6.64061 23.2813Z"
fill="#7367F0" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.5868 2.31872C18.9844 1.99031 19.484 1.81055 19.9999 1.81055C20.5174 1.81055 21.0185 1.99141 21.4166 2.32172C22.9521 3.57204 26.2759 6.67263 28.1129 11.4477C28.7422 13.0835 29.1922 14.9038 29.3415 16.8978L34.1239 22.6367C34.3488 22.9011 34.5076 23.2152 34.5871 23.5532C34.666 23.8883 34.6646 24.2372 34.5832 24.5716L32.664 33.2626L32.6633 33.2657C32.5798 33.6381 32.403 33.9831 32.1495 34.2684C31.8959 34.5536 31.574 34.7696 31.214 34.8962C30.854 35.0228 30.4677 35.0557 30.0915 34.9919C29.7152 34.928 29.3614 34.7696 29.0633 34.5314L29.0628 34.531L24.6492 31.0001H15.3508L10.9372 34.531L10.9367 34.5314C10.6386 34.7696 10.2847 34.928 9.90851 34.9919C9.53227 35.0557 9.14598 35.0228 8.78597 34.8962C8.42596 34.7696 8.10406 34.5536 7.85053 34.2684C7.597 33.9831 7.42019 33.6381 7.33671 33.2657L7.33601 33.2626L5.4168 24.5716C5.33541 24.2372 5.33403 23.8883 5.41289 23.5532C5.49245 23.215 5.65141 22.9007 5.87655 22.6362L10.5662 17.0205C10.7036 14.9754 11.1625 13.1108 11.8119 11.4389C13.667 6.66274 17.0333 3.56278 18.5868 2.31872ZM27.372 17.4408C27.3612 17.3736 27.3574 17.3057 27.3603 17.2381C27.2407 15.3587 26.8236 13.6664 26.2463 12.1658C24.585 7.84765 21.5539 5.01206 20.15 3.86949L20.1401 3.86146L20.1401 3.8614C20.1008 3.82855 20.0512 3.81055 19.9999 3.81055C19.9487 3.81055 19.899 3.82855 19.8597 3.8614L19.8434 3.87475C18.4249 5.00948 15.3534 7.84484 13.6762 12.163C13.0763 13.7076 12.6489 15.4559 12.5469 17.4027C12.547 17.4384 12.5453 17.4741 12.5416 17.5098C12.3904 20.7895 13.1636 24.6279 15.5833 29.0001H24.4106C26.7972 24.5972 27.5428 20.7358 27.372 17.4408ZM32.5912 23.9216L29.326 20.0033C29.081 22.9478 28.1679 26.2039 26.2812 29.7444L30.3117 32.9689L30.312 32.9691C30.3451 32.9954 30.3843 33.013 30.426 33.02C30.4678 33.0271 30.5107 33.0235 30.5507 33.0094C30.5907 32.9953 30.6265 32.9713 30.6546 32.9396C30.6826 32.9082 30.7021 32.8702 30.7115 32.8292L30.7117 32.8282L32.6329 24.1282C32.635 24.1188 32.6372 24.1093 32.6396 24.0999C32.6469 24.0708 32.6471 24.0404 32.6403 24.0112C32.6334 23.982 32.6196 23.9549 32.6001 23.9322L32.5911 23.9216L32.5912 23.9216ZM10.6056 20.0936L7.40817 23.9224L7.39994 23.9322L7.39987 23.9322C7.38036 23.9549 7.36659 23.982 7.35972 24.0112C7.35285 24.0404 7.35309 24.0708 7.3604 24.0999C7.36277 24.1093 7.365 24.1188 7.36709 24.1282L9.28827 32.8282L9.28849 32.8292C9.29786 32.8702 9.31741 32.9082 9.34536 32.9397C9.37353 32.9713 9.40929 32.9953 9.4493 33.0094C9.4893 33.0235 9.53222 33.0271 9.57403 33.02C9.61574 33.013 9.65498 32.9954 9.68806 32.969L9.68827 32.9689L13.7131 29.749C11.8077 26.2443 10.8721 23.0167 10.6056 20.0936ZM16.5 35.0001C16.5 34.4478 16.9477 34.0001 17.5 34.0001H22.5C23.0523 34.0001 23.5 34.4478 23.5 35.0001C23.5 35.5524 23.0523 36.0001 22.5 36.0001H17.5C16.9477 36.0001 16.5 35.5524 16.5 35.0001ZM21.875 15.0001C21.875 16.0357 21.0355 16.8751 20 16.8751C18.9645 16.8751 18.125 16.0357 18.125 15.0001C18.125 13.9646 18.9645 13.1251 20 13.1251C21.0355 13.1251 21.875 13.9646 21.875 15.0001Z"
fill="#7367F0" />
</svg>
</div>
</div>
<div class="text-center">
<h5 class="mb-2">Free Trial 🎉</h5>
<p class="mb-0">Your friend will get 30 days free trial</p>
</div>
</div>
</div>
<hr class="mt-12 mb-6" />
<h5 class="mb-6">Invite your friends</h5>
<form class="row g-4" onsubmit="return false">
<div class="col-lg-10">
<label class="form-label" for="modalRnFEmail">Enter your friends email address and invite them to join {% get_theme_variables 'template_name' %} 😍</label>
<input type="text" id="modalRnFEmail" class="form-control" placeholder="example@domain.com" aria-label="example@domain.com" />
</div>
<div class="col-lg-2 d-flex align-items-end justify-content-end">
<button type="button" class="btn btn-primary w-100">Send</button>
</div>
</form>
<h5 class="my-6">Share the referral link</h5>
<form class="row g-4" onsubmit="return false">
<div class="col-lg-9">
<label class="form-label" for="modalRnFLink">You can also copy and send it or share it on your social media. 🚀</label>
<div class="input-group input-group-merge">
<input type="text" id="modalRnFLink" class="form-control" readonly value="{% get_theme_variables 'creator_url' %}" />
<span class="input-group-text text-primary cursor-pointer" id="basic-addon33">Copy link</span>
</div>
</div>
<div class="col-lg-3 d-flex align-items-end">
<div class="btn-social d-flex justify-content-between w-100">
<button type="button" class="btn btn-icon btn-facebook"><i class="icon-base ti tabler-brand-facebook icon-22px"></i></button>
<button type="button" class="btn btn-icon btn-twitter"><i class="icon-base ti tabler-brand-twitter icon-22px"></i></button>
<button type="button" class="btn btn-icon btn-linkedin"><i class="icon-base ti tabler-brand-linkedin icon-22px"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--/ Refer & Earn Modal -->

View File

@@ -0,0 +1,55 @@
{% load static %}
<!-- Payment Methods modal -->
<div class="modal fade" id="paymentMethods" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Select payment methods</h4>
<p>Supported payment methods</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom py-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<h6 class="m-0">Visa</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-sm-between align-items-center border-bottom pb-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<h6 class="m-0">American Express</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom pb-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<h6 class="m-0">Mastercard</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-between align-items-center border-bottom pb-4 mb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<h6 class="m-0">JCB</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
<div class="d-flex justify-content-between align-items-center pb-4">
<div class="d-flex gap-4 align-items-center">
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
<h6 class="m-0">Diners Club</h6>
</div>
<p class="m-0 d-none d-sm-block">Credit Card</p>
</div>
</div>
</div>
</div>
</div>
<!-- / Payment Methods modal -->

View File

@@ -0,0 +1,92 @@
{% load static %}
<!-- Payment provider modal -->
<div class="modal fade" id="paymentProvider" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Select payment providers</h4>
<p>Third-party payment providers</p>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom py-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0 me-12">Adyen</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">2Checkout</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Airpay</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Authorize.net</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Bambora</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Cayan</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between border-bottom pb-4 mb-4">
<h6 class="m-0 mb-2 mb-md-0">Chase Paymentech (Orbital)</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/ae-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="american-express-card" data-app-light-img="icons/payments/ae-light.png" data-app-dark-img="icons/payments/ae-dark.png" />
<img src="{% static 'img/icons/payments/jcb-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="jcb-card" data-app-light-img="icons/payments/jcb-light.png" data-app-dark-img="icons/payments/jcb-dark.png" />
<img src="{% static 'img/icons/payments/dc-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="diners-club-card" data-app-light-img="icons/payments/dc-light.png" data-app-dark-img="icons/payments/dc-dark.png" />
</div>
</div>
<div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-between pb-4">
<h6 class="m-0 mb-2 mb-md-0">Checkout.com</h6>
<div class="d-flex flex-wrap gap-4">
<img src="{% static 'img/icons/payments/visa-img.png' %}" class="img-fluid w-px-50 h-px-30" alt="visa-card" />
<img src="{% static 'img/icons/payments/master-' %}{{ COOKIES.theme|default:theme }}.png" class="img-fluid w-px-50 h-px-30" alt="master-card" data-app-light-img="icons/payments/master-light.png" data-app-dark-img="icons/payments/master-dark.png" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- / Payment provider modal -->

View File

@@ -0,0 +1,260 @@
{% load static %}
<!-- Share Project Modal -->
<div class="modal fade" id="shareProject" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-simple modal-enable-otp modal-share-project modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center">
<h4 class="mb-2">Share Project</h4>
<p>Share project with a team member</p>
</div>
</div>
<div class="mb-6 mx-4 mx-md-0">
<label for="select2Basic" class="form-label">Add Members</label>
<select id="select2Basic" class="form-select form-select-lg share-project-select" data-allow-clear="true">
<option data-name="Adelaide Nichols" data-image="img/avatars/13.png" selected>Adelaide Nichols</option>
<option data-name="Julian Murphy" data-image="img/avatars/9.png">Julian Murphy</option>
<option data-name="Sophie Gilbert" data-image="img/avatars/10.png">Sophie Gilbert</option>
<option data-name="Marvin Wheeler" data-image="img/avatars/7.png">Marvin Wheeler</option>
</select>
</div>
<h5 class="ms-4 ms-md-0">8 Members</h5>
<ul class="p-0 m-0 mx-4 mx-md-0">
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/1.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Lester Palmer</p>
<p class="small mb-0">pe&#64;vogeiz.net</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Edit</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/2.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Mattie Blair</p>
<p class="small mb-0">peromak&#64;zukedohik.gov</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Owner</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/3.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Marvin Wheeler</p>
<p class="small mb-0">rumet&#64;jujpejah.net</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Edit</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/4.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Nannie Ford</p>
<p class="small mb-0">negza&#64;nuv.io</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Comment</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/5.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Julian Murphy</p>
<p class="small mb-0">lunebame&#64;umdomgu.net</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can View</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/6.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Sophie Gilbert</p>
<p class="small mb-0">ha&#64;sugit.gov</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can View</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap mb-4">
<div class="avatar me-4">
<img src="{% static 'img/avatars/7.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Chris Watkins</p>
<p class="small mb-0">zokap&#64;mak.org</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Comment</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
<li class="d-flex flex-wrap">
<div class="avatar me-4">
<img src="{% static 'img/avatars/8.png' %}" alt="avatar" class="rounded-circle" />
</div>
<div class="d-flex justify-content-between flex-grow-1">
<div class="me-2">
<p class="mb-0 text-heading">Adelaide Nichols</p>
<p class="small mb-0">ujinomu&#64;jigo.com</p>
</div>
<div class="dropdown">
<button type="button" class="btn btn-text-secondary dropdown-toggle p-2 text-secondary" data-bs-toggle="dropdown" aria-expanded="false"><span class="d-none d-sm-inline-block">Can Edit</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a class="dropdown-item" href="javascript:void(0);">Owner</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Edit</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can Comment</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0);">Can View</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="d-flex align-items-start mt-6 align-items-sm-center mx-4 mx-md-0 mb-4 mb-md-0">
<i class="icon-base ti tabler-users me-2 text-heading"></i>
<div class="d-flex justify-content-between flex-grow-1 align-items-center flex-wrap gap-2">
<h6 class="mb-0">Public to {% get_theme_variables 'template_name' %} - {% get_theme_variables 'creator_name' %}</h6>
<button class="btn btn-primary"><i class="icon-base ti tabler-link icon-xs me-2"></i>Copy Project Link</button>
</div>
</div>
</div>
</div>
</div>
<!--/ Share Project Modal -->

View File

@@ -0,0 +1,100 @@
<!-- Two Factor Auth Modal -->
<div class="modal fade" id="twoFactorAuth" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-2">Select Authentication Method</h4>
<p>You also need to select a method by which the proxy authenticates to the directory serve.</p>
</div>
<div class="row">
<div class="col-12 mb-6">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioTemp1" data-bs-target="#twoFactorAuthOne" data-bs-toggle="modal">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp1" checked />
<span class="custom-option-header">
<span class="h6 mb-0 d-flex align-items-center"><i class="icon-base ti tabler-settings me-1"></i>Authenticator Apps</span>
</span>
<span class="custom-option-body">
<small>Get code from an app like Google Authenticator or Microsoft Authenticator.</small>
</span>
</label>
</div>
</div>
<div class="col-12">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioTemp2" data-bs-target="#twoFactorAuthTwo" data-bs-toggle="modal">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioTemp2" />
<span class="custom-option-header">
<span class="h6 mb-0 d-flex align-items-center"><i class="icon-base ti tabler-message me-1"></i>SMS</span>
</span>
<span class="custom-option-body">
<small>We will send a code via SMS if you need to use your backup login method.</small>
</span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Authentication App -->
<div class="modal fade" id="twoFactorAuthOne" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h4 class="mb-0">Add Authenticator App</h4>
</div>
<h5 class="mb-2 text-break">Authenticator Apps</h5>
<p class="mb-6">Using an authenticator app like Google Authenticator, Microsoft Authenticator, Authy, or 1Password, scan the QR code. It will generate a 6-digit code for you to enter below.</p>
<div class="text-center">
<img src="{% static 'img/icons/misc/authentication-QR.png' %}" alt="QR Code" width="150" />
</div>
<div class="alert alert-warning alert-dismissible mb-4 mt-6" role="alert">
<h5 class="alert-heading mb-1 text-break">ASDLKNASDA9AHS678dGhASD78AB</h5>
<p class="mb-0">If you're having trouble using the QR code, select manual entry on your app</p>
</div>
<div class="mb-6">
<label for="twoFactorAuthInput" class="form-label">Enter Authentication Code</label>
<input type="email" class="form-control" id="twoFactorAuthInput" name="twoFactorAuthInput" placeholder="123 456" />
</div>
<div class="text-end">
<button type="button" class="btn btn-label-secondary me-3" data-bs-toggle="modal" data-bs-target="#twoFactorAuth"><span class="align-middle">Cancel</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal" aria-label="Close"><span class="align-middle">Submit</span><i class="icon-base ti tabler-check icon-xs ms-2"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Authentication via SMS -->
<div class="modal fade" id="twoFactorAuthTwo" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-simple">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h5 class="mb-2">Verify Your Mobile Number for SMS</h5>
<p class="mb-6">Enter your mobile phone number with country code, and we will send you a verification code.</p>
<div class="mb-6">
<label for="twoFactorAuthInputSms" class="form-label">Phone number</label>
<input type="text" class="form-control" id="twoFactorAuthInputSms" name="twoFactorAuthInputSms" placeholder="202 555 0111" />
</div>
<div class="text-end">
<button type="button" class="btn btn-label-secondary me-3" data-bs-toggle="modal" data-bs-target="#twoFactorAuth"><span class="align-middle">Cancel</span></button>
<button type="button" class="btn btn-success" data-bs-dismiss="modal" aria-label="Close"><span class="align-middle">Submit</span><i class="icon-base ti tabler-check ms-2"></i></button>
</div>
</div>
</div>
</div>
</div>
<!--/ Two Factor Auth Modal -->
<script>
// Check selected custom option
window.Helpers.initCustomOptionCheck();
</script>

View File

@@ -0,0 +1,42 @@
<!-- Add New Credit Card Modal -->
<div class="modal fade" id="upgradePlanModal" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-simple modal-upgrade-plan">
<div class="modal-content">
<div class="modal-body p-4">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="text-center mb-6">
<h2>Upgrade Plan</h2>
<p class="text-body-secondary">Choose the best plan for user.</p>
</div>
<form id="upgradePlanForm" class="row g-4" onsubmit="return false">
{% csrf_token %}
<div class="col-sm-9">
<label class="form-label" for="choosePlan">Choose Plan</label>
<select id="choosePlan" name="choosePlan" class="form-select" aria-label="Choose Plan">
<option selected>Choose Plan</option>
<option value="standard">Standard - $99/month</option>
<option value="exclusive">Exclusive - $249/month</option>
<option value="Enterprise">Enterprise - $499/month</option>
</select>
</div>
<div class="col-sm-3 d-flex align-items-end">
<button type="submit" class="btn btn-primary">Upgrade</button>
</div>
</form>
</div>
<hr class="mx-md-n5 mx-n3" />
<div class="modal-body">
<h6 class="mb-0">User current plan is standard plan</h6>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div class="d-flex justify-content-center me-2 mt-1">
<sup class="h6 pricing-currency pt-1 mt-2 mb-0 me-1 text-primary">$</sup>
<h1 class="mb-0 text-primary">99</h1>
<sub class="pricing-duration mt-auto mb-5 pb-1 small text-body">/month</sub>
</div>
<button class="btn btn-label-danger cancel-subscription">Cancel Subscription</button>
</div>
</div>
</div>
</div>
</div>
<!--/ Add New Credit Card Modal -->

View File

@@ -0,0 +1,46 @@
<!-- Add Payment Sidebar -->
<div class="offcanvas offcanvas-end" id="addPaymentOffcanvas" aria-modal="true" role="dialog">
<div class="offcanvas-header border-bottom">
<h5 class="offcanvas-title">Add Payment</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body flex-grow-1">
<div class="d-flex justify-content-between bg-lighter p-2 mb-4">
<p class="mb-0">Invoice Balance:</p>
<p class="fw-medium mb-0">$5000.00</p>
</div>
<form>
<div class="mb-6">
<label class="form-label" for="invoiceAmount">Payment Amount</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" id="invoiceAmount" name="invoiceAmount" class="form-control invoice-amount" placeholder="100" />
</div>
</div>
<div class="mb-6">
<label class="form-label" for="payment-date">Payment Date</label>
<input id="payment-date" class="form-control invoice-date" type="text" />
</div>
<div class="mb-6">
<label class="form-label" for="payment-method">Payment Method</label>
<select class="form-select" id="payment-method">
<option value="" selected disabled>Select payment method</option>
<option value="Cash">Cash</option>
<option value="Bank Transfer">Bank Transfer</option>
<option value="Debit Card">Debit Card</option>
<option value="Credit Card">Credit Card</option>
<option value="Paypal">Paypal</option>
</select>
</div>
<div class="mb-6">
<label class="form-label" for="payment-note">Internal Payment Note</label>
<textarea class="form-control" id="payment-note" rows="2"></textarea>
</div>
<div class="mb-6 d-flex flex-wrap">
<button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">Send</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</form>
</div>
</div>
<!-- /Add Payment Sidebar -->

View File

@@ -0,0 +1,43 @@
<!-- Send Invoice Sidebar -->
<div class="offcanvas offcanvas-end" id="sendInvoiceOffcanvas" aria-hidden="true">
<div class="offcanvas-header mb-6 border-bottom">
<h5 class="offcanvas-title">Send Invoice</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body pt-0 flex-grow-1">
<form>
<div class="mb-6">
<label for="invoice-from" class="form-label">From</label>
<input type="text" class="form-control" id="invoice-from" value="shelbyComapny@email.com" placeholder="company@email.com" />
</div>
<div class="mb-6">
<label for="invoice-to" class="form-label">To</label>
<input type="text" class="form-control" id="invoice-to" value="qConsolidated@email.com" placeholder="company@email.com" />
</div>
<div class="mb-6">
<label for="invoice-subject" class="form-label">Subject</label>
<input type="text" class="form-control" id="invoice-subject" value="Invoice of purchased Admin Templates" placeholder="Invoice regarding goods" />
</div>
<div class="mb-6">
<label for="invoice-message" class="form-label">Message</label>
<textarea class="form-control" name="invoice-message" id="invoice-message" cols="3" rows="8">
Dear Queen Consolidated,
Thank you for your business, always a pleasure to work with you!
We have generated a new invoice in the amount of $95.59
We would appreciate payment of this invoice by 05/11/2021</textarea
>
</div>
<div class="mb-6">
<span class="badge bg-label-primary">
<i class="icon-base ti tabler-link icon-xs"></i>
<span class="align-middle">Invoice Attached</span>
</span>
</div>
<div class="mb-6 d-flex flex-wrap">
<button type="button" class="btn btn-primary me-4" data-bs-dismiss="offcanvas">Send</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</form>
</div>
</div>
<!-- /Send Invoice Sidebar -->

View File

@@ -0,0 +1,8 @@
<span class="text-primary">
<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z" fill="currentColor" />
<path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd" d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z" fill="#161616" />
<path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd" d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z" fill="#161616" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z" fill="currentColor" />
</svg>
</span>

View File

@@ -0,0 +1,592 @@
{% load static %}
<!-- Checkout Wizard -->
<div id="wizard-checkout" class="bs-stepper wizard-icons wizard-icons-example">
<div class="bs-stepper-header m-lg-auto border-0">
<div class="step" data-target="#checkout-cart">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-cart.svg' %}#wizardCart"></use>
</svg>
</span>
<span class="bs-stepper-label">Cart</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#checkout-address">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-address.svg' %}#wizardCheckoutAddress"></use>
</svg>
</span>
<span class="bs-stepper-label">Address</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#checkout-payment">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-payment.svg' %}#wizardPayment"></use>
</svg>
</span>
<span class="bs-stepper-label">Payment</span>
</button>
</div>
<div class="line">
<i class="icon-base ti tabler-chevron-right"></i>
</div>
<div class="step" data-target="#checkout-confirmation">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 60 60">
<use xlink:href="{% static 'svg/icons/wizard-checkout-confirmation.svg' %}#wizardConfirm"></use>
</svg>
</span>
<span class="bs-stepper-label">Confirmation</span>
</button>
</div>
</div>
<div class="bs-stepper-content border-top">
<form id="wizard-checkout-form" onSubmit="return false">
<!-- Cart -->
<div id="checkout-cart" class="content">
<div class="row">
<!-- Cart left -->
<div class="col-xl-8 mb-6 mb-xl-0">
<!-- Offer alert -->
<div class="alert alert-success alert-dismissible mb-4" role="alert">
<div class="d-flex gap-4">
<div class="alert-icon flex-shrink-0 rounded me-0">
<i class="icon-base ti tabler-percentage"></i>
</div>
<div class="flex-grow-1">
<h5 class="alert-heading mb-1">Available Offers</h5>
<ul class="list-unstyled mb-0">
<li>- 10% Instant Discount on Bank of America Corp Bank Debit and Credit cards</li>
<li>- 25% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA</li>
</ul>
</div>
</div>
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Shopping bag -->
<h5>My Shopping Bag (2 Items)</h5>
<ul class="list-group mb-4">
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0 d-flex align-items-center">
<img src="{% static 'img/products/1.png' %}" alt="google home" class="w-px-100" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<p class="me-3 mb-2">
<a href="javascript:void(0)" class="fw-medium"> <span class="text-heading">Google - Google Home - White</span></a>
</p>
<div class="text-body-secondary mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)" class="me-4">Apple</a> <span class="badge bg-label-success">In Stock</span></div>
<div class="read-only-ratings raty mb-2" data-read-only="true" data-score="4" data-number="5"></div>
<input type="number" class="form-control form-control-sm w-px-100" value="1" min="1" max="5" />
</div>
<div class="col-md-4">
<div class="text-md-end">
<button type="button" class="btn-close btn-pinned" aria-label="Close"></button>
<div class="my-2 mt-md-6 mb-md-4"><span class="text-primary">$299/</span><s class="text-body">$359</s></div>
<button type="button" class="btn btn-sm btn-label-primary">Move to wishlist</button>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0 d-flex align-items-center">
<img src="{% static 'img/products/2.png' %}" alt="google home" class="w-px-100" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<p class="me-3 mb-2">
<a href="javascript:void(0)" class="fw-medium"><span class="text-heading">Apple iPhone 11 (64GB, Black)</span></a>
</p>
<div class="text-body-secondary mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)" class="me-4">Apple</a> <span class="badge bg-label-success">In Stock</span></div>
<div class="read-only-ratings raty mb-2" data-read-only="true" data-score="4" data-number="5"></div>
<input type="number" class="form-control form-control-sm w-px-100" value="1" min="1" max="5" />
</div>
<div class="col-md-4">
<div class="text-md-end">
<button type="button" class="btn-close btn-pinned" aria-label="Close"></button>
<div class="my-2 mt-md-6 mb-md-4"><span class="text-primary">$299/</span><s class="text-body">$359</s></div>
<button type="button" class="btn btn-sm btn-label-primary">Move to wishlist</button>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
<!-- Wishlist -->
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item text-primary border-primary d-flex justify-content-between">
<span class="fw-medium">Add More Products From Wishlist</span>
<i class="icon-base ti tabler-arrow-right icon-xs scaleX-n1-rtl mt-50"></i>
</a>
</div>
</div>
<!-- Cart right -->
<div class="col-xl-4">
<div class="border rounded p-6 mb-4">
<!-- Offer -->
<h6>Offer</h6>
<div class="row g-4 mb-4">
<div class="col-8 col-xxl-8 col-xl-12">
<input type="text" class="form-control" placeholder="Enter Promo Code" aria-label="Enter Promo Code" />
</div>
<div class="col-4 col-xxl-4 col-xl-12">
<div class="d-grid">
<button type="button" class="btn btn-label-primary">Apply</button>
</div>
</div>
</div>
<!-- Gift wrap -->
<div class="bg-lighter rounded p-6">
<h6 class="mb-2">Buying gift for a loved one?</h6>
<p class="mb-2">Gift wrap and personalized message on card, Only for $2.</p>
<a href="javascript:void(0)" class="fw-medium">Add a gift wrap</a>
</div>
<hr class="mx-n6 my-6" />
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row mb-0 text-heading">
<dt class="col-6 fw-normal">Bag Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Coupon Discount</dt>
<dd class="col-6 text-end"><a href="javascript:void(0)">Apply Coupon</a></dd>
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Delivery Charges</dt>
<dd class="col-6 text-end"><s class="text-body-secondary">$5.00</s> <span class="badge bg-label-success ms-1">FREE</span></dd>
</dl>
<hr class="mx-n6 my-6" />
<dl class="row mb-0">
<dt class="col-6 text-heading">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
</dl>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-next">Place Order</button>
</div>
</div>
</div>
</div>
<!-- Address -->
<div id="checkout-address" class="content">
<div class="row">
<!-- Address left -->
<div class="col-xl-8 mb-6 mb-xl-0">
<!-- Select address -->
<p class="fw-medium text-heading">Select your preferable address</p>
<div class="row mb-6 g-6">
<div class="col-md">
<div class="form-check custom-option custom-option-basic checked">
<label class="form-check-label custom-option-content" for="customRadioAddress1">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioAddress1" checked="" />
<span class="custom-option-header mb-2">
<span class="fw-medium text-heading mb-0">John Doe (Default)</span>
<span class="badge bg-label-primary">Home</span>
</span>
<span class="custom-option-body">
<small
>4135 Parkway Street, Los Angeles, CA, 90017.<br />
Mobile : 1234567890 Card / Cash on delivery available</small
>
<span class="my-3 border-bottom d-block"></span>
<span class="d-flex"> <a class="me-4" href="javascript:void(0)">Edit</a> <a href="javascript:void(0)">Remove</a> </span>
</span>
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-basic">
<label class="form-check-label custom-option-content" for="customRadioAddress2">
<input name="customRadioTemp" class="form-check-input" type="radio" value="" id="customRadioAddress2" />
<span class="custom-option-header mb-2">
<span class="fw-medium text-heading mb-0">ACME Inc.</span>
<span class="badge bg-label-success">Office</span>
</span>
<span class="custom-option-body">
<small>87 Hoffman Avenue, New York, NY, 10016.<br />Mobile : 1234567890 Card / Cash on delivery available</small>
<span class="my-3 border-bottom d-block"></span>
<span class="d-flex"> <a class="me-4" href="javascript:void(0)">Edit</a> <a href="javascript:void(0)">Remove</a> </span>
</span>
</label>
</div>
</div>
</div>
<button type="button" class="btn btn-label-primary mb-6" data-bs-toggle="modal" data-bs-target="#addNewAddress">Add new address</button>
<!-- Choose Delivery -->
<p class="fw-medium text-heading">Choose Delivery Speed</p>
<div class="row mt-2">
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon position-relative checked">
<label class="form-check-label custom-option-content" for="customRadioDelivery1">
<span class="custom-option-body">
<i class="icon-base ti tabler-user icon-lg"></i>
<span class="custom-option-title mb-2">Standard</span>
<span class="badge bg-label-success btn-pinned">FREE</span>
<small>Get your product in 1 Week.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioDelivery1" checked="" />
</label>
</div>
</div>
<div class="col-md mb-md-0 mb-2">
<div class="form-check custom-option custom-option-icon position-relative">
<label class="form-check-label custom-option-content" for="customRadioDelivery2">
<span class="custom-option-body">
<i class="icon-base ti tabler-star icon-lg"></i>
<span class="custom-option-title mb-2">Express</span>
<span class="badge bg-label-secondary btn-pinned">$10</span>
<small>Get your product in 3-4 days.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioDelivery2" />
</label>
</div>
</div>
<div class="col-md">
<div class="form-check custom-option custom-option-icon position-relative">
<label class="form-check-label custom-option-content" for="customRadioDelivery3">
<span class="custom-option-body">
<i class="icon-base ti tabler-crown icon-lg"></i>
<span class="custom-option-title mb-2">Overnight</span>
<span class="badge bg-label-secondary btn-pinned">$15</span>
<small>Get your product in 0-1 days.</small>
</span>
<input name="customRadioIcon" class="form-check-input" type="radio" value="" id="customRadioDelivery3" />
</label>
</div>
</div>
</div>
</div>
<!-- Address right -->
<div class="col-xl-4">
<div class="border rounded p-6 mb-4">
<!-- Estimated Delivery -->
<h6>Estimated Delivery Date</h6>
<ul class="list-unstyled">
<li class="d-flex gap-4 align-items-center py-2 mb-4">
<div class="flex-shrink-0">
<img src="{% static 'img/products/1.png' %}" alt="google home" class="w-px-50" />
</div>
<div class="flex-grow-1">
<p class="mb-0"><a class="text-body" href="javascript:void(0)">Google - Google Home - White</a></p>
<p class="fw-medium mb-0">18th Nov 2021</p>
</div>
</li>
<li class="d-flex gap-4 align-items-center py-2">
<div class="flex-shrink-0">
<img src="{% static 'img/products/2.png' %}" alt="google home" class="w-px-50" />
</div>
<div class="flex-grow-1">
<p class="mb-0"><a class="text-body" href="javascript:void(0)">Apple iPhone 11 (64GB, Black)</a></p>
<p class="fw-medium mb-0">20th Nov 2021</p>
</div>
</li>
</ul>
<hr class="mx-n6 my-6" />
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row mb-0 text-heading">
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Delivery Charges</dt>
<dd class="col-6 text-end"><s class="text-body-secondary">$5.00</s> <span class="badge bg-label-success ms-2">FREE</span></dd>
</dl>
<hr class="mx-n6 my-6" />
<dl class="row mb-0">
<dt class="col-6 text-heading">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
</dl>
</div>
<div class="d-grid">
<button class="btn btn-primary btn-next">Place Order</button>
</div>
</div>
</div>
</div>
<!-- Payment -->
<div id="checkout-payment" class="content">
<div class="row">
<!-- Payment left -->
<div class="col-xl-8 mb-6 mb-xl-0">
<!-- Offer alert -->
<div class="alert alert-success alert-dismissible mb-6" role="alert">
<div class="d-flex gap-4">
<div class="alert-icon flex-shrink-0 rounded me-0">
<i class="icon-base ti tabler-percentage"></i>
</div>
<div class="flex-grow-1">
<h5 class="alert-heading mb-1">Available Offers</h5>
<ul class="list-unstyled mb-0">
<li>- 10% Instant Discount on Bank of America Corp Bank Debit and Credit cards</li>
<li>- 25% Cashback Voucher of up to $60 on first ever PayPal transaction. TCA</li>
</ul>
</div>
</div>
<button type="button" class="btn-close btn-pinned" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<!-- Payment Tabs -->
<div class="col-xxl-6 col-lg-8">
<div class="nav-align-top">
<ul class="nav nav-pills card-header-pills row-gap-2 flex-wrap" id="paymentTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-cc-tab" data-bs-toggle="pill" data-bs-target="#pills-cc" type="button" role="tab" aria-controls="pills-cc" aria-selected="true">Card</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-cod-tab" data-bs-toggle="pill" data-bs-target="#pills-cod" type="button" role="tab" aria-controls="pills-cod" aria-selected="false">Cash On Delivery</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-gift-card-tab" data-bs-toggle="pill" data-bs-target="#pills-gift-card" type="button" role="tab" aria-controls="pills-gift-card" aria-selected="false">Gift Card</button>
</li>
</ul>
</div>
<div class="tab-content px-0 pb-0" id="paymentTabsContent">
<!-- Credit card -->
<div class="tab-pane fade show active" id="pills-cc" role="tabpanel" aria-labelledby="pills-cc-tab">
<div class="row g-6">
<div class="col-12">
<label class="form-label w-100" for="paymentCard">Card Number</label>
<div class="input-group input-group-merge">
<input id="paymentCard" name="paymentCard" class="form-control credit-card-mask" type="text" placeholder="1356 3215 6548 7898" aria-describedby="paymentCard2" />
<span class="input-group-text cursor-pointer p-1" id="paymentCard2"><span class="card-type"></span></span>
</div>
</div>
<div class="col-12 col-md-4">
<label class="form-label" for="paymentCardName">Name</label>
<input type="text" id="paymentCardName" class="form-control" placeholder="John Doe" />
</div>
<div class="col-6 col-md-4">
<label class="form-label" for="paymentCardExpiryDate">Exp. Date</label>
<input type="text" id="paymentCardExpiryDate" class="form-control expiry-date-mask" placeholder="MM/YY" />
</div>
<div class="col-6 col-md-4">
<label class="form-label" for="paymentCardCvv">CVV Code</label>
<div class="input-group input-group-merge">
<input type="text" id="paymentCardCvv" class="form-control cvv-code-mask" maxlength="3" placeholder="654" />
<span class="input-group-text cursor-pointer" id="paymentCardCvv2"><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">
<div class="form-check form-switch mt-2">
<input type="checkbox" class="form-check-input" id="cardFutureBilling" />
<label for="cardFutureBilling" class="form-check-label">Save card for future billing?</label>
</div>
</div>
<div class="col-12">
<button type="button" class="btn btn-primary btn-next me-3">Save Changes</button>
<button type="reset" class="btn btn-label-secondary">Reset</button>
</div>
</div>
</div>
<!-- COD -->
<div class="tab-pane fade" id="pills-cod" role="tabpanel" aria-labelledby="pills-cod-tab">
<p>Cash on Delivery is a type of payment method where the recipient make payment for the order at the time of delivery rather than in advance.</p>
<button type="button" class="btn btn-primary btn-next">Pay On Delivery</button>
</div>
<!-- Gift card -->
<div class="tab-pane fade" id="pills-gift-card" role="tabpanel" aria-labelledby="pills-gift-card-tab">
<h6>Enter Gift Card Details</h6>
<div class="row g-5">
<div class="col-12">
<label for="giftCardNumber" class="form-label">Gift card number</label>
<input type="number" class="form-control" id="giftCardNumber" placeholder="Gift card number" />
</div>
<div class="col-12">
<label for="giftCardPin" class="form-label">Gift card pin</label>
<input type="number" class="form-control" id="giftCardPin" placeholder="Gift card pin" />
</div>
<div class="col-12">
<button type="button" class="btn btn-primary btn-next">Redeem Gift Card</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Address right -->
<div class="col-xl-4">
<div class="border rounded p-6">
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row text-heading">
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-6 fw-normal">Delivery Charges</dt>
<dd class="col-6 text-end"><s class="text-body-secondary">$5.00</s> <span class="badge bg-label-success ms-1">FREE</span></dd>
</dl>
<hr class="mx-n6 my-6" />
<dl class="row">
<dt class="col-6 text-heading mb-3">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
<dt class="col-6 fw-medium text-heading">Deliver to:</dt>
<dd class="col-6 fw-medium text-end mb-0"><span class="badge bg-label-primary">Home</span></dd>
</dl>
<!-- Address Details -->
<address>
<span class="text-heading fw-medium"> John Doe (Default),</span><br />
4135 Parkway Street, <br />
Los Angeles, CA, 90017. <br />
Mobile : +1 906 568 2332
</address>
<a href="javascript:void(0)" class="fw-medium">Change address</a>
</div>
</div>
</div>
</div>
<!-- Confirmation -->
<div id="checkout-confirmation" class="content">
<div class="row mb-6">
<div class="col-12 col-lg-8 mx-auto text-center mb-2">
<h4>Thank You! 😇</h4>
<p>Your order <a href="javascript:void(0)" class="text-heading fw-medium">#1536548131</a> has been placed!</p>
<p>We sent an email to <a href="mailto:john.doe@example.com" class="text-heading fw-medium">john.doe@example.com</a> with your order confirmation and receipt. If the email hasn't arrived within two minutes, please check your spam folder to see if the email was routed there.</p>
<p>
<span><i class="icon-base ti tabler-clock me-1 text-heading"></i> Time placed:&nbsp;</span> 25/05/2020 13:35pm
</p>
</div>
<!-- Confirmation details -->
<div class="col-12">
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item flex-fill p-6 text-body">
<h6 class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-map-pin"></i> Shipping</h6>
<address class="mb-0">
John Doe <br />
4135 Parkway Street,<br />
Los Angeles, CA 90017,<br />
USA
</address>
<p class="mb-0 mt-4">+123456789</p>
</li>
<li class="list-group-item flex-fill p-6 text-body">
<h6 class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-credit-card"></i> Billing Address</h6>
<address class="mb-0">
John Doe <br />
4135 Parkway Street,<br />
Los Angeles, CA 90017,<br />
USA
</address>
<p class="mb-0 mt-4">+123456789</p>
</li>
<li class="list-group-item flex-fill p-6 text-body">
<h6 class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-ship"></i> Shipping Method</h6>
<p class="fw-medium mb-4">Preferred Method:</p>
Standard Delivery<br />
(Normally 3-4 business days)
</li>
</ul>
</div>
</div>
<div class="row">
<!-- Confirmation items -->
<div class="col-xl-9 mb-6 mb-xl-0">
<ul class="list-group">
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0">
<img src="{% static 'img/products/1.png' %}" alt="google home" class="w-px-80" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<a href="javascript:void(0)">
<h6 class="mb-2">Google - Google Home - White</h6>
</a>
<div class="text-body mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)" class="me-3">Google</a> <span class="badge bg-label-success">In Stock</span></div>
</div>
<div class="col-md-4">
<div class="text-md-end">
<div class="my-2 my-lg-6"><span class="text-primary">$299/</span><s class="text-body-secondary">$359</s></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item p-6">
<div class="d-flex gap-4">
<div class="flex-shrink-0">
<img src="{% static 'img/products/2.png' %}" alt="google home" class="w-px-80" />
</div>
<div class="flex-grow-1">
<div class="row">
<div class="col-md-8">
<a href="javascript:void(0)">
<h6 class="mb-2">Apple iPhone 11 (64GB, Black)</h6>
</a>
<div class="text-body mb-2 d-flex flex-wrap"><span class="me-1">Sold by:</span> <a href="javascript:void(0)">Apple</a></div>
</div>
<div class="col-md-4">
<div class="text-md-end">
<div class="my-2 my-lg-6"><span class="text-primary">$299/</span><s class="text-body-secondary">$359</s></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- Confirmation total -->
<div class="col-xl-3">
<div class="border rounded p-6">
<!-- Price Details -->
<h6>Price Details</h6>
<dl class="row mb-0 text-heading">
<dt class="col-6 fw-normal">Order Total</dt>
<dd class="col-6 text-end">$1198.00</dd>
<dt class="col-sm-6 text-heading fw-normal">Charges</dt>
<dd class="col-sm-6 text-end text-body-secondary">$5.00<span class="badge bg-label-success ms-2">FREE</span></dd>
</dl>
<hr class="mx-n6 mb-6" />
<dl class="row mb-0">
<dt class="col-6 text-heading">Total</dt>
<dd class="col-6 fw-medium text-end text-heading mb-0">$1198.00</dd>
</dl>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!--/ Checkout Wizard -->