<!DOCTYPE html> <html> <head> <title>Caleb Fontenot's Web Server</title> <link rel="icon" type="image/x-icon" href="Caleb_face.jpg"> <link rel="icon" href="Caleb_face.jpg" type="image/jpeg" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta content="Caleb Fontenot's Web Server" property="og:title" /> <meta content="Home Page of Caleb Fontenot's Web Server" property="og:description" /> <meta content="https://calebfontenot.com" property="og:url" /> <meta content="https://calebfontenot.com/Caleb_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/RrvMsvA">My Discord Server</a> <a class="button" href="https://gitea.calebfontenot.com/CCF_100">Gitea</a> <a class="button" href="https://search.calebfontenot.com">SearXNG Instance</a> <a class="button" href="https://jellyfin.calebfontenot.com">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.calebfontenot.com">Survival Server</a> <a class="button dropdownButton" href="https://creative.calebfontenot.com">Creative Server</a> <a class="button dropdownButton" href="https://modded.calebfontenot.com">Modded Server</a> <a class="button dropdownButton" href="https://skyfactory.calebfontenot.com">Skyfactory 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> </div> </div> </div> </nav> <h2 class="aboutme">About me<img class="aboutme" src="Caleb.jpg" alt="Caleb" height="5%" width="5%"></h2> <p id="info">Hi! My name is <mark>Caleb 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 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"> </div> <script> 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! 🏳️⚧️"; document.body.style.backgroundImage = "url(https://files.calebfontenot.com/blahaj-bl%C3%A5haj.gif)"; console.log(document.getElementById("info").innerHTML); document.getElementById("info").innerHTML = document.getElementById("info").innerHTML.replaceAll("Caleb", "Chloe"); } 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 += " "; } } } } 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 += " "; } } } } 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 = " "; } 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 += " "; } // 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 += " "; } } } 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 = " "; } 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 += " "; } // 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 += " "; } } } 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> <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.calebfontenot.com/CCF_100/frontpage class=button>Caleb Fontenot, 2023</a> </footer> </div> </body> </html>