Update index3.html

index3.html

@@ -1,158 +1,107 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8">
-		<title>Lalit Gangwani</title>
-		<meta property="og:title" content="Lalit Gangwani"/>
-		<meta property="og:type" content="website"/>
-		<meta property="og:site_name" content="Lalit Gangwani"/>
-		<meta name="theme-color" content="#000000"/>
-		<meta name="mobile-web-app-capable" content="yes"/>
-		<meta name="apple-mobile-web-app-capable" content="yes"/>
-		<link rel="manifest" href="VirtualXP.json"/>
-		<link rel="icon" sizes="16x16" type="image/png" href="VirtualXPFavIcon_16x16.png"/>
-		<link rel="icon" sizes="192x192" type="image/png" href="VirtualXPFavIcon_192x192.png"/>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
-		<style>
-			[span_4](start_span)/* बेसिक स्टाइलिंग और लोडिंग स्क्रीन[span_4](end_span) */
-			html,body{background-color:black;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:default}
-			#canvas{position:fixed;left:0;right:0;top:0;bottom:0;height:100%;width:100%}
+<!DOCTYPE html> // यह ब्राउज़र को बताता है कि यह HTML5 दस्तावेज़ है।
+<html lang="en"> // यह दस्तावेज़ की भाषा इंग्लिश सेट करता है।
+	<head> // यह सेक्शन मेटाडेटा और स्टाइलिंग के लिए है।
+		<meta charset="UTF-8"> // यह कैरेक्टर्स को सही ढंग से दिखाने के लिए है।
+		<title>Lalit Gangwani</title> // ब्राउज़र टैब का नाम।
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> // मोबाइल स्क्रीन फिटिंग के लिए।
+		<style> // यहाँ से डिज़ाइन (CSS) शुरू होती है।
+			/* पूरे पेज को सेंटर करने और प्रोफेशनल दिखाने के लिए स्टाइल */
+			body, html {
+				background: radial-gradient(circle, #2b5876 0%, #4e4376 100%); // बैकग्राउंड में एक गहरा नीला शेड।
+				margin: 0; 
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				display: flex; // कंटेंट को लचीला (Flex) बनाता है।
+				justify-content: center; // कंटेंट को आड़ा (Horizontal) सेंटर करता है।
+				align-items: center; // कंटेंट को खड़ा (Vertical) सेंटर करता है।
+				overflow: hidden; // फालतू स्क्रॉल बार को रोकता है।
+				font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+			}
+
+			#canvas {
+				box-shadow: 0 0 50px rgba(0,0,0,0.5); // स्क्रीन के चारों तरफ परछाई ताकि वह उभर कर दिखे।
+				border: 2px solid #333; // स्क्रीन के चारों तरफ एक पतला बॉर्डर।
+				background-color: #000;
+				max-width: 100vw; // मोबाइल पर स्क्रीन बाहर न जाए।
+				max-height: 100vh;
+			}
+
+			/* लोडिंग स्क्रीन को सुंदर बनाने के लिए */
+			.loading-container {
+				position: absolute;
+				text-align: center;
+				color: white;
+				z-index: 10; // इसे स्क्रीन के ऊपर रखने के लिए।
+			}
+
+			.percentage {
+				font-size: 24px;
+				margin-top: 20px;
+				font-weight: bold;
+				text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+			}
 
