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,2 @@
# Register your models here.

View File

@@ -0,0 +1,6 @@
from django.apps import AppConfig
class ExtendedUiConfig(AppConfig):
default_auto_field = "django.db.models.BigAutoField"
name = "apps.extended_ui"

View File

@@ -0,0 +1,2 @@
# Create your models here.

View File

@@ -0,0 +1,246 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Avatar - Extended UI{% endblock %}
{% block content %}
<div class="row gy-6">
<div class="col-md-6">
<!-- Avatar Sizes -->
<div class="card">
<h5 class="card-header">Sizes</h5>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="avatar avatar-xs me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar avatar-sm me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar avatar-md me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar avatar-lg me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar avatar-xl">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
</div>
</div>
<!--/ Avatar Sizes -->
</div>
<div class="col-md-6">
<!-- Avatar Initials -->
<div class="card">
<h5 class="card-header">Initials</h5>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-primary">pi</span>
</div>
<div class="avatar avatar-sm me-2">
<span class="avatar-initial rounded-circle bg-secondary">pi</span>
</div>
<div class="avatar me-2">
<span class="avatar-initial rounded-circle bg-success">pi</span>
</div>
<div class="avatar avatar-md me-2">
<span class="avatar-initial rounded-circle bg-danger">pi</span>
</div>
<div class="avatar avatar-lg me-2">
<span class="avatar-initial rounded-circle bg-warning">pi</span>
</div>
<div class="avatar avatar-xl">
<span class="avatar-initial rounded-circle bg-info">pi</span>
</div>
</div>
</div>
</div>
<!--/ Avatar Initials -->
</div>
<div class="col-md-6">
<!-- Avatar Label Initials -->
<div class="card">
<h5 class="card-header">Label Initials</h5>
<div class="card-body">
<div class="d-flex align-items-center flex-wrap">
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-label-primary">pi</span>
</div>
<div class="avatar avatar-sm me-2">
<span class="avatar-initial rounded-circle bg-label-secondary">pi</span>
</div>
<div class="avatar me-2">
<span class="avatar-initial rounded-circle bg-label-success">pi</span>
</div>
<div class="avatar avatar-md me-2">
<span class="avatar-initial rounded-circle bg-label-danger">pi</span>
</div>
<div class="avatar avatar-lg me-2">
<span class="avatar-initial rounded-circle bg-label-warning">pi</span>
</div>
<div class="avatar avatar-xl me-2">
<span class="avatar-initial rounded-circle bg-label-info">pi</span>
</div>
</div>
</div>
</div>
<!--/ Avatar Initials -->
</div>
<div class="col-md-6">
<!-- Avatar Shapes -->
<div class="card h-100">
<h5 class="card-header">Shapes</h5>
<div class="card-body">
<div class="d-flex align-items-center my-4">
<div class="avatar me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" />
</div>
</div>
</div>
</div>
<!--/ Avatar Shapes -->
</div>
<div class="col-md-6">
<!-- Avatar Status Indicator -->
<div class="card">
<h5 class="card-header">Status Indicator</h5>
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar me-2 avatar-online">
<img src="{% static 'img/avatars/8.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar me-2 avatar-away">
<img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar me-2 avatar-busy">
<img src="{% static 'img/avatars/5.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar avatar-offline">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
</div>
</div>
<!--/ Avatar Status Indicator -->
</div>
<div class="col-md-6">
<!-- Avatar Status Indicator -->
<div class="card">
<h5 class="card-header">Lable Avatar Status Indicator</h5>
<div class="card-body">
<div class="d-flex align-items-center">
<div class="avatar me-2 avatar-online">
<span class="avatar-initial rounded-circle bg-label-success">pi</span>
</div>
<div class="avatar me-2 avatar-away">
<span class="avatar-initial rounded-circle bg-label-warning">pi</span>
</div>
<div class="avatar me-2 avatar-busy">
<span class="avatar-initial rounded-circle bg-label-primary">pi</span>
</div>
<div class="avatar me-2 avatar-offline">
<span class="avatar-initial rounded-circle bg-label-secondary">pi</span>
</div>
</div>
</div>
</div>
<!--/ Avatar Status Indicator -->
</div>
<!-- Avatar Group -->
<div class="col">
<div class="card">
<h5 class="card-header">Avatar Group</h5>
<div class="card-body">
<div class="row">
<div class="col-md-3 col-sm-6">
<small class="fw-medium">Default</small>
<div class="d-flex align-items-center avatar-group my-4">
<div class="avatar">
<img src="{% static 'img/avatars/5.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/12.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/6.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/10.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<small class="fw-medium">Pull Up</small>
<div class="d-flex align-items-center avatar-group my-4">
<div class="avatar">
<img src="{% static 'img/avatars/5.png' %}" alt="Avatar" class="rounded-circle pull-up" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/12.png' %}" alt="Avatar" class="rounded-circle pull-up" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/6.png' %}" alt="Avatar" class="rounded-circle pull-up" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/10.png' %}" alt="Avatar" class="rounded-circle pull-up" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<small class="fw-medium">Pull Up with Tooltip</small>
<ul class="list-unstyled m-0 d-flex align-items-center avatar-group my-4">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/10.png' %}" alt="Avatar" />
</li>
</ul>
</div>
<div class="col-md-3 col-sm-6">
<small class="fw-medium">Avatar with count </small>
<div class="d-flex align-items-center avatar-group my-4">
<div class="avatar">
<img src="{% static 'img/avatars/5.png' %}" alt="Avatar" class="rounded-circle pull-up" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/12.png' %}" alt="Avatar" class="rounded-circle pull-up" />
</div>
<div class="avatar">
<img src="{% static 'img/avatars/6.png' %}" alt="Avatar" class="rounded-circle pull-up" />
</div>
<div class="avatar">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Avatar Group -->
</div>
{% endblock %}

View File

@@ -0,0 +1,142 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}BlockUI - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/spinkit/spinkit.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/notiflix/notiflix.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/notiflix/notiflix.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-blockui.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Notiflix -->
<div class="row gy-6">
<!-- Notiflix Section-->
<div class="col-xl-6 col-12">
<div class="card h-100">
<h5 class="card-header">Basic Examples</h5>
<div class="card-body">
<div class="border p-4" id="section-block">
<p>Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis neglegentur ut, oporteat salutandi dignissim at mea. Pericula erroribus quaerendum ex duo, his autem accusamus ad, alienum detracto rationibus vis et. No est volumus ocurreret vituperata.</p>
</div>
<div class="demo-inline-spacing">
<button class="btn btn-primary btn-section-block">Default</button>
<button class="btn btn-primary btn-section-block-overlay">Overlay Color</button>
<button class="btn btn-primary btn-section-block-spinner">Custom Spinner</button>
<button class="btn btn-primary btn-section-block-custom">Custom Message</button>
<button class="btn btn-primary btn-section-block-multiple">Multiple Message</button>
<button class="btn btn-primary remove-btn">remove/unblock</button>
</div>
</div>
</div>
</div>
<!-- /Notiflix Section-->
<!-- Notiflix Card-->
<div class="col-xl-6 col-12">
<div class="card" id="card-block">
<h5 class="card-header">Card Blocking</h5>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis neglegentur ut, oporteat salutandi dignissim at mea. Pericula erroribus quaerendum ex duo, his autem accusamus ad, alienum detracto rationibus vis et. No est volumus ocurreret vituperata.</p>
<p class="card-text">Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis neglegentur ut, oporteat salutandi dignissim</p>
<div class="notiflix-btn demo-inline-spacing">
<button class="btn btn-primary btn-card-block">Default</button>
<button class="btn btn-primary btn-card-block-overlay">Overlay Color</button>
<button class="btn btn-primary btn-card-block-spinner">Custom Spinner</button>
<button class="btn btn-primary btn-card-block-custom">Custom Message</button>
<button class="btn btn-primary btn-card-block-multiple">Multiple Message</button>
<button class="btn btn-primary remove-card-btn">remove/unblock</button>
</div>
</div>
</div>
</div>
<!-- /Notiflix Card-->
<!-- Notiflix Page-->
<div class="col-xl-6 col-12">
<div class="card" id="page-block">
<h5 class="card-header">Page Blocking</h5>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis neglegentur ut, oporteat salutandi dignissim at mea. Pericula erroribus quaerendum ex duo, his autem accusamus ad, alienum detracto rationibus vis et. No est volumus ocurreret vituperata.</p>
<p class="card-text">Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis neglegentur ut, oporteat salutandi dignissim</p>
<div class="block-ui-btn demo-inline-spacing">
<button class="btn btn-primary btn-page-block">Default</button>
<button class="btn btn-primary btn-page-block-overlay">Overlay Color</button>
<button class="btn btn-primary btn-page-block-spinner">Custom Spinner</button>
<button class="btn btn-primary btn-page-block-custom">Custom Message</button>
<button class="btn btn-primary btn-page-block-multiple">Multiple Message</button>
<button class="btn btn-primary remove-page-btn">remove/unblock</button>
</div>
</div>
</div>
</div>
<!-- /Notiflix Page-->
<!-- Notiflix options-->
<div class="col-xl-6 col-12">
<div class="card" id="option-block">
<h5 class="card-header">Blocking with multiple options</h5>
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis neglegentur ut, oporteat salutandi dignissim at mea. Pericula erroribus quaerendum ex duo, his autem accusamus ad, alienum detracto rationibus vis et. No est volumus ocurreret vituperata.</p>
<p class="card-text">Lorem ipsum dolor sit amet, an vel affert soleat possim. Usu meis neglegentur ut, oporteat salutandi dignissim</p>
<div class="notiflix2-btn demo-inline-spacing">
<button class="btn btn-primary btn-option-block">Default</button>
<button class="btn btn-primary btn-option-block-hourglass">Hourglass</button>
<button class="btn btn-primary btn-option-block-circle">Circle</button>
<button class="btn btn-primary btn-option-block-arrows">Arrows</button>
<button class="btn btn-primary btn-option-block-dots">Dots</button>
<button class="btn btn-primary btn-option-block-pulse">Pulse</button>
<button class="btn btn-primary remove-option-btn">remove/unblock</button>
</div>
</div>
</div>
</div>
<!-- /Notiflix options-->
<!-- Notiflix Form-->
<div class="col-xl-6 col-12">
<div class="card">
<h5 class="card-header">Form Block</h5>
<div class="card-body">
<div class="p-2 form-block">
<div class="mb-4">
<label class="form-label" for="username">Username</label>
<input class="form-control" type="text" id="username" placeholder="username" />
</div>
<div class="mb-4">
<label class="form-label" for="email">Email</label>
<input class="form-control" type="email" id="email" placeholder="Email" />
</div>
<div class="mb-4">
<label class="form-label" for="password">Password</label>
<input class="form-control" type="password" id="password" placeholder="Password" />
</div>
<div class="mb-4 text-end">
<button class="btn btn-primary disabled me-sm-4 me-2">Submit</button>
<button class="btn btn-label-secondary disabled">Reset</button>
</div>
</div>
<div class="block-ui-btn demo-inline-spacing">
<button class="btn btn-primary btn-form-block">Default</button>
<button class="btn btn-primary btn-form-block-overlay">Overlay Color</button>
<button class="btn btn-primary btn-form-block-spinner">Custom Spinner</button>
<button class="btn btn-primary btn-form-block-custom">Custom Message</button>
<button class="btn btn-primary btn-form-block-multiple">Multiple Message</button>
<button class="btn btn-primary remove-form-btn">remove/unblock</button>
</div>
</div>
</div>
</div>
<!-- /Notiflix Form-->
</div>
<!-- /Notiflix -->
{% endblock %}

View File

