Update index3.html

index3.html

@@ -1,107 +1,156 @@
-<!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);
-			}
-
-			/* स्पिनर एनीमेशन */
-			.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 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>
+<!DOCTYPE html> //// यह ब्राउज़र को बताता है कि यह एक आधुनिक HTML5 पेज है ////
+<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> //// यहाँ से पेज की सजावट (डिजाइन) शुरू होती है ////
+			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%} //// विंडोज की स्क्रीन को पूरे फोन/पीसी पर फैला देता है ////
+			.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}} //// स्पिनर के चमकने और बुझने का एनीमेशन इफेक्ट ////
+		</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> //// डाउनलोडिंग परसेंटेज यहाँ नंबर में दिखेगा ////
+		<canvas id="canvas" height="600" width="800"></canvas> //// यह विंडोज की असली टीवी स्क्रीन है (साइज 800x600) ////
 
-		<script src="VirtualXPLoader.js"></script> // एमुलेटर की कोर फाइल।
-		<script>
-			var finalResponse;
-			function getISOImage() // फाइल डाउनलोड फंक्शन।
+		<script src="VirtualXPLoader.js"></script> //// एमुलेटर को चलाने वाली मुख्य कोडिंग फाइल को लोड करता है ////
+		<script> //// यहाँ से पेज का दिमाग यानी लॉजिक शुरू होता है ////
+			var finalResponse; //// डाउनलोड की हुई विंडोज फाइल को रखने के लिए एक खाली बॉक्स ////
+			function getISOImage() //// विंडोज की फाइल सर्वर से मांगने का फंक्शन ////
 				{
-				var oReq = new XMLHttpRequest();
-				oReq.open("GET", "VirtualXP.iso", true);
-				oReq.responseType = "blob";
-				oReq.onload = function (oEvent)
+				var oReq = new XMLHttpRequest(); //// सर्वर से फाइल मांगने की नई रिक्वेस्ट तैयार करता है ////
+				oReq.open("GET", "VirtualXP.iso", true); //// सर्वर को बताता है कि "VirtualXP.iso" फाइल चाहिए ////
+				oReq.responseType = "blob"; //// बताता है कि आने वाली फाइल एक बड़ा बाइनरी डेटा है ////
+				oReq.onload = function (oEvent) //// जब फाइल पूरी डाउनलोड हो जाए तब यह कोड चलता है ////
 					{
-					if (oReq.readyState==oReq.DONE && oReq.status==200)
+					if (oReq.readyState==oReq.DONE) //// चेक करता है कि रिक्वेस्ट का काम पूरा हुआ या नहीं ////
 						{
-						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");
+						if (oReq.status==200) //// चेक करता है कि सर्वर ने फाइल सही सलामत भेजी है या नहीं ////
+							{
+							finalResponse = oReq.response; //// डाउनलोड फाइल को वेरिएबल में सेव करता है ////
+							var opts = {reportSpeed: function(s){document.title = "Lalit Gangwani - " + s + " MIPS";}}; //// ब्राउज़र टैब में एमुलेटर की रफ़्तार दिखाता है ////
+							opts.mem = "256"; //// एमुलेटर की रैम (RAM) को 256MB सेट करता है ताकि ज़्यादा स्पेस मिले ////
+							opts.vgamem = "16"; //// ग्राफिक्स मेमोरी को 16MB सेट करता है ////
+							opts.fast = true; //// एमुलेटर की स्पीड बढ़ाने के लिए फास्ट मोड इनेबल करता है ////
+							opts.bios = "VirtualXPBIOS.bin"; //// कंप्यूटर की बेसिक सेटिंग्स वाली BIOS फाइल लोड करता है ////
+							opts.vgabios = "VirtualXPVGA.bin"; //// ग्राफिक्स की सेटिंग्स वाली BIOS फाइल लोड करत��� है ////
+							opts.apic = false; //// एडवांस कंट्रोलर बंद करता है ताकि क्रैश न हो ////
+							opts.acpi = false; //// पावर मैनेजमेंट बंद करता है ताकि पुराने सिस्टम स्टेबल रहें ////
+							opts.pci = false; //// हार्डवेयर कनेक्शन की सेटिंग बंद करता है ////
+							opts.pcivga = false; //// ग्राफ़िक कार्ड कनेक्शन की सेटिंग बंद करता है ////
+							opts.floppy = false; //// पुराने फ्लॉपी ड्राइव सपोर्ट को बंद करता है ////
+							opts.winnt_hack = true; //// विंडोज XP को बिना एरर चलाने के लिए एक खास फिक्स है ////
+							opts.canvas = document.getElementById("canvas"); //// बताता है कि विंडोज किस स्क्रीन (Canvas) पर दिखेगी ////
+							opts["cda"] = new File(["empty.txt"], "filename"); //// सीडी ड्राइव को खाली रखने के लिए फाइल बनाता है ////
 
-						var halfix = new Halfix(opts);
-						halfix.init(function()
+							var halfix = new Halfix(opts); //// इन सब सेटिंग्स के साथ नया वर्चुअल कंप्यूटर बनाता है ////
+							halfix.init(function() //// कंप्यूटर को शुरू करने की तैयारी करता है ////
+								{
+								halfix.run(); //// कंप्यूटर का पावर बटन दबाकर उसे चालू करता है ////
+								setInterval(function(){try{halfix.updateScreen();}catch(err){}}, 1000); //// हर सेकंड स्क्रीन को अपडेट करता है ताकि तस्वीर दिखे ////
+								setTimeout(function() //// 5 सेकंड इंतजार करने का टाइमर है ////
+									{
+									document.getElementsByClassName("pleasewait")[0].style.display = "none"; //// लोडिंग स्पिनर को गायब करता है ////
+									document.getElementsByClassName("percentage")[0].style.display = "none"; //// परसेंटेज नंबर को गायब करता है ////
+									},5000); //// 5000 मिलीसेकंड यानी 5 सेकंड ////
+								});
+							}
+							else
 							{
-							halfix.run();
-							setInterval(function(){try{halfix.updateScreen();}catch(err){}}, 1000);
-							setTimeout(function() {
-								document.getElementById("loader").style.display = "none"; // लोड होने पर स्पिनर हटाना।
-							}, 5000);
-							});
+							getISOImage(); //// अगर डाउनलोड में एरर आए तो दोबारा कोशिश करता है ////
+							}
 						}
 					};
