project created

2 years ago · 06b3b4844f
12 changed files with 3300 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/fonts/digital-desolation-plus.otf
+++ b/fonts/digital-desolation-plus.otf
--- a/fonts/escapevelocity.ttf
+++ b/fonts/escapevelocity.ttf
--- a/fonts/neon-led-light.otf
+++ b/fonts/neon-led-light.otf
--- a/fonts/platinum-sign-over.ttf
+++ b/fonts/platinum-sign-over.ttf
--- a/fonts/platinum-sign-under.ttf
+++ b/fonts/platinum-sign-under.ttf
--- a/fonts/platinum-sign.ttf
+++ b/fonts/platinum-sign.ttf
--- a/fonts/retrolight.ttf
+++ b/fonts/retrolight.ttf
--- a/fonts/wrestlemania.ttf
+++ b/fonts/wrestlemania.ttf
--- a/index.html
+++ b/index.html
@ -0,0 +1,119 @@
+<html lang="en">
+    <head>
+        <title>Starting Soon</title>
+        <style>
+            @font-face {
+                font-family: 'Escape Velocity';
+                src: url('./fonts/escapevelocity.ttf');
+            }
+            @font-face {
+                font-family: 'Retrolight';
+                src: url('./fonts/retrolight.ttf');
+            }
+            @font-face {
+                font-family: 'Platinum Sign';
+                src: url('./fonts/platinum-sign-over.ttf');
+            }
+            @font-face {
+                font-family: 'Digital Desolation Plus';
+                src: url('./fonts/digital-desolation-plus.otf');
+            }
+            
+            html, body {
+                margin: 0;
+                padding: 0;
+                color: #e8e8e8;
+            }
+
+            .interface {
+                display: flex;
+                justify-content: center;
+                position: fixed;
+                bottom: 80px;
+                width: 100%;
+            }
+            .container {
+                display: block;
+                position: relative;
+                margin: 0 auto;
+                -webkit-text-stroke-width: 1px;
+                -webkit-text-stroke-color: #000000;
+            }
+            .container .metadata {
+                display: flex;
+                justify-content: space-between;
+
+                font-family: "Escape Velocity";
+                font-size: 36px;
+                font-weight: bold;
+                line-height: 1;
+                text-align: center;
+            }
+            .container .prompt {
+                font-family: "Digital Desolation Plus";
+                font-size: 100px;
+                line-height: 1;
+            }
+            .container .time-line {
+                display: flex;
+                justify-content: space-between;
+            }
+            .container .time-display {
+                font-family: 'Courier New', Courier, monospace;
+                font-size: 48px;
+                line-height: 1;
+            }
+            .container .countdown-display {
+                font-family: 'Courier New', Courier, monospace;
+                font-size: 48px;
+                line-height: 1;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="interface">
+            <div class="container">
+                <div class="metadata">
+                    <div>Just Joe Radio</div>
+                    <div>justjoeradio.com</div>
+                </div>
+                <div class="prompt">STARTING SOON</div>
+                <div class="time-line">
+                    <div id="countdown-display" class="countdown-display">00:00:00</div>
+                    <div id="time-display" class="time-display">00:00:00</div>
+                </div>
+            </div>
+        </div>
+
+        <script src="./node_modules/moment/min/moment.min.js"></script>
+        <script src="./node_modules/numeral/min/numeral.min.js"></script>
+
+        <script>
+            window.dtp = window.dtp || { };
+
+            dtp.timeDisplay = document.getElementById('time-display');
+            dtp.countdown = document.getElementById('countdown-display');
+
+            const params = new URLSearchParams(window.location.search);
+
+            const year = params.get('year');
+            const month = params.get('month');
+            const day = params.get('day');
+            const hours = params.get('hour');
+            const minutes = params.get('minute');
+            dtp.start = new Date(year, month, day, hours, minutes, 0, 0);
+
+            function update ( ) {
+                const NOW = new Date();
+                const remaining = Math.ceil((dtp.start.valueOf() - NOW.valueOf()) / 1000.0);
+
+                dtp.timeDisplay.textContent = moment(NOW).format('hh:mm A');
+                dtp.countdown.textContent = numeral(remaining).format('hh:mm:ss');
+
+                requestAnimationFrame(update);
+            }
+
+            requestAnimationFrame(update);
+        </script>
+    </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "forever": "^4.0.3",
+    "gulp": "^4.0.2",
+    "moment": "^2.29.4",
+    "numeral": "^2.0.6",
+    "yarn": "^1.22.19"
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock