Django
This commit is contained in:
Victor Alexandrovich Tsyrenschikov
0
templates/.gitkeep
Normal file
0
templates/.gitkeep
Normal file
63
templates/charts/index.html
Normal file
63
templates/charts/index.html
Normal file
@@ -0,0 +1,63 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}Charts{% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<!-- [ Bar Chart ] start -->
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>Bar Chart</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div id="bar-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [ Bar Chart ] end -->
|
||||
|
||||
<!-- [ Pie Chart ] start -->
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>Pie Chart</h5>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<div id="pie-chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [ Pie Chart ] end -->
|
||||
</div>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var products = JSON.parse('{{ products|escapejs }}');
|
||||
var names = products.map(p => p.fields.name);
|
||||
var prices = products.map(p => p.fields.price);
|
||||
|
||||
var barOptions = {
|
||||
chart: { type: 'bar', height: 350 },
|
||||
series: [{ name: 'Price', data: prices }],
|
||||
xaxis: { categories: names }
|
||||
};
|
||||
var barChart = new ApexCharts(document.querySelector("#bar-chart"), barOptions);
|
||||
barChart.render();
|
||||
|
||||
var pieOptions = {
|
||||
chart: { type: 'pie', height: 350 },
|
||||
series: prices,
|
||||
labels: names
|
||||
};
|
||||
var pieChart = new ApexCharts(document.querySelector("#pie-chart"), pieOptions);
|
||||
pieChart.render();
|
||||
});
|
||||
</script>
|
||||
{% endblock extra_js %}
|
||||
38
templates/dyn_api/index.html
Normal file
38
templates/dyn_api/index.html
Normal file
@@ -0,0 +1,38 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %} Dynamic APIs {% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>
|
||||
Available Routes - defined in <strong>settings.DYNAMIC_API</strong> - Read <a target="" href="https://app-generator.dev/docs/developer-tools/dynamic-api.html">Documentation</a>.
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
{% for link in routes %}
|
||||
<li>
|
||||
<a href="{% url "model_api" link %}">{{ link }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
{% block extra_js %}
|
||||
|
||||
<!-- ADD JS Here -->
|
||||
|
||||
{% endblock extra_js %}
|
||||
36
templates/dyn_dt/index.html
Normal file
36
templates/dyn_dt/index.html
Normal file
@@ -0,0 +1,36 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %} {% if page_title %} page_title {% else %} Dynamic DataTables {% endif %} {% endblock title %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>
|
||||
Available Routes - defined in <strong>settings.DYNAMIC_DATATB</strong> - Read <a target="" href="https://app-generator.dev/docs/developer-tools/dynamic-datatables.html">Documentation</a>.
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul>
|
||||
{% for link in routes %}
|
||||
<li>
|
||||
<a href="{% url "model_dt" link %}">{{ link }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
{% block extra_js %}
|
||||
|
||||
{% endblock extra_js %}
|
||||
22
templates/dyn_dt/items-table.html
Normal file
22
templates/dyn_dt/items-table.html
Normal file
@@ -0,0 +1,22 @@
|
||||
{% load get_attribute %}
|
||||
|
||||
<div class="dt-responsive table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for field in db_field_names %}
|
||||
<th id="th_{{ field }}_export" scope="col">{{ field }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr>
|
||||
{% for field_name in db_field_names %}
|
||||
<td class="td_{{ field_name }}">{{ item|getattribute:field_name }}</td>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
585
templates/dyn_dt/model.html
Normal file
585
templates/dyn_dt/model.html
Normal file
@@ -0,0 +1,585 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static get_attribute %}
|
||||
|
||||
{% block title %} {% if page_title %} {{page_title}} {% else %} Dynamic DataTables {% endif %} {% endblock title %}
|
||||
|
||||
{% block extrastyle %}
|
||||
|
||||
<style>
|
||||
.hide-show-dropdown {
|
||||
max-height: 350px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.page-size .export-csv-img {
|
||||
width: 35px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.export-img {
|
||||
width: 30px;
|
||||
}
|
||||
.modal-header {
|
||||
display: block !important;
|
||||
}
|
||||
.height{
|
||||
height: 40px !important;
|
||||
}
|
||||
.table-row {
|
||||
position: relative;
|
||||
}
|
||||
.action-td {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
bottom: -5px;
|
||||
}
|
||||
.table-row:hover .data-td {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.table-row:hover .action-td {
|
||||
display: flex !important;
|
||||
gap:3px !important;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock extrastyle %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="d-flex justify-content-between my-4">
|
||||
<form class="search">
|
||||
<div class="d-flex gap-2 align-items-center">
|
||||
<div class="mr-3">
|
||||
<input type="text" placeholder="Search for items" name="search" id="" class="form-control border ps-2">
|
||||
</div>
|
||||
<button type="submit" class="btn mb-0 btn-primary">
|
||||
<i class="material-symbols-rounded opacity-5">search</i>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="">
|
||||
<form method="post">
|
||||
<div class="dropdown">
|
||||
<button class="btn mb-0 btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Hide / Show Column
|
||||
</button>
|
||||
<div id="dropdownDefaultCheckbox">
|
||||
<ul class="dropdown-menu hide-show-dropdown px-3">
|
||||
{% for field_name in field_names %}
|
||||
<div class="form-check mb-2 ps-0">
|
||||
<input class="form-check-input" {% if field_name.value %} checked {% endif %} type="checkbox" data-bs-target="{{ field_name.key }}" value="" id="checkbox-item-{{ field_name.id }}">
|
||||
<label class="form-check-label" for="checkbox-item-{{ field_name.id }}">
|
||||
{{ field_name.key }}
|
||||
</label>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="page-size form-group mb-2">
|
||||
<div class="d-flex gap-2">
|
||||
<form method="post" class="">
|
||||
{% csrf_token %}
|
||||
<select onchange="getPageItems(this)" name="" id="" class="form-select border ps-2">
|
||||
<option {% if page_items == 5 %} selected {% endif %} value="5">5 Items</option>
|
||||
<option {% if page_items == 10 %} selected {% endif %} value="10">10 Items</option>
|
||||
<option {% if page_items == 15 %} selected {% endif %} value="15">15 Items</option>
|
||||
<option {% if page_items == 25 %} selected {% endif %} value="25">25 Items</option>
|
||||
<option {% if page_items == 50 %} selected {% endif %} value="50">50 Items</option>
|
||||
<option {% if page_items == 100 %} selected {% endif %} value="100">100 Items</option>
|
||||
</select>
|
||||
</form>
|
||||
<div class="d-flex ">
|
||||
<a data-bs-toggle="modal" data-bs-target="#exportCSV">
|
||||
<img class="export-csv-img" style="width: 40px" src="{% static "img/csv.png" %}" alt="img">
|
||||
</a>
|
||||
</div>
|
||||
{% if request.user.is_authenticated %}
|
||||
<div>
|
||||
<button data-bs-toggle="modal" data-bs-target="#addSales" type="button" class="btn mb-0 btn-primary p-0 px-3 py-2 ">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<form action="{% url "create_filter" link %}" method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="d-flex align-items-center gap-3 mb-3">
|
||||
<h3 class="">Filters</h3>
|
||||
<button id="addButton" type="button" class="btn mb-0 btn-primary">Add</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-3" id="inputContainer">
|
||||
{% if filter_instance %}
|
||||
{% for filter_data in filter_instance %}
|
||||
<div class="d-flex gap-3 mb-3">
|
||||
<div class="d-flex gap-2">
|
||||
<select name="key" id="" class="form-select border ps-2 w-50">
|
||||
|
||||
{% for field in db_field_names %}
|
||||
<option {% if filter_data.key == field %}selected{% endif %} value="{{ field }}">{{ field }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="text" value="{{ filter_data.value }}" placeholder="Enter value" name="value" id="" class="form-control border ps-2">
|
||||
</div>
|
||||
<a href="{% url "delete_filter" link filter_data.id %}" class="remove-button btn mb-0 btn-danger">X</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<button id="submitButton" type="submit" {% if not filter_instance %} style="display: none;" {% endif %} class="btn mb-0 btn-success">Submit</button>
|
||||
</form>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="dt-responsive table-responsive">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for field in db_field_names %}
|
||||
<th class="px-2" id="th_{{ field }}" scope="col">{{ field }}</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for item in items %}
|
||||
<tr class="align-middle table-row">
|
||||
{% for field_name in db_field_names %}
|
||||
<td class="td_{{ field_name }} data-td">{{ item|getattribute:field_name }}</td>
|
||||
{% endfor %}
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
<td class="d-none action-td" >
|
||||
<a data-bs-toggle="modal" data-bs-target="#editSales-{{item.id}}" class="btn mb-0 btn-primary btn-sm p-0 px-3 pe-4 ps-2 py-2" href="#">
|
||||
<i style="font-size: 14px;" class="material-symbols-rounded opacity-5">edit</i>
|
||||
</a>
|
||||
<a data-bs-toggle="modal" data-bs-target="#deleteSales-{{item.id}}" class="btn mb-0 btn-primary btn-sm p-0 px-3 pe-4 ps-2 py-2" href="#">
|
||||
<i style="font-size: 14px;" class="material-symbols-rounded opacity-5">delete</i>
|
||||
</a>
|
||||
</td>
|
||||
{% else %}
|
||||
<td class="d-none action-td">
|
||||
<a data-bs-toggle="modal" data-bs-target="#viewSales-{{item.id}}" class="btn mb-0 btn-primary btn-sm p-0 px-3 pe-4 ps-2 py-2" href="#">
|
||||
<i style="font-size: 14px;" class="material-symbols-rounded opacity-5">visibility</i>
|
||||
</a>
|
||||
</td>
|
||||
{% endif %}
|
||||
</tr>
|
||||
|
||||
<!-- Edit Sales -->
|
||||
<div class="modal fade" id="editSales-{{item.id}}" tabindex="-1" aria-labelledby="editSalesLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h1 class="modal-title fs-5" id="editSalesLabel">Edit {{ link|capfirst }}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="{% url "update" link item.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="row">
|
||||
<!-- FKs -->
|
||||
{% for key, values in fk_fields.items %}
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-2">
|
||||
<label for="id_{{ key }}" class="form-label ml-0">{{ key|title }}</label>
|
||||
<select class="form-control border ps-2" name="{{ key }}" id="id_{{ key }}">
|
||||
{% for i in values %}
|
||||
<option value="{{ i.id }}">{{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for field_name in db_field_names %}
|
||||
{% if field_name not in read_only_fields and field_name not in fk_fields_keys %}
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-2">
|
||||
<label for="id_{{ field_name }}" class="form-label ml-0">{{ field_name|title }}</label>
|
||||
{% if field_name in choices_dict %}
|
||||
<select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select border ps-2">
|
||||
<option value="">Select {{ field_name }}</option>
|
||||
{% for key, value in choices_dict|get:field_name %}
|
||||
<option {% if item|getattribute:field_name == key %} selected {% endif %} value="{{ key }}">{{ value }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% else %}
|
||||
{% if field_name in integer_fields %}
|
||||
<input type="number" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% elif field_name in date_time_fields %}
|
||||
<input type="datetime-local" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% elif field_name in email_fields %}
|
||||
<input type="email" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% elif field_name in text_fields %}
|
||||
<input type="text" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% else %}
|
||||
<input type="text" name="{{ field_name }}" value="{{ item|getattribute:field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="submit" class="btn mb-0 btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Sales -->
|
||||
<div class="modal fade" id="deleteSales-{{item.id}}" tabindex="-1" aria-labelledby="deleteSalesLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h1 class="modal-title fs-5" id="deleteSalesLabel">Delete Item</h1>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5>Are you sure you want to delete this item?</h5>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn mb-0 btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<a href="{% url "delete" link item.id %}" class="btn mb-0 btn-danger">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View Sales -->
|
||||
<div class="modal fade" id="viewSales-{{item.id}}" tabindex="-1" aria-labelledby="viweSalesLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h1 class="modal-title fs-5" id="viewSalesLabel">View {{ link|capfirst }}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form action="{% url "update" link item.id %}" method="post">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="row">
|
||||
{% for field_name in db_field_names %}
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-2">
|
||||
<label for="{{ field_name }}" class="form-label ml-0">{{ field_name|title }}</label>
|
||||
<input readonly type="text" value="{{ item|getattribute:field_name }}" name="{{ field_name }}" id="{{ field_name }}" class="form-control border ps-2">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% if items.has_other_pages %}
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="pagination justify-content-center">
|
||||
{% if items.has_previous %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ items.previous_page_number }}" aria-label="Previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% for n in items.paginator.page_range %}
|
||||
{% if items.number == n %}
|
||||
<li class="page-item active"><a class="page-link">{{ n }}</a></li>
|
||||
{% elif n > items.number|add:'-3' and n < items.number|add:'3' %}
|
||||
<li class="page-item"><a class="page-link" href="?page={{n}}">{{ n }}</a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if items.has_next %}
|
||||
<li class="page-item">
|
||||
<a class="page-link" href="?page={{ items.next_page_number }}" aria-label="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</nav>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Export as CSV -->
|
||||
<div class="modal fade" id="exportCSV" tabindex="-1" aria-labelledby="exportCSVLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h1 class="modal-title fs-5" id="exportCSVLabel">Export as CSV</h1>
|
||||
</div>
|
||||
<div>
|
||||
{% if request.GET.order_by or request.GET.search %}
|
||||
{% with order_by=request.GET.order_by search=request.GET.search %}
|
||||
<a href="{% url 'export_csv' link %}?{% if order_by %}order_by={{ order_by }}{% endif %}{% if order_by and search %}&{% endif %}{% if search %}search={{ search }}{% endif %}">
|
||||
<img style="width: 30px" class="export-img" src="{% static 'img/export.png' %}" alt="">
|
||||
</a>
|
||||
{% endwith %}
|
||||
{% else %}
|
||||
<a href="{% url 'export_csv' link %}">
|
||||
<img style="width: 30px" class="export-img" src="{% static 'img/export.png' %}" alt="">
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{% include "dyn_dt/items-table.html" with items=items %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Sales -->
|
||||
<div class="modal fade" id="addSales" tabindex="-1" aria-labelledby="addSalesLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<h1 class="modal-title fs-5" id="addSalesLabel">Add {{ link|capfirst }}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form method="post" action="{% url "create" link %}" class="row">
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- FKs -->
|
||||
{% for key, values in fk_fields.items %}
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-2">
|
||||
<label for="id_{{ key }}" class="form-label ml-0">{{ key|title }}</label>
|
||||
<select class="form-control border ps-2" name="{{ key }}" id="id_{{ key }}">
|
||||
{% for i in values %}
|
||||
<option value="{{ i.id }}">{{ i }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% for field_name in db_field_names %}
|
||||
{% if field_name not in read_only_fields and field_name not in fk_fields_keys %}
|
||||
<div class="col-md-6">
|
||||
<div class="form-group mb-2">
|
||||
<label for="id_{{ field_name }}" class="form-label ml-0">{{ field_name|title }}</label>
|
||||
{% if field_name in choices_dict %}
|
||||
<select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select border ps-2">
|
||||
<option value="">Select {{ field_name }}</option>
|
||||
{% for key, value in choices_dict|get:field_name %}
|
||||
<option value="{{ key }}">{{ value }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% else %}
|
||||
{% if field_name in integer_fields %}
|
||||
<input type="number" name="{{ field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% elif field_name in date_time_fields %}
|
||||
<input type="datetime-local" name="{{ field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% elif field_name in email_fields %}
|
||||
<input type="email" name="{{ field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% else %}
|
||||
<input type="text" name="{{ field_name }}" class="form-control border ps-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="mt-3">
|
||||
<button type="submit" class="btn mb-0 btn-primary">Add</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
|
||||
{% block extra_js %}
|
||||
|
||||
<script>
|
||||
const link = '{{ link }}';
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var checkboxes = document.querySelectorAll('#dropdownDefaultCheckbox input[type="checkbox"]');
|
||||
|
||||
checkboxes.forEach(function (checkbox) {
|
||||
|
||||
var targetColumnId = checkbox.getAttribute('data-bs-target');
|
||||
var targetColumn = document.getElementById('th_' + targetColumnId);
|
||||
var exportTargetColumn = document.getElementById('th_' + targetColumnId + '_export');
|
||||
var targetDataCells = document.querySelectorAll('.td_' + targetColumnId);
|
||||
|
||||
if (checkbox.checked) {
|
||||
targetColumn.style.display = 'none';
|
||||
exportTargetColumn.style.display = 'none';
|
||||
targetDataCells.forEach(function (dataCell) {
|
||||
dataCell.style.display = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
checkbox.addEventListener('change', function () {
|
||||
var targetColumnId = this.getAttribute('data-bs-target');
|
||||
var targetColumn = document.getElementById('th_' + targetColumnId);
|
||||
var exportTargetColumn = document.getElementById('th_' + targetColumnId + '_export');
|
||||
var targetDataCells = document.querySelectorAll('.td_' + targetColumnId);
|
||||
|
||||
if (this.checked) {
|
||||
targetColumn.style.display = 'none';
|
||||
exportTargetColumn.style.display = 'none';
|
||||
targetDataCells.forEach(function (dataCell) {
|
||||
dataCell.style.display = 'none';
|
||||
});
|
||||
} else {
|
||||
targetColumn.style.display = '';
|
||||
exportTargetColumn.style.display = '';
|
||||
targetDataCells.forEach(function (dataCell) {
|
||||
dataCell.style.display = '';
|
||||
});
|
||||
}
|
||||
|
||||
fetch(`/create-hide-show-items/${link}/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-CSRFToken': '{{ csrf_token }}',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
key: targetColumnId,
|
||||
value: this.checked
|
||||
})
|
||||
})
|
||||
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
function getPageItems(selectObject) {
|
||||
var value = selectObject.value;
|
||||
|
||||
fetch(`/create-page-items/${link}/`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'X-CSRFToken': '{{ csrf_token }}',
|
||||
},
|
||||
body: `items=${value}`
|
||||
})
|
||||
.then(response => {
|
||||
location.reload()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.getElementById('addButton').addEventListener('click', function() {
|
||||
var fieldNames = {{ db_filters|safe }};
|
||||
|
||||
var template = `
|
||||
<div class="input-container d-flex align-items-center gap-3 mb-3">
|
||||
<div class="d-flex gap-2">
|
||||
<select name="key" class="form-select border ps-2 w-50">
|
||||
${fieldNames.map(option => `<option value="${option}">${option}</option>`).join('')}
|
||||
</select>
|
||||
<input name="value" class="form-control border ps-2" type="text" placeholder="Enter value">
|
||||
</div>
|
||||
<button class="remove-button btn mb-0 btn-danger" onclick="removeInputContainer(this)">X</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
var tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = template;
|
||||
|
||||
document.getElementById('inputContainer').appendChild(tempDiv);
|
||||
|
||||
document.getElementById('submitButton').style.display = 'inline-block';
|
||||
});
|
||||
|
||||
function removeInputContainer(element) {
|
||||
var inputContainer = element.closest('.input-container');
|
||||
|
||||
inputContainer.remove();
|
||||
|
||||
var inputContainers = document.getElementsByClassName('input-container');
|
||||
if (inputContainers.length === 0) {
|
||||
document.getElementById('submitButton').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock extra_js %}
|
||||
165
templates/includes/sidebar.html
Normal file
165
templates/includes/sidebar.html
Normal file
@@ -0,0 +1,165 @@
|
||||
{% load i18n static admin_material %}
|
||||
|
||||
<aside style="z-index: 1;" class="sidenav navbar navbar-vertical navbar-expand-xs border-radius-lg fixed-start ms-2 bg-white my-2" id="sidenav-main">
|
||||
<div class="sidenav-header">
|
||||
<i class="fas fa-times p-3 cursor-pointer text-dark opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i>
|
||||
<a class="navbar-brand px-4 py-3 m-0" href="{% url "index" %}">
|
||||
<img src="{% static "assets/img/logo-ct-dark.png" %}" class="navbar-brand-img" width="26" height="26" alt="main_logo">
|
||||
<span class="ms-1 text-sm text-dark">
|
||||
Django Material
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<hr class="horizontal dark mt-0 mb-2">
|
||||
<div class="collapse navbar-collapse w-auto " id="sidenav-collapse-main">
|
||||
<ul class="navbar-nav">
|
||||
{% admin_get_menu as app_list %}
|
||||
{% if app_list %}
|
||||
{% for app in app_list %}
|
||||
{% if app.has_perms and not app.pinned %}
|
||||
<li class="nav-item">
|
||||
<a data-bs-toggle="collapse" href="#apps" class="nav-link text-dark" aria-controls="apps" role="button" aria-expanded="false">
|
||||
<i class="material-symbols-rounded opacity-5">dashboard</i>
|
||||
<span class="nav-link-text ms-2 ps-1">{{ app.label|slice:10 }}{% if app.label|length > 10 %}..{% endif %}</span>
|
||||
</a>
|
||||
{% if app.models %}
|
||||
<div class="collapse show" id="apps">
|
||||
<ul class="nav">
|
||||
{% for model in app.models %}
|
||||
{% if model.url %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" href="{{ model.url }}">
|
||||
<span class="sidenav-mini-icon"> {{ model.label|first }} </span>
|
||||
<span class="sidenav-normal ms-2 ps-1"> {{ model.label }} </span>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">{{ model.label }}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-item mt-3">
|
||||
<h6 class="ps-4 ms-2 text-uppercase text-xs text-dark font-weight-bolder opacity-5">Apps</h6>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'dashboard' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "index" %}">
|
||||
<i class="material-symbols-rounded opacity-5">dashboard</i>
|
||||
<span class="nav-link-text ms-1">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'dynamic_dt' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "dynamic_dt" %}">
|
||||
<i class="material-symbols-rounded opacity-5">table_view</i>
|
||||
<span class="nav-link-text ms-1">Dynamic Tables</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'dynamic_api' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "dynamic_api" %}">
|
||||
<i class="material-symbols-rounded opacity-5">dns</i>
|
||||
<span class="nav-link-text ms-1">Dynamic API</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'charts' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "charts" %}">
|
||||
<i class="material-symbols-rounded opacity-5">bar_chart</i>
|
||||
<span class="nav-link-text ms-1">Charts</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item mt-3">
|
||||
<h6 class="ps-4 ms-2 text-uppercase text-xs text-dark font-weight-bolder opacity-5">UI pages</h6>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'tables' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "tables" %}">
|
||||
<i class="material-symbols-rounded opacity-5">table_view</i>
|
||||
<span class="nav-link-text ms-1">Tables</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'billing' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "billing" %}">
|
||||
<i class="material-symbols-rounded opacity-5">receipt_long</i>
|
||||
<span class="nav-link-text ms-1">Billing</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'virtual_reality' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "virtual_reality" %}">
|
||||
<i class="material-symbols-rounded opacity-5">view_in_ar</i>
|
||||
<span class="nav-link-text ms-1">Virtual Reality</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'rtl' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "rtl" %}">
|
||||
<i class="material-symbols-rounded opacity-5">format_textdirection_r_to_l</i>
|
||||
<span class="nav-link-text ms-1">RTL</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'notifications' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "notifications" %}">
|
||||
<i class="material-symbols-rounded opacity-5">notifications</i>
|
||||
<span class="nav-link-text ms-1">Notifications</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'map' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "map" %}">
|
||||
<i class="material-symbols-rounded opacity-5">map</i>
|
||||
<span class="nav-link-text ms-1">Map</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'icons' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "icons" %}">
|
||||
<i class="material-symbols-rounded opacity-5">flag</i>
|
||||
<span class="nav-link-text ms-1">Icons</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'typography' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "typography" %}">
|
||||
<i class="material-symbols-rounded opacity-5">title</i>
|
||||
<span class="nav-link-text ms-1">Typography</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item mt-3">
|
||||
<h6 class="ps-4 ms-2 text-uppercase text-xs text-dark font-weight-bolder opacity-5">Account pages</h6>
|
||||
</li>
|
||||
{% if request.user.is_authenticated %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if 'profile' == segment %} active bg-gradient-dark text-white {% else %} text-dark {% endif %}" href="{% url "profile" %}">
|
||||
<i class="material-symbols-rounded opacity-5">person</i>
|
||||
<span class="nav-link-text ms-1">Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" href="{% url "logout" %}">
|
||||
<i class="material-symbols-rounded opacity-5">login</i>
|
||||
<span class="nav-link-text ms-1">Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" href="{% url "login" %}">
|
||||
<i class="material-symbols-rounded opacity-5">login</i>
|
||||
<span class="nav-link-text ms-1">Sign In</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" href="{% url "register" %}">
|
||||
<i class="material-symbols-rounded opacity-5">assignment</i>
|
||||
<span class="nav-link-text ms-1">Sign Up</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidenav-footer position-absolute w-100 bottom-0 ">
|
||||
<div class="mx-3">
|
||||
<a class="btn btn-outline-dark mt-4 w-100" href="https://app-generator.dev/docs/products/django/material-dashboard/index.html" type="button">Documentation</a>
|
||||
<a class="btn bg-gradient-dark w-100" href="https://app-generator.dev/product/material-dashboard/django/" type="button">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
321
templates/pages/billing.html
Normal file
321
templates/pages/billing.html
Normal file
@@ -0,0 +1,321 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<div class="row">
|
||||
<div class="col-xl-6 mb-xl-0 mb-4">
|
||||
<div class="card bg-transparent shadow-xl">
|
||||
<div class="overflow-hidden position-relative border-radius-xl">
|
||||
<img src="{% static "assets/img/illustrations/pattern-tree.svg" %}" class="position-absolute opacity-2 start-0 top-0 w-100 z-index-1 h-100" alt="pattern-tree">
|
||||
<span class="mask bg-gradient-dark opacity-10"></span>
|
||||
<div class="card-body position-relative z-index-1 p-3">
|
||||
<i class="material-symbols-rounded text-white p-2">wifi</i>
|
||||
<h5 class="text-white mt-4 mb-5 pb-2">4562 1122 4594 7852</h5>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex">
|
||||
<div class="me-4">
|
||||
<p class="text-white text-sm opacity-8 mb-0">Card Holder</p>
|
||||
<h6 class="text-white mb-0">Jack Peterson</h6>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white text-sm opacity-8 mb-0">Expires</p>
|
||||
<h6 class="text-white mb-0">11/22</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-auto w-20 d-flex align-items-end justify-content-end">
|
||||
<img class="w-60 mt-2" src="{% static "assets/img/logos/mastercard.png" %}" alt="logo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-6">
|
||||
<div class="card">
|
||||
<div class="card-header mx-4 p-3 text-center">
|
||||
<div class="icon icon-shape icon-lg bg-gradient-dark shadow text-center border-radius-lg">
|
||||
<i class="material-symbols-rounded opacity-10">account_balance</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0 p-3 text-center">
|
||||
<h6 class="text-center mb-0">Salary</h6>
|
||||
<span class="text-xs">Belong Interactive</span>
|
||||
<hr class="horizontal dark my-3">
|
||||
<h5 class="mb-0">+$2000</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-6">
|
||||
<div class="card">
|
||||
<div class="card-header mx-4 p-3 text-center">
|
||||
<div class="icon icon-shape icon-lg bg-gradient-dark shadow text-center border-radius-lg">
|
||||
<i class="material-symbols-rounded opacity-10">account_balance_wallet</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-0 p-3 text-center">
|
||||
<h6 class="text-center mb-0">Paypal</h6>
|
||||
<span class="text-xs">Freelance Payment</span>
|
||||
<hr class="horizontal dark my-3">
|
||||
<h5 class="mb-0">$455.00</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 mb-lg-0 mb-4">
|
||||
<div class="card mt-4">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<div class="row">
|
||||
<div class="col-6 d-flex align-items-center">
|
||||
<h6 class="mb-0">Payment Method</h6>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<a class="btn bg-gradient-dark mb-0" href="javascript:;"><i class="material-symbols-rounded text-sm">add</i> Add New Card</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-md-0 mb-4">
|
||||
<div class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
|
||||
<img class="w-10 me-3 mb-0" src="{% static "assets/img/logos/mastercard.png" %}" alt="logo">
|
||||
<h6 class="mb-0">**** **** **** 7852</h6>
|
||||
<i class="material-symbols-rounded ms-auto text-dark cursor-pointer" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Card">edit</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card card-body border card-plain border-radius-lg d-flex align-items-center flex-row">
|
||||
<img class="w-10 me-3 mb-0" src="{% static "assets/img/logos/visa.png" %}" alt="logo">
|
||||
<h6 class="mb-0">**** **** **** 5248</h6>
|
||||
<i class="material-symbols-rounded ms-auto text-dark cursor-pointer" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Card">edit</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<div class="row">
|
||||
<div class="col-6 d-flex align-items-center">
|
||||
<h6 class="mb-0">Invoices</h6>
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<button class="btn btn-outline-primary btn-sm mb-0">View All</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3 pb-0">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark font-weight-bold text-sm">March, 01, 2020</h6>
|
||||
<span class="text-xs">#MS-415646</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$180
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i class="material-symbols-rounded text-lg position-relative me-1">picture_as_pdf</i> PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">February, 10, 2021</h6>
|
||||
<span class="text-xs">#RV-126749</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$250
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i class="material-symbols-rounded text-lg position-relative me-1">picture_as_pdf</i> PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">April, 05, 2020</h6>
|
||||
<span class="text-xs">#FB-212562</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$560
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i class="material-symbols-rounded text-lg position-relative me-1">picture_as_pdf</i> PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">June, 25, 2019</h6>
|
||||
<span class="text-xs">#QW-103578</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$120
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i class="material-symbols-rounded text-lg position-relative me-1">picture_as_pdf</i> PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="text-dark mb-1 font-weight-bold text-sm">March, 01, 2019</h6>
|
||||
<span class="text-xs">#AR-803481</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-sm">
|
||||
$300
|
||||
<button class="btn btn-link text-dark text-sm mb-0 px-0 ms-4"><i class="material-symbols-rounded text-lg position-relative me-1">picture_as_pdf</i> PDF</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-7 mt-4">
|
||||
<div class="card">
|
||||
<div class="card-header pb-0 px-3">
|
||||
<h6 class="mb-0">Billing Information</h6>
|
||||
</div>
|
||||
<div class="card-body pt-4 p-3">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 d-flex p-4 mb-2 bg-gray-100 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-3 text-sm">Oliver Liam</h6>
|
||||
<span class="mb-2 text-xs">Company Name: <span class="text-dark font-weight-bold ms-sm-2">Viking Burrito</span></span>
|
||||
<span class="mb-2 text-xs">Email Address: <span class="text-dark ms-sm-2 font-weight-bold">oliver@burrito.com</span></span>
|
||||
<span class="text-xs">VAT Number: <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span></span>
|
||||
</div>
|
||||
<div class="ms-auto text-end">
|
||||
<a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;"><i class="material-symbols-rounded text-sm me-2">delete</i>Delete</a>
|
||||
<a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"><i class="material-symbols-rounded text-sm me-2">edit</i>Edit</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-3 text-sm">Lucas Harper</h6>
|
||||
<span class="mb-2 text-xs">Company Name: <span class="text-dark font-weight-bold ms-sm-2">Stone Tech Zone</span></span>
|
||||
<span class="mb-2 text-xs">Email Address: <span class="text-dark ms-sm-2 font-weight-bold">lucas@stone-tech.com</span></span>
|
||||
<span class="text-xs">VAT Number: <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span></span>
|
||||
</div>
|
||||
<div class="ms-auto text-end">
|
||||
<a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;"><i class="material-symbols-rounded text-sm me-2">delete</i>Delete</a>
|
||||
<a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"><i class="material-symbols-rounded text-sm me-2">edit</i>Edit</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex p-4 mb-2 mt-3 bg-gray-100 border-radius-lg">
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-3 text-sm">Ethan James</h6>
|
||||
<span class="mb-2 text-xs">Company Name: <span class="text-dark font-weight-bold ms-sm-2">Fiber Notion</span></span>
|
||||
<span class="mb-2 text-xs">Email Address: <span class="text-dark ms-sm-2 font-weight-bold">ethan@fiber.com</span></span>
|
||||
<span class="text-xs">VAT Number: <span class="text-dark ms-sm-2 font-weight-bold">FRB1235476</span></span>
|
||||
</div>
|
||||
<div class="ms-auto text-end">
|
||||
<a class="btn btn-link text-danger text-gradient px-3 mb-0" href="javascript:;"><i class="material-symbols-rounded text-sm me-2">delete</i>Delete</a>
|
||||
<a class="btn btn-link text-dark px-3 mb-0" href="javascript:;"><i class="material-symbols-rounded text-sm me-2">edit</i>Edit</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-5 mt-4">
|
||||
<div class="card h-100 mb-4">
|
||||
<div class="card-header pb-0 px-3">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6 class="mb-0">Your Transaction's</h6>
|
||||
</div>
|
||||
<div class="col-md-6 d-flex justify-content-start justify-content-md-end align-items-center">
|
||||
<i class="material-symbols-rounded me-2 text-lg">date_range</i>
|
||||
<small>23 - 30 March 2020</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body pt-4 p-3">
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder mb-3">Newest</h6>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn btn-icon-only btn-rounded btn-outline-danger mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i class="material-symbols-rounded text-lg">expand_more</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Netflix</h6>
|
||||
<span class="text-xs">27 March 2020, at 12:30 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-danger text-gradient text-sm font-weight-bold">
|
||||
- $ 2,500
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i class="material-symbols-rounded text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Apple</h6>
|
||||
<span class="text-xs">27 March 2020, at 04:30 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 2,000
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder my-3">Yesterday</h6>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i class="material-symbols-rounded text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Stripe</h6>
|
||||
<span class="text-xs">26 March 2020, at 13:45 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 750
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i class="material-symbols-rounded text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">HubSpot</h6>
|
||||
<span class="text-xs">26 March 2020, at 12:30 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 1,000
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn btn-icon-only btn-rounded btn-outline-success mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i class="material-symbols-rounded text-lg">expand_less</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Creative Tim</h6>
|
||||
<span class="text-xs">26 March 2020, at 08:30 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-success text-gradient text-sm font-weight-bold">
|
||||
+ $ 2,500
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex justify-content-between ps-0 mb-2 border-radius-lg">
|
||||
<div class="d-flex align-items-center">
|
||||
<button class="btn btn-icon-only btn-rounded btn-outline-dark mb-0 me-3 p-3 btn-sm d-flex align-items-center justify-content-center"><i class="material-symbols-rounded text-lg">priority_high</i></button>
|
||||
<div class="d-flex flex-column">
|
||||
<h6 class="mb-1 text-dark text-sm">Webflow</h6>
|
||||
<span class="text-xs">26 March 2020, at 05:00 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center text-dark text-sm font-weight-bold">
|
||||
Pending
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
28
templates/pages/icons.html
Normal file
28
templates/pages/icons.html
Normal file
@@ -0,0 +1,28 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row min-vh-80">
|
||||
<div class="col-6 mx-auto">
|
||||
<div class="card mt-4">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
||||
<h6 class="text-white text-capitalize ps-3">Material Design Icons</h6>
|
||||
<p class="mb-0 text-white ps-3">Handcrafted by our friends from
|
||||
<a class="text-white font-weight-bold" target="_blank" href="https://fonts.google.com/icons">Google</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Through most of the examples in this dashboard, we have used the default <a href="https://fonts.google.com/icons">Icons for the Material Design</a> provided by Google.</p>
|
||||
<i class="material-symbols-rounded text-2xl">face</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
735
templates/pages/index.html
Normal file
735
templates/pages/index.html
Normal file
@@ -0,0 +1,735 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="ms-3">
|
||||
<h3 class="mb-0 h4 font-weight-bolder">Dashboard</h3>
|
||||
<p class="mb-4">
|
||||
Check the sales, value and bounce rate by country.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header p-2 ps-3">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="text-sm mb-0 text-capitalize">Today's Money</p>
|
||||
<h4 class="mb-0">$53k</h4>
|
||||
</div>
|
||||
<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
|
||||
<i class="material-symbols-rounded opacity-10">weekend</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal my-0">
|
||||
<div class="card-footer p-2 ps-3">
|
||||
<p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+55% </span>than last week</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header p-2 ps-3">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="text-sm mb-0 text-capitalize">Today's Users</p>
|
||||
<h4 class="mb-0">2300</h4>
|
||||
</div>
|
||||
<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
|
||||
<i class="material-symbols-rounded opacity-10">person</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal my-0">
|
||||
<div class="card-footer p-2 ps-3">
|
||||
<p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+3% </span>than last month</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header p-2 ps-3">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="text-sm mb-0 text-capitalize">Ads Views</p>
|
||||
<h4 class="mb-0">3,462</h4>
|
||||
</div>
|
||||
<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
|
||||
<i class="material-symbols-rounded opacity-10">leaderboard</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal my-0">
|
||||
<div class="card-footer p-2 ps-3">
|
||||
<p class="mb-0 text-sm"><span class="text-danger font-weight-bolder">-2% </span>than yesterday</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-sm-6">
|
||||
<div class="card">
|
||||
<div class="card-header p-2 ps-3">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<p class="text-sm mb-0 text-capitalize">Sales</p>
|
||||
<h4 class="mb-0">$103,430</h4>
|
||||
</div>
|
||||
<div class="icon icon-md icon-shape bg-gradient-dark shadow-dark shadow text-center border-radius-lg">
|
||||
<i class="material-symbols-rounded opacity-10">weekend</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal my-0">
|
||||
<div class="card-footer p-2 ps-3">
|
||||
<p class="mb-0 text-sm"><span class="text-success font-weight-bolder">+5% </span>than yesterday</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6 mt-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="mb-0 ">Website Views</h6>
|
||||
<p class="text-sm ">Last Campaign Performance</p>
|
||||
<div class="pe-2">
|
||||
<div class="chart">
|
||||
<canvas id="chart-bars" class="chart-canvas" height="170"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal">
|
||||
<div class="d-flex ">
|
||||
<i class="material-symbols-rounded text-sm my-auto me-1">schedule</i>
|
||||
<p class="mb-0 text-sm"> campaign sent 2 days ago </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 mt-4 mb-4">
|
||||
<div class="card ">
|
||||
<div class="card-body">
|
||||
<h6 class="mb-0 "> Daily Sales </h6>
|
||||
<p class="text-sm "> (<span class="font-weight-bolder">+15%</span>) increase in today sales. </p>
|
||||
<div class="pe-2">
|
||||
<div class="chart">
|
||||
<canvas id="chart-line" class="chart-canvas" height="170"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal">
|
||||
<div class="d-flex ">
|
||||
<i class="material-symbols-rounded text-sm my-auto me-1">schedule</i>
|
||||
<p class="mb-0 text-sm"> updated 4 min ago </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 mt-4 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h6 class="mb-0 ">Completed Tasks</h6>
|
||||
<p class="text-sm ">Last Campaign Performance</p>
|
||||
<div class="pe-2">
|
||||
<div class="chart">
|
||||
<canvas id="chart-line-tasks" class="chart-canvas" height="170"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="dark horizontal">
|
||||
<div class="d-flex ">
|
||||
<i class="material-symbols-rounded text-sm my-auto me-1">schedule</i>
|
||||
<p class="mb-0 text-sm">just updated</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="col-lg-8 col-md-6 mb-md-0 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-header pb-0">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-7">
|
||||
<h6>Projects</h6>
|
||||
<p class="text-sm mb-0">
|
||||
<i class="fa fa-check text-info" aria-hidden="true"></i>
|
||||
<span class="font-weight-bold ms-1">30 done</span> this month
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-lg-6 col-5 my-auto text-end">
|
||||
<div class="dropdown float-lg-end pe-4">
|
||||
<a class="cursor-pointer" id="dropdownTable" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-secondary"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu px-2 py-3 ms-sm-n4 ms-n5" aria-labelledby="dropdownTable">
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
|
||||
<li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0 pb-2">
|
||||
<div class="table-responsive">
|
||||
<table class="table align-items-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Companies</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Members</th>
|
||||
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Budget</th>
|
||||
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Completion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-xd.svg" %}" class="avatar avatar-sm me-3" alt="xd">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Material XD Version</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
|
||||
<img src="{% static "assets/img/team-1.jpg" %}" alt="team1">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
|
||||
<img src="{% static "assets/img/team-2.jpg" %}" alt="team2">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
|
||||
<img src="{% static "assets/img/team-3.jpg" %}" alt="team3">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" alt="team4">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="text-xs font-weight-bold"> $14,000 </span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress-wrapper w-75 mx-auto">
|
||||
<div class="progress-info">
|
||||
<div class="progress-percentage">
|
||||
<span class="text-xs font-weight-bold">60%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-atlassian.svg" %}" class="avatar avatar-sm me-3" alt="atlassian">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Add Progress Track</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
|
||||
<img src="{% static "assets/img/team-2.jpg" %}" alt="team5">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" alt="team6">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="text-xs font-weight-bold"> $3,000 </span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress-wrapper w-75 mx-auto">
|
||||
<div class="progress-info">
|
||||
<div class="progress-percentage">
|
||||
<span class="text-xs font-weight-bold">10%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info w-10" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-slack.svg" %}" class="avatar avatar-sm me-3" alt="team7">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Fix Platform Errors</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
|
||||
<img src="{% static "assets/img/team-3.jpg" %}" alt="team8">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
|
||||
<img src="{% static "assets/img/team-1.jpg" %}" alt="team9">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="text-xs font-weight-bold"> Not set </span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress-wrapper w-75 mx-auto">
|
||||
<div class="progress-info">
|
||||
<div class="progress-percentage">
|
||||
<span class="text-xs font-weight-bold">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-spotify.svg" %}" class="avatar avatar-sm me-3" alt="spotify">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Launch our Mobile App</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" alt="user1">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Romina Hadid">
|
||||
<img src="{% static "assets/img/team-3.jpg" %}" alt="user2">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alexander Smith">
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" alt="user3">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
|
||||
<img src="{% static "assets/img/team-1.jpg" %}" alt="user4">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="text-xs font-weight-bold"> $20,500 </span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress-wrapper w-75 mx-auto">
|
||||
<div class="progress-info">
|
||||
<div class="progress-percentage">
|
||||
<span class="text-xs font-weight-bold">100%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-jira.svg" %}" class="avatar avatar-sm me-3" alt="jira">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Add the New Pricing Page</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" alt="user5">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="text-xs font-weight-bold"> $500 </span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress-wrapper w-75 mx-auto">
|
||||
<div class="progress-info">
|
||||
<div class="progress-percentage">
|
||||
<span class="text-xs font-weight-bold">25%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="25"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-invision.svg" %}" class="avatar avatar-sm me-3" alt="invision">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Redesign New Online Shop</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Tompson">
|
||||
<img src="{% static "assets/img/team-1.jpg" %}" alt="user6">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jessica Doe">
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" alt="user7">
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="text-xs font-weight-bold"> $2,000 </span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<div class="progress-wrapper w-75 mx-auto">
|
||||
<div class="progress-info">
|
||||
<div class="progress-percentage">
|
||||
<span class="text-xs font-weight-bold">40%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info w-40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="40"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header pb-0">
|
||||
<h6>Orders overview</h6>
|
||||
<p class="text-sm">
|
||||
<i class="fa fa-arrow-up text-success" aria-hidden="true"></i>
|
||||
<span class="font-weight-bold">24%</span> this month
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<div class="timeline timeline-one-side">
|
||||
<div class="timeline-block mb-3">
|
||||
<span class="timeline-step">
|
||||
<i class="material-symbols-rounded text-success text-gradient">notifications</i>
|
||||
</span>
|
||||
<div class="timeline-content">
|
||||
<h6 class="text-dark text-sm font-weight-bold mb-0">$2400, Design changes</h6>
|
||||
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">22 DEC 7:20 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-block mb-3">
|
||||
<span class="timeline-step">
|
||||
<i class="material-symbols-rounded text-danger text-gradient">code</i>
|
||||
</span>
|
||||
<div class="timeline-content">
|
||||
<h6 class="text-dark text-sm font-weight-bold mb-0">New order #1832412</h6>
|
||||
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 11 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-block mb-3">
|
||||
<span class="timeline-step">
|
||||
<i class="material-symbols-rounded text-info text-gradient">shopping_cart</i>
|
||||
</span>
|
||||
<div class="timeline-content">
|
||||
<h6 class="text-dark text-sm font-weight-bold mb-0">Server payments for April</h6>
|
||||
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">21 DEC 9:34 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-block mb-3">
|
||||
<span class="timeline-step">
|
||||
<i class="material-symbols-rounded text-warning text-gradient">credit_card</i>
|
||||
</span>
|
||||
<div class="timeline-content">
|
||||
<h6 class="text-dark text-sm font-weight-bold mb-0">New card added for order #4395133</h6>
|
||||
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">20 DEC 2:20 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-block mb-3">
|
||||
<span class="timeline-step">
|
||||
<i class="material-symbols-rounded text-primary text-gradient">key</i>
|
||||
</span>
|
||||
<div class="timeline-content">
|
||||
<h6 class="text-dark text-sm font-weight-bold mb-0">Unlock packages for development</h6>
|
||||
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">18 DEC 4:54 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-block">
|
||||
<span class="timeline-step">
|
||||
<i class="material-symbols-rounded text-dark text-gradient">payments</i>
|
||||
</span>
|
||||
<div class="timeline-content">
|
||||
<h6 class="text-dark text-sm font-weight-bold mb-0">New order #9583120</h6>
|
||||
<p class="text-secondary font-weight-bold text-xs mt-1 mb-0">17 DEC</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
{% block extra_js %}
|
||||
|
||||
<script src="{% static "assets/js/plugins/chartjs.min.js" %}"></script>
|
||||
<script>
|
||||
var ctx = document.getElementById("chart-bars").getContext("2d");
|
||||
|
||||
new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: ["M", "T", "W", "T", "F", "S", "S"],
|
||||
datasets: [{
|
||||
label: "Views",
|
||||
tension: 0.4,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
backgroundColor: "#43A047",
|
||||
data: [50, 45, 22, 28, 50, 60, 76],
|
||||
barThickness: 'flex'
|
||||
}, ],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: '#e5e5e5'
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 500,
|
||||
beginAtZero: true,
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 2
|
||||
},
|
||||
color: "#737373"
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5]
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#737373',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
var ctx2 = document.getElementById("chart-line").getContext("2d");
|
||||
|
||||
new Chart(ctx2, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
|
||||
datasets: [{
|
||||
label: "Sales",
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: "#43A047",
|
||||
pointBorderColor: "transparent",
|
||||
borderColor: "#43A047",
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
data: [120, 230, 130, 440, 250, 360, 270, 180, 90, 300, 310, 220],
|
||||
maxBarThickness: 6
|
||||
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: function(context) {
|
||||
const fullMonths = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
return fullMonths[context[0].dataIndex];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [4, 4],
|
||||
color: '#e5e5e5'
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#737373',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5]
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#737373',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 12,
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
var ctx3 = document.getElementById("chart-line-tasks").getContext("2d");
|
||||
|
||||
new Chart(ctx3, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
label: "Tasks",
|
||||
tension: 0,
|
||||
borderWidth: 2,
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: "#43A047",
|
||||
pointBorderColor: "transparent",
|
||||
borderColor: "#43A047",
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
|
||||
maxBarThickness: 6
|
||||
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index',
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [4, 4],
|
||||
color: '#e5e5e5'
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: '#737373',
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [4, 4]
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: '#737373',
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
lineHeight: 2
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock extra_js %}
|
||||
79
templates/pages/map.html
Normal file
79
templates/pages/map.html
Normal file
@@ -0,0 +1,79 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row min-vh-80">
|
||||
<div class="col-12">
|
||||
<div class="card h-100">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
||||
<h5 class="text-white text-capitalize ps-3">Vector Map</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="vector-map" class="mt-5 min-height-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
||||
{% block extra_js %}
|
||||
|
||||
|
||||
<script src="{% static "assets/js/plugins/world.js" %}"></script>
|
||||
<script>
|
||||
// Initialize the vector map
|
||||
var map = new jsVectorMap({
|
||||
selector: "#vector-map",
|
||||
map: "world_merc",
|
||||
zoomOnScroll: false,
|
||||
zoomButtons: false,
|
||||
selectedMarkers: [1, 3],
|
||||
markersSelectable: true,
|
||||
markers: [{
|
||||
name: "USA",
|
||||
coords: [40.71296415909766, -74.00437720027804]
|
||||
},
|
||||
{
|
||||
name: "Germany",
|
||||
coords: [51.17661451970939, 10.97947735117339]
|
||||
},
|
||||
{
|
||||
name: "Brazil",
|
||||
coords: [-7.596735421549542, -54.781694323779185]
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
coords: [62.318222797104276, 89.81564777631716]
|
||||
},
|
||||
{
|
||||
name: "China",
|
||||
coords: [22.320178999475512, 114.17161225541399],
|
||||
style: {
|
||||
fill: '#E91E63'
|
||||
}
|
||||
}
|
||||
],
|
||||
markerStyle: {
|
||||
initial: {
|
||||
fill: "#e91e63"
|
||||
},
|
||||
hover: {
|
||||
fill: "E91E63"
|
||||
},
|
||||
selected: {
|
||||
fill: "E91E63"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock extra_js %}
|
||||
152
templates/pages/notifications.html
Normal file
152
templates/pages/notifications.html
Normal file
@@ -0,0 +1,152 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-md-10 mx-auto">
|
||||
<div class="card mt-4">
|
||||
<div class="card-header p-3">
|
||||
<h5 class="mb-0">Alerts</h5>
|
||||
</div>
|
||||
<div class="card-body p-3 pb-0">
|
||||
<div class="alert alert-primary alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple primary alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-secondary alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple secondary alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-success alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple success alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-danger alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple danger alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-warning alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple warning alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-info alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple info alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-light alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple light alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="alert alert-dark alert-dismissible text-white" role="alert">
|
||||
<span class="text-sm">A simple dark alert with <a href="javascript:;" class="alert-link text-white">an example link</a>. Give it a click if you like.</span>
|
||||
<button type="button" class="btn-close text-lg py-3 opacity-10" data-bs-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
<div class="card-header p-3">
|
||||
<h5 class="mb-0">Notifications</h5>
|
||||
<p class="text-sm mb-0">
|
||||
Notifications on this page use Toasts from Bootstrap. Read more details <a href="https://getbootstrap.com/docs/5.0/components/toasts/" target="
|
||||
">here</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<div class="row">
|
||||
<div class="col-lg-3 col-sm-6 col-12">
|
||||
<button class="btn bg-gradient-success w-100 mb-0 toast-btn" type="button" data-target="successToast">Success</button>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12 mt-sm-0 mt-2">
|
||||
<button class="btn bg-gradient-info w-100 mb-0 toast-btn" type="button" data-target="infoToast">Info</button>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2">
|
||||
<button class="btn bg-gradient-warning w-100 mb-0 toast-btn" type="button" data-target="warningToast">Warning</button>
|
||||
</div>
|
||||
<div class="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2">
|
||||
<button class="btn bg-gradient-danger w-100 mb-0 toast-btn" type="button" data-target="dangerToast">Danger</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="position-fixed bottom-1 end-1 z-index-2">
|
||||
<div class="toast fade hide p-2 bg-white" role="alert" aria-live="assertive" id="successToast" aria-atomic="true">
|
||||
<div class="toast-header border-0">
|
||||
<i class="material-symbols-rounded text-success me-2">
|
||||
check
|
||||
</i>
|
||||
<span class="me-auto font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-body">11 mins ago</small>
|
||||
<i class="fas fa-times text-md ms-3 cursor-pointer" data-bs-dismiss="toast" aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal dark m-0">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast fade hide p-2 mt-2 bg-gradient-info" role="alert" aria-live="assertive" id="infoToast" aria-atomic="true">
|
||||
<div class="toast-header bg-transparent border-0">
|
||||
<i class="material-symbols-rounded text-white me-2">
|
||||
notifications
|
||||
</i>
|
||||
<span class="me-auto text-white font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-white">11 mins ago</small>
|
||||
<i class="fas fa-times text-md text-white ms-3 cursor-pointer" data-bs-dismiss="toast" aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal light m-0">
|
||||
<div class="toast-body text-white">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast fade hide p-2 mt-2 bg-white" role="alert" aria-live="assertive" id="warningToast" aria-atomic="true">
|
||||
<div class="toast-header border-0">
|
||||
<i class="material-symbols-rounded text-warning me-2">
|
||||
travel_explore
|
||||
</i>
|
||||
<span class="me-auto font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-body">11 mins ago</small>
|
||||
<i class="fas fa-times text-md ms-3 cursor-pointer" data-bs-dismiss="toast" aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal dark m-0">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
<div class="toast fade hide p-2 mt-2 bg-white" role="alert" aria-live="assertive" id="dangerToast" aria-atomic="true">
|
||||
<div class="toast-header border-0">
|
||||
<i class="material-symbols-rounded text-danger me-2">
|
||||
campaign
|
||||
</i>
|
||||
<span class="me-auto text-gradient text-danger font-weight-bold">Material Dashboard </span>
|
||||
<small class="text-body">11 mins ago</small>
|
||||
<i class="fas fa-times text-md ms-3 cursor-pointer" data-bs-dismiss="toast" aria-label="Close"></i>
|
||||
</div>
|
||||
<hr class="horizontal dark m-0">
|
||||
<div class="toast-body">
|
||||
Hello, world! This is a notification message.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
370
templates/pages/profile.html
Normal file
370
templates/pages/profile.html
Normal file
@@ -0,0 +1,370 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid px-2 px-md-4">
|
||||
<div class="page-header min-height-300 border-radius-xl mt-4" style="background-image: url('https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');">
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
</div>
|
||||
<div class="card card-body mx-2 mx-md-2 mt-n6">
|
||||
<div class="row gx-4 mb-2">
|
||||
<div class="col-auto">
|
||||
<div class="avatar avatar-xl position-relative">
|
||||
<img src="{% static "assets/img/bruce-mars.jpg" %}" alt="profile_image" class="w-100 border-radius-lg shadow-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-auto">
|
||||
<div class="h-100">
|
||||
<h5 class="mb-1">
|
||||
Richard Davis
|
||||
</h5>
|
||||
<p class="mb-0 font-weight-normal text-sm">
|
||||
CEO / Co-Founder
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 my-sm-auto ms-sm-auto me-sm-0 mx-auto mt-3">
|
||||
<div class="nav-wrapper position-relative end-0">
|
||||
<ul class="nav nav-pills nav-fill p-1" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 active " data-bs-toggle="tab" href="javascript:;" role="tab" aria-selected="true">
|
||||
<i class="material-symbols-rounded text-lg position-relative">home</i>
|
||||
<span class="ms-1">App</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;" role="tab" aria-selected="false">
|
||||
<i class="material-symbols-rounded text-lg position-relative">email</i>
|
||||
<span class="ms-1">Messages</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link mb-0 px-0 py-1 " data-bs-toggle="tab" href="javascript:;" role="tab" aria-selected="false">
|
||||
<i class="material-symbols-rounded text-lg position-relative">settings</i>
|
||||
<span class="ms-1">Settings</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-4">
|
||||
<div class="card card-plain h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<h6 class="mb-0">Platform Settings</h6>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder">Account</h6>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault" checked>
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault">Email me when someone follows me</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault1">
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault1">Email me when someone answers on my post</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault2" checked>
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault2">Email me when someone mentions me</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<h6 class="text-uppercase text-body text-xs font-weight-bolder mt-4">Application</h6>
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault3">
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault3">New launches and projects</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault4" checked>
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault4">Monthly product updates</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item border-0 px-0 pb-0">
|
||||
<div class="form-check form-switch ps-0">
|
||||
<input class="form-check-input ms-auto" type="checkbox" id="flexSwitchCheckDefault5">
|
||||
<label class="form-check-label text-body ms-3 text-truncate w-80 mb-0" for="flexSwitchCheckDefault5">Subscribe to newsletter</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-4">
|
||||
<div class="card card-plain h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<div class="row">
|
||||
<div class="col-md-8 d-flex align-items-center">
|
||||
<h6 class="mb-0">Profile Information</h6>
|
||||
</div>
|
||||
<div class="col-md-4 text-end">
|
||||
<a href="javascript:;">
|
||||
<i class="fas fa-user-edit text-secondary text-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit Profile"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="text-sm">
|
||||
Hi, I’m Alec Thompson, Decisions: If you can’t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).
|
||||
</p>
|
||||
<hr class="horizontal gray-light my-4">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 ps-0 pt-0 text-sm"><strong class="text-dark">Full Name:</strong> Alec M. Thompson</li>
|
||||
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Mobile:</strong> (44) 123 1234 123</li>
|
||||
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Email:</strong> alecthompson@mail.com</li>
|
||||
<li class="list-group-item border-0 ps-0 text-sm"><strong class="text-dark">Location:</strong> USA</li>
|
||||
<li class="list-group-item border-0 ps-0 pb-0">
|
||||
<strong class="text-dark text-sm">Social:</strong>
|
||||
<a class="btn btn-facebook btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
|
||||
<i class="fab fa-facebook fa-lg"></i>
|
||||
</a>
|
||||
<a class="btn btn-twitter btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
|
||||
<i class="fab fa-twitter fa-lg"></i>
|
||||
</a>
|
||||
<a class="btn btn-instagram btn-simple mb-0 ps-1 pe-2 py-0" href="javascript:;">
|
||||
<i class="fab fa-instagram fa-lg"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-xl-4">
|
||||
<div class="card card-plain h-100">
|
||||
<div class="card-header pb-0 p-3">
|
||||
<h6 class="mb-0">Conversations</h6>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2 pt-0">
|
||||
<div class="avatar me-3">
|
||||
<img src="{% static "assets/img/kal-visuals-square.jpg" %}" alt="kal" class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Sophie B.</h6>
|
||||
<p class="mb-0 text-xs">Hi! I need more information..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto" href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
|
||||
<div class="avatar me-3">
|
||||
<img src="{% static "assets/img/marie.jpg" %}" alt="kal" class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Anne Marie</h6>
|
||||
<p class="mb-0 text-xs">Awesome work, can you..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto" href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
|
||||
<div class="avatar me-3">
|
||||
<img src="{% static "assets/img/ivana-square.jpg" %}" alt="kal" class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Ivanna</h6>
|
||||
<p class="mb-0 text-xs">About files I can..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto" href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0 mb-2">
|
||||
<div class="avatar me-3">
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" alt="kal" class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Peterson</h6>
|
||||
<p class="mb-0 text-xs">Have a great afternoon..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto" href="javascript:;">Reply</a>
|
||||
</li>
|
||||
<li class="list-group-item border-0 d-flex align-items-center px-0">
|
||||
<div class="avatar me-3">
|
||||
<img src="{% static "assets/img/team-3.jpg" %}" alt="kal" class="border-radius-lg shadow">
|
||||
</div>
|
||||
<div class="d-flex align-items-start flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Nick Daniel</h6>
|
||||
<p class="mb-0 text-xs">Hi! I need more information..</p>
|
||||
</div>
|
||||
<a class="btn btn-link pe-3 ps-0 mb-0 ms-auto w-25 w-md-auto" href="javascript:;">Reply</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mt-4">
|
||||
<div class="mb-5 ps-3">
|
||||
<h6 class="mb-1">Projects</h6>
|
||||
<p class="text-sm">Architects design houses</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 m-2">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="{% static "assets/img/home-decor-1.jpg" %}" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #2</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Modern
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
As Uber works through a huge amount of internal management turmoil.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Elena Morison">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-1.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Milly">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-2.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Nick Daniel">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-3.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Peterson">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-4.jpg" %}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 m-2">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="{% static "assets/img/home-decor-2.jpg" %}" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #1</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Scandinavian
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
Music is something that every person has his or her own specific opinion about.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Nick Daniel">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-3.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Peterson">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-4.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Elena Morison">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-1.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Milly">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-2.jpg" %}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 m-2">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="{% static "assets/img/home-decor-3.jpg" %}" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #3</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Minimalist
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
Different people have different taste, and various types of music. Music is life.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Peterson">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-4.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Nick Daniel">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-3.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Milly">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-2.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Elena Morison">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-1.jpg" %}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6 mb-xl-0 mb-4">
|
||||
<div class="card card-blog card-plain">
|
||||
<div class="card-header p-0 m-2">
|
||||
<a class="d-block shadow-xl border-radius-xl">
|
||||
<img src="https://images.unsplash.com/photo-1606744824163-985d376605aa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body p-3">
|
||||
<p class="mb-0 text-sm">Project #4</p>
|
||||
<a href="javascript:;">
|
||||
<h5>
|
||||
Gothic
|
||||
</h5>
|
||||
</a>
|
||||
<p class="mb-4 text-sm">
|
||||
Why would anyone pick blue over pink? Pink is obviously a better color.
|
||||
</p>
|
||||
<div class="d-flex align-items-center justify-content-between">
|
||||
<button type="button" class="btn btn-outline-primary btn-sm mb-0">View Project</button>
|
||||
<div class="avatar-group mt-2">
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Peterson">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-4.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Nick Daniel">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-3.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Ryan Milly">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-2.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Elena Morison">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-1.jpg" %}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
1009
templates/pages/rtl.html
Normal file
1009
templates/pages/rtl.html
Normal file
File diff suppressed because it is too large
Load Diff
96
templates/pages/sign-in.html
Normal file
96
templates/pages/sign-in.html
Normal file
@@ -0,0 +1,96 @@
|
||||
{% extends "layouts/base-auth.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block body %} bg-gray-200 {% endblock body %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="main-content mt-0">
|
||||
<div class="page-header align-items-start min-vh-100" style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
|
||||
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||
<div class="container my-auto">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-dark shadow-dark border-radius-lg py-3 pe-1">
|
||||
<h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Sign in</h4>
|
||||
<div class="row mt-3">
|
||||
<div class="col-2 text-center ms-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fab fa-facebook text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center px-1">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fab fa-github text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-2 text-center me-auto">
|
||||
<a class="btn btn-link px-3" href="javascript:;">
|
||||
<i class="fab fa-google text-white text-lg"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if form.non_field_errors %}
|
||||
{% for error in form.non_field_errors %}
|
||||
<small class="text-danger mb-3">{{ error }}</small>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<form method="post" role="form" class="text-start">
|
||||
{% csrf_token %}
|
||||
|
||||
{% for field in form %}
|
||||
<div class="input-group input-group-outline my-3">
|
||||
<label class="form-label">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="form-check form-switch d-flex align-items-center mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="rememberMe" checked>
|
||||
<label class="form-check-label mb-0 ms-3" for="rememberMe">Remember me</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign in</button>
|
||||
</div>
|
||||
<p class="mt-4 text-sm text-center">
|
||||
Don't have an account?
|
||||
<a href="{% url "register" %}" class="text-primary text-gradient font-weight-bold">Sign up</a>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="footer position-absolute bottom-2 py-2 w-100">
|
||||
<div class="container">
|
||||
<div class="row align-items-center justify-content-lg-between">
|
||||
<div class="col-12 col-md-6 my-auto">
|
||||
<div class="copyright text-center text-sm text-white text-lg-start">
|
||||
© Creative-Tim coded by <a href="https://app-generator.dev" class="font-weight-bold">App Generator</a>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-6">
|
||||
<ul class="nav nav-footer justify-content-center justify-content-lg-end">
|
||||
<li class="nav-item">
|
||||
<a href="https://app-generator.dev/product/material-dashboard/django/" class="nav-link text-white">Download</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://app-generator.dev/docs/products/django/material-dashboard/index.html" class="nav-link text-white">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://app-generator.dev/product/material-dashboard-pro/django/" class="nav-link text-white">PRO Version</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
56
templates/pages/sign-up.html
Normal file
56
templates/pages/sign-up.html
Normal file
@@ -0,0 +1,56 @@
|
||||
{% extends "layouts/base-auth.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<main class="main-content mt-0">
|
||||
<section>
|
||||
<div class="page-header min-vh-100">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 start-0 text-center justify-content-center flex-column">
|
||||
<div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center" style="background-image: url('{% static "assets/img/illustrations/illustration-signup.jpg" %}'); background-size: cover;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column ms-auto me-auto ms-lg-auto me-lg-5">
|
||||
<div class="card card-plain">
|
||||
<div class="card-header">
|
||||
<h4 class="font-weight-bolder">Sign Up</h4>
|
||||
<p class="mb-0">Enter your email and password to register</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="post" role="form">
|
||||
{% csrf_token %}
|
||||
|
||||
{% for field in form %}
|
||||
<div class="input-group input-group-outline mb-3">
|
||||
<label class="form-label">{{ field.label }}</label>
|
||||
{{ field }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="form-check form-check-info text-start ps-0">
|
||||
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" checked>
|
||||
<label class="form-check-label" for="flexCheckDefault">
|
||||
I agree the <a href="javascript:;" class="text-dark font-weight-bolder">Terms and Conditions</a>
|
||||
</label>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="submit" class="btn btn-lg bg-gradient-dark btn-lg w-100 mt-4 mb-0">Sign Up</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card-footer text-center pt-0 px-lg-2 px-1">
|
||||
<p class="mb-2 text-sm mx-auto">
|
||||
Already have an account?
|
||||
<a href="{% url "login" %}" class="text-primary text-gradient font-weight-bold">Sign in</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{% endblock content %}
|
||||
432
templates/pages/tables.html
Normal file
432
templates/pages/tables.html
Normal file
@@ -0,0 +1,432 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card my-4">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
|
||||
<h6 class="text-white text-capitalize ps-3">Authors table</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0 pb-2">
|
||||
<div class="table-responsive p-0">
|
||||
<table class="table align-items-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Author</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Function</th>
|
||||
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
|
||||
<th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Employed</th>
|
||||
<th class="text-secondary opacity-7"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/team-2.jpg" %}" class="avatar avatar-sm me-3 border-radius-lg" alt="user1">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">John Michael</h6>
|
||||
<p class="text-xs text-secondary mb-0">john@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Manager</p>
|
||||
<p class="text-xs text-secondary mb-0">Organization</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-success">Online</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="text-secondary text-xs font-weight-bold">23/04/18</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/team-3.jpg" %}" class="avatar avatar-sm me-3 border-radius-lg" alt="user2">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Alexa Liras</h6>
|
||||
<p class="text-xs text-secondary mb-0">alexa@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Programator</p>
|
||||
<p class="text-xs text-secondary mb-0">Developer</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-secondary">Offline</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="text-secondary text-xs font-weight-bold">11/01/19</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" class="avatar avatar-sm me-3 border-radius-lg" alt="user3">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Laurent Perrier</h6>
|
||||
<p class="text-xs text-secondary mb-0">laurent@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Executive</p>
|
||||
<p class="text-xs text-secondary mb-0">Projects</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-success">Online</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="text-secondary text-xs font-weight-bold">19/09/17</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/team-3.jpg" %}" class="avatar avatar-sm me-3 border-radius-lg" alt="user4">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Michael Levi</h6>
|
||||
<p class="text-xs text-secondary mb-0">michael@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Programator</p>
|
||||
<p class="text-xs text-secondary mb-0">Developer</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-success">Online</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="text-secondary text-xs font-weight-bold">24/12/08</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/team-2.jpg" %}" class="avatar avatar-sm me-3 border-radius-lg" alt="user5">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Richard Gran</h6>
|
||||
<p class="text-xs text-secondary mb-0">richard@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Manager</p>
|
||||
<p class="text-xs text-secondary mb-0">Executive</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-secondary">Offline</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="text-secondary text-xs font-weight-bold">04/10/21</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2 py-1">
|
||||
<div>
|
||||
<img src="{% static "assets/img/team-4.jpg" %}" class="avatar avatar-sm me-3 border-radius-lg" alt="user6">
|
||||
</div>
|
||||
<div class="d-flex flex-column justify-content-center">
|
||||
<h6 class="mb-0 text-sm">Miriam Eric</h6>
|
||||
<p class="text-xs text-secondary mb-0">miriam@creative-tim.com</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-xs font-weight-bold mb-0">Programator</p>
|
||||
<p class="text-xs text-secondary mb-0">Developer</p>
|
||||
</td>
|
||||
<td class="align-middle text-center text-sm">
|
||||
<span class="badge badge-sm bg-gradient-secondary">Offline</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<span class="text-secondary text-xs font-weight-bold">14/09/20</span>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<a href="javascript:;" class="text-secondary font-weight-bold text-xs" data-toggle="tooltip" data-original-title="Edit user">
|
||||
Edit
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card my-4">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
|
||||
<h6 class="text-white text-capitalize ps-3">Projects table</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-0 pb-2">
|
||||
<div class="table-responsive p-0">
|
||||
<table class="table align-items-center justify-content-center mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Project</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Budget</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Status</th>
|
||||
<th class="text-uppercase text-secondary text-xxs font-weight-bolder text-center opacity-7 ps-2">Completion</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-asana.svg" %}" class="avatar avatar-sm rounded-circle me-2" alt="spotify">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Asana</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$2,500</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">working</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">60%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/github.svg" %}" class="avatar avatar-sm rounded-circle me-2" alt="invision">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Github</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$5,000</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">done</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">100%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-atlassian.svg" %}" class="avatar avatar-sm rounded-circle me-2" alt="jira">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Atlassian</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$3,400</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">canceled</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">30%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="30" style="width: 30%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/bootstrap.svg" %}" class="avatar avatar-sm rounded-circle me-2" alt="webdev">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Bootstrap</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$14,000</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">working</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">80%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-info" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="80" style="width: 80%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/logo-slack.svg" %}" class="avatar avatar-sm rounded-circle me-2" alt="slack">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Slack</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$1,000</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">canceled</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">0%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="0" style="width: 0%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex px-2">
|
||||
<div>
|
||||
<img src="{% static "assets/img/small-logos/devto.svg" %}" class="avatar avatar-sm rounded-circle me-2" alt="xd">
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<h6 class="mb-0 text-sm">Devto</h6>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<p class="text-sm font-weight-bold mb-0">$2,300</p>
|
||||
</td>
|
||||
<td>
|
||||
<span class="text-xs font-weight-bold">done</span>
|
||||
</td>
|
||||
<td class="align-middle text-center">
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<span class="me-2 text-xs font-weight-bold">100%</span>
|
||||
<div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar bg-gradient-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="align-middle">
|
||||
<button class="btn btn-link text-secondary mb-0" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="fa fa-ellipsis-v text-xs"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
10
templates/pages/template.html
Normal file
10
templates/pages/template.html
Normal file
@@ -0,0 +1,10 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
47
templates/pages/typography.html
Normal file
47
templates/pages/typography.html
Normal file
@@ -0,0 +1,47 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="container-fluid py-2">
|
||||
<div class="row min-vh-80">
|
||||
<div class="col-12">
|
||||
<div class="card mt-4">
|
||||
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
||||
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
||||
<h6 class="text-white text-capitalize ps-3">Material Dashboard Heading</h6>
|
||||
<p class="mb-0 text-white ps-3">Created using Roboto Slab Font Family
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-5">
|
||||
<h1>h1. Bootstrap heading</h1>
|
||||
<h2>h2. Bootstrap heading</h2>
|
||||
<h3>h3. Bootstrap heading</h3>
|
||||
<h4>h4. Bootstrap heading</h4>
|
||||
<h5>h5. Bootstrap heading</h5>
|
||||
<h6>h6. Bootstrap heading</h6>
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
<figure>
|
||||
<blockquote class="blockquote">
|
||||
<p class="ps-2">Because I’m here to follow my dreams and inspire other people to follow their dreams, too.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer ps-3">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "includes/footer.html" %}
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
165
templates/pages/virtual-reality.html
Normal file
165
templates/pages/virtual-reality.html
Normal file
@@ -0,0 +1,165 @@
|
||||
<!DOCTYPE html>
|
||||
{% load static %}
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
{% include "includes/head.html" %}
|
||||
</head>
|
||||
|
||||
<body class="g-sidenav-show bg-gray-100 virtual-reality">
|
||||
<div class="mt-n3">
|
||||
<!-- Navbar -->
|
||||
{% include "includes/navigation.html" %}
|
||||
<!-- End Navbar -->
|
||||
</div>
|
||||
<div class="border-radius-xl mx-2 mx-md-3 position-relative" style="background-image: url('{% static "assets/img/vr-bg.jpg" %}'); background-size: cover;">
|
||||
{% include "includes/sidebar.html" %}
|
||||
|
||||
<main class="main-content border-radius-lg h-100">
|
||||
<div class="section min-vh-85 position-relative transform-scale-0 transform-scale-md-7">
|
||||
<div class="container-fluid">
|
||||
<div class="row pt-10">
|
||||
<div class="col-lg-1 col-md-1 pt-5 pt-lg-0 ms-lg-5 text-center">
|
||||
<a href="javascript:;" class="avatar avatar-lg border-0 p-1" data-bs-toggle="tooltip" data-bs-placement="right" title="My Profile">
|
||||
<img class="border-radius-lg" alt="Image placeholder" src="{% static "assets/img/team-1.jpg" %}">
|
||||
</a>
|
||||
<button class="btn btn-white border-radius-lg p-2 mt-n4 mt-md-2" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Home">
|
||||
<i class="material-symbols-rounded p-2">home</i>
|
||||
</button>
|
||||
<button class="btn btn-white border-radius-lg p-2 mt-n4 mt-md-0" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Search">
|
||||
<i class="material-symbols-rounded p-2">search</i>
|
||||
</button>
|
||||
<button class="btn btn-white border-radius-lg p-2 mt-n4 mt-md-0" type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Minimize">
|
||||
<i class="material-symbols-rounded p-2">more_horiz</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-11 ps-md-5 mb-5 mb-md-0">
|
||||
<div class="d-flex">
|
||||
<div class="me-auto">
|
||||
<h1 class="display-1 font-weight-bold mt-n3 mb-0 text-white">28°C</h1>
|
||||
<h6 class="text-uppercase mb-0 ms-1 text-white">Cloudy</h6>
|
||||
</div>
|
||||
<div class="ms-auto">
|
||||
<img class="w-50 float-end mt-n6 mt-lg-n4" src="{% static "assets/img/small-logos/icon-sun-cloud.png" %}" alt="image sun">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="card move-on-hover overflow-hidden">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<h6 class="mb-0 me-3">08:00</h6>
|
||||
<h6 class="mb-0">Synk up with Mark
|
||||
<small class="text-secondary font-weight-normal">Hangouts</small>
|
||||
</h6>
|
||||
</div>
|
||||
<hr class="horizontal dark">
|
||||
<div class="d-flex">
|
||||
<h6 class="mb-0 me-3">09:30</h6>
|
||||
<h6 class="mb-0">Gym <br />
|
||||
<small class="text-secondary font-weight-normal">World Class</small>
|
||||
</h6>
|
||||
</div>
|
||||
<hr class="horizontal dark">
|
||||
<div class="d-flex">
|
||||
<h6 class="mb-0 me-3">11:00</h6>
|
||||
<h6 class="mb-0">Design Review<br />
|
||||
<small class="text-secondary font-weight-normal">Zoom</small>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:;" class="bg-gray-100 w-100 text-center py-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Show More">
|
||||
<i class="material-symbols-rounded text-primary">expand_more</i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 mt-4 mt-sm-0">
|
||||
<div class="card bg-gradient-dark move-on-hover">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<h5 class="mb-0 text-white">To Do</h5>
|
||||
<div class="ms-auto">
|
||||
<h1 class="text-white text-end mb-0 mt-n2">7</h1>
|
||||
<p class="text-sm mb-0 text-white">items</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-white mb-0">Shopping</p>
|
||||
<p class="mb-0 text-white">Meeting</p>
|
||||
</div>
|
||||
<a href="javascript:;" class="w-100 text-center py-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Show More">
|
||||
<i class="material-symbols-rounded text-white">expand_more</i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="card move-on-hover mt-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<p class="mb-0">Emails (21)</p>
|
||||
<a href="javascript:;" class="ms-auto" data-bs-toggle="tooltip" data-bs-placement="top" title="Check your emails">
|
||||
Check
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12 mt-4 mt-lg-0">
|
||||
<div class="card card-background card-background-mask-dark move-on-hover align-items-start">
|
||||
<div class="cursor-pointer">
|
||||
<div class="full-background" style="background-image: url('https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=80')"></div>
|
||||
<div class="card-body">
|
||||
<h5 class="text-white mb-0">Night Jazz</h5>
|
||||
<p class="text-white text-sm">Gary Coleman</p>
|
||||
<div class="d-flex mt-5">
|
||||
<button class="btn btn-outline-white rounded-circle p-2 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Prev">
|
||||
<i class="material-symbols-rounded p-2 mt-0">skip_previous</i>
|
||||
</button>
|
||||
<button class="btn btn-outline-white rounded-circle p-2 mx-2 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Pause">
|
||||
<i class="material-symbols-rounded p-2 mt-0">play_arrow</i>
|
||||
</button>
|
||||
<button class="btn btn-outline-white rounded-circle p-2 mb-0" type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Next">
|
||||
<i class="material-symbols-rounded p-2 mt-0">skip_next</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card move-on-hover mt-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex">
|
||||
<p class="my-auto">Messages</p>
|
||||
<div class="ms-auto">
|
||||
<div class="avatar-group">
|
||||
<a href="javascript:;" class="avatar avatar-sm border-0 rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="2 New Messages">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-1.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-sm border-0 rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="1 New Message">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-2.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-sm border-0 rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="13 New Messages">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-3.jpg" %}">
|
||||
</a>
|
||||
<a href="javascript:;" class="avatar avatar-sm border-0 rounded-circle" data-bs-toggle="tooltip" data-bs-placement="top" title="7 New Messages">
|
||||
<img alt="Image placeholder" src="{% static "assets/img/team-4.jpg" %}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{% include "includes/footer.html" %}
|
||||
|
||||
{% include "includes/configurator.html" %}
|
||||
|
||||
{% include "includes/scripts.html" %}
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user