songbian
/
AHND_Android


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437
							<!DOCTYPE html>

<script> 
window.myurl='https://campus.ahau.edu.cn/cmccr-server';
</script> 

<script>
	var pcUrl = 'https://campus.ahau.edu.cn/';
	var anUrl = 'https://campus.ahau.edu.cn/ahnyh5';
	var iosUrl = 'https://campus.ahau.edu.cn/ahny_ios';
	function redirectToHttps(url) {
		if (url.startsWith('http://')) {
			url = url.replace('http://', 'https://');
		}

		location.href = url;
	} function detectDevice() {

		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
		//android终端	
		var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
		//ios终端	
		var origin = location.origin;

		if (isIOS) {
			redirectToHttps(iosUrl);
		}

		if (isAndroid) {
			//redirectToHttps(anUrl);
		}

		if (!isIOS && !isAndroid) {
			redirectToHttps(pcUrl);
		}
	}

	detectDevice()
</script>

<!--
     HTML code used with Epic Games HTML5 projects

     much of this is for UE4 development purposes.

     to create a custom HTML file for your project:
     - make a copy of this file - or make one from scratch
     - and put it in: "your project folder"/Build/HTML/GameX.html.template
-->

<html lang="en">

<head>
	<title>安徽农业大学虚拟校园</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		@font-face {
			font-family: YouSheBiaoTiHei;
			src: url('./fonts/YOUSHEBIAOTIHEI-2.TTF');
		}
	</style>

	<!-- <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> -->
	<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> -->
	<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> -->

	<script src="jquery-2.1.3.min.js"></script>
	<script src="bootstrap.min.js"></script>
	<link href="bootstrap.min.css" rel="stylesheet">

	<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff2 -->
	<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.woff -->
	<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/fonts/glyphicons-halflings-regular.ttf -->
	<script src="./fonts/circle-progress.js"></script>

	<link href="AHND-HTML5-Shipping.css" rel="stylesheet">
</head>

<script>
	// 定义数据库名称和版本
		const dbName = 'UE4_assetDatabase_AHND';
		const dbVersion = 202408141326;
		const storeName = 'FILES';
		function clearIndexedDB(dbName) {
			return new Promise((resolve, reject) => {
				const request = window.indexedDB.deleteDatabase(dbName);

				request.onsuccess = () => resolve();
				request.onerror = event => reject(event.target.errorCode);
			});
		}
	const userAgent = navigator.userAgent || navigator.vendor || window.opera;
	if (userAgent.match(/iPhone|iPad|iPod/i)) {
				// 打开数据库
		let request = indexedDB.open(dbName, dbVersion);

		request.onerror = function(event) {
			console.error('数据库打开失败');
		};

		request.onsuccess = function(event) {
			const db = request.result;
			checkDataInStore(db);
			console.log('22222');
			
		};

		request.onupgradeneeded = function(event) {
			let db = event.target.result;
			if (!db.objectStoreNames.contains(storeName)) {
				db.createObjectStore(storeName, { keyPath: 'id' });
			}
		};


}
	function checkDataInStore(db) {
		// 检查对象存储空间是否有数据
		let store = db.transaction(storeName, 'readonly').objectStore(storeName);
		let countRequest = store.count();

		countRequest.onsuccess = function() {
			if (countRequest.result > 0) {
				console.log('对象存储空间有数据');
								// 使用方法：
		clearIndexedDB('UE4_assetDatabase_MXGuide').then(() => {
			console.log('IndexedDB22 cleared');
		}).catch(error => {
			console.error('Error clearing IndexedDB:', error);
		});
		// 使用方法：
		clearIndexedDB('UE4_assetDatabase_h5_0824').then(() => {
			console.log('IndexedDB cleared');
			
			location.reload(true);
		}).catch(error => {
			console.error('Error clearing IndexedDB:', error);
		});
				
			
			} else {
				console.log('对象存储空间没有数据');
			}
		};

		countRequest.onerror = function(event) {
			console.error('无法计数对象存储空间的数据');
		};
	}


</script>

