From 9cf772789e92d9d877f2b6c90cc349d948484f05 Mon Sep 17 00:00:00 2001 From: minigist <minigist@noreply.localhost> Date: Sat, 4 Jan 2025 11:50:48 +0100 Subject: [PATCH] Aktualizovat doswasmx/start.html --- doswasmx/{index.html => start.html} | 882 ++++++++++++++-------------- 1 file changed, 441 insertions(+), 441 deletions(-) rename doswasmx/{index.html => start.html} (98%) diff --git a/doswasmx/index.html b/doswasmx/start.html similarity index 98% rename from doswasmx/index.html rename to doswasmx/start.html index 8c1e6ba..6eb8004 100644 --- a/doswasmx/index.html +++ b/doswasmx/start.html @@ -1,442 +1,442 @@ -<!DOCTYPE html> -<html> - -<head> - <title>DOS Wasm X</title> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <meta name="keywords" content="DOS Emulator, DOS JavaScript Emulator, WebAssembly, HTML5"> - <meta charset="UTF-8"> - <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"> - <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"> - <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://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"> - <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script> - <!-- when developing offline --> - <!-- <script src="jquery-3.3.1.min.js"></script> - <link rel="stylesheet" href="font-awesome.min.css"> - <script src="rivets.bundled.min.js"></script> - <link rel="stylesheet" href="bootstrap.min.css"> - <script src="popper.min.js"></script> - <script src="bootstrap.min.js"></script> - <script src="toastr.min.js"></script> - <link rel="stylesheet" href="toastr.min.css"> - <script src="FileSaver.min.js"></script> - <script src="zip.min.js"></script> --> -</head> -<style> - input[type="file"] { - display: none; - } - - .progress { - height: 2rem; - font-size: 1rem; - } - .settingsTitle { - vertical-align: top; - padding-top: 10px; - } -</style> - -<body> - <div id="maindiv" class="container text-center"> - <h1 id="header"> - DOS Wasm X - </h1> - - <div id="topPanel" style="display: none;"> - - <!-- BEFORE LOAD --> - <div rv-if="data.beforeEmulatorStarted"> - - <div class="mt-2 mb-2" rv-if="data.message"> - <div rv-html="data.message"> - </div> - </div> - <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> - Loading... - </div> - - - <div class="progress mt-4" id="progressOuter" rv-if="data.showProgress"> - <div class="progress-bar bg-info" role="progressbar" id="myProgress">1%</div> - </div> - - <button class="btn btn-primary mt-4" onclick="myApp.loadRom();" id="btnLoad" - rv-if="data.loggedIn | ev '==true'" - rv-disabled="data.moduleInitializing">Play Game</button> - <span rv-if="data.dblistDisks | ev_string '.length > 0'"> - <button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart" - rv-disabled="data.moduleInitializing" - rv-if="data.loggedIn | ev '==false'">Start Computer</button> - </span> - <span rv-if="data.dblistDisks | ev_string '.length == 0'"> - <span rv-if="data.settings.DEFAULTIMG"> - <button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart" - rv-disabled="data.moduleInitializing" - rv-if="data.loggedIn | ev '==false'">Start Computer</button> - </span> - </span> - - - <button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.uploadBrowse()" - rv-disabled="data.moduleInitializing">Browse</button> - <button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.settingsModal()" - rv-disabled="data.moduleInitializing">Settings</button> - <span rv-if="data.hasCloud"> - <button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==false'" - onclick="myApp.loginModal()">Login</button> - <button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==true'" - onclick="myApp.logout()">Logout</button> - </span> - - - <input id="file-upload" type="file" multiple /> - - <!-- ROM LIST --> - <div class="form-group mt-2 mb-4" rv-if="data.loggedIn | ev '==true'" - style="width: 300px;margin-left: auto; margin-right:auto;"> - <select class="form-control" id="romselect"> - <option rv-each-rom="data.romList" rv-skipiso="rom.skipiso" - rv-ram="rom.ram" rv-value="rom.url">{rom.title}</option> - </select> - </div> - - </div> - - <!-- DRAG AND DROP --> - <div style="margin-top:40px;" rv-if="data.beforeEmulatorStarted"> - <div> - <div id="dropArea" rv-hide="data.moduleInitializing" - style="width: 150px; height: 150px; border: gray 1px solid;margin-left: auto; - color: darkgrey;margin-right: auto; border-style: dashed;"> - <br> - <br> - <span>Drag/Drop Files</span> - <br> - <span>ZIP,ISO,BIN,CUE</span> - <br> - </div> - </div> - - <div rv-hide="data.settings.DEFAULTIMG"> - <div rv-hide="data.moduleInitializing" style="width: 70%; margin-left: auto; margin-right: auto;"> - <div rv-hide="data.loggedIn | ev '==true'"> - <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> - If you want to run Windows simply drag a Windows 95/98 ISO and proceed with the installation. - </div> - </div> - </div> - </div> - - </div> - - - <!-- AFTER LOAD --> - <div style="display: inline;" rv-hide="data.beforeEmulatorStarted" id="afterLoadDiv"> - - <div class="mt-2 mb-2" rv-if="data.message"> - <div rv-html="data.message"> - </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.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.fullscreen()">Fullscreen</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;"> - <button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)" - data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - CPU: { data.cpu } - </button> - <div class="dropdown-menu"> - <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('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('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('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('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('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('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('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('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('1000000')" style="cursor: pointer;">1000000 - AMD Athlon, 1.2 GHz from 2000</a> - </div> - </div> - <div style="display: inline;"> - <button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)" - data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> - Advanced - </button> - <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.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.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.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.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.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('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> - <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.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.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.exitToDos()" style="cursor: pointer;">Exit to DOS</a> - </div> - </div> - </div> - - - </div> - - <div style="display: none;" id="errorOuter"> - <div rv-if="data.lblError" - class="alert alert-danger mt-4" id="lblError" role="alert" - rv-html="data.lblError"> - </div> - </div> - - - <input id="file-import" type="file" multiple /> - - </div> - - <div id="canvasDiv" class="mt-2 mb-4" - 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 --> - <canvas id="canvas" style="height: 100%;" ></canvas> - </div> - - <div id="divInstructions" class="container text-center" style="display: none;"> - <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> - If you installed Windows then remember to shut down the OS before exiting the page. - </div> - </div> - - <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;"> - View source on GitHub - <img src="github_logo.png" style="height: 25px; padding-bottom: 5px; padding-left: 10px;"> - </a> - </h6> - - <!-- Settings Modal --> - <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" - aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="settingsModalLabel">Settings</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - <div class="mb-4"> - <div class="mt-2"> - <table cellpadding="5"> - <tbody> - <tr> - <td style="width: 100px;" class="settingsTitle"> - Delete HD - </td> - <td> - <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> - </td> - </tr> - <tr> - <td class="settingsTitle">RAM</td> - <td> - <div> - <select class="form-control" rv-value="data.ramTemp" id="ddlRam"> - <option value="32">32 MB (Default)</option> - <option value="64">64 MB</option> - <option value="128">128 MB</option> - </select> - </div> - </td> - </tr> - <tr> - <td class="settingsTitle">Initial HD</td> - <td> - <div> - <select class="form-control" rv-value="data.initialHardDriveTemp" id="ddlInitialHD"> - <option value="hd -size 25">25 MB</option> - <option value="hd -size 50">50 MB</option> - <option value="hd -size 100">100 MB</option> - <option value="hd_250">250 MB</option> - <option value="hd_520">512 MB (Default)</option> - <option value="hd_1gig">1 GB</option> - <option value="hd_2gig">2 GB</option> - </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> - </td> - </tr> - <tr> - <td class="settingsTitle">DOS Version</td> - <td> - <div> - <select class="form-control" rv-value="data.dosVersionTemp" id="ddlDosVersion"> - <option value="3.4">3.4</option> - <option value="4.0">4.0</option> - <option value="5.0">5.0</option> - <option value="7.0">7.0</option> - <option value="7.1">7.1 (Default)</option> - </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> - </td> - </tr> - </tbody> - </table> - </div> - </div> - - </div> - <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-primary" onclick="myApp.settingsSubmit()">Save Changes</button> - </div> - <div class="modal-footer"> - </div> - </div> - </div> - </div> - - <!-- Export Modal --> - <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" - aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="exportModalLabel">Confirm</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - <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. - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-primary" onclick="myApp.exportFiles()">Submit</button> - </div> - </div> - </div> - </div> - - <!-- IMPORT Modal --> - <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" - aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="importModalLabel">Confirm</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - <div rv-if="data.loadCD"> - Select ISO/CUE/BIN files to load into the CD drive. - </div> - <div rv-if="data.loadCD"> - <b>NOTE</b> This will restart your computer - </div> - <div rv-if="data.changeCD"> - Select ISO/CUE/BIN files to swap into the CD drive. - </div> - <div rv-if="data.changeFloppy"> - Select file to swap into the floppy drive. - </div> - <div rv-if="data.loadFloppy"> - Select file to load into the floppy drive. - </div> - <div rv-hide="data.loadCD"> - <div rv-hide="data.loadFloppy"> - <div rv-hide="data.changeFloppy"> - <div rv-hide="data.changeCD"> - <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. - <div rv-hide="data.noCopyImport"> - After Windows reboots your files will be in C:\IMPORT - </div> - <div rv-if="data.noCopyImport"> - Windows will exit to DOS. To access them run "MOUNT E ." followed by "E:" - </div> - </div> - </div> - </div> - </div> - </div> - <div style="text-align: center;margin-bottom: 20px;"> - <button id="btnImport" class="btn btn-primary mt-4" onclick="myApp.importBrowse()">Browse</button> - </div> - <div rv-if="data.importStatus" class="mb-2 mt-2 text-center"> - { data.importStatus } - </div> - </div> - </div> - </div> - - <!-- Login Modal --> - <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" - aria-hidden="true"> - <div class="modal-dialog" role="document"> - <div class="modal-content"> - <div class="modal-header"> - <h5 class="modal-title" id="loginModalLabel">Login</h5> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> - <span aria-hidden="true">×</span> - </button> - </div> - <div class="modal-body"> - <div class="form-group"> - <label>Password</label> - <input type="password" class="form-control" id="txtPassword" autocomplete="off" - rv-value="data.password" onkeydown="" placeholder="Enter Password"> - </div> - </div> - <div class="modal-footer"> - <button type="button" class="btn btn-primary" onclick="myApp.loginSubmit()">Submit</button> - </div> - </div> - </div> - </div> - - <script src="romlist.js"></script> - <script type="text/javascript"> - var rando = Math.floor(Math.random() * Math.floor(100000)); - var script = document.createElement('script'); - script.src = 'settings.js?v=' + rando; - document.getElementsByTagName('head')[0].appendChild(script); - </script> -</body> - +<!DOCTYPE html> +<html> + +<head> + <title>DOS Wasm X</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <meta name="keywords" content="DOS Emulator, DOS JavaScript Emulator, WebAssembly, HTML5"> + <meta charset="UTF-8"> + <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"> + <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"> + <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://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"> + <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script> + <!-- when developing offline --> + <!-- <script src="jquery-3.3.1.min.js"></script> + <link rel="stylesheet" href="font-awesome.min.css"> + <script src="rivets.bundled.min.js"></script> + <link rel="stylesheet" href="bootstrap.min.css"> + <script src="popper.min.js"></script> + <script src="bootstrap.min.js"></script> + <script src="toastr.min.js"></script> + <link rel="stylesheet" href="toastr.min.css"> + <script src="FileSaver.min.js"></script> + <script src="zip.min.js"></script> --> +</head> +<style> + input[type="file"] { + display: none; + } + + .progress { + height: 2rem; + font-size: 1rem; + } + .settingsTitle { + vertical-align: top; + padding-top: 10px; + } +</style> + +<body> + <div id="maindiv" class="container text-center"> + <h1 id="header"> + DOS Wasm X + </h1> + + <div id="topPanel" style="display: none;"> + + <!-- BEFORE LOAD --> + <div rv-if="data.beforeEmulatorStarted"> + + <div class="mt-2 mb-2" rv-if="data.message"> + <div rv-html="data.message"> + </div> + </div> + <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> + Loading... + </div> + + + <div class="progress mt-4" id="progressOuter" rv-if="data.showProgress"> + <div class="progress-bar bg-info" role="progressbar" id="myProgress">1%</div> + </div> + + <button class="btn btn-primary mt-4" onclick="myApp.loadRom();" id="btnLoad" + rv-if="data.loggedIn | ev '==true'" + rv-disabled="data.moduleInitializing">Play Game</button> + <span rv-if="data.dblistDisks | ev_string '.length > 0'"> + <button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart" + rv-disabled="data.moduleInitializing" + rv-if="data.loggedIn | ev '==false'">Start Computer</button> + </span> + <span rv-if="data.dblistDisks | ev_string '.length == 0'"> + <span rv-if="data.settings.DEFAULTIMG"> + <button class="btn btn-primary mt-4" onclick="myApp.loadRom(true);" id="btnStart" + rv-disabled="data.moduleInitializing" + rv-if="data.loggedIn | ev '==false'">Start Computer</button> + </span> + </span> + + + <button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.uploadBrowse()" + rv-disabled="data.moduleInitializing">Browse</button> + <button id="btnUploadRom" class="btn btn-primary mt-4" onclick="myApp.settingsModal()" + rv-disabled="data.moduleInitializing">Settings</button> + <span rv-if="data.hasCloud"> + <button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==false'" + onclick="myApp.loginModal()">Login</button> + <button class="btn btn-primary mt-4" rv-if="data.loggedIn | ev '==true'" + onclick="myApp.logout()">Logout</button> + </span> + + + <input id="file-upload" type="file" multiple /> + + <!-- ROM LIST --> + <div class="form-group mt-2 mb-4" rv-if="data.loggedIn | ev '==true'" + style="width: 300px;margin-left: auto; margin-right:auto;"> + <select class="form-control" id="romselect"> + <option rv-each-rom="data.romList" rv-skipiso="rom.skipiso" + rv-ram="rom.ram" rv-value="rom.url">{rom.title}</option> + </select> + </div> + + </div> + + <!-- DRAG AND DROP --> + <div style="margin-top:40px;" rv-if="data.beforeEmulatorStarted"> + <div> + <div id="dropArea" rv-hide="data.moduleInitializing" + style="width: 150px; height: 150px; border: gray 1px solid;margin-left: auto; + color: darkgrey;margin-right: auto; border-style: dashed;"> + <br> + <br> + <span>Drag/Drop Files</span> + <br> + <span>ZIP,ISO,BIN,CUE</span> + <br> + </div> + </div> + + <div rv-hide="data.settings.DEFAULTIMG"> + <div rv-hide="data.moduleInitializing" style="width: 70%; margin-left: auto; margin-right: auto;"> + <div rv-hide="data.loggedIn | ev '==true'"> + <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> + If you want to run Windows simply drag a Windows 95/98 ISO and proceed with the installation. + </div> + </div> + </div> + </div> + + </div> + + + <!-- AFTER LOAD --> + <div style="display: inline;" rv-hide="data.beforeEmulatorStarted" id="afterLoadDiv"> + + <div class="mt-2 mb-2" rv-if="data.message"> + <div rv-html="data.message"> + </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.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.fullscreen()">Fullscreen</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;"> + <button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)" + data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + CPU: { data.cpu } + </button> + <div class="dropdown-menu"> + <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('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('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('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('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('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('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('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('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('1000000')" style="cursor: pointer;">1000000 - AMD Athlon, 1.2 GHz from 2000</a> + </div> + </div> + <div style="display: inline;"> + <button type="button" class="btn btn-primary dropdown-toggle" onkeydown="myApp.dropdownKeyDown(event)" + data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Advanced + </button> + <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.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.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.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.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.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('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> + <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.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.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.exitToDos()" style="cursor: pointer;">Exit to DOS</a> + </div> + </div> + </div> + + + </div> + + <div style="display: none;" id="errorOuter"> + <div rv-if="data.lblError" + class="alert alert-danger mt-4" id="lblError" role="alert" + rv-html="data.lblError"> + </div> + </div> + + + <input id="file-import" type="file" multiple /> + + </div> + + <div id="canvasDiv" class="mt-2 mb-4" + 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 --> + <canvas id="canvas" style="height: 100%;" ></canvas> + </div> + + <div id="divInstructions" class="container text-center" style="display: none;"> + <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> + If you installed Windows then remember to shut down the OS before exiting the page. + </div> + </div> + + <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;"> + View source on GitHub + <img src="github_logo.png" style="height: 25px; padding-bottom: 5px; padding-left: 10px;"> + </a> + </h6> + + <!-- Settings Modal --> + <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="settingsModalLabel">Settings</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <div class="mb-4"> + <div class="mt-2"> + <table cellpadding="5"> + <tbody> + <tr> + <td style="width: 100px;" class="settingsTitle"> + Delete HD + </td> + <td> + <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> + </td> + </tr> + <tr> + <td class="settingsTitle">RAM</td> + <td> + <div> + <select class="form-control" rv-value="data.ramTemp" id="ddlRam"> + <option value="32">32 MB (Default)</option> + <option value="64">64 MB</option> + <option value="128">128 MB</option> + </select> + </div> + </td> + </tr> + <tr> + <td class="settingsTitle">Initial HD</td> + <td> + <div> + <select class="form-control" rv-value="data.initialHardDriveTemp" id="ddlInitialHD"> + <option value="hd -size 25">25 MB</option> + <option value="hd -size 50">50 MB</option> + <option value="hd -size 100">100 MB</option> + <option value="hd_250">250 MB</option> + <option value="hd_520">512 MB (Default)</option> + <option value="hd_1gig">1 GB</option> + <option value="hd_2gig">2 GB</option> + </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> + </td> + </tr> + <tr> + <td class="settingsTitle">DOS Version</td> + <td> + <div> + <select class="form-control" rv-value="data.dosVersionTemp" id="ddlDosVersion"> + <option value="3.4">3.4</option> + <option value="4.0">4.0</option> + <option value="5.0">5.0</option> + <option value="7.0">7.0</option> + <option value="7.1">7.1 (Default)</option> + </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> + </td> + </tr> + </tbody> + </table> + </div> + </div> + + </div> + <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-primary" onclick="myApp.settingsSubmit()">Save Changes</button> + </div> + <div class="modal-footer"> + </div> + </div> + </div> + </div> + + <!-- Export Modal --> + <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="exportModalLabel">Confirm</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <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. + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-primary" onclick="myApp.exportFiles()">Submit</button> + </div> + </div> + </div> + </div> + + <!-- IMPORT Modal --> + <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="importModalLabel">Confirm</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <div rv-if="data.loadCD"> + Select ISO/CUE/BIN files to load into the CD drive. + </div> + <div rv-if="data.loadCD"> + <b>NOTE</b> This will restart your computer + </div> + <div rv-if="data.changeCD"> + Select ISO/CUE/BIN files to swap into the CD drive. + </div> + <div rv-if="data.changeFloppy"> + Select file to swap into the floppy drive. + </div> + <div rv-if="data.loadFloppy"> + Select file to load into the floppy drive. + </div> + <div rv-hide="data.loadCD"> + <div rv-hide="data.loadFloppy"> + <div rv-hide="data.changeFloppy"> + <div rv-hide="data.changeCD"> + <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. + <div rv-hide="data.noCopyImport"> + After Windows reboots your files will be in C:\IMPORT + </div> + <div rv-if="data.noCopyImport"> + Windows will exit to DOS. To access them run "MOUNT E ." followed by "E:" + </div> + </div> + </div> + </div> + </div> + </div> + <div style="text-align: center;margin-bottom: 20px;"> + <button id="btnImport" class="btn btn-primary mt-4" onclick="myApp.importBrowse()">Browse</button> + </div> + <div rv-if="data.importStatus" class="mb-2 mt-2 text-center"> + { data.importStatus } + </div> + </div> + </div> + </div> + + <!-- Login Modal --> + <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" + aria-hidden="true"> + <div class="modal-dialog" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="loginModalLabel">Login</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + <div class="form-group"> + <label>Password</label> + <input type="password" class="form-control" id="txtPassword" autocomplete="off" + rv-value="data.password" onkeydown="" placeholder="Enter Password"> + </div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-primary" onclick="myApp.loginSubmit()">Submit</button> + </div> + </div> + </div> + </div> + + <script src="romlist.js"></script> + <script type="text/javascript"> + var rando = Math.floor(Math.random() * Math.floor(100000)); + var script = document.createElement('script'); + script.src = 'settings.js?v=' + rando; + document.getElementsByTagName('head')[0].appendChild(script); + </script> +</body> + </html> \ No newline at end of file