You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
5.9 KiB
HTML
201 lines
5.9 KiB
HTML
4 years ago
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
|
||
|
|
<meta name="generator" content="distribusi" />
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
|
|
<style>
|
||
|
|
.image{max-width: 100%;}
|
||
|
|
.pdf object{width:640px;height: 640px;}
|
||
|
|
.dir::before{content:"📁 ";font-size:18px;}
|
||
|
|
.filename{display:block;font-family:mono;}
|
||
|
|
.unkown-file::before{content:"📄 ";font-size:18px;}
|
||
|
|
div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
|
||
|
|
video {width:640px;max-height:640px;}
|
||
|
|
@media screen {
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: wfdtf;
|
||
|
|
src: url(Fonts/wftfs-Regular.otf)
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: EBGaramond;
|
||
|
|
src: url(Fonts/EBGaramond-Italic.ttf)
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-image: none;
|
||
|
|
min-height: 500px;
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
|
||
|
|
background-color: black;
|
||
|
|
margin: 5mm;
|
||
|
|
color: white;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 10pt;
|
||
|
|
text-justify: inter-word;
|
||
|
|
columns: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="index-checkpoint" class="html"><section id="index-checkpoint.html">
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<!-- Generated with distribusi https://git.vvvvvvaria.org/varia/distribusi -->
|
||
|
|
<meta name="generator" content="distribusi" />
|
||
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||
|
|
<style>
|
||
|
|
.image{max-width: 100%;}
|
||
|
|
.pdf object{width:640px;height: 640px;}
|
||
|
|
.dir::before{content:"📁 ";font-size:18px;}
|
||
|
|
.filename{display:block;font-family:mono;}
|
||
|
|
.unkown-file::before{content:"📄 ";font-size:18px;}
|
||
|
|
div{max-width: 640px;display:inline-block;vertical-align:top;margin:1em;padding:1em;}
|
||
|
|
video {width:640px;max-height:640px;}
|
||
|
|
@media screen {
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: wfdtf;
|
||
|
|
src: url(Fonts/wftfs-Regular.otf)
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: EBGaramond;
|
||
|
|
src: url(Fonts/EBGaramond-Italic.ttf)
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-image: none;
|
||
|
|
min-height: 500px;
|
||
|
|
background-attachment: fixed;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
|
||
|
|
background-color: black;
|
||
|
|
margin: 5mm;
|
||
|
|
color: white;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 10pt;
|
||
|
|
text-justify: inter-word;
|
||
|
|
columns: 3;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="folder" class="dir"><a href='Sounds/'>Sounds/</a></div>
|
||
|
|
<div id="folder" class="dir"><a href='Artwork/'>Artwork/</a></div>
|
||
|
|
<div id="folder" class="dir"><a href='.ipynb_checkpoints/'>.ipynb_checkpoints/</a></div>
|
||
|
|
<div id="soundboard-Copy1" class="html"><section id="soundboard-Copy1.html"><!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
.awdeeo {
|
||
|
|
background: purple;
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
margin: 1em;
|
||
|
|
}
|
||
|
|
.awdeeo:hover {
|
||
|
|
background: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="awdeeo">
|
||
|
|
<audio src="Sounds/Door.mp3" type="audio/mp3" loop controls> </audio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Note that you need to have clicked in the page, before (some) browsers let the audio play. Evt. you might want to also respond to clicks to not have to wait until the next mouseenter....</p>
|
||
|
|
|
||
|
|
<div class="awdeeo">
|
||
|
|
<audio src="https://aporee.org/maps/files/visjeetenopdemarkt.mp3" loop controls >
|
||
|
|
</audio>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
for (let div of document.querySelectorAll(".awdeeo")) {
|
||
|
|
let audio = div.querySelector("audio");
|
||
|
|
// console.log("audio", audio);
|
||
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
|
||
|
|
// nb: mouseenter is similar, but different from mouseover
|
||
|
|
div.addEventListener("mouseenter", e=> {
|
||
|
|
audio.play();
|
||
|
|
})
|
||
|
|
div.addEventListener("mouseleave", e=> {
|
||
|
|
audio.pause();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</section></div>
|
||
|
|
<a href="../">../</a>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</section></div>
|
||
|
|
<div id="soundboard-Copy1-checkpoint" class="html"><section id="soundboard-Copy1-checkpoint.html"><!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
.awdeeo {
|
||
|
|
background: purple;
|
||
|
|
width: 300px;
|
||
|
|
height: 300px;
|
||
|
|
margin: 1em;
|
||
|
|
}
|
||
|
|
.awdeeo:hover {
|
||
|
|
background: red;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="awdeeo">
|
||
|
|
<audio src="Sounds/Door.mp3" type="audio/mp3" loop controls> </audio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>Note that you need to have clicked in the page, before (some) browsers let the audio play. Evt. you might want to also respond to clicks to not have to wait until the next mouseenter....</p>
|
||
|
|
|
||
|
|
<div class="awdeeo">
|
||
|
|
<audio src="https://aporee.org/maps/files/visjeetenopdemarkt.mp3" loop controls >
|
||
|
|
</audio>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
for (let div of document.querySelectorAll(".awdeeo")) {
|
||
|
|
let audio = div.querySelector("audio");
|
||
|
|
// console.log("audio", audio);
|
||
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
|
||
|
|
// nb: mouseenter is similar, but different from mouseover
|
||
|
|
div.addEventListener("mouseenter", e=> {
|
||
|
|
audio.play();
|
||
|
|
})
|
||
|
|
div.addEventListener("mouseleave", e=> {
|
||
|
|
audio.pause();
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</section></div>
|
||
|
|
<a href="../">../</a>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|