-			.percentage{position:fixed;width:64px;height:64px;left:0;right:0;top:120px;bottom:0;margin:auto auto;border:0;font-family:Arial;font-weight:bold;font-size:20px;background-color:black;color:white;text-align:center}
-			.pleasewait{position:fixed;width:64px;height:64px;left:0;right:0;top:-50px;bottom:0;margin:auto auto;border:0}
-			.lds-spinner{color:white;display:inline-block;position:relative;width:64px;height:64px}
-			.lds-spinner div{transform-origin:32px 32px;animation:lds-spinner 1.2s linear infinite}
-			.lds-spinner div:after{content:" ";display:block;position:fixed;top:3px;left:29px;width:5px;height:14px;border-radius:20%;background:white}
-			.lds-spinner div:nth-child(1){transform:rotate(0deg);animation-delay:-1.1s}
-			.lds-spinner div:nth-child(2){transform:rotate(30deg);animation-delay:-1s}
-			.lds-spinner div:nth-child(3){transform:rotate(60deg);animation-delay:-0.9s}
-			.lds-spinner div:nth-child(4){transform:rotate(90deg);animation-delay:-0.8s}
-			.lds-spinner div:nth-child(5){transform:rotate(120deg);animation-delay:-0.7s}
-			.lds-spinner div:nth-child(6){transform:rotate(150deg);animation-delay:-0.6s}
-			.lds-spinner div:nth-child(7){transform:rotate(180deg);animation-delay:-0.5s}
-			.lds-spinner div:nth-child(8){transform:rotate(210deg);animation-delay:-0.4s}
-			.lds-spinner div:nth-child(9){transform:rotate(240deg);animation-delay:-0.3s}
-			.lds-spinner div:nth-child(10){transform:rotate(270deg);animation-delay:-0.2s}
-			.lds-spinner div:nth-child(11){transform:rotate(300deg);animation-delay:-0.1s}
-			.lds-spinner div:nth-child(12){transform:rotate(330deg);animation-delay:0s}
-			@keyframes lds-spinner{0%{opacity:1}100%{opacity:0}}
+			/* स्पिनर एनीमेशन */
+			.lds-spinner { color: white; display: inline-block; position: relative; width: 64px; height: 64px; }
+			.lds-spinner div { transform-origin: 32px 32px; animation: lds-spinner 1.2s linear infinite; }
+			.lds-spinner div:after { content: " "; display: block; position: fixed; top: 3px; left: 29px; width: 5px; height: 14px; border-radius: 20%; background: #fff; }
+			@keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } }
 		</style>
 	</head>
 	<body>
-		<div class="pleasewait"><div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
-		<div class="percentage"></div>
+		<div id="loader" class="loading-container">
+			<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
+			<div class="percentage" id="percent-text">0%</div>
+			<p>Lalit's Virtual XP is loading...</p>
+		</div>
+
 		<canvas id="canvas" width="800" height="600"></canvas>
 
-		<script src="VirtualXPLoader.js"></script>
+		<script src="VirtualXPLoader.js"></script> // एमुलेटर की कोर फाइल।
 		<script>
 			var finalResponse;
-			function getISOImage()
+			function getISOImage() // फाइल डाउनलोड फंक्शन।
 				{
 				var oReq = new XMLHttpRequest();
-				oReq.open("GET", "VirtualXP.iso", true); [span_5](start_span)//[span_5](end_span)
+				oReq.open("GET", "VirtualXP.iso", true);
 				oReq.responseType = "blob";
 				oReq.onload = function (oEvent)
 					{
-					if (oReq.readyState==oReq.DONE)
+					if (oReq.readyState==oReq.DONE && oReq.status==200)
 						{
-						if (oReq.status==200)
-							{
-							finalResponse = oReq.response;
-							var opts = {reportSpeed: function(s){document.title = "Lalit Gangwani - " + s + " MIPS";}}; [span_6](start_span)[span_7](start_span)//[span_6](end_span)[span_7](end_span)
-							
-							[span_8](start_span)// क्रैश से बचने के लिए Memory 256MB और VGA 16MB रखी गई है[span_8](end_span)
-							opts.mem = "256"; 
-							opts.vgamem = "16";
-							opts.fast = true;
-							opts.bios = "VirtualXPBIOS.bin";
-							opts.vgabios = "VirtualXPVGA.bin";
-							opts.apic = false;
-							opts.acpi = false;
-							opts.pci = false;
-							opts.pcivga = false;
-							opts.floppy = false;
-							opts.winnt_hack = true;
-							opts.canvas = document.getElementById("canvas"); [span_9](start_span)//[span_9](end_span)
-							opts["cda"] = new File(["empty.txt"], "filename"); [span_10](start_span)//[span_10](end_span)
+						finalResponse = oReq.response;
+						var opts = { mem: "128", vgamem: "8", fast: true, winnt_hack: true }; // स्टेबल सेटिंग्स।
+						opts.bios = "VirtualXPBIOS.bin";
+						opts.vgabios = "VirtualXPVGA.bin";
+						opts.canvas = document.getElementById("canvas");
+						opts["cda"] = new File(["empty.txt"], "filename");
 
-							var halfix = new Halfix(opts); [span_11](start_span)//[span_11](end_span)
-							halfix.init(function()
-								{
-								[span_12](start_span)halfix.run(); //[span_12](end_span)
-								setInterval(function(){try{halfix.updateScreen();}catch(err){}}, 1000);
-								setTimeout(function()
-									{
-									document.getElementsByClassName("pleasewait")[0].style.display = "none";
-									document.getElementsByClassName("percentage")[0].style.display = "none";
-									},5000); [span_13](start_span)//[span_13](end_span)
-								});
-							}
-							else
+						var halfix = new Halfix(opts);
+						halfix.init(function()
 							{
-							getISOImage(); [span_14](start_span)//[span_14](end_span)
-							}
+							halfix.run();
+							setInterval(function(){try{halfix.updateScreen();}catch(err){}}, 1000);
+							setTimeout(function() {
+								document.getElementById("loader").style.display = "none"; // लोड होने पर स्पिनर हटाना।
+							}, 5000);
+							});
 						}
 					};