-				oReq.onprogress = function (oEvent) // प्रोग्रेस बार अपडेट।
+				oReq.onprogress = function (oEvent) //// डाउनलोडिंग कितनी हुई यह चेक करता रहता है ////
 					{
-					if (oEvent.total > 0) {
-						document.getElementById("percent-text").innerHTML = Math.floor(oEvent.loaded * 100 / oEvent.total) + "%";
+					if (oEvent.total>0) //// अगर फाइल का कुल साइज पता है तो हिसाब लगाता है ////
+						{
+						document.getElementsByClassName("percentage")[0].innerHTML = Math.floor(oEvent.loaded * 100 / oEvent.total) + "%"; //// परसेंट नंबर को स्क्रीन पर अपडेट करता है ////
 					}
 					};
-				oReq.send(null);
+				oReq.onerror = function(){setTimeout(function(){getISOImage();},1000);}; //// इंटरनेट एरर आने पर 1 सेकंड बाद फिर ट्राई करता है ////
+				oReq.ontimeout = function(e){setTimeout(function(){getISOImage();},1000);}; //// टाइम खत्म होने पर दोबारा कोशिश करता है ////
+				oReq.send(null); //// सर्वर को फाइनल रिक्वेस्ट भेजता है ////
 				}
 
-			// माउस और कीबोर्ड लॉक करने के फंक्शन्स
-			window.oncontextmenu = function() { return false; }; // राइट क्लिक बंद।
-			document.getElementById("canvas").onclick = function() { this.requestPointerLock(); }; // क्लिक पर माउस लॉक।
-			
-			window.onload = function() { getISOImage(); }; // पेज खुलते ही शुरू करें।
-		</script>
-	</body>
-</html>
+			function blockSpecialKeys(e) //// कीबोर्ड के उन बटनों को रोकता है जो ब्राउज़र बंद कर सकते हैं ////
+				{
+				try
+					{
+					e = e || window.event; //// कीबोर्ड की जानकारी प्राप्त करता है ////
+					if (e.altKey || e.ctrlKey || e.metaKey || e.keyCode == 27) //// चेक करता है कि Alt, Ctrl या Esc दबाया गया है या नहीं ////
+						{
+						e.preventDefault(); //// उस बटन का ब्राउज़र वाला काम रोक देता है ////
+						e.stopPropagation(); //// इवेंट को आगे फैलने से रोकता है ////
+						e.stopImmediatePropagation(); //// तुरंत पूरी तरह से बटन का काम बंद कर देता है ////
+						}
+					}
+					catch(err)
+					{
+					}
+				}
+
+			window.oncontextmenu = function() //// माउस का राइट क्लिक मेनू बंद करता है ////
+				{
+				return false; //// राइट क्लिक करने पर कुछ नहीं खुलेगा ////
+			}
+
+			window.addEventListener("load", function() //// जब पूरी वेबसाइट लोड हो जाए तब यह कोड चलता है ////
+				{
+				document.getElementById("canvas").addEventListener("click",function(event) //// स्क्रीन पर कहीं भी क्लिक करने पर क्या होगा ////
+					{
+					try
+						{
+						document.getElementById("canvas").requestPointerLock(); //// माउस कर्सर को विंडोज स्क्रीन के अंदर कैद कर देता है ////
+						}
+						catch(err)
+						{
+						}
+					});
+				document.addEventListener("keydown",function(e){blockSpecialKeys(e)}); //// बटन दबाने पर ब्लॉकिंग चालू करता है ////
+				document.addEventListener("keypress",function(e){blockSpecialKeys(e)}); //// बटन टाइप करने पर ब्लॉकिंग चालू करता है ////
+				document.addEventListener("keyup", function(e){blockSpecialKeys(e)}); //// बटन छोड़ने पर ब्लॉकिंग चालू करता है ////
+				if (window.top == window.self) //// चेक करता है कि यह किसी और वेबसाइट के फ्रेम में तो नहीं खुला है ////
+					{
+					getISOImage(); //// विंडोज लोड करने का काम शुरू करता है ////
+					}
+				});
+			if ("serviceWorker" in navigator) //// तेज़ी से लोड होने और ऑफलाइन सपोर्ट के लिए सर्विस वर्कर चेक करता है ////
+				{
+				navigator.serviceWorker.register("worker.js").then(function(registration) //// 'worker.js' फाइल को रजिस्टर करता है ////
+					{
+					}).catch(function(err) //// अगर रजिस्ट्रेशन फेल हो जाए तो चुप रहता है ////
+					{
+					});
+			}
+		</script> //// जावास्क्रिप्ट सेक्शन यहाँ खत्म होता है ////
+	</body> //// बॉडी सेक्शन यहाँ खत्म होता है ////
+</html> //// एचटीएमएल डॉक्यूमेंट यहाँ पूरी तरह खत्म होता है ////