bert.hausmans/band-management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial commit - Band Management application

Browse Source
This commit is contained in:
Bert Hausmans
2026-01-06 03:11:46 +01:00
commit 34e12e00b3
24543 changed files with 3991790 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_accordion.html Normal file
View File

@@ -0,0 +1,239 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Accordion - UI elements{% endblock %}
{% block content %}
<!-- Accordion -->
<h5>Accordion</h5>
<div class="row g-6">
<div class="col-md">
<small class="fw-medium">Basic Accordion</small>
<div class="accordion mt-4" id="accordionExample">
<div class="accordion-item active">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionOne" aria-expanded="true" aria-controls="accordionOne">Accordion Item 1</button>
</h2>
<div id="accordionOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionTwo" aria-expanded="false" aria-controls="accordionTwo">Accordion Item 2</button>
</h2>
<div id="accordionTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionThree" aria-expanded="false" aria-controls="accordionThree">Accordion Item 3</button>
</h2>
<div id="accordionThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish cookie caramels muffin.</div>
</div>
</div>
</div>
</div>
<div class="col-md">
<small class="fw-medium">Accordion Without Arrow</small>
<div id="accordionIcon" class="accordion mt-4 accordion-without-arrow">
<div class="accordion-item">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-1" aria-controls="accordionIcon-1">Accordion Item 1</button>
</h2>
<div id="accordionIcon-1" class="accordion-collapse collapse" data-bs-parent="#accordionIcon">
<div class="accordion-body">Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionIcon-2" aria-controls="accordionIcon-2">Accordion Item 2</button>
</h2>
<div id="accordionIcon-2" class="accordion-collapse collapse" data-bs-parent="#accordionIcon">
<div class="accordion-body">Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.</div>
</div>
</div>
<div class="accordion-item active">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionIconThree">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionIcon-3" aria-expanded="true" aria-controls="accordionIcon-3">Accordion Item 3</button>
</h2>
<div id="accordionIcon-3" class="accordion-collapse collapse show" data-bs-parent="#accordionIcon">
<div class="accordion-body">Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish cookie caramels muffin.</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Accordion -->
<hr class="container-m-nx my-12" />
<!-- Advance Styling Options -->
<h5>Advance Styling</h5>
<div class="row mb-12 g-12">
<!-- Accordion with Icon -->
<div class="col-md">
<small class="fw-medium">Accordion With Icon (Always Open)</small>
<div class="accordion mt-4" id="accordionWithIcon">
<div class="accordion-item active">
<h2 class="accordion-header d-flex align-items-center">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionWithIcon-1" aria-expanded="true">
<i class="icon-base ti tabler-star me-2"></i>
Header Option 1
</button>
</h2>
<div id="accordionWithIcon-1" class="accordion-collapse collapse show">
<div class="accordion-body">Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header d-flex align-items-center">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionWithIcon-2" aria-expanded="false">
<i class="icon-base ti tabler-sun me-2"></i>
Header Option 2
</button>
</h2>
<div id="accordionWithIcon-2" class="accordion-collapse collapse">
<div class="accordion-body">Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header d-flex align-items-center">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionWithIcon-3" aria-expanded="false">
<i class="icon-base ti tabler-moon me-2"></i>
Header Option 3
</button>
</h2>
<div id="accordionWithIcon-3" class="accordion-collapse collapse">
<div class="accordion-body">Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish cookie caramels muffin.</div>
</div>
</div>
</div>
</div>
<!--/ Accordion with Icon -->
<!-- Accordion Advance Styling -->
<div class="col-md">
<small class="fw-medium">Accordion Header color</small>
<div class="accordion mt-4 accordion-header-primary" id="accordionStyle1">
<div class="accordion-item">
<h2 class="accordion-header">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-1" aria-expanded="false">Header Option 1</button>
</h2>
<div id="accordionStyle1-1" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
<div class="accordion-body">Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-2" aria-expanded="false">Header Option 2</button>
</h2>
<div id="accordionStyle1-2" class="accordion-collapse collapse" data-bs-parent="#accordionStyle1">
<div class="accordion-body">Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.</div>
</div>
</div>
<div class="accordion-item active">
<h2 class="accordion-header">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionStyle1-3" aria-expanded="true">Header Option 3</button>
</h2>
<div id="accordionStyle1-3" class="accordion-collapse collapse show" data-bs-parent="#accordionStyle1">
<div class="accordion-body">Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels. Ice cream wafer danish cookie caramels muffin.</div>
</div>
</div>
</div>
</div>
<!--/ Accordion Advance Styling -->
</div>
<!--/ Advance Styling Options -->
<hr class="container-m-nx my-12" />
<!-- Accordion With Custom Button -->
<h5 class="mt-4">Customized Accordion</h5>
<div class="row g-6">
<div class="col-md">
<small class="fw-medium">Accordion Customized Button</small>
<div class="accordion accordion-custom-button mt-3" id="accordionCustom">
<div class="accordion-item active">
<h2 class="accordion-header" id="headingCustomOne">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionCustomOne" aria-expanded="true" aria-controls="accordionCustomOne">Accordion Item 1</button>
</h2>
<div id="accordionCustomOne" class="accordion-collapse collapse show" aria-labelledby="headingCustomOne" data-bs-parent="#accordionCustom">
<div class="accordion-body">Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingCustomTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionCustomTwo" aria-expanded="false" aria-controls="accordionCustomTwo">Accordion Item 2</button>
</h2>
<div id="accordionCustomTwo" class="accordion-collapse collapse" aria-labelledby="headingCustomTwo" data-bs-parent="#accordionCustom">
<div class="accordion-body">Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingCustomThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionCustomThree" aria-expanded="false" aria-controls="accordionCustomThree">Accordion Item 3</button>
</h2>
<div id="accordionCustomThree" class="accordion-collapse collapse" aria-labelledby="headingCustomThree" data-bs-parent="#accordionCustom">
<div class="accordion-body">Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels.</div>
</div>
</div>
</div>
</div>
<div class="col-md">
<small class="fw-medium">Customized Button With Icon</small>
<div id="accordionCustomIcon" class="accordion mt-3 accordion-custom-button">
<div class="accordion-item">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionCustomIconOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionCustomIcon-1" aria-controls="accordionCustomIcon-1">
<i class="icon-base ti tabler-chart-bar me-2"></i>
Accordion Item 1
</button>
</h2>
<div id="accordionCustomIcon-1" class="accordion-collapse collapse" data-bs-parent="#accordionCustomIcon">
<div class="accordion-body">Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé.</div>
</div>
</div>
<div class="accordion-item previous-active">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionCustomIconTwo">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionCustomIcon-2" aria-controls="accordionCustomIcon-2">
<i class="icon-base ti tabler-briefcase me-2"></i>
Accordion Item 2
</button>
</h2>
<div id="accordionCustomIcon-2" class="accordion-collapse collapse" data-bs-parent="#accordionCustomIcon">
<div class="accordion-body">Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies.</div>
</div>
</div>
<div class="accordion-item active">
<h2 class="accordion-header text-body d-flex justify-content-between" id="accordionCustomIconThree">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordionCustomIcon-3" aria-expanded="true" aria-controls="accordionCustomIcon-3">
<i class="icon-base ti tabler-gift me-2"></i>
Accordion Item 3
</button>
</h2>
<div id="accordionCustomIcon-3" class="accordion-collapse collapse show" data-bs-parent="#accordionCustomIcon">
<div class="accordion-body">Oat cake toffee chocolate bar jujubes. Marshmallow brownie lemon drops cheesecake. Bonbon gingerbread marshmallow sweet jelly beans muffin. Sweet roll bear claw candy canes oat cake dragée caramels.</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Accordion With Custom Button -->
{% endblock %}

222
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_alerts.html Normal file
View File

@@ -0,0 +1,222 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Alerts - UI elements{% endblock %}
{% block content %}
<div class="row mb-6">
<!-- Basic Alerts -->
<div class="col-md mb-6 mb-md-0">
<div class="card">
<h5 class="card-header">Basic Alerts</h5>
<div class="card-body">
<div class="alert alert-primary" role="alert">This is a primary alert — check it out!</div>
<div class="alert alert-secondary" role="alert">This is a secondary alert — check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert — check it out!</div>
<div class="alert alert-danger" role="alert">This is a danger alert — check it out!</div>
<div class="alert alert-warning" role="alert">This is a warning alert — check it out!</div>
<div class="alert alert-info" role="alert">This is an info alert — check it out!</div>
<div class="alert alert-dark mb-0" role="alert">This is a dark alert — check it out!</div>
</div>
</div>
</div>
<!--/ Basic Alerts -->
<!-- Outline Alerts -->
<div class="col-md">
<div class="card">
<h5 class="card-header">Outline Alerts</h5>
<div class="card-body">
<div class="alert alert-outline-primary" role="alert">This is a primary outline alert — check it out!</div>
<div class="alert alert-outline-secondary" role="alert">This is a secondary outline alert — check it out!</div>
<div class="alert alert-outline-success" role="alert">This is a success outline alert — check it out!</div>
<div class="alert alert-outline-danger" role="alert">This is a danger outline alert — check it out!</div>
<div class="alert alert-outline-warning" role="alert">This is a warning outline alert — check it out!</div>
<div class="alert alert-outline-info" role="alert">This is an info outline alert — check it out!</div>
<div class="alert alert-outline-dark mb-0" role="alert">This is a dark outline alert — check it out!</div>
</div>
</div>
</div>
<!--/ Outline Alerts -->
</div>
<div class="row mb-6">
<!-- Dismissible Alerts -->
<div class="col-md mb-4 mb-md-0">
<div class="card">
<h5 class="card-header">Dismissible Alerts</h5>
<div class="card-body">
<div class="alert alert-primary alert-dismissible" role="alert">
This is a primary dismissible alert — check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible" role="alert">
This is a secondary dismissible alert — check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
This is a success dismissible alert — check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
This is a danger dismissible alert — check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
This is a warning dismissible alert — check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
This is an info dismissible alert — check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-dark alert-dismissible mb-0" role="alert">
This is a dark dismissible alert — check it out!
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<!--/ Dismissible Alerts -->
<!-- Alerts with Icons -->
<div class="col-md">
<div class="card">
<h5 class="card-header">Alerts with Icons</h5>
<div class="card-body">
<div class="alert alert-solid-primary d-flex align-items-center" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-user icon-md"></i>
</span>
This is a primary solid alert — check it out!
</div>
<div class="alert alert-solid-secondary d-flex align-items-center" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-bookmark icon-md"></i>
</span>
This is a secondary solid alert — check it out!
</div>
<div class="alert alert-solid-success d-flex align-items-center" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-check icon-md"></i>
</span>
This is a success solid alert — check it out!
</div>
<div class="alert alert-solid-danger d-flex align-items-center" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-ban icon-md"></i>
</span>
This is a danger solid alert — check it out!
</div>
<div class="alert alert-solid-warning d-flex align-items-center" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-bell icon-md"></i>
</span>
This is a warning solid alert — check it out!
</div>
<div class="alert alert-solid-info d-flex align-items-center" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-info-circle icon-md"></i>
</span>
This is an info solid alert — check it out!
</div>
<div class="alert alert-solid-dark d-flex align-items-center mb-0" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-at icon-md"></i>
</span>
This is a dark solid alert — check it out!
</div>
</div>
</div>
</div>
<!--/ Alerts with Icons -->
</div>
<div class="row">
<!-- Alerts with headings -->
<div class="col-lg-6 mb-4 mb-lg-0">
<div class="card">
<h5 class="card-header">Alerts with Heading</h5>
<div class="card-body">
<div class="alert alert-primary alert-dismissible" role="alert">
<h5 class="alert-heading mb-2">This is a primary alert — check it out!</h5>
<p class="mb-0">Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-secondary alert-dismissible" role="alert">
<h5 class="alert-heading mb-2">This is a secondary alert — check it out!</h5>
<p class="mb-0">Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="alert alert-success mb-0 alert-dismissible" role="alert">
<h5 class="alert-heading mb-2">This is a success alert — check it out!</h5>
<p class="mb-0">Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
<!--/ Alerts with headings -->
<!-- Alert headings with icon -->
<div class="col-lg-6 mb-4 mb-md-0">
<div class="card">
<h5 class="card-header">Alert headings with icon</h5>
<div class="card-body">
<div class="alert alert-primary alert-dismissible d-flex" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-user icon-md w-px-30"></i>
</span>
<div class="d-flex flex-column ps-1">
<h5 class="alert-heading mb-2">This is a primary alert — check it out!</h5>
<p class="mb-0">Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<div class="alert alert-secondary alert-dismissible d-flex" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-bookmark icon-md w-px-30"></i>
</span>
<div class="d-flex flex-column ps-1">
<h5 class="alert-heading mb-2">This is a secondary alert — check it out!</h5>
<p class="mb-0">Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
<div class="alert alert-success alert-dismissible d-flex" role="alert">
<span class="alert-icon rounded">
<i class="icon-base ti tabler-check icon-md w-px-30"></i>
</span>
<div class="d-flex flex-column ps-1">
<h5 class="alert-heading mb-2">This is a success alert — check it out!</h5>
<p class="mb-0">Sugar plum apple pie sesame snaps croissant marshmallow apple pie liquorice. Cheesecake bear claw tiramisu shortbread cupcake. Sugar plum candy canes jujubes liquorice tiramisu gummi bears muffin dragée gingerbread.</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
<!--/ Alert headings with icon -->
</div>
{% endblock %}

449
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_badges.html Normal file
View File

@@ -0,0 +1,449 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Badges - UI elements{% endblock %}
{% block content %}
<div class="row g-6">
<!-- Basic Badges -->
<div class="col-lg-6">
<div class="card">
<h5 class="card-header">Basic Badges</h5>
<div class="card-body">
<div class="small fw-medium">Default</div>
<div class="demo-inline-spacing">
<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-dark">Dark</span>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Pills</div>
<div class="demo-inline-spacing">
<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>
</div>
</div>
</div>
</div>
<!-- Label Badges -->
<div class="col-lg-6">
<div class="card">
<h5 class="card-header">Label Badges</h5>
<div class="card-body">
<div class="small fw-medium">Label Default</div>
<div class="demo-inline-spacing">
<span class="badge bg-label-primary">Primary</span>
<span class="badge bg-label-secondary">Secondary</span>
<span class="badge bg-label-success">Success</span>
<span class="badge bg-label-danger">Danger</span>
<span class="badge bg-label-warning">Warning</span>
<span class="badge bg-label-info">Info</span>
<span class="badge bg-label-dark">Dark</span>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Label Pills</div>
<div class="demo-inline-spacing">
<span class="badge rounded-pill bg-label-primary">Primary</span>
<span class="badge rounded-pill bg-label-secondary">Secondary</span>
<span class="badge rounded-pill bg-label-success">Success</span>
<span class="badge rounded-pill bg-label-danger">Danger</span>
<span class="badge rounded-pill bg-label-warning">Warning</span>
<span class="badge rounded-pill bg-label-info">Info</span>
<span class="badge rounded-pill bg-label-dark">Dark</span>
</div>
</div>
</div>
</div>
<!-- Outline Badges -->
<div class="col-lg-6">
<div class="card">
<h5 class="card-header">Outline Badges</h5>
<div class="card-body">
<div class="small fw-medium">Outline Default</div>
<div class="demo-inline-spacing">
<span class="badge badge-outline-primary">Primary</span>
<span class="badge badge-outline-secondary">Secondary</span>
<span class="badge badge-outline-success">Success</span>
<span class="badge badge-outline-danger">Danger</span>
<span class="badge badge-outline-warning">Warning</span>
<span class="badge badge-outline-info">Info</span>
<span class="badge badge-outline-dark">Dark</span>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Outline Pills</div>
<div class="demo-inline-spacing">
<span class="badge rounded-pill badge-outline-primary">Primary</span>
<span class="badge rounded-pill badge-outline-secondary">Secondary</span>
<span class="badge rounded-pill badge-outline-success">Success</span>
<span class="badge rounded-pill badge-outline-danger">Danger</span>
<span class="badge rounded-pill badge-outline-warning">Warning</span>
<span class="badge rounded-pill badge-outline-info">Info</span>
<span class="badge rounded-pill badge-outline-dark">Dark</span>
</div>
</div>
</div>
</div>
<!-- Glow Badges -->
<div class="col-lg-6">
<div class="card">
<h5 class="card-header">Glow Badges</h5>
<div class="card-body">
<div class="text-light small fw-medium">Glow Default</div>
<div class="demo-inline-spacing">
<span class="badge bg-primary bg-glow">Primary</span>
<span class="badge bg-secondary bg-glow">Secondary</span>
<span class="badge bg-success bg-glow">Success</span>
<span class="badge bg-danger bg-glow">Danger</span>
<span class="badge bg-warning bg-glow">Warning</span>
<span class="badge bg-info bg-glow">Info</span>
<span class="badge bg-dark bg-glow">Dark</span>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="text-light small fw-medium">Glow Pills</div>
<div class="demo-inline-spacing">
<span class="badge rounded-pill bg-primary bg-glow">Primary</span>
<span class="badge rounded-pill bg-secondary bg-glow">Secondary</span>
<span class="badge rounded-pill bg-success bg-glow">Success</span>
<span class="badge rounded-pill bg-danger bg-glow">Danger</span>
<span class="badge rounded-pill bg-warning bg-glow">Warning</span>
<span class="badge rounded-pill bg-info bg-glow">Info</span>
<span class="badge rounded-pill bg-dark bg-glow">Dark</span>
</div>
</div>
</div>
</div>
<!-- Badge Circle -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Badge Circle & Square Style</h5>
<div class="row row-bordered g-0">
<div class="col-md-6 col-xxl-3 p-6">
<h6>Basic</h6>
<div class="small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill text-bg-primary">1</span>
<span class="badge badge-center rounded-pill text-bg-secondary">2</span>
<span class="badge badge-center rounded-pill text-bg-success">3</span>
<span class="badge badge-center rounded-pill text-bg-danger">4</span>
<span class="badge badge-center rounded-pill text-bg-warning">5</span>
<span class="badge badge-center rounded-pill text-bg-info">6</span>
</p>
<p>
<span class="badge badge-center text-bg-primary">1</span>
<span class="badge badge-center text-bg-secondary">2</span>
<span class="badge badge-center text-bg-success">3</span>
<span class="badge badge-center text-bg-danger">4</span>
<span class="badge badge-center text-bg-warning">5</span>
<span class="badge badge-center text-bg-info">6</span>
</p>
</div>
</div>
<div class="col-md-6 col-xxl-3 p-6">
<h6>Label</h6>
<div class="small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill bg-label-primary">1</span>
<span class="badge badge-center rounded-pill bg-label-secondary">2</span>
<span class="badge badge-center rounded-pill bg-label-success">3</span>
<span class="badge badge-center rounded-pill bg-label-danger">4</span>
<span class="badge badge-center rounded-pill bg-label-warning">5</span>
<span class="badge badge-center rounded-pill bg-label-info">6</span>
</p>
<p>
<span class="badge badge-center bg-label-primary">1</span>
<span class="badge badge-center bg-label-secondary">2</span>
<span class="badge badge-center bg-label-success">3</span>
<span class="badge badge-center bg-label-danger">4</span>
<span class="badge badge-center bg-label-warning">5</span>
<span class="badge badge-center bg-label-info">6</span>
</p>
</div>
</div>
<div class="col-md-6 col-xxl-3 p-6">
<h6>Outline</h6>
<div class="small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill badge-outline-primary">1</span>
<span class="badge badge-center rounded-pill badge-outline-secondary">2</span>
<span class="badge badge-center rounded-pill badge-outline-success">3</span>
<span class="badge badge-center rounded-pill badge-outline-danger">4</span>
<span class="badge badge-center rounded-pill badge-outline-warning">5</span>
<span class="badge badge-center rounded-pill badge-outline-info">6</span>
</p>
<p>
<span class="badge badge-center badge-outline-primary">1</span>
<span class="badge badge-center badge-outline-secondary">2</span>
<span class="badge badge-center badge-outline-success">3</span>
<span class="badge badge-center badge-outline-danger">4</span>
<span class="badge badge-center badge-outline-warning">5</span>
<span class="badge badge-center badge-outline-info">6</span>
</p>
</div>
</div>
<div class="col-md-6 col-xxl-3 p-6">
<h6>Glow</h6>
<div class="text-light small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill bg-primary bg-glow">1</span>
<span class="badge badge-center rounded-pill bg-secondary bg-glow">2</span>
<span class="badge badge-center rounded-pill bg-success bg-glow">3</span>
<span class="badge badge-center rounded-pill bg-danger bg-glow">4</span>
<span class="badge badge-center rounded-pill bg-warning bg-glow">5</span>
<span class="badge badge-center rounded-pill bg-info bg-glow">6</span>
</p>
<p>
<span class="badge badge-center bg-primary bg-glow">1</span>
<span class="badge badge-center bg-secondary bg-glow">2</span>
<span class="badge badge-center bg-success bg-glow">3</span>
<span class="badge badge-center bg-danger bg-glow">4</span>
<span class="badge badge-center bg-warning bg-glow">5</span>
<span class="badge badge-center bg-info bg-glow">6</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Badge Circle with Icons -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Badge Circle & Square With Icon</h5>
<div class="row row-bordered g-0">
<div class="col-md-6 col-xxl-3 p-6">
<h6>Basic</h6>
<div class="small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill text-bg-primary"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center rounded-pill text-bg-secondary"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center rounded-pill text-bg-success"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center rounded-pill text-bg-danger"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center rounded-pill text-bg-warning"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center rounded-pill text-bg-info"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center rounded-pill text-bg-dark"><i class="icon-base ti tabler-headphones"></i></span>
</p>
<p>
<span class="badge badge-center text-bg-primary"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center text-bg-secondary"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center text-bg-success"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center text-bg-danger"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center text-bg-warning"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center text-bg-info"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center text-bg-dark"><i class="icon-base ti tabler-headphones"></i></span>
</p>
</div>
</div>
<div class="col-md-6 col-xxl-3 p-6">
<h6>Label</h6>
<div class="small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill bg-label-primary"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center rounded-pill bg-label-secondary"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center rounded-pill bg-label-success"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center rounded-pill bg-label-danger"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center rounded-pill bg-label-warning"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center rounded-pill bg-label-info"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center rounded-pill bg-label-dark"><i class="icon-base ti tabler-headphones"></i></span>
</p>
<p>
<span class="badge badge-center bg-label-primary"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center bg-label-secondary"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center bg-label-success"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center bg-label-danger"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center bg-label-warning"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center bg-label-info"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center bg-label-dark"><i class="icon-base ti tabler-headphones"></i></span>
</p>
</div>
</div>
<div class="col-md-6 col-xxl-3 p-6">
<h6>Outline</h6>
<div class="small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill badge-outline-primary"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center rounded-pill badge-outline-secondary"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center rounded-pill badge-outline-success"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center rounded-pill badge-outline-danger"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center rounded-pill badge-outline-warning"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center rounded-pill badge-outline-info"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center rounded-pill badge-outline-dark"><i class="icon-base ti tabler-headphones"></i></span>
</p>
<p>
<span class="badge badge-center badge-outline-primary"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center badge-outline-secondary"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center badge-outline-success"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center badge-outline-danger"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center badge-outline-warning"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center badge-outline-info"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center badge-outline-dark"><i class="icon-base ti tabler-headphones"></i></span>
</p>
</div>
</div>
<div class="col-md-6 col-xxl-3 p-6">
<h6>Outline</h6>
<div class="text-light small fw-medium mb-2">Default</div>
<div class="demo-inline-spacing">
<p>
<span class="badge badge-center rounded-pill bg-primary bg-glow"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center rounded-pill bg-secondary bg-glow"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center rounded-pill bg-success bg-glow"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center rounded-pill bg-danger bg-glow"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center rounded-pill bg-warning bg-glow"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center rounded-pill bg-info bg-glow"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center rounded-pill bg-dark bg-glow"><i class="icon-base ti tabler-headphones"></i></span>
</p>
<p>
<span class="badge badge-center bg-primary bg-glow"><i class="icon-base ti tabler-star"></i></span>
<span class="badge badge-center bg-secondary bg-glow"><i class="icon-base ti tabler-sun"></i></span>
<span class="badge badge-center bg-success bg-glow"><i class="icon-base ti tabler-check"></i></span>
<span class="badge badge-center bg-danger bg-glow"><i class="icon-base ti tabler-clock"></i></span>
<span class="badge badge-center bg-warning bg-glow"><i class="icon-base ti tabler-cloud"></i></span>
<span class="badge badge-center bg-info bg-glow"><i class="icon-base ti tabler-folder"></i></span>
<span class="badge badge-center bg-dark bg-glow"><i class="icon-base ti tabler-headphones"></i></span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Notifications -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Notifications</h5>
<div class="card-body d-flex flex-wrap gap-4">
<button type="button" class="btn btn-label-primary text-nowrap d-inline-flex position-relative me-4">
Badge
<span class="position-absolute top-0 start-100 translate-middle badge badge-center rounded-pill bg-primary text-white">12</span>
</button>
<button type="button" class="btn btn-label-warning text-nowrap d-inline-flex position-relative me-4">
Label Badge
<span class="position-absolute top-0 start-100 translate-middle badge badge-center rounded-pill bg-warning text-white">12</span>
</button>
<button type="button" class="btn btn-label-info text-nowrap d-inline-flex position-relative me-4">
Pill
<span class="position-absolute top-0 start-100 translate-middle badge badge-center rounded-pill bg-info text-white">12</span>
</button>
<button type="button" class="btn btn-label-danger text-nowrap d-inline-flex position-relative">
Dot
<span class="position-absolute top-0 start-100 translate-middle badge badge-dot border border-2 p-2 bg-danger"></span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base ti tabler-mail icon-sm"></span>
<span class="badge text-bg-primary badge-notifications">6</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base ti tabler-clock icon-sm"></span>
<span class="badge rounded-pill bg-label-danger badge-notifications">5</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base ti tabler-bell icon-sm"></span>
<span class="badge rounded-pill text-bg-danger badge-notifications">10</span>
</button>
<button type="button" class="btn text-nowrap d-inline-block">
<span class="icon-base ti tabler-brand-facebook icon-sm"></span>
<span class="badge rounded-pill bg-danger badge-dot badge-notifications"></span>
</button>
</div>
</div>
</div>
<!-- Dots -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Dots Style</h5>
<div class="card-body d-sm-flex d-block">
<div class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-primary me-1"></span> Primary</div>
<div class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-secondary me-1"></span> Secondary</div>
<div class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-success me-1"></span> Success</div>
<div class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-danger me-1"></span> Danger</div>
<div class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-warning me-1"></span> Warning</div>
<div class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span class="badge badge-dot text-bg-info me-1"></span> Info</div>
</div>
</div>
</div>
<!-- Button with Badges -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Button with Badges</h5>
<div class="row row-bordered g-0">
<div class="col-xl-4 p-6">
<small class="fw-medium">Default</small>
<div class="d-flex gap-4 flex-wrap mt-4">
<button type="button" class="btn btn-primary me-2 me-xl-0">
Text
<span class="badge bg-white text-primary badge-center ms-1">4</span>
</button>
<button type="button" class="btn btn-secondary">
Text
<span class="badge bg-white text-secondary rounded-pill badge-center ms-1">4</span>
</button>
</div>
</div>
<div class="col-xl-4 p-6">
<small class="text-light fw-medium">Label</small>
<div class="d-flex gap-4 flex-wrap mt-4">
<button type="button" class="btn btn-label-primary">
Text
<span class="badge bg-primary text-white badge-center ms-1">4</span>
</button>
<button type="button" class="btn btn-label-secondary">
Text
<span class="badge bg-secondary rounded-pill badge-center ms-1">4</span>
</button>
</div>
</div>
<div class="col-xl-4 p-6">
<small class="text-light fw-medium">Outline</small>
<div class="d-flex gap-4 flex-wrap mt-4">
<button type="button" class="btn btn-outline-primary">
Text
<span class="badge badge-center ms-1">4</span>
</button>
<button type="button" class="btn btn-outline-secondary">
Text
<span class="badge rounded-pill badge-center ms-1">4</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

513
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_buttons.html Normal file
View File

@@ -0,0 +1,513 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Buttons - UI elements{% endblock %}
{% block content %}
<div class="row g-6">
<!-- Basic Buttons -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Basic Buttons</h5>
<div class="card-body">
<small class="fw-medium">Default</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-dark">Dark</button>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="fw-medium">Rounded</small>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-success">Success</button>
<button type="button" class="btn rounded-pill btn-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-info">Info</button>
<button type="button" class="btn rounded-pill btn-dark">Dark</button>
</div>
</div>
</div>
</div>
<!-- Label Buttons -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Label Buttons</h5>
<div class="card-body">
<small class="fw-medium">Default</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-label-primary">Primary</button>
<button type="button" class="btn btn-label-secondary">Secondary</button>
<button type="button" class="btn btn-label-success">Success</button>
<button type="button" class="btn btn-label-danger">Danger</button>
<button type="button" class="btn btn-label-warning">Warning</button>
<button type="button" class="btn btn-label-info">Info</button>
<button type="button" class="btn btn-label-dark">Dark</button>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="fw-medium">Rounded</small>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-label-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-label-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-label-success">Success</button>
<button type="button" class="btn rounded-pill btn-label-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-label-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-label-info">Info</button>
<button type="button" class="btn rounded-pill btn-label-dark">Dark</button>
</div>
</div>
</div>
</div>
<!-- Outline Buttons -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Outline Buttons</h5>
<div class="card-body">
<small class="fw-medium">Default</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="fw-medium">Rounded</small>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-outline-primary">Primary</button>
<button type="button" class="btn rounded-pill btn-outline-secondary">Secondary</button>
<button type="button" class="btn rounded-pill btn-outline-success">Success</button>
<button type="button" class="btn rounded-pill btn-outline-danger">Danger</button>
<button type="button" class="btn rounded-pill btn-outline-warning">Warning</button>
<button type="button" class="btn rounded-pill btn-outline-info">Info</button>
<button type="button" class="btn rounded-pill btn-outline-dark">Dark</button>
</div>
</div>
</div>
</div>
<!-- Text Buttons -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Text Buttons</h5>
<div class="card-body">
<div class="demo-inline-spacing">
<button type="button" class="btn btn-text-primary">Primary</button>
<button type="button" class="btn btn-text-secondary">Secondary</button>
<button type="button" class="btn btn-text-success">Success</button>
<button type="button" class="btn btn-text-danger">Danger</button>
<button type="button" class="btn btn-text-warning">Warning</button>
<button type="button" class="btn btn-text-info">Info</button>
<button type="button" class="btn btn-text-dark">Dark</button>
</div>
</div>
</div>
</div>
<!-- Buttons with Icons -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Buttons with Icons</h5>
<div class="row row-bordered g-0">
<div class="col-lg-4 p-6">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary"><span class="icon-xs icon-base ti tabler-star me-2"></span>Primary</button>
<button type="button" class="btn btn-secondary"><span class="icon-xs icon-base ti tabler-bell me-2"></span>Secondary</button>
</div>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-primary"><span class="icon-xs icon-base ti tabler-star me-2"></span>Primary</button>
<button type="button" class="btn rounded-pill btn-secondary"><span class="icon-xs icon-base ti tabler-bell me-2"></span>Secondary</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Label</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-label-primary"><span class="icon-xs icon-base ti tabler-star me-2"></span>Primary</button>
<button type="button" class="btn btn-label-secondary"><span class="icon-xs icon-base ti tabler-bell me-2"></span>Secondary</button>
</div>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-label-primary"><span class="icon-xs icon-base ti tabler-star me-2"></span>Primary</button>
<button type="button" class="btn rounded-pill btn-label-secondary"><span class="icon-xs icon-base ti tabler-bell me-2"></span>Secondary</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Outline</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-outline-primary"><span class="icon-xs icon-base ti tabler-star me-2"></span>Primary</button>
<button type="button" class="btn btn-outline-secondary"><span class="icon-xs icon-base ti tabler-bell me-2"></span>Secondary</button>
</div>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-outline-primary"><span class="icon-xs icon-base ti tabler-star me-2"></span>Primary</button>
<button type="button" class="btn rounded-pill btn-outline-secondary"><span class="icon-xs icon-base ti tabler-bell me-2"></span>Secondary</button>
</div>
</div>
</div>
<hr class="m-0" />
<div class="row row-bordered g-0">
<div class="col-lg-4 p-6">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-icon btn-primary">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-secondary">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
<button type="button" class="btn rounded-pill btn-icon btn-primary">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn rounded-pill btn-icon btn-secondary">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Label</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-icon btn-label-primary">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-label-secondary">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-primary">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn rounded-pill btn-icon btn-label-secondary">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Outline</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-icon btn-outline-primary">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn btn-icon btn-outline-secondary">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-primary">
<span class="icon-base ti tabler-star icon-22px"></span>
</button>
<button type="button" class="btn rounded-pill btn-icon btn-outline-secondary">
<span class="icon-base ti tabler-bell icon-22px"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Social Button -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Social Button</h5>
<div class="row row-bordered g-0">
<div class="col-lg-4 p-6">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-facebook"><i class="icon-base ti tabler-brand-facebook icon-xs me-1"></i> Facebook</button>
<button type="button" class="btn btn-twitter"><i class="icon-base ti tabler-brand-twitter icon-xs me-1"></i> Twitter</button>
</div>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-google-plus"><i class="icon-base ti tabler-brand-google icon-xs me-2"></i> Google+</button>
<button type="button" class="btn rounded-pill btn-instagram"><i class="icon-base ti tabler-brand-instagram icon-xs me-2"></i> Instagram</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Label</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-label-linkedin"><i class="icon-base ti tabler-brand-linkedin icon-xs me-2"></i> Linkedin</button>
<button type="button" class="btn btn-label-github"><i class="icon-base ti tabler-brand-github icon-xs me-2"></i> Github</button>
</div>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-label-pinterest"><i class="icon-base ti tabler-brand-pinterest icon-xs me-2"></i> Pinterest</button>
<button type="button" class="btn rounded-pill btn-label-slack"><i class="icon-base ti tabler-brand-slack icon-xs me-2"></i> Slack</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Outline & Text</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-outline-dribbble"><i class="icon-base ti tabler-brand-dribbble icon-xs me-2"></i> Dribbble</button>
<button type="button" class="btn btn-text-reddit"><i class="icon-base ti tabler-brand-reddit icon-xs me-2"></i> Reddit</button>
</div>
<div class="demo-inline-spacing">
<button type="button" class="btn rounded-pill btn-outline-youtube"><i class="icon-base ti tabler-brand-youtube icon-xs me-2"></i> Youtube</button>
<button type="button" class="btn rounded-pill btn-text-vimeo"><i class="icon-base ti tabler-brand-vimeo icon-xs me-2"></i> Vimeo</button>
</div>
</div>
</div>
<hr class="m-0" />
<div class="row row-bordered g-0">
<div class="col-lg-4 p-6">
<small class="fw-medium">Basic Icons</small>
<div class="demo-inline-spacing">
<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 rounded-pill btn-google-plus">
<i class="icon-base ti tabler-brand-google icon-22px"></i>
</button>
<button type="button" class="btn btn-icon rounded-pill btn-instagram">
<i class="icon-base ti tabler-brand-instagram icon-22px"></i>
</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Label Icons</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-icon btn-label-linkedin"><i class="icon-base ti tabler-brand-linkedin icon-22px"></i></button>
<button type="button" class="btn btn-icon btn-label-github"><i class="icon-base ti tabler-brand-github icon-22px"></i></button>
<button type="button" class="btn btn-icon rounded-pill btn-label-pinterest">
<i class="icon-base ti tabler-brand-pinterest icon-22px"></i>
</button>
<button type="button" class="btn btn-icon rounded-pill btn-label-slack">
<i class="icon-base ti tabler-brand-slack icon-22px"></i>
</button>
</div>
</div>
<div class="col-lg-4 p-6">
<small class="fw-medium">Outline & Text Icons</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-icon btn-outline-dribbble">
<i class="icon-base ti tabler-brand-dribbble icon-22px"></i>
</button>
<button type="button" class="btn btn-icon btn-text-reddit"><i class="icon-base ti tabler-brand-reddit icon-22px"></i></button>
<button type="button" class="btn btn-icon rounded-pill btn-outline-youtube">
<i class="icon-base ti tabler-brand-youtube icon-22px"></i>
</button>
<button type="button" class="btn btn-icon rounded-pill btn-text-vimeo">
<i class="icon-base ti tabler-brand-vimeo icon-22px"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Button Options -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Button Options</h5>
<div class="card-body">
<small class="fw-medium">Sizes</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-xl btn-primary">Button xl</button>
<button type="button" class="btn btn-lg btn-primary">Button lg</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-sm btn-primary">Button sm</button>
<button type="button" class="btn btn-xs btn-primary">Button xs</button>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="fw-medium">Buttons State</small>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary active">Active</button>
<button type="button" class="btn btn-primary" disabled>Disabled</button>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="fw-medium">Block level buttons</small>
<div class="row mt-4">
<div class="d-grid gap-2 col-lg-6 mx-auto">
<button class="btn btn-primary btn-lg" type="button">Button</button>
<button class="btn btn-secondary btn-lg" type="button">Button</button>
</div>
</div>
</div>
</div>
</div>
<!-- Button Plugin -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Button Plugin</h5>
<div class="row row-bordered g-0">
<div class="col-xl-3 p-6">
<div class="small fw-medium">Toggle states</div>
<div class="demo-vertical-spacing">
<button type="button" class="btn btn-primary d-block" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active d-block" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary d-block" disabled data-bs-toggle="button">Disabled toggle button</button>
</div>
</div>
<div class="col-xl-3 p-6">
<div class="small fw-medium">Checkbox toggle buttons</div>
<div class="demo-vertical-spacing">
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check" />
<label class="btn btn-primary" for="btn-check">Single toggle</label>
</div>
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check-2" checked />
<label class="btn btn-primary" for="btn-check-2">Checked</label>
</div>
<div class="d-block">
<input type="checkbox" class="btn-check" id="btn-check-3" checked />
<label class="btn btn-primary" for="btn-check-3">Checked</label>
</div>
</div>
</div>
<div class="col-xl-6 p-6">
<div class="small fw-medium">Checkbox and radio</div>
<div class="demo-vertical-spacing">
<!-- Checkbox -->
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" checked />
<label class="btn btn-outline-primary" for="btncheck1">
<span class="d-block d-sm-none">
<i class="icon-base ti tabler-home icon-sm"></i>
</span>
<span class="d-none d-sm-block">Checkbox 1 (pre-checked)</span>
</label>
<input type="checkbox" class="btn-check" id="btncheck2" />
<label class="btn btn-outline-primary" for="btncheck2">
<span class="d-block d-sm-none">
<i class="icon-base ti tabler-plane-tilt icon-sm"></i>
</span>
<span class="d-none d-sm-block"> Checkbox 2</span>
</label>
<input type="checkbox" class="btn-check" id="btncheck3" />
<label class="btn btn-outline-primary" for="btncheck3">
<span class="d-block d-sm-none">
<i class="icon-base ti tabler-bell icon-sm"></i>
</span>
<span class="d-none d-sm-block"> Checkbox 3</span>
</label>
</div>
<br />
<!-- Radio -->
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked />
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" />
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" />
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Button Group -->
<div class="col-12">
<div class="card">
<h5 class="card-header">Button Group</h5>
<div class="card-body">
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<small class="fw-medium">Basic</small>
<div class="mt-4">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<small class="fw-medium">Label</small>
<div class="mt-4">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-label-secondary">Left</button>
<button type="button" class="btn btn-label-secondary">Middle</button>
<button type="button" class="btn btn-label-secondary">Right</button>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<small class="fw-medium">Outline</small>
<div class="mt-4">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
</div>
</div>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row">
<div class="col-xl-6 mb-xl-0 mb-4">
<small class="fw-medium">Button Toolbar</small>
<div class="btn-toolbar demo-inline-spacing" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-bell"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-clipboard"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-device-tv"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-browser-check"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-bold"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-italic"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-underline"></i></button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-volume-2"></i></button>
</div>
</div>
</div>
<div class="col-xl-6">
<small class="fw-medium">Button Nesting</small>
<div class="mt-4">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-truck"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-sun"></i></button>
<button type="button" class="btn btn-outline-secondary"><i class="icon-base ti tabler-cloud"></i></button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical icon-md d-sm-none"></i><span class="d-none d-sm-block">Dropdown</span></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="javascript:void(0);">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0);">Dropdown link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

300
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_carousel.html Normal file
View File

@@ -0,0 +1,300 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Carousel - UI elements{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/swiper/swiper.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/swiper/swiper.js' %}"></script>
{% endblock vendor_js %}
{% block page_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/css/pages/ui-carousel.css' %}" />
{% endblock page_css %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/ui-carousel.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row g-6">
<!-- Bootstrap carousel -->
<div class="col-md">
<h5 class="mb-6">Bootstrap carousel</h5>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{% static 'img/elements/3.png' %}" alt="First slide" />
<div class="carousel-caption d-none d-md-block">
<h4>First slide</h4>
<p>Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/elements/4.png' %}" alt="Second slide" />
<div class="carousel-caption d-none d-md-block">
<h4>Second slide</h4>
<p>In numquam omittam sea.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/elements/5.png' %}" alt="Third slide" />
<div class="carousel-caption d-none d-md-block">
<h4>Third slide</h4>
<p>Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<!-- Bootstrap crossfade carousel -->
<div class="col-md">
<h5 class="mb-6">Bootstrap crossfade carousel (dark)</h5>
<div id="carouselExampleDark" class="carousel carousel-dark slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{% static 'img/elements/7.png' %}" alt="First slide" />
<div class="carousel-caption d-none d-md-block">
<h4>First slide</h4>
<p>Eos mutat malis maluisset et, agam ancillae quo te, in vim congue pertinacia.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/elements/8.png' %}" alt="Second slide" />
<div class="carousel-caption d-none d-md-block">
<h4>Second slide</h4>
<p>In numquam omittam sea.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/elements/10.png' %}" alt="Third slide" />
<div class="carousel-caption d-none d-md-block">
<h4>Third slide</h4>
<p>Lorem ipsum dolor sit amet, virtute consequat ea qui, minim graeco mel no.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<hr class="container-p-nx mt-12 mb-1" />
<h5 class="my-6">Swiper</h5>
<!-- Default -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">Default</h6>
<div class="swiper" id="swiper-default">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/11.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/12.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/13.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/14.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/15.png' %})">Slide 5</div>
</div>
</div>
</div>
<!-- With arrows -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">With arrows</h6>
<div class="swiper" id="swiper-with-arrows">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/16.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/17.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/18.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/19.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/20.png' %})">Slide 5</div>
</div>
<div class="swiper-button-next swiper-button-white custom-icon"></div>
<div class="swiper-button-prev swiper-button-white custom-icon"></div>
</div>
</div>
<!-- With pagination -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">With pagination</h6>
<div class="swiper" id="swiper-with-pagination">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/21.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/22.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/23.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/24.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/25.png' %})">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- With progress -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">With progress</h6>
<div class="swiper" id="swiper-with-progress">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/26.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/27.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/28.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/29.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/30.png' %})">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next swiper-button-white custom-icon"></div>
<div class="swiper-button-prev swiper-button-white custom-icon"></div>
</div>
</div>
<!-- With scrollbar -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">With scrollbar</h6>
<div class="swiper" id="swiper-with-scrollbar">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/31.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/32.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/33.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/34.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/35.png' %})">Slide 5</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<!-- Vertical -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">Vertical</h6>
<div class="swiper" id="swiper-vertical">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/36.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/37.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/38.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/39.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/40.png' %})">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Multiple slides -->
<div class="col-12">
<h6 class="text-body-secondary mt-4">Multiple slides</h6>
<div class="swiper" id="swiper-multiple-slides">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/41.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/42.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/43.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/44.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/45.png' %})">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 3D coverflow effect -->
<div class="col-12">
<h6 class="text-body-secondary mt-4">3D coverflow effect</h6>
<div class="swiper" id="swiper-3d-coverflow-effect">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/46.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/47.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/48.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/49.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/50.png' %})">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 3D cube effect -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">3D cube effect</h6>
<div class="swiper" id="swiper-3d-cube-effect">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/46.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/47.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/48.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/51.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/50.png' %})">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- 3D flip effect -->
<div class="col-md-6">
<h6 class="text-body-secondary mt-4">3D flip effect</h6>
<div class="swiper" id="swiper-3d-flip-effect">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/41.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/42.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/43.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/44.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/45.png' %})">Slide 5</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next swiper-button-black custom-icon"></div>
<div class="swiper-button-prev swiper-button-black custom-icon"></div>
</div>
</div>
<!-- Gallery effect-->
<div class="col-12">
<h6 class="text-body-secondary mt-4">Thumbs Gallery</h6>
<div id="swiper-gallery">
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/51.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/52.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/53.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/54.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/55.png' %})">Slide 5</div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url({% static 'img/elements/51.png' %})">Slide 1</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/52.png' %})">Slide 2</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/53.png' %})">Slide 3</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/54.png' %})">Slide 4</div>
<div class="swiper-slide" style="background-image:url({% static 'img/elements/55.png' %})">Slide 5</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

86
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_collapse.html Normal file
View File

@@ -0,0 +1,86 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Collapse - UI elements{% endblock %}
{% block content %}
<!-- Collapse -->
<h5>Collapse</h5>
<div class="row g-6">
<div class="col-12">
<div class="card">
<h5 class="card-header">Basic</h5>
<div class="card-body">
<p class="card-text">Toggle the visibility of content across your project with a few classes and our JavaScript plugins.</p>
<p class="demo-inline-spacing">
<a class="btn btn-primary me-1" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Link with href </a>
<button class="btn btn-primary me-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-bs-target</button>
</p>
<div class="collapse" id="collapseExample">
<div class="d-grid d-sm-flex p-4 border">
<img src="{% static 'img/elements/1.png' %}" alt="collapse-image" height="125" class="me-6 mb-sm-0 mb-2" />
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<h5 class="card-header">Horizontal</h5>
<div class="card-body">
<p class="card-text">
The collapse plugin also supports horizontal collapsing.<br />
If you want more detailed information, you can check the
<a href="{% get_theme_variables 'documentation' %}/ui-collapse.html#horizontal-collapse" target="_blank">documentation</a>.
</p>
<p class="demo-inline-spacing">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">Toggle width collapse</button>
</p>
<div style="min-height: 120px;">
<div class="collapse-horizontal collapse show" id="collapseWidthExample">
<div class="p-4 border" style="width: 300px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry Ipsum has been the.</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<h5 class="card-header">Multiple targets</h5>
<div class="card-body">
<p class="card-text">Show and hide multiple elements by referencing them with a selector.</p>
<p class="demo-inline-spacing">
<a class="btn btn-primary me-1" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary me-1" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary me-1" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col-12 col-md-6 mb-2 mb-md-0">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="d-grid d-sm-flex p-4 border">
<img src="{% static 'img/elements/2.png' %}" alt="collapse-image" height="125" class="me-6 mb-sm-0 mb-2" />
<span> All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. </span>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="d-grid d-sm-flex p-4 border">
<img src="{% static 'img/elements/3.png' %}" alt="collapse-image" height="125" class="me-6 mb-sm-0 mb-2" />
<span> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum. </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

814
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_dropdowns.html Normal file
View File

@@ -0,0 +1,814 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Dropdowns - UI elements{% endblock %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/js/dropdown-hover.js' %}"></script>
{% endblock vendor_js %}
{% block content %}
<div class="card mb-6" id="btn-dropdown-demo">
<h5 class="card-header">Dropdowns</h5>
<!-- Basic Dropdowns -->
<div class="card-body">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item disabled" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Basic Dropdowns -->
<hr class="m-0" />
<!-- Label Dropdowns -->
<div class="card-body">
<small class="fw-medium">Label</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-label-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-label-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Label Dropdowns -->
<hr class="m-0" />
<!-- Outline Dropdowns -->
<div class="card-body">
<small class="fw-medium">Outline</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Secondary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-success dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-warning dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Basic Dropdowns -->
<hr class="m-0" />
<!-- Split Dropdowns -->
<div class="card-body">
<small class="fw-medium">Split</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Split Dropdowns -->
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Hidden Arrow Dropdowns -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">Hidden arrow</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">Hidden arrow</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Hidden Arrow Dropdowns -->
<!-- Open Dropdown on hover -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">On Hover</small>
<div class="demo-inline-spacing">
<div class="btn-group" id="hover-dropdown-demo">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-trigger="hover">Hover</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Open Dropdown on hover -->
<!-- Dropdown with icon -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">With Icon</small>
<div class="demo-inline-spacing">
<div class="btn-group" id="dropdown-icon-demo">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-menu-2 icon-xs me-1"></i> With Icon</button>
<ul class="dropdown-menu">
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Action</a>
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Another action</a>
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Something else here</a>
</li>
<li>
<hr class="dropdown-divider" />
</li>
<li>
<a href="javascript:void(0);" class="dropdown-item d-flex align-items-center"><i class="icon-base ti tabler-chevron-right scaleX-n1-rtl"></i>Separated link</a>
</li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown with icon -->
<!-- Icon Dropdown -->
<div class="col-lg-3 col-sm-6 col-12">
<small class="fw-medium">Icon Dropdown</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-icon rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false"><i class="icon-base ti tabler-dots-vertical"></i></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Icon Dropdown -->
</div>
</div>
</div>
<!-- Dropdown Variations -->
<div class="card" id="dropdown-variation-demo">
<h5 class="card-header">Dropdown Variations</h5>
<!-- Dropdown Menu Alignment -->
<div class="card-body">
<small class="fw-medium">Menu Alignment</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle overflow-hidden d-sm-inline-flex d-block text-truncate" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">End-aligned dropdown menu</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle overflow-hidden d-sm-inline-flex d-block text-truncate" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">Start-aligned but end-aligned when lg screen</button>
<ul class="dropdown-menu dropdown-menu-start dropdown-menu-lg-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle overflow-hidden d-sm-inline-flex d-block text-truncate" data-bs-toggle="dropdown" data-bs-display="static" aria-haspopup="true" aria-expanded="false">End-aligned but start-aligned when lg screen</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown Menu Alignment -->
<hr class="m-0" />
<!-- Dropdown Sizes -->
<div class="card-body">
<small class="fw-medium">Sizes</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button class="btn btn-primary btn-xl dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Extra large button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Large button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Small button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Extra small button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown Sizes -->
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Dropdown Directions -->
<div class="col-xl-6">
<small class="fw-medium">Directions</small>
<div class="row">
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropend</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="demo-inline-spacing">
<div class="btn-group dropstart">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropstart</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Centered Dropdown -->
<div class="col-xl-6">
<small class="fw-medium">Centered</small>
<div class="demo-inline-spacing">
<div class="dropdown-center">
<button class="btn btn-primary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">Directions centered dropdown</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action two</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action three</a></li>
</ul>
</div>
</div>
<div class="demo-inline-spacing">
<div class="dropup-center dropup">
<button class="btn btn-primary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false">Directions centered dropup</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action two</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Action three</a></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown Directions -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Dropdown menu content -->
<div class="col-xl-12">
<small class="fw-medium">Menu Content</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown Header</button>
<ul class="dropdown-menu">
<li>
<h6 class="dropdown-header text-uppercase">Dropdown header</h6>
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Divider</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0);">Separated link</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Text</button>
<div class="dropdown-menu">
<div class="px-4 py-2 text-body-secondary">
<p>Some example text that's free-flowing within the dropdown menu.</p>
<p class="mb-0">And this is more example text.</p>
</div>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">Forms</button>
<div class="dropdown-menu dropdown-menu-end w-px-300">
<form class="p-6" onsubmit="return false">
<div class="mb-4">
<label for="exampleDropdownFormEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
</div>
<div class="mb-4">
<label for="exampleDropdownFormPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck" />
<label class="form-check-label" for="dropdownCheck"> Remember me </label>
</div>
</div>
<button type="button" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0)">New around here? Sign up</a>
<a class="dropdown-item" href="javascript:void(0)">Forgot password?</a>
</div>
</div>
</div>
</div>
<!--/ Dropdown menu content -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row gy-3">
<!-- Dropdown options -->
<div class="col-xl-6">
<small class="fw-medium">Options : Use <code>data-bs-offset</code> or <code>data-bs-reference</code> to change the location of the dropdown.</small>
<div class="demo-inline-spacing">
<div class="btn-group me-1">
<button type="button" class="btn btn-primary dropdown-toggle" id="dropdownMenuOffset" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="10,20">Offset</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Reference</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuReference">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
</ul>
</div>
</div>
</div>
<!--/ Dropdown options -->
<!-- Auto close behavior -->
<div class="col-xl-6">
<small class="fw-medium">Auto close behavior</small>
<div class="demo-inline-spacing">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Default</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableOutside" data-bs-toggle="dropdown" data-bs-auto-close="inside" aria-expanded="false">Clickable outside</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableOutside">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">Clickable inside</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuClickable" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="false">Manual close</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickable">
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Menu item</a></li>
</ul>
</div>
</div>
</div>
<!--/ Auto close behavior -->
</div>
</div>
</div>
<!--/ Dropdown Variations -->
{% endblock %}

262
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_footer.html Normal file
View File

@@ -0,0 +1,262 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Footer - UI elements{% endblock %}
{% block content %}
<!-- Basic footer -->
<section id="basic-footer">
<h5 class="pb-1 mb-6">Basic Footer</h5>
<footer class="footer bg-light">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
</section>
<!--/ Basic footer -->
<hr class="container-m-nx my-12" />
<!-- Footer with components -->
<section id="component-footer">
<h5 class="pb-1 mb-6">Footer with Elements</h5>
<footer class="footer bg-light">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row gap-4">
<div class="form-check form-control-sm footer-link mb-0 pt-1 mt-50">
<input class="form-check-input" type="checkbox" value="" id="customCheck2" checked />
<label class="form-check-label" for="customCheck2"> Show </label>
</div>
<div class="dropdown dropup footer-link">
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Currency</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-currency-dollar"></i> USD</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-currency-euro"></i> Euro</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-currency-pound"></i> Pound</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base ti tabler-currency-bitcoin"></i> Bitcoin</a>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-sm btn-outline-danger"><i class="icon-base ti tabler-logout icon-xs me-1"></i>Logout</a>
</div>
</div>
</footer>
</section>
<!--/ Footer with components -->
<hr class="container-m-nx my-12" />
<!-- Color Schema -->
<section id="color-footer">
<h5 class="pb-1 mb-6">Color Schema</h5>
<footer class="footer bg-primary mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-secondary mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-success mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-danger mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-warning mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-info mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-light mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-dark mb-6">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
<footer class="footer bg-white">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium">{% get_theme_variables 'template_name' %}</a> ©</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
</section>
<!--/ Color Schema -->
<hr class="container-m-nx my-12" />
<!-- footer Theme -->
<section id="theme-footer">
<h5 class="pb-1 mb-6">Footer Theme</h5>
<footer class="footer bg-footer-theme">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div>
<a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text fw-medium"><span class="text-body">{% get_theme_variables 'template_name' %}</span></a> ©
</div>
<div class="d-flex flex-column flex-sm-row">
<a href="{% get_theme_variables 'license_url' %}" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms &amp; Conditions</a>
</div>
</div>
</footer>
</section>
<!--/ footer Theme -->
<hr class="container-m-nx my-12" />
<!-- Advanced footer -->
<section id="adv-footer">
<h5 class="pb-1 mb-6">Advanced Footer</h5>
<footer class="footer bg-light">
<div class="container-fluid container-p-x pt-12 pb-6">
<div class="row">
<div class="col-12 col-sm-6 col-md-3 mb-6 mb-sm-0">
<h4 class="fw-bold mb-4"><a href="{% get_theme_variables 'live_preview' %}" target="_blank" class="footer-text">{% get_theme_variables 'template_name' %} </a></h4>
<span>Get ready for better world</span>
<div class="social-icon my-4">
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-facebook me-2"><i class="icon-base ti tabler-brand-facebook icon-20px"></i></a>
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-twitter me-2"><i class="icon-base ti tabler-brand-twitter icon-20px"></i></a>
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-linkedin me-2"><i class="icon-base ti tabler-brand-linkedin icon-20px"></i></a>
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-github"><i class="icon-base ti tabler-brand-github icon-20px"></i></a>
</div>
<p class="pt-6">
<script>
document.write(new Date().getFullYear());
</script>
© {% get_theme_variables 'creator_name' %}
</p>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-6 mb-md-0">
<h5>Company</h5>
<ul class="list-unstyled">
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">About</a></li>
<li>
<a href="javascript:void(0)" class="footer-link d-block pb-2">Career <span class="badge bg-label-primary text-capitalize">We're hiring</span></a>
</li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Blog</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Customers</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Hire us</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">FAQs</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-6 mb-sm-0">
<h5>Products</h5>
<ul class="list-unstyled">
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Admin Template</a></li>
<li>
<a href="javascript:void(0)" class="footer-link d-block pb-2">UI Kit</a>
</li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Styleguide</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">API</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Documentation</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Changelog</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h5>Features</h5>
<ul class="list-unstyled">
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Affiliate Program</a></li>
<li>
<a href="javascript:void(0)" class="footer-link d-block pb-2">Integration</a>
</li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Special Offers</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Page Builder</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Plans & Pricing</a></li>
</ul>
</div>
</div>
</div>
</footer>
</section>
<!--/ Advanced footer -->
{% endblock %}

494
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_list_groups.html Normal file
View File

@@ -0,0 +1,494 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}List groups - UI elements{% endblock %}
{% block content %}
<div class="row g-6">
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">List groups</h5>
<div class="card-body">
<div class="row">
<!-- Basic List group -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action active">Bear claw cake biscuit</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Soufflé pastry pie ice</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action disabled">Tart tiramisu cake</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Bonbon toffee muffin</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Dragée tootsie roll</a>
</div>
</div>
</div>
<!--/ Basic List group -->
<!-- List group with Badges & Pills -->
<div class="col-lg-6">
<small class="fw-medium">With Bagdes & Pills</small>
<div class="demo-inline-spacing mt-4">
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Soufflé pastry pie ice
<span class="badge badge-center bg-primary">5</span>
</li>
<li class="list-group-item disabled">Bear claw cake biscuit</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Tart tiramisu cake
<span class="badge badge-center bg-success">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Bonbon toffee muffin
<span class="badge badge-center bg-danger rounded-pill">3</span>
</li>
<li class="list-group-item">Dragée tootsie roll</li>
</ul>
</div>
</div>
<!--/ List group with Badges & Pills -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row">
<!-- List group Flush (Without main border) -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="fw-medium">Flush</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group list-group-flush">
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Bear claw cake biscuit</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Soufflé pastry pie ice</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Tart tiramisu cake</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Bonbon toffee muffin</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Dragée tootsie roll</a>
</div>
</div>
</div>
<!--/ List group Flush (Without main border) -->
<!-- List group Icons -->
<div class="col-lg-6">
<small class="fw-medium">With Icons</small>
<div class="demo-inline-spacing mt-4">
<ul class="list-group">
<li class="list-group-item d-flex align-items-center">
<i class="icon-base ti tabler-device-tv icon-md me-3"></i>
Soufflé pastry pie ice
</li>
<li class="list-group-item d-flex align-items-center">
<i class="icon-base ti tabler-bell icon-md me-3"></i>
Bear claw cake biscuit
</li>
<li class="list-group-item d-flex align-items-center">
<i class="icon-base ti tabler-headphones icon-md me-3"></i>
Tart tiramisu cake
</li>
<li class="list-group-item d-flex align-items-center">
<i class="icon-base ti tabler-bookmark icon-md me-3"></i>
Bonbon toffee muffin
</li>
<li class="list-group-item d-flex align-items-center">
<i class="icon-base ti tabler-paper-bag icon-md me-3"></i>
Dragée tootsie roll
</li>
</ul>
</div>
</div>
<!--/ List group Icons -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row">
<!-- List group Numbered -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="fw-medium">Numbered</small>
<div class="demo-inline-spacing mt-4">
<ol class="list-group list-group-numbered">
<li class="list-group-item">Bear claw cake biscuit</li>
<li class="list-group-item">Soufflé pastry pie ice</li>
<li class="list-group-item">Tart tiramisu cake</li>
<li class="list-group-item">Bonbon toffee muffin</li>
<li class="list-group-item">Dragée tootsie roll</li>
</ol>
</div>
</div>
<!--/ List group Numbered -->
<!-- List group checkbox -->
<div class="col-lg-6">
<small class="fw-medium">List Group With Checkbox</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" />
Soufflé pastry pie ice
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" />
Bear claw cake biscuit
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" />
Tart tiramisu cake
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" />
Bonbon toffee muffin
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" />
Dragée tootsie roll
</label>
</div>
</div>
</div>
<!--/ List group checkbox -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row">
<!-- Contextual List group -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="fw-medium">Contextual classes</small>
<div class="demo-inline-spacing mt-4">
<ul class="list-group">
<li class="list-group-item list-group-item-action list-group-item-primary">Primary list group item</li>
<li class="list-group-item list-group-item-action list-group-item-secondary">Secondary list group item</li>
<li class="list-group-item list-group-item-action list-group-item-success">Success list group item</li>
<li class="list-group-item list-group-item-action list-group-item-danger">Danger list group item</li>
<li class="list-group-item list-group-item-action list-group-item-warning">Warning list group item</li>
<li class="list-group-item list-group-item-action list-group-item-info">Info list group item</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Dark list group item</li>
</ul>
</div>
</div>
<!--/ Contextual List group -->
<!-- Custom content with heading -->
<div class="col-lg-6">
<small class="fw-medium">Custom content</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex justify-content-between w-100">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small>Donec id elit non mi porta.</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex justify-content-between w-100">
<h5 class="mb-1">List group item heading</h5>
<small class="text-body-secondary">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-body-secondary">Donec id elit non mi porta.</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex justify-content-between w-100">
<h5 class="mb-1">List group item heading</h5>
<small class="text-body-secondary">3 days ago</small>
</div>
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class="text-body-secondary">Donec id elit non mi porta.</small>
</a>
</div>
</div>
</div>
<!--/ Custom content with heading -->
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Javascript behavior</h5>
<div class="card-body">
<div class="row">
<!-- Custom content with heading -->
<div class="col-lg-6 mb-6 mb-xl-0">
<small class="fw-medium">Vertical</small>
<div class="mt-4">
<div class="row">
<div class="col-md-4 col-12 mb-4 mb-md-0">
<div class="list-group">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings">Settings</a>
</div>
</div>
<div class="col-md-8 col-12">
<div class="tab-content p-0">
<div class="tab-pane fade show active" id="list-home">
Donut sugar plum sweet roll biscuit. Cake oat cake gummi bears. Tart wafer wafer halvah gummi bears cheesecake. Topping croissant cake sweet roll. Dessert fruitcake gingerbread halvah marshmallow pudding bear claw cheesecake. Bonbon dragée cookie gummies. Pudding marzipan liquorice. Sugar plum dragée cupcake cupcake cake dessert chocolate bar. Pastry lollipop lemon drops lollipop halvah croissant. Pastry sweet gingerbread lemon drops topping ice cream.
</div>
<div class="tab-pane fade" id="list-profile">
Muffin lemon drops chocolate chupa chups jelly beans dessert jelly-o. Soufflé gummies gummies. Ice cream powder marshmallow cotton candy oat cake wafer. Marshmallow gingerbread tootsie roll. Chocolate cake bonbon jelly beans lollipop jelly beans halvah marzipan danish pie. Oat cake chocolate cake pudding bear claw liquorice gingerbread icing sugar plum brownie. Toffee cookie apple pie cheesecake bear claw sugar plum wafer gummi bears fruitcake.
</div>
<div class="tab-pane fade" id="list-messages">
Ice cream dessert candy sugar plum croissant cupcake tart pie apple pie. Pastry chocolate chupa chups tiramisu. Tiramisu cookie oat cake. Pudding brownie bonbon. Pie carrot cake chocolate macaroon. Halvah jelly jelly beans cake macaroon jelly-o. Danish pastry dessert gingerbread powder halvah. Muffin bonbon fruitcake dragée sweet sesame snaps oat cake marshmallow cheesecake. Cupcake donut sweet bonbon cheesecake soufflé chocolate bar.
</div>
<div class="tab-pane fade" id="list-settings">
Marzipan cake oat cake. Marshmallow pie chocolate. Liquorice oat cake donut halvah jelly-o. Jelly-o muffin macaroon cake gingerbread candy cupcake. Cake lollipop lollipop jelly brownie cake topping chocolate. Pie oat cake jelly. Lemon drops halvah jelly cookie bonbon cake cupcake ice cream. Donut tart bonbon sweet roll soufflé gummies biscuit. Wafer toffee topping jelly beans icing pie apple pie toffee pudding. Tiramisu powder macaroon tiramisu cake halvah.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<small class="fw-medium">Horizontal</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group list-group-horizontal-md text-md-center">
<a class="list-group-item list-group-item-action active" id="home-list-item" data-bs-toggle="list" href="#horizontal-home">Home</a>
<a class="list-group-item list-group-item-action" id="profile-list-item" data-bs-toggle="list" href="#horizontal-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="messages-list-item" data-bs-toggle="list" href="#horizontal-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="settings-list-item" data-bs-toggle="list" href="#horizontal-settings">Settings</a>
</div>
<div class="tab-content px-0 mt-0">
<div class="tab-pane fade show active" id="horizontal-home">
Donut sugar plum sweet roll biscuit. Cake oat cake gummi bears. Tart wafer wafer halvah gummi bears cheesecake. Topping croissant cake sweet roll. Dessert fruitcake gingerbread halvah marshmallow pudding bear claw cheesecake. Bonbon dragée cookie gummies. Pudding marzipan liquorice. Sugar plum dragée cupcake cupcake cake dessert chocolate bar. Pastry lollipop lemon drops lollipop halvah croissant. Pastry sweet gingerbread lemon drops topping ice cream.
</div>
<div class="tab-pane fade" id="horizontal-profile">
Muffin lemon drops chocolate chupa chups jelly beans dessert jelly-o. Soufflé gummies gummies. Ice cream powder marshmallow cotton candy oat cake wafer. Marshmallow gingerbread tootsie roll. Chocolate cake bonbon jelly beans lollipop jelly beans halvah marzipan danish pie. Oat cake chocolate cake pudding bear claw liquorice gingerbread icing sugar plum brownie. Toffee cookie apple pie cheesecake bear claw sugar plum wafer gummi bears fruitcake.
</div>
<div class="tab-pane fade" id="horizontal-messages">
Ice cream dessert candy sugar plum croissant cupcake tart pie apple pie. Pastry chocolate chupa chups tiramisu. Tiramisu cookie oat cake. Pudding brownie bonbon. Pie carrot cake chocolate macaroon. Halvah jelly jelly beans cake macaroon jelly-o. Danish pastry dessert gingerbread powder halvah. Muffin bonbon fruitcake dragée sweet sesame snaps oat cake marshmallow cheesecake. Cupcake donut sweet bonbon cheesecake soufflé chocolate bar.
</div>
<div class="tab-pane fade" id="horizontal-settings">
Marzipan cake oat cake. Marshmallow pie chocolate. Liquorice oat cake donut halvah jelly-o. Jelly-o muffin macaroon cake gingerbread candy cupcake. Cake lollipop lollipop jelly brownie cake topping chocolate. Pie oat cake jelly. Lemon drops halvah jelly cookie bonbon cake cupcake ice cream. Donut tart bonbon sweet roll soufflé gummies biscuit. Wafer toffee topping jelly beans icing pie apple pie toffee pudding. Tiramisu powder macaroon tiramisu cake halvah.
</div>
</div>
</div>
</div>
<!--/ Custom content with heading -->
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Timeline & Notification</h5>
<div class="card-body">
<div class="row">
<!-- Timeline Style -->
<div class="col-lg-6 p-6">
<small class="fw-medium">Timeline</small>
<div class="demo-inline-spacing mt-4">
<ul class="list-group list-group-timeline">
<li class="list-group-item list-group-timeline-primary">Bear claw cake biscuit</li>
<li class="list-group-item list-group-timeline-success">Soufflé pastry pie ice</li>
<li class="list-group-item list-group-timeline-warning">Tart tiramisu cake</li>
<li class="list-group-item list-group-timeline-info">Dragée tootsie roll</li>
<li class="list-group-item list-group-timeline-danger">Bonbon toffee muffin</li>
</ul>
</div>
</div>
<!--/ Timeline Style -->
<!-- Notification Style -->
<div class="col-lg-6 p-6">
<small class="fw-medium">Notification</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex justify-content-between">
<div class="li-wrapper d-flex justify-content-start align-items-start align-items-sm-center flex-column flex-sm-row gap-2 gap-sm-0">
<div class="avatar avatar-sm me-4">
<span class="avatar-initial rounded-circle bg-label-success">M</span>
</div>
<div class="list-content">
<h6 class="mb-1">List group item heading</h6>
<small class="text-body-secondary">Donec id elit non mi porta.</small>
</div>
</div>
<small>3 days ago</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex justify-content-between">
<div class="li-wrapper d-flex justify-content-start align-items-start align-items-sm-center flex-column flex-sm-row gap-2 gap-sm-0">
<div class="avatar avatar-sm me-4">
<span class="avatar-initial rounded-circle bg-label-danger">B</span>
</div>
<div class="list-content">
<h6 class="mb-1">List group item heading</h6>
<small class="text-body-secondary">Donec id elit non mi porta.</small>
</div>
</div>
<small>1 day ago</small>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex justify-content-between">
<div class="li-wrapper d-flex justify-content-start align-items-start align-items-sm-center flex-column flex-sm-row gap-2 gap-sm-0">
<div class="avatar avatar-sm me-4">
<span class="avatar-initial rounded-circle bg-label-primary">V</span>
</div>
<div class="list-content">
<h6 class="mb-1">List group item heading</h6>
<small class="text-body-secondary">Donec id elit non mi porta.</small>
</div>
</div>
<small>5 days ago</small>
</a>
</div>
</div>
</div>
<!--/ Notification Style -->
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="row">
<!-- User List Style -->
<div class="col-12 col-lg-6 mb-6 mb-xl-0">
<small class="fw-medium">User List</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group">
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="{% static 'img/avatars/2.png' %}" alt="User Image" class="rounded-circle me-3" width="40" />
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1">Danish sesame snaps halvah</h6>
<small>13 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-success"></span>
<small>Online</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="{% static 'img/avatars/8.png' %}" alt="User Image" class="rounded-circle me-3" width="40" />
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1">Cake halvah biscuit cheesecake</h6>
<small class="text-body-secondary">11 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-warning"></span>
<small>Away</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="{% static 'img/avatars/4.png' %}" alt="User Image" class="rounded-circle me-3" width="40" />
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1">Tart cheesecake jujubes caramels</h6>
<small class="text-body-secondary">9 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-secondary"></span>
<small>Offline</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
<div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
<img src="{% static 'img/avatars/11.png' %}" alt="User Image" class="rounded-circle me-3" width="40" />
<div class="w-100">
<div class="d-flex justify-content-between">
<div class="user-info">
<h6 class="mb-1">Icing sweet gummies</h6>
<small class="text-body-secondary">15 minutes</small>
<div class="user-status">
<span class="badge badge-dot bg-danger"></span>
<small>In Meeting</small>
</div>
</div>
<div class="add-btn">
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ User List Style -->
<!-- Progress Style -->
<div class="col-12 col-lg-6">
<small class="fw-medium">Progress</small>
<div class="demo-inline-spacing mt-4">
<div class="list-group">
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-primary rounded p-1 me-4">
<i class="icon-base ti tabler-brand-bootstrap icon-xl text-white"></i>
</div>
<div class="w-100">
<h6 class="mb-2">Bootstrap is an open source toolkit</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-primary" role="progressbar" style="width: 95%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-success rounded p-1 me-4">
<i class="icon-base ti tabler-brand-vue icon-xl text-white"></i>
</div>
<div class="w-100">
<h6 class="mb-2">Vue.js is the Progressive JavaScript Framework</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 85%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-danger rounded p-1 me-4">
<i class="icon-base ti tabler-brand-angular icon-xl text-white"></i>
</div>
<div class="w-100">
<h6 class="mb-2">Angular implements Functional Programming concepts</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-danger" role="progressbar" style="width: 55%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-info rounded p-1 me-4">
<i class="icon-base ti tabler-brand-react icon-xl text-white"></i>
</div>
<div class="w-100">
<h6 class="mb-2">List group item heading</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
<a href="javascript:void(0);" class="list-group-item list-group-item-action d-flex align-items-center p-4">
<div class="badge bg-warning rounded p-1 me-4">
<i class="icon-base ti tabler-brand-javascript icon-xl text-white"></i>
</div>
<div class="w-100">
<h6 class="mb-2">JavaScript, the most popular framework</h6>
<div class="progress" style="height: 5px;">
<div class="progress-bar bg-warning" role="progressbar" style="width: 65%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</a>
</div>
</div>
</div>
<!--/ Progress Style -->
</div>
</div>
</div>
</div>
</div>
{% endblock %}

1019
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_modals.html Normal file
View File

File diff suppressed because it is too large Load Diff

612
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_navbar.html Normal file
View File

