Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background: black;
            color: #fedb1d;
            overflow: hidden;
        }
        
        #canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            height: 100%;
            background: black;
            padding: 0;
            margin: 0;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            /*pointer-events:none;*/
        }
        
        .emularity-splash-screen {
            text-align: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 50%;
            margin: 0;
            box-sizing: border-box;
            color: #000;
        }
    </style>
</head>

var softs = {

DOOM: {
                file: 'softs/DOOM.zip',
                cmd: 'DOOM/DOOM.EXE',
                pointer: true
            },

}
        var file = "DOOM";
        if ($_GET('soft') != null) {
            if (softs[$_GET('soft')] != undefined) {
                file = $_GET('soft')
                    //parent.$notif('Loading '+$_GET('soft').replace(/_/g," ")+'.')
            };
        };
        //
        // DOS FILES
        if (softs[file].machine == undefined) {
            var dosbox = new Emulator(document.querySelector("#canvas"),
                null,
                new DosBoxLoader(DosBoxLoader.emulatorJS("js/dosbox-sync.js"),
                    DosBoxLoader.locateAdditionalEmulatorJS(locateAdditionalFiles),
                    DosBoxLoader.nativeResolution(640, 400),
                    DosBoxLoader.mountZip("c",
                        //DosBoxLoader.fetchFile("Software", "softs/" + softs[file].file)),
                        DosBoxLoader.fetchFile("Software", softs[file].file)),
                    DosBoxLoader.startExe(softs[file].cmd)));
            dosbox.start({
                waitAfterDownloading: false
            });

function locateAdditionalFiles(filename) {
                if (filename === "dosbox.html.mem") {
                    return "js/dosbox-sync.mem";
                }
                return "js/" + filename;
            }

}
        //
        // PC98 DOS FILES
        if (softs[file].machine == 'PC98') {
            var dosbox = new Emulator(document.querySelector("#canvas"),
                null,
                new PC98DosBoxLoader(PC98DosBoxLoader.emulatorJS("js/dosbox-x.js"),
                    PC98DosBoxLoader.emulatorWASM("js/dosbox-x.wasm"),
                    PC98DosBoxLoader.locateAdditionalEmulatorJS(locateAdditionalFiles),
                    PC98DosBoxLoader.nativeResolution(640, 480),
                    PC98DosBoxLoader.mountZip("c",
                        PC98DosBoxLoader.fetchFile("Game File",
                            "softs/" + softs[file].file)),
                    PC98DosBoxLoader.mountZip("y",
                        PC98DosBoxLoader.fetchFile("ROM File",
                            "js/font.zip")),

PC98DosBoxLoader.startExe(softs[file].cmd)))
            dosbox.start({
                waitAfterDownloading: true
            });

function locateAdditionalFiles(filename) {
                if (filename === "dosbox.html.mem") {
                    return "js/dosbox-sync.mem";
                }
                return "js/" + filename;
            }

}

if (softs[file].pointer == false) {
            c = document.getElementById("canvas")
            c.style.cursor = "none"
        };
    </script>
</body>

</html>

CSS

JS

Doom

Recommended