summaryrefslogtreecommitdiff
path: root/santa/sitemap.html
diff options
context:
space:
mode:
Diffstat (limited to 'santa/sitemap.html')
-rw-r--r--santa/sitemap.html261
1 files changed, 0 insertions, 261 deletions
diff --git a/santa/sitemap.html b/santa/sitemap.html
deleted file mode 100644
index 6f34661..0000000
--- a/santa/sitemap.html
+++ /dev/null
@@ -1,261 +0,0 @@
-<!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));
-
- // calculate movement amount to start ease animation
- const targetMoved =
- Math.abs(targetX - lastTargetX) > moveThreshold ||
- Math.abs(targetY - lastTargetY) > moveThreshold;
-
- // 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-08 09:19:06 +0000