Webleb - UI Elements

HTML CSS JS

<!DOCTYPE html>

<html lang="en-us">
<base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@354e3c6939a08e472482653567d566ba3a2aa527/half%20life/">
<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="MobileOptimized" content="640" />
	<meta name="HandheldFriendly" content="true" />
	<title>Xash</title>
	<script>
		document.addEventListener('contextmenu', event => event.preventDefault());
		window.onbeforeunload = function(e) {
			e.preventDefault();
			e.returnValue = 'Really want to quit the game?';
		};

document.onkeydown = function(e) {
			e = e || window.event;

if (!e.ctrlKey) return;

var code = e.which || e.keyCode;

switch (code) {
				case 83:
				case 87:
					e.preventDefault();
					e.stopPropagation();
					break;
			}
		};
		var a = new Audio('music.mp3');
		var pashalka_count = 0;

function play_sound() {
			if (pashalka_count == 40) a.play();
			if (pashalka_count < 100) pashalka_count += 1;
		}
		window.addEventListener('click', play_sound);
		window.addEventListener('keydown', play_sound);
	</script>
	<style>
		body {
			font-family: arial;
			margin: 0;
			padding: none;
			background-color: #555555;
			color: #f0b418;
		}

.emscripten {
			padding-right: 0;
			margin-left: auto;
			margin-right: auto;
			display: block;
		}

div.emscripten {
			text-align: center;
		}

div.emscripten_border {}

canvas.emscripten {
			border: 0px none;
			background-image: url(xd.png);
			box-shadow: #ffa600 0px 0px 9px 4px;
		}

@-webkit-keyframes rotation {
			from {
				-webkit-transform: rotate(0deg);
			}

to {
				-webkit-transform: rotate(360deg);
			}
		}

@-moz-keyframes rotation {
			from {
				-moz-transform: rotate(0deg);
			}

to {
				-moz-transform: rotate(360deg);
			}
		}

@-o-keyframes rotation {
			from {
				-o-transform: rotate(0deg);
			}

to {
				-o-transform: rotate(360deg);
			}
		}

@keyframes rotation {
			from {
				transform: rotate(0deg);
			}

to {
				transform: rotate(360deg);
			}
		}

#controls {
			display: inline-block;
			float: right;
			vertical-align: top;
			margin-top: 5px;
			margin-right: 20px;
		}

#output {
			width: 100%;
			height: 200px;
			margin: 0 auto;
			margin-top: 10px;
			border-left: 0px;
			border-right: 0px;
			border-style: solid;
			padding-left: 0px;
			padding-right: 0px;
			display: none;
			background-color: black;
			color: rgba(0, 255, 0, 255);
			font-family: 'Lucida Console', Monaco, monospace;
			outline: none;
			border-color: #f0B418;
		}

.loader {
			border: 4px solid #f3f3f3;
			border-radius: 50%;
			border-top: 4px solid #ffa600;
			width: 16px;
			height: 16px;
			-webkit-animation: spin 2s linear infinite;
			animation: spin 2s linear infinite;
		}

@-webkit-keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
			}

100% {
				-webkit-transform: rotate(360deg);
			}
		}

@keyframes spin {
			0% {
				transform: rotate(0deg);
			}

100% {
				transform: rotate(360deg);
			}
		}

a.glow,
		a.glow:hover,
		a.glow:focus {
			text-decoration: none;
			color: #F0B418;
			text-shadow: none;
			-webkit-transition: 500ms linear 0s;
			-moz-transition: 500ms linear 0s;
			-o-transition: 500ms linear 0s;
			transition: 500ms linear 0s;
			outline: 0 none;
			cursor: default;
		}

a.glow:hover,
		a.glow:focus {
			color: #ffa600;
			text-shadow: -1px 1px 8px #ffa600, 1px -1px 8px #ffa600;
		}

hr {
			border-color: #ffa600;
		}

#label_file_select {
			padding: 1px 6px;
		}

input[type="file"i] {
			display: none;
		}

input[type="text"i] {
			color: #f0b418;
			background-color: #555555;
			border: 2px solid #f0b418;
			font-family: Segoe UI;
			font-size: 15px;
			transition: 0.5s all;
		}

* {
			cursor: default;
			-webkit-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			outline: none;
		}

if (document.createElement("detect").style.textShadow==="") {
			document.getElementsByTagName("html")[0].className+=" textshadow";
		}
	</style>
</head>

<p>
	<div style=width:100%;height:0px>
		<div style="float:left;" id="status">Downloading...</div>
		<div id="progress1" style="position:relative;z-index:10;display:none;float:right;width:70%;border-color:#F0B418;border-style:solid;border-width:2px;height:20px; visibility: hidden;">
			<div id=progress style="text-align:center;background-color:#F0B418;border-color:#555555;border-style:solid:border-width:3px;width:50%;height:20px; visibility: hidden;"></div>
		</div><br>
	</div><br></p>

