mirror of
https://github.com/whscullin/apple2js.git
synced 2024-01-12 14:14:38 +00:00
269 lines
8.8 KiB
HTML
269 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
|
|
|
|
Permission to use, copy, modify, distribute, and sell this software and its
|
|
documentation for any purpose is hereby granted without fee, provided that
|
|
the above copyright notice appear in all copies and that both that
|
|
copyright notice and this permission notice appear in supporting
|
|
documentation. No representations are made about the suitability of this
|
|
software for any purpose. It is provided "as is" without express or
|
|
implied warranty.
|
|
-->
|
|
<html>
|
|
<head>
|
|
|
|
<title>Apple //jse - An Apple //e Emulator in JavaScript</title>
|
|
|
|
<meta name="viewport" content="width=640 user-scalable=0" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-title" content="Apple //jse">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta charset="utf-8" />
|
|
<meta name="description" content="Apple //jse is an Apple //e emulator written using only JavaScript and HTML5. It has color display, sound and disk support." />
|
|
<meta name="keywords" content="apple2e,apple,ii,javascript,emulator,html5" />
|
|
|
|
<link rel="apple-touch-icon" href="img/webapp-iphone.png" />
|
|
<link rel="apple-touch-icon" size="72x72" href="img/webapp-ipad.png" />
|
|
<link rel="shortcut icon" href="img/logoicon.png" />
|
|
<link rel="stylesheet" type="text/css" href="css/apple2.css" />
|
|
<link rel="stylesheet" type="text/css"
|
|
href="//code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css" />
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" />
|
|
|
|
<!-- white text in controls -->
|
|
<style type="text/css">
|
|
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">
|
|
</script>
|
|
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js">
|
|
</script>
|
|
|
|
<!-- Disk Index -->
|
|
<script type="text/javascript" src="json/disks/index.js"></script>
|
|
|
|
</head>
|
|
<body class="apple2e"
|
|
ondragover="handleDragOver(0, event)"
|
|
ondrop="handleDrop(0, event)"
|
|
ondragend="handleDragEnd(0, event)">
|
|
<div class="outer">
|
|
<div id="header">
|
|
<a href="//www.w3.org/html/logo/" target="_blank">
|
|
<img src="//www.w3.org/html/logo/badge/html5-badge-h-solo.png" style="float: right" />
|
|
</a>
|
|
<a href="about.html" target="_blank">
|
|
<img src="img/badge2e.png" id="badge" />
|
|
</a>
|
|
<h1 id="subtitle">An Apple //e Emulator in JavaScript</h1>
|
|
</div>
|
|
<div id="display">
|
|
<div class="overscan"
|
|
onkeydown="_keydown(event);"
|
|
onkeyup="_keyup(event);">
|
|
<canvas id="screen" width="560" height="384"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="inset">
|
|
<div style="float: left; width: 50%"
|
|
ondragover="handleDragOver(1, event)"
|
|
ondrop="handleDrop(1, event)"
|
|
ondragend="handleDragEnd(1, event)">
|
|
<button id="diskload1" class="diskload" title="Load Disk"
|
|
onclick="openLoad(1, event);">
|
|
<i class="fas fa-folder-open"></i>
|
|
</button>
|
|
<button id="disksave1" class="disksave" title="Save Disk"
|
|
onclick="openSave(1, event);">
|
|
<i class="fas fa-save"></i>
|
|
</button>
|
|
<div class="disk" id="disk1"> </div>
|
|
<span id="disklabel1" class="disklabel">Disk 1</span>
|
|
</div>
|
|
<div style="float: left; width: 50%"
|
|
ondragover="handleDragOver(2, event)"
|
|
ondrop="handleDrop(2, event)"
|
|
ondragend="handleDragEnd(2, event)">
|
|
<button id="diskload2" class="diskload" title="Load Disk"
|
|
onclick="openLoad(2, event);">
|
|
<i class="fas fa-folder-open"></i>
|
|
</button>
|
|
<button id="disksave2" class="disksave" title="Save Disk"
|
|
onclick="openSave(2, event);">
|
|
<i class="fas fa-save"></i>
|
|
</button>
|
|
<div class="disk" id="disk2"> </div>
|
|
<span id="disklabel2" class="disklabel">Disk 2</span>
|
|
</div>
|
|
<div style="clear: both"></div>
|
|
</div>
|
|
<div style="position: relative">
|
|
<div id="controls" class="inset">
|
|
<div id="khz" onclick="showFPS = !showFPS">0KHz</div>
|
|
<button id="pause-run" onclick="pauseRun()">
|
|
<i class="fas fa-pause"></i>
|
|
</button>
|
|
<button id="toggle-sound" onclick="toggleSound()">
|
|
<i class="fas fa-volume-off"></i>
|
|
</button>
|
|
<button id="toggle-printer" onclick="$('#printer').dialog('open')" title="Toggle Printer">
|
|
<i class="fas fa-print"></i>
|
|
</button>
|
|
<div style="float: right">
|
|
<a class="button" href="about.html" target="_blank" title="About">
|
|
<i class="fas fa-info"></i>
|
|
</a>
|
|
<button onclick="$('#options').dialog('open')">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<input id="reset" type="button" value="Reset"
|
|
onclick="reset(event)"
|
|
oncontextmenu="reset(event)" />
|
|
</div>
|
|
<div class="inset">
|
|
<div id="keyboard"></div>
|
|
</div>
|
|
</div>
|
|
<div id="loading" title="Loading" style="display: none">
|
|
Loading...
|
|
</div>
|
|
<div id="options" title="Options" style="display: none">
|
|
<h3>Type</h3>
|
|
<ul>
|
|
<li>
|
|
<select id="computer_type2e" value="apple2enh" onchange="updateCPU()">
|
|
<option value="apple2enh">Enhanced Apple //e</option>
|
|
<option value="apple2e">Apple //e</option>
|
|
<option value="apple2rm">Enhanced Apple //e (Reactive Micro)</option>
|
|
</select>
|
|
</li>
|
|
<li>
|
|
<i>* Reload page to take effect</i>
|
|
</li>
|
|
</ul>
|
|
<h3>CPU</h3>
|
|
<ul>
|
|
<li>
|
|
<input type="checkbox" id="accelerator_toggle" onclick="updateCPU()"/>
|
|
<label for="accelerator_toggle">
|
|
Accelerated CPU
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
<h3>Joystick</h3>
|
|
<ul>
|
|
<li>
|
|
<input type="checkbox" id="disable_mouse"
|
|
onclick="updateJoystick()" />
|
|
<label for="disable_mouse">
|
|
Disable Mouse Joystick
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="flip_x"
|
|
onclick="updateJoystick()" />
|
|
<label for="flip_x">
|
|
Flip X-Axis
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="flip_y"
|
|
onclick="updateJoystick()" />
|
|
<label for="flip_y">
|
|
Flip Y-Axis
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="swap_x_y"
|
|
onclick="updateJoystick()" />
|
|
<label for="swap_x_y">
|
|
Swap X-Y Axis
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
<h3>Monitor</h3>
|
|
<ul>
|
|
<li>
|
|
<input type="checkbox" id="green_screen"
|
|
onclick="updateScreen()" />
|
|
<label for="green_screen">
|
|
Green Screen
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="show_scanlines"
|
|
onclick="updateScreen()" />
|
|
<label for="show_scanlines">
|
|
Show Scanlines
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
<h3>Sound</h3>
|
|
<ul>
|
|
<li>
|
|
<input type="checkbox" id="enable_sound"
|
|
onclick="updateSound()" checked="checked" />
|
|
<label for="enable_sound">
|
|
Enable (Experimental)
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="save" title="Save Disk" style="display: none">
|
|
<form action="#" onsubmit="return false;">
|
|
<b>Save to Browser</b>
|
|
<br /><br />
|
|
Save Name: <input type="text" name="name" id="save_name"
|
|
style="width: 200px" />
|
|
</form>
|
|
<hr />
|
|
<div>
|
|
<b>Download to Local Disk</b>
|
|
<br /><br />
|
|
<a id="local_save_link" class="button">Download</a>
|
|
</div>
|
|
</div>
|
|
<div id="manage" title="Manage Disks" style="display: none">
|
|
</div>
|
|
<div id="http_load" title="Load URL" style="display: none">
|
|
<form action="#">
|
|
<input type="text" id="http_url" style="width: 500px"/>
|
|
</form>
|
|
</div>
|
|
<div id="load" title="Load Disk" style="display: none">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<select id="category_select" multiple="multiple"
|
|
class="ui-widget ui-state-default"
|
|
onchange="selectCategory(event)" >
|
|
</select>
|
|
</td>
|
|
<td>
|
|
<select id="disk_select" multiple="multiple"
|
|
class="ui-widget ui-state-default"
|
|
onchange="selectDisk(event)"
|
|
ondblclick="clickDisk(event)">
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<form action="#">
|
|
<input type="file" id="local_file" />
|
|
</form>
|
|
</div>
|
|
<div id="printer" title="Printer" style="display: none">
|
|
<div class="paper">
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="dist/main2e.js"></script>
|
|
</body>
|
|
</html>
|