mirror of
https://github.com/whscullin/apple2js.git
synced 2024-01-12 14:14:38 +00:00
293 lines
10 KiB
HTML
293 lines
10 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 ][js - An Apple 2 Emulator in JavaScript</title>
|
|
|
|
<meta name="viewport" content="width=640, height=device-height, user-scalable=no" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-title" content="Apple ][js">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta charset="utf-8" />
|
|
<meta name="description" content="Apple ][js is an Apple ][ emulator written using only JavaScript and HTML5. It has color display, sound and disk support. It works best in the Chrome and Safari browsers." />
|
|
<meta name="keywords" content="apple2,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="http://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" />
|
|
|
|
<meta property="og:title" content="Apple ][js" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:description" content="Apple ][js is an Apple 2 emulator written using only JavaScript and HTML5." />
|
|
<meta property="og:url" content="http://www.scullinsteel.com/apple2/" />
|
|
<meta property="og:image" content="http://www.scullinsteel.com/apple2/img/image.png" />
|
|
<meta property="fb:admins" content="700585391" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
|
|
</script>
|
|
<script type="text/javascript" src="http://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="apple2"
|
|
ondragover="handleDragOver(0, event)"
|
|
ondrop="handleDrop(0, event)"
|
|
ondragend="handleDragEnd(0, event)">
|
|
<div id="fb-root"></div>
|
|
<div style="margin: auto; width: 614px">
|
|
<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/badge.png" id="badge" />
|
|
</a>
|
|
<h1 id="subtitle">An Apple ][ Emulator in JavaScript</h1>
|
|
</div>
|
|
<div id="display">
|
|
<div class="overscan">
|
|
<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(2, 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 class="inset">
|
|
<div id="khz" onclick="showFPS = !showFPS">0KHz</div>
|
|
<button id="pause-run" onclick="pauseRun()" title="Pause/Run">
|
|
<i class="fas fa-pause"></i>
|
|
</button>
|
|
<button id="toggle-sound" onclick="toggleSound()" title="Toggle Sound">
|
|
<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')" title="Options">
|
|
<i class="fas fa-cog"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="inset">
|
|
<div style="margin: 0 10px">
|
|
<div id="keyboard"></div>
|
|
<div id="textarea" style="display: none">
|
|
<button onclick="io.keyDown(0x1b)">
|
|
ESC
|
|
</button>
|
|
<button onclick="reset()" style="float: right; margin-left: 10px">
|
|
Reset
|
|
</button>
|
|
<button onclick="io.keyDown(0x15)" style="float: right">
|
|
→
|
|
</button>
|
|
<button onclick="io.keyDown(0x08)" style="float: right">
|
|
←
|
|
</button>
|
|
<label for="text_input">Text Input</label>
|
|
<textarea rows="10" style="width: 99%" id="text_input"></textarea>
|
|
<br />
|
|
<button onclick="io.setKeyBuffer($('#text_input').val())">
|
|
Send
|
|
</button>
|
|
<input type="checkbox" id="buffering" />
|
|
<label for="buffering">Buffer</label>
|
|
<button style="float: right"
|
|
onclick="$('#keyboard').show(); $('#textarea').hide()">
|
|
Keyboard
|
|
</button>
|
|
</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_type2" value="apple2plus" onchange="updateCPU()">
|
|
<option value="apple2plus">Apple ][+</option>
|
|
<option value="apple2">Autostart Apple ][</option>
|
|
<option value="original">Apple ][</option>
|
|
<option value="apple2j">Apple ][j+</option>
|
|
<option value="apple2lc">Apple ][+ (lowercase font)</option>
|
|
<option value="apple2pig">Apple ][+ (pig font)</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 src="dist/main2.js"></script>
|
|
</body>
|
|
</html>
|