87 lines
3.4 KiB
HTML
87 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<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>
|
|
|
|
<h2>friends!</h2>
|
|
<div id="friends">
|
|
<a href="https://rawr.ing"><p>kakious</p></a>
|
|
<a href="https://zatzhing.me/"><img src="./badges/zatzhing.gif" alt="zatzhing.me gif button"></a>
|
|
<a href="https://www.hack13.me/"><img src="./badges/hack13.png" alt="hack13.me button"></a>
|
|
<a href="https://keeri.place/"><img src="./badges/keeri.png" alt="keeri.place button"></a>
|
|
<a href="https://steffo.dev/"><p>steffo</p></a>
|
|
<a href="https://brodokk.space"><img src="./badges/brodokk.png" alt="brodokk.space button"></a>
|
|
<a href="https://blog.fawx.news/"><p>awooo</p></a>
|
|
<a href="https://polite.cafe/"><p>ado</p></a>
|
|
</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>
|
|
<style>
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 10vh;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
</style>
|
|
<script>
|
|
const checkbox = document.querySelector("input[name=language]");
|
|
const header = document.querySelector("h1");
|
|
const friends = document.querySelector("h2");
|
|
const social = document.querySelector("#social");
|
|
const fursona = document.querySelector("#fursona");
|
|
const projects = document.querySelector("#projects");
|
|
|
|
addEventListener("load", (event) => 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!";
|
|
friends.innerHTML = "aruff!";
|
|
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";
|
|
friends.innerHTML = "friends!";
|
|
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>"
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|