added add diagnosis, add organism, add user, login, index, profile ed…

…it pages-- needs styling
dmd-web-and-mobile · Dec 8, 2016 · 9300fc9 · 9300fc9
1 parent 8a317b4
commit 9300fc9
Show file tree

Hide file tree

Showing 12 changed files with 566 additions and 128 deletions.
diff --git a/add-diagnosis.html b/add-diagnosis.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>ABXinRLS</title>
+
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/main.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+
+    <div class="container">
+        <a href="index.html"><h1>ABXinRLS</h1></a>
+ <button onclick="goBack()">Go Back</button>
+ <h2 class="text-center">Add Diagnosis</h2>
+
+ <form>
+  <div class="form-group">
+    <label for="formGroupExampleInput">Diagnosis Name</label>
+    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Enter Diagnosis">
+  </div>
+  <div class="form-group">
+    <label for="formGroupExampleInput2">Antibiotic Name</label>
+    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Enter Antibiotic">
+
+  </div>
+      <div class="row">
+        <div class="col-md-12">
+            <h5>Classification</h5>
+            <a class="btn btn-default btn-select">
+                <input type="hidden" class="btn-select-input" id="" name="" value="" />
+                <span class="btn-select-value">Gram-positive</span>
+                <span class='btn-select-arrow glyphicon glyphicon-chevron-down'></span>
+                <ul>
+                    <li class="selected">Gram-positive</li>
+                    <li>Gram-negative</li>
+                    <li>Anaerobic</li>
+                </ul>
+            </a>
+        </div>
+        <div class="form-group">
+    <label for="formGroupExampleInput2">Organism Name</label>
+    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Enter Antibiotic">
+
+        <button type="submit" class="btn btn-primary add-button">Add/Save Diagnosis</button>
+</form>
+
+  </div>
+</div>
+</div>
+<hr>
+
+
+
+
+
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>
diff --git a/add-organism.html b/add-organism.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>ABXinRLS</title>
+
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/main.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+
+    <div class="container">
+        <a href="index.html"><h1>ABXinRLS</h1></a>
+ <button onclick="goBack()">Go Back</button>
+ <h2 class="text-center">Add Organism</h2>
+
+ <form>
+  <div class="form-group">
+    <label for="formGroupExampleInput">Organism Name</label>
+    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Enter Organism">
+  </div>
+  <div class="form-group">
+    <label for="formGroupExampleInput2">Related Diagnosis Name</label>
+    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Enter Diagnosis">
+
+  </div>
+      <label for="formGroupExampleInput2">Notes</label>
+    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Enter Notes">
+
+  </div>
+
+        <button type="submit" class="btn btn-primary add-button">Add/Save Organism</button>
+</form>
+
+  </div>
+</div>
+</div>
+<hr>
+
+
+
+
+
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>
diff --git a/add-user.html b/add-user.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <title>ABXinRLS</title>
+
+    <!-- Bootstrap -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/main.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+
+    <div class="container">
+        <a href="index.html"><h1>ABXinRLS</h1></a>
+ <button onclick="goBack()">Go Back</button>
+ <h2 class="text-center">Add User</h2>
+
+ <form>
+  <div class="form-group">
+    <label for="formGroupExampleInput">Username</label>
+    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Enter Username">
+  </div>
+  <div class="form-group">
+    <label for="formGroupExampleInput2">Email</label>
+    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Enter Email">
+
+  </div>
+      <label for="formGroupExampleInput2">Password</label>
+    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Enter Password">
+          <label for="formGroupExampleInput2">Confirm Password</label>
+    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Reenter Password">
+
+  </div>
+
+        <button type="submit" class="btn btn-primary add-button">Add User</button>
+</form>
+
+  </div>
+</div>
+</div>
+<hr>
+
+
+
+
+
+
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <!-- Include all compiled plugins (below), or include individual files as needed -->
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/main.js"></script>
+  </body>
+</html>
diff --git a/antibiotic.html b/antibiotic.html
@@ -21,6 +21,9 @@
   <body>
     <div class="container">
         <a href="index.html"><h1>ABXinRLS</h1></a>
+         <button onclick="goBack()">Go Back</button> 
+  </div>
+
   <div class="row">
         <div class="col-md-6 col-md-offset-3">
             <div id="custom-search-input">
@@ -119,5 +122,6 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
+    <script src="js/main.js"></script>
   </body>
 </html>
diff --git a/css/main.css b/css/main.css
@@ -22,4 +22,96 @@
 #profile-edit{
   display:block;
   text-align: center;
+}
+.form-signin{
+  max-width: 330px;
+  padding:15px;
+  margin:0 auto;
+}
+
+
+/*---------------------------------- add diagnosis button ---------------------------*/
+.btn-select {
+    position: relative;
+    padding: 0;
+    min-width: 236px;
+    width: 100%;
+    border-radius: 0;
+    margin-bottom: 20px;
+}
+
+.btn-select .btn-select-value {
+    padding: 6px 12px;
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 34px;
+    text-align: left;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    border-top: none !important;
+    border-bottom: none !important;
+    border-left: none !important;
+}
+
+.btn-select .btn-select-arrow {
+    float: right;
+    line-height: 20px;
+    padding: 6px 10px;
+    top: 0;
+}
+
+.btn-select ul {
+    display: none;
+    background-color: white;
+    color: black;
+    clear: both;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border-top: none !important;
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 33px;
+    z-index: 999;
+}
+
+.btn-select ul li {
+    padding: 3px 6px;
+    text-align: left;
+}
+
+.btn-select ul li:hover {
+    background-color: #f4f4f4;
+}
+
+.btn-select ul li.selected {
+    color: white;
+}
+
+/* Default Start */
+.btn-select.btn-default:hover, .btn-select.btn-default:active, .btn-select.btn-default.active {
+    border-color: #ccc;
+}
+
+.btn-select.btn-default ul li.selected {
+    background-color: #ccc;
+}
+
+.btn-select.btn-default ul, .btn-select.btn-default .btn-select-value {
+    background-color: white;
+    border: #ccc 1px solid;
+}
+
+.btn-select.btn-default:hover, .btn-select.btn-default.active {
+    background-color: #e6e6e6;
+}
+.add-button{
+  display:block;
+  margin:0 auto;
+}
+.dropdown-option{
+  display:block;
+  margin:auto;
 }
diff --git a/diagnosis.html b/diagnosis.html
@@ -21,12 +21,15 @@
   <body>
 
     <div class="container">
-        <h1>ABXinRLS</h1>
+      <a href="index.html"><h1>ABXinRLS</h1></a>
+       <button onclick="goBack()">Go Back</button> 
+  </div>
+
   <div class="row">
         <div class="col-md-6 col-md-offset-3">
             <div id="custom-search-input">
                 <div class="input-group col-md-12">
-                    <input type="text" class="form-control input-lg" placeholder="Enter Diagnosis" />
+                    <input type="text" data-provide="typeahead" class="form-control input-lg" placeholder="Enter Diagnosis" />
                     <span class="input-group-btn">
                         <button class="btn btn-info btn-lg" type="button">
                             <i class="glyphicon glyphicon-search"></i>
@@ -36,7 +39,7 @@
             </div>
         </div>
         <div class="col-md-3">
-          <a href="#" class="btn btn-info btn-lg">
+          <a href="user.html" class="btn btn-info btn-lg">
           <span class="glyphicon glyphicon-user"></span> User 
         </a>
       </div>
@@ -169,5 +172,6 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="js/bootstrap.min.js"></script>
+    <script src="js/main.js"></script>
   </body>
 </html>