Skip to content
Snippets Groups Projects
Verified Commit 8fda09ff authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: new alt attributes

parent d1a6ab9c
No related branches found
No related tags found
No related merge requests found
Pipeline #731 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
examples/web/index.html
+ 136
− 128
View file @ 8fda09ff
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<title>CHIP-Ahoyto</title> <head>
<meta charset="utf-8"> <title>CHIP-Ahoyto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="res/icon.png" /> <meta name="viewport"
<link rel="stylesheet" href="index.css" /> content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" />
</head> <link rel="icon" href="res/icon.png" />
<body> <link rel="stylesheet" href="index.css" />
<div class="main"> </head>
<div class="side-left">
<div id="canvas-container" class="canvas-container"> <body>
<span id="canvas-close" class="magnify-button canvas-close"> <div class="main">
<img class="large" src="res/minimise.svg"/> <div class="side-left">
</span> <div id="canvas-container" class="canvas-container">
<canvas id="chip-canvas" class="canvas" width="640" height="320"></canvas> <span id="canvas-close" class="magnify-button canvas-close">
</div> <img class="large" src="res/minimise.svg" alt="minimise" />
</span>
<canvas id="chip-canvas" class="canvas" width="640" height="320"></canvas>
</div> </div>
<div class="side-right"> </div>
<h1>CHIP-Ahoyto <span id="version"></span> <img class="logo-image" src="res/thunder.png" /></h1> <div class="side-right">
<div class="separator"></div> <h1>CHIP-Ahoyto <span id="version"></span> <img class="logo-image" src="res/thunder.png" alt="thunder" /></h1>
<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> <div class="separator"></div>
<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>This is a <a href="https://en.wikipedia.org/wiki/CHIP-8" target="_blank">CHIP-8</a> emulator built using
<p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p> the <a href="https://www.rust-lang.org" target="_blank">Rust Programming Language</a> and is running
<div class="separator"></div> inside this browser with the help of <a href="https://webassembly.org/" target="_blank">WebAssembly</a>.
<div if="section-keyboard" class="section"> </p>
<div id="keyboard" class="keyboard"> <p>You can check the source code of it at <a href="https://gitlab.stage.hive.pt/joamag/chip-ahoyto"
<div class="keyboard-line"> target="_blank">GitLab</a>.</p>
<span class="key">1</span> <p>TIP: Drag and Drop ROM files to the Browser to load the ROM.</p>
<span class="key">2</span> <div class="separator"></div>
<span class="key">3</span> <div if="section-keyboard" class="section">
<span class="key">4</span> <div id="keyboard" class="keyboard">
</div> <div class="keyboard-line">
<div class="keyboard-line"> <span class="key">1</span>
<span class="key">Q</span> <span class="key">2</span>
<span class="key">W</span> <span class="key">3</span>
<span class="key">E</span> <span class="key">4</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="keyboard-line">
<div class="separator"></div> <span class="key">Q</span>
<div id="section-diag" class="section"> <span class="key">W</span>
<dl class="diag"> <span class="key">E</span>
<dt>Engine</dt> <span class="key">R</span>
<dd id="engine" class="tiny-button">-</dd> </div>
<dt>ROM</dt> <div class="keyboard-line">
<dd id="rom-name">-</dd> <span class="key">A</span>
<dt>ROM Size</dt> <span class="key">S</span>
<dd><span id="rom-size">-</span> bytes</dd> <span class="key">D</span>
<dt>CPU Frequency</dt> <span class="key">F</span>
<dd> </div>
<span id="logic-frequency-minus" class="tiny-button">-</span> <div class="keyboard-line">
<span id="logic-frequency">-</span> Hz <span class="key">Z</span>
<span id="logic-frequency-plus" class="tiny-button">+</span></dd> <span class="key">X</span>
<dt>Framerate</dt> <span class="key">C</span>
<dd><span id="fps-count">-</span> fps</dd> <span class="key">V</span>
</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> </div>
</div> </div>
</div> </div>
</div> <div class="separator"></div>
<div class="toast-container"> <div id="section-diag" class="section">
<div id="toast" class="toast"></div> <dl class="diag">
</div> <dt>Engine</dt>
</body> <dd id="engine" class="tiny-button">-</dd>
<div id="modal-container" class="modal-container"> <dt>ROM</dt>
<div id="modal" class="modal"> <dd id="rom-name">-</dd>
<div class="modal-top-buttons"> <dt>ROM Size</dt>
<span id="modal-close" class="tiny-button rounded no-text"> <dd><span id="rom-size">-</span> bytes</dd>
<img class="medium" src="res/close.svg"/> <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> </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>
</div> </div>
<div id="overlay" class="overlay"> </div>
<div class="overlay-container"> <div class="toast-container">
<div class="overlay-text"> <div id="toast" class="toast"></div>
Drag to load ROM <span id="rom-name"></span> </div>
</div> </body>
<div class="overlay-image"> <div id="modal-container" class="modal-container">
<img src="res/sunglasses.png" /> <div id="modal" class="modal">
</div> <div class="modal-top-buttons">
</div> <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>
<div id="footer-background" class="footer-background"></div> <div class="overlay-image">
<div id="footer" class="footer"> <img src="res/sunglasses.png" alt="sunglasses" />
Built with ❤️ by <a href="https://joao.me" target="_blank">João Magalhães</a>
</div> </div>
<script type="module" src="index.ts"></script> </div>
</body> </div>
</html> <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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment