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.
322 lines
7.2 KiB
HTML
322 lines
7.2 KiB
HTML
7 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Agenten van Myrra</title>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function toggleFullscreen() {
|
||
|
|
if (document.fullscreenElement) {
|
||
|
|
document.exitFullscreen();
|
||
|
|
document.getElementById("fullscreen-button").style.display = "none";
|
||
|
|
} else {
|
||
|
|
document.documentElement.requestFullscreen();
|
||
|
|
document.getElementById("fullscreen-button").style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var audio1 = new Audio('video1.mp3');
|
||
|
|
var audio2 = new Audio('video2.mp3');
|
||
|
|
var audio3 = new Audio('video3.mp3');
|
||
|
|
var audio4 = new Audio('video4.mp3');
|
||
|
|
|
||
|
|
function playAudio(index) {
|
||
|
|
switch (index) {
|
||
|
|
case 0:
|
||
|
|
audio1.play();
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
audio2.play();
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
audio3.play();
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
audio4.play();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function pauseAudio(index) {
|
||
|
|
switch (index) {
|
||
|
|
case 0:
|
||
|
|
audio1.pause();
|
||
|
|
break;
|
||
|
|
case 1:
|
||
|
|
audio2.pause();
|
||
|
|
break;
|
||
|
|
case 2:
|
||
|
|
audio3.pause();
|
||
|
|
break;
|
||
|
|
case 3:
|
||
|
|
audio4.pause();
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function startVideo() {
|
||
|
|
|
||
|
|
var videoContainerDiv = document.getElementById("video-container");
|
||
|
|
|
||
|
|
document.getElementById('start-image').style.display = 'none';
|
||
|
|
videoContainerDiv.style.display = "block";
|
||
|
|
nextVideo();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style>
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Tifax';
|
||
|
|
src: url('tifax.ttf') format('truetype');
|
||
|
|
}
|
||
|
|
html {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
overflow-y: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Roboto Mono', monospace;
|
||
|
|
background-color: #141414;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
#video-container {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
background-color: black;
|
||
|
|
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#video {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fullscreen-button {
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
right: 20px;
|
||
|
|
z-index: 2;
|
||
|
|
background-color: transparent;
|
||
|
|
border: none;
|
||
|
|
color: #FFFFFF;
|
||
|
|
font-size: 1.2em;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#fullscreen-button:hover {
|
||
|
|
color: #CCCCCC;
|
||
|
|
}
|
||
|
|
|
||
|
|
#start-image {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
z-index: 2;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 10;
|
||
|
|
display: flex;
|
||
|
|
height: 100vh;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
}
|
||
|
|
#start-image img {
|
||
|
|
transition: transform 5s ease-in-out;
|
||
|
|
animation: glowing 8s ease-in-out infinite alternate;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes glowing {
|
||
|
|
0% {
|
||
|
|
transform: scale(0.4);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: scale(0.6);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
#button {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
top: calc(50% + 40px);
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
z-index: 2;
|
||
|
|
background-color: #bdbebb;
|
||
|
|
border: none;
|
||
|
|
color: #141414;
|
||
|
|
font-family: 'Roboto Mono', monospace;
|
||
|
|
font-size: 2em;
|
||
|
|
padding: 10px 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#paragraph {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 20px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
text-align: center;
|
||
|
|
width: 80%;
|
||
|
|
font-size: 2.5em;
|
||
|
|
color: #CCCCCC;
|
||
|
|
z-index: 3;
|
||
|
|
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
|
||
|
|
|
||
|
|
|
||
|
|
#mission-text {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
text-align: center;
|
||
|
|
width: 60%;
|
||
|
|
font-size: 1.5em;
|
||
|
|
color: #CCCCCC;
|
||
|
|
z-index: 12;
|
||
|
|
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
|
||
|
|
|
||
|
|
#logo {
|
||
|
|
position: absolute;
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
z-index: 5;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.keypad {
|
||
|
|
display: none;
|
||
|
|
grid-template-columns: repeat(3, 1fr);
|
||
|
|
grid-template-rows: repeat(3, 1fr);
|
||
|
|
gap: 10px;
|
||
|
|
padding: 20px;
|
||
|
|
border: 2px solid #00ff00;
|
||
|
|
border-radius: 10px;
|
||
|
|
font-size: 2em;
|
||
|
|
background-color: rgba(0, 0, 0, 0.8);
|
||
|
|
box-shadow: 0 0 20px #00ff00;
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
z-index: 9999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.key {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #000000;
|
||
|
|
color: #00ff00;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1.5em;
|
||
|
|
border-radius: 5px;
|
||
|
|
cursor: pointer;
|
||
|
|
border: 2px solid #00ff00;
|
||
|
|
transition: background-color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.key:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.key:active {
|
||
|
|
background-color: #00ff00;
|
||
|
|
color: #000000;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<p id="paragraph">Agenten van Myrra</p>
|
||
|
|
<!-- <p id="mission-text">Ga nu op zoek naar het verhaal- en actie-symbool en tik erop met je pas om contact op te nemen met Lori en je reis te beginnen!</p> -->
|
||
|
|
<div id="start-image" onclick="startVideo()">
|
||
|
|
<img src="F06C57C1.png" alt="Start Image">
|
||
|
|
</div>
|
||
|
|
<div id="video-container" style="display: none;">
|
||
|
|
<video id="video">
|
||
|
|
<source src="video1.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
</div>
|
||
|
|
<button id="fullscreen-button" onclick="toggleFullscreen()">fullscreen</button>
|
||
|
|
<!--
|
||
|
|
<img src="F06C57C1.png" id='logo' style="height: 200px;"> -->
|
||
|
|
<button id="button" onclick="nextVideo()">volgende stap</button>
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<audio id="audio">
|
||
|
|
<source src="" type="audio/mp3">
|
||
|
|
</audio>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var audio = document.getElementById("audio");
|
||
|
|
var videos = ["video1.mp4", "video2.mp4", "video3.mp4", "video4.mp4"];
|
||
|
|
var audios = ["video1.mp3", "video2.mp3", "video3.mp3", "video4.mp3"];
|
||
|
|
var button = document.getElementById("button");
|
||
|
|
var videoElement;
|
||
|
|
|
||
|
|
|
||
|
|
var currentVideoIndex = -1;
|
||
|
|
|
||
|
|
var paragraphs = [
|
||
|
|
"jouw agenten missie: vind het verloren bericht",
|
||
|
|
"de agenten pass",
|
||
|
|
"neem contact op",
|
||
|
|
"myrra navigeren"
|
||
|
|
];
|
||
|
|
for (var i = 0; i < videos.length; i++) {
|
||
|
|
videos[i].muted = true;
|
||
|
|
}
|
||
|
|
video.addEventListener("ended", function() {
|
||
|
|
if (currentVideoIndex < videos.length - 1) {
|
||
|
|
button.style.display = "block";
|
||
|
|
} else {
|
||
|
|
button.style.display = "none";
|
||
|
|
}
|
||
|
|
showKeypad(currentVideoIndex);
|
||
|
|
});
|
||
|
|
function nextVideo() {
|
||
|
|
if (currentVideoIndex < videos.length - 1) {
|
||
|
|
currentVideoIndex++;
|
||
|
|
video.src = videos[currentVideoIndex];
|
||
|
|
paragraph.textContent = paragraphs[currentVideoIndex];
|
||
|
|
button.style.display = "none";
|
||
|
|
video.loop = true;
|
||
|
|
video.muted = true;
|
||
|
|
video.play();
|
||
|
|
audio.src = audios[currentVideoIndex];
|
||
|
|
audio.play();
|
||
|
|
audio.addEventListener("ended", function() {
|
||
|
|
button.style.display = "block";
|
||
|
|
video.loop = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|