Spaces:
No application file
No application file
| <html lang="en" dir="ltr"> | |
| <head> | |
| <title>Heart Disease Prediction</title> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" | |
| integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
| <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/Style.css')}}"> | |
| <style> | |
| body{ | |
| #background: #4d0026; | |
| background: linear-gradient(to left, #667292 0%, #a2b9bc 100%); | |
| } | |
| footer a{ | |
| color: #fff; | |
| } | |
| footer a:hover{ | |
| color: #fff; | |
| } | |
| .centerdiv{ | |
| height: 15vh; | |
| display: flex; | |
| #justify-content: center; | |
| align-items: center; | |
| } | |
| .centerdiv a{ | |
| height: 30px; | |
| width: 30px; | |
| background-color: #f5f6fa; | |
| border-radius: 50px; | |
| text-align: center; | |
| margin: 5px; | |
| line-height: 30px; | |
| #box-shadow: 1px 4px 2px 2px #dcdde1; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .centerdiv a i{ | |
| transition: all 0.3s linear; | |
| } | |
| .centerdiv a:hover i{ | |
| transform: scale(1.5); | |
| color: #f5f6fa; | |
| } | |
| .centerdiv a:before{ | |
| content: ""; | |
| width: 120%; height: 120%; | |
| position: absolute; | |
| top: 90%; left: -50%; | |
| background-color: #00a8ff; | |
| transform: rotate(60deg); | |
| } | |
| .centerdiv a:hover:before{ | |
| animation: socialicons 0.8s 1; | |
| animation-fill-mode: forwards; | |
| } | |
| @keyframes socialicons { | |
| 0%{ top: 90%; left: -50%;} | |
| 50%{ top: -60%; left: -10%;} | |
| 100%{ top: -10%; left: -10%} | |
| } | |
| .fa-facebook-f{ | |
| color: #e84393; | |
| } | |
| .fa-instagram{ | |
| color: #e84393; | |
| } | |
| .fa-github{ | |
| color: #e84118; | |
| } | |
| .fa-linkedin{ | |
| color: #0097e6; | |
| } | |
| .fa-twitter{ | |
| color: #0097e6; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| <div style ="text-align:center"> | |
| <font color='white'> | |
| Heart Disease Prediction | |
| </font> | |
| </div> | |
| </h1> | |
| <br> | |
| <div class="wrapper"> | |
| <div class="container my-5"> | |
| <div class="row"> | |
| <div class="col-md-10 col-sm-6 mx-auto"> | |
| <form class="" action="/predict" method="post"> | |
| <div class="form-group"> | |
| <input type="number" name="age" id="age" class="form-control" required> | |
| <label for="age" class="ph-area">Enter Your Age</label> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control" name="sex" required="required"> | |
| <option value="" selected>Select Gender</option> | |
| <option value="1">Male</option> | |
| <option value="0">Female</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control chosenn" name="cp" required="required"> | |
| <option value="" selected>Select Chest Pain Type(cp)</option> | |
| <option value="0">Typical Angina</option> | |
| <option value="1">Atypical Angina</option> | |
| <option value="2">Non Anginal Pain</option> | |
| <option value="3">Asymptomatic</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <input type="number" name="trestbps" id="trestbps" class="form-control" required> | |
| <label for="trestbps" class="ph-area">Enter Resting Blood Pressure (mm Hg)(trestbps)</label> | |
| </div> | |
| <div class="form-group"> | |
| <input type="number" name="chol" id="chol" class="form-control" required> | |
| <label for="chol" class="ph-area">Enter Serum Cholestoral (mg/dl)(chol)</label> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control" name="fbs" required="required"> | |
| <option value="" selected>Fasting Blood Sugar > 120 (mg/dl)(fbs)</option> | |
| <option value="1">Yes</option> | |
| <option value="0">No</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control chosenn" name="restecg" required="required"> | |
| <option value="" selected>Rresting Electrocardiographic Results(restecg)</option> | |
| <option value="0">Normal</option> | |
| <option value="1">Abnormal</option> | |
| <option value="2">Probable</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <input type="number" name="thalach" id="thalach" class="form-control" required> | |
| <label for="thalach" class="ph-area">Enter Maximum Heart Rate Achieved (thalach)</label> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control" name="exang" required="required"> | |
| <option value="" selected>Select Exercise Induced Angina (exang)</option> | |
| <option value="1">Yes</option> | |
| <option value="0">No</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="oldpeak" id="oldpeak" class="form-control" required> | |
| <label for="oldpeak" class="ph-area">Enter Your Oldpeak(oldpeak)</label> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control chosenn" name="slope" required="required"> | |
| <option value="" selected>Select Peak Exercise ST Segment (Slope)</option> | |
| <option value="0">Upsloping</option> | |
| <option value="1">Flat</option> | |
| <option value="2">Downsloping</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control chosenn" name="ca" required="required"> | |
| <option value="" selected>Number of Major Vessels (ca)</option> | |
| <option value="0">Zero</option> | |
| <option value="1">One</option> | |
| <option value="2">Two</option> | |
| <option value="3">Three</option> | |
| <option value="4">Four</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <select class="form-control chosenn" name="thal" required="required"> | |
| <option value="" selected>Select Thal Type (thal)</option> | |
| <option value="0">Normal</option> | |
| <option value="1">Fixed</option> | |
| <option value="2">Defect</option> | |
| <option value="3">Reversable</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <input type="submit" class="btn btn-primary" value="Submit"> | |
| <input type="reset" class="btn btn-danger" value="Reset"> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" | |
| integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" | |
| integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" | |
| integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |