design home page

satyam-seth · Dec 20, 2020 · 1faa5c9 · 1faa5c9
1 parent 6e999bb
commit 1faa5c9
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 33 deletions.
diff --git a/App/main.py b/App/main.py
@@ -1,4 +1,5 @@
 from flask import Flask,render_template
+
 app = Flask(__name__)
 
 @app.route('/')

diff --git a/App/static/css/all.min.css b/App/static/css/all.min.css
diff --git a/App/static/css/bootstrap.css b/App/static/css/bootstrap.css
diff --git a/App/static/css/bootstrap.min.css b/App/static/css/bootstrap.min.css
diff --git a/App/static/css/style.css b/App/static/css/style.css
@@ -0,0 +1,9 @@
+.navbar{
+    background-color: #e9892f4f;
+}
+body{
+    background-image: url("../images/background.jpg");
+    background-color: #e9892f;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
diff --git a/App/static/images/background.jpg b/App/static/images/background.jpg
diff --git a/App/static/js/all.min.js b/App/static/js/all.min.js
diff --git a/App/static/js/bootstrap.js b/App/static/js/bootstrap.js
diff --git a/App/static/js/bootstrap.min.js b/App/static/js/bootstrap.min.js
diff --git a/App/static/js/jquery.js b/App/static/js/jquery.js
diff --git a/App/templates/base.html b/App/templates/base.html
@@ -3,15 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="{{url_for('static',filename='css/bootstrap.css')}}" rel="stylesheet">
-    <link href="{{url_for('static',filename='css/all.min.css')}}" rel="stylesheet">
-    <title>Diabetes Prediction</title>
+    <link href="{{url_for('static',filename='css/bootstrap.min.css')}}" rel="stylesheet">
+    <link href="{{url_for('static',filename='css/style.css')}}" rel="stylesheet">
+    <title>Diabetes Predictor</title>
 </head>
 <body>
+    {% include 'navbar.html' %}
     {% block body %} {% endblock %}
-    <script src="{{url_for('static',filename='js/bootstrap.js')}}"></script>
+    <script src="{{url_for('static',filename='js/bootstrap.min.js')}}"></script>
     <script src="{{url_for('static',filename='js/popper.js')}}"></script>
-    <script src="{{url_for('static',filename='js/jquery.js')}}"></script>
-    <script src="{{url_for('static',filename='js/all.min.js')}}"></script>
 </body>
 </html>
diff --git a/App/templates/home.html b/App/templates/home.html
@@ -1,4 +1,51 @@
 {% extends "base.html" %}
 {% block body %}
-    <h1>Home Page</h1>
+    <div class="container-fluid bg">
+        <div class="row">
+            <div class="container py-5">
+                <div class="row">
+                    <h1 class="text-center my-3">Diabetes Predictor</h1>
+                    <div class="col-md-6 offset-md-3">
+                    <form action="" method="POST" class="text-white">
+                        <div class="mb-3">
+                          <label for="InputPregnancies" class="form-label">Number of Pregnancies</label>
+                          <input type="number" class="form-control" id="InputPregnancies" name="Pregnancies" min="0" max="20" placeholder="eg. 1">
+                        </div>
+                        <div class="mb-3">
+                          <label for="InputGlucose" class="form-label">Glucose (mg/dL)</label>
+                          <input type="number" class="form-control" id="InputGlucose" name="Glucose" min="50" max="200" placeholder="eg. 90">
+                        </div>
+                        <div class="mb-3">
+                          <label for="InputBloodPressure" class="form-label">Blood Pressure (mmHg)</label>
+                          <input type="number" class="form-control" id="InputBloodPressure" name="BloodPressure" min="50" max="200" placeholder="eg. 80">
+                        </div>
+                        <div class="mb-3">
+                          <label for="InputSkinThickness" class="form-label">Skin Thickness (mm)</label>
+                          <input type="number" class="form-control" id="InputSkinThickness" name="SkinThickness" min="10" max="50" placeholder="eg. 20">
+                        </div>
+                        <div class="mb-3">
+                          <label for="InputInsulinLevel" class="form-label">Insulin Level (IU/mL)</label>
+                          <input type="number" class="form-control" id="InputInsulinLevel" name="InsulinLevel"  min="20" max="900" placeholder="eg. 100">
+                        </div>
+                        <div class="mb-3">
+                          <label for="InputBodyMassIndex" class="form-label">Body Mass Index (kg/m²)</label>
+                          <input type="number" class="form-control" id="InputBodyMassIndex" name="BodyMassIndex" min="20" max="50" step="0.1" placeholder="eg. 29.6">
+                        </div>
+                        <div class="mb-3">
+                          <label for="InputDiabetesPedigreeFunction" class="form-label">Diabetes Pedigree Function</label>
+                          <input type="number" class="form-control" id="InputDiabetesPedigreeFunction" name="DiabetesPedigreeFunction" min="0.1" max="3" step="0.001" placeholder="eg. 0.52">
+                        </div>
+                        <div class="mb-3">
+                          <label for="InputAge" class="form-label">Age</label>
+                          <input type="number" class="form-control" id="InputAge" name="Age" min="15" max="100" placeholder="eg. 25">
+                        </div>
+                        <div class="d-grid gap-2">
+                            <button type="submit" class="btn btn-success">Predict</button>
+                          </div>
+                      </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 {% endblock body %}
diff --git a/App/templates/navbar.html b/App/templates/navbar.html
@@ -0,0 +1,18 @@
+<nav class="navbar navbar-expand-lg navbar-light shadow-lg">
+    <div class="container-fluid">
+      <a class="navbar-brand" href="#"><span style="font-size: 4vh;"><b>Diabetes Predictor</b></span></a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link active" aria-current="page" href="#"><b>Home</b></a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#"><b>API</b></a>
+          </li>
+        </ul>
+      </div>
+    </div>
+</nav>