-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
328 lines (286 loc) · 13.5 KB
/
index.php
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Caredoc</title>
<!-- my css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/loader.css">
<!-- plugin bootstrap -->
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
<!-- font awesome -->
<link rel="stylesheet" href="vendor/fontawesome-free/css/all.css">
<!-- icon web -->
<link rel="icon" href="vendor/img/caredoc_sOg_icon.ico" type="image/gif" sizes="16x16">
<!-- aos animation -->
<link href="vendor/aos-master/dist/aos.css" rel="stylesheet">
</head>
<body>
<!-- animasi loading -->
<div class="loader">
<div></div>
<div></div>
<div></div>
</div>
<!-- akhir animasi loading -->
<!-- header -->
<header class="header-area" id="page-top">
<!-- site-navbar start -->
<div class="navbar-area">
<div class="container">
<nav class="site-navbar">
<!-- site logo -->
<div class="content-image">
<img src="vendor/img/caredoc.png" alt="caredoc-logo">
</div>
<!-- site menu/nav -->
<ul class="menu" id="menu">
<li class="active">
<a href="index.php #page-top" class="scroll">Beranda</a>
</li>
<li><a href="#about" class="scroll">Tentang</a></li>
<li><a href="#caredoc" class="scroll">Caredoc</a></li>
<li><a href="penyakit.php">Penyakit</a></li>
<li><a href="tim.php">Tim</a></li>
</ul>
<!-- nav-toggler for mobile version only -->
<button class="nav-toggler">
<span></span>
</button>
</nav>
</div>
</div>
</header>
<!-- akhir header -->
<!-- landing page -->
<div class="landing">
<div class="landingText" data-aos="fade-up" data-aos-duration="1000">
<h2>Hidup Sehat</span> </h2>
<h3>Bersama Kami.</h3>
<div class="btn">
<a href="#about" class="scroll">Baca Selengkapnya</a>
</div>
</div>
<div class="landingImage" data-aos="fade-down" data-aos-duration="2000">
<img src="vendor/img/3674274.png" alt="">
</div>
</div>
<!-- akhir landing page -->
<!-- about -->
<section class="section">
<div class="about" id="about">
<div class="content-about">
<h3 class="title-about" data-aos="fade-right" data-aos-duration="1000">
Tentang Aplikasi Ini
<div class="line"></div>
</h3>
<p class="text-about" data-aos="fade-right" data-aos-duration="1000">Merupakan sebuah website yang bisa digunakan untuk masyarakat yang memerlukan
informasi kesehatan secara efesien,
website ini dapat mengetahui daftar penyakit-penyakit, memberikan informasi bagaimana cara untuk
mencegah dan mengatasi
penyakit tersebut. Tampilan yang sederhana akan memudahkan pengguna untuk berinteraksi dengan
website ini, di dalamnya
pengguna dimanjakan dengan system voice dan edukasi animasi robot sederhana yang berfungsi untuk
interaksi antara system
dan pengguna sehinga pengguna tidak merasa jenuh dan merasa kesulitan pada saat mengakses website.
Website ini cocok
digunakan untuk semua kalangan.disease</p>
</div>
<div class="imgContainer" data-aos="fade-up" data-aos-duration="1000">
<img src="vendor/img/medl.png" alt="">
</div>
</div>
</section>
<!-- akhir about -->
<!-- bagaimana ini bekerja? -->
<div class="container my-5">
<div class="text-center mb-5" data-aos="fade-down" data-aos-duration="1000">
<span class="text-secondary">Langkah</span>
<h4 class="text-capitalize font-weight-bold">Bagaimana ini <span style="color: #0089ff">Bekerja?</span></h4>
</div>
<div class="col-12 col-md-8 mx-auto">
<div class="d-flex my-4 align-items-start" data-aos="fade-right" data-aos-duration="1000">
<div class="mr-3 text-center mt-2">
<div class="p-4 ml-2 rounded-circle text-white font-weight-bold d-flex align-items-center justify-content-center" style="height: 40px; width: 40px; background-color: #0089ff">1</div>
</div>
<div class="rounded bg-light p-4">
<h5 class="mb-3" style="font-weight: 600;">Apa yang anda rasakan?</h5>
<p class="text-secondary font-weight-light">Kenali keluhan yang anda rasakan,lalu sampaikan keluhan yang anda rasakan kepada caredoc.</p>
</div>
</div>
<div class="d-flex my-4 align-items-start" data-aos="fade-right" data-aos-duration="800">
<div class="mr-3 text-center mt-2">
<div class="p-4 ml-2 rounded-circle text-white font-weight-bold d-flex align-items-center justify-content-center" style="height: 40px; width: 40px; background-color: #0089ff">2</div>
</div>
<div class="rounded bg-light p-4">
<h5 class="mb-3" style="font-weight: 600;">Konsultasikan keluhan anda pada caredoc</h5>
<p class="text-secondary font-weight-light">Dengan mengkonsultasikan apa yang anda rasakan kepada caredoc anda akan mendapatkan informasi keluhan yang dirasakan.</p>
</div>
</div>
<div class="d-flex my-4 align-items-start" data-aos="fade-right" data-aos-duration="600">
<div class="mr-3 text-center mt-2">
<div class="p-4 ml-2 rounded-circle text-white font-weight-bold d-flex align-items-center justify-content-center" style="height: 40px; width: 40px; background-color: #0089ff">3</div>
</div>
<div class="rounded bg-light p-4">
<h5 class="mb-3" style="font-weight: 600;">Dapatkan informasi kesehatan</h5>
<p class="text-secondary font-weight-light">Anda mendapatkan solusi terhadap keluhan yang dirasakan sehingga merasa dekat dengan kesembuhan setelah mendapatkan informasi.</p>
</div>
</div>
</div>
</div>
<!-- akhir bagaimana ini bekerja? -->
<!-- caredoc -->
<div class="container-caredoc" id="caredoc">
<div class="content-caredoc">
<div class="title-caredoc">
<h3 data-aos="zoom-out" data-aos-duration="900">Care<span>doc</span></h3>
</div>
<div class="d-flex justify-content-center">
<img src="vendor/img/Untitled-2.gif" alt="caredoc">
</div>
<div class="container-form">
<form action="penyakit.php" method="get" id="search-form">
<div class="input-group mb-3">
<input id="textbox" name="q" type="text" placeholder="Masukan apa yang anda rasakan..." autocomplete="off" required>
<div class="input-group-append">
<!-- <button type="submit" class="d-none"></button> -->
<button type="button" class="btn btn-light btn-lg mr-1" id="start-btn" title="Start">
<i class="fas fa-microphone" id="micoff"></i>
<i class="fa fa-assistive-listening-systems d-none" id="micon" aria-hidden="true"></i>
</button>
</div>
</div>
</form>
<p class="info"></p>
</div>
</div>
</div>
<!-- akhir caredoc -->
<!-- footer -->
<div class="footer-section" id="footer">
<div class="container pd-5">
<div class="row">
<div class="col-lg-6 offset-lg-3">
<div class="contact-content text-center">
<div class="footer-logo">
<a href="http://smkifsu.sch.id/" target="blank"><img src="vendor/img/ifsu.png"></a>
<a href="http://cs.upi.edu/v2/home" target="blank"><img src="vendor/img/upi.png"></a>
<a href="http://dinamik.cs.upi.edu/" target="blank"><img src="vendor/img/dinamik15.png"></a>
</div>
<h6>Jl. Angkrek Situ No.19, Situ, Kec. Sumedang Utara, Kabupaten Sumedang, Jawa Barat 45621</h6>
<p></p>
<h6>0261-202767<span>|</span>0261-202767</h6>
<div class="contact-social">
<ul>
<li><a class="hover-target" target="blank" href="https://www.facebook.com/Ifsuofficial/"><i class="fab fa-facebook-f"></i></a></li>
<li><a class="hover-target" target="blank" href="mailto:[email protected]"><i class="far fa-envelope"></i></a></li>
<li><a class="hover-target" target="blank" href="https://twitter.com/ifsuofficial"><i class="fab fa-twitter"></i></i></a></li>
<li><a class="hover-target" target="blank" href="https://instagram.com/smkinformatikasumedang?igshid=18ehskk5w95n4"><i class="fab fa-instagram"></i></i></a></li>
<li><a class="hover-target" target="blank" href="https://wa.me/0261-202767"><i class="fab fa-whatsapp"></i></i></a></li>
</ul>
</div>
<span>Copyright © Caredoc <?= date('Y') ?></span>
</div>
</div>
</div>
</div>
</div>
<!-- akhir footer -->
</body>
<!-- responsive voice -->
<script src="https://code.responsivevoice.org/responsivevoice.js?key=6tgcyWyA"></script>
<!-- voice -->
<script src="js/textvoice.js"></script>
<!-- navbar checked di responsive -->
<script src="js/nav.js"></script>
<!-- smooth scroll on klik -->
<!-- navbar aktif di section -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- voice to text -->
<script type="text/javascript">
var SpeechRecognition = window.webkitSpeechRecognition;
var recognition = new SpeechRecognition();
recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.lang = "id-ID";
var Textbox = $('#textbox');
var instructions = '';
var Content = '';
recognition.continuous = false;
recognition.onresult = function(event) {
var current = event.resultIndex;
var transcript = event.results[current][0].transcript;
Content += transcript;
Textbox.val(Content);
console.log(transcript);
};
recognition.onstart = function() {
$('#micoff').addClass('d-none');
$('#micon').removeClass('d-none');
instructions.text('Voice recognition is ON.');
}
recognition.onspeechend = function() {
instructions.text('No activity.');
}
recognition.onerror = function(event) {
if (event.error == 'no-speech') {
instructions.text('Try again.');
}
}
recognition.onend = function() {
$('#micoff').removeClass('d-none');
$('#micon').addClass('d-none');
if (Textbox.val() !== '') {
$('#search-form').submit();
}
};
$('#start-btn').on('click', function(e) {
if (Content.length) {
Content += ' ';
}
recognition.start();
console.log(responsiveVoice.isPlaying());
});
Textbox.on('input', function() {
Content = $(this).val();
});
</script>
<!-- smooth scroll jquery-->
<script>
$(document).ready(function() {
var scrollLink = $('.scroll');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if (sectionOffset <= scrollbarLocation) {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
})
})
})
</script>
<!-- fade animation -->
<script src="vendor/aos-master/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!-- js untuk loading -->
<script type="text/javascript">
setTimeout(function() {
$('.loader').fadeToggle();
}, 200);
</script>
</html>