Diff of /templates/liver.html [000000] .. [b018ba]

Switch to unified view

a b/templates/liver.html
1
<!DOCTYPE html>
2
<html lang="en">
3
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Liver Disease Predictor</title>
8
    <!-- Bootstrap CSS link -->
9
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
11
        crossorigin="anonymous">
12
    <!-- Custom CSS -->
13
    <style>
14
        body {
15
            font-family: Cambria;
16
            height: 100%;
17
            background-image: linear-gradient(#d438b0, #c59eca);
18
            margin: 0;
19
            padding: 0;
20
            background-repeat: no-repeat;
21
            background-attachment: fixed;
22
        }
23
        .btn-home {
24
    background-color: #000000; /* Black color */
25
    color: white;
26
    height: 50px;
27
    width: 100px;
28
    padding: 4px 4px; /* Smaller padding */
29
    font-size: 26px; /* Smaller font size */
30
    border-radius: 5px;
31
    display: block;
32
    margin: 20px auto; /* Add margin to center the button and space it from the logo */
33
    text-decoration: none; /* Remove underline */
34
    text-align: center;
35
}
36
37
.btn-home:hover {
38
    background-color: #333333; /* Darker shade of black on hover */
39
    color: white; /* Keep text white on hover */
40
    text-decoration: none; /* Remove underline on hover */
41
}
42
43
44
        .input-box {
45
            margin-bottom: 15px;
46
            border: 2px solid black;
47
            background-color: #ebcbec;
48
            width: 100%;
49
            padding: 10px;
50
            font-size: 16px;
51
            border-radius: 5px;
52
        }
53
54
        .logo {
55
    position: absolute;
56
    top: 10px;
57
    left: 0;
58
    right: 0;
59
    margin: auto;
60
    width: 200px;
61
    height: auto;
62
}
63
64
65
        .form-container {
66
            margin-top: 180px;
67
        }
68
69
        .form-heading {
70
            color: white;
71
            margin-bottom: 20px;
72
        }
73
74
        .form-card {
75
            border: 1px solid black;
76
            background-color: #ffffff;
77
            padding: 20px;
78
            border-radius: 10px;
79
        }
80
81
        .submit-button {
82
            background-color: #a1238a;
83
            margin-top: 10px;
84
            padding: 15px 20px;
85
            font-size: 20px;
86
            border: none;
87
            color: white;
88
            border-radius: 5px;
89
            width: 100%;
90
            cursor: pointer;
91
        }
92
93
        .submit-button:hover {
94
            background-color: #751b66;
95
        }
96
       
97
    </style>
98
</head>
99
100
<body>
101
    <!-- Header -->
102
    <header>
103
        <img src="/static/NEWLOGO.png" alt="Logo" class="logo">
104
    </header>
105
    <br>
106
    <br>
107
    
108
    <br>
109
    <br>
110
    
111
    <br>
112
    <br>
113
    
114
    <br>
115
    <br>
116
    
117
    <br>
118
    <br>
119
    
120
     
121
    <div>
122
        <a href="/" class="btn-home">Home</a> <!-- Link to the home page -->
123
    </div>
124
125
    <!-- Form Content -->
126
     <br>
127
     <br>
128
     
129
    <div class="container">
130
        <div class="row form-container">
131
            <div class="col-md-2"></div>
132
            <div class="col-md-8">
133
                <h1 class="text-center form-heading">Liver Disease Predictor</h1>
134
                <div class="card form-card">
135
                    <form class="form-horizontal" action="/predictl/" method="POST">
136
                        {% csrf_token %}
137
                        <div class="row">
138
                            <div class="col-md-6">
139
                                <div class="form-group">
140
                                    <input class="form-control input-box" type="text" name="Age"
141
                                        placeholder="Age (in years)">
142
                                </div>
143
                            </div>
144
                            <div class="col-md-6">
145
                                <div class="form-group">
146
                                    <input class="form-control input-box" type="text" name="Gender"
147
                                        placeholder="Gender (0: Male; 1: Female)">
148
                                </div>
149
                            </div>
150
                        </div>
151
                        <div class="row">
152
                            <div class="col-md-6">
153
                                <div class="form-group">
154
                                    <input class="form-control input-box" type="text" name="Total_Bilirubin"
155
                                        placeholder="Total Bilirubin (in mg/dL)">
156
                                </div>
157
                            </div>
158
                            <div class="col-md-6">
159
                                <div class="form-group">
160
                                    <input class="form-control input-box" type="text" name="Direct_Bilirubin"
161
                                        placeholder="Conjugated Bilirubin (in mg/dL)">
162
                                </div>
163
                            </div>
164
                        </div>
165
                        <div class="row">
166
                            <div class="col-md-6">
167
                                <div class="form-group">
168
                                    <input class="form-control input-box" type="text" name="Alkaline_Phosphotase"
169
                                        placeholder="Alkaline Phosphatase (in IU/L)">
170
                                </div>
171
                            </div>
172
                            <div class="col-md-6">
173
                                <div class="form-group">
174
                                    <input class="form-control input-box" type="text" name="Alamine_Aminotransferase"
175
                                        placeholder="Alamine Aminotransferase (in IU/L)">
176
                                </div>
177
                            </div>
178
                        </div>
179
                        <div class="row">
180
                            <div class="col-md-6">
181
                                <div class="form-group">
182
                                    <input class="form-control input-box" type="text" name="Aspartate_Aminotransferase"
183
                                        placeholder="Aspartate Aminotransferase (in IU/L)">
184
                                </div>
185
                            </div>
186
                            <div class="col-md-6">
187
                                <div class="form-group">
188
                                    <input class="form-control input-box" type="text" name="Total_Protiens"
189
                                        placeholder="Total Proteins (in g/dL)">
190
                                </div>
191
                            </div>
192
                        </div>
193
                        <div class="row">
194
                            <div class="col-md-6">
195
                                <div class="form-group">
196
                                    <input class="form-control input-box" type="text" name="Albumin"
197
                                        placeholder="Albumin (in g/dL)">
198
                                </div>
199
                            </div>
200
                            <div class="col-md-6">
201
                                <div class="form-group">
202
                                    <input class="form-control input-box" type="text"
203
                                        name="Albumin_and_Globulin_Ratio" placeholder="Albumin and Globulin Ratio">
204
                                </div>
205
                            </div>
206
                        </div>
207
208
                        <!-- Predict button -->
209
                        <input type="submit" class="submit-button btn btn-info btn-block" value="Predict">
210
                    </form>
211
                </div>
212
            </div>
213
            <div class="col-md-2"></div>
214
        </div>
215
    </div>
216
    <br>
217
    <br>
218
    <br>
219
</body>
220
221
</html>