Aktualizovat doswasmx/start.html

This commit is contained in:
minigist 2025-01-04 11:50:48 +01:00
parent ad7d5af6d2
commit 9cf772789e

View file

@ -1,442 +1,442 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>DOS Wasm X</title> <title>DOS Wasm X</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="keywords" content="DOS Emulator, DOS JavaScript Emulator, WebAssembly, HTML5"> <meta name="keywords" content="DOS Emulator, DOS JavaScript Emulator, WebAssembly, HTML5">
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.9.6/rivets.bundled.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.9.6/rivets.bundled.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
<!-- when developing offline --> <!-- when developing offline -->
<!-- <script src="jquery-3.3.1.min.js"></script> <!-- <script src="jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome.min.css">
<script src="rivets.bundled.min.js"></script> <script src="rivets.bundled.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap.min.css">
<script src="popper.min.js"></script> <script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script> <script src="bootstrap.min.js"></script>
<script src="toastr.min.js"></script> <script src="toastr.min.js"></script>
<link rel="stylesheet" href="toastr.min.css"> <link rel="stylesheet" href="toastr.min.css">
<script src="FileSaver.min.js"></script> <script src="FileSaver.min.js"></script>
<script src="zip.min.js"></script> --> <script src="zip.min.js"></script> -->
</head> </head>
<style> <style>
input[type="file"] { input[type="file"] {
display: none; display: none;
} }
.progress { .progress {
height: 2rem; height: 2rem;
font-size: 1rem; font-size: 1rem;
} }
.settingsTitle { .settingsTitle {
vertical-align: top; vertical-align: top;
padding-top: 10px; padding-top: 10px;
} }
</style> </style>
<body> <body>
<div id="maindiv" class="container text-center"> <div id="maindiv" class="container text-center">
<h1 id="header"> <h1 id="header">
DOS Wasm X DOS Wasm X
</h1> </h1>
<div id="topPanel" style="display: none;"> <div id="topPanel" style="display: none;">
<!-- BEFORE LOAD --> <!-- BEFORE LOAD -->
<div rv-if="data.beforeEmulatorStarted"> <div rv-if="data.beforeEmulatorStarted">
<div class="mt-2 mb-2" rv-if="data.message"> <div class="mt-2 mb-2" rv-if="data.message">
<div rv-html="data.message"> <div rv-html="data.message">
</div> </div>
</div> </div>
<div class="mt-2 mb-2" rv-if="data.loading"> <div class="mt-2 mb-2" rv-if="data.loading">
<i class="fa fa-refresh fa-spin" style="font-size:14px;margin-right:0.5em;"></i> <i class="fa fa-refresh fa-spin" style="font-size:14px;margin-right:0.5em;"></i>
Loading... Loading...
</div> </div>
<div class="progress mt-4" id="progressOuter" rv-if="data.showProgress"> <div class="progress mt-4" id="progressOuter" rv-if="data.showProgress">
<div class="progress-bar bg-info" role="progressbar" id="myProgress">1%</div> <div class="progress-bar bg-info" role="progressbar" id="myProgress">1%</div>
</div> </div>
<button class="btn btn-primary mt-4" onclick="myApp.loadRom();" id="btnLoad" <button class="btn btn-primary mt-4" onclick="myApp.loadRom();" id="btnLoad"
rv-if="data.loggedIn | ev '==true'" rv-if="data.loggedIn | ev '==true'"
rv-disabled="data.moduleInitializing">Play Game</button> rv-disabled="data.moduleInitializing">Play Game</button>
<span rv-if="data.dblistDisks | ev_string '.length > 0'"> <span rv-if="data.dblistDisks | ev_string '.length > 0'">
<button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart" <button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart"
rv-disabled="data.moduleInitializing" rv-disabled="data.moduleInitializing"
rv-if="data.loggedIn | ev '==false'">Start Computer</button> rv-if="data.loggedIn | ev '==false'">Start Computer</button>
</span> </span>
<span rv-if="data.dblistDisks | ev_string '.length == 0'"> <span rv-if="data.dblistDisks | ev_string '.length == 0'">
<span rv-if="data.settings.DEFAULTIMG"> <span rv-if="data.settings.DEFAULTIMG">
<button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart" <button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart"
rv-disabled="data.moduleInitializing" rv-disabled="data.moduleInitializing"
rv-if="data.loggedIn | ev '==false'">Start Computer</button> rv-if="data.loggedIn | ev '==false'">Start Computer</button>
</span> </span>
</span> </span>
<button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.uploadBrowse()" <button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.uploadBrowse()"
rv-disabled="data.moduleInitializing">Browse</button> rv-disabled="data.moduleInitializing">Browse</button>
<button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.settingsModal()" <button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.settingsModal()"
rv-disabled="data.moduleInitializing">Settings</button> rv-disabled="data.moduleInitializing">Settings</button>
<span rv-if="data.hasCloud"> <span rv-if="data.hasCloud">
<button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==false'" <button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==false'"
onclick="myApp.loginModal()">Login</button> onclick="myApp.loginModal()">Login</button>
<button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==true'" <button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==true'"
onclick="myApp.logout()">Logout</button> onclick="myApp.logout()">Logout</button>
</span> </span>
<input id="file-upload" type="file" multiple /> <input id="file-upload" type="file" multiple />
<!-- ROM LIST --> <!-- ROM LIST -->
<div class="form-group mt-2 mb-4" rv-if="data.loggedIn | ev '==true'" <div class="form-group mt-2 mb-4" rv-if="data.loggedIn | ev '==true'"
style="width: 300px;margin-left: auto; margin-right:auto;"> style="width: 300px;margin-left: auto; margin-right:auto;">
<select class="form-control" id="romselect"> <select class="form-control" id="romselect">
<option rv-each-rom="data.romList" rv-skipiso="rom.skipiso" <option rv-each-rom="data.romList" rv-skipiso="rom.skipiso"
rv-ram="rom.ram" rv-value="rom.url">{rom.title}</option> rv-ram="rom.ram" rv-value="rom.url">{rom.title}</option>
</select> </select>
</div> </div>
</div> </div>
<!-- DRAG AND DROP --> <!-- DRAG AND DROP -->
<div style="margin-top:40px;" rv-if="data.beforeEmulatorStarted"> <div style="margin-top:40px;" rv-if="data.beforeEmulatorStarted">
<div> <div>
<div id="dropArea" rv-hide="data.moduleInitializing" <div id="dropArea" rv-hide="data.moduleInitializing"
style="width: 150px; height: 150px; border: gray 1px solid;margin-left: auto; style="width: 150px; height: 150px; border: gray 1px solid;margin-left: auto;
color: darkgrey;margin-right: auto; border-style: dashed;"> color: darkgrey;margin-right: auto; border-style: dashed;">
<br> <br>
<br> <br>
<span>Drag/Drop Files</span> <span>Drag/Drop Files</span>
<br> <br>
<span>ZIP,ISO,BIN,CUE</span> <span>ZIP,ISO,BIN,CUE</span>
<br> <br>
</div> </div>
</div> </div>
<div rv-hide="data.settings.DEFAULTIMG"> <div rv-hide="data.settings.DEFAULTIMG">
<div rv-hide="data.moduleInitializing" style="width: 70%; margin-left: auto; margin-right: auto;"> <div rv-hide="data.moduleInitializing" style="width: 70%; margin-left: auto; margin-right: auto;">
<div rv-hide="data.loggedIn | ev '==true'"> <div rv-hide="data.loggedIn | ev '==true'">
<div class="alert alert-info mt-4" role="alert" rv-if="data.dblistDisks | ev_string '.length == 0'"> <div class="alert alert-info mt-4" role="alert" rv-if="data.dblistDisks | ev_string '.length == 0'">
Start by dragging any DOS based application/game files onto the page. <br> Start by dragging any DOS based application/game files onto the page. <br>
If you want to run Windows simply drag a Windows 95/98 ISO and proceed with the installation. If you want to run Windows simply drag a Windows 95/98 ISO and proceed with the installation.
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- AFTER LOAD --> <!-- AFTER LOAD -->
<div style="display: inline;" rv-hide="data.beforeEmulatorStarted" id="afterLoadDiv"> <div style="display: inline;" rv-hide="data.beforeEmulatorStarted" id="afterLoadDiv">
<div class="mt-2 mb-2" rv-if="data.message"> <div class="mt-2 mb-2" rv-if="data.message">
<div rv-html="data.message"> <div rv-html="data.message">
</div> </div>
</div> </div>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.newRom()" >Exit</button> <button class="btn btn-primary mt-2 mb-2" onclick="myApp.newRom()" >Exit</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.zoomOut()" id="btnZoomOut" >Zoom Out</button> <button class="btn btn-primary mt-2 mb-2" onclick="myApp.zoomOut()" id="btnZoomOut" >Zoom Out</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.zoomIn()" id="btnZoomIn" >Zoom In</button> <button class="btn btn-primary mt-2 mb-2" onclick="myApp.zoomIn()" id="btnZoomIn" >Zoom In</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.fullscreen()">Fullscreen</button> <button class="btn btn-primary mt-2 mb-2" onclick="myApp.fullscreen()">Fullscreen</button>
<button class="btn btn-primary mt-2 mb-2" onclick="myApp.saveDrive()" rv-if="data.loggedIn | ev '==false'">Save Drive</button> <button class="btn btn-primary mt-2 mb-2" onclick="myApp.saveDrive()" rv-if="data.loggedIn | ev '==false'">Save Drive</button>
<div style="display: inline;"> <div style="display: inline;">
<button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)" <button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CPU: { data.cpu } CPU: { data.cpu }
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" onclick="myApp.updateCPU('auto')" style="cursor: pointer;">Auto</a> <a class="dropdown-item" onclick="myApp.updateCPU('auto')" style="cursor: pointer;">Auto</a>
<a class="dropdown-item" onclick="myApp.updateCPU('max')" style="cursor: pointer;">Max</a> <a class="dropdown-item" onclick="myApp.updateCPU('max')" style="cursor: pointer;">Max</a>
<a class="dropdown-item" onclick="myApp.updateCPU('1320')" style="cursor: pointer;">1320 - 286, 6 MHz from 1982</a> <a class="dropdown-item" onclick="myApp.updateCPU('1320')" style="cursor: pointer;">1320 - 286, 6 MHz from 1982</a>
<a class="dropdown-item" onclick="myApp.updateCPU('2750')" style="cursor: pointer;">2750 - 286, 12.5 MHz from 1985</a> <a class="dropdown-item" onclick="myApp.updateCPU('2750')" style="cursor: pointer;">2750 - 286, 12.5 MHz from 1985</a>
<a class="dropdown-item" onclick="myApp.updateCPU('4720')" style="cursor: pointer;">4720 - 386, 20 MHz from 1987</a> <a class="dropdown-item" onclick="myApp.updateCPU('4720')" style="cursor: pointer;">4720 - 386, 20 MHz from 1987</a>
<a class="dropdown-item" onclick="myApp.updateCPU('7800')" style="cursor: pointer;">7800 - 386DX, 33 MHz from 1989</a> <a class="dropdown-item" onclick="myApp.updateCPU('7800')" style="cursor: pointer;">7800 - 386DX, 33 MHz from 1989</a>
<a class="dropdown-item" onclick="myApp.updateCPU('10000')" style="cursor: pointer;">10000 - 386DX, 33 MHz from 1990</a> <a class="dropdown-item" onclick="myApp.updateCPU('10000')" style="cursor: pointer;">10000 - 386DX, 33 MHz from 1990</a>
<a class="dropdown-item" onclick="myApp.updateCPU('13400')" style="cursor: pointer;">13400 - 486DX, 40 MHz from 1991</a> <a class="dropdown-item" onclick="myApp.updateCPU('13400')" style="cursor: pointer;">13400 - 486DX, 40 MHz from 1991</a>
<a class="dropdown-item" onclick="myApp.updateCPU('18000')" style="cursor: pointer;">18000 - 486DX, 45 MHz from 1992</a> <a class="dropdown-item" onclick="myApp.updateCPU('18000')" style="cursor: pointer;">18000 - 486DX, 45 MHz from 1992</a>
<a class="dropdown-item" onclick="myApp.updateCPU('22000')" style="cursor: pointer;">22000 - 486DX, 50 MHz from 1993</a> <a class="dropdown-item" onclick="myApp.updateCPU('22000')" style="cursor: pointer;">22000 - 486DX, 50 MHz from 1993</a>
<a class="dropdown-item" onclick="myApp.updateCPU('26800')" style="cursor: pointer;">26800 - 486DX2, 60 MHz from 1994</a> <a class="dropdown-item" onclick="myApp.updateCPU('26800')" style="cursor: pointer;">26800 - 486DX2, 60 MHz from 1994</a>
<a class="dropdown-item" onclick="myApp.updateCPU('30000')" style="cursor: pointer;">30000 - 486DX2, 70 MHz from 1995</a> <a class="dropdown-item" onclick="myApp.updateCPU('30000')" style="cursor: pointer;">30000 - 486DX2, 70 MHz from 1995</a>
<a class="dropdown-item" onclick="myApp.updateCPU('40000')" style="cursor: pointer;">40000 - 486DX2, 80 MHz from 1996</a> <a class="dropdown-item" onclick="myApp.updateCPU('40000')" style="cursor: pointer;">40000 - 486DX2, 80 MHz from 1996</a>
<a class="dropdown-item" onclick="myApp.updateCPU('50000')" style="cursor: pointer;">50000 - 486DX2, 90 MHz from 1996</a> <a class="dropdown-item" onclick="myApp.updateCPU('50000')" style="cursor: pointer;">50000 - 486DX2, 90 MHz from 1996</a>
<a class="dropdown-item" onclick="myApp.updateCPU('77000')" style="cursor: pointer;">77000 - Pentium, 150 MHz from 1997</a> <a class="dropdown-item" onclick="myApp.updateCPU('77000')" style="cursor: pointer;">77000 - Pentium, 150 MHz from 1997</a>
<a class="dropdown-item" onclick="myApp.updateCPU('100000')" style="cursor: pointer;">100000 - Pentium, 200 MHz from 1997</a> <a class="dropdown-item" onclick="myApp.updateCPU('100000')" style="cursor: pointer;">100000 - Pentium, 200 MHz from 1997</a>
<a class="dropdown-item" onclick="myApp.updateCPU('200000')" style="cursor: pointer;">200000 - Pentium II, 300 MHz from 1998</a> <a class="dropdown-item" onclick="myApp.updateCPU('200000')" style="cursor: pointer;">200000 - Pentium II, 300 MHz from 1998</a>
<a class="dropdown-item" onclick="myApp.updateCPU('500000')" style="cursor: pointer;">500000 - Pentium III, 600 MHz from 1999</a> <a class="dropdown-item" onclick="myApp.updateCPU('500000')" style="cursor: pointer;">500000 - Pentium III, 600 MHz from 1999</a>
<a class="dropdown-item" onclick="myApp.updateCPU('1000000')" style="cursor: pointer;">1000000 - AMD Athlon, 1.2 GHz from 2000</a> <a class="dropdown-item" onclick="myApp.updateCPU('1000000')" style="cursor: pointer;">1000000 - AMD Athlon, 1.2 GHz from 2000</a>
</div> </div>
</div> </div>
<div style="display: inline;"> <div style="display: inline;">
<button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)" <button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Advanced Advanced
</button> </button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" onclick="myApp.saveHardDriveDiffs()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Save Cloud Drive</a> <a class="dropdown-item" onclick="myApp.saveHardDriveDiffs()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Save Cloud Drive</a>
<a class="dropdown-item" onclick="myApp.toggleFPS()" style="cursor: pointer;">Performance Stats</a> <a class="dropdown-item" onclick="myApp.toggleFPS()" style="cursor: pointer;">Performance Stats</a>
<!-- <a class="dropdown-item" onclick="myApp.saveStateLocal()" rv-if="data.loggedIn | ev '==false'" style="cursor: pointer;">Save State (Experimental)</a> <!-- <a class="dropdown-item" onclick="myApp.saveStateLocal()" rv-if="data.loggedIn | ev '==false'" style="cursor: pointer;">Save State (Experimental)</a>
<a class="dropdown-item" onclick="myApp.loadStateLocal()" rv-if="data.loggedIn | ev '==false'" rv-hide="data.noLocalSave" style="cursor: pointer;">Load State (Experimental)</a> <a class="dropdown-item" onclick="myApp.loadStateLocal()" rv-if="data.loggedIn | ev '==false'" rv-hide="data.noLocalSave" style="cursor: pointer;">Load State (Experimental)</a>
<a class="dropdown-item" onclick="myApp.saveCloud()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Save Cloud State (Experimental)</a> <a class="dropdown-item" onclick="myApp.saveCloud()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Save Cloud State (Experimental)</a>
<a class="dropdown-item" onclick="myApp.loadCloud()" rv-if="data.loggedIn | ev '==true'" rv-hide="data.noCloudSave" style="cursor: pointer;">Load Cloud State (Experimental)</a> --> <a class="dropdown-item" onclick="myApp.loadCloud()" rv-if="data.loggedIn | ev '==true'" rv-hide="data.noCloudSave" style="cursor: pointer;">Load Cloud State (Experimental)</a> -->
<a class="dropdown-item" onclick="myApp.cacheIsoAndBaseImage()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Cache ISO and Base Image</a> <a class="dropdown-item" onclick="myApp.cacheIsoAndBaseImage()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Cache ISO and Base Image</a>
<a class="dropdown-item" onclick="myApp.importModal()" style="cursor: pointer;">Import Files</a> <a class="dropdown-item" onclick="myApp.importModal()" style="cursor: pointer;">Import Files</a>
<a class="dropdown-item" onclick="myApp.importModal('noCopy')" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Import Files Without Copy</a> <a class="dropdown-item" onclick="myApp.importModal('noCopy')" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Import Files Without Copy</a>
<a class="dropdown-item" onclick="myApp.exportModal()" style="cursor: pointer;">Export Files</a> <a class="dropdown-item" onclick="myApp.exportModal()" style="cursor: pointer;">Export Files</a>
<a class="dropdown-item" onclick="myApp.importModal('loadCD')" rv-hide="data.isoMounted" style="cursor: pointer;">Load CD</a> <a class="dropdown-item" onclick="myApp.importModal('loadCD')" rv-hide="data.isoMounted" style="cursor: pointer;">Load CD</a>
<a class="dropdown-item" onclick="myApp.importModal('changeCD')" rv-if="data.isoMounted" style="cursor: pointer;">Change CD</a> <a class="dropdown-item" onclick="myApp.importModal('changeCD')" rv-if="data.isoMounted" style="cursor: pointer;">Change CD</a>
<span rv-if="data.isDosMode"><a class="dropdown-item" onclick="myApp.importModal('loadFloppy')" rv-hide="data.floppyMounted" style="cursor: pointer;">Load Floppy</a></span> <span rv-if="data.isDosMode"><a class="dropdown-item" onclick="myApp.importModal('loadFloppy')" rv-hide="data.floppyMounted" style="cursor: pointer;">Load Floppy</a></span>
<a class="dropdown-item" onclick="myApp.importModal('changeFloppy')" rv-if="data.floppyMounted" style="cursor: pointer;">Change Floppy</a> <a class="dropdown-item" onclick="myApp.importModal('changeFloppy')" rv-if="data.floppyMounted" style="cursor: pointer;">Change Floppy</a>
<a class="dropdown-item" onclick="myApp.exportHardDrive()" style="cursor: pointer;">Export Hard Drive</a> <a class="dropdown-item" onclick="myApp.exportHardDrive()" style="cursor: pointer;">Export Hard Drive</a>
<a class="dropdown-item" onclick="myApp.toggle16BitColorFix()" style="cursor: pointer;">16 Bit Color Fix</a> <a class="dropdown-item" onclick="myApp.toggle16BitColorFix()" style="cursor: pointer;">16 Bit Color Fix</a>
<a class="dropdown-item" onclick="myApp.sendCtrlAltDel()" style="cursor: pointer;">Send Ctrl+Alt+Del</a> <a class="dropdown-item" onclick="myApp.sendCtrlAltDel()" style="cursor: pointer;">Send Ctrl+Alt+Del</a>
<a class="dropdown-item" onclick="myApp.togglePause()" style="cursor: pointer;">Pause/Unpause</a> <a class="dropdown-item" onclick="myApp.togglePause()" style="cursor: pointer;">Pause/Unpause</a>
<a class="dropdown-item" onclick="myApp.toggleAutoKeybaord()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Auto Keyboard Presses</a> <a class="dropdown-item" onclick="myApp.toggleAutoKeybaord()" rv-if="data.loggedIn | ev '==true'" style="cursor: pointer;">Auto Keyboard Presses</a>
<a class="dropdown-item" onclick="myApp.exitToDos()" style="cursor: pointer;">Exit to DOS</a> <a class="dropdown-item" onclick="myApp.exitToDos()" style="cursor: pointer;">Exit to DOS</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="display: none;" id="errorOuter"> <div style="display: none;" id="errorOuter">
<div rv-if="data.lblError" <div rv-if="data.lblError"
class="alert alert-danger mt-4" id="lblError" role="alert" class="alert alert-danger mt-4" id="lblError" role="alert"
rv-html="data.lblError"> rv-html="data.lblError">
</div> </div>
</div> </div>
<input id="file-import" type="file" multiple /> <input id="file-import" type="file" multiple />
</div> </div>
<div id="canvasDiv" class="mt-2 mb-4" <div id="canvasDiv" class="mt-2 mb-4"
style="height:480px;text-align: center;margin-left: auto;margin-right: auto;display: none;"> style="height:480px;text-align: center;margin-left: auto;margin-right: auto;display: none;">
<!-- ID has to be canvas it's hardcoded in the EM generated .js --> <!-- ID has to be canvas it's hardcoded in the EM generated .js -->
<canvas id="canvas" style="height: 100%;" ></canvas> <canvas id="canvas" style="height: 100%;" ></canvas>
</div> </div>
<div id="divInstructions" class="container text-center" style="display: none;"> <div id="divInstructions" class="container text-center" style="display: none;">
<div class="alert alert-secondary mt-4" role="alert" rv-if="data.initialInstallation"> <div class="alert alert-secondary mt-4" role="alert" rv-if="data.initialInstallation">
Remember to always click the Save Drive button before exiting the page. That will commit your hard disk changes to the browser.<br> Remember to always click the Save Drive button before exiting the page. That will commit your hard disk changes to the browser.<br>
If you installed Windows then remember to shut down the OS before exiting the page. If you installed Windows then remember to shut down the OS before exiting the page.
</div> </div>
</div> </div>
<h6 id="githubDiv" class="card-title mt-4 text-center" style="display: none;"> <h6 id="githubDiv" class="card-title mt-4 text-center" style="display: none;">
<a href="https://github.com/nbarkhina/doswasmx" target="_blank" style="color: black;"> <a href="https://github.com/nbarkhina/doswasmx" target="_blank" style="color: black;">
View source on GitHub View source on GitHub
<img src="github_logo.png" style="height: 25px; padding-bottom: 5px; padding-left: 10px;"> <img src="github_logo.png" style="height: 25px; padding-bottom: 5px; padding-left: 10px;">
</a> </a>
</h6> </h6>
<!-- Settings Modal --> <!-- Settings Modal -->
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel"
aria-hidden="true"> aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5> <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="mb-4"> <div class="mb-4">
<div class="mt-2"> <div class="mt-2">
<table cellpadding="5"> <table cellpadding="5">
<tbody> <tbody>
<tr> <tr>
<td style="width: 100px;" class="settingsTitle"> <td style="width: 100px;" class="settingsTitle">
Delete HD Delete HD
</td> </td>
<td> <td>
<button type="button" class="btn btn-primary" onclick="myApp.clearHardDrive()">Clear Hard Drive</button> <button type="button" class="btn btn-primary" onclick="myApp.clearHardDrive()">Clear Hard Drive</button>
<div style="font-size: 8pt;margin-top: 5px;">Note: this will delete your current hard drive from the browser</div> <div style="font-size: 8pt;margin-top: 5px;">Note: this will delete your current hard drive from the browser</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="settingsTitle">RAM</td> <td class="settingsTitle">RAM</td>
<td> <td>
<div> <div>
<select class="form-control" rv-value="data.ramTemp" id="ddlRam"> <select class="form-control" rv-value="data.ramTemp" id="ddlRam">
<option value="32">32 MB (Default)</option> <option value="32">32 MB (Default)</option>
<option value="64">64 MB</option> <option value="64">64 MB</option>
<option value="128">128 MB</option> <option value="128">128 MB</option>
</select> </select>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="settingsTitle">Initial HD</td> <td class="settingsTitle">Initial HD</td>
<td> <td>
<div> <div>
<select class="form-control" rv-value="data.initialHardDriveTemp" id="ddlInitialHD"> <select class="form-control" rv-value="data.initialHardDriveTemp" id="ddlInitialHD">
<option value="hd -size 25">25 MB</option> <option value="hd -size 25">25 MB</option>
<option value="hd -size 50">50 MB</option> <option value="hd -size 50">50 MB</option>
<option value="hd -size 100">100 MB</option> <option value="hd -size 100">100 MB</option>
<option value="hd_250">250 MB</option> <option value="hd_250">250 MB</option>
<option value="hd_520">512 MB (Default)</option> <option value="hd_520">512 MB (Default)</option>
<option value="hd_1gig">1 GB</option> <option value="hd_1gig">1 GB</option>
<option value="hd_2gig">2 GB</option> <option value="hd_2gig">2 GB</option>
</select> </select>
<div style="font-size: 8pt;margin-top: 5px;">This is the initial size of your in-browser hard drive. If you already have a hard drive you will need to delete it first (above) before setting a new size.</div> <div style="font-size: 8pt;margin-top: 5px;">This is the initial size of your in-browser hard drive. If you already have a hard drive you will need to delete it first (above) before setting a new size.</div>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="settingsTitle">DOS Version</td> <td class="settingsTitle">DOS Version</td>
<td> <td>
<div> <div>
<select class="form-control" rv-value="data.dosVersionTemp" id="ddlDosVersion"> <select class="form-control" rv-value="data.dosVersionTemp" id="ddlDosVersion">
<option value="3.4">3.4</option> <option value="3.4">3.4</option>
<option value="4.0">4.0</option> <option value="4.0">4.0</option>
<option value="5.0">5.0</option> <option value="5.0">5.0</option>
<option value="7.0">7.0</option> <option value="7.0">7.0</option>
<option value="7.1">7.1 (Default)</option> <option value="7.1">7.1 (Default)</option>
</select> </select>
<div style="font-size: 8pt;margin-top: 5px;">This is the reported DOS version by the emulator. <br />In order to install some older operating systems such as Windows 1.x-3.x you will need to set this to a lower version.</div> <div style="font-size: 8pt;margin-top: 5px;">This is the reported DOS version by the emulator. <br />In order to install some older operating systems such as Windows 1.x-3.x you will need to set this to a lower version.</div>
</div> </div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
</div> </div>
<div class="modal-footer" style="padding-top: 0;" rv-hide="data.remapWait"> <div class="modal-footer" style="padding-top: 0;" rv-hide="data.remapWait">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="myApp.settingsSubmit()">Save Changes</button> <button type="button" class="btn btn-primary" onclick="myApp.settingsSubmit()">Save Changes</button>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Export Modal --> <!-- Export Modal -->
<div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel"
aria-hidden="true"> aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="exportModalLabel">Confirm</h5> <h5 class="modal-title" id="exportModalLabel">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<b>WARNING</b> It is recommended to shutdown Windows before running this otherwise it will be shut down automatically. <b>WARNING</b> It is recommended to shutdown Windows before running this otherwise it will be shut down automatically.
When you are ready, copy all the files you want to export to the folder C:\EXPORT and press Submit. When you are ready, copy all the files you want to export to the folder C:\EXPORT and press Submit.
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="myApp.exportFiles()">Submit</button> <button type="button" class="btn btn-primary" onclick="myApp.exportFiles()">Submit</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- IMPORT Modal --> <!-- IMPORT Modal -->
<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel"
aria-hidden="true"> aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="importModalLabel">Confirm</h5> <h5 class="modal-title" id="importModalLabel">Confirm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div rv-if="data.loadCD"> <div rv-if="data.loadCD">
Select ISO/CUE/BIN files to load into the CD drive. Select ISO/CUE/BIN files to load into the CD drive.
</div> </div>
<div rv-if="data.loadCD"> <div rv-if="data.loadCD">
<b>NOTE</b> This will restart your computer <b>NOTE</b> This will restart your computer
</div> </div>
<div rv-if="data.changeCD"> <div rv-if="data.changeCD">
Select ISO/CUE/BIN files to swap into the CD drive. Select ISO/CUE/BIN files to swap into the CD drive.
</div> </div>
<div rv-if="data.changeFloppy"> <div rv-if="data.changeFloppy">
Select file to swap into the floppy drive. Select file to swap into the floppy drive.
</div> </div>
<div rv-if="data.loadFloppy"> <div rv-if="data.loadFloppy">
Select file to load into the floppy drive. Select file to load into the floppy drive.
</div> </div>
<div rv-hide="data.loadCD"> <div rv-hide="data.loadCD">
<div rv-hide="data.loadFloppy"> <div rv-hide="data.loadFloppy">
<div rv-hide="data.changeFloppy"> <div rv-hide="data.changeFloppy">
<div rv-hide="data.changeCD"> <div rv-hide="data.changeCD">
<b>WARNING</b> It is recommended to shutdown Windows before running this otherwise it will be shut down automatically. <b>WARNING</b> It is recommended to shutdown Windows before running this otherwise it will be shut down automatically.
Click browse and select all the files to import when ready. Click browse and select all the files to import when ready.
<div rv-hide="data.noCopyImport"> <div rv-hide="data.noCopyImport">
After Windows reboots your files will be in C:\IMPORT After Windows reboots your files will be in C:\IMPORT
</div> </div>
<div rv-if="data.noCopyImport"> <div rv-if="data.noCopyImport">
Windows will exit to DOS. To access them run "MOUNT E ." followed by "E:" Windows will exit to DOS. To access them run "MOUNT E ." followed by "E:"
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="text-align: center;margin-bottom: 20px;"> <div style="text-align: center;margin-bottom: 20px;">
<button id="btnImport" class="btn btn-primary mt-4" onclick="myApp.importBrowse()">Browse</button> <button id="btnImport" class="btn btn-primary mt-4" onclick="myApp.importBrowse()">Browse</button>
</div> </div>
<div rv-if="data.importStatus" class="mb-2 mt-2 text-center"> <div rv-if="data.importStatus" class="mb-2 mt-2 text-center">
{ data.importStatus } { data.importStatus }
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Login Modal --> <!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel"
aria-hidden="true"> aria-hidden="true">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h5 class="modal-title" id="loginModalLabel">Login</h5> <h5 class="modal-title" id="loginModalLabel">Login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
</button> </button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-group"> <div class="form-group">
<label>Password</label> <label>Password</label>
<input type="password" class="form-control" id="txtPassword" autocomplete="off" <input type="password" class="form-control" id="txtPassword" autocomplete="off"
rv-value="data.password" onkeydown="" placeholder="Enter Password"> rv-value="data.password" onkeydown="" placeholder="Enter Password">
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="myApp.loginSubmit()">Submit</button> <button type="button" class="btn btn-primary" onclick="myApp.loginSubmit()">Submit</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<script src="romlist.js"></script> <script src="romlist.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var rando = Math.floor(Math.random() * Math.floor(100000)); var rando = Math.floor(Math.random() * Math.floor(100000));
var script = document.createElement('script'); var script = document.createElement('script');
script.src = 'settings.js?v=' + rando; script.src = 'settings.js?v=' + rando;
document.getElementsByTagName('head')[0].appendChild(script); document.getElementsByTagName('head')[0].appendChild(script);
</script> </script>
</body> </body>
</html> </html>