397 lines
12 KiB
HTML
397 lines
12 KiB
HTML
<!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>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;
|
|
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>
|