HTML, deadlines and hard cash
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

362 lines
9.4 KiB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
/>
<style>
body,
html {
overflow: hidden;
height: 100%;
display: grid;
}
body {
background: url(https://fictioningcomfort.space/parable-of-sugar/static/backgr.png)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
z-index: -100;
}
#background {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -99;
}
#video-title-bg {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 2%;
text-align: center;
width: 80%;
color: #0afa7e;
}
.video-popup {
position: absolute;
cursor: pointer;
z-index: 1;
}
.video-popup:hover {
z-index: 100;
}
.video-popup video {
border: 4px solid #0afa7e;
}
.video-title {
text-align: center;
border-bottom: 3px solid #0afa7e;
color: #0afa7e;
margin: 0;
padding: 0;
border: 4px solid #0afa7e;
border-bottom: 0;
}
video {
width: 100% !important;
height: auto% !important;
}
@media (max-aspect-ratio: 16/9) {
#background video {
width: 800% !important;
}
}
.ui-icon {
display: none !important;
}
.video-title {
font-size: 0.8em;
}
.video-title span {
position: absolute;
top: 3px;
right: 5px;
font-weight: bold;
}
#b .video-title,
#c .video-title {
border: 0;
}
#b span,
#c span {
position: absolute;
top: 5px;
right: 5px;
}
#beginning {
margin: auto;
z-index: 10000;
cursor: pointer;
}
#beginning p {
color: #0afa7e;
padding: 5px 5px 5px 5px;
font-weight: bold;
}
</style>
<title>Parable of sugar: By the waters of Babylon</title>
</head>
<body>
<div id="beginning">
<p>> Click here to start <</p>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"
></script>
<script>
var seconds = 0;
var entryOpts = {
1: ["dam"],
//2: ["before", "after"],
//4: ["report"],
//6: ["cone"],
//8: ["a", "b", "c"],
//10: ["fall"],
};
var vidOpts = {
dam: {
id: "dam",
title: "1962. first dam in Susa is built on the Dez river",
url: "https://fictioningcomfort.space/parable-of-sugar/static/2.mp4",
top: Math.floor((screen.height * 15) / 100).toString() + "px",
right: "5%",
width: "27%",
},
before: {
id: "before",
title:
"1955. a sattelite crossing Dez documents streams, gardens & villages",
url: "https://fictioningcomfort.space/parable-of-sugar/static/3.mp4",
top: "6%",
left: "5%",
width: "22%",
},
after: {
id: "after",
title:
"1979. a sattelite crossing Dez documents canals, plantations & new towns",
url: "https://fictioningcomfort.space/parable-of-sugar/static/5.mp4",
top: "8%",
left: "28%",
width: "22%",
},
report: {
id: "report",
title:
"1969. Jalal al Ahmad reports on sugar plantations by the Dez river",
url: "https://fictioningcomfort.space/parable-of-sugar/static/4.mp4",
top: "50%",
left: "20%",
width: "40%",
},
cone: {
id: "cone",
title:
"640 A.D. the dome of the sacred tumbs in Susa are in the shape of a sugar cone",
url: "https://fictioningcomfort.space/parable-of-sugar/static/6.mp4",
top: "22%",
left: "40%",
width: "30%",
},
a: {
id: "a",
title:
"2019. a dam secures sugar plantations against a flood, but not the surrounding villages. the military performs a rescue operation",
url: "https://fictioningcomfort.space/parable-of-sugar/static/7.mp4",
top: "7%",
right: "23%",
width: "12%",
},
b: {
id: "b",
title: "",
url: "https://fictioningcomfort.space/parable-of-sugar/static/8.mp4",
top: "7%",
right: "10%",
width: "12%",
},
c: {
id: "c",
title: "",
url: "https://fictioningcomfort.space/parable-of-sugar/static/9.mp4",
top: "34%",
right: "10%",
width: "12%",
},
fall: {
id: "fall",
title: "2019. the first dome in Susa collapses",
url: "https://fictioningcomfort.space/parable-of-sugar/static/10.mp4",
top: "20%",
left: "16%",
width: "30%",
},
};
function mkVid(opts) {
var container = document.createElement("div");
container.id = opts.id;
container.className = "video-popup";
if (opts.top) container.style.top = opts.top;
if (opts.left) container.style.left = opts.left;
if (opts.right) container.style.right = opts.right;
if (opts.bottom) container.style.bottom = opts.bottom;
if (opts.width) container.style.width = opts.width;
if (opts.height) container.style.height = opts.height;
var title = document.createElement("p");
title.className = "video-title";
if (opts.title != "")
title.appendChild(document.createTextNode(opts.title));
var span = document.createElement("span");
span.innerHTML = "X";
title.appendChild(span);
var video = document.createElement("video");
video.autoplay = true;
video.muted = true;
video.loop = true;
var source = document.createElement("source");
source.src = opts.url;
source.type = "video/mp4";
container.appendChild(title);
container.appendChild(video);
video.appendChild(source);
$(container)
.find("span")
.on("click", function () {
$(container).remove();
});
return container;
}
function showAllVids(vids) {
for (var i = 0; i < vids.length; i++) {
container = vids[i];
$("html").append(container);
$(container).show();
$(container).draggable();
$(container).resizable({
aspectRatio: true,
autoHide: true,
handles: "all",
minWidth: 200,
});
}
}
function onSecondTick() {
var loaded = 0;
if (seconds in entryOpts) {
var vids = [];
for (var i = 0; i < entryOpts[seconds].length; i++) {
var key = entryOpts[seconds][i];
var opts = vidOpts[key];
vids.push(mkVid(opts));
}
for (var i = 0; i < vids.length; i++) {
$(vids[i])
.find("video")
.on("canplay", function () {
loaded++;
if (loaded === vids.length) {
showAllVids(vids);
}
});
}
}
seconds += 1;
}
$("#beginning")
.find("p")
.on("click", function () {
$(this).remove();
var container = document.createElement("div");
container.id = "background";
var title = document.createElement("p");
title.id = "video-title-bg";
title.appendChild(
document.createTextNode(
"605 B.C. Babylonian musical compostions for wedding feasts are drived from a rationale that tames stochasticity"
)
);
var video = document.createElement("video");
video.autoplay = true;
video.muted = false;
video.loop = true;
var source = document.createElement("source");
source.src =
"https://fictioningcomfort.space/parable-of-sugar/static/bg.mp4";
source.type = "video/mp4";
container.appendChild(title);
container.appendChild(video);
video.appendChild(source);
$("body").append(container);
setInterval(onSecondTick, 1000);
});
</script>
</body>
</html>