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<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BINA AI - Asisten Digital untuk Tunanetra</title>
<meta name="theme-color" content="#1e40af" />
<meta property="title" content="BINA AI: Blind-friendly Intelligent Navigation Assistant" />
<meta http-equiv="content-language" content="id" />
<meta property="description" content="Teknologi asistif inovatif yang membantu tunanetra mengakses internet dengan mudah melalui perintah suara dan kecerdasan buatan" />
<meta property="og:type" content="website" />
<meta property="og:title" content="BINA AI: Blind-friendly Intelligent Navigation Assistant" />
<meta property="og:site_name" content="BINA AI" />
<meta property="og:description" content="Teknologi asistif inovatif yang membantu tunanetra mengakses internet dengan mudah melalui perintah suara dan kecerdasan buatan" />
<meta property="og:image" content="https://bina.seya.zip/thumbnail.png" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://bina.seya.zip/" />
<meta property="twitter:title" content="BINA AI: Blind-friendly Intelligent Navigation Assistant" />
<meta property="twitter:description" content="Teknologi asistif inovatif yang membantu tunanetra mengakses internet dengan mudah melalui perintah suara dan kecerdasan buatan" />
<meta property="twitter:image" content="https://bina.seya.zip/thumbnail.png" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>BINA AI</h1>
<p class="subtitle">Asisten Digital Cerdas untuk Tunanetra</p>
<p class="header-description">
Teknologi asistif revolusioner yang membantu penyandang tunanetra menjelajahi internet dengan mudah menggunakan
perintah suara dan kecerdasan buatan
</p>
<a href="#demo" class="cta-button">Lihat Demo</a>
</div>
</header>
<section id="demo" class="section">
<div class="container">
<h2>Lihat BINA AI Beraksi</h2>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/5t_cypauQFc" title="Demo BINA AI - Asisten Digital untuk Tunanetra"
allowfullscreen aria-label="Video demonstrasi penggunaan BINA AI">
</iframe>
</div>
<p class="text-large" style="text-align: center;">
Saksikan bagaimana BINA AI membantu pengguna tunanetra mengakses website, membaca artikel, mengisi formulir, dan
berbelanja online hanya dengan perintah suara.
</p>
</div>
</section>
<section class="section">
<div class="container">
<h2>Apa itu BINA AI?</h2>
<p class="text-large">
BINA AI adalah ekstensi browser yang dirancang khusus untuk membantu penyandang tunanetra mengakses internet
dengan lebih mudah dan mandiri. Beberapa fitur dan keunggulan BINA AI meliputi:
</p>
<div class="benefits-grid">
<div class="benefit-card">
<span class="benefit-icon">🎤</span>
<h4>Navigasi dengan Suara</h4>
<p>Cukup bicara untuk mengontrol - buka website, klik tombol, isi formulir, dan lakukan berbagai
aktivitas online tanpa perlu keyboard atau mouse.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon">🧠</span>
<h4>Pemahaman Konteks</h4>
<p>AI yang cerdas memahami maksud Anda dan memberikan bantuan yang tepat sesuai dengan apa yang sedang Anda
lakukan di website.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon">🔍</span>
<h4>Penjelasan Otomatis</h4>
<p>BINA AI secara otomatis menjelaskan isi halaman website, struktur menu, dan konten yang tersedia dengan
bahasa yang mudah dipahami.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon">⚡</span>
<h4>Respon Cepat</h4>
<p>Dapatkan bantuan instan tanpa menunggu lama. BINA AI merespons perintah Anda dengan cepat dan akurat.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon">♿</span>
<h4>Pengembangan Kolaboratif</h4>
<p>Komunitas tunanetra turut berpartisipasi dalam pengembangan demi masukan yang netral.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon">🇮🇩</span>
<h4>Inovasi Lokal</h4>
<p>BINA AI dikembangkan oleh pelajar Indonesia dengan fokus meraih kesetaraan digital
untuk Visi Indonesia Emas 2045.</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2>Mengapa BINA AI Lebih Unggul?</h2>
<p class="text-large">
BINA AI menggabungkan kelebihan dari berbagai teknologi asistif yang sudah ada, sekaligus mengatasi
kekurangan-kekurangan mereka:
</p>
<div class="table-wrapper">
<table class="comparison-table">
<thead>
<tr>
<th>Fitur</th>
<th>BINA AI</th>
<th>Voice Assistant</th>
<th>Screen Reader</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Memahami konteks website</strong></td>
<td><span class="check">✓</span> Memahami struktur dan makna halaman</td>
<td><span class="cross">✗</span> Tidak terintegrasi dengan browser</td>
<td><span class="cross">✗</span> Hanya membaca teks</td>
</tr>
<tr>
<td><strong>Perintah suara natural</strong></td>
<td><span class="check">✓</span> Percakapan natural dan fleksibel</td>
<td><span class="check">✓</span> Ya, tapi terbatas</td>
<td><span class="cross">✗</span> Menggunakan shortcut keyboard</td>
</tr>
<tr>
<td><strong>Interaksi otomatis</strong></td>
<td><span class="check">✓</span> Otomatis menyesuaikan dengan website</td>
<td><span class="cross">✗</span> Hanya untuk beberapa aplikasi</td>
<td><span class="cross">✗</span> Perlu dikonfigurasi manual</td>
</tr>
<tr>
<td><strong>Kemudahan penggunaan</strong></td>
<td><span class="check">✓</span> Mudah dipelajari, fitur lengkap</td>
<td><span class="check">✓</span> Mudah, tapi fungsi terbatas</td>
<td><span class="cross">✗</span> Butuh pembelajaran mendalam</td>
</tr>
<tr>
<td><strong>Pemahaman visual</strong></td>
<td><span class="check">✓</span> Dapat mengerti gambar pada layar</td>
<td><span class="cross">✗</span> Tidak bisa membaca gambar</td>
<td><span class="cross">✗</span> Hanya jika ada alternate text</td>
</tr>
<tr>
<td><strong>Keterbukaan teknologi</strong></td>
<td><span class="check">✓</span> Terbuka dan dapat diakses secara percuma</td>
<td><span class="cross">✗</span> Sulit diatur bagi kalangan umum</td>
<td><span class="cross">✗</span> Hanya beberapa teknologi</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2>Siapa yang Dapat Terbantu?</h2>
<p class="text-large">
Selain kalangan tunanetra, BINA AI juga bermanfaat bagi berbagai kalangan yang membutuhkan akses digital
yang lebih mudah dan inklusif. Berikut beberapa pengguna yang dapat terbantu:
</p>
<div class="benefits-grid">
<div class="benefit-card">
<span class="benefit-icon">👥</span>
<h4>Penyandang Tunanetra</h4>
<p>Baik kebutaan ringan hingga total dapat menggunakan BINA AI untuk mengakses internet dengan lebih mudah.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon">👴</span>
<h4>Lansia</h4>
<p>Membantu lansia yang mengalami penurunan fungsi motorik untuk tetap dapat berinteraksi dengan teknologi
digital.</p>
</div>
<div class="benefit-card">
<span class="benefit-icon">🎓</span>
<h4>Pelajar</h4>
<p>Mendukung proses pembelajaran online dan riset dengan akses yang lebih mudah ke materi pendidikan digital.
</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<h2>Contoh Penggunaan Sehari-hari</h2>
<h3>🔍 Pencarian Informasi</h3>
<p class="text-large">
"BINA, cari puskesmas terdekat di Bandung" → BINA AI akan membuka website Dinas Kesehatan, mencari daftar puskesmas,
dan menyampaikan semua lokasi serta detail puskesmas yang tersedia.
</p>
<h3>📖 Menyimpulkan Website</h3>
<p class="text-large">
"BINA, apa yang bisa disimpulkan dari Wikipedia ini?" → BINA AI akan mengekstrak teks dari halaman website,
lalu menyimpulkan informasi penting seperti ringkasan, poin-poin utama, dan struktur artikel.
</p>
<h3>✏️ Alat Pembelajaran</h3>
<p class="text-large">
"BINA, tolong berikan saya pertanyaan dari materi di web ini" → BINA AI akan memahami isi halaman website
lalu membuat pertanyaan-pertanyaan yang relevan untuk membantu pembelajaran.
</p>
<h3>🧑🤝🧑 Teman Virtual</h3>
<p class="text-large">
"BINA, saya merasa sedih karena putus cinta" → BINA AI akan mencari artikel atau video yang relevan tentang
cara mengatasi patah hati, lalu membacakan ringkasan atau memberikan saran yang bermanfaat.
</p>
<h3>🎵 Hiburan</h3>
<p class="text-large">
"BINA, sarankan saya musik tahun 90an" → BINA AI akan membuka platform streaming musik, menyarankan judul,
dan memulai pemutaran musik.
</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="highlight-box">
<h3>Teknologi Asistif Inovatif</h3>
<p>
Pada tanggal 28 Februari 2025, BINA AI telah mengantongi sertifikat hak cipta yang tercatat
di Pangkalan Data Kekayaan Intelektual dengan Nomor Pencatatan 000866863. Sertifikat dapat
diakses pada tautan di bawah ini.
</p>
</div>
<div class="links-section">
<h4>🔗 Informasi dan Sumber Daya</h4>
<p><strong>Source Code & Pengembangan:</strong><br>
<a href="https://github.com/sglkc/bina-ai" target="_blank" rel="noopener">github.com/sglkc/bina-ai</a><br>
Akses kode sumber lengkap untuk developer dan peneliti yang ingin berkontribusi.
</p>
<p><strong>Sertifikat Hak Cipta:</strong><br>
<a href="https://pdki-indonesia.dgip.go.id/link/454330303230323532363838307c636f70797269676874"
target="_blank" rel="noopener">Lihat Sertifikat PDKI Indonesia</a><br>
Sertifikat resmi dari Direktorat Jenderal Kekayaan Intelektual Republik Indonesia.
</p>
<p><strong>Dokumentasi Teknis:</strong><br>
<a href="dev.html">Panduan Developer</a><br>
Dokumentasi lengkap untuk instalasi, konfigurasi, dan pengembangan lebih lanjut.
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2025 BINA AI. Teknologi asistif untuk kehidupan digital yang lebih inklusif.</p>
<p>
<a href="https://github.com/sglkc/bina-ai">GitHub</a> •
<a href="https://pdki-indonesia.dgip.go.id/link/454330303230323532363838307c636f70797269676874">Sertifikat Hak
Cipta</a> •
<a href="dev.html">Dokumentasi</a>
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>