Working release.

MrConorAE · Apr 23, 2021 · b7b2d69 · b7b2d69
1 parent 8e5a1ee
commit b7b2d69
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 0 deletions.
diff --git a/bbc_60sec.mp3 b/bbc_60sec.mp3
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!--
+© (copyright) 2021. Available under the GPLv3. See LICENSE for details.
+-->
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>The News at X</title>
+        <link rel="stylesheet" href="style.css">
+        <script src="script.js"></script>
+    </head>
+
+    <body>
+        <audio id="audio">
+            <source src="bbc_60sec.mp3" type="audio/mpeg" preload="auto">
+        </audio>
+        <p id="count">0</p>
+        <button id="start">CLICK TO START</button>
+    </body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,28 @@
+/*
+© (copyright) 2021. Available under the GPLv3. See LICENSE for details.
+*/
+
+window.onload = function () {
+    var counter = document.getElementById('count');
+    var starter = document.getElementById('start');
+    var audio = document.getElementById('audio');
+
+    starter.onclick = function () {
+        // let's go!
+        audio.play();
+        starter.disabled = true;
+        document.title = ("The News at " + new Date().getHours() + ":" + (new Date().getMinutes() + 1));
+    };
+
+    audio.onended = function () {
+        starter.disabled = false;
+        document.title = "The News at X";
+    };
+
+    setInterval(function () {
+        counter.innerHTML = 60 - new Date().getSeconds();
+        if (audio.paused == true) {
+            audio.currentTime = new Date().getSeconds();
+        }
+    }, 10);
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,57 @@
+/*
+© (copyright) 2021. Available under the GPLv3. See LICENSE for details.
+*/
+
+@import url('https://rsms.me/inter/inter.css');
+
+html {
+    font-family: 'Inter', sans-serif;
+    font-feature-settings: "tnum", "cv03", "cv04", "cv09";
+    font-style: italic;
+    background-color: black;
+    color: white;
+    text-align: center;
+}
+
+p#count {
+    font-weight: 600;
+    font-size: 500px;
+    line-height: 100vh;
+    height: 100vh;
+    margin: 0;
+}
+
+button {
+    color: white;
+    background-color: black;
+    border: 2px white solid;
+    border-radius: 10px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    padding: 10px 15px;
+    position: fixed;
+    bottom: 10px;
+    left: 0;
+    right: 0;
+    width: 500px;
+    margin: 0px auto;
+    transition: 0.5s all;
+    cursor: pointer;
+}
+
+button:hover {
+    color: black;
+    background-color: white;
+}
+
+button:disabled {
+    opacity: 10%;
+    cursor: not-allowed;
+}
+
+button:disabled:hover {
+    color: white;
+    background-color: black;
+    opacity: 10%;
+}