<!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>