@@ -0,0 +1,612 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Navbar - UI elements{% endblock %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/js/dropdown-hover.js' %}"></script>
<script src="{% static 'vendor/js/mega-dropdown.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/ui-navbar.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Basic -->
<h5 class="pb-1 mb-6">Example</h5>
<nav class="navbar navbar-expand-lg navbar-light bg-body-tertiary mb-12">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="javascript:void(0)">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="javascript:void(0)" tabindex="-1">Disabled</a>
</li>
</ul>
<form class="d-flex" onsubmit="return false">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-primary" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!--/ Basic -->
<!-- Supported content -->
<h5 class="pb-1 mb-6">Supported content</h5>
<div class="mb-12">
<h6 class="mt-2 mb-4 text-body-secondary">Text</h6>
<nav class="navbar navbar-example navbar-expand-lg navbar-light bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-2" aria-controls="navbar-ex-2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-2">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
</div>
<span class="navbar-text">Marshmallow brownie lemon drops cheesecake.</span>
</div>
</div>
</nav>
<h6 class="mt-6 mb-4 text-body-secondary">Input Group</h6>
<nav class="navbar navbar-example navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-4">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
</div>
<form class="d-flex">
<div class="input-group">
<span class="input-group-text"><i class="icon-base ti tabler-search"></i></span>
<input type="text" class="form-control" placeholder="Search..." />
</div>
</form>
</div>
</div>
</nav>
<h6 class="mt-6 mb-4 text-body-secondary">Button</h6>
<nav class="navbar navbar-example navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-3">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
</div>
<form onsubmit="return false">
<button class="btn btn-primary" type="button">Buy Now</button>
</form>
</div>
</div>
</nav>
</div>
<!--/ Supported content -->
<!-- Mega dropdown -->
<h5 class="pb-1 mb-6">Mega dropdown</h5>
<div class="mb-12">
<h6 class="mt-2 mb-4 text-body-secondary">Open on click</h6>
<nav class="navbar navbar-example navbar-expand-lg bg-body-tertiary" style="z-index: 21">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-14">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-14">
<ul class="navbar-nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</li>
<li class="nav-item mega-dropdown">
<a class="nav-link dropdown-toggle navbar-ex-14-mega-dropdown mega-dropdown" href="javascript:void(0);" aria-expanded="false" data-bs-toggle="mega-dropdown">Mega</a>
<div class="dropdown-menu px-4 py-0">
<div class="row row-bordered">
<div class="col-sm-6 col-lg p-4">
<h5 class="m-2">Applications</h5>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-mail icon-sm me-1"></i> Email</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-messages icon-sm me-1"></i> Chat</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-checklist icon-sm me-1"></i> ToDos</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-calendar icon-sm me-1"></i> Calender</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link disabled" href="javascript:void(0)" tabindex="-1"><i class="icon-base ti tabler-ban icon-sm me-1"></i> Disabled</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-lg p-4">
<h5 class="m-2">Useful Links</h5>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Profit Margins</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Overall Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Gross Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Net Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Quarterly Profits</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-lg p-4">
<h6 class="my-2">List Group</h6>
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Analytical Reports</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Operational Growth</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Files and Directories</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Audit & Logs</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Customer CRM</a>
</div>
</div>
<div class="col-sm-6 col-lg p-4">
<form onsubmit="return false">
<div class="mb-4">
<label class="form-label" for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com" />
</div>
<div class="mb-4">
<label class="form-label" for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password" />
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck" />
<label class="form-check-label" for="dropdownCheck"> Remember me </label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<h6 class="mt-6 mb-4 text-body-secondary">Open on hover</h6>
<nav class="navbar navbar-example navbar-expand-lg bg-body-tertiary" style="z-index: 20">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-15">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-15">
<ul class="navbar-nav me-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0);" data-bs-toggle="dropdown" aria-expanded="false" data-trigger="hover">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Action</a>
<a class="dropdown-item" href="javascript:void(0)">Another action</a>
<a class="dropdown-item" href="javascript:void(0)">Something else here</a>
</div>
</li>
<li class="nav-item mega-dropdown">
<a href="javascript:void(0);" class="nav-link dropdown-toggle navbar-ex-15-mega-dropdown mega-dropdown" aria-expanded="false" data-bs-toggle="mega-dropdown" data-trigger="hover">Mega</a>
<div class="dropdown-menu px-4 py-0">
<div class="row row-bordered">
<div class="col-sm-6 col-lg p-4">
<h5 class="m-2">Applications</h5>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-mail icon-sm me-1"></i> Email</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-messages icon-sm me-1"></i> Chat</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-checklist icon-sm me-1"></i> ToDos</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)"><i class="icon-base ti tabler-calendar icon-sm me-1"></i> Calender</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link disabled" href="javascript:void(0)" tabindex="-1"><i class="icon-base ti tabler-ban icon-sm me-1"></i> Disabled</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-lg p-4">
<h5 class="m-2">Useful Links</h5>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Profit Margins</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Overall Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Gross Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Net Profits</a>
</li>
<li class="nav-item">
<a class="nav-link mega-dropdown-link" href="javascript:void(0)">Quarterly Profits</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-lg p-4">
<h6 class="my-2">List Group</h6>
<div class="list-group">
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Analytical Reports</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Operational Growth</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Files and Directories</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Audit & Logs</a>
<a href="javascript:void(0)" class="list-group-item list-group-item-action mega-dropdown-link">Customer CRM</a>
</div>
</div>
<div class="col-sm-6 col-lg p-4">
<form onsubmit="return false">
<div class="mb-4">
<label class="form-label" for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="email@example.com" />
</div>
<div class="mb-4">
<label class="form-label" for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password" />
</div>
<div class="mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck1" />
<label class="form-check-label" for="dropdownCheck1"> Remember me </label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!--/ Mega dropdown -->
<!-- Color schemes -->
<h5 class="pb-1 mb-6">Color schemes</h5>
<div class="demo-vertical-spacing demo-only-element">
<!-- Primary navbar -->
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Primary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-7">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Secondary navbar -->
<nav class="navbar navbar-expand-lg bg-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Secondary</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-8">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-8">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Success navbar -->
<nav class="navbar navbar-expand-lg bg-success">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Success</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-9">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-9">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Danger navbar -->
<nav class="navbar navbar-expand-lg bg-danger">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Danger</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-12">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-12">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Warning navbar -->
<nav class="navbar navbar-expand-lg bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Warning</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-11">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-11">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Info navbar -->
<nav class="navbar navbar-expand-lg bg-info">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Info</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-10">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Dark navbar -->
<nav class="navbar navbar-expand-lg bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Dark</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-13">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-13">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- White navbar -->
<nav class="navbar navbar-expand-lg bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">White</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-6">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-6">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Theme navbar -->
<h6 class="mt-6 mb-4 text-body-secondary">Navbar Theme</h6>
<nav class="navbar navbar-expand-lg bg-navbar-theme">
<div class="container-fluid">
<a class="navbar-brand" href="javascript:void(0)">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-ex-5">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-ex-5">
<div class="navbar-nav me-auto">
<a class="nav-item nav-link active" href="javascript:void(0)">Home</a>
<a class="nav-item nav-link" href="javascript:void(0)">About</a>
<a class="nav-item nav-link" href="javascript:void(0)">Contact</a>
<a class="nav-item nav-link disabled" href="javascript:void(0)">Disabled</a>
</div>
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-user icon-xs me-1"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-settings icon-xs me-1"></i> Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);"><i class="icon-base navbar-icon ti tabler-lock-open icon-xs me-1"></i> Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!--/ Color schemes -->
{% endblock %}

209
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_offcanvas.html Normal file
View File

@@ -0,0 +1,209 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}OffCanvas - UI elements{% endblock %}
{% block content %}
<div class="row gy-6">
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Placements</h5>
<div class="card-body">
<div class="row gy-3">
<!-- Default Offcanvas -->
<div class="col-lg-3 col-md-6">
<small class="fw-medium mb-4">Start (Default)</small>
<div class="mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">Toggle Start</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h5 id="offcanvasStartLabel" class="offcanvas-title">Offcanvas Start</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
<!-- End Offcanvas -->
<div class="col-lg-3 col-md-6">
<small class="fw-medium mb-4">End</small>
<div class="mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">Toggle End</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
<div class="offcanvas-header">
<h5 id="offcanvasEndLabel" class="offcanvas-title">Offcanvas End</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Top Offcanvas -->
<div class="col-lg-3 col-md-6">
<small class="fw-medium mb-4">Top</small>
<div class="mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle Top</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 id="offcanvasTopLabel" class="offcanvas-title">Offcanvas Top</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary me-2">Continue</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Bottom Offcanvas -->
<div class="col-lg-3 col-md-6">
<small class="fw-medium mb-4">Bottom</small>
<div class="mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle Bottom</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBottomLabel" class="offcanvas-title">Offcanvas Bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary me-2">Continue</button>
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Backdrop</h5>
<div class="card-body">
<div class="row gy-3">
<!-- Enable Body Scrolling Offcanvas -->
<div class="col-lg-4 col-md-6">
<small class="fw-medium mb-4">Enable Body Scrolling</small>
<div class="mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScroll" aria-controls="offcanvasScroll">Enable Body Scrolling</button>
<div class="offcanvas offcanvas-end" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScroll" aria-labelledby="offcanvasScrollLabel">
<div class="offcanvas-header">
<h5 id="offcanvasScrollLabel" class="offcanvas-title">Offcanvas Scroll</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Enable backdrop (default) Offcanvas -->
<div class="col-lg-4 col-md-6">
<small class="fw-medium mb-4">Enable backdrop (default)</small>
<div class="mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBackdrop" aria-controls="offcanvasBackdrop">Enable backdrop</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasBackdrop" aria-labelledby="offcanvasBackdropLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBackdropLabel" class="offcanvas-title">Enable backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Enable Scrolling & Backdrop Offcanvas -->
<div class="col-lg-4 col-md-6">
<small class="fw-medium mb-4">Enable Scrolling & Backdrop</small>
<div class="mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBoth" aria-controls="offcanvasBoth">Enable both scrolling & backdrop</button>
<div class="offcanvas offcanvas-end" data-bs-scroll="true" tabindex="-1" id="offcanvasBoth" aria-labelledby="offcanvasBothLabel">
<div class="offcanvas-header">
<h5 id="offcanvasBothLabel" class="offcanvas-title">Enable both scrolling & backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<h5>Responsive offcanvas</h5>
<div>
<button class="btn btn-primary d-xl-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas-xl</button>
<div class="alert alert-info d-xl-block d-none mt-4">Resize your browser to <code>xl</code> breakpoint to show the responsive offcanvas toggle.</div>
<div class="offcanvas offcanvas-start offcanvas-xl" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasResponsiveLabel">offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
</div>
<div class="offcanvas-body d-xl-none my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card">
<div class="card-body">
<!-- Dark Offcanvas -->
<h5>Dark offcanvas</h5>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDark" aria-controls="offcanvasDark">Toggle Dark offcanvas</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel" data-bs-theme="dark">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body my-auto mx-0 flex-grow-0">
<p class="text-center">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
<button type="button" class="btn btn-primary mb-2 d-grid w-100">Continue</button>
<button type="button" class="btn btn-label-secondary d-grid w-100" data-bs-dismiss="offcanvas">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

782
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_pagination_breadcrumbs.html Normal file
View File

@@ -0,0 +1,782 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Pagination and breadcrumbs - UI elements{% endblock %}
{% block content %}
<div class="row gy-6">
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Pagination</h5>
<!-- Basic Pagination -->
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing">
<!-- Basic Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<!--/ Basic Pagination -->
<!-- Basic rounded Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-rounded">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<!--/ Basic rounded Pagination -->
</div>
</div>
<div class="col-lg-6">
<small class="fw-medium">Basic Pagination Shape</small>
<div class="demo-inline-spacing">
<!-- Outline Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-primary">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<!--/ Outline Pagination -->
<!-- Outline rounded Pagination -->
<nav aria-label="Page navigation">
<ul class="pagination pagination-rounded pagination-outline-primary">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<!--/ Outline rounded Pagination -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pagination Sizes -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Sizes & Alignments</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-4">
<small class="fw-medium">Sizes</small>
<div class="demo-inline-spacing">
<nav aria-label="Page navigation">
<ul class="pagination pagination-sm">
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-xs"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-xs"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-lg"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-lg"></i></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-lg-8">
<small class="fw-medium">Alignments</small>
<div class="demo-inline-spacing">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-end">
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Pagination Sizes -->
<!-- Pagination color options -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Pagination Color Options</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<small class="fw-medium">Basic</small>
<div class="demo-inline-spacing">
<nav aria-label="Page navigation">
<ul class="pagination pagination-primary">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-secondary">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-success">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-danger">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-warning">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-info">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-lg-6">
<small class="fw-medium">Outline</small>
<div class="demo-inline-spacing">
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-primary">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-secondary">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-success">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-danger">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-warning">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation">
<ul class="pagination pagination-outline-info">
<li class="page-item first">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-left icon-sm"></i></a>
</li>
<li class="page-item prev">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-left icon-sm"></i></a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">1</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">2</a>
</li>
<li class="page-item active">
<a class="page-link" href="javascript:void(0);">3</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">4</a>
</li>
<li class="page-item">
<a class="page-link" href="javascript:void(0);">5</a>
</li>
<li class="page-item next">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevron-right icon-sm"></i></a>
</li>
<li class="page-item last">
<a class="page-link" href="javascript:void(0);"><i class="icon-base ti tabler-chevrons-right icon-sm"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Pagination color options -->
<!-- Breadcrumb -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Breadcrumbs</h5>
<div class="card-body">
<!-- Basic Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="javascript:void(0);">Home</a>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);">Library</a>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
<!-- Basic Breadcrumb -->
<!-- Custom style1 Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom-icon">
<li class="breadcrumb-item">
<a href="javascript:void(0);">Home</a>
<i class="breadcrumb-icon icon-base ti tabler-chevron-right align-middle icon-xs"></i>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);">Library</a>
<i class="breadcrumb-icon icon-base ti tabler-chevron-right align-middle icon-xs"></i>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
<!--/ Custom style1 Breadcrumb -->
<!-- Custom style2 Breadcrumb -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom-icon mb-0">
<li class="breadcrumb-item">
<a href="javascript:void(0);">Home</a>
<i class="breadcrumb-icon icon-base ti tabler-check align-middle icon-xs"></i>
</li>
<li class="breadcrumb-item">
<a href="javascript:void(0);">Library</a>
<i class="breadcrumb-icon icon-base ti tabler-check align-middle icon-xs"></i>
</li>
<li class="breadcrumb-item active">Data</li>
</ol>
</nav>
<!--/ Custom style2 Breadcrumb -->
</div>
</div>
</div>
<!--/ Breadcrumb -->
</div>
{% endblock %}

183
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_progress.html Normal file
View File

@@ -0,0 +1,183 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Progress bars - UI elements{% endblock %}
{% block content %}
<div class="row gy-6">
<!-- Options -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Progress bars</h5>
<div class="card-body">
<div class="small fw-medium">Default</div>
<div class="demo-vertical-spacing">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Height</div>
<div class="demo-vertical-spacing">
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 16px;">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">With Label</div>
<div class="demo-vertical-spacing">
<div class="progress" style="height: 16px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="progress" style="height: 16px;">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Options -->
<!-- Backgrounds -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Backgrounds</h5>
<div class="card-body">
<div class="demo-vertical-spacing demo-only-element">
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!--/ Backgrounds -->
<!-- Striped -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Striped</h5>
<div class="card-body">
<div class="demo-vertical-spacing demo-only-element">
<div class="progress">
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!--/ Striped -->
<!-- Animated -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Animated</h5>
<div class="card-body">
<div class="demo-vertical-spacing demo-only-element">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-dark" role="progressbar" style="width: 85%" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<!--/ Animated -->
<!-- Multiple bars -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Multiple bars</h5>
<div class="card-body">
<div class="small fw-medium mb-1">Default</div>
<div class="progress mb-4">
<div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="small fw-medium mb-1">Striped</div>
<div class="progress mb-4">
<div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="small fw-medium mb-1">Animated</div>
<div class="progress">
<div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--/ Multiple bars -->
</div>
{% endblock %}

285
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_spinners.html Normal file
View File

