<!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">
<canvas id="chip-canvas" class="canvas" width="640" height="320"></canvas>
</div>
</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 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 tiny-button-left">-</span>
<span id="logic-frequency">-</span> Hz
<span id="logic-frequency-plus" class="tiny-button tiny-button-right">+</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 tiny-button-left border padded">
<img src="res/pause.svg"/><span>Pause</span>
</span>
<span id="button-reset" class="tiny-button tiny-button-left border padded">
<img src="res/reset.svg"/><span>Reset</span>
</span>
<span id="button-benchmark" class="tiny-button tiny-button-left border padded">
<img src="res/bolt.svg"/><span>Benchmark</span>
</span>
<span id="button-fullscreen" class="tiny-button tiny-button-left border padded">
<img src="res/maximise.svg"/><span>Fullscreen</span>
</span>
<span id="button-information" class="tiny-button tiny-button-left border padded enabled">
<img src="res/info.svg"/><span>Information</span>
</span>
<span id="button-debug" class="tiny-button tiny-button-left border padded">
<img src="res/bug.svg"/><span>Debug</span>
</span>
<span id="button-theme" class="tiny-button tiny-button-left border padded">
<img src="res/marker.svg"/><span>Theme</span>
</span>
</div>
</div>
</div>
</div>
<div id="toast" class="toast">
There was an error loading the ROM file
</div>
</body>
<div id="modal-container" class="modal-container">
<div id="modal" class="modal">
<div class="modal-top-buttons">
<span class="tiny-button rounded no-text">
<img class="large" src="res/close.svg"/>
</span>
</div>
<h2 class="modal-title">Title</h2>
<p>Are you sure you want to cancel the operation?</p>
<div class="modal-buttons">
<span class="tiny-button tiny-button-left border padded">Cancel</span>
<span class="tiny-button border padded">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 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>