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

- 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.
This commit is contained in:
2026-02-20 20:36:54 -10:00
parent fb61c7f21a
commit 78c977fc8b
3 changed files with 41 additions and 1 deletions

BIN
buttons/info.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@@ -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>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 @@
<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>

27
info.html Normal file
View File

@@ -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>