Add information link to index.html and implement background music play functionality

ZaneThePython · ZaneThePython · commit 78c977fc8bc7 · 2026-02-20T20:36:54.000-10:00
- Added a new "Information" link to the navigation section.
- Updated the audio element with an ID for easier access.
- Implemented a script to automatically play background music on the first click.
diff --git a/buttons/info.gif b/buttons/info.gif
diff --git a/index.html b/index.html
@@ -20,6 +20,8 @@
             <a href="https://zane.org/links.html"><img class="nav-item" src="https://zane.org/buttons/globe05.gif"><br>Links</a>
             <br><br>
             <a href="https://zaney.atabook.org/"><img class="nav-item" src="https://zane.org/buttons/gb.gif"><br>Guestbook</a>
+            <br><br>
+            <a href="https://zane.org/info.html"><img class="nav-item" src="https://zane.org/buttons/info.gif"><br>Information</a>
         </div>
     </header>
     <div class="content">
@@ -36,7 +38,7 @@ <h1 class="content">Life</h1>
         <h1>Background Music</h1>
         <img class="song-cover" src="swsd-logo.jpg" alt="song cover">
         <p><a href="https://tangermusic.bandcamp.com/track/somewhere-someday">somewhere, someday</a> - <a href="https://tangermusic.bandcamp.com">Tanger</a></p>
-        <audio controls autoplay loop>
+        <audio id="bg-music" controls autoplay loop>
             <source src="music.mp3" type="audio/mpeg">
                 Your browser does not support the audio element.
         </audio>
@@ -66,5 +68,16 @@ <h1>Background Music</h1>
         <img class="blinkies" src="https://zane.org/buttons/happiness.gif">
          <p class="mini-evil-text"><i>I AM NOT FRIENDLY TO MOBILE USERS HAHAHAHAHAHA</i></p>
     </footer>
+    <script>
+        const music = document.getElementById("bg-music");
+    
+        function tryPlayMusic() {
+            if (music && music.paused) {
+                music.play().catch(() => {});
+            }
+        }
+    
+        window.addEventListener("click", tryPlayMusic, { once: true });
+    </script>
 </body>
 </html>
diff --git a/info.html b/info.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Zane :P</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="favicon.png">
+</head>
+<body>
+    <header>
+        <a href="index.html"><img class="logo" src="logo.gif" alt="logo"></a>
+        <br><br>
+        <img class="eeto" src="https://anlucas.neocities.org/under-con.gif" alt="Under Construction">
+        <a href="https://zaney.atabook.org/"><img class="eeto" src="https://zane.org/buttons/guestbook.gif"></a>
+        <div class="nav-container">
+            <a href="https://zane.org"><img class="nav-item" src="https://zane.org/buttons/cd.gif"><br>Home</a>
+            <br><br>
+            <a href="https://zane.org/links.html"><img class="nav-item" src="https://zane.org/buttons/globe05.gif"><br>Links</a>
+            <br><br>
+            <a href="https://zaney.atabook.org/"><img class="nav-item" src="https://zane.org/buttons/gb.gif"><br>Guestbook</a>
+        </div>
+    </header>
+    <h1>What elements are AI?</h1>
+    <p>The only AI written code as of Feb 20th 2026 on this site is the code for music playback on the homepage. It uses javascript to play the music when you click anywhere (if the music isn't already playing).</p>
+</body >
+</html>
