208 lines
5.6 KiB
HTML
208 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="ru" class="h-100">
|
|
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
<title>Statistic</title>
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
|
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
|
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
|
|
|
|
<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
|
|
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css"/>
|
|
|
|
<!-- Bootstrap Date-Picker Plugin -->
|
|
<script type="text/javascript"
|
|
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
|
|
<link rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
var date_input=$('input[name="date"]'); //our date input has the name "date"
|
|
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
|
|
var options={
|
|
format: 'mm/dd/yyyy',
|
|
container: container,
|
|
todayHighlight: true,
|
|
autoclose: true,
|
|
};
|
|
$ lessc build/build_standalone.less datepicker.css
|
|
$('.datepicker').datepicker();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
<style>
|
|
.bd-placeholder-img {
|
|
font-size: 1.125rem;
|
|
text-anchor: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.bd-placeholder-img-lg {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<!-- Fixed navbar -->
|
|
<nav
|
|
class="navbar navbar-expand-md fixed-top"
|
|
>
|
|
<ul
|
|
class="navbar-nav me-auto mb-2 mb-md-0 justify-content-between fixed-top"
|
|
style="background-color:#f2f2f2;"
|
|
>
|
|
<div class="mx-4">
|
|
<h1>Logo</h1>
|
|
</div>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main class="pt-5">
|
|
<div class="mt-5">
|
|
<div class="container-fluid" style="font-size:2rem">
|
|
<form class="row g-3" method="post">
|
|
<div class="col-auto">
|
|
<p class="p">Введите email пользователя</p>
|
|
</div>
|
|
<div class="col-auto mt-4">
|
|
<input type="email" class="form-control" style="background-color:#f2f2f2;" id="inputEmail"
|
|
placeholder="example@ngenix.ru">
|
|
</div>
|
|
</form>
|
|
<form class="row g-3 mt-4" method="post">
|
|
<div class="col-auto">
|
|
<p class="p"> Выберите интервалы времени работы</p>
|
|
</div>
|
|
<div class="col-auto">
|
|
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off">
|
|
<label class="btn btn-secondary text-primary bg-white" for="option1">Дни</label>
|
|
|
|
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
|
|
<label class="btn btn-secondary text-primary bg-white" for="option2">Месяцы</label>
|
|
</div>
|
|
</form>
|
|
<form class="row g-3 mt-4" method="post">
|
|
<div class="col-auto">
|
|
<p class="p">Начало статистики</p>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class='col-sm-6'>
|
|
<div class="form-group mt-2" style="width: 130px;">
|
|
<div class="input-group date" data-provide="datepicker">
|
|
<input type="text" style="background-color:#f2f2f2;" placeholder="MM/DD/YYYY" class="form-control">
|
|
<div class="input-group-addon">
|
|
<span class="glyphicon glyphicon-th"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<p class="pull-right">Начало статистики</p>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<div class="form-group mt-2" style="width: 130px;"> <!-- Date input -->
|
|
<div class="input-group date" data-provide="datepicker">
|
|
<input type="text" style="background-color:#f2f2f2;" placeholder="MM/DD/YYYY" class="form-control">
|
|
<div class="input-group-addon">
|
|
<span class="glyphicon glyphicon-th"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="form-row text-center">
|
|
<div class="col-12">
|
|
<button type="submit" class="btn btn-primary bg-white text-primary">Посмотреть статистику</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<div class="container-fluid">
|
|
<table class="table table-bordered text-center text-secondary mt-5" style="background-color:#f2f2f2;">
|
|
<thead>
|
|
<tr>
|
|
<td scope="col">Пользователи/Даты</td>
|
|
<td scope="col">05/01/2021-01/02/2021</td>
|
|
<td scope="col">01/02/2021-28/02/2021</td>
|
|
<td scope="col">01/03/2021-05/03/2021</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr>
|
|
<td>keanu@gmail.com</td>
|
|
<td>15</td>
|
|
<td>21</td>
|
|
<td>1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>vadim@mail.ru</td>
|
|
<td>2</td>
|
|
<td>15</td>
|
|
<td>3</td>
|
|
</tr>
|
|
<tr>
|
|
<td>example@ngenix.ru</td>
|
|
<td>0</td>
|
|
<td>19</td>
|
|
<td>4</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|