@@ -0,0 +1,313 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Drag and Drop - Extended UI{% endblock %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/sortablejs/sortable.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-drag-and-drop.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row gy-6">
<!-- Cards Draggable -->
<div class="col-12">
<div class="row gy-6" id="sortable-cards">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move">
<div class="card-body text-center">
<h2>
<i class="icon-base ti tabler-shopping-cart icon-42px text-success"></i>
</h2>
<h4>Monthly Sales</h4>
<h5>2362</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move">
<div class="card-body text-center">
<h2>
<i class="icon-base ti tabler-world icon-42px text-info"></i>
</h2>
<h4>Monthly Visits</h4>
<h5>687,123</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move">
<div class="card-body text-center">
<h2>
<i class="icon-base ti tabler-gift icon-42px text-danger"></i>
</h2>
<h4>Products</h4>
<h5>985</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="card drag-item cursor-move">
<div class="card-body text-center">
<h2>
<i class="icon-base ti tabler-user icon-42px text-primary"></i>
</h2>
<h4>Users</h4>
<h5>105,652</h5>
</div>
</div>
</div>
</div>
</div>
<!-- /Cards Draggable ends -->
<!-- Images Rearrange Example-->
<div class="col-12">
<div class="card">
<h5 class="card-header">Images</h5>
<div class="card-body">
<div class="d-flex flex-wrap mb-4 gap-2" id="image-list-1">
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/1.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/2.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/3.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/4.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/5.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/6.png' %}" alt="avatar" height="48" width="48" />
</div>
<div class="d-flex flex-wrap gap-2" id="image-list-2">
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/7.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/8.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/9.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/10.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/11.png' %}" alt="avatar" height="48" width="48" />
<img class="rounded-circle drag-item cursor-move" src="{% static 'img/avatars/12.png' %}" alt="avatar" height="48" width="48" />
</div>
</div>
</div>
</div>
<!-- /Images Rearrange Example-->
<!-- Multiple Lists Draggable -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Multiple List</h5>
<div class="card-body">
<div class="row">
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Pending Tasks</p>
<ul class="list-group list-group-flush" id="pending-tasks">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy products.</span>
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Reply to emails.</span>
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Write blog post.</span>
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Update packages.</span>
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New blog layout.</span>
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="avatar" height="32" width="32" />
</li>
</ul>
</div>
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Completed Tasks</p>
<ul class="list-group list-group-flush" id="completed-tasks">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New icons set for an iOS app.</span>
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Fix validation bugs and commit.</span>
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Help Web developers with HTML integration.</span>
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy antivirus.</span>
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Answer support tickets.</span>
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="avatar" height="32" width="32" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Multiple Lists Draggable ends -->
<!-- Cloning Example -->
<div class="col-sm-12">
<div class="card">
<h5 class="card-header">Cloning</h5>
<div class="card-body">
<div class="row">
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Pending Tasks</p>
<ul class="list-group list-group-flush" id="clone-source-1">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy products.</span>
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Reply to emails.</span>
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Write blog post.</span>
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Update packages.</span>
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New blog layout.</span>
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="avatar" height="32" width="32" />
</li>
</ul>
</div>
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Completed Tasks</p>
<ul class="list-group list-group-flush" id="clone-source-2">
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>New icons set for an iOS app.</span>
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Fix validation bugs and commit.</span>
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span> Help Web developers with HTML integration.</span>
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Buy antivirus.</span>
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item drag-item cursor-move d-flex justify-content-between align-items-center">
<span>Answer support tickets.</span>
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="avatar" height="32" width="32" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Cloning Example ends -->
<!-- Handles Example -->
<div class="col-sm-12">
<div class="card">
<h5 class="card-header">Handle</h5>
<div class="card-body">
<div class="row">
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Pending Tasks</p>
<ul class="list-group list-group-flush" id="handle-list-1">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Buy products</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Reply to emails</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Write blog post</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Update packages</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>New blog layout</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="avatar" height="32" width="32" />
</li>
</ul>
</div>
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>Completed Tasks</p>
<ul class="list-group list-group-flush" id="handle-list-2">
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>New icons set for an iOS app</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/1.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Fix validation bugs and commit</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/2.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Help Web developers with HTML integration</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/3.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Buy antivirus</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/4.png' %}" alt="avatar" height="32" width="32" />
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span class="d-flex justify-content-between align-items-md-center flex-wrap gap-2">
<i class="drag-handle cursor-move icon-base ti tabler-menu-2 align-text-bottom"></i>
<span>Answer support tickets</span>
</span>
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="avatar" height="32" width="32" />
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Handles Example ends -->
</div>
{% endblock %}

View File

@@ -0,0 +1,51 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Plyr - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/plyr/plyr.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/plyr/plyr.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-media-player.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row gy-6">
<!-- Video Player -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Video</h5>
<div class="card-body">
<video class="w-100" poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="plyr-video-player" playsinline controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
<!-- /Video Player -->
<!-- Audio Player -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Audio</h5>
<div class="card-body">
<audio class="w-100" id="plyr-audio-player" controls>
<source src="{% static 'audio/Water_Lily.mp3' %}" type="audio/mp3" />
</audio>
</div>
</div>
</div>
<!-- /Audio Player -->
</div>
{% endblock %}

View File

@@ -0,0 +1,166 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Miscellaneous - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/notyf/notyf.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/clipboard/clipboard.js' %}"></script>
<script src="{% static 'vendor/libs/moment/moment.js' %}"></script>
<script src="{% static 'vendor/libs/jquery-idletimer/jquery-idletimer.js' %}"></script>
<script src="{% static 'vendor/libs/numeral/numeral.js' %}"></script>
<script src="{% static 'vendor/libs/notyf/notyf.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-misc-clipboardjs.js' %}"></script>
<script src="{% static 'js/extended-ui-misc-idle-timer.js' %}"></script>
<script src="{% static 'js/extended-ui-misc-numeraljs.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row gy-6">
<!-- Clipboard -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Clipboard</h5>
<div class="card-body">
<div class="row">
<div class="col-md-4 col-sm-12 pe-0 mb-md-0 mb-2">
<input class="form-control" id="clipboard-example" type="text" value="Copy Me!" />
</div>
<div class="col-md-4 col-sm-12">
<button class="clipboard-btn btn btn-primary me-2" data-clipboard-action="copy" data-clipboard-target="#clipboard-example">Copy</button>
<button class="clipboard-btn btn btn-primary" data-clipboard-action="cut" data-clipboard-target="#clipboard-example">Cut</button>
</div>
</div>
</div>
</div>
</div>
<!-- /Clipboard -->
<!-- Ideal Timer -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Ideal Timer</h5>
<div class="card-body">
<div class="row">
<div class="col-md-6 col-12 mb-md-0 mb-6">
<p>
Document
<small>5 second timeout</small>
</p>
<div class="btn-group mb-4">
<button type="button" id="document-Pause" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Pause</span>
<i class="icon-base ti tabler-pause icon-xs d-sm-none"></i>
</button>
<button type="button" id="document-Resume" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Resume</span>
<i class="icon-base ti tabler-play icon-xs d-sm-none"></i>
</button>
<button type="button" id="document-Elapsed" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Elapsed</span>
<i class="icon-base ti tabler-hourglass icon-xs d-sm-none"></i>
</button>
<button type="button" id="document-Init" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Init</span>
<i class="icon-base ti tabler-plus icon-xs d-sm-none"></i>
</button>
<button type="button" id="document-Destroy" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Destroy</span>
<i class="icon-base ti tabler-x icon-xs d-sm-none"></i>
</button>
</div>
<textarea rows="10" cols="30" id="document-Status" class="form-control alert"></textarea>
</div>
<div class="col-md-6 col-12">
<p>
Element
<small>3 second timeout</small>
</p>
<div class="btn-group mb-4">
<button type="button" id="element-Reset" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Reset</span>
<i class="icon-base ti tabler-refresh icon-xs d-sm-none"></i>
</button>
<button type="button" id="element-LastActive" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Last Active</span>
<i class="icon-base ti tabler-clock-2 icon-xs d-sm-none"></i>
</button>
<button type="button" id="element-Remaining" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">Remaining</span>
<i class="icon-base ti tabler-device-watch-stats-2 icon-xs d-sm-none"></i>
</button>
<button type="button" id="element-State" class="btn btn-primary btn-sm">
<span class="d-none d-sm-block">State</span>
<i class="icon-base ti tabler-device-watch icon-xs d-sm-none"></i>
</button>
</div>
<textarea rows="10" cols="30" id="element-Status" class="form-control alert"></textarea>
</div>
</div>
</div>
</div>
</div>
<!-- /Ideal Timer -->
<!-- NumeralJS -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Numeral JS</h5>
<div class="card-body">
<div class="table-responsive">
<table class="table ">
<thead>
<tr>
<th class="border-top-0">Input</th>
<th class="border-top-0">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>numeral(974)</td>
<td class="dNum"></td>
</tr>
<tr>
<td>numeral(1230974).format('0.0a')</td>
<td class="fNum"></td>
</tr>
<tr>
<td>numeral(1000.234).format('$0,0.00')</td>
<td class="fCurrency"></td>
</tr>
<tr>
<td>numeral(3467479682787).format('0.000 ib')</td>
<td class="fBytes"></td>
</tr>
<tr>
<td>numeral(0.974878234).format('0.000%')</td>
<td class="fPercent"></td>
</tr>
<tr>
<td>numeral(63846).format('00:00:00')</td>
<td class="fTime"></td>
</tr>
<tr>
<td>numeral(1123456789).format('0,0e+0')</td>
<td class="fExponential"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /NumeralJS -->
</div>
{% endblock %}

View File

@@ -0,0 +1,81 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Perfect Scrollbar - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/perfect-scrollbar/perfect-scrollbar.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-perfect-scrollbar.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row gy-6">
<!-- Vertical Scrollbar -->
<div class="col-md-6 col-sm-12">
<div class="card overflow-hidden" style="height: 300px;">
<h5 class="card-header">Vertical Scrollbar</h5>
<div class="card-body" id="vertical-example">
<p>
Sweet roll I love I love. Tiramisu I love soufflé cake tart sweet roll cotton candy cookie. Macaroon biscuit dessert. Bonbon cake soufflé jelly gummi bears lemon drops. Chocolate bar I love macaroon danish candy pudding. Jelly carrot cake I love tart cake bear claw macaroon candy candy canes. Muffin gingerbread sweet jujubes croissant sweet roll. Topping muffin carrot cake sweet. Toffee chocolate muffin I love croissant. Donut carrot cake ice cream ice cream. Wafer I love pie danish
marshmallow cheesecake oat cake pie I love. Icing pie chocolate marzipan jelly ice cream cake.
</p>
<p>
Marzipan oat cake caramels chocolate. Lemon drops cheesecake jelly beans sweet icing pudding croissant. Donut candy canes carrot cake soufflé. Croissant candy wafer pie I love oat cake lemon drops caramels jujubes. I love macaroon halvah liquorice cake. Danish sweet roll pudding cookie sweet roll I love. Jelly cake I love bear claw jujubes dragée gingerbread. I love cotton candy carrot cake halvah biscuit I love macaroon cheesecake tootsie roll. Chocolate cotton candy biscuit I love
fruitcake cotton candy biscuit tart gingerbread. Powder oat cake I love. Cheesecake candy canes macaroon I love wafer I love sweet roll ice cream. Toffee cookie macaroon lemon drops tart candy canes. Gummies gummies pie tiramisu I love bear claw cheesecake.
</p>
<p>
Marzipan oat cake caramels chocolate. Lemon drops cheesecake jelly beans sweet icing pudding croissant. Donut candy canes carrot cake soufflé. Croissant candy wafer pie I love oat cake lemon drops caramels jujubes. I love macaroon halvah liquorice cake. Danish sweet roll pudding cookie sweet roll I love. Jelly cake I love bear claw jujubes dragée gingerbread. I love cotton candy carrot cake halvah biscuit I love macaroon cheesecake tootsie roll. Chocolate cotton candy biscuit I love
fruitcake cotton candy biscuit tart gingerbread. Powder oat cake I love. Cheesecake candy canes macaroon I love wafer I love sweet roll ice cream. Toffee cookie macaroon lemon drops tart candy canes. Gummies gummies pie tiramisu I love bear claw cheesecake.
</p>
<p>
Sweet roll I love I love. Tiramisu I love soufflé cake tart sweet roll cotton candy cookie. Macaroon biscuit dessert. Bonbon cake soufflé jelly gummi bears lemon drops. Chocolate bar I love macaroon danish candy pudding. Jelly carrot cake I love tart cake bear claw macaroon candy candy canes. Muffin gingerbread sweet jujubes croissant sweet roll. Topping muffin carrot cake sweet. Toffee chocolate muffin I love croissant. Donut carrot cake ice cream ice cream. Wafer I love pie danish
marshmallow cheesecake oat cake pie I love. Icing pie chocolate marzipan jelly ice cream cake.
</p>
<p>
Sweet roll I love I love. Tiramisu I love soufflé cake tart sweet roll cotton candy cookie. Macaroon biscuit dessert. Bonbon cake soufflé jelly gummi bears lemon drops. Chocolate bar I love macaroon danish candy pudding. Jelly carrot cake I love tart cake bear claw macaroon candy candy canes. Muffin gingerbread sweet jujubes croissant sweet roll. Topping muffin carrot cake sweet. Toffee chocolate muffin I love croissant. Donut carrot cake ice cream ice cream. Wafer I love pie danish
marshmallow cheesecake oat cake pie I love. Icing pie chocolate marzipan jelly ice cream cake.
</p>
<p>
Sweet roll I love I love. Tiramisu I love soufflé cake tart sweet roll cotton candy cookie. Macaroon biscuit dessert. Bonbon cake soufflé jelly gummi bears lemon drops. Chocolate bar I love macaroon danish candy pudding. Jelly carrot cake I love tart cake bear claw macaroon candy candy canes. Muffin gingerbread sweet jujubes croissant sweet roll. Topping muffin carrot cake sweet. Toffee chocolate muffin I love croissant. Donut carrot cake ice cream ice cream. Wafer I love pie danish
marshmallow cheesecake oat cake pie I love. Icing pie chocolate marzipan jelly ice cream cake.
</p>
</div>
</div>
</div>
<!--/ Vertical Scrollbar -->
<!-- Horizontal Scrollbar -->
<div class="col-md-6 col-sm-12">
<div class="card overflow-hidden" style="height: 300px;">
<h5 class="card-header">Horizontal Scrollbar</h5>
<div class="card-body" id="horizontal-example">
<img src="{% static 'img/backgrounds/7.jpg' %}" alt="scrollbar-image" />
</div>
</div>
</div>
<!--/ Horizontal Scrollbar -->
<!-- Vertical & Horizontal Scrollbars -->
<div class="col-12">
<div class="card overflow-hidden" style="height: 500px;">
<h5 class="card-header">Vertical & Horizontal Scrollbars</h5>
<div class="card-body" id="both-scrollbars-example">
<img src="{% static 'img/backgrounds/7.jpg' %}" alt="scrollbar-image" />
</div>
</div>
</div>
<!--/ Vertical & Horizontal Scrollbars -->
</div>
{% endblock %}

View File

@@ -0,0 +1,152 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Star Ratings - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/raty-js/raty-js.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/raty-js/raty-js.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-star-ratings.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row gy-6">
<!-- Basic-->
<div class="col-xxl-3 col-sm-6 col-12">
<div class="card">
<h5 class="card-header">Basic</h5>
<div class="card-body">
<div class="basic-ratings raty" data-score="3" data-number="5"></div>
</div>
</div>
</div>
<!-- /Basic-->
<!-- Read Only-->
<div class="col-xxl-3 col-sm-6 col-12">
<div class="card">
<h5 class="card-header">Read Only</h5>
<div class="card-body">
<div class="read-only-ratings raty" data-read-only="true" data-score="3" data-number="5"></div>
</div>
</div>
</div>
<!-- /Read Only-->
<!-- Half Star-->
<div class="col-xxl-3 col-sm-6 col-12">
<div class="card">
<h5 class="card-header">Half Star</h5>
<div class="card-body">
<div class="half-star-ratings raty" data-half="true" data-score="3.5" data-number="5"></div>
</div>
</div>
</div>
<!-- /Half Star-->
<!-- Custom SVG-->
<div class="col-xxl-3 col-sm-6 col-12">
<div class="card">
<h5 class="card-header">Custom SVG</h5>
<div class="card-body">
<div class="custom-svg-ratings raty" data-score="2" data-number="5"></div>
</div>
</div>
</div>
<!-- /Custom SVG-->
<!-- Events-->
<div class="col-xl-6 col-12">
<div class="card">
<h5 class="card-header">Events</h5>
<div class="card-body">
<div class="row gy-3">
<div class="col-md d-flex flex-column align-items-start mb-sm-0 mb-4">
<small class="fw-medium">onSet Event</small>
<div class="onset-event-ratings raty" data-score="3" data-number="5" data-half="true"></div>
</div>
<div class="col-md d-flex flex-column align-items-start">
<small class="fw-medium">onChange Event</small>
<div class="onChange-event-ratings raty mb-4" data-score="0" data-number="5" data-half="true"></div>
<div class=" counter-wrapper">
<span class="fw-medium">Ratings:</span>
<span class="counter">0</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Events-->
<!-- Methods-->
<div class="col-xl-6 col-12">
<div class="card">
<h5 class="card-header">Methods</h5>
<div class="card-body">
<div class="methods-ratings raty" data-number="5"></div>
<div class="demo-inline-spacing">
<button class="btn btn-primary btn-initialize">Initialize</button>
<button class="btn btn-danger btn-destroy">Destroy</button>
<button class="btn btn-success btn-get-rating">Get Ratings</button>
<button class="btn btn-info btn-set-rating">Set Ratings to 1</button>
</div>
</div>
</div>
</div>
<!-- /Methods-->
<div class="col">
<hr class="my-6" />
</div>
<h5>Rating with icons</h5>
<!-- icon Star-->
<div class="col-xxl-3 col-sm-6 col-12">
<div class="card">
<h5 class="card-header">Basic</h5>
<div class="card-body">
<div class="icon-star-ratings" data-score="3" data-number="5"></div>
</div>
</div>
</div>
<!-- /icon Star-->
<!-- colour variants-->
<div class="col-xxl-9 col-md-6 col-12">
<div class="card">
<h5 class="card-header">colour variants</h5>
<div class="card-body d-flex flex-wrap gap-6 gap-lg-12">
<div class="icon-star-primary-ratings" data-score="1" data-number="5"></div>
<div class="icon-star-warning-ratings" data-score="2" data-number="5"></div>
<div class="icon-star-success-ratings" data-score="3" data-number="5"></div>
<div class="icon-star-danger-ratings" data-score="4" data-number="5"></div>
</div>
</div>
</div>
<!-- /colour variants-->
<!-- size variants-->
<div class="col-xxl-3 col-md-6 col-12">
<div class="card">
<h5 class="card-header">size variants</h5>
<div class="card-body">
<div class="icon-star-sm-ratings" data-score="1" data-number="5"></div>
<div class="icon-star-md-ratings" data-score="2" data-number="5"></div>
<div class="icon-star-lg-ratings" data-score="3" data-number="5"></div>
</div>
</div>
</div>
<!-- /size variants-->
</div>
{% endblock %}

View File

@@ -0,0 +1,137 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}SweetAlert2 - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/animate-css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/sweetalert2/sweetalert2.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/sweetalert2/sweetalert2.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-sweetalert2.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row">
<!-- Basic example section -->
<div class="col-12 mb-6">
<div class="card">
<h5 class="card-header">Basic Examples</h5>
<div class="card-body">
<span> SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizable, as you can see below! </span>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary" id="basic-alert">Basic</button>
<button type="button" class="btn btn-primary" id="with-title">With Title</button>
<button type="button" class="btn btn-primary" id="footer-alert">With Footer</button>
<button type="button" class="btn btn-primary" id="html-alert">HTML</button>
</div>
</div>
</div>
</div>
<!-- /Basic example section -->
<!-- Sweet alert Positions -->
<div class="col-12 mb-6">
<div class="card">
<h5 class="card-header">Position</h5>
<div class="card-body">
<span>
You can specify position of your alert with
<code>{position : top-start | top-end | bottom-start | bottom-end }</code>
in js
</span>
<div class="demo-inline-spacing">
<button class="btn btn-primary" id="position-top-start">Top Start</button>
<button class="btn btn-primary" id="position-top-end">Top End</button>
<button class="btn btn-primary" id="position-bottom-start">Bottom Starts</button>
<button class="btn btn-primary" id="position-bottom-end">Bottom End</button>
</div>
</div>
</div>
</div>
<!-- /Sweet alert Positions -->
<!-- SweetAlert Animations -->
<div class="col-12 mb-6">
<div class="card">
<h5 class="card-header">Animations</h5>
<div class="card-body">
<span> Use <code>popup</code> inside <code>showClass</code> parameter to add animation to alert </span>
<div class="demo-inline-spacing">
<button class="btn btn-primary" id="bounce-in-animation">Bounce In</button>
<button class="btn btn-primary" id="fade-in-animation">Fade In</button>
<button class="btn btn-primary" id="flip-x-animation">Flip In</button>
<button class="btn btn-primary" id="tada-animation">Tada</button>
<button class="btn btn-primary" id="shake-animation">Shake</button>
</div>
</div>
</div>
</div>
<!-- /SweetAlert Animations -->
<!-- Types section -->
<div class="col-12 mb-6">
<div class="card">
<h5 class="card-header">Types</h5>
<div class="card-body">
<span> Use <code>icon</code> parameter to create a alert with type. </span>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-success" id="type-success">Success</button>
<button type="button" class="btn btn-info" id="type-info">Info</button>
<button type="button" class="btn btn-warning" id="type-warning">Warning</button>
<button type="button" class="btn btn-danger" id="type-error">Error</button>
<button type="button" class="btn btn-secondary" id="type-question">Question</button>
</div>
</div>
</div>
</div>
<!-- /Types section -->
<!-- Options section -->
<div class="col-12 mb-6">
<div class="card">
<h5 class="card-header">Options</h5>
<div class="card-body">
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary" id="custom-image">Custom Image</button>
<button type="button" class="btn btn-primary" id="auto-close">Auto Close</button>
<button type="button" class="btn btn-primary" id="outside-click">Click Outside</button>
<button type="button" class="btn btn-primary" id="progress-steps">Progress Steps</button>
<button type="button" class="btn btn-primary" id="ajax-request">Ajax</button>
</div>
</div>
</div>
</div>
<!-- /Options section -->
<!-- Confirm option section -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Confirm Options</h5>
<div class="card-body">
<div class="row g-2">
<div class="col-md-6 col-sm-12">
<p>Confirm Button Action</p>
<button type="button" class="btn btn-primary" id="confirm-text">Alert</button>
</div>
<div class="col-md-6 col-sm-12">
<p>Confirm & Cancel Button Action</p>
<button type="button" class="btn btn-primary" id="confirm-color">Alert</button>
</div>
</div>
</div>
</div>
</div>
<!-- /Confirm option section -->
</div>
{% endblock %}

