sound and header
This commit is contained in:
parent
91869d153a
commit
b38380c8a7
4 changed files with 82 additions and 5 deletions
28
astro/public/scripts/sound.js
Normal file
28
astro/public/scripts/sound.js
Normal file
|
@ -0,0 +1,28 @@
|
|||
// Sound effects
|
||||
function PlaySound(soundobj) {
|
||||
var thissound = document.getElementById(soundobj);
|
||||
thissound.play();
|
||||
}
|
||||
|
||||
function StopSound(soundobj) {
|
||||
var thissound = document.getElementById(soundobj);
|
||||
thissound.pause();
|
||||
thissound.currentTime = 0;
|
||||
}
|
||||
|
||||
const audio = new Audio("/assets/sounds/ui/zapsplat_multimedia_button_click_004_68776.mp3");
|
||||
const buttons = document.querySelectorAll("button");
|
||||
const links = document.querySelectorAll("a");
|
||||
|
||||
// biome-ignore lint/complexity/noForEach: <explanation>
|
||||
links.forEach(a => {
|
||||
a.addEventListener("click", () => {
|
||||
audio.play();
|
||||
})
|
||||
})
|
||||
|
||||
// biome-ignore lint/complexity/noForEach: <explanation>
|
||||
buttons.forEach(button => {
|
||||
button.addEventListener("click", () => {
|
||||
audio.play();
|
||||
});})
|
36
astro/src/components/Header.astro
Normal file
36
astro/src/components/Header.astro
Normal file
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
import { SITE_TITLE, SITE_DESCRIPTION } from "../consts";
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!--
|
||||
onmouseover="PlaySound('hoverSound')"
|
||||
onmouseout="StopSound('hoverSound')" -->
|
||||
<section class="content">
|
||||
<nav class="menu">
|
||||
<button
|
||||
class="custom-btn btn-1"
|
||||
type="button"
|
||||
onclick="location.href='/'"
|
||||
>
|
||||
<span>Home</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="custom-btn btn-1"
|
||||
type="button"
|
||||
onclick="location.href='/projects'"
|
||||
>
|
||||
<span>Projects</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="custom-btn btn-1"
|
||||
type="button"
|
||||
onclick="location.href='/blog'"
|
||||
>
|
||||
<span>Blog</span>
|
||||
</button>
|
||||
</nav>
|
||||
</section>
|
|
@ -1,6 +1,13 @@
|
|||
---
|
||||
import Head from "../components/Head.astro";
|
||||
import Header from "../components/Header.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const { title } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
@ -9,9 +16,18 @@ import Footer from "../components/Footer.astro";
|
|||
<Head />
|
||||
</head>
|
||||
<body onload="onload()" id="body">
|
||||
<Header />
|
||||
<section class="content">
|
||||
<h1 class="title">{title}</h1>
|
||||
</section>
|
||||
<slot />
|
||||
<Footer />
|
||||
<script type="text/javascript" src="/scripts/sga.js"></script>
|
||||
<script type="text/javascript" src="/scripts/lastfm.js"></script>
|
||||
<script type="text/javascript" src="/scripts/sound.js"></script>
|
||||
<audio
|
||||
id="clickSound"
|
||||
src="/assets/sounds/ui/zapsplat_multimedia_button_click_004_68776.mp3">
|
||||
</audio>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -2,12 +2,9 @@
|
|||
import Layout from "../layouts/Layout.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<main class=>
|
||||
<Layout title="Welcome to Astro.">
|
||||
<main>
|
||||
<!-- Title Area -->
|
||||
<section class="content">
|
||||
<h1 class="title">nelle.observer</h1>
|
||||
</section>
|
||||
<section class="content">
|
||||
<p>hello, what brings you here?</p>
|
||||
<p>
|
||||
|
|
Loading…
Reference in a new issue