--- a +++ b/templates/liver.html @@ -0,0 +1,221 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Liver Disease Predictor</title> + <!-- Bootstrap CSS link --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" + integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" + crossorigin="anonymous"> + <!-- Custom CSS --> + <style> + body { + font-family: Cambria; + height: 100%; + background-image: linear-gradient(#d438b0, #c59eca); + margin: 0; + padding: 0; + background-repeat: no-repeat; + background-attachment: fixed; + } + .btn-home { + background-color: #000000; /* Black color */ + color: white; + height: 50px; + width: 100px; + padding: 4px 4px; /* Smaller padding */ + font-size: 26px; /* Smaller font size */ + border-radius: 5px; + display: block; + margin: 20px auto; /* Add margin to center the button and space it from the logo */ + text-decoration: none; /* Remove underline */ + text-align: center; +} + +.btn-home:hover { + background-color: #333333; /* Darker shade of black on hover */ + color: white; /* Keep text white on hover */ + text-decoration: none; /* Remove underline on hover */ +} + + + .input-box { + margin-bottom: 15px; + border: 2px solid black; + background-color: #ebcbec; + width: 100%; + padding: 10px; + font-size: 16px; + border-radius: 5px; + } + + .logo { + position: absolute; + top: 10px; + left: 0; + right: 0; + margin: auto; + width: 200px; + height: auto; +} + + + .form-container { + margin-top: 180px; + } + + .form-heading { + color: white; + margin-bottom: 20px; + } + + .form-card { + border: 1px solid black; + background-color: #ffffff; + padding: 20px; + border-radius: 10px; + } + + .submit-button { + background-color: #a1238a; + margin-top: 10px; + padding: 15px 20px; + font-size: 20px; + border: none; + color: white; + border-radius: 5px; + width: 100%; + cursor: pointer; + } + + .submit-button:hover { + background-color: #751b66; + } + + </style> +</head> + +<body> + <!-- Header --> + <header> + <img src="/static/NEWLOGO.png" alt="Logo" class="logo"> + </header> + <br> + <br> + + <br> + <br> + + <br> + <br> + + <br> + <br> + + <br> + <br> + + + <div> + <a href="/" class="btn-home">Home</a> <!-- Link to the home page --> + </div> + + <!-- Form Content --> + <br> + <br> + + <div class="container"> + <div class="row form-container"> + <div class="col-md-2"></div> + <div class="col-md-8"> + <h1 class="text-center form-heading">Liver Disease Predictor</h1> + <div class="card form-card"> + <form class="form-horizontal" action="/predictl/" method="POST"> + {% csrf_token %} + <div class="row"> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Age" + placeholder="Age (in years)"> + </div> + </div> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Gender" + placeholder="Gender (0: Male; 1: Female)"> + </div> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Total_Bilirubin" + placeholder="Total Bilirubin (in mg/dL)"> + </div> + </div> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Direct_Bilirubin" + placeholder="Conjugated Bilirubin (in mg/dL)"> + </div> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Alkaline_Phosphotase" + placeholder="Alkaline Phosphatase (in IU/L)"> + </div> + </div> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Alamine_Aminotransferase" + placeholder="Alamine Aminotransferase (in IU/L)"> + </div> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Aspartate_Aminotransferase" + placeholder="Aspartate Aminotransferase (in IU/L)"> + </div> + </div> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Total_Protiens" + placeholder="Total Proteins (in g/dL)"> + </div> + </div> + </div> + <div class="row"> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" name="Albumin" + placeholder="Albumin (in g/dL)"> + </div> + </div> + <div class="col-md-6"> + <div class="form-group"> + <input class="form-control input-box" type="text" + name="Albumin_and_Globulin_Ratio" placeholder="Albumin and Globulin Ratio"> + </div> + </div> + </div> + + <!-- Predict button --> + <input type="submit" class="submit-button btn btn-info btn-block" value="Predict"> + </form> + </div> + </div> + <div class="col-md-2"></div> + </div> + </div> + <br> + <br> + <br> +</body> + +</html>