View File

@@ -0,0 +1,217 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Text Divider - Extended UI{% endblock %}
{% block content %}
<div class="row gy-6">
<!-- Basic -->
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Basic</h5>
<div class="card-body">
<div class="divider">
<div class="divider-text">Text</div>
</div>
</div>
</div>
</div>
<!-- /Basic -->
<!-- Text Alignment -->
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Alignment</h5>
<div class="card-body">
<div class="divider text-start">
<div class="divider-text">Start</div>
</div>
<div class="divider text-start-center">
<div class="divider-text">Start-Center</div>
</div>
<div class="divider">
<div class="divider-text">Center (Default)</div>
</div>
<div class="divider text-end-center">
<div class="divider-text">End-Center</div>
</div>
<div class="divider text-end">
<div class="divider-text">End</div>
</div>
</div>
</div>
</div>
<!-- /Text Alignment -->
<!-- Divider Colors -->
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Colors</h5>
<div class="card-body">
<div class="divider divider-primary">
<div class="divider-text">Primary</div>
</div>
<div class="divider divider-success">
<div class="divider-text">Success</div>
</div>
<div class="divider divider-danger">
<div class="divider-text">Danger</div>
</div>
<div class="divider divider-warning">
<div class="divider-text">Warning</div>
</div>
<div class="divider divider-info">
<div class="divider-text">Info</div>
</div>
<div class="divider divider-dark">
<div class="divider-text">Dark</div>
</div>
</div>
</div>
</div>
<!-- /Divider Colors -->
<!-- Icons -->
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Icons</h5>
<div class="card-body">
<div class="divider text-start">
<div class="divider-text">
<i class="icon-base ti tabler-sun scaleX-n1-rtl align-middle"></i>
</div>
</div>
<div class="divider text-start-center">
<div class="divider-text">
<i class="icon-base ti tabler-crown scaleX-n1-rtl align-middle"></i>
</div>
</div>
<div class="divider">
<div class="divider-text">
<i class="icon-base ti tabler-star scaleX-n1-rtl align-middle"></i>
</div>
</div>
<div class="divider text-end-center">
<div class="divider-text">
<i class="icon-base ti tabler-cup scaleX-n1-rtl align-middle"></i>
</div>
</div>
<div class="divider text-end">
<div class="divider-text">
<i class="icon-base ti tabler-cut rotate-270 scaleX-n1-rtl align-middle"></i>
</div>
</div>
</div>
</div>
</div>
<!-- /Icons -->
<!-- Icons -->
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Styles</h5>
<div class="card-body">
<div class="divider">
<div class="divider-text">Solid (Default)</div>
</div>
<div class="divider divider-dotted">
<div class="divider-text">Dotted</div>
</div>
<div class="divider divider-dashed">
<div class="divider-text">Dashed</div>
</div>
</div>
</div>
</div>
<!-- /Icons -->
<!-- Vertical text divider -->
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Vertical</h5>
<div class="card-body">
<div class="row gy-4 gy-md-0 h-px-250">
<div class="col-md-2 col-4">
<div class="divider divider-vertical">
<div class="divider-text">Solid(default)</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical align-items-start">
<div class="divider-text pt-0">Solid</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical align-items-end">
<div class="divider-text pb-0">Solid</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-dashed">
<div class="divider-text">Dashed</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-dotted">
<div class="divider-text">Dotted</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical">
<div class="divider-text">
<i class="icon-base ti tabler-crown"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Vertical text divider -->
<!-- Vertical Divider Colors -->
<div class="col-md-12">
<div class="card">
<h5 class="card-header">Vertical Colors</h5>
<div class="card-body">
<div class="row gy-4 gy-md-0 h-px-250">
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-primary">
<div class="divider-text">Primary</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-success">
<div class="divider-text">Success</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-danger">
<div class="divider-text">Danger</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-warning">
<div class="divider-text">Warning</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-info">
<div class="divider-text">Info</div>
</div>
</div>
<div class="col-md-2 col-4">
<div class="divider divider-vertical divider-dark">
<div class="divider-text">Dark</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Vertical Divider Colors -->
{% endblock %}

