diff --git a/examples/web/index.html b/examples/web/index.html
index 9d89b34c49a386d27333cfeee0acb55f33720402..e012426daef60b036b49793ba0599d625aa455d9 100644
--- a/examples/web/index.html
+++ b/examples/web/index.html
@@ -1,141 +1,149 @@
<!DOCTYPE html>
<html>
- <head>
- <title>CHIP-Ahoyto</title>
- <meta charset="utf-8">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
- <link rel="icon" href="res/icon.png" />
- <link rel="stylesheet" href="index.css" />
- </head>
- <body>
- <div class="main">
- <div class="side-left">
- <div id="canvas-container" class="canvas-container">
- <span id="canvas-close" class="magnify-button canvas-close">
- <img class="large" src="res/minimise.svg"/>
- </span>
- <canvas id="chip-canvas" class="canvas" width="640" height="320"></canvas>
- </div>
+
+<head>
+ <title>CHIP-Ahoyto</title>
+ <meta charset="utf-8">
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta name="viewport"
+ content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
+ <link rel="icon" href="res/icon.png" />
+ <link rel="stylesheet" href="index.css" />
+</head>
+
+<body>
+ <div class="main">
+ <div class="side-left">
+ <div id="canvas-container" class="canvas-container">
+ <span id="canvas-close" class="magnify-button canvas-close">
+ <img class="large" src="res/minimise.svg" alt="minimise" />
+ </span>
+ <canvas id="chip-canvas" class="canvas" width="640" height="320"></canvas>
</div>
- <div class="side-right">
- <h1>CHIP-Ahoyto <span id="version"></span> <img class="logo-image" src="res/thunder.png" /></h1>
- <div class="separator"></div>
- <p>This is a <a href="https://en.wikipedia.org/wiki/CHIP-8" target="_blank">CHIP-8</a> emulator built using the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> and is running inside this browser with the help of <a href="https://webassembly.org/" target="_blank">WebAssembly</a>.</p>
- <p>You can check the source code of it at <a href="https://gitlab.stage.hive.pt/joamag/chip-ahoyto" target="_blank">GitLab</a>.</p>
- <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
- <div class="separator"></div>
- <div if="section-keyboard" class="section">
- <div id="keyboard" class="keyboard">
- <div class="keyboard-line">
- <span class="key">1</span>
- <span class="key">2</span>
- <span class="key">3</span>
- <span class="key">4</span>
- </div>
- <div class="keyboard-line">
- <span class="key">Q</span>
- <span class="key">W</span>
- <span class="key">E</span>
- <span class="key">R</span>
- </div>
- <div class="keyboard-line">
- <span class="key">A</span>
- <span class="key">S</span>
- <span class="key">D</span>
- <span class="key">F</span>
- </div>
- <div class="keyboard-line">
- <span class="key">Z</span>
- <span class="key">X</span>
- <span class="key">C</span>
- <span class="key">V</span>
- </div>
+ </div>
+ <div class="side-right">
+ <h1>CHIP-Ahoyto <span id="version"></span> <img class="logo-image" src="res/thunder.png" alt="thunder" /></h1>
+ <div class="separator"></div>
+ <p>This is a <a href="https://en.wikipedia.org/wiki/CHIP-8" target="_blank">CHIP-8</a> emulator built using
+ the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> and is running
+ inside this browser with the help of <a href="https://webassembly.org/" target="_blank">WebAssembly</a>.
+ </p>
+ <p>You can check the source code of it at <a href="https://gitlab.stage.hive.pt/joamag/chip-ahoyto"
+ target="_blank">GitLab</a>.</p>
+ <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
+ <div class="separator"></div>
+ <div if="section-keyboard" class="section">
+ <div id="keyboard" class="keyboard">
+ <div class="keyboard-line">
+ <span class="key">1</span>
+ <span class="key">2</span>
+ <span class="key">3</span>
+ <span class="key">4</span>
</div>
- </div>
- <div class="separator"></div>
- <div id="section-diag" class="section">
- <dl class="diag">
- <dt>Engine</dt>
- <dd id="engine" class="tiny-button">-</dd>
- <dt>ROM</dt>
- <dd id="rom-name">-</dd>
- <dt>ROM Size</dt>
- <dd><span id="rom-size">-</span> bytes</dd>
- <dt>CPU Frequency</dt>
- <dd>
- <span id="logic-frequency-minus" class="tiny-button">-</span>
- <span id="logic-frequency">-</span> Hz
- <span id="logic-frequency-plus" class="tiny-button">+</span></dd>
- <dt>Framerate</dt>
- <dd><span id="fps-count">-</span> fps</dd>
- </dl>
- </div>
- <div id="separator-diag" class="separator"></div>
- <div class="section">
- <div class="button-area">
- <span id="button-pause" class="tiny-button border padded">
- <img src="res/pause.svg"/><span>Pause</span>
- </span>
- <span id="button-reset" class="tiny-button border padded">
- <img src="res/reset.svg"/><span>Reset</span>
- </span>
- <span id="button-benchmark" class="tiny-button border padded">
- <img src="res/bolt.svg"/><span>Benchmark</span>
- </span>
- <span id="button-fullscreen" class="tiny-button border padded">
- <img src="res/maximise.svg"/><span>Fullscreen</span>
- </span>
- <span id="button-information" class="tiny-button border padded enabled">
- <img src="res/info.svg"/><span>Information</span>
- </span>
- <span id="button-debug" class="tiny-button border padded">
- <img src="res/bug.svg"/><span>Debug</span>
- </span>
- <span id="button-theme" class="tiny-button border padded">
- <img src="res/marker.svg"/><span>Theme</span>
- </span>
- <span id="button-upload" class="tiny-button border padded file">
- <img src="res/upload.svg"/><span>Upload ROM</span>
- <input type="file" id="button-upload-file" name="button-upload-file" accept=".ch8">
- </span>
+ <div class="keyboard-line">
+ <span class="key">Q</span>
+ <span class="key">W</span>
+ <span class="key">E</span>
+ <span class="key">R</span>
+ </div>
+ <div class="keyboard-line">
+ <span class="key">A</span>
+ <span class="key">S</span>
+ <span class="key">D</span>
+ <span class="key">F</span>
+ </div>
+ <div class="keyboard-line">
+ <span class="key">Z</span>
+ <span class="key">X</span>
+ <span class="key">C</span>
+ <span class="key">V</span>
</div>
</div>
</div>
- </div>
- <div class="toast-container">
- <div id="toast" class="toast"></div>
- </div>
- </body>
- <div id="modal-container" class="modal-container">
- <div id="modal" class="modal">
- <div class="modal-top-buttons">
- <span id="modal-close" class="tiny-button rounded no-text">
- <img class="medium" src="res/close.svg"/>
+ <div class="separator"></div>
+ <div id="section-diag" class="section">
+ <dl class="diag">
+ <dt>Engine</dt>
+ <dd id="engine" class="tiny-button">-</dd>
+ <dt>ROM</dt>
+ <dd id="rom-name">-</dd>
+ <dt>ROM Size</dt>
+ <dd><span id="rom-size">-</span> bytes</dd>
+ <dt>CPU Frequency</dt>
+ <dd>
+ <span id="logic-frequency-minus" class="tiny-button">-</span>
+ <span id="logic-frequency">-</span> Hz
+ <span id="logic-frequency-plus" class="tiny-button">+</span></dd>
+ <dt>Framerate</dt>
+ <dd><span id="fps-count">-</span> fps</dd>
+ </dl>
+ </div>
+ <div id="separator-diag" class="separator"></div>
+ <div class="section">
+ <div class="button-area">
+ <span id="button-pause" class="tiny-button border padded">
+ <img src="res/pause.svg" alt="pause" /><span>Pause</span>
+ </span>
+ <span id="button-reset" class="tiny-button border padded">
+ <img src="res/reset.svg" alt="reset" /><span>Reset</span>
+ </span>
+ <span id="button-benchmark" class="tiny-button border padded">
+ <img src="res/bolt.svg" alt="bolt" /><span>Benchmark</span>
+ </span>
+ <span id="button-fullscreen" class="tiny-button border padded">
+ <img src="res/maximise.svg" alt="maximise" /><span>Fullscreen</span>
+ </span>
+ <span id="button-information" class="tiny-button border padded enabled">
+ <img src="res/info.svg" alt="info" /><span>Information</span>
+ </span>
+ <span id="button-debug" class="tiny-button border padded">
+ <img src="res/bug.svg" alt="bug" /><span>Debug</span>
+ </span>
+ <span id="button-theme" class="tiny-button border padded">
+ <img src="res/marker.svg" alt="marker" /><span>Theme</span>
+ </span>
+ <span id="button-upload" class="tiny-button border padded file">
+ <img src="res/upload.svg" alt="upload" /><span>Upload ROM</span>
+ <input type="file" id="button-upload-file" name="button-upload-file" accept=".ch8">
</span>
- </div>
- <h2 id="modal-title" class="modal-title">Alert</h2>
- <p id="modal-text" class="modal-text">Are you sure you want to cancel the operation?</p>
- <div class="modal-buttons">
- <span id="modal-cancel" class="tiny-button red border padded-large">Cancel</span>
- <span id="modal-confirm" class="tiny-button border padded-large">Confirm</span>
</div>
</div>
</div>
- <div id="overlay" class="overlay">
- <div class="overlay-container">
- <div class="overlay-text">
- Drag to load ROM <span id="rom-name"></span>
- </div>
- <div class="overlay-image">
- <img src="res/sunglasses.png" />
- </div>
- </div>
+ </div>
+ <div class="toast-container">
+ <div id="toast" class="toast"></div>
+ </div>
+</body>
+<div id="modal-container" class="modal-container">
+ <div id="modal" class="modal">
+ <div class="modal-top-buttons">
+ <span id="modal-close" class="tiny-button rounded no-text">
+ <img class="medium" src="res/close.svg" alt="close" />
+ </span>
+ </div>
+ <h2 id="modal-title" class="modal-title">Alert</h2>
+ <p id="modal-text" class="modal-text">Are you sure you want to cancel the operation?</p>
+ <div class="modal-buttons">
+ <span id="modal-cancel" class="tiny-button red border padded-large">Cancel</span>
+ <span id="modal-confirm" class="tiny-button border padded-large">Confirm</span>
+ </div>
+ </div>
+</div>
+<div id="overlay" class="overlay">
+ <div class="overlay-container">
+ <div class="overlay-text">
+ Drag to load ROM <span id="rom-name"></span>
</div>
- <div id="footer-background" class="footer-background"></div>
- <div id="footer" class="footer">
- Built with â¤ï¸ by <a href="https://joao.me" target="_blank">João Magalhães</a>
+ <div class="overlay-image">
+ <img src="res/sunglasses.png" alt="sunglasses" />
</div>
- <script type="module" src="index.ts"></script>
- </body>
-</html>
+ </div>
+</div>
+<div id="footer-background" class="footer-background"></div>
+<div id="footer" class="footer">
+ Built with â¤ï¸ by <a href="https://joao.me" target="_blank">João Magalhães</a>
+</div>
+<script type="module" src="index.ts"></script>
+</body>
+
+</html>
\ No newline at end of file