summaryrefslogtreecommitdiff
path: root/santa/sitemap.html
diff options
context:
space:
mode:
authorRadiohotline <radiohotline@disroot.org>2026-02-17 12:12:37 +0000
committerRadiohotline <radiohotline@disroot.org>2026-02-17 12:12:37 +0000
commit223ef7acb24356fca6cf5ab40c02b43a09452093 (patch)
treed845297a50e78f9ca9c37c113b78b8a2aaa1c138 /santa/sitemap.html
parentcae6b00e0f3352a323af2400bf7f9deb7460c7de (diff)
parent37522616a3efcaa3c7b40821155e8f1fff5c9985 (diff)
about
Diffstat (limited to 'santa/sitemap.html')
-rw-r--r--santa/sitemap.html256
1 files changed, 256 insertions, 0 deletions
diff --git a/santa/sitemap.html b/santa/sitemap.html
new file mode 100644
index 0000000..6d00ec8
--- /dev/null
+++ b/santa/sitemap.html
@@ -0,0 +1,256 @@
+<!DOCTYPE HTML>
+<html>
+ <head>
+ <link rel="stylesheet" href="main.css">
+ <link rel="stylesheet" href="global.css">
+ <title>Merry Christmas, Andie!</title>
+ <style>
+ body {
+ width: auto;
+ }
+
+ .sitemap {
+ position: relative;
+ width: 80vw;
+ height: 80vh;
+ background-color: var(--white);
+
+ margin: auto;
+
+ border-image-slice: 33 10 10 33 fill;
+ border-image-width: 33px 10px 10px 33px;
+ border-image-outset: 0px 0px 0px 0px;
+ border-image-repeat: stretch stretch;
+ border-image-source: url(brdrs/postal_letter_brdr.png);
+ border-style: solid;
+ }
+
+ .node {
+ position: absolute;
+ transform: translateX(-50%);
+ text-align: center;
+ z-index: 2;
+ }
+
+ .node img {
+ }
+
+ .node span {
+ display: block;
+ margin-top: 6px;
+ font-size: 14px;
+ }
+
+ .circle {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: var(--white);
+ border: 1px solid black;
+ transition: background 0.2s, transform 0.2s;
+ }
+
+ .circle:hover {
+ border: 1px solid var(--accent);
+ transform: scale(1.1);
+ }
+
+ .lines {
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ width: 100%;
+ height: 100%;
+ overflow: visible;
+ }
+
+ .lines line {
+ stroke: bisque;
+ stroke-width: 10;
+ }
+
+ .postman {
+ position: absolute;
+ }
+ </style>
+ </head>
+ <body>
+ <header>Sitemap</header>
+
+ <br>
+
+ <!--
+ You could, instead of coding in the images, draw a map image with the destinations
+ and paths in it. This way you'll only have to code the nodes onto it (which can be
+ done quickly with the <map> tag and an online generator for quick coord fetching.
+ It might be more practical if you update the map in the future. For this method,
+ see the code for https://publictransit.neocities.org/map-old made by June.
+ -->
+
+ <div class="sitemap">
+ <img style="width: 80vw; height: 80vh;" src="imgs/grass2.png">
+
+ <div class="node" style="top: 20px; left: 100px;">
+ <img src="imgs/index.png" alt="Index">
+ <br>
+ <a href="index.html" class="circle"></a>
+ <span>Index</span>
+ </div>
+
+ <div class="node" style="top: 50px; left: 320px;">
+ <img src="imgs/home.png" alt="Home">
+ <br>
+ <a href="home.html" class="circle"></a>
+ <span>Home</span>
+ </div>
+
+ <div class="node" style="top: 20px; left: 550px;">
+ <img src="imgs/about.png" alt="About">
+ <br>
+ <a href="about.html" class="circle"></a>
+ <span>About</span>
+ </div>
+
+ <div class="node" style="top: 20px; left: 800px;">
+ <a href="microblog.html" class="circle"></a>
+ <img src="imgs/microblog.png" alt="Microblog">
+ <span>Microblog</span>
+ </div>
+
+ <div class="node" style="top: 200px; left: 180px;">
+ <a href="links.html" class="circle"></a>
+ <img src="imgs/links.png" alt="Links">
+ <span>Links</span>
+ </div>
+
+ <div class="node" style="top: 370px; left: 300px;">
+ <a href="writing.html" class="circle"></a>
+ <br>
+ <img src="imgs/writing.png" alt="Writing">
+ <span>Writing</span>
+ </div>
+
+ <div class="node" style="top: 220px; left: 450px;">
+ <img src="imgs/music.png" alt="Music">
+ <a href="music.html" class="circle"></a>
+ <span>Music</span>
+ </div>
+
+ <div class="node" style="top: 220px; left: 700px;">
+ <a href="sotw.html" class="circle"></a>
+ <br>
+ <img src="imgs/sotw.png" alt="sotw">
+ <span>SOTW</span>
+ </div>
+
+ <div class="node" style="top: 180px; left: 950px;">
+ <a href="hoard.html" class="circle"></a>
+ <img src="imgs/hoard.png" alt="Hoard">
+ <span>Hoard</span>
+ </div>
+
+ <div class="node" style="top: 370px; left: 880px;">
+ <a href="sitemap.html" class="circle"></a>
+ <img src="imgs/sitemap.png" alt="Sitemap">
+ <span>Sitemap</span>
+ </div>
+
+ <svg class="lines">
+ <!-- first row -->
+ <!-- index to home -->
+ <line x1="110" y1="115" x2="320" y2="145" />
+ <!-- home to about -->
+ <line x1="320" y1="145" x2="550" y2="150"/>
+ <!-- about to microblog -->
+ <line x1="550" y1="150" x2="730" y2="100"/>
+
+ <!-- second row -->
+ <!-- index to links -->
+ <line x1="100" y1="115" x2="140" y2="290"/>
+ <!-- about to music -->
+ <line x1="550" y1="150" x2="540" y2="340"/>
+ <!-- sotw to hoard -->
+ <line x1="700" y1="230" x2="950" y2="190"/>
+
+ <!-- third row -->
+ <!-- links to writing -->
+ <line x1="140" y1="290" x2="300" y2="380" />
+ <!-- sotw-hoard to sitemap -->
+ <line x1="825" y1="210" x2="815" y2="450"/>
+ <!-- writing to sitemap -->
+ <line x1="300" y1="380" x2="815" y2="440"/>
+ </svg>
+
+ <div class="postman">
+ <img src="imgs/postman.png">
+ </div>
+
+ <script>
+ // queryselector returns first match so i thought it was faster
+ const postman = document.querySelector(".postman");
+ const container = document.querySelector(".sitemap");
+
+ let targetX = 0;
+ let targetY = 0;
+
+ let currentX = 0;
+ let currentY = 0;
+
+ let lastTargetX = 0;
+ let lastTargetY = 0;
+
+ const ease = 0.04;
+ const moveThreshold = 0.5;
+
+ // get target mouse position relative to map div
+ document.addEventListener("mousemove", (e) => {
+ const rect = container.getBoundingClientRect();
+ targetX = e.clientX - rect.left;
+ targetY = e.clientY - rect.top;
+ });
+
+ function animate() {
+ const rect = container.getBoundingClientRect();
+ const w = postman.offsetWidth;
+ const h = postman.offsetHeight;
+
+ // center postman onto cursor
+ let tx = targetX - w / 2;
+ let ty = targetY - h / 2;
+
+ // limit movement to div
+ tx = Math.max(0, Math.min(tx, rect.width - w));
+ ty = Math.max(0, Math.min(ty, rect.height - h));
+
+ // get animation distance
+ const dx = tx - currentX;
+ const dy = ty - currentY;
+
+ // distance is multiplied by ease factor
+ currentX += dx * ease;
+ currentY += dy * ease;
+
+ // flip image
+ if (dx > 0.1) {
+ postman.style.transform = "scaleX(1)";
+ } else if (dx < -0.1) {
+ postman.style.transform = "scaleX(-1)";
+ }
+
+ // move!
+ postman.style.left = currentX + "px";
+ postman.style.top = currentY + "px";
+
+ // store target for this frame to use in next frame
+ lastTargetX = targetX;
+ lastTargetY = targetY;
+
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+ </script>
+ </div>
+ </body>
+</html>
generated by cgit v1.3 (git 2.53.0) at 2026-08-07 22:49:57 +0000