<center> <a class="glow">
		<div id=optionsTitle>
			<h1>Xash</h1>
		</div>
	</a></center>
	<center> <form style=display:none id=fSettings>
		<a class='glow'>Select filesystem for save and restore:</a>
		<div id=idbHider style=display:none><label><input name=a type=radio id=rIndexedDB checked=true />IndexedDB</label><br></div>
		<label><input name=a type=radio id=rLocalStorage />in Local storage</label><br>
		<label><input name=a type=radio id=rNone />in RAM</label><br><br>
		<hr>
			<div id=zipHider style=display:none><input name=b type=radio id=rZip checked=true />ZIP archive from server
		</label><select id=selectZip style=display:none></select><br></div>

<label><input name=b type=radio id=rLocalZip />Local ZIP file:</label><label id="label_file_select"><input type=file name=c id=iZipFile /><a class='glow'> Select ZIP file </a></label><br><br><hr>
		Command-line arguments: <input name=d type=text id=iArgs value="-dev 1 -game valve" /><br><br>
		<a class='glow' onclick="startXash();return false;">Launch Xash!</a>
		<br><hr>
		<div id='linksPlaceholder' style=display:none>Download archives to load locally next time:</div><br>
		<label>
			<div id=pkgHider style=display:none><input name=b type=radio id=rPackage />
		</label><select id=selectPkg style=display:none></select><br></div>
		<label>
		<div style='visibility: hidden;' class="loader" id=loader1></div>
	</form> </label>

if (!ArrayBuffer['isView']) {
			ArrayBuffer.isView = function(a) {
				return a !== null && typeof(a) === "object" && a['buffer'] instanceof ArrayBuffer;
			};

}

showElement('optionsTitle', false);

function prepareSelects() {
			var len = zipMods.length;
			var select = document.getElementById('selectZip');
			if (len) {
				showElement('zipHider', true);

if (len > 1) {
					var links = '';
					for (var i = 0; i < len; i++) {
						select.options[i] = new Option(zipMods[i][1], zipMods[i][0]);
						links += '<br><a class="glow" onclick=location.href="' + zipMods[i][0] + '">' + zipMods[i][1] + '</a>';
					}
					select.style.display = 'block';
					document.getElementById('linksPlaceholder').innerHTML += links;
				}
			} else
				document.getElementById('rZip').checked = false;
			len = pkgMods.length;
			select = document.getElementById('selectPkg');
			if (len) {
				showElement('pkgHider', true);

if (len > 1) {
					for (var i = 0; i < len; i++)
						select.options[i] = new Option(pkgMods[i][1], pkgMods[i][0]);
					//select.style.display = 'block';
				}
			} else
				document.getElementById('rPackage').checked = false;

if (!zipMods.length && !len) {
				document.getElementById('rLocalZip').checked = true;
				showElement('rLocalZip', false);
			}
		}

try {
			mem = Math.round(window.location.hash.substring(1));
		} catch (e) {};

return canvas;
			})(),
			setStatus: function(text) {
				if (!Module.setStatus.last) Module.setStatus.last = {
					time: Date.now(),
					text: ''
				};
				if (text === Module.setStatus.text) return;
				if (new Date() - myerrordate > 3000) {
					myerrordate = new Date();
					Module.print();
				}

statusElement.innerHTML = text;
				if (progressElement) {
					var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);

if (m) {
						var progress = Math.round(parseInt(m[2]) * 100 / parseInt(m[4]));
						progressElement.style.color = progress > 5 ? '#303030' : '#aaa000';
						progressElement.style.width = progressElement.innerHTML = '' + progress + '%';
					}
					showElement('progress1', !!m);
				}
			},
			totalDependencies: 0,
			monitorRunDependencies: function(left) {
				this.totalDependencies = Math.max(this.totalDependencies, left);
				if (left)
					Module.setStatus('Preparing... (' + (this.totalDependencies - left) + '/' + this.totalDependencies + ')');
			}
		};
		window.onerror = function(event) {
			if (mounted)
				FS.syncfs(false, function(err) {
					Module.print('Saving IDBFS: ' + err);
				});
			if (('' + event).indexOf('SimulateInfiniteLoop') > 0)
				return;
			var text = 'Exception thrown: ' + event;
			text = text.replace(/&/g, "&");
			text = text.replace(/</g, "<");
			text = text.replace(/>/g, ">");
			text = text.replace('\n', '<br>', 'g');
			Module.setStatus(text);
			Module.print('Exception thrown: ' + event);
		};

function haltRun() {}

var savedRun;

function radioChecked(id) {
			var r = document.getElementById('r' + id);
			if (r) return r.checked;
			return false;
		}

function showElement(id, show) {
			var e = document.getElementById(id);
			if (!e) return;
			e.style.display = show ? 'block' : 'none';
		}
		Module.setStatus('Downloading...');

window.addEventListener("beforeunload", function(e) {
				var confirmationMessage = 'Leave the game?';

(e || window.event).returnValue = confirmationMessage; //Gecko + IE
				return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
			});
		}

