70 lines
2.4 KiB
HTML
70 lines
2.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>
|
|
|
|
<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 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 = () => {
|
|
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>"
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|