<style>


	.wrapper .bgimg{
			width: 100%;height: 100%;position:absolute;top: 0;left: 0;z-index: 1;
}

	#progressBarBox {
		z-index: 2;
		width: 150px;
		height: 150px;
		margin-left: 50%;
		transform: translateX(-75px);
		background-image: url('./img/Rectangle.png');
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;


	}

	#progressBar {
		font-family: YouSheBiaoTiHei;
		transform: translateY(-100%);
		color: #fff;
		font-size: 35px;
		width: 150px;
		height: 150px;
		/* background-color: aqua; */
		display: flex;
		justify-content: center;
		align-items: center;


	}
	@font-face {
			font-family: YouSheBiaoTiHei;
			src: url('./fonts/YOUSHEBIAOTIHEI-2.TTF');
		}

	#progresstitle {
		width: 100%;
		display: flex;
		justify-content: center;
		font-family: YouSheBiaoTiHei;
		color: rgba(255, 255, 255, 0.97);
		font-size: 55px;

		font-weight: 400;
		line-height: 52px;
		letter-spacing: 4px;
		text-align: center;
		z-index: 99999;
		position: fixed;
		bottom: 200px;

	}


	#buttomjindu22 {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		font-family: YouSheBiaoTiHei;
		position: fixed;
		bottom: 3vh;
	}

	#progressBar2 {

		display: none;
		z-index: 3;
		width: 51px;
		line-height: 28px;
		height: 31.48px;
		font-family: 'Courier New', Courier, monospace;
		font-size: 14px;
		color: #fff;
		background-image: url('./img/Union.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	#newjindubox {
		display: none;
		width: 400px;
		height: 24px;
		background-color: rgba(255, 255, 255, 0.26);
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
	}
	#newjindu {
		width: 0;
		height: 100%;
		border-bottom-left-radius: 15px;
		border-bottom-right-radius: 15px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		/* background: linear-gradient(to right, #4E75FF, #43A5FF); */
		background: linear-gradient(90deg, #74C44A 0%, #A1E76E 50%, #FFE824 100%);
		transition: width 0.1s;


		position: relative;
	}
</style>

<body>


<div style=" position: fixed;  z-index: -2;" >
        <audio controls id="audio_h5" src=""></audio>
</div>

	<!--<button onclick = "CCall()"> CCall </button>-->
	<div class="wrapper" id="mainarea">
		<div  id="inputbox" style="display: flex;align-items: center;justify-content: center;z-index: -1;position: fixed;width: 100%;top: 5vh;">
			<input style="border: none; border-radius: 5px; width: 50vw; height: 30px; color: #fff; background: #0B0B0BB2;" id="searchinput" type="text">
			<button style="height: 30px;background-color: #D48E3B;margin-left: 5px; color: #fff;border: none;" onclick="searchtext()">搜索</button>
		</div>


		<div  id="myVideoBox"

    style="width: 100%;height: 100%; background-color: rgb(0 0 0 / 63%); position: fixed;z-index: -1;">

    <img  onclick="closevideo()" style="width: 30px;position: absolute;right: 0;z-index: 99;"

        src="data:image/png;base64,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"

        alt="">

    <video style="width: 500px;height: auto;margin-left: 24%; margin-top: 50px;z-index: 99999;" id="myVideo" crossorigin="anonymous" src="" controls></video>

