index.html

   1 <!--
   2 ***********************************************************************
   3  * Title: ObsCalc
   4  * Description: An Obstetric Calculator
   5  * Author: Agnibho Mondal
   6  * Website: http://code.agnibho.com
   7  **********************************************************************
   8    Copyright (c) 2016 Agnibho Mondal
   9    All rights reserved
  10  **********************************************************************
  11    This file is part of ObsCalc.
  12
  13    ObsCalc is free software: you can redistribute it and/or modify
  14    it under the terms of the GNU General Public License as published by
  15    the Free Software Foundation, either version 3 of the License, or
  16    (at your option) any later version.
  17
  18    ObsCalc is distributed in the hope that it will be useful,
  19    but WITHOUT ANY WARRANTY; without even the implied warranty of
  20    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  21    GNU General Public License for more details.
  22
  23    You should have received a copy of the GNU General Public License
  24    along with Obscalc. If not, see <http://www.gnu.org/licenses/>.
  25 ***********************************************************************
  26 -->
  27 <!DOCTYPE html>
  28 <html>
  29     <head>
  30         <title>ObsCalc</title>
  31         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  32         <link href="bootstrap.min.css" rel="stylesheet">
  33         <link href="datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet">
  34         <link href="custom.css" rel="stylesheet">
  35         <script src="jquery.min.js"></script>
  36         <script src="bootstrap.min.js"></script>
  37         <script src="validator.min.js"></script>
  38         <script src="vue.js"></script>
  39         <script src="moment.js"></script>
  40         <script src="datepicker/js/bootstrap-datepicker.min.js"></script>
  41     </head>
  42     <body>
  43         <div class="container">
  44             <div class="text-primary">
  45                 <div class="jumbotron">
  46                     <h1>ObsCalc</h1>
  47                     <h2>Obstetric Calculator</h2>
  48                 </div>
  49             </div>
  50             <div class="row" id="app">
  51                 <div class="col-sm-6">
  52                     <div class="panel panel-default">
  53                         <div class="panel-heading">
  54                             <p><strong>Calculate by Date</strong></p>
  55                         </div>
  56                         <div class="panel panel-body">
  57                             <ul class="nav nav-tabs">
  58                                 <li class="active"><a href="#panel-lmp" aria-controls="panel-lmp" data-toggle="tab">Enter L.M.P.</a></li>
  59                                 <li><a href="#panel-edd" aria-controls="panel-edd" data-toggle="tab">Enter E.D.D.</a></li>
  60                             </ul>
  61                             <div class="tab-content">
  62                                 <div class="panel panel-default tab-pane active" id="panel-lmp">
  63                                     <div class="panel-body">
  64                                         <form data-toggle="validator">
  65                                             <div class="form-group">
  66                                                 <label>Enter L.M.P.:</label>
  67                                                 <div class="row">
  68                                                     <div class="col-sm-8">
  69                                                         <div class="form-group"><input class="form-control datepicker" type="date" v-model="lmpDt" placeholder="YYYY-MM-DD" autocomplete="off" require v-on:input="eddUpdt"><div class="help-block with-errors"></div></div>
  70                                                     </div>
  71                                                     <div class="col-sm-4">
  72                                                         <input type="reset" class="btn">
  73                                                     </div>
  74                                                 </div>
  75                                             </div>
  76                                         </form>
  77                                     </div><!-- body -->
  78                                 </div><!-- panel -->
  79                                 <div class="panel panel-default tab-pane" id="panel-edd">
  80                                     <div class="panel-body">
  81                                         <form data-toggle="validator">
  82                                             <div class="form-group">
  83                                                 <label>Enter E.D.D.:</label>
  84                                                 <div class="row">
  85                                                     <div class="col-sm-8">
  86                                                         <div class="form-group"><input class="form-control datepicker" type="date" v-model="eddDt" placeholder="YYYY-MM-DD" autocomplete="off" require  v-on:input="lmpUpdt"><div class="help-block with-errors"></div></div>
  87                                                     </div>
  88                                                     <div class="col-sm-4">
  89                                                         <input type="reset" class="btn">
  90                                                     </div>
  91                                                 </div>
  92                                             </div>
  93                                         </form>
  94                                     </div><!-- body -->
  95                                 </div><!-- panel -->
  96                             </div><!-- tab -->
  97                             <table class="table table-bordered" v-if="lmpVal">
  98                                 <tr class="active"><th>L.M.P.</th><th>E.D.D.</th></tr>
  99                                 <tr><th vbind="lmpDt">{{lmpVal}}</th><th>{{eddVal}}</th></tr>
 100                             </table>
 101                             <hr>
 102                             <table class="table" v-if="dateMat">
 103                                 <tr><th class="active">Maturation by Date at present</th><th>{{dateMat}}</th></tr>
 104                             </table>
 105                         </div>
 106                     </div>
 107                 </div><!-- col -->
 108                 <div class="col-sm-6">
 109                     <div class="panel panel-default tab-pane" id="panel-usg">
 110                         <div class="panel-heading">
 111                             <p><strong>Calculate by U.S.G.</strong></p>
 112                         </div>
 113                         <div class="panel-body">
 114                             <form data-toggle="validator">
 115                                 <div class="form-group">
 116                                     <label>Enter U.S.G. date:</label>
 117                                     <div class="form-group"><input class="form-control datepicker" type="date" v-model="usgDt" placeholder="YYYY-MM-DD" require autocomplete="off"><div class="help-block with-errors"></div></div>
 118                                 </div>
 119                                 <div class="form-group">
 120                                     <label>Enter U.S.G. Maturation:</label>
 121                                     <div class="row">
 122                                         <div class="col-md-6 form-group"><input class="form-control" type="number" min="0" max="52" v-model.number="usgWk" placeholder="Weeks" required autocomplete="off"><div class="help-block with-errors"></div></div>
 123                                         <div class="col-md-6 form-group"><input class="form-control" type="number" min="0" max="6" v-model.number="usgDy" placeholder="Days" required autocomplete="off"><div class="help-block with-errors"></div></div>
 124                                     </div>
 125                                 </div>
 126                                 <input type="reset" class="btn">
 127                             </form>
 128                             <br>
 129                             <table class="table" v-if="usgMat">
 130                                 <tr><th class="active">Maturation by U.S.G. at present</th><th>{{usgMat}}</th></tr>
 131                             </table>
 132                         </div><!-- body -->
 133                     </div><!-- panel -->
 134                 </div>
 135             </div>
 136             <div class="alert alert-info">
 137                 <h3>Copyright &copy; 2016<span id="copyright"></span> Agnibho Mondal</h3>
 138                 <h4><a href="http://www.agnibho.com" style="text-decoration:none;color:inherit">www.agnibho.com</a></h4>
 139             </div>
 140             <script>
 141              $(document).ready(function(){
 142                  if(new Date().getFullYear()>2016){
 143                      $("#copyright").text("-"+new Date().getFullYear());
 144                  }
 145              });
 146             </script>
 147         </div>
 148         <script>
 149          $(document).ready(function(){
 150              if(navigator.userAgent.indexOf("Firefox")!=-1){
 151                  $(".datepicker").datepicker({
 152                      format:"yyyy-mm-dd",
 153                      autoclose:true
 154                  }).on("changeDate", function(){
 155                      this.dispatchEvent(new Event("input"));
 156                  });
 157              }
 158              $("input[type='reset']").on("click", function(e){
 159                  this.form.reset();
 160                  $(this.form).find("input, select, textarea").each(function(){
 161                      this.dispatchEvent(new Event("input"));
 162                  });
 163              });
 164          });
 165         </script>
 166         <script src="app.js"></script>
 167     </body>
 168 </html>