head or tails

Shakuray · Feb 10, 2024 · 4f3d804 · 4f3d804
commit 4f3d804
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<html>
+    <button id="play"></button>
+    <video id="video">
+        <source src="media/head.mp4" type="video/mp4">
+    </video>
+</html>
+
+<link rel="stylesheet" href="./style.css">
+<script src="./script.js"></script>
diff --git a/media/head.mp4 b/media/head.mp4
diff --git a/media/play-circle-custom.png b/media/play-circle-custom.png
diff --git a/media/tails.mp4 b/media/tails.mp4
diff --git a/script.js b/script.js
@@ -0,0 +1,15 @@
+
+const button = document.getElementById('play');
+const video = document.getElementById('video');
+
+video.addEventListener('ended', function() {
+    button.style.display = '';
+});
+
+button.addEventListener('click', function() {
+    const videos = ["./media/head.mp4", "./media/tails.mp4"];
+    const random = Math.floor(Math.random() * 2);
+    video.src = videos[random];
+    video.play();
+    button.style.display = 'none';
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,31 @@
+#video {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: black;
+}
+
+#play {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+
+    cursor: pointer;
+    height: 100px;
+    width: 100px;
+    border-radius: 100px;
+    background-color: #f7eda8;
+    border: solid 6px #b3976e;
+    background-image: url("./media/play-circle-custom.png");
+    background-size: 89px 89px;
+}
+
+#play:hover {
+    transition: 0.3s;
+    box-shadow: 0px 0px 10px 0px #000000;
+}