2025-01-04 11:50:48 +01:00
<!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 >
< 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 >
< 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 >
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 >
2025-01-04 11:39:31 +01:00
< / html >
