Add HTML text

yuanretro · Mar 4, 2024 · 88f8399 · 88f8399
1 parent d33b0c2
commit 88f8399
Show file tree

Hide file tree

Showing 10 changed files with 334 additions and 0 deletions.
diff --git a/yuanshen.dev-20240304-2.zip b/yuanshen.dev-20240304-2.zip
diff --git a/yuanshen.dev-20240304-2/404.html b/yuanshen.dev-20240304-2/404.html
@@ -0,0 +1,25 @@
+<html>
+	<head>
+		<title>404 Not Found</title>
+	</head>
+	<body>
+		<style>
+			.navi {
+				float: left;
+				margin-right: 50px;
+			}
+		</style>
+		<ul>
+			<li class="navi"><a href="./index.html">Main</a></li>
+			<li class="navi"><a href="./music.html">Music</a></li>
+			<li class="navi"><a href="./pinball.html">JS Pinball Game</a></li>
+			<li class="navi"><a href="./about.html">About</a></li>
+		</ul>
+		<br />
+		<center>
+			<h1>404 Not Found</h1>
+		</center>
+		<hr>
+		<center>nginx</center>
+	</body>
+</html>
diff --git a/yuanshen.dev-20240304-2/GenshinTheme.mp3 b/yuanshen.dev-20240304-2/GenshinTheme.mp3
diff --git a/yuanshen.dev-20240304-2/Liyue.mp3 b/yuanshen.dev-20240304-2/Liyue.mp3
diff --git a/yuanshen.dev-20240304-2/about.html b/yuanshen.dev-20240304-2/about.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="GB2312">
+		<title>GIRCH(Legacy)-About</title>
+	</head>
+	<body>
+		<style>
+			.navi {
+				float: left;
+				margin-right: 50px;
+			}
+		</style>
+		<ul>
+			<li class="navi"><a href="./index.html">Main</a></li>
+			<li class="navi"><a href="./music.html">Music</a></li>
+			<li class="navi"><a href="./pinball.html">JS Pinball Game</a></li>
+			<li class="navi"><a href="./about.html">About</a></li>
+		</ul>
+		<br />
+		<h2>About me...</h2>
+		<p>
+			I am a high-school retro computing enthusiast, and I wish to share my experience and joy with everyone...
+			In 2017, I got interested in computer hardware. Since then, I frequently visited local computer stores
+			and e-waste recyclers to collect vintage computer hardwares. Now I actually got plenty of them! In the
+			past few years, many people had helped me and taught me lots of useful knowledge. Huge thanks to them!
+			If you want to get in touch with me, please read the "Contact me..." section down below.
+		</p>
+		<h2>Contact me...</h2>
+		The easiest way to get in touch with me is by email: <a
+			href="mailto:[email protected]">[email protected]</a> (or <a
+			href="mailto:[email protected]">[email protected]</a>),
+		but you can also leave messages on my blog <a href="https://www.lijiaxuan.xyz/">https://www.lijiaxuan.xyz/</a>.
+		<h2>Source code...</h2>
+		<p>The source code of this website is available here: <a
+				href="https://github.com/lijiaxuan1811/yuanshen.dev">https://github.com/lijiaxuan1811/yuanshen.dev</a>.
+			Feel free to use them!</p>
+	</body>
+</html>
diff --git a/yuanshen.dev-20240304-2/index.html b/yuanshen.dev-20240304-2/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="GB2312">
+		<title>GIRCH(Legacy)-Main</title>
+	</head>
+	<body>
+		<style>
+			.navi {
+				float: left;
+				margin-right: 50px;
+			}
+		</style>
+		<ul>
+			<li class="navi"><a href="./index.html">Main</a></li>
+			<li class="navi"><a href="./music.html">Music</a></li>
+			<li class="navi"><a href="./pinball.html">JS Pinball Game</a></li>
+			<li class="navi"><a href="./about.html">About</a></li>
+		</ul>
+		<br />
+		<a>
+			<h2>Welcome to Genshin Impact(Yuanshen) Retro Computing Hub(GIRCH)...</h2>
+			<br />
+			<img src="./paimon.gif" width="150" height="246">
+			<br />
+			This site is friendly towards older browsers and slow internet speed...
+			<br />
+			Have fun!
+		</a>
+	</body>
+</html>
diff --git a/yuanshen.dev-20240304-2/music.html b/yuanshen.dev-20240304-2/music.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="GB2312">
+		<title>GIRCH(Legacy)-Music</title>
+	</head>
+	<body>
+		<style>
+			.navi {
+				float: left;
+				margin-right: 50px;
+			}
+		</style>
+		<ul>
+			<li class="navi"><a href="./index.html">Main</a></li>
+			<li class="navi"><a href="./music.html">Music</a></li>
+			<li class="navi"><a href="./pinball.html">JS Pinball Game</a></li>
+			<li class="navi"><a href="./about.html">About</a></li>
+		</ul>
+		<br />
+		<p>
+			This page contains several songs from different video games.
+			<br />
+			Feel free to test your system with them!
+			PS:Unfortunately audio is not well supported before HTML 5,<br />so if you have trouble playing the songs
+			here, please use the direct links that take the players' place.
+			<br />
+			1.Genshin Impact Main Theme-HOYO-MIX/Yu-Peng Chen
+			<br />
+			<audio src="./GenshinTheme.mp3" controls>Your browser doesn't seem to support HTML 5 and audio
+				element,<br />but you can still download it <a href="./GenshinTheme.mp3">here</a>.</audio>
+			<br />
+			2.Liyue-HOYO-MIX/Yu-Peng Chen
+			<br />
+			<audio src="./Liyue.mp3" controls>Your browser doesn't seem to support HTML 5 and audio element,<br />but
+				you can still download it <a href="./Liyue.mp3">here</a>.</audio>
+			<br />
+		</p>
+	</body>
+</html>
diff --git a/yuanshen.dev-20240304-2/paimon.bmp b/yuanshen.dev-20240304-2/paimon.bmp
diff --git a/yuanshen.dev-20240304-2/paimon.gif b/yuanshen.dev-20240304-2/paimon.gif
diff --git a/yuanshen.dev-20240304-2/pinball.html b/yuanshen.dev-20240304-2/pinball.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="GB2312">
+		<title>GIRCH(Legacy)-Pinball</title>
+	</head>
+
+	<body>
+		<style>
+			.navi {
+				float: left;
+				margin-right: 50px;
+			}
+		</style>
+		<ul>
+			<li class="navi"><a href="./index.html">Main</a></li>
+			<li class="navi"><a href="./music.html">Music</a></li>
+			<li class="navi"><a href="./pinball.html">JS Pinball Game</a></li>
+			<li class="navi"><a href="./about.html">About</a></li>
+		</ul>
+		<br />
+		<h2>Pinball game V2.0...</h2>
+		<p>This is a small pinball game using plain javascript. You can control the panel using 'a' and 'd' keys for
+			left and right or click the buttons. This game might not work if your browser do not support javascript. You
+			earn 5 points each time you catch the ball using the panel, but if you fail to catch the ball, the game
+			would be over. The game would restart after you press the button on the popping out dialog.</p>
+		<p>Thanks Nille Cheng and his book 'Learn to Create Web Games Using Javascript'(ISBN 978-7-115-46238-1), as the
+			concept of this game and part of the algorithm is base on his codes in the book.</p>
+		<canvas id="canvas" width="400" height="400"></canvas>
+		<script type="text/javascript">
+			var canv = document.getElementById("canvas");
+			var ctx = canv.getContext("2d"); //Create canvas and pointer
+			var startX = 0;
+			var startY = 0;
+			var panelX = 0;
+			var flag = false;
+			var score = 0;
+			//var testI = 0;
+			function debounce(func, wait, imme) {
+				//This function can lower the bounce when the keyboard keys are pressed
+				//Bounce means that a single key press is treated like mutiple presses in the code
+				//Func is the function you want to debounce, wait is the timeout that a second press is counted
+				//Imme is a boolean argument, if you don't want any time out, please set it as 'true'
+				//Thank Peter Mortensen on Stackoverflow forum
+				//https://www.stackoverflow.com/questions/24004791/what-is-the-debounce-function-in-javascript/24004942#24004942
+				var timeout;
+				return function() {
+					var context = this,
+						args = arguments;
+					var callNow = imme && !timeout;
+					clearTimeout(timeout);
+					timeout = setTimeout(function() {
+						timeout = null;
+						if (!imme) {
+							func.apply(context, args);
+						}
+					}, wait);
+					if (callNow) {
+						func.apply(context, args);
+					}
+				}
+			}
+
+			function prep() {
+				while (true) {
+					startX = Math.floor(Math.random() * 1000);
+					if (startX > 0 && startX < 400) {
+						break;
+					} else {
+						continue;
+					}
+				}
+				while (true) {
+					startY = Math.floor(Math.random() * 1000);
+					if (startY > 0 && startY < 400) {
+						break;
+					} else {
+						continue;
+					}
+				}
+				while (true) {
+					panelX = Math.floor(Math.random() * 1000);
+					if (panelX > 0 && panelX < 350) {
+						break;
+					} else {
+						continue;
+					}
+				}
+			}
+			prep();
+			var ball = {
+				x: startX,
+				y: startY,
+				xSpeed: -2,
+				ySpeed: -2,
+				draw: function() {
+					ctx.fillStyle = "Red";
+					ctx.beginPath();
+					ctx.arc(this.x, this.y, 10, 0, Math.PI * 2, false);
+					ctx.fill();
+				},
+				move: function(panelSt, panelEn) {
+					if (this.x + this.xSpeed < 0 || this.x + this.xSpeed > 400) {
+						this.xSpeed = -this.xSpeed;
+					} else {
+						this.x += this.xSpeed;
+					}
+					if (this.y + this.ySpeed < 0 || this.y + this.ySpeed > 400) {
+						this.ySpeed = -this.ySpeed;
+					} else if (this.y + this.ySpeed >= 380 && this.y + this.ySpeed <= 400) {
+						if (this.x > panelSt - 10 && this.x < panelEn + 10) {
+							this.ySpeed = -this.ySpeed;
+							score += 5;
+						} else {
+							//this.y += this.ySpeed;
+							window.alert("Game over!");
+							this.x = 0;
+							this.y = 0;
+							score = 0;
+							flag = true;
+						}
+					} else {
+						this.y += this.ySpeed;
+					}
+				}
+			};
+			var panel = {
+				x: panelX,
+				y: 390,
+				xSize: 50,
+				ySize: 5,
+				draw: function() {
+					ctx.fillStyle = "Black";
+					ctx.fillRect(this.x, this.y, this.xSize, this.ySize);
+				}
+			};
+
+			function keyPanel(event) {
+				if (event.keyCode == 65) {
+					//console.log("Left!",testI);
+					//testI++;
+					panel.x -= 8;
+					if (panel.x < 0) {
+						panel.x = 0;
+					}
+				}
+				if (event.keyCode == 68) {
+					//console.log("Right!",testI);
+					//testI++;
+					panel.x += 8;
+					if (panel.x > 400 - panel.xSize) {
+						panel.x = 400 - panel.xSize;
+					}
+				}
+			}
+			var dbPanelKey = debounce(keyPanel, 20);
+
+			function leftClick() {
+				panel.x -= 15;
+				if (panel.x < 0) {
+					panel.x = 0;
+				}
+			}
+
+			function rightClick() {
+				panel.x += 15;
+				if (panel.x > 400 - panel.xSize) {
+					panel.x = 400 - panel.xSize;
+				}
+			}
+			const leftButton = document.createElement("button");
+			leftButton.innerText = "Left";
+			leftButton.addEventListener("click", leftClick);
+			document.body.appendChild(leftButton);
+			const rightButton = document.createElement("button");
+			rightButton.innerText = "Right";
+			rightButton.addEventListener("click", rightClick);
+			document.body.appendChild(rightButton);
+			setInterval(function() {
+				if (flag == true) {
+					prep();
+					ball.x = startX;
+					ball.y = startY;
+					panel.x = panelX;
+					flag = false;
+				} else {
+					ctx.clearRect(0, 0, 400, 400);
+					ctx.font = "20px Arial";
+					ctx.fillText("score:" + score, 10, 30);
+					ball.draw();
+					panel.draw();
+					ball.move(panel.x, panel.x + panel.xSize);
+					ctx.strokeRect(0, 0, 400, 400);
+					window.addEventListener("keydown", dbPanelKey);
+				}
+			}, 30);
+		</script>
+	</body>
+</html>