donation/public/assets/html/material/layouts-two-column.html

529 lines
37 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
@@include("partials/title-meta.html", {"title": "Two Column Layout"})
<!-- plugin css -->
<link href="../assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
@@include('./partials/head-css.html')
</head>
<body class="loading" data-layout-mode="two-column" data-layout='{"mode": "light", "width": "fluid", "menuPosition": "fixed", "sidebar": { "color": "light", "size": "default", "showuser": false}, "topbar": {"color": "light"}, "showRightSidebarOnPageLoad": true}'></body>
<!-- Begin page -->
<div id="wrapper">
@@include('./partials/topbar.html')
@@include('./partials/two-column-sidebar.html')
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div class="content-page">
<div class="content">
<!-- Start Content-->
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box page-title-box-alt">
<h4 class="page-title">Two Column</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Minton</a></li>
<li class="breadcrumb-item"><a href="javascript: void(0);">Layouts</a></li>
<li class="breadcrumb-item active">Two Column</li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<div class="col-xl-3 col-lg-4">
<div class="alert alert-info alert-dismissible fade show mb-3" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Property MN7xx is not receiving hits. Either your site is not receiving any sessions.
</div>
<div class="card">
<div class="card-body">
<i class="fa fa-info-circle text-muted float-right" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More Info"></i>
<h4 class="m-0 font-16">Active Users</h4>
<h2 class="my-3 text-center" id="active-users-count">121</h2>
<p class="text-muted m-0">Since last month: 22506 <span class="float-right"><i class="mdi mdi-arrow-up-bold mr-1 text-success"></i>10.25%</span></p>
</div> <!-- end card-body-->
</div>
<!--end card-->
<div class="card">
<div class="card-body">
<i class="fa fa-info-circle text-muted float-right" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="More Info"></i>
<h4 class="m-0 font-16">Views Per Minute</h4>
<h2 class="my-3 text-center" id="active-views-count">485</h2>
<p class="text-muted m-0">Since previous week: 8541 <span class="float-right"><i class="mdi mdi-arrow-down-bold mr-1 text-danger"></i>2.63%</span></p>
</div> <!-- end card-body-->
</div>
<!--end card-->
</div> <!-- end col -->
<div class="col-xl-9 col-lg-8">
<div class="card">
<div class="card-body">
<ul class="nav float-right d-none d-lg-flex">
<li class="nav-item">
<a class="nav-link text-muted" href="#">Today</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted" href="#">7d</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">15d</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted" href="#">1m</a>
</li>
<li class="nav-item">
<a class="nav-link text-muted" href="#">1y</a>
</li>
</ul>
<h4 class="header-title mb-3">Sessions Overview</h4>
<div class="row align-items-center">
<div class="col-xl-8">
<div id="usa-vectormap" style="height: 363px" data-colors="#0056c1"></div>
</div> <!-- end col -->
<div class="col-xl-4">
<h5 class="mb-1 mt-0">1,12,540 <small class="text-muted ml-2">www.getbootstrap.com</small></h5>
<div class="row align-items-center no-gutters mb-2 pb-1">
<div class="col">
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" style="width: 72%;" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-auto">
<div class="font-weight-medium ml-2">72%</div>
</div>
</div>
<h5 class="mb-1 mt-0">51,480 <small class="text-muted ml-2">www.youtube.com</small></h5>
<div class="row align-items-center no-gutters mb-2 pb-1">
<div class="col">
<div class="progress progress-sm">
<div class="progress-bar bg-success" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-auto">
<div class="font-weight-medium ml-2">65%</div>
</div>
</div>
<h5 class="mb-1 mt-0">45,760 <small class="text-muted ml-2">www.dribbble.com</small></h5>
<div class="row align-items-center no-gutters mb-2 pb-1">
<div class="col">
<div class="progress progress-sm">
<div class="progress-bar bg-warning" role="progressbar" style="width: 48%;" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-auto">
<div class="font-weight-medium ml-2">48%</div>
</div>
</div>
<h5 class="mb-1 mt-0">98,512 <small class="text-muted ml-2">www.behance.net</small></h5>
<div class="row align-items-center no-gutters mb-2 pb-1">
<div class="col">
<div class="progress progress-sm">
<div class="progress-bar" role="progressbar" style="width: 59%;" aria-valuenow="59" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-auto">
<div class="font-weight-medium ml-2">59%</div>
</div>
</div>
<h5 class="mb-1 mt-0">2,154 <small class="text-muted ml-2">www.vimeo.com</small></h5>
<div class="row align-items-center no-gutters">
<div class="col">
<div class="progress progress-sm">
<div class="progress-bar bg-danger" role="progressbar" style="width: 21%;" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-auto">
<div class="font-weight-medium ml-2">21%</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div>
<!-- end row-->
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Settings</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Download</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Upload</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
</div>
</div>
<h4 class="header-title mt-0 mb-3">Browser Used By Users</h4>
<div class="table-responsive browser_users">
<table class="table mb-0">
<thead class="thead-light">
<tr>
<th class="border-top-0">Browser</th>
<th class="border-top-0">Sessions</th>
<th class="border-top-0">Bounce Rate</th>
<th class="border-top-0">Transactions</th>
</tr><!--end tr-->
</thead>
<tbody>
<tr>
<td><i class="fab fa-chrome mr-2 text-success font-16"></i>Chrome</td>
<td>10853 <small class="text-muted">(52%)</small></td>
<td> 52.80%</td>
<td>566 <small class="text-muted">(92%)</small></td>
</tr><!--end tr-->
<tr>
<td><i class="fab fa-safari mr-2 text-info font-16"></i>Safari</td>
<td>2545 <small class="text-muted">(47%)</small></td>
<td> 47.54%</td>
<td>498 <small class="text-muted">(81%)</small></td>
</tr><!--end tr-->
<tr>
<td><i class="fab fa-internet-explorer mr-2 text-warning font-16"></i>Internet-Explorer</td>
<td>1836 <small class="text-muted">(38%)</small></td>
<td> 41.12%</td>
<td>455 <small class="text-muted">(74%)</small></td>
</tr><!--end tr-->
<tr>
<td><i class="fab fa-opera mr-2 text-danger font-16"></i>Opera</td>
<td>1958 <small class="text-muted">(31%)</small></td>
<td> 36.82%</td>
<td>361 <small class="text-muted">(61%)</small></td>
</tr><!--end tr-->
<tr>
<td><i class="fab fa-firefox mr-2 text-blue font-16"></i>Firefox</td>
<td>1566 <small class="text-muted">(26%)</small></td>
<td> 29.33%</td>
<td>299 <small class="text-muted">(49%)</small></td>
</tr><!--end tr-->
</tbody>
</table> <!--end table-->
</div><!--end /div-->
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<div class="dropdown float-right">
<a href="#" class="dropdown-toggle arrow-none card-drop" data-toggle="dropdown" aria-expanded="false">
<i class="mdi mdi-dots-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Settings</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Download</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Upload</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item">Action</a>
</div>
</div>
<h4 class="header-title mt-0 mb-3">Traffic Sources</h4>
<div class="table-responsive browser_users">
<table class="table mb-0">
<thead class="thead-light">
<tr>
<th class="border-top-0">Channel</th>
<th class="border-top-0">Sessions</th>
<th class="border-top-0">Prev.Period</th>
<th class="border-top-0">% Change</th>
</tr><!--end tr-->
</thead>
<tbody>
<tr>
<td><a href="" class="text-primary">Organic search</a></td>
<td>10853 <small class="text-muted">(52%)</small></td>
<td>566 <small class="text-muted">(92%)</small></td>
<td> 52.80% <i class="fas fa-caret-up text-success font-16"></i></td>
</tr><!--end tr-->
<tr>
<td><a href="" class="text-primary">Direct</a></td>
<td>2545 <small class="text-muted">(47%)</small></td>
<td>498 <small class="text-muted">(81%)</small></td>
<td> -17.20% <i class="fas fa-caret-down text-danger font-16"></i></td>
</tr><!--end tr-->
<tr>
<td><a href="" class="text-primary">Referal</a></td>
<td>1836 <small class="text-muted">(38%)</small></td>
<td>455 <small class="text-muted">(74%)</small></td>
<td> 41.12% <i class="fas fa-caret-up text-success font-16"></i></td>
</tr><!--end tr-->
<tr>
<td><a href="" class="text-primary">Email</a></td>
<td>1958 <small class="text-muted">(31%)</small></td>
<td>361 <small class="text-muted">(61%)</small></td>
<td> -8.24% <i class="fas fa-caret-down text-danger font-16"></i></td>
</tr><!--end tr-->
<tr>
<td><a href="" class="text-primary">Social</a></td>
<td>1566 <small class="text-muted">(26%)</small></td>
<td>299 <small class="text-muted">(49%)</small></td>
<td> 29.33% <i class="fas fa-caret-up text-success"></i></td>
</tr><!--end tr-->
</tbody>
</table> <!--end table-->
</div><!--end /div-->
</div><!--end card-body-->
</div><!--end card-->
</div><!--end col-->
</div>
<div class="row">
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-body">
<a href="" class="p-0 float-right mb-3">Export <i class="mdi mdi-download ml-1"></i></a>
<h4 class="header-title mt-1">Channels</h4>
<div class="table-responsive">
<table class="table table-sm table-centered mb-0 font-14">
<thead class="thead-light">
<tr>
<th>Channel</th>
<th>Visits</th>
<th style="width: 40%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Direct</td>
<td>2,050</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar" role="progressbar"
style="width: 65%;" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>Organic Search</td>
<td>1,405</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar bg-info" role="progressbar"
style="width: 45%;" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>Refferal</td>
<td>750</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar bg-warning" role="progressbar"
style="width: 30%;" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>Social</td>
<td>540</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar bg-danger" role="progressbar"
style="width: 25%;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div> <!-- end table-responsive-->
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
<div class="col-xl-4 col-lg-6">
<div class="card">
<div class="card-body">
<a href="" class="p-0 float-right mb-3">Export <i class="mdi mdi-download ml-1"></i></a>
<h4 class="header-title mt-1">Social Media Traffic</h4>
<div class="table-responsive">
<table class="table table-sm table-centered mb-0 font-14">
<thead class="thead-light">
<tr>
<th>Network</th>
<th>Visits</th>
<th style="width: 40%;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Facebook</td>
<td>2,250</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar" role="progressbar"
style="width: 65%;" aria-valuenow="65"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>Instagram</td>
<td>1,501</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar" role="progressbar"
style="width: 45%;" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>Twitter</td>
<td>750</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar" role="progressbar"
style="width: 30%;" aria-valuenow="30"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
<tr>
<td>LinkedIn</td>
<td>540</td>
<td>
<div class="progress" style="height: 3px;">
<div class="progress-bar" role="progressbar"
style="width: 25%;" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div> <!-- end table-responsive-->
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
<div class="col-xl-4 col-lg-12">
<div class="card">
<div class="card-body">
<a href="" class="p-0 float-right mb-3">Export <i class="mdi mdi-download ml-1"></i></a>
<h4 class="header-title mt-1">Engagement Overview</h4>
<div class="table-responsive">
<table class="table table-sm table-centered mb-0 font-14">
<thead class="thead-light">
<tr>
<th>Duration (Secs)</th>
<th style="width: 30%;">Sessions</th>
<th style="width: 30%;">Views</th>
</tr>
</thead>
<tbody>
<tr>
<td>0-30</td>
<td>2,250</td>
<td>4,250</td>
</tr>
<tr>
<td>31-60</td>
<td>1,501</td>
<td>2,050</td>
</tr>
<tr>
<td>61-120</td>
<td>750</td>
<td>1,600</td>
</tr>
<tr>
<td>121-240</td>
<td>540</td>
<td>1,040</td>
</tr>
</tbody>
</table>
</div> <!-- end table-responsive-->
</div> <!-- end card-body-->
</div> <!-- end card-->
</div> <!-- end col-->
</div>
<!-- end row -->
</div> <!-- container -->
</div> <!-- content -->
@@include('./partials/footer.html')
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>
<!-- END wrapper -->
@@include('./partials/right-sidebar.html')
<!-- Vendor js -->
<script src="../assets/js/vendor.min.js"></script>
<!-- Plugins js-->
<script src="../assets/libs/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../assets/libs/admin-resources/jquery.vectormap/maps/jquery-jvectormap-us-merc-en.js"></script>
<!-- Dashboard init-->
<script src="../assets/js/pages/dashboard-analytics.init.js"></script>
<!-- App js -->
<script src="../assets/js/app.min.js"></script>
</body>
</html>