1233 lines
52 KiB
HTML
1233 lines
52 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load static %}
|
|
|
|
{% block title %}Widgets{% endblock %}
|
|
|
|
{% block css %}
|
|
<link href="{% static 'plugins/nvd3/build/nv.d3.css' %}" rel="stylesheet" />
|
|
{% endblock %}
|
|
|
|
{% block js %}
|
|
<script src="{% static 'plugins/d3/d3.min.js' %}"></script>
|
|
<script src="{% static 'plugins/nvd3/build/nv.d3.min.js' %}"></script>
|
|
<script src="{% static 'plugins/clipboard/dist/clipboard.min.js' %}"></script>
|
|
<script src="{% static 'plugins/@highlightjs/cdn-assets/highlight.min.js' %}"></script>
|
|
<script src="{% static 'js/demo/widget.demo.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 active">Widgets</li>
|
|
</ol>
|
|
<!-- END breadcrumb -->
|
|
<!-- BEGIN page-header -->
|
|
<h1 class="page-header">
|
|
Widgets <small>header small text goes here...</small>
|
|
</h1>
|
|
<!-- END page-header -->
|
|
|
|
<span class="btn-group float-end ms-20px p-2px bg-black bg-opacity-20 rounded">
|
|
<a href="#" class="btn btn-sm btn-white border-0" data-change="widget-theme" data-theme="light"><i class="fa fa-sun text-blue"></i> Light</a>
|
|
<a href="#" class="btn btn-sm btn-white border-0" data-change="widget-theme" data-theme="dark"><i class="fa fa-moon"></i> Dark</a>
|
|
</span>
|
|
<p class="mb-20px">
|
|
All the widgets is reusable and responsive. You may use the predefined css to configure the padding, margin or background. Besides that, all the widgets have light and dark version.
|
|
Kindly add the <code>[data-bs-theme="dark"]</code> to the widget will change it to the dark version.
|
|
</p>
|
|
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-lg-12 col-xl-4">
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-12 -->
|
|
<div class="col-xl-12 col-lg-6">
|
|
<!-- BEGIN widget-list -->
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-list" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET LIST</b>
|
|
</div>
|
|
<div class="widget-list rounded mb-4" data-id="widget">
|
|
<!-- BEGIN widget-list-item -->
|
|
<div class="widget-list-item">
|
|
<div class="widget-list-media">
|
|
<img src="{% static 'img/user/user-12.jpg' %}" width="50" alt="" class="rounded" />
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Christopher Struth</h4>
|
|
<p class="widget-list-desc">Bank Transfer</p>
|
|
</div>
|
|
<div class="widget-list-action">
|
|
<a href="#" data-bs-toggle="dropdown" class="text-body text-opacity-50"><i class="fa fa-ellipsis-h fs-14px"></i></a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a href="#" class="dropdown-item">Option 1</a>
|
|
<a href="#" class="dropdown-item">Option 2</a>
|
|
<a href="#" class="dropdown-item">Option 3</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Option 4</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-list-item -->
|
|
<!-- BEGIN widget-list-item -->
|
|
<div class="widget-list-item">
|
|
<div class="widget-list-media">
|
|
<img src="{% static 'img/user/user-13.jpg' %}" width="50" alt="" class="rounded" />
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Janie Flowers</h4>
|
|
<p class="widget-list-desc">Bank Transfer</p>
|
|
</div>
|
|
<div class="widget-list-action">
|
|
<a href="#" data-bs-toggle="dropdown" class="text-body text-opacity-50"><i class="fa fa-ellipsis-h fs-14px"></i></a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a href="#" class="dropdown-item">Option 1</a>
|
|
<a href="#" class="dropdown-item">Option 2</a>
|
|
<a href="#" class="dropdown-item">Option 3</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Option 4</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-list-item -->
|
|
<!-- BEGIN widget-list-item -->
|
|
<div class="widget-list-item">
|
|
<div class="widget-list-media">
|
|
<img src="{% static 'img/user/user-14.jpg' %}" width="50" alt="" class="rounded" />
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Janie Flowers</h4>
|
|
<p class="widget-list-desc">Bank Transfer</p>
|
|
</div>
|
|
<div class="widget-list-action">
|
|
<a href="#" data-bs-toggle="dropdown" class="text-body text-opacity-50"><i class="fa fa-ellipsis-h fs-14px"></i></a>
|
|
<div class="dropdown-menu dropdown-menu-end">
|
|
<a href="#" class="dropdown-item">Option 1</a>
|
|
<a href="#" class="dropdown-item">Option 2</a>
|
|
<a href="#" class="dropdown-item">Option 3</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="#" class="dropdown-item">Option 4</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-list-item -->
|
|
</div>
|
|
<!-- END widget-list -->
|
|
</div>
|
|
<!-- END col-12 -->
|
|
<!-- BEGIN col-12 -->
|
|
<div class="col-xl-12 col-lg-6">
|
|
<!-- BEGIN widget-list -->
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-list-with-icon" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET LIST WITH ICON</b>
|
|
</div>
|
|
<div class="widget-list rounded mb-4" data-id="widget">
|
|
<a href="#" class="widget-list-item">
|
|
<div class="widget-list-media icon">
|
|
<i class="fa fa-plane bg-dark text-white"></i>
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Airplane Mode</h4>
|
|
</div>
|
|
<div class="widget-list-action text-end">
|
|
<i class="fa fa-angle-right fa-lg text-body text-opacity-30"></i>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="widget-list-item">
|
|
<div class="widget-list-media icon">
|
|
<i class="fa fa-wifi bg-dark text-white"></i>
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Wi-Fi</h4>
|
|
</div>
|
|
<div class="widget-list-action text-nowrap text-body text-opacity-50 fw-bold text-decoration-none">
|
|
Connected
|
|
<i class="fa fa-angle-right fa-lg ms-3 text-body text-opacity-30"></i>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="widget-list-item">
|
|
<div class="widget-list-media icon">
|
|
<i class="fab fa-bluetooth bg-indigo text-white"></i>
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Bluetooth</h4>
|
|
</div>
|
|
<div class="widget-list-action text-nowrap text-body text-opacity-50 fw-bold text-decoration-none">
|
|
On
|
|
<i class="fa fa-angle-right text-body text-opacity-30 fa-lg ms-3"></i>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="widget-list-item">
|
|
<div class="widget-list-media icon">
|
|
<i class="fa fa-signal bg-pink text-white"></i>
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Cellular</h4>
|
|
</div>
|
|
<div class="widget-list-action text-decoration-none fw-bold">
|
|
<i class="fa fa-angle-right text-gray-500 fa-lg"></i>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="widget-list-item">
|
|
<div class="widget-list-media icon">
|
|
<i class="fa fa-link bg-yellow text-gray-900"></i>
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Personal Hotspot</h4>
|
|
</div>
|
|
<div class="widget-list-action text-nowrap text-body text-opacity-50 fw-bold text-decoration-none">
|
|
Off
|
|
<i class="fa fa-angle-right text-body text-opacity-30 fa-lg ms-3"></i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<!-- END widget-list -->
|
|
</div>
|
|
<!-- END col-12 -->
|
|
<!-- BEGIN col-12 -->
|
|
<div class="col-xl-12 col-lg-6">
|
|
<!-- BEGIN widget-chat -->
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-chat-input" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET CHAT</b>
|
|
</div>
|
|
<div class="widget-chat rounded mb-4" data-id="widget">
|
|
<!-- BEGIN widget-chat-header -->
|
|
<div class="widget-chat-header">
|
|
<div class="widget-chat-header-icon">
|
|
<i class="fab fa-earlybirds w-30px h-30px fs-20px bg-yellow text-gray-900 d-flex align-items-center justify-content-center rounded"></i>
|
|
</div>
|
|
<div class="widget-chat-header-content">
|
|
<h4 class="widget-chat-header-title">Company Discussion Group</h4>
|
|
<p class="widget-chat-header-desc">55 members, 4 online</p>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-chat-header -->
|
|
<!-- BEGIN widget-chat-body -->
|
|
<div class="widget-chat-body" data-scrollbar="true" data-height="235px">
|
|
<!-- BEGIN widget-chat-item -->
|
|
<div class="widget-chat-item with-media start">
|
|
<div class="widget-chat-media">
|
|
<img alt="" src="{% static 'img/user/user-1.jpg' %}" />
|
|
</div>
|
|
<div class="widget-chat-info">
|
|
<div class="widget-chat-info-container">
|
|
<div class="widget-chat-name text-indigo">Hudson Mendes</div>
|
|
<div class="widget-chat-message">Should we plan for a company trip this year?</div>
|
|
<div class="widget-chat-time">6:00PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-chat-item -->
|
|
<!-- BEGIN widget-chat-item -->
|
|
<div class="widget-chat-item with-media start">
|
|
<div class="widget-chat-media">
|
|
<img alt="" src="{% static 'img/user/user-2.jpg' %}" />
|
|
</div>
|
|
<div class="widget-chat-info">
|
|
<div class="widget-chat-info-container">
|
|
<div class="widget-chat-name text-primary">Sam Sugerman</div>
|
|
<div class="widget-chat-message">ok let's do it</div>
|
|
<div class="widget-chat-time">6:01PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-chat-item -->
|
|
<!-- BEGIN widget-chat-item -->
|
|
<div class="widget-chat-item end">
|
|
<div class="widget-chat-info">
|
|
<div class="widget-chat-info-container">
|
|
<div class="widget-chat-message">i'm ok with it</div>
|
|
<div class="widget-chat-time">6:05PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-chat-item -->
|
|
<div class="text-center text-gray-500 m-2 fw-bold">Today</div>
|
|
<!-- BEGIN widget-chat-item -->
|
|
<div class="widget-chat-item with-media start">
|
|
<div class="widget-chat-media">
|
|
<img alt="" src="{% static 'img/user/user-3.jpg' %}" />
|
|
</div>
|
|
<div class="widget-chat-info">
|
|
<div class="widget-chat-info-container">
|
|
<div class="widget-chat-name text-orange">Jaxon Allwood</div>
|
|
<div class="widget-chat-message">
|
|
Here is some images for New Zealand
|
|
<div class="row gx-1 mt-5px">
|
|
<div class="col-md-4">
|
|
<a href="#" class="widget-card widget-card-sm square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-51-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card widget-card-sm square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-52-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="widget-card widget-card-sm square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-53-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card widget-card-sm square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-54-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="widget-card widget-card-sm square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-59-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card widget-card-sm square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-60-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="widget-chat-time">6:20PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-chat-item -->
|
|
</div>
|
|
<!-- END widget-chat-body -->
|
|
<!-- BEGIN widget-input -->
|
|
<div class="widget-input">
|
|
<form action="" method="POST" name="">
|
|
<div class="widget-input-container">
|
|
<div class="widget-input-icon"><a href="#" class="text-body text-opacity-50"><i class="fa fa-camera"></i></a></div>
|
|
<div class="widget-input-box">
|
|
<input type="text" class="form-control" placeholder="Write a message..." />
|
|
</div>
|
|
<div class="widget-input-icon"><a href="#" class="text-body text-opacity-50"><i class="fa fa-smile"></i></a></div>
|
|
<div class="widget-input-divider"></div>
|
|
<div class="widget-input-icon"><a href="#" class="text-body text-opacity-50"><i class="fa fa-microphone"></i></a></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!-- END widget-input -->
|
|
</div>
|
|
<!-- END widget-chat -->
|
|
</div>
|
|
<!-- END col-12 -->
|
|
<!-- BEGIN col-12 -->
|
|
<div class="col-xl-12 col-lg-6">
|
|
<!-- BEGIN widget-todolist -->
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-todolist" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET TODOLIST</b>
|
|
</div>
|
|
<div class="widget-todolist rounded mb-4" data-id="widget">
|
|
<!-- BEGIN widget-todolist-header -->
|
|
<div class="widget-todolist-header">
|
|
<div class="widget-todolist-header-title">Todolist</div>
|
|
<div class="widget-todolist-header-total"><span>0</span><small>Done</small></div>
|
|
</div>
|
|
<!-- END widget-todolist-header -->
|
|
<!-- BEGIN widget-todolist-body -->
|
|
<div class="widget-todolist-body">
|
|
<!-- BEGIN widget-todolist-item -->
|
|
<div class="widget-todolist-item">
|
|
<div class="widget-todolist-input">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="widget_todolist_1" />
|
|
</div>
|
|
</div>
|
|
<div class="widget-todolist-content">
|
|
<h6 class="mb-2px">Borrow Tony's travel guide</h6>
|
|
<div class="text-body text-opacity-75 fw-bold fs-11px">Vacation in Rome</div>
|
|
</div>
|
|
<div class="widget-todolist-icon">
|
|
<a href="#"><i class="fa fa-question-circle"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-todolist-item -->
|
|
<!-- BEGIN widget-todolist-item -->
|
|
<div class="widget-todolist-item">
|
|
<div class="widget-todolist-input">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="widget_todolist_2" />
|
|
</div>
|
|
</div>
|
|
<div class="widget-todolist-content">
|
|
<h6 class="mb-2px">Finish expense report</h6>
|
|
<div class="text-body text-opacity-75 fw-bold fs-11px">Today, 4:00PM, Daily</div>
|
|
</div>
|
|
<div class="widget-todolist-icon">
|
|
<a href="#"><i class="fa fa-question-circle"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-todolist-item -->
|
|
<!-- BEGIN widget-todolist-item -->
|
|
<div class="widget-todolist-item">
|
|
<div class="widget-todolist-input">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="widget_todolist_3" />
|
|
</div>
|
|
</div>
|
|
<div class="widget-todolist-content">
|
|
<h6 class="mb-2px">Confirm conference call for Wednesday</h6>
|
|
<div class="text-body text-opacity-75 fw-bold fs-11px">Work</div>
|
|
</div>
|
|
<div class="widget-todolist-icon">
|
|
<a href="#"><i class="fa fa-question-circle"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-todolist-item -->
|
|
<!-- BEGIN widget-todolist-item -->
|
|
<div class="widget-todolist-item">
|
|
<div class="widget-todolist-input">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="widget_todolist_4" />
|
|
</div>
|
|
</div>
|
|
<div class="widget-todolist-content">
|
|
<h6 class="mb-2px"><b class="text-warning">!!</b> Mobile App WIP Presentation</h6>
|
|
<div class="text-body text-opacity-75 fw-bold fs-11px">Today, 12:00PM</div>
|
|
</div>
|
|
<div class="widget-todolist-icon">
|
|
<a href="#"><i class="fa fa-question-circle"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-todolist-item -->
|
|
<!-- BEGIN widget-todolist-item -->
|
|
<div class="widget-todolist-item">
|
|
<div class="widget-todolist-input">
|
|
<i class="fa fa-plus text-body text-opacity-30 fa-fw"></i>
|
|
</div>
|
|
<div class="widget-todolist-content">
|
|
<input type="text" class="form-control border-0 shadow-none rounded-0 p-0 h-20px bg-none" placeholder="Write your task here..." />
|
|
</div>
|
|
</div>
|
|
<!-- END widget-todolist-item -->
|
|
</div>
|
|
<!-- END widget-todolist-body -->
|
|
</div>
|
|
<!-- END widget-todolist -->
|
|
</div>
|
|
<!-- END col-12 -->
|
|
<!-- BEGIN col-12 -->
|
|
<div class="col-xl-12 col-lg-6">
|
|
<!-- BEGIN widget-map -->
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-map" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET MAP</b>
|
|
</div>
|
|
<div class="widget-map rounded mb-4" data-id="widget">
|
|
<!-- BEGIN widget-input-container -->
|
|
<div class="widget-input-container">
|
|
<div class="widget-input-icon"><a href="#" class="text-body text-opacity-50" data-id="widget-elm" data-light-class="text-body text-opacity-50" data-dark-class="text-white"><i class="fa fa-ellipsis-v"></i></a></div>
|
|
<div class="widget-input-box">
|
|
<input type="text" class="form-control" placeholder="Search here">
|
|
</div>
|
|
<div class="widget-input-icon"><a href="#" class="text-body text-opacity-50" data-id="widget-elm" data-light-class="text-body text-opacity-50" data-dark-class="text-white"><i class="fa fa-microphone"></i></a></div>
|
|
<div class="widget-input-divider"></div>
|
|
<div class="widget-input-icon"><a href="#" class="text-body text-opacity-50" data-id="widget-elm" data-light-class="text-body text-opacity-50" data-dark-class="text-white"><i class="fa fa-location-arrow"></i></a></div>
|
|
</div>
|
|
<!-- END widget-input-container -->
|
|
<!-- BEGIN widget-map-body -->
|
|
<div class="widget-map-body">
|
|
<iframe class="d-block" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.5650178360584!2d-122.41879278478642!3d37.77679637975903!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c6c8f4459%3A0xb10ed6d9b5050fa5!2sTwitter+HQ!5e0!3m2!1sen!2smy!4v1524046379645" width="100%" height="230" frameborder="0" style="border:0" allowfullscreen></iframe>
|
|
</div>
|
|
<!-- END widget-map-body -->
|
|
<!-- BEGIN widget-map-list -->
|
|
<div class="widget-map-list" data-id="widget">
|
|
<div class="widget-list bg-none">
|
|
<!-- BEGIN widget-list-item -->
|
|
<div class="widget-list-item">
|
|
<div class="widget-list-media text-center">
|
|
<a href="#"><i class="fab fa-twitter fa-3x"></i></a>
|
|
</div>
|
|
<div class="widget-list-content">
|
|
<h4 class="widget-list-title">Twitter Headquater</h4>
|
|
<p class="widget-list-desc">Corporate Office</p>
|
|
</div>
|
|
<div class="widget-list-action">
|
|
<a href="#" data-bs-toggle="dropdown" class="text-body text-opacity-50"><i class="fa fa-angle-right fa-2x"></i></a>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-list-item -->
|
|
</div>
|
|
</div>
|
|
<!-- END widget-map-list -->
|
|
</div>
|
|
<!-- END widget-map -->
|
|
</div>
|
|
<!-- END col-12 -->
|
|
</div>
|
|
<!-- END row -->
|
|
</div>
|
|
<!-- END col-4 -->
|
|
<!-- BEGIN col-8 -->
|
|
<div class="col-lg-12 col-xl-8">
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-img-icon" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET IMAGE / ICON</b>
|
|
</div>
|
|
<!-- BEGIN row -->
|
|
<div class="row mb-4">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-sm-6">
|
|
<div class="d-flex flex-wrap">
|
|
<div class="widget-icon rounded bg-indigo me-5px mb-5px text-white">
|
|
<i class="fab fa-digital-ocean"></i>
|
|
</div>
|
|
<div class="widget-icon rounded bg-blue me-5px mb-5px text-white">
|
|
<i class="fab fa-twitter"></i>
|
|
</div>
|
|
<div class="widget-icon rounded bg-success me-5px mb-5px text-white">
|
|
<i class="fab fa-android"></i>
|
|
</div>
|
|
<div class="widget-icon rounded bg-warning me-5px mb-5px text-white">
|
|
<i class="fab fa-firefox"></i>
|
|
</div>
|
|
<div class="widget-icon rounded bg-danger me-5px mb-5px text-white">
|
|
<i class="fab fa-google-plus-g"></i>
|
|
</div>
|
|
<div class="widget-icon rounded bg-pink me-5px mb-5px text-white">
|
|
<i class="fab fa-pinterest"></i>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix">
|
|
<div class="widget-icon widget-icon-xl user rounded bg-gray-500 float-start me-5px mb-5px text-white" data-id="widget-elm"
|
|
data-light-class="widget-icon widget-icon-xl user rounded bg-gray-500 float-start me-5px mb-5px text-white"
|
|
data-dark-class="widget-icon widget-icon-xl user rounded bg-dark float-start me-5px mb-5px text-white text-opacity-50">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<div class="widget-icon widget-icon-lg user rounded bg-gray-500 float-start me-5px mb-5px text-white" data-id="widget-elm"
|
|
data-light-class="widget-icon widget-icon-lg user rounded bg-gray-500 float-start me-5px mb-5px text-white"
|
|
data-dark-class="widget-icon widget-icon-lg user rounded bg-dark float-start me-5px mb-5px text-white text-opacity-50">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<div class="widget-icon user rounded bg-gray-500 float-start me-5px mb-5px text-white" data-id="widget-elm"
|
|
data-light-class="widget-icon user rounded bg-gray-500 float-start me-5px mb-5px text-white"
|
|
data-dark-class="widget-icon user rounded bg-dark float-start me-5px mb-5px text-white text-opacity-50">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<div class="widget-icon widget-icon-sm user rounded bg-gray-500 float-start me-5px mb-5px text-white" data-id="widget-elm"
|
|
data-light-class="widget-icon widget-icon-sm user rounded bg-gray-500 float-start me-5px mb-5px text-white"
|
|
data-dark-class="widget-icon widget-icon-sm user rounded bg-dark float-start me-5px mb-5px text-white text-opacity-50">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<div class="widget-icon widget-icon-xs user rounded bg-gray-500 float-start me-5px mb-5px text-white" data-id="widget-elm"
|
|
data-light-class="widget-icon widget-icon-xs user rounded bg-gray-500 float-start me-5px mb-5px text-white"
|
|
data-dark-class="widget-icon widget-icon-xs user rounded bg-dark float-start me-5px mb-5px text-white text-opacity-50">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-sm-6">
|
|
<div class="float-start">
|
|
<div class="widget-img rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-11-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-12-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-13-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-14-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-15-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-16-thumb.jpg' %})"
|
|
></div>
|
|
<br />
|
|
<div class="widget-img widget-img-xl rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-21-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img widget-img-lg rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-22-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img widget-img rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-23-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img widget-img-sm rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-24-thumb.jpg' %})"
|
|
></div>
|
|
<div class="widget-img widget-img-xs rounded bg-dark float-start me-5px mb-5px"
|
|
style="background-image: url({% static 'img/gallery/gallery-25-thumb.jpg' %})"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-card" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET CARD</b>
|
|
</div>
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-sm-6">
|
|
<!-- BEGIN widget-card -->
|
|
<a href="#" class="widget-card rounded mb-20px" data-id="widget">
|
|
<div class="widget-card-cover rounded" style="background-image: url({% static 'img/gallery/gallery-portrait-11-thumb.jpg' %})"></div>
|
|
<div class="widget-card-content">
|
|
<b class="text-white">Download and get free trial.</b>
|
|
</div>
|
|
<div class="widget-card-content bottom">
|
|
<i class="fab fa-pushed fa-5x text-indigo"></i>
|
|
<h4 class="text-white mt-10px"><b>Apple Draw<br /> Photo Booth</b></h4>
|
|
<h5 class="fs-12px text-white text-opacity-75 mb-0"><b>EASILY DRAW ON PHOTOS</b></h5>
|
|
</div>
|
|
</a>
|
|
<!-- END widget-card -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-sm-6">
|
|
<!-- BEGIN widget-card -->
|
|
<a href="#" class="widget-card rounded mb-20px" data-id="widget">
|
|
<div class="widget-card-cover rounded"></div>
|
|
<div class="widget-card-content">
|
|
<h5 class="fs-12px text-body"><b>MAKING A DIFFERENCE</b></h5>
|
|
<h4 class="mb-10px text-pink"><b>Apple Heart<br /> Study App</b></h4>
|
|
<i class="fa fa-heartbeat fa-5x text-pink text-opacity-50"></i>
|
|
</div>
|
|
<div class="widget-card-content bottom">
|
|
<b class="text-body">Opt in and help heart research.</b>
|
|
</div>
|
|
</a>
|
|
<!-- END widget-card -->
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-card-square" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET CARD SQUARE</b>
|
|
</div>
|
|
<!-- BEGIN row -->
|
|
<div class="row">
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xs-6 col-sm-3">
|
|
<!-- BEGIN row -->
|
|
<div class="row gx-1 mb-1">
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-6">
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/login-bg/login-bg-1-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/login-bg/login-bg-2-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<!-- END col-6 -->
|
|
<!-- BEGIN col-6 -->
|
|
<div class="col-6">
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/login-bg/login-bg-3-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/login-bg/login-bg-4-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<!-- END col-6 -->
|
|
</div>
|
|
<!-- END row -->
|
|
<div class="fs-12px fw-bold text-body">Camera Roll</div>
|
|
<div class="fs-10px fw-bold text-body text-opacity-50 mb-3">2,711</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xs-6 col-sm-3">
|
|
<a href="#" class="widget-card rounded square mb-5px">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/login-bg/login-bg-7-thumb.jpg' %})">
|
|
<span class="widget-card-cover-icon"><i class="fa fa-play fa-lg"></i></span>
|
|
</div>
|
|
</a>
|
|
<div class="fs-12px fw-bold text-body pt-2px">Videos</div>
|
|
<div class="fs-10px fw-bold text-body text-opacity-50 mb-3">31</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xs-6 col-sm-3">
|
|
<a href="#" class="widget-card rounded square mb-5px">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/login-bg/login-bg-10-thumb.jpg' %})">
|
|
<div class="d-flex h-100 align-items-center justify-content-center">
|
|
<div class="text-center">
|
|
<div class="text-white fs-14px"><b>PORTRAITS OF</b></div>
|
|
<div class="text-white text-opacity-75 fw-bold">2025</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="fs-12px fw-bold text-body pt-2px">Memory 2025</div>
|
|
<div class="fs-10px fw-bold text-body text-opacity-50 mb-3">1,239</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-xs-6 col-sm-3">
|
|
<!-- BEGIN row -->
|
|
<div class="row gx-1 mb-5px">
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-3">
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-1-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-2-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-3-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-4-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-3">
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-5-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-6-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-7-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-8-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-3">
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-9-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-10-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-11-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-12-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
<!-- BEGIN col-3 -->
|
|
<div class="col-3">
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-13-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-14-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-15-thumb.jpg' %})"></div>
|
|
</a>
|
|
<a href="#" class="widget-card rounded square mb-1">
|
|
<div class="widget-card-cover" style="background-image: url({% static 'img/gallery/gallery-16-thumb.jpg' %})"></div>
|
|
</a>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
</div>
|
|
<!-- END row -->
|
|
<div class="fs-12px fw-bold text-body">Albums</div>
|
|
<div class="fs-10px fw-bold text-body text-opacity-50 mb-15px">8</div>
|
|
</div>
|
|
<!-- END col-3 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-stat" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET STAT</b>
|
|
</div>
|
|
<!-- BEGIN row -->
|
|
<div class="row gx-2 mb-20px">
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="widget widget-stats bg-teal mb-7px">
|
|
<div class="stats-icon stats-icon-lg"><i class="fa fa-globe fa-fw"></i></div>
|
|
<div class="stats-content">
|
|
<div class="stats-title">TODAY'S VISITS</div>
|
|
<div class="stats-number">7,842,900</div>
|
|
<div class="stats-progress progress">
|
|
<div class="progress-bar" style="width: 70.1%;"></div>
|
|
</div>
|
|
<div class="stats-desc">Better than last week (70.1%)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-4 -->
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="widget widget-stats bg-blue mb-7px">
|
|
<div class="stats-icon stats-icon-lg"><i class="fa fa-dollar-sign fa-fw"></i></div>
|
|
<div class="stats-content">
|
|
<div class="stats-title">TODAY'S PROFIT</div>
|
|
<div class="stats-number">180,200</div>
|
|
<div class="stats-progress progress">
|
|
<div class="progress-bar" style="width: 40.5%;"></div>
|
|
</div>
|
|
<div class="stats-desc">Better than last week (40.5%)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-4 -->
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="widget widget-stats bg-purple mb-7px">
|
|
<div class="stats-icon stats-icon-lg"><i class="fa fa-archive fa-fw"></i></div>
|
|
<div class="stats-content">
|
|
<div class="stats-title">NEW ORDERS</div>
|
|
<div class="stats-number">38,900</div>
|
|
<div class="stats-progress progress">
|
|
<div class="progress-bar" style="width: 76.3%;"></div>
|
|
</div>
|
|
<div class="stats-desc">Better than last week (76.3%)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-4 -->
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="widget widget-stats bg-dark mb-7px">
|
|
<div class="stats-icon stats-icon-lg"><i class="fa fa-comment-alt fa-fw"></i></div>
|
|
<div class="stats-content">
|
|
<div class="stats-title">NEW COMMENTS</div>
|
|
<div class="stats-number">3,988</div>
|
|
<div class="stats-progress progress">
|
|
<div class="progress-bar" style="width: 54.9%;"></div>
|
|
</div>
|
|
<div class="stats-desc">Better than last week (54.9%)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-4 -->
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="widget widget-stats bg-orange mb-7px">
|
|
<div class="stats-icon stats-icon-lg"><i class="fa fa-file-alt fa-fw"></i></div>
|
|
<div class="stats-content">
|
|
<div class="stats-title">PENDING INVOICE</div>
|
|
<div class="stats-number">20</div>
|
|
<div class="stats-progress progress">
|
|
<div class="progress-bar" style="width: 23.5%;"></div>
|
|
</div>
|
|
<div class="stats-desc">More than last week (23.5%)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-4 -->
|
|
<!-- BEGIN col-4 -->
|
|
<div class="col-lg-4 col-sm-6">
|
|
<div class="widget widget-stats bg-pink mb-7px">
|
|
<div class="stats-icon stats-icon-lg"><i class="fa fa-exclamation-triangle fa-fw"></i></div>
|
|
<div class="stats-content">
|
|
<div class="stats-title">ERROR LOG</div>
|
|
<div class="stats-number">5</div>
|
|
<div class="stats-progress progress">
|
|
<div class="progress-bar" style="width: 10.5%;"></div>
|
|
</div>
|
|
<div class="stats-desc">More than last week (10.5%)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END col-4 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-chart" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET CHART</b>
|
|
</div>
|
|
<!-- BEGIN widget-chart -->
|
|
<div class="widget rounded mb-4" data-id="widget">
|
|
<!-- BEGIN widget-header -->
|
|
<div class="widget-header">
|
|
<h4 class="widget-header-title">Audience Overview</h4>
|
|
<div class="widget-header-icon"><a href="#" class="text-body text-opacity-50"><i class="fa fa-fw fa-upload"></i></a></div>
|
|
<div class="widget-header-icon"><a href="#" class="text-body text-opacity-50"><i class="fa fa-fw fa-cog"></i></a></div>
|
|
</div>
|
|
<!-- END widget-header -->
|
|
<!-- BEGIN widget-content -->
|
|
<div class="row m-0">
|
|
<div class="col widget-chart-content">
|
|
<div id="nv-stacked-area-chart" style="height: 108%"></div>
|
|
</div>
|
|
<div class="col-lg-4 p-3">
|
|
<div class="widget-chart-info">
|
|
<h4 class="widget-chart-info-title">Total sales</h4>
|
|
<p class="widget-chart-info-desc">Lorem ipsum dolor sit consectetur adipiscing elit.</p>
|
|
<div class="widget-chart-info-progress">
|
|
<b>Monthly Plan</b>
|
|
<span class="float-end">70%</span>
|
|
</div>
|
|
<div class="progress h-10px">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill" style="width:70%;"></div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="widget-chart-info">
|
|
<h4 class="widget-chart-info-title">Task progress</h4>
|
|
<p class="widget-chart-info-desc">Vestibulum sollicitudin in lectus a cursus.</p>
|
|
<div class="widget-chart-info-progress">
|
|
<b>Marketing Research</b>
|
|
<span class="float-end">74%</span>
|
|
</div>
|
|
<div class="progress h-10px mb-15px">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-indigo" style="width: 74%"></div>
|
|
</div>
|
|
<div class="widget-chart-info-progress">
|
|
<b>Mobile App Development</b>
|
|
<span class="float-end">25%</span>
|
|
</div>
|
|
<div class="progress h-10px mb-15px">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-green" style="width: 25%"></div>
|
|
</div>
|
|
<div class="widget-chart-info-progress">
|
|
<b>Website Redesign</b>
|
|
<span class="float-end">95%</span>
|
|
</div>
|
|
<div class="progress h-10px">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated rounded-pill bg-orange" style="width: 95%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END widget-content -->
|
|
</div>
|
|
<!-- END widget-chart -->
|
|
|
|
<div class="mb-10px mt-10px fs-10px">
|
|
<a href="#modal-widget-table" class="float-end text-body text-opacity-50 text-decoration-none me-3px fw-bold" data-bs-toggle="modal">source code</a>
|
|
<b class="text-body">WIDGET TABLE</b>
|
|
</div>
|
|
<!-- BEGIN widget-table -->
|
|
<div class="table-responsive">
|
|
<!-- BEGIN widget-table -->
|
|
<table class="table table-bordered widget-table rounded" data-id="widget">
|
|
<thead>
|
|
<tr class="text-nowrap">
|
|
<th width="1%">Image</th>
|
|
<th>Product Info</th>
|
|
<th>Price</th>
|
|
<th>Qty</th>
|
|
<th>Total</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<img src="{% static 'img/product/product-6.png' %}" width="100" />
|
|
</td>
|
|
<td>
|
|
<h5 class="mb-1">Mavic Pro Combo</h5>
|
|
<p class="fs-11px fw-bold text-body text-opacity-50 mb-3">Portable yet powerful, the Mavic Pro is your personal drone, ready to go with you everywhere.</p>
|
|
<div class="progress h-10px rounded-pill mb-5px">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-orange fs-10px fw-bold" style="width: 30%;">30%</div>
|
|
</div>
|
|
<div class="clearfix fs-10px">
|
|
status:
|
|
<b class="text-body">Shipped</b>
|
|
</div>
|
|
</td>
|
|
<td class="text-nowrap">
|
|
<b class="text-body">$999</b><br />
|
|
<small><del>$1,202</del></small>
|
|
</td>
|
|
<td>1</td>
|
|
<td>999.00</td>
|
|
<td>
|
|
<a href="#" class="btn btn-default btn-sm w-80px rounded-pill">Edit</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<img src="{% static 'img/product/product-7.png' %}" width="100" />
|
|
</td>
|
|
<td>
|
|
<h5 class="mb-1">Inspire 2</h5>
|
|
<p class="fs-11px fw-bold text-body text-opacity-50 mb-3">Cinematic aerial performance for filmmakers.</p>
|
|
<div class="progress h-10px rounded-pill mb-5px">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success fs-10px fw-bold" style="width: 100%;">100%</div>
|
|
</div>
|
|
<div class="clearfix fs-10px">
|
|
status:
|
|
<b class="text-body">received</b>
|
|
</div>
|
|
</td>
|
|
<td class="text-nowrap">
|
|
<b class="text-body">$999</b><br />
|
|
<small><del>$1,202</del></small>
|
|
</td>
|
|
<td>1</td>
|
|
<td>999.00</td>
|
|
<td>
|
|
<a href="#" class="btn btn-default btn-sm w-80px rounded-pill">Edit</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<!-- END widget-table -->
|
|
</div>
|
|
<!-- END table-responsive -->
|
|
</div>
|
|
<!-- END col-8 -->
|
|
</div>
|
|
<!-- END row -->
|
|
|
|
{% endblock %}
|
|
|
|
{% block outter_content %}
|
|
<!-- BEGIN #modal-widget-todolist -->
|
|
<div class="modal fade" id="modal-widget-map">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget Map</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-map">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-1.json' %}" id="source-widget-map"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-map -->
|
|
|
|
<!-- BEGIN #modal-widget-todolist -->
|
|
<div class="modal fade" id="modal-widget-todolist">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget Todolist</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-todolist">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-2.json' %}" id="source-widget-todolist"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-todolist -->
|
|
|
|
<!-- BEGIN #modal-widget-chat-input -->
|
|
<div class="modal fade" id="modal-widget-chat-input">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget Chat & Input</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-chat-input">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-3.json' %}" id="source-widget-chat-input"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-chat-input -->
|
|
|
|
<!-- BEGIN #modal-widget-list -->
|
|
<div class="modal fade" id="modal-widget-list">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget List</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-list">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-4.json' %}" id="source-widget-list"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-list -->
|
|
|
|
<!-- BEGIN #modal-widget-list-with-icon -->
|
|
<div class="modal fade" id="modal-widget-list-with-icon">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget List with Icon</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-list-with-icon">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-5.json' %}" id="source-widget-list-with-icon"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-list -->
|
|
|
|
<!-- BEGIN #modal-widget-img-icon -->
|
|
<div class="modal fade" id="modal-widget-img-icon">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget Image / Icon</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-img-icon">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-6.json' %}" id="source-widget-img-icon"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-img-icon -->
|
|
|
|
<!-- BEGIN #modal-widget-card -->
|
|
<div class="modal fade" id="modal-widget-card">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget List Card</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-card">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-7.json' %}" id="source-widget-card"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-card -->
|
|
|
|
<!-- BEGIN #modal-widget-card-square -->
|
|
<div class="modal fade" id="modal-widget-card-square">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget List Card Square</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-card-square">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-8.json' %}" id="source-widget-card-square"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-card-square -->
|
|
|
|
<!-- BEGIN #modal-widget-stat -->
|
|
<div class="modal fade" id="modal-widget-stat">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget Stat</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-stat">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-9.json' %}" id="source-widget-stat"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-stat -->
|
|
|
|
<!-- BEGIN #modal-widget-chart -->
|
|
<div class="modal fade" id="modal-widget-chart">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget Chart</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-chart">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-10.json' %}" id="source-widget-chart"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-chart -->
|
|
|
|
<!-- BEGIN #modal-widget-table -->
|
|
<div class="modal fade" id="modal-widget-table">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">Widget Table</h4>
|
|
<a href="#" data-bs-dismiss="modal" class="btn-close"></a>
|
|
</div>
|
|
<!-- BEGIN hljs-wrapper -->
|
|
<div class="hljs-wrapper mb-0">
|
|
<button type="button" class="btn btn-gray-500 btn-sm btn-clipboard w-60px" data-clipboard-target="#source-widget-table">Copy</button>
|
|
<pre class="mb-0"><code class="html" data-url="{% static 'data/widgets/code-11.json' %}" id="source-widget-chart"></code></pre>
|
|
</div>
|
|
<!-- END hljs-wrapper -->
|
|
<div class="modal-footer">
|
|
<a href="#" data-bs-dismiss="modal" class="btn btn-default">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END #modal-widget-table -->
|
|
{% endblock %} |