frontpage/index.html

<!DOCTYPE html>
<html>

<head>
	<title class=info>Chloe Fontenot's Web Server</title>
	<link rel="icon" type="image/x-icon" href="Chloe_face.jpg">
	<link rel="icon" href="Chloe_face.jpg" type="image/jpeg" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta content="Chloe Fontenot's Web Server" property="og:title" />
	<meta content="Home Page of Chloe Fontenot's Web Server" property="og:description" />
	<meta content="https://chloefontenot.org" property="og:url" />
	<meta content="https://chloefontenot.org/Chloe_face.jpg" property="og:image" />
	<meta content="#FF0000" data-react-helmet="true" name="theme-color" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="root.css" rel="stylesheet">
		<!-- Google tag (gtag.js) -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=G-L9QF12JY74"></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag() { dataLayer.push(arguments); }
			gtag('js', new Date());

			gtag('config', 'G-L9QF12JY74');
		</script>

</head>


<body class="center">
	<div id="wrapper">
		<nav>
			<h1>Hi! Welcome to my Web Server!</h1>
			<div class="navborder">
				<a class="button" href="index.html">Home</a>
				<a class="button" href="https://discord.gg/nxZUrsBxmp">My Discord Server</a>
				<a class="button" href="https://gitea.chloefontenot.org/CCF_100">Gitea</a>
				<a class="button" href="https://search.chloefontenot.org">SearXNG Instance</a>
				<a class="button" href="https://jellyfin.chloefontenot.org">Jellyfin</a>
				<div class="dropdown"/>
				<button class="dropbtn button">Minecraft Server Dynamic Maps</button>
					<div class="dropdown-content navborder">
						<a class="button dropdownButton" href="https://survival.chloefontenot.org">Survival Server</a>
						<a class="button dropdownButton" href="https://creative.chloefontenot.org">Creative Server</a>
						<a class="button dropdownButton" href="https://modded.chloefontenot.org">Modded Server</a>
						<a class="button dropdownButton" href="https://craftoria.chloefontenot.org">Craftoria Server</a>
					</div>
				</div>
				<div class="dropdown">
				<button class="dropbtn button">WASM Games</button>
				<div class="dropdown-content navborder">
					<a class="button dropdownButton" href="mario">Mario</a><br>
					<a class="button dropdownButton" href="sonic1">Sonic 1</a><br>
					<a class="button dropdownButton" href="sonic2">Sonic 2</a><br>
					<a class="button dropdownButton" href="soniccd">Sonic CD</a><br>
					<a class="button dropdownButton" href="celeste-wasm">Celeste</a>
					</div>
				</div>
			</div>
		</nav>

		<h2 class="aboutme">About me<img class="aboutme" src="Chloe.jpg" alt="Chloe" height="5%" width="5%"></h2>
		<p class="info">Hi! My name is <mark>Chloe Fontenot.</mark> I am a college graduate of South Louisiana Communitity College. I am also a software developer. <br> I love writing code! 😁</p>
		<p>This site is hosted on a computer I built myself running Arch Linux and NGINX.</p>
		<p>Pick a design!</p>
		<div id="selectDesign">
			<input placeholder="Enter some text here" id=inputText>
			<select id="designSelections" name="designSelections">
				<option value="design1">Design 1</option>
				<option value="design2">Design 2 (Triangle)</option>
				<option value="design3">Design 3 (Triangle, varient 2)</option>
				<option value="design4">Design 4 (Circle)</option>
				<option value="design5">Design 5 (Circle, varient 2)</option>
			</select>
			<input class="button" type="button" onclick="drawDesign();" value="Draw design">
			<input class="button" id="toggleEasterEgg" type="button" onclick="easterEgg(false);" value="Disable Easter Egg" style="display: none;">
		</div>
		<p id="jsOutput"></p>
		<!--img id=riitag src="https://tag.rc24.xyz/294976590658666497/tag.max.png" alt="My RiiTag" width=1024-->
		<button id=DiscordButton class=button onClick="toggleDiscordWidget()">Show Discord Widget</button>
		<div id="DiscordWidget" style="display: none">
			<iframe src="https://discord.com/widget?id=475327576110268466&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
		</div>
		<p>
			<a href="https://jigsaw.w3.org/css-validator/check/referer">
				<img style="border:0;width:88px;height:31px" src="https://jigsaw.w3.org/css-validator/images/vcss"
					alt="Valid CSS!" />
			</a>
		</p>


		<footer>
			<a href=https://gitea.chloefontenot.org/CCF_100/frontpage class="button info">Chloe Fontenot, 2025</a>
		</footer>
		<script>
			function getCookie(cname) {
				let name = cname + "=";
				let decodedCookie = decodeURIComponent(document.cookie);
				console.log(decodedCookie);
				let ca = decodedCookie.split(';');
				for(let i = 0; i <ca.length; i++) {
					let c = ca[i];
					while (c.charAt(0) == ' ') {
						c = c.substring(1);
					}
					if (c.indexOf(name) == 0) {
						return c.substring(name.length, c.length);
					}
				}
				return "";
			}
			function easterEgg(easterEggState) {
				console.log("Easter egg state is: " + easterEggState);
				if (easterEggState) {
					document.cookie = "easterEggState=true";
					document.body.style.backgroundImage = "url(https://files.chloefontenot.org/blahaj-bl%C3%A5haj.gif)";
					document.getElementById("toggleEasterEgg").style.display = "inline";
					// change name :3
					let siteData = document.getElementsByClassName("info");
					console.log(siteData);
					for (let i = 0; i < siteData.length; ++i) {
						console.log(siteData[i]);
						//siteData[i].innerHTML = siteData[i].innerHTML.replace("Chloe", "Chloe");
					}
				} else {
					document.cookie = "easterEggState=false";
					document.body.style.backgroundImage = "url(space.gif)";
					document.getElementById("toggleEasterEgg").style.display = "none";
					// change name :3
					let siteData = document.getElementsByClassName("info");
					console.log(siteData);
					for (let i = 0; i < siteData.length; ++i) {
						console.log(siteData[i]);
						//siteData[i].innerHTML = siteData[i].innerHTML.replace("Chloe", "Chloe");
					}
				}
			}
			easterEgg((/true/).test(getCookie("easterEggState")));
			function drawDesign() {
				let event = document.getElementById('designSelections');
				let value = event.options[event.selectedIndex].value;
				//alert(value);
				let inputText = document.getElementById("inputText").value;
				if (inputText.includes("🏳️‍⚧️")) {
					inputText += " Trans rights are human rights! 🏳️‍⚧️";
					easterEgg(true);
				}
				let designText;
				switch (value) {
					case "design1":
						designText = design1(inputText);
						break;
					case "design2":
						designText = design2(inputText);
						break;
					case "design3":
						designText = design3(inputText);
						break;
					case "design4":
						designText = design4(inputText);
						break;
					case "design5":
						designText = design5(inputText);
						break;
				}
				document.getElementById("jsOutput").innerHTML = designText;
			}

			function design1(input) {
				console.log("Running design1...");
				let outputString;
				let startEnd = "";
				for (let i = 0; i < input.length + 2; i++) {
					startEnd += "*";
				}
				outputString = startEnd + "<br>";
				outputString += "*" + "<br>";
				outputString += "* " + input + "<br>";
				outputString += "*" + "<br>";
				outputString += startEnd;
				return outputString;
			}
			function design2(input) {
				console.log("Running design2...");
				let outputString;
				let height = (input.length * 2) + 6;
				let mid = Math.trunc(height / 2) + 1;
				if (height % 2 == 0) {
					height++;
				}
				outputString = "";
				for (let i = 0; i < height; i++) {
					if (mid == i) { //Determine if we're in the middle of the triangle
						outputString += "**" + input + "**";
					} else {
						for (let j = 0; j < i; j++) {
							outputString += "*";
						}
					}
					outputString += "<br>";
				}
				return outputString;
			}
			function design3(input) {
				console.log("Running design3...");
				let outputString;
				let height = (input.length * 2) + 6;
				let mid = Math.trunc(height / 2) + 1;
				if (height % 2 == 0) {
					height++;
				}
				outputString = "";
				if (mid % 2 == 1) { // Skip a line if odd
					var subOffset = 1;
					var addOffset = 0;
				} else {
					var subOffset = 0;
					var addOffset = 1;
				}
				for (let i = 0; i < mid - addOffset; i++) {
					for (let j = 0; j < i; j++) {
						if (i % 2 == 1) {
							if (i != (mid - 1)) {
								if (i == 0 || (j == 0 || j == (i - 1))) { // Check if we're at the beginning or end of the line
									outputString += "*";
								} else {
									outputString += "&nbsp;";
								}
							}
						}
					}
					outputString += "<br>";
				}
				outputString += "* " + input + " *<br>";
				for (let i = mid - subOffset; i > 0; i--) {
					for (let j = 0; j < i; j++) {
						if (i % 2 == 1) {
							if (j != (mid - 1) || (j != mid)) {
								if ((i == 0 || (j == 0 || j == (i - 1)))) { // Check if we're at the beginning or end of the line
									outputString += "*";
								} else {
									outputString += "&nbsp;";
								}
							}
						}
					}
					outputString += "<br>";
				}
				return outputString;
			}

			function design4(input) {
				let outputString = "";
				let outputLine = "";
				let radius = (input.length + 1);
				let mid = radius;
				if (mid % 2 == 1) {
					var spaceOffset = "&nbsp;";
				} else {
					var spaceOffset = "";
				}
				console.log(radius, mid);
				// dist represents distance to the center
				let dist = parseFloat(0);
				let space = ""
				for (let i = 0; i < (input.length / 2); ++i) {
					space += "&nbsp;";
				}
				// for horizontal movement
				var i;
				var j;
				let lineHasInput = false;
				for (i = 0; i <= 2 * radius; i++) {
					lineHasInput = false;
					if (Math.trunc(i) != mid) {
						// for vertical movement
						for (j = 0; j <= 2 * radius; j++) {
							dist = Math.sqrt(
								((i - radius) * (i - radius) * 4) + // (* 4) accounts for the offset between lines
								(j - radius) * (j - radius)
							);
							//console.log(i, j, radius, dist);
							// dist should be in the range (radius - 0.5)
							// and (radius + 0.5) to print stars(*)


							if (dist > radius - 1 && dist < radius + 1) { //&& dist > radius - 1
								lineHasInput = true;
								outputLine += "​·"; //zero-width space
							} else {
								outputLine += "&nbsp;";
							}
						}
					} else {
						lineHasInput = true;
						outputLine += "​·" + space + input + space + spaceOffset + "·"; //zero-width space
					}

					//console.log(i, j, outputLine);
					if (lineHasInput) {
						//console.log("outputLine", outputLine);
						outputString += outputLine + "<br>";
					}
					outputLine = "";
				}
				return outputString;
			}
			
			var charIterateState;
			const surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
			function charIterate(input) {
				let stringLength = (input.length - 1);
				let temp = input.split('');
				for (let i = 0; i < stringLength; ++i) {
					let compareString = temp.join("");
					let stringEval = undefined, stringEvalIndex = undefined;
					while ((stringEval = surrogatePairs.exec(compareString)) !== null) {
						stringEvalIndex = stringEval.index;
						//console.log("emoji is at index", stringEvalIndex);
					}
					if (stringEvalIndex == i) {
						stringLength--;
						temp.splice(i, 1);
						console.log("Decreasing stringLength variable to", stringLength);
					}
		}
		if (charIterateState == undefined) {
			//console.log("undefined! setting to zero");
			charIterateState = 0;
		} else {
			if (charIterateState < stringLength) {
				charIterateState++;
			} else {
				charIterateState = 0;
			}
		}
		//console.log(charIterateState, fixedCharAt(input, charIterateState));
		return charIterateState;
	}

			function design5(input) {
				charIterateState = undefined;
				let outputString = "";
				let outputLine = "";
				let radius = (input.length);
				let mid = radius;
				if (mid % 2 == 1) {
					var spaceOffset = "&nbsp;";
			} else {
				var spaceOffset = "";
			}
			//console.log(radius, mid);
			// dist represents distance to the center
			let dist = parseFloat(0);
			let space = ""
			for (let i = 0; i < (input.length / 2); ++i) {
				space += "&nbsp;";
			}
			// for horizontal movement
			var i;
			var j;
			let lineHasInput = false;
			for (i = 0; i <= 2 * radius; i++) {
				lineHasInput = false;
				if (Math.trunc(i) != mid) {
					// for vertical movement
					for (j = 0; j <= 2 * radius; j++) {
						dist = Math.sqrt(
							((i - radius) * (i - radius) * 4) + // (* 4) accounts for the offset between lines
							(j - radius) * (j - radius)
						);
						//console.log(i, j, radius, dist);
						// dist should be in the range (radius - 0.5)
						// and (radius + 0.5) to print stars(*)
	
	
						if (dist > radius - 1 && dist < radius + 1) { //&& dist > radius - 1
							lineHasInput = true;
							outputLine += "" + fixedCharAt(input, charIterate(input)); //zero-width space
						} else {
							outputLine += "&nbsp;";
						}
					}
				} else {
					lineHasInput = true;
					outputLine += fixedCharAt(input, charIterate(input)) + space + input + space + spaceOffset + fixedCharAt(input, charIterate(input));
				}

				//console.log(i, j, outputLine);
				if (lineHasInput) {
					outputString += outputLine + "<br>";
				}
				outputLine = "";
			}
			return outputString;
		}
	
		// Code from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt
	
		function fixedCharAt(str, idx) {
			str = String(str);
	
			//const surrogatePairs = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
			while (surrogatePairs.exec(str) !== null) {
				const lastIdx = surrogatePairs.lastIndex;
				if (lastIdx - 2 < idx) {
					idx++;
				} else {
					break;
				}
			}
	
			if (idx >= str.length || idx < 0) {
				return "";
			}
	
			let ret = str.charAt(idx);
				if (
				/[\uD800-\uDBFF]/.test(ret) &&
				/[\uDC00-\uDFFF]/.test(str.charAt(idx + 1))
			) {
				// Go one further, since one of the "characters" is part of a surrogate pair
				ret += str.charAt(idx + 1);
			}
			return ret;
		}
		
		function toggleDiscordWidget() {
			var widget = document.getElementById("DiscordWidget");
			var button = document.getElementById("DiscordButton");
			if (widget.style.display === "none") {
				widget.style.display = "block";
				button.textContent="Hide Discord Widget";
				
			} else {
				widget.style.display = "none";
				button.textContent="Show Discord Widget";
			}
		} 
		</script>
	</div>
</body>



</html>