<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta content="URCL-rs" property="og:title"/>
<meta content="A 🚀blazingly fast🚀 URCL emulator" property="og:description"/>
<link rel="stylesheet" href="index.css" />
<script src="script.js" type="module"></script>
<script src="src/web/editor/editor.js" type="module"></script>
<link rel="stylesheet" href="src/web/editor/editor.css">
<title>URCL-rs</title>
</head>
<body>
<nav id="navbar">
<button class="symbol red debug_only">DEBUG TOOLS</button>
<button class="symbol green" id="emulate">COMPILE/RUN</button>
<button class="symbol yellow" id="pause" disabled>DONE</button>
<button class="symbol blue" id="document_link">DOCUMENTATION</button>
<button class="symbol yellow" id="examples">EXAMPLES</button>
<button class="symbol magenta" id="settings">SETTINGS</button>
<button class="symbol" id="clear">CLEAR</button>
</nav>
<main>
<editor-window name="code_input" id="code_input"></editor-window>
<canvas id="screen"></canvas>
<div id="stdout"></div>
</main>
<div id="settings_sec" class="section">
<nav>
<button class="symbol red" id="exit_settings">Exit Settings</button>
</nav>
<div class="section-seperater">Emulator</div>
<div class="card">
<div class="card-title">
<h4>Screen size</h4>
<span class="card-option">
<input class="green" id="screen_width" type="number"> x <input class="green" id="screen_height" type="number">
</span>
</div>
<p>Set the emulator's screen size</p>
</div>
<div class="section-seperater">Editor</div>
<div class="card">
<div class="card-title">
<h4>Auto emulating</h4>
<input class="card-option green" id="auto_emulate" type="checkbox">
</div>
<p>Enabling this will automatically emulate your code as you type.</p>
</div>
<div class="card">
<div class="card-title">
<h4>Tab size</h4>
<input class="card-option green" id="tab_size" type="number">
</div>
<p>Adjust the tab size in characters.</p>
</div>
<div class="section-seperater">Miscellaneous</div>
<div class="card">
<div class="card-title">
<h4>Debug options</h4>
<input class="card-option green" id="debug_option" type="checkbox">
</div>
<p>Enabling this will display more buttons on the navigation bar used for debugging.</p>
</div>
</div>
<div id="example_sec" class="section">
<nav>
<button class="symbol red" id="exit_examples">Exit Examples</button>
</nav>
<div class="card">
<div class="card-title">
<h4>Hello World</h4>
<button class="example_link card-option green" data-link=".?src-example=hello_world">Open</button>
</div>
<p>Prints "Hello World!" to the console.</p>
</div>
<div class="card">
<div class="card-title">
<h4>Fibonacci Sequence</h4>
<button class="example_link card-option green" data-link=".?src-example=fib">Open</button>
</div>
<p>Prints the Fibonacci Sequence to the console.</p>
</div>
<div class="card">
<div class="card-title">
<h4>Macros</h4>
<button class="example_link card-option green" data-link=".?src-example=macros">Open</button>
</div>
<p>A demo of URCL macros and how it can be used to make your code more readable.</p>
</div>
<div class="card">
<div class="card-title">
<h4>Sieve of Eratosthenes</h4>
<button class="example_link card-option green" data-link=".?src-example=32b_prime_sieve">Open</button>
</div>
<p>Prints all primes of 32bit using the Sieve of Eratosthenes algorithm to the console.</p>
</div>
</div>
</body>
</html>