<!DOCTYPE html>
<html lang="en">
<head>
<title>Taming Yesterday's Nightmares for a Better Tomorrow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body { max-width: 1024px; margin: auto; font-family: sans-serif }
footer { font-size: 0.9rem; margin-top: 5rem }
.redacted { background-color: black; color: white; padding: 0 0.5rem }
.strike { text-decoration: line-through }
.centered { text-align: center }
.player { width: 640px }
.w-full { width: 100% }
#audio { margin-top: 1rem }
#slide {
width: 100%;
height: 0;
padding-bottom: 75%;
overflow: hidden;
background-image: url("slides/slide_01.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<main>
<h1>
<span class="strike"> Vampires: Biology and Evolution</span>
<span class="redacted">Redacted</span>
</h1>
<p>In light of recent events at the Melbourne Vatworks and elsewhere, the
information on this page has been excised for reasons of planetary
security. In its place, we offer this archival presentation on the
discovery and resurrection of Homo sapiens whedonum from Fizerpharm Inc.,
entitled "Taming Yesterday's Nightmares for a Better Tomorrow". This
production has been vetted for the public domain, and in no way infringes
upon corporate copyright. <span class="strike">Flash plugin</span>
Javascript required.</p>
<div id="slide"></div>
<p class="centered">
Slide <span id="current">1</span> / <span id="total"></span>
</p>
<audio id="audio" class="w-full" controls src="audio/full.mp3">
Your browser does not support the <audio> element, sorry.
</audio>
</main>
<footer>
<p>Extracted from original Flash video by Peter Watts:<br />
<a href="https://rifters.com/blindsight/vampires.htm">https://rifters.com/blindsight/vampires.htm</a>
</p>
<p>Published with author's permission.</p>
<p>Extraction code by Ivan Habunek available at:<br />
<a href="https://sr.ht/~ihabunek/vampires/">https://sr.ht/~ihabunek/vampires/</a>
</p>
</footer>
</body>
<script type="text/javascript">
const slideTimings = {
"slides/slide_01.jpg": 0.0,
"slides/slide_02.jpg": 25.9,
"slides/slide_03.jpg": 51.3,
"slides/slide_04.jpg": 110.3,
"slides/slide_05.jpg": 125.4,
"slides/slide_06.jpg": 156.0,
"slides/slide_07.jpg": 231.6,
"slides/slide_08.jpg": 268.7,
"slides/slide_09.jpg": 294.3,
"slides/slide_10.jpg": 307.6,
"slides/slide_11.jpg": 318.1,
"slides/slide_12.jpg": 333.1,
"slides/slide_13.jpg": 344.7,
"slides/slide_14.jpg": 356.3,
"slides/slide_15.jpg": 374.3,
"slides/slide_16.jpg": 388.1,
"slides/slide_17.jpg": 403.1,
"slides/slide_18.jpg": 449.7,
"slides/slide_19.jpg": 486.1,
"slides/slide_20.jpg": 542.1,
"slides/slide_21.jpg": 567.7,
"slides/slide_22.jpg": 631.4,
"slides/slide_23.jpg": 705.7,
"slides/slide_24.jpg": 749.6,
"slides/slide_25.jpg": 830.6,
"slides/slide_26.jpg": 844.7,
"slides/slide_27.jpg": 860.7,
"slides/slide_28.jpg": 913.4,
"slides/slide_29.jpg": 921.4,
"slides/slide_30.jpg": 928.0,
"slides/slide_31.jpg": 969.4,
"slides/slide_32.jpg": 1018.7,
"slides/slide_33.jpg": 1082.3,
"slides/slide_34.jpg": 1129.1,
"slides/slide_35.jpg": 1140.0,
"slides/slide_36.jpg": 1150.7,
"slides/slide_37.jpg": 1161.1,
"slides/slide_38.jpg": 1269.4,
"slides/slide_39.jpg": 1330.6,
"slides/slide_40.jpg": 1356.6,
"slides/slide_41.jpg": 1389.9,
"slides/slide_42.jpg": 1423.1,
"slides/slide_43.jpg": 1500.6,
"slides/slide_44.jpg": 1587.6,
"slides/slide_45.jpg": 1595.6,
"slides/slide_46.jpg": 1607.7,
"slides/slide_47.jpg": 1622.7,
"slides/slide_48.jpg": 1643.3,
"slides/slide_49.jpg": 1695.1,
"slides/slide_50.jpg": 1729.6,
"slides/slide_51.jpg": 1754.1,
"slides/slide_52.jpg": 1794.6,
"slides/slide_53.jpg": 1862.6,
"slides/slide_54.jpg": 1890.0,
"slides/slide_55.jpg": 1964.7,
"slides/slide_56.jpg": 2006.3,
"slides/slide_57.jpg": 2074.3,
"slides/slide_58.jpg": 2135.4
}
const audio = document.querySelector("audio")
const slide = document.getElementById("slide")
const current = document.getElementById("current")
const total = document.getElementById("total")
const slides = Object.keys(slideTimings)
const times = Object.values(slideTimings)
total.innerText = slides.length
const getIndex = (timestamp) => {
const index = times.findIndex(slideTimestamp => slideTimestamp > timestamp)
return index == -1 ? slides.length - 1 : index - 1
}
audio.addEventListener("timeupdate", event => {
const index = getIndex(event.target.currentTime)
slide.style.backgroundImage = "url(" + slides[index] + ")"
current.innerText = index + 1
});
</script>
</html>