</div>


		<div class="alert alert-warning centered-axis-xy"
			style="min-height: 20px;width: 100%;height: 100%;margin: 0; display:block;" role="alert"
			id="compilingmessage">
			<img class="bgimg" src="./fonts/bg.png">
			<div id='loadTasks' style="opacity: 0;width: 0;"> </div>
			<div
				style="position: fixed; top: 0; left: 0;width: 100%;height: 100vh;background-color: #00000071;; z-index: 999;">

				<img style="position: absolute;left: 40px;top: 40px;" src="./img/logo2.png" alt="">


				<div id="progresstitle">
					<img style="width: 350px;" src="./img/logotitle.png" alt="" srcset="">
				</div>


				<div id="buttomjindu22">

					<div id="newjindubox">
						<div id="newjindu">
							<div style=" position: absolute ;top: -55px; right: -20px;display: flex;justify-content: right;margin-bottom: 10px;">
								<div id="progressBar2">
									0%
								</div>
							</div>
							<img style="position: absolute;  top: -25px;right: -20px; " src="./img/jinduicon2.png" alt="">
						</div>
	
					</div>
					<div id="progressBar3"
						style="width: 100%;color: #FFFFFF;font-size: 18px;margin-top: 15px; font-family: 'Courier New', Courier, monospace;">
						下载资源中
					</div>
	
				</div>
				<!-- <div style="z-index: 9999; height: 150px; position: fixed;z-index: 99;bottom: 53vh;left: 50vw;transform: translateX(-75px);" >
				<div id="progressBarBox" style="display: none;">
					<img  style="position: absolute; width: 150px;height: 150px;top: 0;left: 0;z-index: -1;" src="./img/Rectangle2.png" alt="">
					<div id="progressBar" style="z-index: 3;" >
					0%
					</div>
				</div>
			</div> -->
			</div>

		</div>
		<!-- The "tabindex=0" specifier on the canvas is important to allow it to capture keyboard focus when clicking on it with a mouse -->
		<canvas tabindex=0 id="canvas" class="emscripten" oncontextmenu="event.preventDefault()" style="display:none;">
	</div>
	<div class="buttonarea text-center" id="buttonarea" style="display: none;">
		<button type="button" class="btn btn-primary"
			onclick="try { Module['pauseMainLoop'](); } catch(e) {console.error(e);}" title="Pause">
			<span class="glyphicon glyphicon-pause" aria-hidden="true"></span><span class="buttontext"> Pause</span>
		</button>
		<button type="button" class="btn btn-primary"
			onclick="try { Module['resumeMainLoop'](); } catch(e) {console.error(e);}" title="Resume">
			<span class="glyphicon glyphicon-play" aria-hidden="true"></span><span class="buttontext"> Resume</span>
		</button>
		<!--<button type="button" class="btn btn-primary" onclick="var w = document.getElementById('logwindow'); w.style.display = w.style.display ? '' : 'none';">Toggle Log</button></div>-->
		<button type="button" class="btn btn-primary" id='clear_indexeddb'
			onclick="try { deleteIndexedDBStorage(); } catch(e) {console.error(e);}" title="Clear IndexedDB">
			<span class="glyphicon glyphicon-trash" aria-hidden="true"></span><span class="buttontext"> Clear
				IndexedDB</span>
		</button>
		<button type="button" class="btn btn-primary" id="fullscreen_request" title="Fullscreen">
			<span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span><span class="buttontext">
				Fullscreen</span>
		</button>
	</div>
	<div class="texthalf text-normal jumbotron " id="logwindow" style='display:none'></div>

	<script>
		// 	$('#progressBarBox').circleProgress({
		// 	value: 0.01,
		// 	size: 150,
		// 	thickness:7,
		// 	emptyFill:"rgba(0, 0, 0, .1)",
		// 	fill: {
		// 		gradient: ["#A3F9FF"]
		// 	}
		// });


	</script>

<script>
    var now = new Date().getTime();
    document.write('<script src="AHND-HTML5-Shipping.UE4.js?t=' + now + '"><\/script\>');
</script>

</body>

<script>

	const forceLandscape = ((id = '#mainarea') => {
	  const handler = () => {
		let width = document.documentElement.clientWidth;
		let height = document.documentElement.clientHeight;
		let targetDom = document.querySelector(id);
		if (!targetDom) return;
		// 如果宽度比高度大，则认为处于横屏状态
		// 也可以获取 window.orientation 方向来判断屏幕状态
		if (width > height) {
		  targetDom.style.position = 'absolute';
		  targetDom.style.width = `${width}px`;
		  targetDom.style.height = `${height}px`;
		  targetDom.style.left = `${0}px`;
		  targetDom.style.top = `${0}px`;
		  targetDom.style.transform = 'none';
		  targetDom.style.transformOrigin = '50% 50%';
		} else {
		  targetDom.style.position = 'absolute';
		  targetDom.style.width = `${height}px`;
		  targetDom.style.height = `${width}px`;
		  targetDom.style.left = `${0 - (height - width) / 2}px`;
		  targetDom.style.top = `${(height - width) / 2}px`;
		  targetDom.style.transform = 'rotate(90deg)';
		  targetDom.style.transformOrigin = '50% 50%';
		}
	  };
	 
	  const handleResize = () => {
		setTimeout(() => {
		  handler();
		  resizeCanvas()
		}, 300);
	  };
	 
	  window.addEventListener('resize', handleResize);
	  handler();
	})();
	</script> 

</html>