Initial commit
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4f8a689
--- /dev/null
+++ b/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+
+<div class="wrapper">
+<input type="text" id="searchbox" placeholder="Search RISC-V Instructions"></input>
+</div>
+
+<div id="ilist">
+</div>
+
+<hr>
+
+<p class="cite">
+ These listings are generated from documentation written
+ by <a href="https://hg.sr.ht/~icefox/riscv-reference">~icefox</a>
+ on sourcehut. Website created by <a href="https://swisschili.sh">swissChili</a>.
+</p>
+<p class="cite">
+ This documentation is incomplete for now. Check the ~icefox link
+ for what is currently implemented.
+</p>
+
+<style>
+ body {
+ font-family: sans-serif;
+ max-width: 50em;
+ margin: auto;
+ padding: 10px;
+ }
+
+ dt {
+ font-weight: bold;
+ }
+
+ dd div,
+ #searchbox {
+ background: #fcfaf2;
+ padding: 4px;
+ border-radius: 4px;
+ border: 1px solid #f4f2e8;
+ }
+
+ #searchbox {
+ font-size: 14pt;
+ padding: 12px 20px;
+ width: min-content;
+ }
+
+ .wrapper {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 4em;
+ margin-top: 2em;
+ }
+
+ .cite {
+ font-style: italic;
+ text-align: center;
+ }
+
+ hr {
+ border-color: #CCC;
+ }
+</style>
+
+<script>
+ function setup(instructions)
+ {
+ console.log(instructions);
+
+ function handler()
+ {
+ let html = "";
+
+ console.log("searched");
+
+ let q = searchbox.value.toLowerCase();
+
+ console.log({q});
+
+ for (let item of instructions)
+ {
+ if (!item.mnemonic.toLowerCase().includes(q) &&
+ !item.name.toLowerCase().includes(q))
+ continue;
+
+ let desc = item.long_description.replace("\n\n", "</p><p>");
+
+ html += `
+ <dt>${item.mnemonic} - ${item.name}</dt>
+ <dd>
+ <div>encoding: ${item.encoding}, extension: ${item.extension}, opcode: ${item.opcode}</div>
+ <p>${desc}</p>
+ </dd>
+ `;
+ }
+
+ ilist.innerHTML = html;
+ };
+
+ searchbox.addEventListener("input", handler);
+ handler();
+ }
+
+ fetch("instructions.json")
+ .then(res => res.json())
+ .then(setup);
+</script>