398 lines
18 KiB
HTML
398 lines
18 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}General UI Elements{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/render.highlight.js' %}"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- BEGIN breadcrumb -->
|
|
<ol class="breadcrumb float-xl-end">
|
|
<li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="javascript:;">UI Elements</a></li>
|
|
<li class="breadcrumb-item active">General</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">General UI Elements <small>header small text goes here...</small></h1>
|
|
<!-- END page-header -->
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="ui-general-1">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Alerts</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body">
|
|
<div class="alert alert-success alert-dismissible fade show mb-0">
|
|
<strong>Success!</strong>
|
|
This is a success alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/ui-general/code-1.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="ui-general-2">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Alerts Color <span class="badge bg-success ms-1">NEW</span></h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body">
|
|
<div class="row gx-2">
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-primary alert-dismissible fade show h-100 mb-0">
|
|
Primary alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-info alert-dismissible fade show h-100 mb-0">
|
|
Info alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-purple alert-dismissible fade show h-100 mb-0">
|
|
Purple alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-indigo alert-dismissible fade show h-100 mb-0">
|
|
Indigo alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-success alert-dismissible fade show h-100 mb-0">
|
|
Success alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-green alert-dismissible fade show h-100 mb-0">
|
|
Green alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-lime alert-dismissible fade show h-100 mb-0">
|
|
Lime alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-warning alert-dismissible fade show h-100 mb-0">
|
|
Warning alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-yellow alert-dismissible fade show h-100 mb-0">
|
|
Yellow alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-danger alert-dismissible fade show h-100 mb-0">
|
|
Danger alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-pink alert-dismissible fade show h-100 mb-0">
|
|
Pink alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-dark alert-dismissible fade show h-100 mb-0">
|
|
Dark alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-secondary alert-dismissible fade show h-100 mb-0">
|
|
Secondary alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 pb-2">
|
|
<div class="alert alert-light alert-dismissible fade show h-100 mb-0">
|
|
Light alert with <a href="#" class="alert-link">an example link</a>.
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/ui-general/code-2.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="ui-general-3">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Notes</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body">
|
|
<div class="note alert-primary mb-2">
|
|
<div class="note-icon"><i class="fab fa-facebook-f"></i></div>
|
|
<div class="note-content">
|
|
<h4><b>Note with icon!</b></h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Maecenas id gravida libero. Etiam semper id sem a ultricies.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="note alert-warning note-with-end-icon mb-2">
|
|
<div class="note-content text-end">
|
|
<h4><b>Note with end icon!</b></h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Maecenas id gravida libero. Etiam semper id sem a ultricies.
|
|
</p>
|
|
</div>
|
|
<div class="note-icon"><i class="fa fa-lightbulb"></i></div>
|
|
</div>
|
|
<div class="note alert-gray-500 mb-0">
|
|
<div class="note-content">
|
|
<h4><b>Note without icon!</b></h4>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Maecenas id gravida libero. Etiam semper id sem a ultricies.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/ui-general/code-3.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-xl-6">
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="ui-general-4">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Badges <span class="badge bg-success ms-1">NEW</span></h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body">
|
|
<div class="row fs-14px">
|
|
<div class="col-md-8">
|
|
<div class="mb-3px">
|
|
<span class="badge bg-danger">Danger</span>
|
|
<span class="badge bg-warning">Warning</span>
|
|
<span class="badge bg-yellow text-black">Yellow</span>
|
|
<span class="badge bg-lime">Lime</span>
|
|
<span class="badge bg-green">Green</span>
|
|
<span class="badge bg-success">Success</span>
|
|
</div>
|
|
<div class="mb-3px">
|
|
<span class="badge bg-primary">Primary</span>
|
|
<span class="badge bg-info">Info</span>
|
|
<span class="badge bg-purple">Purple</span>
|
|
<span class="badge bg-indigo">Indigo</span>
|
|
<span class="badge bg-dark">Dark</span>
|
|
</div>
|
|
<div class="">
|
|
<span class="badge bg-pink">Pink</span>
|
|
<span class="badge bg-secondary">Secondary</span>
|
|
<span class="badge bg-default text-gray-900">Default</span>
|
|
<span class="badge bg-light text-dark">Light</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="mb-3px">
|
|
<span class="badge bg-dark rounded-pill">Badge pill</span>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-secondary rounded-0">Badge square</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/ui-general/code-4.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="ui-general-5">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Pagination</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body">
|
|
<div>
|
|
<div class="pagination pagination-lg mb-2">
|
|
<div class="page-item disabled"><a href="javascript:;" class="page-link">«</a></div>
|
|
<div class="page-item active"><a href="javascript:;" class="page-link">1</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">2</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">3</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">4</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">5</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">»</a></div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<ul class="pagination mb-2">
|
|
<div class="page-item disabled"><a href="javascript:;" class="page-link">«</a></div>
|
|
<div class="page-item active"><a href="javascript:;" class="page-link">1</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">2</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">3</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">4</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">5</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">»</a></div>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<div class="pagination pagination-sm mb-3">
|
|
<div class="page-item disabled"><a href="javascript:;" class="page-link">«</a></div>
|
|
<div class="page-item active"><a href="javascript:;" class="page-link">1</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">2</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">3</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">4</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">5</a></div>
|
|
<div class="page-item"><a href="javascript:;" class="page-link">»</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="pagination mb-2">
|
|
<div class="page-item ms-auto"><a href="javascript:;" class="page-link rounded-pill px-3">Previous</a></div>
|
|
<div class="page-item me-auto"><a href="javascript:;" class="page-link rounded-pill px-3">Next</a></div>
|
|
</div>
|
|
<div class="pagination">
|
|
<div class="page-item disabled"><a href="javascript:;" class="page-link rounded-pill px-3">← Older</a></div>
|
|
<div class="page-item ms-auto"><a href="javascript:;" class="page-link rounded-pill px-3">Newer →</a></div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/ui-general/code-5.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
|
|
<!-- BEGIN panel -->
|
|
<div class="panel panel-inverse" data-sortable-id="ui-general-6">
|
|
<!-- BEGIN panel-heading -->
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Progress bar</h4>
|
|
<div class="panel-heading-btn">
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-default" data-toggle="panel-expand"><i class="fa fa-expand"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-success" data-toggle="panel-reload"><i class="fa fa-redo"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-warning" data-toggle="panel-collapse"><i class="fa fa-minus"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs btn-icon btn-danger" data-toggle="panel-remove"><i class="fa fa-times"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-heading -->
|
|
<!-- BEGIN panel-body -->
|
|
<div class="panel-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3 mb-md-0">
|
|
<div class="progress mb-2">
|
|
<div class="progress-bar fs-10px fw-bold" style="width: 80%">Basic</div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-warning progress-bar-striped fs-10px fw-bold" style="width: 80%">Striped</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="progress rounded-pill mb-2">
|
|
<div class="progress-bar bg-indigo progress-bar-striped progress-bar-animated rounded-pill fs-10px fw-bold" style="width: 80%">Animated</div>
|
|
</div>
|
|
<div class="progress rounded-pill">
|
|
<div class="progress-bar bg-dark fs-10px fw-bold" style="width: 25%">Stacked</div>
|
|
<div class="progress-bar bg-grey fs-10px fw-bold" style="width: 25%">Stacked</div>
|
|
<div class="progress-bar bg-lime fs-10px fw-bold" style="width: 25%">Stacked</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END panel-body -->
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper">
|
|
<pre><code class="html" data-url="{% static 'data/ui-general/code-6.json' %}"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
</div>
|
|
<!-- END panel -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
{% endblock %} |