View File

@@ -0,0 +1,168 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Basic Timeline - Extended UI{% endblock %}
{% block content %}
<div class="row gy-6">
<!-- Timeline Basic-->
<div class="col-xl-6">
<div class="card h-100">
<h5 class="card-header">Basic</h5>
<div class="card-body">
<ul class="timeline mb-0">
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">12 Invoices have been paid</h6>
<small class="text-body-secondary">12 min ago</small>
</div>
<p class="mb-2">Invoices have been paid to the company</p>
<div class="d-flex align-items-center mb-2">
<div class="badge bg-lighter rounded d-flex align-items-center">
<img src="{% static 'img/icons/misc/pdf.png' %}" alt="img" width="15" class="me-2" />
<span class="h6 mb-0 text-body">invoices.pdf</span>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-success"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Client Meeting</h6>
<small class="text-body-secondary">45 min ago</small>
</div>
<p class="mb-2">Project meeting with john @10:15am</p>
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
<div class="d-flex flex-wrap align-items-center mb-50">
<div class="avatar avatar-sm me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
<small>CEO of {% get_theme_variables 'creator_name' %}</small>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Create a new project for client</h6>
<small class="text-body-secondary">2 Day Ago</small>
</div>
<p class="mb-2">6 team members in a project</p>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li class="avatar">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- /Timeline Basic -->
<!-- Timeline outlined-->
<div class="col-xl-6">
<div class="card">
<h5 class="card-header">Timeline Outlined</h5>
<div class="card-body">
<ul class="timeline timeline-outline mb-0">
<li class="timeline-item timeline-item-transparent border-dashed">
<span class="timeline-point timeline-point-primary"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">12 Invoices have been paid</h6>
<small class="text-body-secondary">12 min ago</small>
</div>
<p class="mb-2">Invoices have been paid to the company</p>
<div class="d-flex align-items-center mb-2">
<div class="badge bg-lighter rounded d-flex align-items-center">
<img src="{% static 'img/icons/misc/pdf.png' %}" alt="img" width="15" class="me-2" />
<span class="h6 mb-0 text-body">invoices.pdf</span>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent border-dashed">
<span class="timeline-point timeline-point-success"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Client Meeting</h6>
<small class="text-body-secondary">45 min ago</small>
</div>
<p class="mb-2">Project meeting with john @10:15am</p>
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
<div class="d-flex flex-wrap align-items-center mb-50">
<div class="avatar avatar-sm me-2">
<img src="{% static 'img/avatars/1.png' %}" alt="Avatar" class="rounded-circle" />
</div>
<div>
<p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
<small>CEO of {% get_theme_variables 'creator_name' %}</small>
</div>
</div>
</div>
</div>
</li>
<li class="timeline-item timeline-item-transparent border-dashed">
<span class="timeline-point timeline-point-info"></span>
<div class="timeline-event">
<div class="timeline-header mb-3">
<h6 class="mb-0">Create a new project for client</h6>
<small class="text-body-secondary">2 Day Ago</small>
</div>
<p class="mb-2">6 team members in a project</p>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
<div class="d-flex flex-wrap align-items-center">
<ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li class="avatar">
<span class="avatar-initial rounded-circle pull-up" data-bs-toggle="tooltip" data-bs-placement="bottom" title="3 more">+3</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- /Timeline outlined-->
</div>
{% endblock %}