-				oReq.onprogress = function (oEvent)
+				oReq.onprogress = function (oEvent) // प्रोग्रेस बार अपडेट।
 					{
-					if (oEvent.total>0)
-						{
-						document.getElementsByClassName("percentage")[0].innerHTML = Math.floor(oEvent.loaded * 100 / oEvent.total) + "%"; [span_15](start_span)//[span_15](end_span)
+					if (oEvent.total > 0) {
+						document.getElementById("percent-text").innerHTML = Math.floor(oEvent.loaded * 100 / oEvent.total) + "%";
 					}
 					};
-				oReq.onerror = function(){setTimeout(function(){getISOImage();},1000);}; [span_16](start_span)//[span_16](end_span)
-				oReq.ontimeout = function(e){setTimeout(function(){getISOImage();},1000);}; [span_17](start_span)//[span_17](end_span)
-				oReq.send(null); [span_18](start_span)//[span_18](end_span)
+				oReq.send(null);
 				}
 
-			function blockSpecialKeys(e)
-				{
-				try
-					{
-					e = e || window.event;
-					[span_19](start_span)if (e.altKey || e.ctrlKey || e.metaKey || e.keyCode == 27) //[span_19](end_span)
-						{
-						e.preventDefault();
-						e.stopPropagation(); [span_20](start_span)//[span_20](end_span)
-						e.stopImmediatePropagation();
-						}
-					}
-					catch(err)
-					{
-					}
-				}
-			window.oncontextmenu = function()
-				{
-				return false; [span_21](start_span)//[span_21](end_span)
-			}
-			window.addEventListener("load", function()
-				{
-				document.getElementById("canvas").addEventListener("click",function(event)
-					{
-					try
-						{
-						[span_22](start_span)document.getElementById("canvas").requestPointerLock(); //[span_22](end_span)
-						}
-						catch(err)
-						{
-						}
-					});
-				document.addEventListener("keydown",function(e){blockSpecialKeys(e)});
-				document.addEventListener("keypress",function(e){blockSpecialKeys(e)});
-				document.addEventListener("keyup", function(e){blockSpecialKeys(e)});
-				[span_23](start_span)if (window.top == window.self) //[span_23](end_span)
-					{
-					getISOImage();
-					}
-				});
-			if ("serviceWorker" in navigator)
-				{
-				[span_24](start_span)navigator.serviceWorker.register("worker.js").then(function(registration) //[span_24](end_span)
-					{
-					}).catch(function(err)
-					{
-					});
-			}
+			// माउस और कीबोर्ड लॉक करने के फंक्शन्स
+			window.oncontextmenu = function() { return false; }; // राइट क्लिक बंद।
+			document.getElementById("canvas").onclick = function() { this.requestPointerLock(); }; // क्लिक पर माउस लॉक।
+			
+			window.onload = function() { getISOImage(); }; // पेज खुलते ही शुरू करें।
 		</script>
 	</body>
 </html>