diff options
Diffstat (limited to '_www/index.html')
| -rw-r--r-- | _www/index.html | 354 |
1 files changed, 186 insertions, 168 deletions
diff --git a/_www/index.html b/_www/index.html index ce76842..1bfb45e 100644 --- a/_www/index.html +++ b/_www/index.html @@ -1,133 +1,154 @@ +<!-- +SPDX-FileCopyrightText: 2021 M. Shulhan <ms@kilabit.info> +SPDX-License-Identifier: GPL-3.0-or-later +--> + <!DOCTYPE html lang="id"> <html> - <head> - <title>Project Kamusku</title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> +<head> + <title>Project Kamusku</title> + + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + + <script type="text/javascript" src="/kamusku.js"></script> + <script type="text/javascript" src="/index.js"></script> + + <!-- Global site tag (gtag.js) - Google Analytics --> + <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2502278-8"></script> + <script> + window.dataLayer = window.dataLayer || [] + + function gtag() { + dataLayer.push(arguments) + } + gtag("js", new Date()) + + gtag("config", "UA-2502278-8") + </script> + + <style> + a { + text-decoration: none; + } + + body { + font-family: sans-serif; + margin: 0px auto; + width: 800px; + padding: 0px; + line-height: 1.25em; + } + + h2 { + border-bottom: 1px solid silver; + } + + input, + button { + height: 32px; + } - <script type="text/javascript" src="/kamusku.js"></script> - <script type="text/javascript" src="/index.js"></script> + pre { + overflow: auto; + background-color: cornsilk; + color: black; + padding: 1.25em; + border-radius: 5px; + line-height: 1em; + } - <!-- Global site tag (gtag.js) - Google Analytics --> - <script async src="https://www.googletagmanager.com/gtag/js?id=UA-2502278-8"></script> - <script> - window.dataLayer = window.dataLayer || [] - function gtag() { - dataLayer.push(arguments) - } - gtag("js", new Date()) + .topbar { + background: aliceblue; + font-size: 24px; + padding: 1em; + height: 24px; + } - gtag("config", "UA-2502278-8") - </script> + .topbar .title { + float: left; + } - <style> - a { - text-decoration: none; - } - body { - font-family: sans-serif; - margin: 0px auto; - width: 800px; - padding: 0px; - line-height: 1.25em; - } - h2 { - border-bottom: 1px solid silver; - } - input, - button { - height: 32px; - } - pre { - overflow: auto; - background-color: cornsilk; - color: black; - padding: 1.25em; - border-radius: 5px; - line-height: 1em; - } - .topbar { - background: aliceblue; - font-size: 24px; - padding: 1em; - height: 24px; - } - .topbar .title { - float: left; - } - .topbar .menu-item { - float: right; - } - .unduh { - display: inline-block; - } - .unduh-item { - float: left; - border: 1px solid silver; - border-radius: 5px; - padding: 6px; - margin: 10px 10px; - } - .row { - width: 100%; - display: flex; - } - .f-left { - width: 100%; - display: flex; - flex-flow: column; - height: 32px; - } - .b-right { - width: 200px; - display: flex; - flex-flow: column; - margin-left: 10px; - height: 32px; - } - .kelas-kata, - .contoh { - margin-left: 2em; - } + .topbar .menu-item { + float: right; + } - @media only screen and (max-width: 992px) { - body { - width: 90%; - } - .unduh-item { - text-align: center; - min-width: 200px; - max-width: 50%; - } - } - </style> - </head> - <body> - <div class="topbar"> - <div class="title">Proyek Kamusku</div> - <div class="menu"></div> - </div> + .unduh { + display: inline-block; + } - <p> - Proyek sumber terbuka implementasi HTTP API dan antar-muka perintah untuk Kamus Besar Bahasa - Indonesia. - </p> + .unduh-item { + float: left; + border: 1px solid silver; + border-radius: 5px; + padding: 6px; + margin: 10px 10px; + } - <h2>HTTP API</h2> + .row { + width: 100%; + display: flex; + } - <p>Kamusku HTTP API adalah jantung dari semua implementasi klien.</p> + .f-left { + width: 100%; + display: flex; + flex-flow: column; + height: 32px; + } - <h3>API Definisi</h3> - <p>HTTP API untuk mencari definisi dari satu atau lebih kata.</p> - <p>Format permintaan,</p> - <pre> + .b-right { + width: 200px; + display: flex; + flex-flow: column; + margin-left: 10px; + height: 32px; + } + + .kelas-kata, + .contoh { + margin-left: 2em; + } + + @media only screen and (max-width: 992px) { + body { + width: 90%; + } + + .unduh-item { + text-align: center; + min-width: 200px; + max-width: 50%; + } + } + </style> +</head> + +<body> + <div class="topbar"> + <div class="title">Proyek Kamusku</div> + <div class="menu"></div> + </div> + + <p> + Proyek sumber terbuka implementasi HTTP API dan antar-muka perintah untuk Kamus Besar Bahasa + Indonesia. + </p> + + <h2>HTTP API</h2> + + <p>Kamusku HTTP API adalah jantung dari semua implementasi klien.</p> + + <h3>API Definisi</h3> + <p>HTTP API untuk mencari definisi dari satu atau lebih kata.</p> + <p>Format permintaan,</p> + <pre> GET /definisi?kata=<string>,... -</pre - > +</pre> - <p>Format respons dalam JSON,</p> - <pre> + <p>Format respons dalam JSON,</p> + <pre> { "<string>": { "dasar": "<string>", @@ -141,65 +162,62 @@ GET /definisi?kata=<string>,... ] } } -</pre - > +</pre> - <p> - Jika kata tidak ditemukan atau bila kata bukan kata baku, bagian "pesan" akan berisi keterangan yang - menjelaskan galat dari pencarian. - </p> - <p> - Berikut contoh pemanggilan API untuk mencari definisi dari kata "kamus", "bahaza" (kata tidak - ditemukan), dan "analisa" (kata tidak baku): - <a href="/api/definisi?kata=kamus,bahaza,analisa" target="_blank"> - /api/definisi?kata=kamus,bahaza,analisa - </a> - </p> + <p> + Jika kata tidak ditemukan atau bila kata bukan kata baku, bagian "pesan" akan berisi keterangan yang + menjelaskan galat dari pencarian. + </p> + <p> + Berikut contoh pemanggilan API untuk mencari definisi dari kata "kamus", "bahaza" (kata tidak + ditemukan), dan "analisa" (kata tidak baku): + <a href="/api/definisi?kata=kamus,bahaza,analisa" target="_blank"> + /api/definisi?kata=kamus,bahaza,analisa + </a> + </p> - <h2>Definisi kata</h2> + <h2>Definisi kata</h2> - <div class="row"> - <div class="f-left"> - <input type="text" id="kata" maxlength="64" value="kamus,bahaza,analisa" /> - </div> - <div class="b-right"> - <button onclick="cariDefinisi()">Cari definisi</button> - </div> - </div> + <div class="row"> + <div class="f-left"> + <input type="text" id="kata" maxlength="64" value="kamus,bahaza,analisa" /> + </div> + <div class="b-right"> + <button onclick="cariDefinisi()">Cari definisi</button> + </div> + </div> - <p class="note">Catatan: Pisahkan kata dengan koma untuk mencari lebih dari satu kata.</p> + <p class="note">Catatan: Pisahkan kata dengan koma untuk mencari lebih dari satu kata.</p> - <div id="definisi-result"></div> + <div id="definisi-result"></div> - <h2>Bot Telegram</h2> + <h2>Bot Telegram</h2> - <p> - Dengan tersedianya API, membuka banyak implementasi terbuka lain, salah satunya yaitu Bot untuk - aplikasi Telegram: - <a href="https://t.me/KamuskuBot" target="_blank"> https://t.me/KamuskuBot </a> - </p> - <p> - Untuk saat ini, KamuskuBot hanya punya satu perintah yaitu "/definisi". Cara menggunakan perintah - ini hampir sama dengan program kamusku yaitu dengan memberikan kata yang dicari, contohnya, - </p> - <pre> + <p> + Dengan tersedianya API, membuka banyak implementasi terbuka lain, salah satunya yaitu Bot untuk + aplikasi Telegram: + <a href="https://t.me/KamuskuBot" target="_blank"> https://t.me/KamuskuBot </a> + </p> + <p> + Untuk saat ini, KamuskuBot hanya punya satu perintah yaitu "/definisi". Cara menggunakan perintah + ini hampir sama dengan program kamusku yaitu dengan memberikan kata yang dicari, contohnya, + </p> + <pre> /definisi kamus,bahasa -</pre - > +</pre> - <h2>Program kamusku</h2> + <h2>Program kamusku</h2> - <p>Program kamusku yaitu antar-muka untuk mencari definisi dari kata lewat baris perintah.</p> - <p> - Program ini sangat sederhana, cara menggunakannya cukup dengan memberikan kata yang dicari setelah - nama program, misalnya, - </p> - <pre> + <p>Program kamusku yaitu antar-muka untuk mencari definisi dari kata lewat baris perintah.</p> + <p> + Program ini sangat sederhana, cara menggunakannya cukup dengan memberikan kata yang dicari setelah + nama program, misalnya, + </p> + <pre> $ kamusku kamus,bahasa -</pre - > - <p>maka akan mencetak definisi dari kata "kamus" dan "bahasa" ke layar,</p> - <pre> +</pre> + <p>maka akan mencetak definisi dari kata "kamus" dan "bahasa" ke layar,</p> + <pre> === bahasa Definisi #1: sistem lambang bunyi yang arbitrer, yang digunakan oleh anggota suatu masyarakat untuk bekerja sama, berinteraksi, dan @@ -221,9 +239,9 @@ $ kamusku kamus,bahasa Kelas #1: Nomina: kata benda ... -</pre - > +</pre> + + <div class="unduh"></div> +</body> - <div class="unduh"></div> - </body> </html> |