Added and modified statistic.html

main/templates/statistic.html

@@ -9,6 +9,42 @@
   <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;
@@ -26,6 +62,20 @@
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -53,19 +103,19 @@
 </header>
 <main class="pt-5">
   <div class="mt-5">
-    <div class="container-fluid" style="font-size:2.5rem">
+    <div class="container-fluid" style="font-size:2rem">
-      <form class="row g-3">
+      <form class="row g-3" method="post">
         <div class="col-auto">
-          <input type="text"readonly class="form-control-plaintext text-primary" id="staticEmail2"
+          <p class="p">Введите email пользователя</p>
-                 value="Введите email пользователя">
         </div>
-        <div class="col-auto">
+        <div class="col-auto mt-4">
-          <input type="email" class="form-control" id="inputEmail" placeholder="example@ngenix.ru">
+          <input type="email" class="form-control" style="background-color:#f2f2f2;" id="inputEmail"
+                 placeholder="example@ngenix.ru">
         </div>
       </form>
-      <form class="row g-3 mt-2">
+      <form class="row g-3 mt-4" method="post">
         <div class="col-auto">
-          <p class="p text-primary"> Выберите интервалы времени работы</p>
+          <p class="p"> Выберите интервалы времени работы</p>
         </div>
         <div class="col-auto">
           <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off">
@@ -74,14 +124,82 @@
           <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>