87 lines
3.3 KiB
HTML
87 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="reftest-wait">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="I'm a silly dog">
|
|
<title>arch.dog</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<form>
|
|
<label><input type="checkbox" name="language" /> Dog Mode</label>
|
|
</form>
|
|
<header>
|
|
<img src="./avatar.png" alt="A cute golden retriever with a stylish blue hairstyle and glasses">
|
|
<h1>Arch is a dog</h1>
|
|
</header>
|
|
<p id="social"><i>hi!</i> follow me on the <a href="https://floofy.tech/@arch" rel="me">fedi</a></p>
|
|
<p id="fursona"><a href="https://fursona.gmem.ca/gmem.ca">check out my fursona</a></p>
|
|
<p id="projects"><a href="https://gabrielsimmer.com">check out my projects</a></p>
|
|
|
|
<noscript>
|
|
<h2><a href="/friends/">friends!</a></h2>
|
|
</noscript>
|
|
<div id="friends"></div>
|
|
|
|
<p><a href="https://arch.dog"><img src="./arch.dog.png" alt="pixel art website button for this very website! black text on a background matching my fursona that says arch.dog"></a></p>
|
|
|
|
<p><a href='https://ko-fi.com/N4N4I73HI' target='_blank'>
|
|
<img height='36' style='border:0px;height:36px;' src='./kofi.png' border='0' alt='Buy Me a Coffee at ko-fi.com' />
|
|
</a></p>
|
|
</main>
|
|
<script>
|
|
const checkbox = document.querySelector("input[name=language]");
|
|
const header = document.querySelector("h1");
|
|
const social = document.querySelector("#social");
|
|
const fursona = document.querySelector("#fursona");
|
|
const projects = document.querySelector("#projects");
|
|
|
|
addEventListener("load", (event) => {
|
|
loadfriends();
|
|
reloaddog();
|
|
});
|
|
checkbox.addEventListener('change', function() {
|
|
toggledog(this.checked);
|
|
});
|
|
|
|
const toggledog = (status) => {
|
|
localStorage.setItem("dog", status);
|
|
reloaddog();
|
|
}
|
|
const reloaddog = () => {
|
|
checkbox.value = localStorage.getItem == "true";
|
|
if (localStorage.getItem("dog") == "true") {
|
|
header.innerHTML = "arf arf!";
|
|
social.innerHTML = "<i>*wags tail*</i> awoo woof woof <a href=\"https://floofy.tech/@arch\" rel=\"me\">bark</a>"
|
|
fursona.innerHTML = "<a href=\"https://fursona.gmem.ca/gmem.ca\">yip arf</a>"
|
|
projects.innerHTML = "<a href=\"https://gabrielsimmer.com\">grrr ruff</a>"
|
|
} else {
|
|
header.innerHTML = "Arch is a dog";
|
|
social.innerHTML = "<i>hi!</i> follow me on the <a href=\"https://floofy.tech/@arch\" rel=\"me\">fedi</a>"
|
|
fursona.innerHTML = "<a href=\"https://fursona.gmem.ca/gmem.ca\">check out my fursona</a>"
|
|
projects.innerHTML = "<a href=\"https://gabrielsimmer.com\">check out my projects</a>"
|
|
}
|
|
}
|
|
|
|
const loadfriends = () => {
|
|
// Fetch the content of the dynamic page
|
|
fetch("https://arch.dog/friends/embed")
|
|
.then(response => response.text())
|
|
.then(data => {
|
|
if (data) {
|
|
// Inject the dynamic content into the static page
|
|
document.getElementById("friends").innerHTML = data;
|
|
} else {
|
|
console.error(`Element with selector #friends not found in the dynamic page.`);
|
|
}
|
|
// Capture clean screenshots with Servo.
|
|
setTimeout(() => document.querySelector("html").classList.remove("reftest-wait"), 2000);
|
|
})
|
|
.catch(error => console.error('Error fetching dynamic content:', error));
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|