@@ -0,0 +1,285 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Spinners - UI elements{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/spinkit/spinkit.css' %}" />
{% endblock vendor_css %}
{% block content %}
<div class="row gy-6">
<!-- Style -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header pb-0">Style</h5>
<div class="row row-bordered g-0">
<div class="col-md p-6">
<div class="small fw-medium">Border</div>
<div class="demo-inline-spacing">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="col-md p-6">
<div class="small fw-medium">Growing</div>
<div class="demo-inline-spacing">
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Style -->
<!-- Size -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header pb-0">Size</h5>
<div class="row row-bordered g-0">
<!-- Large -->
<div class="col-md p-6">
<div class="small fw-medium">Large</div>
<div class="demo-inline-spacing">
<div class="spinner-border spinner-border-lg text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border spinner-border-lg text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<!-- Medium -->
<div class="col-md p-6">
<div class="small fw-medium">Medium</div>
<div class="demo-inline-spacing">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<!-- Small -->
<div class="col-md p-6">
<div class="small fw-medium">Small</div>
<div class="demo-inline-spacing">
<div class="spinner-border spinner-border-sm text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border spinner-border-sm text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Size -->
<!-- With Buttons -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">With Buttons</h5>
<div class="card-body">
<div class="demo-inline-spacing">
<button class="btn btn-icon btn-primary" type="button" disabled>
<span class="spinner-border" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border me-1" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-icon btn-primary" type="button" disabled>
<span class="spinner-grow" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow me-1" role="status" aria-hidden="true"></span>
Loading...
</button>
</div>
</div>
</div>
</div>
<!--/ With Buttons -->
<!-- SpinKit -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header pb-0">SpinKit</h5>
<div class="card-body demo-vertical-spacing-lg demo-only-element px-12">
<div class="row py-sm-6 gy-3 gy-sm-0">
<div class="col">
<!-- Plane -->
<div class="sk-plane"></div>
</div>
<div class="col">
<!-- Chase -->
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</div>
<div class="col">
<!-- Bounce -->
<div class="sk-bounce">
<div class="sk-bounce-dot"></div>
<div class="sk-bounce-dot"></div>
</div>
</div>
<div class="col">
<!-- Wave -->
<div class="sk-wave">
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
<div class="sk-wave-rect"></div>
</div>
</div>
</div>
<div class="row py-sm-6 gy-3 gy-sm-0">
<div class="col">
<!-- Pluse -->
<div class="sk-pulse"></div>
</div>
<div class="col">
<!-- Swing -->
<div class="sk-swing">
<div class="sk-swing-dot"></div>
<div class="sk-swing-dot"></div>
</div>
</div>
<div class="col">
<!-- Circle -->
<div class="sk-circle">
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
<div class="sk-circle-dot"></div>
</div>
</div>
<div class="col">
<!-- Circle Fade -->
<div class="sk-circle-fade">
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
<div class="sk-circle-fade-dot"></div>
</div>
</div>
</div>
<div class="row py-sm-6 gy-3 gy-sm-0">
<div class="col-3">
<!-- Grid -->
<div class="sk-grid">
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
<div class="sk-grid-cube"></div>
</div>
</div>
<div class="col-3">
<!-- Fold -->
<div class="sk-fold">
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
<div class="sk-fold-cube"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SpinKit -->
</div>
{% endblock %}

293
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_tabs_pills.html Normal file
View File

@@ -0,0 +1,293 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Tabs and pills - UI elements{% endblock %}
{% block content %}
<!-- Tabs -->
<h5 class="py-4 my-6">Tabs</h5>
<div class="row g-6">
<div class="col-xl-6">
<h6 class="text-body-secondary">Basic</h6>
<div class="nav-align-top nav-tabs-shadow">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-home" aria-controls="navs-top-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-profile" aria-controls="navs-top-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-top-messages" aria-controls="navs-top-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-top-home" role="tabpanel">
<p>Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.</p>
<p class="mb-0">Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.</p>
</div>
<div class="tab-pane fade" id="navs-top-profile" role="tabpanel">
<p>Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.</p>
<p class="mb-0">Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.</p>
</div>
<div class="tab-pane fade" id="navs-top-messages" role="tabpanel">
<p>Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.</p>
<p class="mb-0">Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<h6 class="text-body-secondary">Filled Tabs</h6>
<div class="nav-align-top nav-tabs-shadow">
<ul class="nav nav-tabs nav-fill" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-home" aria-controls="navs-justified-home" aria-selected="true">
<span class="d-none d-sm-inline-flex align-items-center">
<i class="icon-base ti tabler-home icon-sm me-1_5"></i>Home
<span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-label-danger ms-1_5">3</span>
</span>
<i class="icon-base ti tabler-home icon-sm d-sm-none"></i>
</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-profile" aria-controls="navs-justified-profile" aria-selected="false">
<span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Profile</span>
<i class="icon-base ti tabler-user icon-sm d-sm-none"></i>
</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-justified-messages" aria-controls="navs-justified-messages" aria-selected="false">
<span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-sm me-1_5"></i>Messages</span>
<i class="icon-base ti tabler-message-dots icon-sm d-sm-none"></i>
</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-justified-home" role="tabpanel">
<p>Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.</p>
<p class="mb-0">Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.</p>
</div>
<div class="tab-pane fade" id="navs-justified-profile" role="tabpanel">
<p>Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.</p>
<p class="mb-0">Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.</p>
</div>
<div class="tab-pane fade" id="navs-justified-messages" role="tabpanel">
<p>Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.</p>
<p class="mb-0">Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<h6 class="text-body-secondary">Vertical</h6>
<div class="nav-align-left nav-tabs-shadow">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-home" aria-controls="navs-left-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-profile" aria-controls="navs-left-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-left-messages" aria-controls="navs-left-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-left-home">
<p>Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.</p>
<p class="mb-0">Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.</p>
</div>
<div class="tab-pane fade" id="navs-left-profile">
<p>Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.</p>
<p class="mb-0">Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.</p>
</div>
<div class="tab-pane fade" id="navs-left-messages">
<p>Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.</p>
<p class="mb-0">Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<h6 class="text-body-secondary">Bottom tabs</h6>
<div class="nav-align-bottom nav-tabs-shadow">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-bottom-home" aria-controls="navs-bottom-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-bottom-profile" aria-controls="navs-bottom-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-bottom-messages" aria-controls="navs-bottom-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-bottom-home" role="tabpanel">
<p>Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.</p>
<p class="mb-0">Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.</p>
</div>
<div class="tab-pane fade" id="navs-bottom-profile" role="tabpanel">
<p>Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.</p>
<p class="mb-0">Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.</p>
</div>
<div class="tab-pane fade" id="navs-bottom-messages" role="tabpanel">
<p>Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.</p>
<p class="mb-0">Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Tabs -->
<hr class="container-m-nx mt-12" />
<!-- Pills -->
<h5 class="py-4 my-6">Pills</h5>
<div class="row g-6">
<div class="col-xl-6">
<h6 class="text-body-secondary">Basic</h6>
<div class="nav-align-top">
<ul class="nav nav-pills mb-4" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-home" aria-controls="navs-pills-top-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-profile" aria-controls="navs-pills-top-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-top-messages" aria-controls="navs-pills-top-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-pills-top-home" role="tabpanel">
<p>Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.</p>
<p class="mb-0">Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.</p>
</div>
<div class="tab-pane fade" id="navs-pills-top-profile" role="tabpanel">
<p>Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.</p>
<p class="mb-0">Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.</p>
</div>
<div class="tab-pane fade" id="navs-pills-top-messages" role="tabpanel">
<p>Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.</p>
<p class="mb-0">Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<h6 class="text-body-secondary">Filled Pills</h6>
<div class="nav-align-top">
<ul class="nav nav-pills mb-4 nav-fill" role="tablist">
<li class="nav-item mb-1 mb-sm-0">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-justified-home" aria-controls="navs-pills-justified-home" aria-selected="true">
<span class="d-none d-sm-inline-flex align-items-center">
<i class="icon-base ti tabler-home icon-sm me-1_5"></i>Home
<span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-danger ms-1_5">3</span>
</span>
<i class="icon-base ti tabler-home icon-sm d-sm-none"></i>
</button>
</li>
<li class="nav-item mb-1 mb-sm-0">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-justified-profile" aria-controls="navs-pills-justified-profile" aria-selected="false">
<span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ti tabler-user icon-sm me-1_5"></i>Profile</span>
<i class="icon-base ti tabler-user icon-sm d-sm-none"></i>
</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-justified-messages" aria-controls="navs-pills-justified-messages" aria-selected="false">
<span class="d-none d-sm-inline-flex align-items-center"><i class="icon-base ti tabler-message-dots icon-sm me-1_5"></i>Messages</span>
<i class="icon-base ti tabler-message-dots icon-sm d-sm-none"></i>
</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-pills-justified-home" role="tabpanel">
<p>Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.</p>
<p class="mb-0">Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.</p>
</div>
<div class="tab-pane fade" id="navs-pills-justified-profile" role="tabpanel">
<p>Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.</p>
<p class="mb-0">Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.</p>
</div>
<div class="tab-pane fade" id="navs-pills-justified-messages" role="tabpanel">
<p>Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.</p>
<p class="mb-0">Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<h6 class="text-body-secondary">Vertical</h6>
<div class="nav-align-left">
<ul class="nav nav-pills me-4" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-left-home" aria-controls="navs-pills-left-home" aria-selected="true">Home</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-left-profile" aria-controls="navs-pills-left-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-left-messages" aria-controls="navs-pills-left-messages" aria-selected="false">Messages</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="navs-pills-left-home" role="tabpanel">
<p>Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake caramels sesame snaps powder. Bear claw candy topping.</p>
<p class="mb-0">Tootsie roll fruitcake cookie. Dessert topping pie. Jujubes wafer carrot cake jelly. Bonbon jelly-o jelly-o ice cream jelly beans candy canes cake bonbon. Cookie jelly beans marshmallow jujubes sweet.</p>
</div>
<div class="tab-pane fade" id="navs-pills-left-profile" role="tabpanel">
<p>Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie wafer candy oat cake ice cream. Gummies halvah tootsie roll muffin biscuit icing dessert gingerbread. Pastry ice cream cheesecake fruitcake.</p>
<p class="mb-0">Jelly-o jelly beans icing pastry cake cake lemon drops. Muffin muffin pie tiramisu halvah cotton candy liquorice caramels.</p>
</div>
<div class="tab-pane fade" id="navs-pills-left-messages" role="tabpanel">
<p>Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans macaroon gummies cupcake gummi bears cake chocolate.</p>
<p class="mb-0">Cake chocolate bar cotton candy apple pie tootsie roll ice cream apple pie brownie cake. Sweet roll icing sesame snaps caramels danish toffee. Brownie biscuit dessert dessert. Pudding jelly jelly-o tart brownie jelly.</p>
</div>
</div>
</div>
</div>
<div class="col-xl-6">
<h6 class="text-body-secondary">Within cards</h6>
<div class="card text-center">
<div class="card-header">
<div class="nav-align-top">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<button type="button" class="nav-link active" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-active" aria-controls="navs-pills-within-card-active" aria-selected="true">Active</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link" role="tab" data-bs-toggle="tab" data-bs-target="#navs-pills-within-card-link" aria-controls="navs-pills-within-card-link" aria-selected="false">Link</button>
</li>
<li class="nav-item">
<button type="button" class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false">Disabled</button>
</li>
</ul>
</div>
</div>
<div class="card-body">
<div class="tab-content p-0">
<div class="tab-pane fade show active" id="navs-pills-within-card-active" role="tabpanel">
<h4 class="card-title">Special active title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
</div>
<div class="tab-pane fade" id="navs-pills-within-card-link" role="tabpanel">
<h4 class="card-title">Special link title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="javascript:void(0)" class="btn btn-secondary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pills -->
{% endblock %}

458
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_toasts.html Normal file
View File

@@ -0,0 +1,458 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Toasts - UI elements{% endblock %}
{% block vendor_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'vendor/libs/notyf/notyf.css' %}" />
<link rel="stylesheet" href="{% static 'vendor/libs/animate-css/animate.css' %}" />
{% endblock vendor_css %}
{% block vendor_js %}
{{ block.super }}
<script src="{% static 'vendor/libs/notyf/notyf.js' %}"></script>
{% endblock vendor_js %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/ui-toasts.js' %}"></script>
{% endblock page_js %}
{% block content %}
<!-- Toast with Animation -->
<div class="bs-toast toast toast-ex animate__animated my-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<!--/ Toast with Animation -->
<!-- Toast with Placements -->
<div class="bs-toast toast toast-placement-ex m-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<!-- Toast with Placements -->
<!-- Bootstrap Toasts with Animation -->
<div class="card mb-6">
<h5 class="card-header">Bootstrap Toasts Example with Animation</h5>
<div class="card-body">
<div class="row gx-3 gy-2 align-items-center">
<div class="col-md-3">
<label class="form-label" for="selectType">Type</label>
<select id="selectType" class="form-select color-dropdown">
<option value="bg-primary" selected>Primary</option>
<option value="bg-secondary">Secondary</option>
<option value="bg-success">Success</option>
<option value="bg-danger">Danger</option>
<option value="bg-warning">Warning</option>
<option value="bg-info">Info</option>
<option value="bg-dark">Dark</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label" for="selectAnimation">Animation</label>
<select id="selectAnimation" class="form-select animation-dropdown">
<optgroup label="Attention Seekers">
<option value="animate__fade">fade</option>
<option value="animate__bounce">bounce</option>
<option value="animate__flash">flash</option>
<option value="animate__pulse">pulse</option>
<option value="animate__rubberBand">rubberBand</option>
<option value="animate__shakeX">shake</option>
<option value="animate__swing">swing</option>
<option value="animate__tada" selected>tada</option>
<option value="animate__wobble">wobble</option>
<option value="animate__jello">jello</option>
<option value="animate__heartBeat">heartBeat</option>
</optgroup>
<optgroup label="Bouncing Entrances">
<option value="animate__bounceIn">bounceIn</option>
<option value="animate__bounceInDown">bounceInDown</option>
<option value="animate__bounceInLeft">bounceInLeft</option>
<option value="animate__bounceInRight">bounceInRight</option>
<option value="animate__bounceInUp">bounceInUp</option>
</optgroup>
<optgroup label="Fading Entrances">
<option value="animate__fadeIn">fadeIn</option>
<option value="animate__fadeInDown">fadeInDown</option>
<option value="animate__fadeInDownBig">fadeInDownBig</option>
<option value="animate__fadeInLeft">fadeInLeft</option>
<option value="animate__fadeInLeftBig">fadeInLeftBig</option>
<option value="animate__fadeInRight">fadeInRight</option>
<option value="animate__fadeInRightBig">fadeInRightBig</option>
<option value="animate__fadeInUp">fadeInUp</option>
<option value="animate__fadeInUpBig">fadeInUpBig</option>
</optgroup>
<optgroup label="Flippers">
<option value="animate__flip">flip</option>
<option value="animate__flipInX">flipInX</option>
<option value="animate__flipInY">flipInY</option>
</optgroup>
<optgroup label="Lightspeed">
<option value="animate__lightSpeedInRight">lightSpeedIn</option>
</optgroup>
<optgroup label="Rotating Entrances">
<option value="animate__rotateIn">rotateIn</option>
<option value="animate__rotateInDownLeft">rotateInDownLeft</option>
<option value="animate__rotateInDownRight">rotateInDownRight</option>
<option value="animate__rotateInUpLeft">rotateInUpLeft</option>
<option value="animate__rotateInUpRight">rotateInUpRight</option>
</optgroup>
<optgroup label="Sliding Entrances">
<option value="animate__slideInUp">slideInUp</option>
<option value="animate__slideInDown">slideInDown</option>
<option value="animate__slideInLeft">slideInLeft</option>
<option value="animate__slideInRight">slideInRight</option>
</optgroup>
<optgroup label="Zoom Entrances">
<option value="animate__zoomIn">zoomIn</option>
<option value="animate__zoomInDown">zoomInDown</option>
<option value="animate__zoomInLeft">zoomInLeft</option>
<option value="animate__zoomInRight">zoomInRight</option>
<option value="animate__zoomInUp">zoomInUp</option>
</optgroup>
<optgroup label="Specials">
<option value="animate__jackInTheBox">jackInTheBox</option>
<option value="animate__rollIn">rollIn</option>
</optgroup>
</select>
</div>
<div class="col-md-3">
<label class="form-label" for="showToastPlacement">&nbsp;</label>
<button id="showToastAnimation" class="btn btn-primary d-block">Show Toast</button>
</div>
</div>
</div>
</div>
<!--/ Bootstrap Toasts with Animation -->
<!-- Bootstrap Toasts with Placement -->
<div class="card mb-6">
<h5 class="card-header">Bootstrap Toasts Example With Placement</h5>
<div class="card-body">
<div class="row gx-3 gy-2 align-items-center">
<div class="col-md-3">
<label class="form-label" for="selectTypeOpt">Type</label>
<select id="selectTypeOpt" class="form-select color-dropdown">
<option value="bg-primary" selected>Primary</option>
<option value="bg-secondary">Secondary</option>
<option value="bg-success">Success</option>
<option value="bg-danger">Danger</option>
<option value="bg-warning">Warning</option>
<option value="bg-info">Info</option>
<option value="bg-dark">Dark</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label" for="selectPlacement">Placement</label>
<select class="form-select placement-dropdown" id="selectPlacement">
<option value="top-0 start-0">Top left</option>
<option value="top-0 start-50 translate-middle-x">Top center</option>
<option value="top-0 end-0">Top right</option>
<option value="top-50 start-0 translate-middle-y">Middle left</option>
<option value="top-50 start-50 translate-middle">Middle center</option>
<option value="top-50 end-0 translate-middle-y">Middle right</option>
<option value="bottom-0 start-0">Bottom left</option>
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
<option value="bottom-0 end-0">Bottom right</option>
</select>
</div>
<div class="col-md-3">
<label class="form-label" for="showToastPlacement">&nbsp;</label>
<button id="showToastPlacement" class="btn btn-primary d-block">Show Toast</button>
</div>
</div>
</div>
</div>
<!--/ Bootstrap Toasts with Placement -->
<!-- Bootstrap Toasts Styles -->
<div class="card mb-6">
<h5 class="card-header">Bootstrap Toasts Styles</h5>
<div class="row g-0">
<div class="col-md-6 p-6">
<div class="small fw-medium mb-4">Default</div>
<div class="toast-container position-relative">
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-primary"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-secondary"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-success"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-danger"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close " data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-warning"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close " data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-info"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-dark"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
</div>
<div class="col-md-6 ui-bg-overlay-container p-6">
<div class="ui-bg-overlay bg-dark rounded-end-bottom"></div>
<div class="text-white small fw-medium mb-4">Translucent</div>
<div class="toast-container position-relative">
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-primary"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-secondary"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-success"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-danger"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-warning"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-info"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<i class="icon-base ti tabler-bell icon-xs me-2 text-dark"></i>
<div class="me-auto fw-medium">Bootstrap</div>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Hello, world! This is a toast message.</div>
</div>
</div>
</div>
</div>
</div>
<!--/ Bootstrap Toasts Styles -->
<!-- Notyf Demo -->
<div class="card">
<h5 class="card-header">Notyf Notifications</h5>
<div class="card-body">
<div class="row">
<!-- Message Input -->
<div class="col-lg-6 col-xl-3">
<div class="mb-4">
<label class="form-label" for="message">Message</label>
<textarea class="form-control" id="message" rows="3" placeholder="Enter a message..."></textarea>
</div>
<!-- Options -->
<div class="mb-4">
<div class="form-check">
<input id="dismissible" class="form-check-input" type="checkbox" />
<label class="form-check-label" for="dismissible">Dismissible</label>
</div>
<div class="form-check">
<input id="ripple" class="form-check-input" type="checkbox" checked />
<label class="form-check-label" for="ripple">Ripple Effect</label>
</div>
</div>
</div>
<!-- Type Selection -->
<div class="col-lg-6 col-xl-3">
<div class="mb-4" id="notificationTypeGroup">
<label class="form-label">Notification Type</label>
<div class="form-check">
<input type="radio" id="successRadio" name="notificationType" class="form-check-input" value="success" checked />
<label class="form-check-label" for="successRadio">Success</label>
</div>
<div class="form-check">
<input type="radio" id="errorRadio" name="notificationType" class="form-check-input" value="error" />
<label class="form-check-label" for="errorRadio">Error</label>
</div>
<div class="form-check">
<input type="radio" id="infoRadio" name="notificationType" class="form-check-input" value="info" />
<label class="form-check-label" for="infoRadio">Info</label>
</div>
<div class="form-check">
<input type="radio" id="warningRadio" name="notificationType" class="form-check-input" value="warning" />
<label class="form-check-label" for="warningRadio">Warning</label>
</div>
<div class="mb-4">
<label class="form-label" for="duration">Duration (ms)</label>
<input id="duration" type="number" class="form-control" placeholder="Enter duration in milliseconds" value="3000" />
</div>
</div>
</div>
<!-- Duration Input -->
<div class="col">
<label class="form-label">Position Type</label>
<div class="row">
<div class="col-6">
<div class="form-check">
<input id="positionleft" class="form-check-input" type="radio" name="positionx" value="left" />
<label class="form-check-label" for="positionleft">left Position</label>
</div>
<div class="form-check">
<input id="positioncenter" class="form-check-input" type="radio" name="positionx" value="center" />
<label class="form-check-label" for="positioncenter">center Position</label>
</div>
<div class="form-check">
<input id="positionright" class="form-check-input" type="radio" name="positionx" value="right" checked />
<label class="form-check-label" for="positionright">right Position</label>
</div>
</div>
<div class="col-6">
<div class="form-check">
<input id="positionTop" class="form-check-input" type="radio" name="positiony" value="top" checked />
<label class="form-check-label" for="positionTop">Top Position</label>
</div>
<div class="form-check">
<input id="positionBottom" class="form-check-input" type="radio" name="positiony" value="bottom" />
<label class="form-check-label" for="positionBottom">Bottom Position</label>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="d-flex gap-3 flex-wrap">
<button class="btn btn-primary" id="showNotification">Show Notification</button>
<button class="btn btn-danger" id="clearNotifications">Clear Notifications</button>
</div>
</div>
</div>
<!--/ Notyf Demo -->
{% endblock %}

115
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_tooltips_popovers.html Normal file
View File

@@ -0,0 +1,115 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Tooltips and popovers - UI elements{% endblock %}
{% block page_js %}
{{ block.super }}
<script src="{% static 'js/ui-popover.js' %}"></script>
{% endblock page_js %}
{% block content %}
<div class="row gy-6">
<!-- Tooltips -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Tooltips</h5>
<div class="card-body">
<div class="small fw-medium">Directions</div>
<div class="row demo-vertical-spacing">
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Top</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Bottom</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Left</button>
</div>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Solid</div>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-primary" title="Primary tooltip">Primary</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-secondary" title="Secondary tooltip">Secondary</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-success" title="Success tooltip">Success</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-danger" title="Danger tooltip">Danger</button>
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-warning" title="Warning tooltip">Warning</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-info" title="Info tooltip">Info</button>
<button type="button" class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="tooltip-dark" title="Dark tooltip">Dark</button>
</div>
</div>
</div>
</div>
<!--/ Tooltips -->
<!-- Popovers -->
<div class="col-lg-12">
<div class="card">
<h5 class="card-header">Popovers</h5>
<div class="card-body">
<div class="small fw-medium">Directions</div>
<div class="row demo-vertical-spacing">
<div class="col">
<button type="button" class="btn btn-primary text-nowrap" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Popover on right</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary text-nowrap" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Popover on top</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary text-nowrap" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Popover on bottom</button>
</div>
<div class="col">
<button type="button" class="btn btn-primary text-nowrap" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Popover on left</button>
</div>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Solid</div>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-primary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Primary</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-secondary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Secondary</button>
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-success" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Success</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-danger" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Danger</button>
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="popover-warning" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Warning</button>
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-info" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Info</button>
<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-dark" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Dark</button>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Header color</div>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-header-primary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Primary</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="popover-header-secondary" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Secondary</button>
<button type="button" class="btn btn-success" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="popover-header-success" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Success</button>
<button type="button" class="btn btn-danger" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-header-danger" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Danger</button>
<button type="button" class="btn btn-warning" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="popover-header-warning" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Warning</button>
<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-header-info" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Info</button>
<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="popover-header-dark" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">Dark</button>
</div>
</div>
<hr class="m-0" />
<div class="card-body">
<div class="small fw-medium">Custom popover</div>
<div class="demo-inline-spacing">
<button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="custom-popover" data-bs-content="This is a very beautiful popover, show some love." title="Popover title">custom-popover</button>
</div>
</div>
</div>
</div>
<!--/ Popovers -->
</div>
{% endblock %}

350
resources/vuexy-admin-v10.11.1/django-version/full-version/apps/ui/templates/ui_typography.html Normal file
View File

@@ -0,0 +1,350 @@
{% extends layout_path %}
{% load static %}
{% load i18n %}
{% block title %}Typography - UI elements{% endblock %}
{% block content %}
<div class="row g-6 mb-6">
<!-- Headings -->
<div class="col-lg">
<div class="card">
<h5 class="card-header">Headings</h5>
<table class="table table-borderless">
<tbody>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Heading 1</small></td>
<td class="py-4">
<h1 class="mb-0">Bootstrap heading</h1>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Heading 2</small></td>
<td class="py-4">
<h2 class="mb-0">Bootstrap heading</h2>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 3</small></td>
<td class="py-4">
<h3 class="mb-0">Bootstrap heading</h3>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 4</small></td>
<td class="py-4">
<h4 class="mb-0">Bootstrap heading</h4>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 5</small></td>
<td class="py-4">
<h5 class="mb-0">Bootstrap heading</h5>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 6</small></td>
<td class="py-4">
<h6 class="mb-0">Bootstrap heading</h6>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Customizing headings -->
<div class="col-lg">
<div class="card">
<h5 class="card-header">Customizing Headings <small class="text-body-secondary ms-1">Default</small></h5>
<table class="table table-borderless">
<tbody>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Heading 1</small></td>
<td class="py-4">
<h1 class="mb-0">Bootstrap <small class="text-body-secondary">heading</small></h1>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Heading 2</small></td>
<td class="py-4">
<h2 class="mb-0">Bootstrap <small class="text-body-secondary">heading</small></h2>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 3</small></td>
<td class="py-4">
<h3 class="mb-0">Bootstrap <small class="text-body-secondary">heading</small></h3>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 4</small></td>
<td class="py-4">
<h4 class="mb-0">Bootstrap <small class="text-body-secondary">heading</small></h4>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 5</small></td>
<td class="py-4">
<h5 class="mb-0">Bootstrap <small class="text-body-secondary">heading</small></h5>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Heading 6</small></td>
<td class="py-4">
<h6 class="mb-0">Bootstrap <small class="text-body-secondary">heading</small></h6>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row g-6 mb-6">
<!-- Display headings -->
<div class="col-lg">
<div class="card">
<h5 class="card-header">Display headings</h5>
<table class="table table-borderless">
<tbody>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Display 1</small></td>
<td class="py-4">
<h1 class="display-1 mb-0">Display 1</h1>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Display 2</small></td>
<td class="py-4">
<h1 class="display-2 mb-0">Display 2</h1>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Display 3</small></td>
<td class="py-4">
<h1 class="display-3 mb-0">Display 3</h1>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Display 4</small></td>
<td class="py-4">
<h1 class="display-4 mb-0">Display 4</h1>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Display 5</small></td>
<td class="py-4">
<h1 class="display-5 mb-0">Display 5</h1>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Display 6</small></td>
<td class="py-4">
<h1 class="display-6 mb-0">Display 6</h1>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Paragraph -->
<div class="col-lg">
<div class="card">
<h5 class="card-header">Paragraph</h5>
<table class="table table-borderless">
<tbody>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Paragraph</small></td>
<td class="py-4">
<p class="mb-0">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.</p>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Lead Text</small></td>
<td class="py-6">
<p class="lead mb-0">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.Duis mollis, est non commodo luctus.</p>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Muted text</small></td>
<td class="py-4">
<p class="text-body-secondary mb-0">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row g-6 mb-6">
<!-- Inline text elements -->
<div class="col">
<div class="card">
<h5 class="card-header">Inline Text Elements</h5>
<div class="card-body">
<table class="table table-borderless">
<tbody>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Text Highlight</small></td>
<td class="py-4">
<p class="mb-0">You can use the mark tag to <mark>highlight</mark> text.</p>
</td>
</tr>
<tr>
<td class="align-middle"><small class="text-light fw-medium">Deleted Text</small></td>
<td class="py-4">
<p class="mb-0"><del>This line of text is meant to be treated as deleted text.</del></p>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">No Longer Correct</small></td>
<td class="py-4">
<p class="mb-0"><s>This line of text is meant to be treated as no longer accurate.</s></p>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Addition</small></td>
<td class="py-4">
<p class="mb-0"><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Underlined</small></td>
<td class="py-4">
<p class="mb-0"><u>This line of text will render as underlined</u></p>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Fine Print</small></td>
<td class="py-4">
<p class="mb-0"><small>This line of text is meant to be treated as fine print.</small></p>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Bold Text</small></td>
<td class="py-4">
<p class="mb-0"><strong>This line rendered as bold text.</strong></p>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Italicized Text</small></td>
<td class="py-4">
<p class="mb-0"><em>This line rendered as italicized text.</em></p>
</td>
</tr>
<tr>
<td><small class="text-light fw-medium">Abbreviations</small></td>
<td>
<p><abbr title="attribute">attr</abbr></p>
<p class="mb-0"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row g-6 mb-6">
<!-- Blockquote -->
<div class="col-lg">
<div class="card mb-lg-0">
<h5 class="card-header">Blockquote</h5>
<div class="card-body">
<blockquote class="blockquote mt-4">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="text-light fw-medium">Naming a source</small>
<figure class="mt-2">
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="text-light fw-medium">Align Center</small>
<figure class="text-center mt-2">
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="text-light fw-medium">Align Right</small>
<figure class="text-end mt-2">
<blockquote class="blockquote">
<p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
</div>
</div>
</div>
<div class="col-lg">
<div class="card">
<h5 class="card-header">Lists</h5>
<div class="card-body">
<small class="text-light fw-medium">Unstyled</small>
<ul class="list-unstyled mt-2">
<li>Lorem ipsum dolor sit amet</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>
Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
</ul>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="text-light fw-medium">Inline</small>
<ul class="list-inline mt-2">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
</div>
<hr class="m-0" />
<div class="card-body">
<small class="text-light fw-medium">Description list alignment</small>
<dl class="row mt-2">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</div>
</div>
</div>
</div>
{% endblock %}