mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
3326 lines
167 KiB
HTML
3326 lines
167 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<meta http-equiv="Content-Language" content="en" />
|
||
<meta name="msapplication-TileColor" content="#2d89ef">
|
||
<meta name="theme-color" content="#4188c9">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="HandheldFriendly" content="True">
|
||
<meta name="MobileOptimized" content="320">
|
||
<link rel="icon" href="./favicon.ico" type="image/x-icon"/>
|
||
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
|
||
<!-- Generated: 2018-04-16 09:28:16 +0200 -->
|
||
<title>Homepage - tabler.github.io - a responsive, flat and full featured admin template</title>
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext">
|
||
<script src="./assets/js/require.min.js"></script>
|
||
<script>
|
||
requirejs.config({
|
||
baseUrl: '.'
|
||
});
|
||
</script>
|
||
<!-- Dashboard Core -->
|
||
<link href="./assets/css/dashboard.css" rel="stylesheet" />
|
||
<script src="./assets/js/dashboard.js"></script>
|
||
<!-- c3.js Charts Plugin -->
|
||
<link href="./assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
|
||
<script src="./assets/plugins/charts-c3/plugin.js"></script>
|
||
<!-- Google Maps Plugin -->
|
||
<link href="./assets/plugins/maps-google/plugin.css" rel="stylesheet" />
|
||
<script src="./assets/plugins/maps-google/plugin.js"></script>
|
||
<!-- Input Mask Plugin -->
|
||
<script src="./assets/plugins/input-mask/plugin.js"></script>
|
||
</head>
|
||
<body class="">
|
||
<div class="page">
|
||
<div class="page-main">
|
||
<div class="header py-4">
|
||
<div class="container">
|
||
<div class="d-flex">
|
||
<a class="header-brand" href="./index.html">
|
||
<img src="./demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
|
||
</a>
|
||
<div class="d-flex order-lg-2 ml-auto">
|
||
<div class="nav-item d-none d-md-flex">
|
||
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
|
||
</div>
|
||
<div class="dropdown d-none d-md-flex">
|
||
<a class="nav-link icon" data-toggle="dropdown">
|
||
<i class="fe fe-bell"></i>
|
||
<span class="nav-unread"></span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
||
<a href="#" class="dropdown-item d-flex">
|
||
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
|
||
<div>
|
||
<strong>Nathan</strong> pushed new commit: Fix page load performance issue.
|
||
<div class="small text-muted">10 minutes ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item d-flex">
|
||
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
|
||
<div>
|
||
<strong>Alice</strong> started new task: Tabler UI design.
|
||
<div class="small text-muted">1 hour ago</div>
|
||
</div>
|
||
</a>
|
||
<a href="#" class="dropdown-item d-flex">
|
||
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
|
||
<div>
|
||
<strong>Rose</strong> deployed new version of NodeJS REST Api V3
|
||
<div class="small text-muted">2 hours ago</div>
|
||
</div>
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
|
||
<span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
|
||
<span class="ml-2 d-none d-lg-block">
|
||
<span class="text-default">Jane Pearson</span>
|
||
<small class="text-muted d-block mt-1">Administrator</small>
|
||
</span>
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
|
||
<a class="dropdown-item" href="#">
|
||
<i class="dropdown-icon fe fe-user"></i> Profile
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<i class="dropdown-icon fe fe-settings"></i> Settings
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<span class="float-right"><span class="badge badge-primary">6</span></span>
|
||
<i class="dropdown-icon fe fe-mail"></i> Inbox
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<i class="dropdown-icon fe fe-send"></i> Message
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">
|
||
<i class="dropdown-icon fe fe-help-circle"></i> Need help?
|
||
</a>
|
||
<a class="dropdown-item" href="#">
|
||
<i class="dropdown-icon fe fe-log-out"></i> Sign out
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
|
||
<span class="header-toggler-icon"></span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="header collapse d-lg-flex p-0" id="headerMenuCollapse">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-lg-3 ml-auto">
|
||
<form class="input-icon my-3 my-lg-0">
|
||
<input type="search" class="form-control header-search" placeholder="Search…" tabindex="1">
|
||
<div class="input-icon-addon">
|
||
<i class="fe fe-search"></i>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="col-lg order-lg-first">
|
||
<ul class="nav nav-tabs border-0 flex-column flex-lg-row">
|
||
<li class="nav-item">
|
||
<a href="./index.html" class="nav-link"><i class="fe fe-home"></i> Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
|
||
<div class="dropdown-menu dropdown-menu-arrow">
|
||
<a href="./cards.html" class="dropdown-item ">Cards design</a>
|
||
<a href="./charts.html" class="dropdown-item ">Charts</a>
|
||
<a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
|
||
<div class="dropdown-menu dropdown-menu-arrow">
|
||
<a href="./maps.html" class="dropdown-item ">Maps</a>
|
||
<a href="./icons.html" class="dropdown-item ">Icons</a>
|
||
<a href="./store.html" class="dropdown-item ">Store</a>
|
||
<a href="./blog.html" class="dropdown-item ">Blog</a>
|
||
<a href="./carousel.html" class="dropdown-item ">Carousel</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
|
||
<div class="dropdown-menu dropdown-menu-arrow">
|
||
<a href="./profile.html" class="dropdown-item ">Profile</a>
|
||
<a href="./login.html" class="dropdown-item ">Login</a>
|
||
<a href="./register.html" class="dropdown-item ">Register</a>
|
||
<a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
|
||
<a href="./400.html" class="dropdown-item ">400 error</a>
|
||
<a href="./401.html" class="dropdown-item ">401 error</a>
|
||
<a href="./403.html" class="dropdown-item ">403 error</a>
|
||
<a href="./404.html" class="dropdown-item ">404 error</a>
|
||
<a href="./500.html" class="dropdown-item ">500 error</a>
|
||
<a href="./503.html" class="dropdown-item ">503 error</a>
|
||
<a href="./email.html" class="dropdown-item ">Email</a>
|
||
<a href="./empty.html" class="dropdown-item ">Empty page</a>
|
||
<a href="./rtl.html" class="dropdown-item ">RTL mode</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="my-3 my-md-5">
|
||
<!--<div class="container">-->
|
||
<!--<nav class="breadcrumb breadcrumb-content">-->
|
||
<!--<a class="breadcrumb-item" href="javascript:void(0)">Library</a>-->
|
||
<!--<span class="breadcrumb-item active">Cards</span>-->
|
||
<!--</nav>-->
|
||
<!--</div>-->
|
||
<div class="container">
|
||
<div class="page-header">
|
||
<div>
|
||
<h1 class="page-title">Dashboard</h1>
|
||
<div class="page-description">
|
||
<ul class="list-inline list-inline-dots m-0">
|
||
<li class="list-inline-item">Section 500</li>
|
||
<li class="list-inline-item">English learning French</li>
|
||
<li class="list-inline-item">
|
||
<a href="javascript:void(0)">United states</a>
|
||
</li>
|
||
<li class="list-inline-item">7 students</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cards">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<article class="media">
|
||
<div class="mr-3">
|
||
<div class="avatar avatar-xl" style="background-image: url(demo/faces/female/17.jpg)"></div>
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="content">
|
||
<p class="h5">
|
||
John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
|
||
</p>
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||
</p>
|
||
</div>
|
||
<nav class="d-flex text-muted">
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-repeat"></i>
|
||
</a>
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-twitter"></i> 24
|
||
</a>
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-heart"></i> 43
|
||
</a>
|
||
<a href="" class="text-muted ml-auto">
|
||
5 notes
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<article class="media">
|
||
<div class="mr-3">
|
||
<div class="avatar avatar-xl" style="background-image: url(demo/faces/female/17.jpg)"></div>
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="content">
|
||
<p class="h5">
|
||
John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
|
||
</p>
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||
</p>
|
||
</div>
|
||
<nav class="d-flex text-muted">
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-repeat"></i>
|
||
</a>
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-twitter"></i> 24
|
||
</a>
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-heart"></i> 43
|
||
</a>
|
||
<a href="" class="text-muted ml-auto">
|
||
5 notes
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<article class="media">
|
||
<div class="mr-3">
|
||
<div class="avatar avatar-xl" style="background-image: url(demo/faces/female/17.jpg)"></div>
|
||
</div>
|
||
<div class="media-body">
|
||
<div class="content">
|
||
<p class="h5">
|
||
John Smith <small>@johnsmith</small> <small class="float-right text-muted">31 minutes ago</small>
|
||
</p>
|
||
<p>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||
</p>
|
||
<figure>
|
||
<img src="demo/photos/casey-horner-339165-500.jpg" alt="" class="rounded">
|
||
</figure>
|
||
</div>
|
||
<nav class="d-flex text-muted">
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-repeat"></i>
|
||
</a>
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-twitter"></i> 24
|
||
</a>
|
||
<a href="#" class="icon mr-3">
|
||
<i class="fe fe-heart"></i> 43
|
||
</a>
|
||
<a href="" class="text-muted ml-auto">
|
||
5 notes
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-8">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">HTTP Request</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="form-group col-sm-4 col-md-2">
|
||
<label class="form-label">
|
||
Method <span class="form-required">*</span>
|
||
</label>
|
||
<select class="custom-select">
|
||
<option value="GET">GET</option>
|
||
<option value="POST">POST</option>
|
||
<option value="PUT">PUT</option>
|
||
<option value="HEAD">HEAD</option>
|
||
<option value="DELETE">DELETE</option>
|
||
<option value="PATCH">PATCH</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group col-sm-8 col-md-10">
|
||
<label class="form-label">
|
||
URL <span class="form-required">*</span>
|
||
</label>
|
||
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest">
|
||
</div>
|
||
</div>
|
||
<div class="form-label">Assertions</div>
|
||
<div class="table-responsive">
|
||
<table class="table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th class="pl-0">Source</th>
|
||
<th>Property</th>
|
||
<th>Comparison</th>
|
||
<th class="pr-0">Target</th>
|
||
</tr>
|
||
</thead>
|
||
<tr>
|
||
<td class="pl-0">
|
||
<select class="custom-select">
|
||
<option value="STATUS_CODE" selected>Status code</option>
|
||
<option value="JSON_BODY">JSON body</option>
|
||
<option value="HEADERS">Headers</option>
|
||
<option value="TEXT_BODY">Text body</option>
|
||
<option value="RESPONSE_TIME">Response time</option>
|
||
</select>
|
||
</td>
|
||
<td>
|
||
<input type="text" class="form-control"></td>
|
||
<td>
|
||
<select class="custom-select">
|
||
<option value="EQUALS" selected>Equals</option>
|
||
<option value="NOT_EQUALS">Not equals</option>
|
||
<option value="HAS_KEY">Has key</option>
|
||
<option value="NOT_HAS_KEY">Not has key</option>
|
||
<option value="HAS_VALUE">Has value</option>
|
||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||
<option value="IS_EMPTY">Is empty</option>
|
||
<option value="NOT_EMPTY">Is not empty</option>
|
||
<option value="GREATER_THAN">Greater than</option>
|
||
<option value="LESS_THAN">Less than</option>
|
||
</select>
|
||
</td>
|
||
<td class="pr-0">
|
||
<input type="text" class="form-control" value="200">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="pl-0">
|
||
<select class="custom-select">
|
||
<option value="STATUS_CODE">Status code</option>
|
||
<option value="JSON_BODY" selected>JSON body</option>
|
||
<option value="HEADERS">Headers</option>
|
||
<option value="TEXT_BODY">Text body</option>
|
||
<option value="RESPONSE_TIME">Response time</option>
|
||
</select>
|
||
</td>
|
||
<td>
|
||
<input type="text" class="form-control" value="parameters.alt.type">
|
||
</td>
|
||
<td>
|
||
<select class="custom-select">
|
||
<option value="EQUALS">Equals</option>
|
||
<option value="NOT_EQUALS">Not equals</option>
|
||
<option value="HAS_KEY">Has key</option>
|
||
<option value="NOT_HAS_KEY">Not has key</option>
|
||
<option value="HAS_VALUE" selected>Has value</option>
|
||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||
<option value="IS_EMPTY">Is empty</option>
|
||
<option value="NOT_EMPTY">Is not empty</option>
|
||
<option value="GREATER_THAN">Greater than</option>
|
||
<option value="LESS_THAN">Less than</option>
|
||
</select>
|
||
</td>
|
||
<td class="pr-0">
|
||
<input type="text" class="form-control" value="string">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="pl-0">
|
||
<select class="custom-select">
|
||
<option value="STATUS_CODE">Status code</option>
|
||
<option value="JSON_BODY">JSON body</option>
|
||
<option value="HEADERS">Headers</option>
|
||
<option value="TEXT_BODY">Text body</option>
|
||
<option value="RESPONSE_TIME" selected>Response time</option>
|
||
</select>
|
||
</td>
|
||
<td>
|
||
<input type="text" class="form-control"></td>
|
||
<td>
|
||
<select class="custom-select">
|
||
<option value="EQUALS">Equals</option>
|
||
<option value="NOT_EQUALS">Not equals</option>
|
||
<option value="HAS_KEY">Has key</option>
|
||
<option value="NOT_HAS_KEY">Not has key</option>
|
||
<option value="HAS_VALUE">Has value</option>
|
||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||
<option value="IS_EMPTY">Is empty</option>
|
||
<option value="NOT_EMPTY">Is not empty</option>
|
||
<option value="GREATER_THAN">Greater than</option>
|
||
<option value="LESS_THAN" selected>Less than</option>
|
||
</select>
|
||
</td>
|
||
<td class="pr-0">
|
||
<input type="text" class="form-control" value="500">
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="pl-0">
|
||
<select class="custom-select">
|
||
<option value="STATUS_CODE">Status code</option>
|
||
<option value="JSON_BODY">JSON body</option>
|
||
<option value="HEADERS" selected>Headers</option>
|
||
<option value="TEXT_BODY">Text body</option>
|
||
<option value="RESPONSE_TIME">Response time</option>
|
||
</select>
|
||
</td>
|
||
<td>
|
||
<input type="text" class="form-control" value="content-type">
|
||
</td>
|
||
<td>
|
||
<select class="custom-select">
|
||
<option value="EQUALS" selected>Equals</option>
|
||
<option value="NOT_EQUALS">Not equals</option>
|
||
<option value="HAS_KEY">Has key</option>
|
||
<option value="NOT_HAS_KEY">Not has key</option>
|
||
<option value="HAS_VALUE">Has value</option>
|
||
<option value="NOT_HAS_VALUE">Not has value</option>
|
||
<option value="IS_EMPTY">Is empty</option>
|
||
<option value="NOT_EMPTY">Is not empty</option>
|
||
<option value="GREATER_THAN">Greater than</option>
|
||
<option value="LESS_THAN">Less than</option>
|
||
</select>
|
||
</td>
|
||
<td class="pr-0">
|
||
<input type="text" class="form-control" value="application/json; charset=UTF-8">
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer text-right">
|
||
<button type="submit" class="btn btn-primary">Make request</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12"></div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3">
|
||
<div class="d-flex align-items-center">
|
||
<span class="stamp stamp-md bg-blue mr-3">
|
||
<i class="fa fa-eur"></i>
|
||
</span>
|
||
<div>
|
||
<h4 class="m-0"><a href="javascript:void(0)">132 <small>Sales</small></a></h4>
|
||
<small class="text-muted">12 waiting payments</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3">
|
||
<div class="d-flex align-items-center">
|
||
<span class="stamp stamp-md bg-green mr-3">
|
||
<i class="fa fa-shopping-bag"></i>
|
||
</span>
|
||
<div>
|
||
<h4 class="m-0"><a href="javascript:void(0)">78 <small>Orders</small></a></h4>
|
||
<small class="text-muted">32 shipped</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3">
|
||
<div class="d-flex align-items-center">
|
||
<span class="stamp stamp-md bg-red mr-3">
|
||
<i class="fa fa-user"></i>
|
||
</span>
|
||
<div>
|
||
<h4 class="m-0"><a href="javascript:void(0)">1,352 <small>Members</small></a></h4>
|
||
<small class="text-muted">163 registered today</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3">
|
||
<div class="d-flex align-items-center">
|
||
<span class="stamp stamp-md bg-yellow mr-3">
|
||
<i class="fa fa-comments"></i>
|
||
</span>
|
||
<div>
|
||
<h4 class="m-0"><a href="javascript:void(0)">132 <small>Comments</small></a></h4>
|
||
<small class="text-muted">16 waiting</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3 px-4">
|
||
<div>
|
||
Total revenue
|
||
</div>
|
||
<div class="py-4 m-0 text-center h1 text-green">$14,320</div>
|
||
<div class="d-flex">
|
||
<small class="text-muted">Income</small>
|
||
<div class="ml-auto">
|
||
<i class="fa fa-caret-up text-green"></i>
|
||
4%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3 px-4">
|
||
<div>
|
||
Order status
|
||
</div>
|
||
<div class="py-4 m-0 text-center h1 text-red">738</div>
|
||
<div class="d-flex">
|
||
<small class="text-muted">New order</small>
|
||
<div class="ml-auto">
|
||
<i class="fa fa-caret-down text-red"></i>
|
||
10%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3 px-4">
|
||
<div>
|
||
Income status
|
||
</div>
|
||
<div class="py-4 m-0 text-center h1 text-blue">$3,205</div>
|
||
<div class="d-flex">
|
||
<small class="text-muted">New income</small>
|
||
<div class="ml-auto">
|
||
0%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="card p-3 px-4">
|
||
<div>
|
||
Customer status
|
||
</div>
|
||
<div class="py-4 m-0 text-center h1 text-yellow">118</div>
|
||
<div class="d-flex">
|
||
<small class="text-muted">New users</small>
|
||
<div class="ml-auto">
|
||
<i class="fa fa-caret-up text-green"></i>
|
||
3%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="card ">
|
||
<div class="card-body p-4">
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="stamp stamp-md bg-yellow">
|
||
<i class="fe fe-hard-drive"></i>
|
||
</div>
|
||
</div>
|
||
<div class="col text-right">
|
||
<div class="small text-muted">Capacity</div>
|
||
<div class="h4 m-0">105GB</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="card ">
|
||
<div class="card-body p-4">
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="stamp stamp-md bg-green">
|
||
<i class="fe fe-dollar-sign"></i>
|
||
</div>
|
||
</div>
|
||
<div class="col text-right">
|
||
<div class="small text-muted">Revenue</div>
|
||
<div class="h4 m-0">$1,345</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="card ">
|
||
<div class="card-body p-4">
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="stamp stamp-md bg-red">
|
||
<i class="fe fe-alert-circle"></i>
|
||
</div>
|
||
</div>
|
||
<div class="col text-right">
|
||
<div class="small text-muted">Errors</div>
|
||
<div class="h4 m-0">23</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-3">
|
||
<div class="card ">
|
||
<div class="card-body p-4">
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="stamp stamp-md bg-blue">
|
||
<i class="fe fe-twitter"></i>
|
||
</div>
|
||
</div>
|
||
<div class="col text-right">
|
||
<div class="small text-muted">Followers</div>
|
||
<div class="h4 m-0">1685</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card">
|
||
<div class="card-status bg-blue"></div>
|
||
<div class="card-body">
|
||
<h4 class="mb-3">HTML & CSS lessons</h4>
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 6 Dec 2017</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> Warsaw, Poland</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-status bg-red"></div>
|
||
<div class="card-body">
|
||
<h4 class="mb-3">HTML & CSS lessons</h4>
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 5 Jun 2019</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> London, UK</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-status bg-yellow"></div>
|
||
<div class="card-body">
|
||
<h4 class="mb-3">HTML & CSS lessons</h4>
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 22 Oct 2018</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> Barcelona, Spain</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-status bg-green"></div>
|
||
<div class="card-body">
|
||
<h4 class="mb-3">Smashing Magazine Conference</h4>
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-calendar mr-1 text-muted w-4 text-center"></i> 11 Dec 2018</div>
|
||
</div>
|
||
<div class="col-auto">
|
||
<div class="text-muted-dark"><i class="mdi mdi-map-marker mr-1 text-muted w-4 text-center"></i> Santa Crus, Spain</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-8">
|
||
<form class="card" action="">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Create new classroom</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">Name of Class</label>
|
||
<input type="text" class="form-control" placeholder="e.g. English Class" />
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">Section</label>
|
||
<input type="text" class="form-control" placeholder="e.g. English" />
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">Target Language (L1)</label>
|
||
<select class="form-control custom-select">
|
||
<option value="english">English</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">Target Language (L2)</label>
|
||
<select class="form-control custom-select">
|
||
<option value="french">French</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">Home Country</label>
|
||
<select class="form-control custom-select">
|
||
<option value="french">United States</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">School</label>
|
||
<input type="text" class="form-control" placeholder="Where do you teach?" />
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-12">
|
||
<div class="form-group">
|
||
<label class="form-label">What kind of classroom would you like to connect with?</label>
|
||
<input type="text" class="form-control" placeholder="Where do you teach?" />
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">Which tools would you like to use?</label>
|
||
<select class="form-control custom-select">
|
||
<option value="french">Blogging, Video Chat, Quizzes, +3 Others</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<div class="form-group">
|
||
<label class="form-label">What Age Group are you going to teach?</label>
|
||
<div>
|
||
<label class="custom-control custom-radio">
|
||
<input type="radio" name="classroom-age" class="custom-control-input" checked>
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">K-12</span>
|
||
</label>
|
||
<label class="custom-control custom-radio">
|
||
<input type="radio" name="classroom-age" class="custom-control-input">
|
||
<span class="custom-control-indicator"></span>
|
||
<span class="custom-control-description">Value</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<div class="d-flex align-items-center">
|
||
<a href="javascript:void(0)" class="text-muted">Cancel</a>
|
||
<button type="submit" class="btn btn-primary ml-auto">Create classroom</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">
|
||
Colors
|
||
</h4>
|
||
<div>
|
||
<div class="d-inline-block bg-blue w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-azure w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-indigo w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-purple w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-pink w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-red w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-orange w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-yellow w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-lime w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-green w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-teal w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-cyan w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-gray w-6 h-6 rounded mr-1"></div>
|
||
<div class="d-inline-block bg-gray-dark w-6 h-6 rounded mr-1"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title text-center">December 2017</h3>
|
||
</div>
|
||
<div class="card-body p-3">
|
||
<table class="table table-calendar">
|
||
<tbody>
|
||
<tr>
|
||
<th>Mo</th>
|
||
<th>Tu</th>
|
||
<th>We</th>
|
||
<th>Th</th>
|
||
<th>Fr</th>
|
||
<th>Sa</th>
|
||
<th>Su</th>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">27</td>
|
||
<td class="text-muted">28</td>
|
||
<td class="text-muted">29</td>
|
||
<td class="text-muted">30</td>
|
||
<td>1</td>
|
||
<td>2</td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td><a href="javascript:void(0)" class="table-calendar-link">4</a></td>
|
||
<td>5</td>
|
||
<td><a href="javascript:void(0)" class="table-calendar-link">6</a></td>
|
||
<td>7</td>
|
||
<td>8</td>
|
||
<td>9</td>
|
||
<td>10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>11</td>
|
||
<td><a href="javascript:void(0)" class="table-calendar-link">12</a></td>
|
||
<td>13</td>
|
||
<td>14</td>
|
||
<td><a href="javascript:void(0)">15</a></td>
|
||
<td>16</td>
|
||
<td>17</td>
|
||
</tr>
|
||
<tr>
|
||
<td>18</td>
|
||
<td><a href="javascript:void(0)" class="table-calendar-link">19</a></td>
|
||
<td><a href="javascript:void(0)" class="table-calendar-link">20</a></td>
|
||
<td>21</td>
|
||
<td>22</td>
|
||
<td>23</td>
|
||
<td>24</td>
|
||
</tr>
|
||
<tr>
|
||
<td>25</td>
|
||
<td>26</td>
|
||
<td>27</td>
|
||
<td>28</td>
|
||
<td>29</td>
|
||
<td>30</td>
|
||
<td class="text-muted">1</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<ul class="list-group card-list-group">
|
||
<li class="list-group-item list-group-item-red">
|
||
<a href="javascript:void(0)" class="text-inherit">Cras justo odio</a>
|
||
<span class="float-right text-muted">16 Dec</span>
|
||
</li>
|
||
<li class="list-group-item list-group-item-blue">
|
||
<a href="javascript:void(0)" class="text-inherit">Dapibus ac facilisis in</a>
|
||
<span class="float-right text-muted">22 Dec</span>
|
||
</li>
|
||
<li class="list-group-item list-group-item-red">
|
||
<a href="javascript:void(0)" class="text-inherit">Vestibulum at eros</a>
|
||
<span class="float-right text-muted">29 Dec</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Browsers traffic</h3>
|
||
<div>
|
||
<div id="chart-browsers" style="height: 15rem"></div>
|
||
</div>
|
||
</div>
|
||
<table class="table card-table">
|
||
<tbody>
|
||
<tr>
|
||
<td width="1"><i class="browser browser-chrome"></i></td>
|
||
<td>Google Chrome</td>
|
||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="browser browser-firefox"></i></td>
|
||
<td>Mozila Firefox</td>
|
||
<td class="text-right"><span class="text-muted">15%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="browser browser-safari"></i></td>
|
||
<td>Apple Safari</td>
|
||
<td class="text-right"><span class="text-muted">7%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="browser browser-opera"></i></td>
|
||
<td>Opera mini</td>
|
||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="browser browser-edge"></i></td>
|
||
<td>Microsoft edge</td>
|
||
<td class="text-right"><span class="text-muted">9%</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<script>
|
||
require(['c3', 'jquery'], function (c3) {
|
||
var chart = c3.generate({
|
||
bindto: '#chart-browsers',
|
||
data: {
|
||
columns: [
|
||
['Chrome', 36],
|
||
['Firefox', 5],
|
||
['Safari', 9],
|
||
['Edge', 20],
|
||
['Opera', 30],
|
||
],
|
||
colors: {
|
||
Chrome: '{"hex"=>"#5eba00", "name"=>"Green"}',
|
||
Firefox: '{"hex"=>"#fd9644", "name"=>"Orange"}',
|
||
Safari: '{"hex"=>"#467fcf", "name"=>"Blue"}',
|
||
Edge: '{"hex"=>"#45aaf2", "name"=>"Azure"}',
|
||
Opera: '{"hex"=>"#e74c3c", "name"=>"Red"}',
|
||
},
|
||
type: 'donut'
|
||
},
|
||
legend: {
|
||
show: false
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
<div class="col-md-6 col-lg-4">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Email Statistics</h3>
|
||
<div>
|
||
<div id="chart-emails" style="height: 15rem"></div>
|
||
require(['c3', 'jquery'], function (c3, $) {
|
||
$(document).ready(function() {
|
||
var chart = c3.generate({
|
||
bindto: '#chart-emails',
|
||
padding: {
|
||
bottom: 24,
|
||
top: 0
|
||
},
|
||
data: {
|
||
type: 'donut',
|
||
names: {
|
||
data1: 'Open',
|
||
data2: 'Bounce',
|
||
data3: 'Unsubscribe',
|
||
},
|
||
columns: [
|
||
['data1', 30],
|
||
['data2', 50],
|
||
['data3', 25],
|
||
],
|
||
colors: {
|
||
data1: tabler.colors.blue,
|
||
data2: tabler.colors.red,
|
||
data3: tabler.colors.yellow,
|
||
}
|
||
},
|
||
donut: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
legend: {
|
||
show: true
|
||
},
|
||
});
|
||
});
|
||
});
|
||
</div>
|
||
</div>
|
||
<div class="card-footer">
|
||
<i class="fa fa-clock-o"></i> Campaign sent 2 days ago
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Invoices</h3>
|
||
</div>
|
||
<div class="table-responsive">
|
||
<table class="table card-table table-vcenter text-nowrap">
|
||
<thead>
|
||
<tr>
|
||
<th class="w-1">No.</th>
|
||
<th>Invoice Subject</th>
|
||
<th>Client</th>
|
||
<th>VAT No.</th>
|
||
<th>Created</th>
|
||
<th>Status</th>
|
||
<th>Price</th>
|
||
<th></th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><span class="text-muted">001401</span></td>
|
||
<td><a href="invoice.html" class="text-inherit">Design Works</a></td>
|
||
<td>
|
||
Carlson Limited
|
||
</td>
|
||
<td>
|
||
87956621
|
||
</td>
|
||
<td>
|
||
15 Dec 2017
|
||
</td>
|
||
<td>
|
||
<span class="status-icon bg-success"></span> Paid
|
||
</td>
|
||
<td>$887</td>
|
||
<td class="text-right">
|
||
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<a class="icon" href="javascript:void(0)">
|
||
<i class="fe fe-edit"></i>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="text-muted">001402</span></td>
|
||
<td><a href="invoice.html" class="text-inherit">UX Wireframes</a></td>
|
||
<td>
|
||
Adobe
|
||
</td>
|
||
<td>
|
||
87956421
|
||
</td>
|
||
<td>
|
||
12 Apr 2017
|
||
</td>
|
||
<td>
|
||
<span class="status-icon bg-warning"></span> Pending
|
||
</td>
|
||
<td>$1200</td>
|
||
<td class="text-right">
|
||
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<a class="icon" href="javascript:void(0)">
|
||
<i class="fe fe-edit"></i>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="text-muted">001403</span></td>
|
||
<td><a href="invoice.html" class="text-inherit">New Dashboard</a></td>
|
||
<td>
|
||
Bluewolf
|
||
</td>
|
||
<td>
|
||
87952621
|
||
</td>
|
||
<td>
|
||
23 Oct 2017
|
||
</td>
|
||
<td>
|
||
<span class="status-icon bg-warning"></span> Pending
|
||
</td>
|
||
<td>$534</td>
|
||
<td class="text-right">
|
||
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<a class="icon" href="javascript:void(0)">
|
||
<i class="fe fe-edit"></i>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="text-muted">001404</span></td>
|
||
<td><a href="invoice.html" class="text-inherit">Landing Page</a></td>
|
||
<td>
|
||
Salesforce
|
||
</td>
|
||
<td>
|
||
87953421
|
||
</td>
|
||
<td>
|
||
2 Sep 2017
|
||
</td>
|
||
<td>
|
||
<span class="status-icon bg-secondary"></span> Due in 2 Weeks
|
||
</td>
|
||
<td>$1500</td>
|
||
<td class="text-right">
|
||
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<a class="icon" href="javascript:void(0)">
|
||
<i class="fe fe-edit"></i>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="text-muted">001405</span></td>
|
||
<td><a href="invoice.html" class="text-inherit">Marketing Templates</a></td>
|
||
<td>
|
||
Printic
|
||
</td>
|
||
<td>
|
||
87956621
|
||
</td>
|
||
<td>
|
||
29 Jan 2018
|
||
</td>
|
||
<td>
|
||
<span class="status-icon bg-danger"></span> Paid Today
|
||
</td>
|
||
<td>$648</td>
|
||
<td class="text-right">
|
||
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<a class="icon" href="javascript:void(0)">
|
||
<i class="fe fe-edit"></i>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><span class="text-muted">001406</span></td>
|
||
<td><a href="invoice.html" class="text-inherit">Sales Presentation</a></td>
|
||
<td>
|
||
Tabdaq
|
||
</td>
|
||
<td>
|
||
87956621
|
||
</td>
|
||
<td>
|
||
4 Feb 2018
|
||
</td>
|
||
<td>
|
||
<span class="status-icon bg-secondary"></span> Due in 3 Weeks
|
||
</td>
|
||
<td>$300</td>
|
||
<td class="text-right">
|
||
<a href="javascript:void(0)" class="btn btn-secondary btn-sm">Manage</a>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary btn-sm dropdown-toggle" data-toggle="dropdown">Actions</button>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<a class="icon" href="javascript:void(0)">
|
||
<i class="fe fe-edit"></i>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-tabs">
|
||
<div class="card-tabs-item">
|
||
<div class="row">
|
||
<div class="col-auto align-self-center">
|
||
<div class="chart-circle chart-circle-xs" data-value="0.8" data-thickness="4" data-color="#fca328"></div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="text-muted">Projects</div>
|
||
<div class="h3 m-0">11,164</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-tabs-item">
|
||
<div class="row">
|
||
<div class="col-auto align-self-center">
|
||
<div class="chart-circle chart-circle-xs" data-value="0.2" data-thickness="4" data-color="#7bd235"></div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="text-muted">Calls</div>
|
||
<div class="h3 m-0">986</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-tabs-item">
|
||
<div class="row">
|
||
<div class="col-auto align-self-center">
|
||
<div class="chart-circle chart-circle-xs" data-value="0.45" data-thickness="4" data-color="#76befe"></div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="text-muted">Referrals</div>
|
||
<div class="h3 m-0">1,986</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-tabs-item">
|
||
<div class="row">
|
||
<div class="col-auto align-self-center">
|
||
<div class="chart-circle chart-circle-xs" data-value="0.6" data-thickness="4" data-color="#f90049"></div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="text-muted">Revenue</div>
|
||
<div class="h3 m-0">$640</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="chart-visitors" style="min-height: 18rem"></div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
require(['c3', 'jquery'], function (c3) {
|
||
$(document).ready(function() {
|
||
var chart = c3.generate({
|
||
bindto: '#chart-visitors',
|
||
padding: {
|
||
bottom: 24
|
||
},
|
||
data: {
|
||
x: 'x',
|
||
names: {
|
||
data1: 'Referral',
|
||
data2: 'Calls',
|
||
data3: 'Prospects',
|
||
},
|
||
columns: [
|
||
['x', '2013-07-12', '2013-07-13', '2013-07-14', '2013-07-15', '2013-07-16', '2013-07-17', '2013-07-18', '2013-07-19', '2013-07-20', '2013-07-21', '2013-07-22'],
|
||
['data1', 22, 28, 21, 46, 48, 38, 48, 52, 28, 57, 32],
|
||
['data2', 72, 61, 102, 104, 132, 86, 74, 108, 78, 106, 144],
|
||
['data3', 125, 100, 72, 132, 154, 141, 178, 142, 146, 72, 186],
|
||
],
|
||
types: {
|
||
data1: 'area',
|
||
}
|
||
},
|
||
point: {
|
||
show: false
|
||
},
|
||
legend: {
|
||
position: 'top',
|
||
padding: 16
|
||
},
|
||
transition: {
|
||
duration: 0
|
||
},
|
||
axis: {
|
||
y: {
|
||
tick: {
|
||
fit: true
|
||
}
|
||
},
|
||
x: {
|
||
type: 'timeseries',
|
||
tick: {
|
||
format: '%d %b'
|
||
},
|
||
padding: {
|
||
top: 10,
|
||
bottom: 0
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
y: {
|
||
show: true
|
||
}
|
||
},
|
||
color: {
|
||
pattern: [
|
||
'#fca328',
|
||
'#7bd235',
|
||
'#76befe',
|
||
]
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div>
|
||
<div class="chips">
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/female/16.jpg)"></span> Victoria
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/male/41.jpg)"></span> Nathan
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/female/1.jpg)"></span> Alice
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/female/18.jpg)"></span> Rose
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/male/16.jpg)"></span> Peter
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/male/26.jpg)"></span> Wayne
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/female/7.jpg)"></span> Michelle
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/female/17.jpg)"></span> Debra
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/male/30.jpg)"></span> Phillip
|
||
</a>
|
||
<a href="javascript:void(0)" class="chip">
|
||
<span class="avatar" style="background-image: url(demo/faces/male/32.jpg)"></span> Jack
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<div class="chart-circle" data-value="0.8" data-thickness="8">
|
||
<div class="chart-circle-value">1800 <small>users</small></div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="chart-circle" data-value="0.3" data-thickness="8" data-color="{"hex"=>"#f8b700", "name"=>"Warning"}">
|
||
<div class="chart-circle-value">1350 <small>tasks</small></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="mb-2 status status-danger">Missing Success URL</div>
|
||
<div class="mb-2 status status-warning status-animated">Waiting in queue</div>
|
||
<div class="mb-2 status status-success">Everything is ready</div>
|
||
<div class="status">Unknown status</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Content loader</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="dimmer active">
|
||
<div class="loader"></div>
|
||
<div class="dimmer-content">
|
||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Progress bars</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="progress progress-sm mb-3">
|
||
<div class="progress-bar" style="width: 20%"></div>
|
||
</div>
|
||
<div class="progress progress-sm mb-3">
|
||
<div class="progress-bar bg-danger" style="width: 45%"></div>
|
||
<div class="progress-bar bg-warning" style="width: 30%"></div>
|
||
<div class="progress-bar bg-success" style="width: 12%"></div>
|
||
</div>
|
||
<div class="progress progress-sm mb-3">
|
||
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 63%"></div>
|
||
</div>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar progress-bar-indeterminate"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="demo/photos/ales-krivec-107499-500.jpg" class="card-img-top" alt="">
|
||
<div class="card-body">
|
||
<h4 class="mb-4">Girl & Lake</h4>
|
||
<div class="row mb-4">
|
||
<div class="col-5">
|
||
<i class="mdi mdi-camera mr-1"></i>ISO 200
|
||
</div>
|
||
<div class="col-7">
|
||
<i class="mdi mdi-camera-iris mr-1"></i>1/1000
|
||
</div>
|
||
<div class="col-5">3780 x 2984</div>
|
||
<div class="col-7">9.54 MB</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-5"><strong>Created:</strong></div>
|
||
<div class="col-7">09 Jun 2017 11:32AM</div>
|
||
<div class="col-5"><strong>Updated:</strong></div>
|
||
<div class="col-7">19 Jun 2017 9:43PM</div>
|
||
<div class="col-5"><strong>Bit Depth:</strong></div>
|
||
<div class="col-7">16 bit</div>
|
||
<div class="col-5"><strong>Creator:</strong></div>
|
||
<div class="col-7">Nathan Guerrero</div>
|
||
<div class="col-5"><strong>Used colors:</strong></div>
|
||
<div class="col-7">
|
||
<div class="colors-list">
|
||
<span class="colors-list-item" style="background-color: #646432"></span>
|
||
<span class="colors-list-item" style="background-color: #323232"></span>
|
||
<span class="colors-list-item" style="background-color: #c8c8fa"></span>
|
||
<span class="colors-list-item" style="background-color: #969696"></span>
|
||
<span class="colors-list-item" style="background-color: #6496c8"></span>
|
||
<span class="colors-list-item" style="background-color: #939f5f"></span>
|
||
<span class="colors-list-item" style="background-color: #3264c8"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<div class="row align-items-center mb-4">
|
||
<div class="col-5"><strong>Privacy</strong></div>
|
||
<div class="col-7">
|
||
<select class="custom-select custom-select-sm">
|
||
<option value="">Public</option>
|
||
<option value="">Private</option>
|
||
<option value="">Friends</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="row align-items-center">
|
||
<div class="col-5"><strong>Collaborators</strong></div>
|
||
<div class="col-7">
|
||
<ul class="avatar-list avatar-list-stacked">
|
||
<li class="avatar-list-item">
|
||
<span class="avatar avatar-sm" style="background-image: url(demo/faces/male/41.jpg)"></span>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<span class="avatar avatar-sm" style="background-image: url(demo/faces/female/1.jpg)"></span>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<span class="avatar avatar-sm" style="background-image: url(demo/faces/female/18.jpg)"></span>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<span class="avatar avatar-sm" style="background-image: url(demo/faces/male/16.jpg)"></span>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<span class="avatar avatar-sm" style="background-image: url(demo/faces/male/26.jpg)"></span>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<span class="avatar avatar-sm" style="background-image: url(demo/faces/female/7.jpg)"></span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-tabs">
|
||
<a href="" class="card-tabs-item">
|
||
<h3 class="mb-1">72</h3>
|
||
<div class="text-uppercase text-success font-weight-bold h6 m-0 text-nowrap">Up to date</div>
|
||
</a>
|
||
<a href="" class="card-tabs-item">
|
||
<h3 class="mb-1">25</h3>
|
||
<div class="text-uppercase text-warning font-weight-bold h6 m-0 text-nowrap">Outdated</div>
|
||
</a>
|
||
<a href="" class="card-tabs-item active">
|
||
<h3 class="mb-1">2</h3>
|
||
<div class="text-uppercase text-danger font-weight-bold h6 m-0 text-nowrap">Danger</div>
|
||
</a>
|
||
</div>
|
||
<table class="table card-table">
|
||
<tr>
|
||
<td>
|
||
<strong><a href="javascript:void(0)" class="text-inherit">uglify-js</a></strong>
|
||
</td>
|
||
<td class="text-right">3.0.10</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<strong><a href="javascript:void(0)" class="text-inherit">moment</a></strong>
|
||
</td>
|
||
<td class="text-right">2.18.1</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Germany map</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="map map-square">
|
||
<div class="map-content" id="map-germany-svg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
require(['jquery', 'vector-map', 'vector-map-de'], function(){
|
||
$(document).ready(function(){
|
||
var data = {"DE-BE":11,"DE-ST":43,"DE-RP":4,"DE-BB":65,"DE-NI":4,"DE-MV":24,"DE-TH":45,"DE-BW":7,"DE-HH":45,"DE-SH":9,"DE-NW":8,"DE-SN":27,"DE-HB":42,"DE-SL":85,"DE-BY":24,"DE-HE":66};
|
||
|
||
|
||
var markers = [
|
||
{latLng: [52.50, 13.39], name: 'Berlin'},
|
||
{latLng: [53.56, 10.00], name: 'Hamburg'},
|
||
{latLng: [48.13, 11.56], name: 'Munich'},
|
||
{latLng: [50.95, 6.96], name: 'Cologne'},
|
||
{latLng: [50.11, 8.68], name: 'Frankfurt am Main'},
|
||
{latLng: [48.77, 9.17], name: 'Stuttgart'},
|
||
{latLng: [51.23, 6.78], name: 'Düsseldorf'},
|
||
{latLng: [51.51, 7.46], name: 'Dortmund'},
|
||
{latLng: [51.45, 7.01], name: 'Essen'},
|
||
{latLng: [53.07, 8.80], name: 'Bremen'}
|
||
];
|
||
|
||
|
||
$('#map-germany-svg').vectorMap({
|
||
map: 'de_merc',
|
||
zoomButtons : false,
|
||
zoomOnScroll: false,
|
||
panOnDrag: false,
|
||
backgroundColor: 'transparent',
|
||
markers: markers,
|
||
markerStyle: {
|
||
initial: {
|
||
fill: tabler.colors.blue,
|
||
stroke: '#fff',
|
||
"stroke-width": 1,
|
||
r: 5
|
||
},
|
||
},
|
||
onRegionTipShow: function(e, el, code, f){
|
||
el.html(el.html() + (data[code] ? ': <small>' + data[code]+'</small>' : ''));
|
||
},
|
||
series: {
|
||
regions: [{
|
||
values: data,
|
||
scale: ['#EFF3F6', tabler.colors.blue],
|
||
normalizeFunction: 'polynomial'
|
||
}]
|
||
},
|
||
regionStyle: {
|
||
initial: {
|
||
fill: '#F4F4F4'
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">Portfolio</div>
|
||
</div>
|
||
<table class="table card-table">
|
||
<tbody>
|
||
<tr>
|
||
<td class="font-weight-bold">AAPL</td>
|
||
<td class="text-right">
|
||
115.52
|
||
<span class="text-success">(0.34%) <i class="fa fa-caret-up"></i></span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-weight-bold">GOOG</td>
|
||
<td class="text-right">
|
||
635.3
|
||
<span class="text-danger">(-1.15%) <i class="fa fa-caret-down"></i></span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-weight-bold">MSFT</td>
|
||
<td class="text-right">
|
||
46.74
|
||
<span class="text-success">(0.26%) <i class="fa fa-caret-up"></i></span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-weight-bold">LNKD</td>
|
||
<td class="text-right">
|
||
190.04
|
||
<span class="text-success">(0.28%) <i class="fa fa-caret-up"></i></span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-weight-bold">TSLA</td>
|
||
<td class="text-right">
|
||
181.47
|
||
<span class="text-danger">(-0.23%) <i class="fa fa-caret-down"></i></span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="font-weight-bold">YA</td>
|
||
<td class="text-right">
|
||
37.75
|
||
<span class="text-danger">(-0.74%) <i class="fa fa-caret-down"></i></span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Match results</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row align-items-center gutters-sm">
|
||
<div class="col text-left">
|
||
<img src="assets/images/teams/real-madrid.png" alt="">
|
||
</div>
|
||
<div class="col-auto text-center">
|
||
<div class="display-4 font-weight-bold">2:4</div>
|
||
<div class="text-muted">Today, 20:45</div>
|
||
</div>
|
||
<div class="col text-right">
|
||
<img src="assets/images/teams/fc-barcelona.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<table class="card-table table table-center table-md mt-4">
|
||
<tr>
|
||
<td></td>
|
||
<td class="font-weight-bold">Match stats</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<td>19</td>
|
||
<td>Fouls</td>
|
||
<td>12</td>
|
||
</tr>
|
||
<tr>
|
||
<td>6</td>
|
||
<td>Yellow Cards</td>
|
||
<td>2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>0</td>
|
||
<td>Red Cards</td>
|
||
<td>0</td>
|
||
</tr>
|
||
<tr>
|
||
<td>0</td>
|
||
<td>Offsides</td>
|
||
<td>0</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Corner Kicks</td>
|
||
<td>4</td>
|
||
</tr>
|
||
<tr>
|
||
<td>5</td>
|
||
<td>Saves</td>
|
||
<td>3</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">My Profile</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-auto">
|
||
<span class="avatar avatar-xl" style="background-image: url(demo/faces/female/9.jpg)"></span>
|
||
</div>
|
||
<div class="col">
|
||
<div class="form-group">
|
||
<label class="form-label">Email-Address</label>
|
||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Bio</label>
|
||
<textarea class="form-control" rows="5">Big belly rude boy, million dollar hustler. Unemployed.</textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Email-Address</label>
|
||
<input class="form-control" placeholder="your-email@domain.com"/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Password</label>
|
||
<input type="password" class="form-control" value="password"/>
|
||
</div>
|
||
<div class="form-footer">
|
||
<button class="btn btn-primary btn-block">Save</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-warning">
|
||
<div class="sparkline" data-sparkline="[10.5, 5.1, 14.7, 18.5, 2.5, 59.5, 79.6, 35.3, 70.1, 1.4, 8.1, 30.9, 31.8, 36.4, 28.8, 91.3]" data-sparkline-color="{"hex"=>"#467fcf", "name"=>"Blue"}" data-sparkline-type="bar"></div>
|
||
</div>
|
||
<h3 class="mb-1">$10M <i class="mdi mdi-trending-up text-success"></i></h3>
|
||
<div class="text-muted">Profit for this month</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-warning">
|
||
<div class="sparkline" data-sparkline="[67.8, 57.4, 38.2, 77.9, 36.4, 39.0, 85.9, 24.9, 4.7, 40.6, 8.7, 36.9, 14.2, 53.0, 64.7, 28.2]" data-sparkline-color="{"hex"=>"#e74c3c", "name"=>"Red"}" data-sparkline-type="line"></div>
|
||
</div>
|
||
<h3 class="mb-1">$10M <i class="mdi mdi-trending-up text-success"></i></h3>
|
||
<div class="text-muted">Profit for this month</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Card with options</h4>
|
||
<div class="card-options">
|
||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||
<i class="si si-pencil"></i>
|
||
</button>
|
||
<div class="dropdown card-options-dropdown">
|
||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-bell mr-3"></i>News
|
||
</a>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-envelope mr-3"></i>Messages
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi fugiat fugit numquam quae rerum sed ut! Ad, blanditiis consequatur corporis cumque deserunt dolorem id perferendis recusandae repellendus sed, suscipit vitae.
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-blue">+5%</div>
|
||
<h3 class="mb-1">423</h3>
|
||
<div class="text-muted">Users online</div>
|
||
</div>
|
||
<div class="card-chart-bg">
|
||
<div id="chart-bg-users" style="height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
require(['c3', 'jquery'], function (c3, $) {
|
||
$(document).ready(function() {
|
||
var chart = c3.generate({
|
||
bindto: '#chart-bg-users',
|
||
padding: {
|
||
bottom: -10,
|
||
left: -1,
|
||
right: -1
|
||
},
|
||
data: {
|
||
names: {
|
||
data1: 'Users online'
|
||
},
|
||
columns: [
|
||
['data1', 30, 40, 10, 40, 12, 22, 40]
|
||
],
|
||
type: 'area'
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
transition: {
|
||
duration: 0
|
||
},
|
||
point: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
format: {
|
||
title: function (x) {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
axis: {
|
||
y: {
|
||
padding: {
|
||
bottom: 0,
|
||
},
|
||
show: false,
|
||
tick: {
|
||
outer: false
|
||
}
|
||
},
|
||
x: {
|
||
padding: {
|
||
left: 0,
|
||
right: 0
|
||
},
|
||
show: false
|
||
}
|
||
},
|
||
color: {
|
||
pattern: ['#467fcf']
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">New users</h4>
|
||
<div class="card-options">
|
||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||
<i class="si si-pencil"></i>
|
||
</button>
|
||
<div class="dropdown card-options-dropdown">
|
||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-bell mr-3"></i>News
|
||
</a>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-envelope mr-3"></i>Messages
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-text">
|
||
<ul class="avatar-list">
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/female/1.jpg)">
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/male/40.jpg)">
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/male/7.jpg)">
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/female/11.jpg)">
|
||
<span class="avatar-status bg-green"></span>
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/male/21.jpg)">
|
||
<span class="avatar-status bg-green"></span>
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/male/25.jpg)">
|
||
<span class="avatar-status bg-green"></span>
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/female/5.jpg)">
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/female/17.jpg)">
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/male/40.jpg)">
|
||
<span class="avatar-status bg-green"></span>
|
||
</a>
|
||
</li>
|
||
<li class="avatar-list-item">
|
||
<a href="javascript:void(0)" class="avatar avatar-lg" style="background-image: url(demo/faces/male/33.jpg)">
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-primary">20%</div>
|
||
<h3 class="mb-1">1530</h3>
|
||
<div>Total Leads</div>
|
||
<div class="mt-4">
|
||
<div class="progress progress-xs">
|
||
<div class="progress-bar bg-primary" style="width: 20%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-warning">0%</div>
|
||
<h3 class="mb-1">$8,530</h3>
|
||
<div>Total Payment</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Best Pictures for Today</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div>
|
||
<div class="row img-gallery">
|
||
<div class="col-6">
|
||
<a href="javascript:void(0)" class="d-block link-overlay">
|
||
<img class="d-block img-fluid rounded" src="demo/photos/nathan-anderson-316188-500.jpg" alt="">
|
||
<span class="link-overlay-bg rounded">
|
||
<i class="fa fa-search"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="col-6">
|
||
<a href="javascript:void(0)" class="d-block link-overlay">
|
||
<img class="d-block img-fluid rounded" src="demo/photos/nathan-dumlao-287713-500.jpg" alt="">
|
||
<span class="link-overlay-bg rounded">
|
||
<i class="fa fa-search"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="col-6">
|
||
<a href="javascript:void(0)" class="d-block link-overlay">
|
||
<img class="d-block img-fluid rounded" src="demo/photos/nicolas-picard-208276-500.jpg" alt="">
|
||
<span class="link-overlay-bg rounded">
|
||
<i class="fa fa-search"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="col-6">
|
||
<a href="javascript:void(0)" class="d-block link-overlay">
|
||
<img class="d-block img-fluid rounded" src="demo/photos/oskar-vertetics-53043-500.jpg" alt="">
|
||
<span class="link-overlay-bg rounded">
|
||
<i class="fa fa-search"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-warning"><i class="wi wi-day-cloudy"></i></div>
|
||
<h3 class="mb-1">16°C</h3>
|
||
<div>Warsaw, Poland</div>
|
||
</div>
|
||
</div>
|
||
<div class="card card-aside">
|
||
<div class="card-aside-column" style="background-image: url(demo/photos/wil-stewart-18242-500.jpg)"></div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Card with aside</h4>
|
||
<p>
|
||
Lorem ipsum dolor sit amet.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Card title</h4>
|
||
<h6 class="card-subtitle">Card subtitle</h6>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<div>
|
||
<a href="javascript:void(0)" class="card-link">Card link</a>
|
||
<a href="javascript:void(0)" class="card-link">Another link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="mb-4 text-center">
|
||
<img src="" alt="Apple iPhone 7 128GB" class="img-fluid">
|
||
</div>
|
||
<h4 class="card-title"><a href="javascript:void(0)"></a></h4>
|
||
<div class="card-subtitle">
|
||
</div>
|
||
<div class="mt-5 d-flex align-items-center">
|
||
<div class="product-price">
|
||
<strong></strong>
|
||
</div>
|
||
<div class="ml-auto">
|
||
<a href="javascript:void(0)" class="btn btn-primary"><i class="fe fe-plus"></i> Add to cart</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-success">
|
||
<div class="card-body">
|
||
<h4 class="card-title">
|
||
Success card title
|
||
</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Follow</h4>
|
||
</div>
|
||
<table class="table card-table">
|
||
<tr>
|
||
<td class="align-middle" width="1">
|
||
<span class="avatar avatar-md" style="background-image: url(demo/faces/male/42.jpg)"></span>
|
||
</td>
|
||
<td>
|
||
<strong>Jacob Thornton</strong>
|
||
<small class="d-block text-muted">@fat</small>
|
||
</td>
|
||
<td class="align-middle" width="1">
|
||
<button class="btn btn-outline-primary btn-sm">
|
||
<span class="fa fa-twitter"></span> Follow
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="align-middle" width="1">
|
||
<span class="avatar avatar-md" style="background-image: url(demo/faces/male/2.jpg)"></span>
|
||
</td>
|
||
<td>
|
||
<strong>Dave Gamache</strong>
|
||
<small class="d-block text-muted">@dhg</small>
|
||
</td>
|
||
<td class="align-middle" width="1">
|
||
<button class="btn btn-outline-primary btn-sm">
|
||
<span class="fa fa-twitter"></span> Follow
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="align-middle" width="1">
|
||
<span class="avatar avatar-md" style="background-image: url(demo/faces/female/25.jpg)"></span>
|
||
</td>
|
||
<td>
|
||
<strong>Mark Otto</strong>
|
||
<small class="d-block text-muted">@mdo</small>
|
||
</td>
|
||
<td class="align-middle" width="1">
|
||
<button class="btn btn-outline-primary btn-sm">
|
||
<span class="fa fa-twitter"></span> Follow
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="card card-profile">
|
||
<div class="card-header" style="background-image: url(demo/photos/eberhard-grossgasteiger-311213-500.jpg);"></div>
|
||
<div class="card-body text-center">
|
||
<img class="card-profile-img" src="demo/faces/male/16.jpg">
|
||
<h3 class="mb-3">Peter Richards</h3>
|
||
<p class="mb-4">
|
||
Big belly rude boy, million dollar hustler. Unemployed.
|
||
</p>
|
||
<button class="btn btn-outline-primary btn-sm">
|
||
<span class="fa fa-twitter"></span> Follow
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Special title treatment</h4>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<ul class="nav nav-pills card-header-pills">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="javascript:void(0)">Active</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0)">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Special title treatment</h4>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-danger">
|
||
<div class="card-body">
|
||
<h4 class="card-title">
|
||
Danger card title
|
||
</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-8 col-md-6">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="card-title">Tasks activity</h2>
|
||
<div class="card-options text-muted">
|
||
<select class="custom-select custom-select-sm ml-2" name="" id="">
|
||
<option>This week</option>
|
||
<option>Last week</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="chart-tasks" style="height: 15rem"></div>
|
||
</div>
|
||
<div class="card-tabs card-tabs-bottom">
|
||
<a href="javascript:void(0)" class="card-tabs-item text-center active">
|
||
<h3 class="mb-1">120</h3>
|
||
<div class="text-muted-dark">Tasks completed</div>
|
||
</a>
|
||
<a href="javascript:void(0)" class="card-tabs-item text-center">
|
||
<h3 class="mb-1">25</h3>
|
||
<div class="text-muted-dark">Hours logged</div>
|
||
</a>
|
||
<a href="javascript:void(0)" class="card-tabs-item text-center">
|
||
<h3 class="mb-1">2</h3>
|
||
<div class="text-muted-dark">Invoices sent</div>
|
||
</a>
|
||
<a href="javascript:void(0)" class="card-tabs-item text-center">
|
||
<h3 class="mb-1">2</h3>
|
||
<div class="text-muted-dark">Files uploaded</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
require(['c3', 'jquery'], function(c3, $) {
|
||
$(document).ready(function(){
|
||
var chart = c3.generate({
|
||
bindto: '#chart-tasks', // id of chart wrapper
|
||
data: {
|
||
columns: [
|
||
// each columns data
|
||
['data1', 0, 0, 1, 2, 21, 9, 12, 10, 31, 13, 65, 10, 12, 6, 4, 3, 0],
|
||
['data2', 0, 0, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 0],
|
||
['data3', 0, 0, 1, 0, 2, 0, 1, 0, 2, 3, 0, 2, 3, 2, 1, 0, 0]
|
||
],
|
||
classes: {
|
||
data1: 'filled',
|
||
data2: 'filled',
|
||
data3: 'filled'
|
||
},
|
||
type: 'line', // default type of chart
|
||
groups: [
|
||
[ 'data1', 'data2', 'data3']
|
||
],
|
||
colors: {
|
||
'data1': tabler.colors["blue"],
|
||
'data2': tabler.colors["lime"],
|
||
'data3': tabler.colors["orange"]
|
||
},
|
||
names: {
|
||
// name of each serie
|
||
'data1': 'New',
|
||
'data2': 'Completed',
|
||
'data3': 'Closed'
|
||
}
|
||
},
|
||
axis: {
|
||
y: {
|
||
padding: {
|
||
bottom: 0,
|
||
},
|
||
show: false,
|
||
tick: {
|
||
outer: false
|
||
}
|
||
},
|
||
x: {
|
||
padding: {
|
||
left: 0,
|
||
right: 0
|
||
},
|
||
show: false
|
||
}
|
||
},
|
||
legend: {
|
||
position: 'inset',
|
||
padding: 0,
|
||
inset: {
|
||
anchor: 'top-left',
|
||
x: 20,
|
||
y: 8,
|
||
step: 10
|
||
}
|
||
},
|
||
tooltip: {
|
||
format: {
|
||
title: function (x) {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
padding: {
|
||
bottom: 0,
|
||
left: -1,
|
||
right: -1
|
||
},
|
||
point: {
|
||
show: false
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Visitors map</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="map">
|
||
<div class="map-content" id="map-world-svg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
require(['jquery', 'vector-map', 'vector-map-world'], function(){
|
||
$(document).ready(function(){
|
||
var data = {"AF":16.63,"AL":11.58,"DZ":158.97,"AO":85.81,"AG":1.1,"AR":351.02,"AM":8.83,"AU":1219.72,"AT":366.26,"AZ":52.17,"BS":7.54,"BH":21.73,"BD":105.4,"BB":3.96,"BY":52.89,"BE":461.33,"BZ":1.43,"BJ":6.49,"BT":1.4,"BO":19.18,"BA":16.2,"BW":12.5,"BR":2023.53,"BN":11.96,"BG":44.84,"BF":8.67,"BI":1.47,"KH":11.36,"CM":21.88,"CA":1563.66,"CV":1.57,"CF":2.11,"TD":7.59,"CL":199.18,"CN":5745.13,"CO":283.11,"KM":0.56,"CD":12.6,"CG":11.88,"CR":35.02,"CI":22.38,"HR":59.92,"CY":22.75,"CZ":195.23,"DK":304.56,"DJ":1.14,"DM":0.38,"DO":50.87,"EC":61.49,"EG":216.83,"SV":21.8,"GQ":14.55,"ER":2.25,"EE":19.22,"ET":30.94,"FJ":3.15,"FI":231.98,"FR":2555.44,"GA":12.56,"GM":1.04,"GE":11.23,"DE":3305.9,"GH":18.06,"GR":305.01,"GD":0.65,"GT":40.77,"GN":4.34,"GW":0.83,"GY":2.2,"HT":6.5,"HN":15.34,"HK":226.49,"HU":132.28,"IS":12.77,"IN":1430.02,"ID":695.06,"IR":337.9,"IQ":84.14,"IE":204.14,"IL":201.25,"IT":2036.69,"JM":13.74,"JP":5390.9,"JO":27.13,"KZ":129.76,"KE":32.42,"KI":0.15,"KR":986.26,"UNDEFINED":5.73,"KW":117.32,"KG":4.44,"LA":6.34,"LV":23.39,"LB":39.15,"LS":1.8,"LR":0.98,"LY":77.91,"LT":35.73,"LU":52.43,"MK":9.58,"MG":8.33,"MW":5.04,"MY":218.95,"MV":1.43,"ML":9.08,"MT":7.8,"MR":3.49,"MU":9.43,"MX":1004.04,"MD":5.36,"MN":5.81,"ME":3.88,"MA":91.7,"MZ":10.21,"MM":35.65,"NA":11.45,"NP":15.11,"NL":770.31,"NZ":138,"NI":6.38,"NE":5.6,"NG":206.66,"false":413.51,"OM":53.78,"PK":174.79,"PA":27.2,"PG":8.81,"PY":17.17,"PE":153.55,"PH":189.06,"PL":438.88,"PT":223.7,"QA":126.52,"RO":158.39,"RU":1476.91,"RW":5.69,"WS":0.55,"ST":0.19,"SA":434.44,"SN":12.66,"RS":38.92,"SC":0.92,"SL":1.9,"SG":217.38,"SK":86.26,"SI":46.44,"SB":0.67,"ZA":354.41,"ES":1374.78,"LK":48.24,"KN":0.56,"LC":1,"VC":0.58,"SD":65.93,"SR":3.3,"SZ":3.17,"SE":444.59,"CH":522.44,"SY":59.63,"TW":426.98,"TJ":5.58,"TZ":22.43,"TH":312.61,"TL":0.62,"TG":3.07,"TO":0.3,"TT":21.2,"TN":43.86,"TR":729.05,"TM":0,"UG":17.12,"UA":136.56,"AE":239.65,"GB":2258.57,"US":14624.18,"UY":40.71,"UZ":37.72,"VU":0.72,"VE":285.21,"VN":101.99,"YE":30.02,"ZM":15.69,"ZW":5.5};
|
||
|
||
|
||
var markers = false;
|
||
|
||
|
||
$('#map-world-svg').vectorMap({
|
||
map: 'world_mill',
|
||
zoomButtons : false,
|
||
zoomOnScroll: false,
|
||
panOnDrag: false,
|
||
backgroundColor: 'transparent',
|
||
markers: markers,
|
||
markerStyle: {
|
||
initial: {
|
||
fill: tabler.colors.blue,
|
||
stroke: '#fff',
|
||
"stroke-width": 1,
|
||
r: 5
|
||
},
|
||
},
|
||
onRegionTipShow: function(e, el, code, f){
|
||
el.html(el.html() + (data[code] ? ': <small>' + data[code]+'</small>' : ''));
|
||
},
|
||
series: {
|
||
regions: [{
|
||
values: data,
|
||
scale: ['#EFF3F6', tabler.colors.blue],
|
||
normalizeFunction: 'polynomial'
|
||
}]
|
||
},
|
||
regionStyle: {
|
||
initial: {
|
||
fill: '#F4F4F4'
|
||
}
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="row text-center">
|
||
<div class="col-lg-4">
|
||
<h2 class="mb-1"><i class="mdi mdi-trending-down text-danger"></i> 25563</h2>
|
||
<div class="text-muted-dark">Total tickets</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<h2 class="mb-1"><i class="mdi mdi-trending-up text-success"></i> 6952</h2>
|
||
<div class="text-muted-dark">Pending Tickets</div>
|
||
</div>
|
||
<div class="col-lg-4">
|
||
<h2 class="mb-1"><i class="mdi mdi-trending-neutral text-warning"></i> 18361</h2>
|
||
<div class="text-muted-dark">Closed Tickets</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="media">
|
||
<span class="avatar avatar-xxl mr-5" style="background-image: url(demo/faces/male/21.jpg)"></span>
|
||
<div class="media-body">
|
||
<h4 class="m-0">Juan Hernandez</h4>
|
||
<p class="text-muted mb-0">Webdeveloper</p>
|
||
<ul class="social-links list-inline mb-0 mt-2">
|
||
<li class="list-inline-item">
|
||
<a href="javascript:void(0)" title="Facebook" data-toggle="tooltip"><i class="fa fa-facebook"></i></a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="javascript:void(0)" title="Twitter" data-toggle="tooltip"><i class="fa fa-twitter"></i></a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="javascript:void(0)" title="1234567890" data-toggle="tooltip"><i class="fa fa-phone"></i></a>
|
||
</li>
|
||
<li class="list-inline-item">
|
||
<a href="javascript:void(0)" title="@skypename" data-toggle="tooltip"><i class="fa fa-skype"></i></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Client card</h3>
|
||
<div class="card-options">
|
||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||
<i class="si si-pencil"></i>
|
||
</button>
|
||
<div class="dropdown card-options-dropdown">
|
||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-bell mr-3"></i>News
|
||
</a>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-envelope mr-3"></i>Messages
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-map card-map-placeholder" style="background-image: url(./demo/staticmap.png)"></div>
|
||
<div class="card-body">
|
||
<div class="media mb-5">
|
||
<img class="d-flex mr-5 rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ec911398e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ec911398e%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2213.84375%22%20y%3D%2236.65%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Generic placeholder image">
|
||
<div class="media-body">
|
||
<h5>Axa Global Group</h5>
|
||
<address class="text-muted small">
|
||
1290 Avenua of The Americas<br>
|
||
New York, NY 101040105
|
||
</address>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<div class="h6">Relationship</div>
|
||
<p>Client</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="h6">Business Type</div>
|
||
<p>Insurance Company</p>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="h6">Website</div>
|
||
<p><a href="javascript:void(0)">http://www.axa.com</a></p>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="h6">Office Phone</div>
|
||
<p>+123456789</p>
|
||
</div>
|
||
</div>
|
||
<div class="h6">Description</div>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dignissimos doloribus eum fugiat itaque laboriosam maiores nisi nostrum perspiciatis vero.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<div class="h5">Today Expenses</div>
|
||
<div class="display-4 font-weight-bold mb-4">$8500</div>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar bg-blue" style="width: 54%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-deck">
|
||
<div class="col-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<div class="h5">New feedback</div>
|
||
<div class="display-4 font-weight-bold mb-4">62</div>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar bg-red" style="width: 34%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<div class="h5">Users online</div>
|
||
<div class="display-4 font-weight-bold mb-4">76</div>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar bg-green" style="width: 32%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body text-center">
|
||
<div class="h5">Profit for this month</div>
|
||
<div class="display-4 font-weight-bold mb-4">$65,256</div>
|
||
<div class="progress progress-sm">
|
||
<div class="progress-bar bg-yellow" style="width: 85%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-yellow">-3%</div>
|
||
<h3 class="mb-1">$5255</h3>
|
||
<div class="text-muted">Revenue</div>
|
||
</div>
|
||
<div class="card-chart-bg">
|
||
<div id="chart-bg-revenue" style="height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
require(['c3', 'jquery'], function (c3, $) {
|
||
$(document).ready(function() {
|
||
var chart = c3.generate({
|
||
bindto: '#chart-bg-revenue',
|
||
padding: {
|
||
bottom: -10,
|
||
left: -1,
|
||
right: -1
|
||
},
|
||
data: {
|
||
names: {
|
||
data1: 'Users online'
|
||
},
|
||
columns: [
|
||
['data1', 30, 40, 10, 40, 12, 22, 40]
|
||
],
|
||
type: 'area'
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
transition: {
|
||
duration: 0
|
||
},
|
||
point: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
format: {
|
||
title: function (x) {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
axis: {
|
||
y: {
|
||
padding: {
|
||
bottom: 0,
|
||
},
|
||
show: false,
|
||
tick: {
|
||
outer: false
|
||
}
|
||
},
|
||
x: {
|
||
padding: {
|
||
left: 0,
|
||
right: 0
|
||
},
|
||
show: false
|
||
}
|
||
},
|
||
color: {
|
||
pattern: ['#f1c40f']
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">
|
||
Server params
|
||
</div>
|
||
<div class="card-options">
|
||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||
<i class="mdi mdi-lead-pencil"></i>
|
||
</button>
|
||
<div class="dropdown card-options-dropdown">
|
||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="mdi mdi-dots-horizontal"></i></button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-bell mr-3"></i>News
|
||
</a>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-envelope mr-3"></i>Messages
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="card-text">
|
||
<div class="mt-0">
|
||
<small class="float-right text-muted">10/200 GB</small>
|
||
<h5>Memory</h5>
|
||
<div class="progress progress-sm">
|
||
<div style="width: 60%;" class="progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5">
|
||
<small class="float-right text-muted">20 GB</small>
|
||
<h5>Bandwidth</h5>
|
||
<div class="progress progress-sm">
|
||
<div style="width: 50%;" class="progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5">
|
||
<small class="float-right text-muted">73%</small>
|
||
<h5>Activity</h5>
|
||
<div class="progress progress-sm">
|
||
<div style="width: 40%;" class="progress-bar"></div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-5">
|
||
<small class="float-right text-muted">400 GB</small>
|
||
<h5>FTP</h5>
|
||
<div class="progress progress-sm">
|
||
<div style="width: 80%;" class="progress-bar bg-danger"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="card-value float-right text-danger">-1%</div>
|
||
<h3 class="mb-1">935</h3>
|
||
<div>Total Sales</div>
|
||
<div class="mt-4">
|
||
<div class="progress progress-xs">
|
||
<div class="progress-bar bg-danger" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-success">
|
||
<div class="card-body text-white">
|
||
<div class="card-value float-right">60%</div>
|
||
<h3 class="mb-1">5324</h3>
|
||
<div>New Orders</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="demo/photos/dino-reichmuth-84359-500.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Card title</h4>
|
||
<div class="card-subtitle">Lorem ipsum dolor sit amet.</div>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">
|
||
Card with header content
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
|
||
</div>
|
||
</div>
|
||
<div class="card border-danger">
|
||
<div class="card-body text-danger">
|
||
<h4 class="card-title">
|
||
Danger card title
|
||
</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores atque beatae commodi, deserunt dolores eligendi esse est harum maxime nesciunt non nostrum quibusdam quisquam ratione repudiandae saepe soluta sunt.
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-warning">
|
||
<div class="card-body">
|
||
<h4 class="card-title">
|
||
Warning card title
|
||
</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Top Countries</h4>
|
||
</div>
|
||
<table class="table card-table">
|
||
<tbody>
|
||
<tr>
|
||
<td width="1"><i class="flag flag-us"></i></td>
|
||
<td>
|
||
USA
|
||
<div class="progress progress-xs mt-2">
|
||
<div class="progress-bar" style="width: 78%"></div>
|
||
</div>
|
||
</td>
|
||
<td width="1" class="text-right"><span class="text-muted">$6425</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="flag flag-pl"></i></td>
|
||
<td>
|
||
Poland
|
||
<div class="progress progress-xs mt-2">
|
||
<div class="progress-bar" style="width: 62%"></div>
|
||
</div>
|
||
</td>
|
||
<td class="text-right"><span class="text-muted">$5582</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="flag flag-de"></i></td>
|
||
<td>
|
||
Germany
|
||
<div class="progress progress-xs mt-2">
|
||
<div class="progress-bar" style="width: 48%"></div>
|
||
</div>
|
||
</td>
|
||
<td class="text-right"><span class="text-muted">$4587</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="flag flag-ru"></i></td>
|
||
<td>
|
||
Russia
|
||
<div class="progress progress-xs mt-2">
|
||
<div class="progress-bar" style="width: 35%"></div>
|
||
</div>
|
||
</td>
|
||
<td class="text-right"><span class="text-muted">$2520</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="flag flag-au"></i></td>
|
||
<td>
|
||
Australia
|
||
<div class="progress progress-xs mt-2">
|
||
<div class="progress-bar" style="width: 30%"></div>
|
||
</div>
|
||
</td>
|
||
<td class="text-right"><span class="text-muted">$1899</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="flag flag-gb"></i></td>
|
||
<td>
|
||
Great Britain
|
||
<div class="progress progress-xs mt-2">
|
||
<div class="progress-bar" style="width: 22%"></div>
|
||
</div>
|
||
</td>
|
||
<td class="text-right"><span class="text-muted">$1056</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="demo/photos/aneta-ivanova-776-500.jpg" alt="Card image cap">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
</div>
|
||
<ul class="list-group card-list-group">
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||
<li class="list-group-item">Vestibulum at eros</li>
|
||
</ul>
|
||
<div class="card-body">
|
||
<a href="javascript:void(0)" class="card-link">Card link</a>
|
||
<a href="javascript:void(0)" class="card-link">Another link</a>
|
||
</div>
|
||
</div>
|
||
<form class="card" action="" method="post">
|
||
<div class="card-body p-6">
|
||
<div class="card-title">Create new account</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Name</label>
|
||
<input type="text" class="form-control" placeholder="Enter name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Email address</label>
|
||
<input type="email" class="form-control" placeholder="Enter email">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Password</label>
|
||
<input type="password" class="form-control" placeholder="Password">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" />
|
||
<span class="custom-control-label">Agree the <a href="terms.html">terms and policy</a></span>
|
||
</label>
|
||
</div>
|
||
<div class="form-footer">
|
||
<button type="submit" class="btn btn-primary btn-block">Create new account</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="text-center text-muted">
|
||
Already have account? <a href="./login.html">Sign in</a>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form action="">
|
||
<div class="form-group">
|
||
<label class="form-label">Search</label>
|
||
<input type="text" class="form-control"/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Ratios</label>
|
||
<div class="row align-items-center">
|
||
<div class="col">
|
||
<input type="range" class="form-control custom-range" step="5" min="0" max="50">
|
||
</div>
|
||
<div class="col-auto">
|
||
<input type="number" class="form-control w-8" value="45"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Intensity</label>
|
||
<div class="selectgroup w-100">
|
||
<label class="selectgroup-item">
|
||
<input type="radio" name="intensity" value="low" class="selectgroup-input" checked>
|
||
<span class="selectgroup-button">Low</span>
|
||
</label>
|
||
<label class="selectgroup-item">
|
||
<input type="radio" name="intensity" value="medium" class="selectgroup-input">
|
||
<span class="selectgroup-button">Medium</span>
|
||
</label>
|
||
<label class="selectgroup-item">
|
||
<input type="radio" name="intensity" value="high" class="selectgroup-input">
|
||
<span class="selectgroup-button">High</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Size</label>
|
||
<div class="selectgroup w-100">
|
||
<label class="selectgroup-item">
|
||
<input type="checkbox" name="value" value="50" class="selectgroup-input" checked>
|
||
<span class="selectgroup-button">S</span>
|
||
</label>
|
||
<label class="selectgroup-item">
|
||
<input type="checkbox" name="value" value="100" class="selectgroup-input">
|
||
<span class="selectgroup-button">M</span>
|
||
</label>
|
||
<label class="selectgroup-item">
|
||
<input type="checkbox" name="value" value="150" class="selectgroup-input">
|
||
<span class="selectgroup-button">L</span>
|
||
</label>
|
||
<label class="selectgroup-item">
|
||
<input type="checkbox" name="value" value="200" class="selectgroup-input">
|
||
<span class="selectgroup-button">XL</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Company</label>
|
||
<input type="text" class="form-control" placeholder="e.g. ACME Technology"/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Add to list</label>
|
||
<select class="form-control custom-select">
|
||
<option>Base</option>
|
||
<option>Custom</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-footer text-right">
|
||
<button type="submit" class="btn btn-primary">Search</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="alert alert-warning alert-dismissible show mb-5" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">
|
||
Finance Stats
|
||
</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<ul class="list-unstyled">
|
||
<li>
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<div class="h5 mb-0">
|
||
IPO Margin
|
||
</div>
|
||
<span class="small text-muted">Awerage IPO Margin</span>
|
||
</div>
|
||
<div class="col text-right">
|
||
<span class="h4 text-primary font-weight-bold">+24%</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="mt-4">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<div class="h5 mb-0">
|
||
Payments
|
||
</div>
|
||
<span class="small text-muted">Yearly Expenses</span>
|
||
</div>
|
||
<div class="col text-right">
|
||
<span class="h4 text-info font-weight-bold">+$560,800</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="mt-4">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<div class="h5 mb-0">
|
||
Logistics
|
||
</div>
|
||
<span class="small text-muted">Overall Regional Logistics</span>
|
||
</div>
|
||
<div class="col text-right">
|
||
<span class="h4 text-warning font-weight-bold">-10%</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="mt-4">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<div class="h5 mb-0">
|
||
Expenses
|
||
</div>
|
||
<span class="small text-muted">Balance</span>
|
||
</div>
|
||
<div class="col text-right">
|
||
<span class="h4 text-danger font-weight-bold">$345,000</span>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">
|
||
Sales Stats
|
||
</h3>
|
||
</div>
|
||
<table class="table card-table">
|
||
<tr>
|
||
<th>
|
||
Scheduled
|
||
</th>
|
||
<th>
|
||
Count
|
||
</th>
|
||
<th class="text-right">
|
||
Amount
|
||
</th>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">
|
||
13.06.2017
|
||
</td>
|
||
<td>
|
||
67
|
||
</td>
|
||
<td class="text-right">
|
||
$14,740
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">
|
||
28.02.2017
|
||
</td>
|
||
<td>
|
||
120
|
||
</td>
|
||
<td class="text-right">
|
||
$11,002
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">
|
||
06.03.2017
|
||
</td>
|
||
<td>
|
||
32
|
||
</td>
|
||
<td class="text-right">
|
||
$10,900
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">
|
||
21.10.2017
|
||
</td>
|
||
<td>
|
||
130
|
||
</td>
|
||
<td class="text-right">
|
||
$14,740
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">
|
||
02.01.2017
|
||
</td>
|
||
<td>
|
||
5
|
||
</td>
|
||
<td class="text-right">
|
||
$18,540
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">
|
||
06.03.2017
|
||
</td>
|
||
<td>
|
||
32
|
||
</td>
|
||
<td class="text-right">
|
||
$10,900
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-muted">
|
||
31.12.2017
|
||
</td>
|
||
<td>
|
||
201
|
||
</td>
|
||
<td class="text-right">
|
||
$25,609
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
<div class="card-footer">
|
||
<div class="text-right">
|
||
<button type="button" class="btn btn-primary">
|
||
<i class="mdi mdi-export mr-2"></i>Export data
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Pie chart</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="chart-pie" style="height: 250px"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="card-title">Radar chart</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<canvas id="canvas1" height="200"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h3 class="card-title">Private message</h3>
|
||
<div class="card-subtitle"> Send private message to Olivia Wenscombe </div>
|
||
<form action="">
|
||
<div class="form-group">
|
||
<label class="form-label">Subject</label>
|
||
<input placeholder="Message subject" class="form-control" type="email">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Message</label>
|
||
<textarea rows="3" placeholder="Your message" class="form-control"></textarea>
|
||
</div>
|
||
<button class="btn btn-primary btn-block">Send</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-dark text-white">
|
||
<img class="card-img" src="demo/photos/teddy-kelley-109202-500.jpg" alt="Card image">
|
||
<div class="card-img-overlay justify-content-end">
|
||
<h4 class="card-title">Card title</h4>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h4 class="card-title">Browser Stats</h4>
|
||
</div>
|
||
<table class="table card-table">
|
||
<tr>
|
||
<td width="1"><i class="fa fa-chrome text-muted"></i></td>
|
||
<td>Google Chrome</td>
|
||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="fa fa-firefox text-muted"></i></td>
|
||
<td>Mozila Firefox</td>
|
||
<td class="text-right"><span class="text-muted">15%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="fa fa-safari text-muted"></i></td>
|
||
<td>Apple Safari</td>
|
||
<td class="text-right"><span class="text-muted">7%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="fa fa-internet-explorer text-muted"></i></td>
|
||
<td>Internet Explorer</td>
|
||
<td class="text-right"><span class="text-muted">9%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="fa fa-opera text-muted"></i></td>
|
||
<td>Opera mini</td>
|
||
<td class="text-right"><span class="text-muted">23%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><i class="fa fa-edge text-muted"></i></td>
|
||
<td>Microsoft edge</td>
|
||
<td class="text-right"><span class="text-muted">9%</span></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="card text-white bg-dark">
|
||
<div class="card-body">
|
||
<h4 class="card-title">
|
||
Dark card title
|
||
</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid architecto commodi dolorum nam odio perspiciatis quo sapiente vitae voluptatem? Accusamus beatae distinctio dolores laborum nobis, obcaecati odio quia reprehenderit.
|
||
</div>
|
||
<div class="card-footer">
|
||
Card with footer content
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<header class="card-header">
|
||
<h4 class="card-title">Feeds</h4>
|
||
<div class="card-options">
|
||
<button type="button" class="btn btn-option" data-toggle="tooltip" title="Edit">
|
||
<i class="si si-pencil"></i>
|
||
</button>
|
||
<div class="dropdown card-options-dropdown">
|
||
<button type="button" class="btn btn-option dropdown-toggle" data-toggle="dropdown"><i class="si si-options"></i></button>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-bell mr-3"></i>News
|
||
</a>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-envelope mr-3"></i>Messages
|
||
</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="javascript:void(0)">
|
||
<i class="si si-pencil mr-3"></i>Edit Profile
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="card-body">
|
||
<div class="media mb-3">
|
||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url(demo/faces/male/16.jpg)"></span></div>
|
||
<div class="media-body">
|
||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Some of the fantastic things people have had to say about Ooooh</a></h5>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="media mb-3">
|
||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url(demo/faces/male/26.jpg)"></span></div>
|
||
<div class="media-body">
|
||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Here are just some of the magazine reviews we have had</a></h5>
|
||
<small class="text-muted">1 day ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="media mb-3">
|
||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url(demo/faces/female/7.jpg)"></span></div>
|
||
<div class="media-body">
|
||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">Lorem ipsum dolor amet, consectetur adipisicing elit.</a></h5>
|
||
<small class="text-muted">2 days ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="media mb-3">
|
||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url(demo/faces/female/17.jpg)"></span></div>
|
||
<div class="media-body">
|
||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">“It’s just brilliant. I will recommend it to everyone!”</a></h5>
|
||
<small class="text-muted">2 mins ago</small>
|
||
</div>
|
||
</div>
|
||
<div class="media">
|
||
<div class="media-object mr-4"><span class="avatar avatar-md" style="background-image: url(demo/faces/male/30.jpg)"></span></div>
|
||
<div class="media-body">
|
||
<h5 class="mb-0"><a href="javascript:void(0)" class="text-color">John has just started working on the project</a></h5>
|
||
<small class="text-muted">right now</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img class="card-img-top" src="demo/photos/artem-sapegin-229391-500.jpg" alt="Card image cap">
|
||
<ul class="list-group card-list-group">
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||
<li class="list-group-item">Vestibulum at eros</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<ul class="nav nav-tabs card-header-tabs">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="javascript:void(0)">Active</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0)">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Special title treatment</h4>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||
<a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-primary">
|
||
<div class="card-body">
|
||
<h4 class="card-title">
|
||
Primary card title
|
||
</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||
</div>
|
||
</div>
|
||
<form class="card" action="" method="post">
|
||
<div class="card-body p-6">
|
||
<div class="card-title">Login to your account</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
Password
|
||
<a href="./forgot-password.html" class="float-right small">I forgot password</a>
|
||
</label>
|
||
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" />
|
||
<span class="custom-control-label">Remember me</span>
|
||
</label>
|
||
</div>
|
||
<div class="form-footer">
|
||
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="text-center text-muted">
|
||
Don't have account yet? <a href="./register.html">Sign up</a>
|
||
</div>
|
||
<form class="card" action="" method="post">
|
||
<div class="card-body p-6">
|
||
<div class="card-title">Forgot password</div>
|
||
<p class="text-muted">Enter your email address and your password will be reset and emailed to you.</p>
|
||
<div class="form-group">
|
||
<label class="form-label" for="exampleInputEmail1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
|
||
</div>
|
||
<div class="form-footer">
|
||
<button type="submit" class="btn btn-primary btn-block">Send me new password</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="text-center text-muted">
|
||
Forget it, <a href="./login.html">send me back</a> to the sign in screen.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<div class="row">
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="#">First link</a></li>
|
||
<li><a href="#">Second link</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="#">Third link</a></li>
|
||
<li><a href="#">Fourth link</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="#">Fifth link</a></li>
|
||
<li><a href="#">Sixth link</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-6 col-md-3">
|
||
<ul class="list-unstyled mb-0">
|
||
<li><a href="#">Other link</a></li>
|
||
<li><a href="#">Last link</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 mt-4 mt-lg-0">
|
||
Premium and Open Source dashboard template with responsive and high quality UI. For Free!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="row align-items-center flex-row-reverse">
|
||
<div class="col-auto ml-lg-auto">
|
||
<div class="row align-items-center">
|
||
<div class="col-auto">
|
||
<ul class="list-inline list-inline-dots mb-0">
|
||
<li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
|
||
<li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-auto">
|
||
<a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
|
||
Copyright © 2018 <a href=".">Tabler</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html> |