diff options
Diffstat (limited to 'static/mips.html')
| -rw-r--r-- | static/mips.html | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/static/mips.html b/static/mips.html new file mode 100644 index 0000000..219034c --- /dev/null +++ b/static/mips.html @@ -0,0 +1,158 @@ +<!DOCTYPE HTML> +<html> + +<head> + <meta http-equiv="Content-type" content="text/html; charset=utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>MIPS (dis)assembler</title> + <link rel="stylesheet" href="/style.css"/> + + <style> +body { + max-width: 90%; +} + +textarea { + resize: none; + width: 45%; + font-size: 110%; + font-family: monospace; + font-variant-ligatures: none; + color: var(--pre-fg); + background: var(--pre-bg); + border: 1px solid var(--border1); + border-radius: 5px; +} + +.option { + display: inline-block; + color: var(--code-fg); + background: var(--code-bg); + border: 1px solid var(--border1); + border-radius: 5px; + margin-right: 10px; + margin-top: 5px; + margin-bottom: 5px; + padding-left: 5px; + padding-right: 5px; + padding-bottom: 5px; +} + +label { + font-family: monospace; + font-size: 14px; + position: relative; + margin-bottom: 10px; +} +input[type="text"] { + margin: 0; + font-family: monospace; + font-variant-ligatures: none; + background: var(--code-bg); + border: 1px solid var(--border2); + color: var(--fg); + font-size: 16px; + appearance: none; + box-shadow: none; + border-radius: 3px; +} +input[type="checkbox"] { + margin: 0; + position: relative; + top: 2px; +} +select { + font-family: monospace; + background: var(--code-bg); + border: 1px solid var(--border2); + border-radius: 3px; + color: var(--fg); + font-size: 15px; + margin-left: 2px; +} + +button { +} + +hr { + position: absolute; + width: 78%; + left: 12.2%; +} + + </style> + +</head> + +<body> + <div style="width: 85%; margin: 0 auto; padding-left: 10%;"> + <noscript>JavaScript is required</noscript> + <h2>MIPS Assembler</h2> + <p>Input MIPS assembly code below. Labels, .org and simple .word directives are also recognized. Comments start with ';' and extend to the end of the line.</p> + <textarea wrap='off' rows="15" id="assembler-input" placeholder="MIPS assembly input" spellcheck="false"></textarea> + <textarea wrap='off' rows="15" readonly id="assembler-output" placeholder="Assembler output"></textarea> + <br> + <div class="option"> + <input type='checkbox' id="assembler-hideaddr"> + <label for='assembler-hideaddr'>Hide Addresses</label> + </div> + <div class="option"> + <input type='checkbox' id="assembler-hidemnemonic"> + <label for="assembler-hidemnemonic">Hide Mnemonics</label> + </div> + <div class="option"> + <input type='checkbox' id="assembler-hidenote"> + <label for="assembler-hidenote">Hide Annotations</label> + </div> + <div class="option"> + <select id="assembler-endian"> + <option value="big" selected>Big</option> + <option value="little">Little</option> + </select> + <label for="assembler-endian">Endianness</label> + </div> + <button class="option" onclick="assembleAndPresent();">ASSEMBLE</button> + <br><br><hr><br> + + <h2>MIPS Disassembler</h2> + <p>Input MIPS machine code in hexadecimal below.</p> + <div class="option"> + <label>.org (Start Address)</label> + <input type='text' id="disassembler-org" size="8" placeholder="00000000" spellcheck="false"> + </div> + <br> + <textarea wrap='off' rows="15" id="disassembler-input" placeholder="MIPS machine code in hex" spellcheck="false"></textarea> + <textarea wrap='off' rows="15" readonly id="disassembler-output" placeholder="Disassembler output"></textarea> + <br> + <div class="option"> + <input type='checkbox' id="disassembler-hideaddr"> + <label for='disassembler-hideaddr'>Hide Addresses</label> + </div> + <div class="option"> + <input type='checkbox' id="disassembler-hidehex"> + <label for="disassembler-hidehex">Hide Hex</label> + </div> + <div class="option"> + <input type='checkbox' id="disassembler-hidenote"> + <label for="disassembler-hidenote">Hide Annotations</label> + </div> + <div class="option"> + <select id="disassembler-endian"> + <option value="big" selected>Big</option> + <option value="little">Little</option> + </select> + <label for="disassembler-endian">Endianness</label> + </div> + + <button class="option" onclick="disassembleAndPresent();">DISASSEMBLE</button> + + <br><br><hr><br> + <a href="mips.js">source</a> <br> + <a href="/">go back</a> + + </div> + + <script type="text/javascript" src='./mips.js'></script> +</body> + +</html> |