function mountZIP(data) {
			var Buffer = BrowserFS.BFSRequire('buffer').Buffer;
			mfs.mount('/zip', new BrowserFS.FileSystem.ZipFS(Buffer.from(data)));
			FS.mount(new BrowserFS.EmscriptenFS(), {
				root: '/zip'
			}, '/rodir');
		}

function fetchZIP(packageName, cb, parts = 0, size_of_parts = 0, total_size = 0) {
			if (parts == 0) {
				var xhr = new XMLHttpRequest();
				xhr.open('GET', packageName, true);
				xhr.responseType = 'arraybuffer';

xhr.onprogress = function(event) {
					var url = packageName;
					var size;
					if (event.total) size = event.total;
					else size = zipMods[document.getElementById('selectZip').selectedIndex][2];
					if (event.loaded) {
						var total = size;
						var loaded = event.loaded;
						var num = 0;
						if (Module['setStatus']) Module['setStatus']('Downloading data...');
					} else if (!Module.dataFileDownloads) {
						if (Module['setStatus']) Module['setStatus']('Downloading data...');
					}
				};
				xhr.onerror = function(event) {
					throw new Error("NetworkError");
				}
				xhr.onload = function(event) {
					if (xhr.status == 200 || xhr.status == 304 || xhr.status == 206 || (xhr.status == 0 && xhr.response)) { // file URLs can return 0
						mountZIP(xhr.response);
						cb();
					} else {
						throw new Error(xhr.statusText + " : " + xhr.responseURL);
					}
				};
				xhr.send(null);
			} else {
				var buffers = new Uint8Array(total_size);
				var finished = 0;
				for (var i = 0; i < parts; i++) {
					const cur = i;
					const no_ext = packageName.slice(0, -4);
					const url1 = no_ext + '_out/' + no_ext + '-' + cur + '.zip';
					console.log(url1);
					const xhr = new XMLHttpRequest();
					xhr.open('GET', url1, true);
					xhr.responseType = 'arraybuffer';

xhr.onprogress = function(event) {
						if (event.loaded) {
							var loaded = event.loaded;
							if (Module['setStatus']) Module['setStatus']('Downloading data... (' + ((finished * size_of_parts) + loaded) + '/' + total_size + ')');
						} else if (!Module.dataFileDownloads) {
							if (Module['setStatus']) Module['setStatus']('Downloading data...');
						}
					};
					xhr.onerror = function(event) {
						throw new Error("NetworkError");
					}
					xhr.onload = function(event) {
						if (xhr.status == 200 || xhr.status == 304 || xhr.status == 206 || (xhr.status == 0 && xhr.response)) { // file URLs can return 0
							finished++;
							buffers.set(new Uint8Array(xhr.response), cur * size_of_parts);
							if (finished == parts) {
								mountZIP(buffers);
								cb();
							}
						} else {
							throw new Error(xhr.statusText + " : " + xhr.responseURL);
						}
					};
					xhr.send(null);
				}
			}
		}

function setupFS() {
			FS.mkdir('/rodir');
			FS.mkdir('/xash');
			try {
				mfs = new BrowserFS.FileSystem.MountableFileSystem();
				BrowserFS.initialize(mfs);
			} catch (e) {
				mfs = undefined;
				Module.print('Failed to initialize BrowserFS: ' + e);
			}

if (radioChecked('IndexedDB')) {
				FS.mount(IDBFS, {}, '/xash');
				FS.syncfs(true, function(err) {
					if (err) Module.print('Loading IDBFS: ' + err);
				});
				mounted = true;
			}

if (radioChecked('LocalStorage') && mfs) {
				mfs.mount('/ls', new BrowserFS.FileSystem.LocalStorage());
				FS.mount(new BrowserFS.EmscriptenFS(), {
					root: '/ls'
				}, '/xash');
				Module.print('LocalStorage mounted');
			}

FS.chdir('/xash/');
		}

function skipRun() {
			savedRun = run;
			Module.run = haltRun;
			run = haltRun;

Module.setStatus("Xash3D downloaded!");
			showElement('loader1', false);
			showElement('optionsTitle', true);

if (window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB)
				showElement('idbHider', true);
			prepareSelects();
			showElement('fSettings', true);

ENV.XASH3D_GAMEDIR = gamedir;
			ENV.XASH3D_RODIR = '/rodir'

loadModule("server");
			loadModule("client");
			loadModule("menu");
		};

Module.preInit = [skipRun];
		Module.websocket = [];
		//Module.websocket.url = 'wsproxy://the-swank.pp.ua:3000/'
		Module.websocket.url = 'wsproxy://4.tcp.ngrok.io:10657/';
		ENV = [];
	</script>

ga('create', 'UA-68666752-4', 'auto');
		ga('send', 'pageview');*/
	</script>
</body>

</html>

Preview

Open Advanced Editor Full Screen