View File

@@ -0,0 +1,409 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Fullscreen Timeline - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/animate-on-scroll/animate-on-scroll.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/animate-on-scroll/animate-on-scroll.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-timeline.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row overflow-hidden">
<div class="col-12">
<ul class="timeline timeline-center mt-12">
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-brush"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<div class="card-header d-flex justify-content-between align-items-center flex-wrap">
<h5 class="card-title mb-0">Designing UI</h5>
<div class="meta">
<span class="badge rounded-pill bg-label-primary me-1">Design</span>
<span class="badge rounded-pill bg-label-success">Meeting</span>
</div>
</div>
<div class="card-body">
<p class="mb-2">Our main goal is to design a new mobile application for our client. The customer wants a clean & flat design.</p>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div>
<p class="text-body-secondary mb-2">Participants</p>
<ul class="list-unstyled users-list d-flex align-items-center avatar-group">
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Vinnie Mostowy" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/5.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Allen Rieske" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/12.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Julee Rossignol" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/6.png' %}" alt="Avatar" />
</li>
<li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" title="Darcey Nooner" class="avatar avatar-xs pull-up">
<img class="rounded-circle" src="{% static 'img/avatars/10.png' %}" alt="Avatar" />
</li>
</ul>
</div>
</div>
</div>
<div class="timeline-event-time">1st January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-question-mark"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<h5 class="card-header">Survey Report</h5>
<div class="card-body">
<div class="d-flex flex-wrap mb-6">
<div>
<div class="avatar avatar-xs me-4">
<img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
<span>assigned this task to <span class="fw-medium">Sarah</span></span>
</div>
<ul class="list-unstyled">
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="{% static 'img/avatars/2.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress bg-label-danger" style="height: 6px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 48.7%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>Jquery</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="{% static 'img/avatars/3.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 31.3%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>React</small>
<small>React</small>
<small>React</small>
<small>React</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="{% static 'img/avatars/4.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress bg-label-warning" style="height: 6px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>Angular</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="{% static 'img/avatars/5.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="mb-4 w-100">
<div class="progress bg-label-info" style="height: 6px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 15%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>VUE</small>
</div>
</li>
<li class="d-flex">
<div>
<div class="avatar avatar-xs me-4">
<img src="{% static 'img/avatars/6.png' %}" alt="Avatar" class="rounded-circle" />
</div>
</div>
<div class="w-100">
<div class="progress bg-label-success" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 10%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>Laravel</small>
</div>
</li>
</ul>
</div>
<div class="timeline-event-time">2nd January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-chart-line"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<h5 class="card-header">Financial Reports</h5>
<div class="card-body">
<p class="mb-2">Click the button below to read financial reports</p>
<button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Show Report</button>
<div class="collapse" id="collapseExample">
<ul class="list-group list-group-flush mt-4">
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span>Last Years's Profit : <span class="fw-medium">$20000</span></span>
<i class="icon-base ti tabler-share cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span> This Years's Profit : <span class="fw-medium">$25000</span></span>
<i class="icon-base ti tabler-share cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span> Last Years's Commission : <span class="fw-medium">$5000</span></span>
<i class="icon-base ti tabler-share cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span> This Years's Commission : <span class="fw-medium">$7000</span></span>
<i class="icon-base ti tabler-share cursor-pointer"></i>
</li>
<li class="list-group-item d-flex justify-content-between flex-wrap">
<span> This Years's Total Balance : <span class="fw-medium">$70000</span></span>
<i class="icon-base ti tabler-share cursor-pointer"></i>
</li>
</ul>
</div>
</div>
<div class="timeline-event-time">5th January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-warning" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-chart-donut-2"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<h5 class="card-header">Snacks</h5>
<div class="card-body">
<div class="d-flex flex-sm-row flex-column">
<img src="{% static 'img/elements/56.jpg' %}" class="rounded me-4 mb-sm-0 mb-2" alt="doughnut" height="64" width="64" />
<div>
<h6 class="mb-2">A Donut which straight gone to Your Tummy</h6>
<p class="mb-2">I gaze longingly at the beautiful, perfect, plump donut. This is a delicately crafted piece of art. The mouthwatering mound of miraculous mush isn't able to escape my sight...<a href="javascript:void(0)">read more</a></p>
<div class="d-flex justify-content-between align-items-center">
<div>
<i class="icon-base ti tabler-star-filled text-warning"></i>
<i class="icon-base ti tabler-star-filled text-warning"></i>
<i class="icon-base ti tabler-star-filled text-warning"></i>
<i class="icon-base ti tabler-star-filled text-warning"></i>
<i class="icon-base ti tabler-star-filled"></i>
</div>
<div>
<span class="fw-medium">$5.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="timeline-event-time">10th January</div>
</div>
</li>
<li class="timeline-item timeline-item-right">
<span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-map-pin"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<div class="card-header border-0 d-flex justify-content-between">
<h5 class="card-title mb-0">
<i class="icon-base ti tabler-map-pin align-middle"></i>
<span class="align-middle">Location</span>
</h5>
<span class="badge rounded-pill bg-label-danger">High</span>
</div>
<div class="card-body py-0">
<h6 class="mb-2">Final location for the company celebration.</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quidem?</p>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="d-flex flex-wrap cursor-pointer gap-4">
<i class="icon-base ti tabler-link"></i>
<div class="position-relative">
<i class="icon-base ti tabler-brand-hipchat"></i>
<span class="badge rounded-pill bg-info badge-dot badge-notifications"></span>
</div>
<i class="icon-base ti tabler-user"></i>
</div>
<p class="mb-0">
<span class="text-body-secondary">Due Date:</span>
15th Jan
</p>
</div>
<div class="timeline-event-time">12th January</div>
</div>
</li>
<li class="timeline-item timeline-item-left">
<span class="timeline-indicator timeline-indicator-primary" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-barbell"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<div class="card-header border-0 d-flex justify-content-between">
<h5 class="card-title mb-0">Gym Program</h5>
<span class="text-body-secondary">5:00 - 6:10AM</span>
</div>
<div class="card-body pb-4 pt-0">
<div class="hours mb-2">
<i class="icon-base ti tabler-clock"></i>
<span>1.1 Hours</span>
<i class="icon-base ti tabler-arrows-right-left mx-2"></i>
<span>Weekly</span>
</div>
<div class="location">
<i class="icon-base ti tabler-map-pin"></i>
<span class="align-middle">Rock's Gym</span>
</div>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="tags">
<span class="badge rounded-pill bg-label-danger me-1">Gym</span>
<span class="badge rounded-pill bg-label-info">Power</span>
</div>
<div>
<i class="icon-base ti tabler-dots-vertical bg-secondary cursor-pointer"></i>
</div>
</div>
<div class="timeline-event-time">15th January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-success" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-currency-dollar"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<h5 class="card-header">General Reserve</h5>
<div class="card-body">
<ul class="list-unstyled">
<li class="d-flex justify-content-start align-items-center text-success mb-4">
<i class="icon-base ti tabler-currency-dollar icon-lg me-4"></i>
<div class="ps-4 border-start">
<small class="text-body-secondary mb-1">Cash</small>
<h5 class="mb-0">$500</h5>
</div>
</li>
<li class="d-flex justify-content-start align-items-center text-info mb-4">
<i class="icon-base ti tabler-credit-card icon-lg me-4"></i>
<div class="ps-4 border-start">
<small class="text-body-secondary mb-1">Credit Card</small>
<h5 class="mb-0">$5000</h5>
</div>
</li>
<li class="d-flex justify-content-start align-items-center text-primary">
<i class="icon-base ti tabler-chart-line icon-lg me-4"></i>
<div class="ps-4 border-start">
<small class="text-body-secondary mb-1">Investments</small>
<h5 class="mb-0">$300</h5>
</div>
</li>
</ul>
</div>
<div class="timeline-event-time">16th January</div>
</div>
</li>
<li class="timeline-item">
<span class="timeline-indicator timeline-indicator-danger" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-server"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-left">
<div class="card-header border-0 d-flex justify-content-between">
<h5 class="card-title mb-0">
<span class="align-middle">Ubuntu Server</span>
</h5>
<span class="badge rounded-pill bg-label-danger">Inactive</span>
</div>
<div class="card-body pb-2 pt-0">
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center ps-0">
<div>
<i class="icon-base ti tabler-world"></i>
<span>IP Address</span>
</div>
<div>192.654.8.566</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center ps-0">
<div>
<i class="icon-base ti tabler-cpu"></i>
<span>CPU</span>
</div>
<div>4 Cores</div>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center ps-0">
<div>
<i class="icon-base ti tabler-server"></i>
<span>Ram</span>
</div>
<div>500 MB</div>
</li>
</ul>
</div>
<div class="card-footer d-flex justify-content-between">
<div class="server-icons">
<i class="icon-base ti tabler-share me-2"></i>
<i class="icon-base ti tabler-refresh"></i>
</div>
</div>
<div class="timeline-event-time">20th January</div>
</div>
</li>
<li class="timeline-item border-0 pb-4">
<span class="timeline-indicator timeline-indicator-info" data-aos="zoom-in" data-aos-delay="200">
<i class="icon-base icon-18px ti tabler-building-store"></i>
</span>
<div class="timeline-event card p-0" data-aos="fade-right">
<div class="card-header border-0 d-flex justify-content-between">
<h5 class="card-title mb-0"><span class="align-middle">Online Store</span></h5>
<i class="icon-base ti tabler-dots-vertical bg-secondary cursor-pointer"></i>
</div>
<div class="card-body pt-0">
<p>Develop an online store of electronic devices for the provided layout, as well as develop a mobile version of it. The must be compatible with any CMS.</p>
<div class="d-flex flex-wrap flex-sm-row flex-column">
<div class="mb-sm-0 mb-4 me-12">
<p class="text-body-secondary mb-2">Developers</p>
<div class="d-flex align-items-center">
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-label-primary">A</span>
</div>
<div class="avatar avatar-xs me-2">
<span class="avatar-initial rounded-circle bg-label-success">B</span>
</div>
<div class="avatar avatar-xs">
<span class="avatar-initial rounded-circle bg-label-danger">C</span>
</div>
</div>
</div>
<div class="mb-sm-0 mb-4 me-12">
<p class="text-body-secondary mb-2">Deadline</p>
<p class="mb-0">20 Dec 2077</p>
</div>
<div>
<p class="text-body-secondary mb-2">Budget</p>
<p class="mb-0">$50000</p>
</div>
</div>
</div>
<div class="timeline-event-time">25th January</div>
</div>
</li>
</ul>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,34 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Shepherd tour - Extended UI{% endblock title %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/shepherd/shepherd.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/shepherd/shepherd.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-tour.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row">
<div class="col-12">
<div class="card tour-card">
<h5 class="card-header">Tour</h5>
<div class="card-body">
<button class="btn btn-primary" id="shepherd-example">Start tour</button>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,119 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Treeview - Extended UI{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/jstree/jstree.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/jstree/jstree.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/extended-ui-treeview.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- JSTree -->
<div class="row gy-6">
<!-- Basic -->
<div class="col-md-6 col-12">
<div class="card">
<h5 class="card-header">Basic</h5>
<div class="card-body">
<div id="jstree-basic">
<ul>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>
css
<ul>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>app.css</li>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>style.css</li>
</ul>
</li>
<li class="jstree-open" data-jstree='{"icon" : "icon-base ti tabler-folder"}'>
img
<ul data-jstree='{"icon" : "icon-base ti tabler-folder"}'>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>bg.jpg</li>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>logo.png</li>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>avatar.png</li>
</ul>
</li>
<li class="jstree-open" data-jstree='{"icon" : "icon-base ti tabler-folder"}'>
js
<ul>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>jquery.js</li>
<li data-jstree='{"icon" : "icon-base ti tabler-folder"}'>app.js</li>
</ul>
</li>
<li data-jstree='{"icon" : "icon-base ti tabler-file-text bg-secondary"}'>index.html</li>
<li data-jstree='{"icon" : "icon-base ti tabler-file-text bg-secondary"}'>page-one.html</li>
<li data-jstree='{"icon" : "icon-base ti tabler-file-text bg-secondary"}'>page-two.html</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Basic -->
<!-- Custom Icons -->
<div class="col-md-6 col-12">
<div class="card">
<h5 class="card-header">Custom Icons</h5>
<div class="card-body">
<div id="jstree-custom-icons"></div>
</div>
</div>
</div>
<!-- /Custom Icons -->
<!-- Context Menu -->
<div class="col-md-6 col-12">
<div class="card">
<h5 class="card-header">Context Menu</h5>
<div class="card-body">
<div id="jstree-context-menu" class="overflow-auto"></div>
</div>
</div>
</div>
<!-- /Context Menu -->
<!-- Drag & Drop -->
<div class="col-md-6 col-12">
<div class="card">
<h5 class="card-header">Drag & Drop</h5>
<div class="card-body">
<div id="jstree-drag-drop" class="overflow-auto"></div>
</div>
</div>
</div>
<!-- /Drag & Drop -->
<!-- Checkbox -->
<div class="col-md-6 col-12">
<div class="card">
<h5 class="card-header">Checkboxes</h5>
<div class="card-body">
<div id="jstree-checkbox"></div>
</div>
</div>
</div>
<!-- /Checkbox -->
<!-- Ajax -->
<div class="col-md-6 col-12">
<div class="card">
<h5 class="card-header">Ajax</h5>
<div class="card-body">
<div id="jstree-ajax"></div>
</div>
</div>
</div>
<!-- Ajax -->
</div>
<!-- /JSTree -->
{% endblock %}

View File

@@ -0,0 +1,72 @@
from django.urls import path
from .views import ExtendedUiView
from django.contrib.auth.decorators import login_required
urlpatterns = [
path(
"extended_ui/avatar/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_avatar.html")),
name="extended-ui-avatar",
),
path(
"extended_ui/blockui/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_blockui.html")),
name="extended-ui-blockui",
),
path(
"extended_ui/drag_and_drop/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_drag_and_drop.html")),
name="extended-ui-drag-and-drop",
),
path(
"extended_ui/media_player/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_media_player.html")),
name="extended-ui-media-player",
),
path(
"extended_ui/perfect_scrollbar/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_perfect_scrollbar.html")),
name="extended-ui-perfect-scrollbar",
),
path(
"extended_ui/star_ratings/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_star_ratings.html")),
name="extended-ui-star-ratings",
),
path(
"extended_ui/sweetalert2/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_sweetalert2.html")),
name="extended-ui-sweetalert2",
),
path(
"extended_ui/text_divider/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_text_divider.html")),
name="extended-ui-text-divider",
),
path(
"extended_ui/timeline_basic/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_timeline_basic.html")),
name="extended-ui-timeline-basic",
),
path(
"extended_ui/timeline_fullscreen/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_timeline_fullscreen.html")),
name="extended-ui-timeline-fullscreen",
),
path(
"extended_ui/tour/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_tour.html")),
name="extended-ui-tour",
),
path(
"extended_ui/treeview/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_treeview.html")),
name="extended-ui-treeview",
),
path(
"extended_ui/misc/",
login_required(ExtendedUiView.as_view(template_name="extended_ui_misc.html")),
name="extended-ui-misc",
),
]

View File

@@ -0,0 +1,18 @@
from django.views.generic import TemplateView
from web_project import TemplateLayout
"""
This file is a view controller for multiple pages as a module.
Here you can override the page view layout.
Refer to extended_ui/urls.py file for more pages.
"""
class ExtendedUiView(TemplateView):
# Predefined function
def get_context_data(self, **kwargs):
# A function to init the global layout. It is defined in web_project/__init__.py file
context = TemplateLayout.init(self, super().get_context_data(**kwargs))
return context