273 lines
13 KiB
HTML
273 lines
13 KiB
HTML
|
|
{% extends "layouts/default.html" %}
|
|
|
|
{% block title %} Blank Page {% endblock title %}
|
|
|
|
{% block stylesheets %}{% endblock stylesheets %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row gap-20 masonry pos-r">
|
|
<h4 class="c-grey-900">UI Elements</h4>
|
|
<div class="masonry-sizer col-md-6"></div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Alerts</h6>
|
|
<div class="mT-30">
|
|
<div class="alert alert-primary" role="alert">
|
|
This is a primary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-secondary" role="alert">
|
|
This is a secondary alert—check it out!
|
|
</div>
|
|
<div class="alert alert-success" role="alert">
|
|
This is a success alert—check it out!
|
|
</div>
|
|
<div class="alert alert-danger" role="alert">
|
|
This is a danger alert—check it out!
|
|
</div>
|
|
<div class="alert alert-warning" role="alert">
|
|
This is a warning alert—check it out!
|
|
</div>
|
|
<div class="alert alert-info" role="alert">
|
|
This is a info alert—check it out!
|
|
</div>
|
|
<div class="alert alert-light" role="alert">
|
|
This is a light alert—check it out!
|
|
</div>
|
|
<div class="alert alert-dark" role="alert">
|
|
This is a dark alert—check it out!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Buttons</h6>
|
|
<div class="mT-30">
|
|
<div class="gap-10 peers">
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-primary">Primary</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-secondary">Secondary</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-success">Success</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-danger">Danger</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-warning">Warning</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-info">Info</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-light">Light</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-100 gap-10 peers mY-20">
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-primary">Primary</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-secondary">Secondary</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-success">Success</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-danger">Danger</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-warning">Warning</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-info">Info</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-light">Light</button>
|
|
</div>
|
|
<div class="peer">
|
|
<button type="button" class="btn cur-p btn-outline-dark">Dark</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
|
<div class="btn-group mr-2" role="group" aria-label="First group">
|
|
<button type="button" class="btn btn-success">1</button>
|
|
<button type="button" class="btn btn-success">2</button>
|
|
<button type="button" class="btn btn-success">3</button>
|
|
<button type="button" class="btn btn-success">4</button>
|
|
</div>
|
|
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
|
<button type="button" class="btn btn-success">5</button>
|
|
<button type="button" class="btn btn-success">6</button>
|
|
<button type="button" class="btn btn-success">7</button>
|
|
</div>
|
|
<div class="btn-group" role="group" aria-label="Third group">
|
|
<button type="button" class="btn btn-success">8</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Dropdowns</h6>
|
|
<div class="mT-30">
|
|
<div class="dropdown">
|
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Dropdown button
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Example split danger button -->
|
|
<div class="btn-group mT-20">
|
|
<button type="button" class="btn btn-danger">Action</button>
|
|
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
<a class="dropdown-item" href="#">Another action</a>
|
|
<a class="dropdown-item" href="#">Something else here</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">List Group</h6>
|
|
<div class="mT-30">
|
|
<div class="list-group">
|
|
<a href="#" class="list-group-item list-group-item-action actived">
|
|
Cras justo odio
|
|
</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
|
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
|
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Modal</h6>
|
|
<div class="mT-30">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
|
|
Launch demo modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Popover</h6>
|
|
<div class="mT-30">
|
|
<button type="button" class="btn btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Progress</h6>
|
|
<div class="mT-30">
|
|
<!-- Progress Bars -->
|
|
<div class="layers">
|
|
<div class="layer w-100">
|
|
<h5 class="mB-5">100k</h5>
|
|
<small class="fw-600 c-grey-700">Visitors From USA</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">50%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-deep-purple-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%;"> <span class="sr-only">50% Complete</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">1M</h5>
|
|
<small class="fw-600 c-grey-700">Visitors From Europe</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">80%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-green-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:80%;"> <span class="sr-only">80% Complete</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">450k</h5>
|
|
<small class="fw-600 c-grey-700">Visitors From Australia</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">40%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-light-blue-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:40%;"> <span class="sr-only">40% Complete</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 mT-15">
|
|
<h5 class="mB-5">1B</h5>
|
|
<small class="fw-600 c-grey-700">Visitors From India</small>
|
|
<span class="pull-right c-grey-600 fsz-sm">90%</span>
|
|
<div class="progress mT-10">
|
|
<div class="progress-bar bgc-blue-grey-500" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:90%;"> <span class="sr-only">90% Complete</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="masonry-item col-md-6">
|
|
<div class="bgc-white p-20 bd">
|
|
<h6 class="c-grey-900">Tootips</h6>
|
|
<div class="mT-30">
|
|
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
|
Tooltip on top
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
|
|
Tooltip on right
|
|
</button>
|
|
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
|
|
Tooltip on bottom
|
|
</button>
|
|
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
|
|
Tooltip on left
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock content %}
|