-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
216 lines (193 loc) · 9.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="lorem lorem lorem lorem">
<meta name="theme-color" content="#3C6CA8">
<link rel="icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/id/4/44/Logo_PENS.png">
<title>Simple Expert System</title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body class="min-h-[100vh] flex flex-col w-full">
<nav class="bg-white shadow-md border-t-black sticky top-0 z-[1005] flex justify-between w-[100%]">
<div class="w-[100%] px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<div>
<!-- website Logo -->
<a href="#" class="flex items-center py-4 px-2">
<img src="https://upload.wikimedia.org/wikipedia/id/4/44/Logo_PENS.png" alt="Logo"
class="h-8 w-8 mr-2" />
<span class="font-semibold judul-nav ml-1 text-blue-900 text-lg">Simple Expert System</span>
</a>
</div>
</div>
<div class="hidden md:flex items-center space-x-3">
<!-- navbar items -->
<div class="hidden md:flex items-center space-x-1 normal-navbar-items">
</div>
</nav>
<!-- content -->
<div class=''>
<main class="h-[100%] w-[100%]">
<div class="wrapper flex justify-center">
<div
class="bg-white m-20 box-quiz lg:w-[1000px] min-h-[500px] w-[90%] shadow-[0px_4px_16px_rgba(17,17,26,0.1),_0px_8px_24px_rgba(17,17,26,0.1),_0px_16px_56px_rgba(17,17,26,0.1)] rounded-3xl drop-shadow-xl p-11 pb-0">
<p class="text-3xl sm:text-6xl text-slate-500 mb-5 text-center">Pertanyaan</p>
<hr class="border-t-4 mt-10 mb-7 border-dotted">
<div class="flex w-[100%] mr-32 flex-col">
<div class="quisioner-container grow-2 flex flex-wrap">
<div class="form-check quisioner flex flex-wrap flex-col mr-4">
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left">
<span class="p1 ml-2 text-gray-700 grid-flow-row-dense">Apakah anda sering mengalami buang air besar
(lebih dari 2 kali)
</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left">
<span class="p2 ml-2 text-gray-700">Apakah anda mengalami berak encer?
</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left">
<span class="p3 ml-2 text-gray-700">
Apakah anda
mengalami berak berdarah?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p4 ml-2 text-gray-700">Apakah anda
merasa lesu dan tidak bergairah?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p5 ml-2 text-gray-700">Apakah anda
tidak selera makan?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p6 ml-2 text-gray-700">Apakah anda
merasa mual dan sering muntah (lebih dari 1 kali)
?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p7 ml-2 text-gray-700">Apakah anda
merasa sakit di bagian perut ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p8 ml-2 text-gray-700">Apakah
tekanan darah anda rendah ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p9 ml-2 text-gray-700">Apakah anda
merasa pusing ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p10 ml-2 text-gray-700">Apakah
anda mengalami pingsan ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p11 ml-2 text-gray-700">Apakah
suhu badan anda tinggi ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p12 ml-2 text-gray-700">Apakah
anda mengalami luka di bagian tertentu ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p13 ml-2 text-gray-700">Apakah
anda tidak dapat menggerakkan anggota badan tertentu
?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p14 ml-2 text-gray-700">Apakah
anda pernah memakan sesuatu ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p15 ml-2 text-gray-700">Apakah
anda memakan daging ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p16 ml-2 text-gray-700">Apakah
anda memakan jamur ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p17 ml-2 text-gray-700">Apakah
anda memakan makanan kaleng ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left text-red-500"><span
class="p18 ml-2 text-gray-700">Apakah
anda membeli susu ?</span>
</label>
<label class="mt-3">
<input type="checkbox" class="form-checkbox h-5 w-5 float-left"><span
class="p19 ml-2 text-gray-700">Apakah
anda meminum susu ?</span>
</label>
</div>
</div>
<div class="result-prediction-container grow-2 mt-5 -mx-[44px] relative">
<div class="bg-slate-200 rounded-t-xl p-4">
<div class="mb-3 prediction-result-container">
<p class="ml-7 persentase-disease">Belum ada persentase</p>
</div>
</div>
<div
class="process-prediction-box p-7 flex flex-col sm:flex-row items-center justify-center md:justify-around rounded-b-xl bg-slate-100 flex-wrap space-x-5 space-y-5 md:space-y-0 rounded-t-xl -mt-3">
<div class="flex flex-col items-center md:flex-row md:justify-start">
<label for="threshold" class="mr-2">Threshold</label>
<input type="number" class="threshold border-[1px] border-gray-400 max-w-2xl rounded-lg px-2 py-1"
placeholder="Bernilai 0-100%/kosong">
</div>
<button type="submit"
class="process-button bg-blue-200 p-[5px] rounded-xl hover:bg-blue-400 px-5 shadow-xl hover:shadow-sm">
Process
</button>
<div class="conclusion-container mt-4 mb-4">
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<!-- footer -->
<div class="mx-auto border-t-4 mt-auto w-full">
<footer class="p-4 bg-white sm:p-6">
<div class="md:flex md:justify-center">
<div class="flex mb-10 md:mb-0 content-center flex-wrap justify-center">
<a href="#" class="self-center">
<img src="https://upload.wikimedia.org/wikipedia/id/4/44/Logo_PENS.png" class="mr-4 h-10" alt="Logo" />
</a>
<span class="text-xl mt-3 md:mt-1 font-semibold whitespace-nowrap text-blue-900 judul-nav">Politeknik
Elektronika Negeri Surabaya</span>
</div>
</div>
<hr class="my-6 border-gray-200 sm:mx-auto lg:my-8" />
<div class="flex justify-center">
<span class="text-sm text-gray-500">© <span id="year-text"></span>
<a href="#" target="_blank"
class="transition duration-300 hover:border-b-4 hover:border-blue-600 hover:text-blue-600">Muhammad
Dzalhaqi, 2022</a>. All Rights Reserved.
</span>
</div>
</footer>
</div>
<script src="./src/index.js"></script>
</body>
</html>