Add FINAL COUNTDOWN

app.py

@@ -1,12 +1,16 @@
 from flask import Flask, g, request, session, redirect, url_for, render_template
 from flask_bootstrap import Bootstrap
 import yaml
+import datetime as dt
+import pytz
 
 app = Flask(__name__)
 Bootstrap(app)
 app.secret_key = 'asdf'
 app.debug = True
 
+eastern = pytz.timezone('US/Eastern')
+
 with open('config/config.yaml') as f:
     yaml_data = yaml.load(f, Loader=yaml.SafeLoader)
 
@@ -20,6 +24,13 @@ if yaml_data['countdown']['active'] == True:
     countdown_data = yaml_data['countdown']
     print(countdown_data)
 
+final_countdown_data = None
+final_time = None
+if yaml_data['final_countdown']['active'] == True:
+    final_countdown_data = yaml_data['final_countdown']
+    final_time = eastern.localize(dt.datetime.strptime(final_countdown_data['timestamp'], '%B %d %Y %H:%M:%S%z').replace(tzinfo=None))
+    print(final_countdown_data)
+
 apps = []
 for itm in yaml_data['apps'].items():
     apps.append(itm[1])
@@ -27,6 +38,10 @@ for itm in yaml_data['apps'].items():
 
 @app.route('/')
 def index():
+    current_time = eastern.localize(dt.datetime.now())
+    if final_countdown_data != None:
+        if (final_time - current_time).days > -1:
+            return render_template('final_countdown.j2', final_countdown = final_countdown_data)
     if countdown_data != None:
         return render_template('index.j2', apps = apps, search = search, account_url = account_url, description = description, countdown = countdown_data)
     return render_template('index.j2', apps = apps, search = search, account_url = account_url, description = description)

config/config.yaml

@@ -8,16 +8,20 @@ accounts:
 description: "It turns out Technical Incompetence's amazingness is just too great for this lame internet - we need a new one to maximize our full potential. Welcome to the Technical Incompetence internet. Population - US."
 
 countdown:
-  active: True
+  active: False
   name: "The End of Drunktrips: You Can (Not) Continue"
-  timestamp: "June 26 2020 11:00:00 GMT-0400"
+  timestamp: "August 31 2020 10:00:00-0400"
+
+final_countdown:
+  active: True
+  timestamp: "August 16 2020 17:12:00-0400"
 
 apps:
-  chat:
-    name: "Rocket Chat"
-    description: "<br>Stay in touch with your friends, family, and people you've never even met with Technical Incompetence's amazing chat service. Experience the joy's of late-1990s AIM all over again."
-    link: "https://rocketchat.technicalincompetence.club"
-    image: "rocketchat.png"
+  zillow:
+    name: "Zulip"
+    description: "<br>The moment you're all been waiting for... Zulip, our chat lord and savior is finally here. Third only to iMessage and AOL - prepare for a superior chatting experience. The move from Slack has never been so sweet. Trust us... you won't be disappointed. There's even a mobile app!"
+    link: "https://zillow.technicalincompetence.club"
+    image: "zulip.png"
   cloud:
     name: "Nextcloud"
     description: "<br>What would Technical Incompetence be without the ability to give up ownership of all your data and store it on our servers. Don't worry though, our servers will <sub>probably</sub> never crash or lose data so all you care about is safe with us."
@@ -31,10 +35,16 @@ apps:
   jellyfin:
     name: "Jellyfin"
     description: "<br>Angry about the StReAmInG WaRs? Well our Jellyfin instance has you covered. Listen to all your embarassing weeb music, or watch your barely-not-porn weeb shows and movies. We're not judging you."
-    link: "https://jellyfin.technicalincompetence.club"
+    link: "http://octotep.com:8096"
     image: "jellyfin.png"
   rss:
     name: "FreshRSS"
     description: "<br>RSS is a dying technology, but that doesn't mean it's a useless technology! Experience the best (or the worst) of what the internet has to offer. Hand craft your own feeds, and if the internet still sucks? You have only yourself to blame."
     link: "https://rss.technicalincompetence.club"
     image: "freshrss.png"
+  links:
+    name: "TI Link Shortener"
+    description: "<br>Have you ever felt self conscious about the links you send to people? We feel you. That's why we're proud to introduce our brand new link shortening service! For all those rickrolls you're still sending in current year."
+    link: "https://links.technicalincompetence.club"
+    image: "links.png"
+

requirements.txt

@@ -1,3 +1,4 @@
 Flask==1.1.2
 Flask-Bootstrap4==4.0.2
-PyYAML==5.3.1
+PyYAML==5.3.1
+pytz

static/clock.css

@@ -3,6 +3,11 @@
     src: url('/static/fonts/digital-7 (mono).ttf');
 }
 
+@font-face{
+    font-family:'vt-323';
+    src: url('/static/fonts/VT323-Regular.ttf');
+}
+
 #clockdiv > div{
     padding: 6px;
     border-radius: 3px;
@@ -32,3 +37,129 @@
     font-size: 16px;
     text-align: center;
 }
+
+.glitch {
+    color: rgb(223, 191, 191);
+    position: relative;
+    font-size: 9vw;
+    // margin: 70px 200px;
+    animation: glitch 5s 5s infinite;
+  }
+  
+  .glitch::before {
+    content: attr(data-text);
+    position: absolute;
+    left: -2px;
+    text-shadow: -5px 0 magenta;
+    background: black;
+    overflow: hidden;
+    top: 0;
+    animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
+  }
+  
+  .glitch::after {
+    content: attr(data-text);
+    position: absolute;
+    left: 2px;
+    text-shadow: -5px 0 lightgreen;
+    background: black;
+    overflow: hidden;
+    top: 0;
+    animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
+  }
+  
+  @keyframes glitch {
+    1%{
+      transform: rotateX(10deg) skewX(90deg);
+    }
+    2%{
+      transform: rotateX(0deg) skewX(0deg);
+    }
+  }
+  
+  @keyframes noise-1 {
+    $steps: 30;
+    @for $i from 1 through $steps {
+      #{percentage($i*(1/$steps))} {
+        $top: random(100);
+        $bottom: random(101 - $top);
+        clip-path: inset(#{$top}px 0 #{$bottom}px 0);
+      }
+    }
+  }
+  
+  @keyframes noise-2 {
+    $steps: 30;
+    @for $i from 0 through $steps {
+      #{percentage($i*(1/$steps))} {
+        $top: random(100);
+        $bottom: random(101 - $top);
+        clip-path: inset(#{$top}px 0 #{$bottom}px 0);
+      }
+    }
+  }
+  
+  .scanlines {
+    overflow: hidden;
+    mix-blend-mode: difference;
+  }
+  
+  .scanlines::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  
+    background: repeating-linear-gradient(
+      to bottom,
+      transparent 0%,
+      rgba(255, 255, 255, 0.05) .5%,
+      transparent 1%
+    );
+  
+    animation: fudge 7s ease-in-out alternate infinite;
+  }
+  
+  
+  @keyframes fudge {
+    from {
+      transform: translate(0px, 0px);
+    }
+    to {
+      transform: translate(0px, 2%);
+    }
+  }
+  
+  .glow {
+    @extend .glitch;
+    text-shadow: 0 0 1000px rgb(223, 191, 191);
+    color: transparent;
+    position: absolute;
+    top: 0;
+  }
+  
+  .subtitle {
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 100;
+    font-size: .8vw;
+    color: rgba(165, 141, 141, .4);
+    text-transform: uppercase;
+    letter-spacing: 1em;
+    text-align: center;
+    position: absolute;
+    left: 17%;
+    animation: glitch-2 5s 5.02s infinite;
+  }
+  
+  @keyframes glitch-2 {
+    1%{
+      transform: rotateX(10deg) skewX(70deg);
+    }
+    2%{
+      transform: rotateX(0deg) skewX(0deg);
+    }
+  }
+  
+  

static/final_clock.css

@@ -0,0 +1,34 @@
+@font-face{
+    font-family:'vt-323';
+    src: url('/static/fonts/VT323-Regular.ttf');
+}
+
+#clockdiv > div{
+    padding: 6px;
+    border-radius: 3px;
+    /* background: #00BF96; */
+    display: inline-block;
+}
+
+#clockdiv div > span{
+    /* padding: 8px; */
+    border-radius: 3px;
+    /* background: #00816A; */
+    /* display: inline-block; */
+    /* width: 100%; */
+    text-align: center;
+    font-family: 'vt-323';
+    font-size: 60px;
+    vertical-align: middle;
+}
+
+@media (min-width: 350px) {
+    #clockdiv div > span{
+        font-size: 60px;
+    }
+}
+
+#trip-name {
+    font-size: 16px;
+    text-align: center;
+}

static/final_clock.js

@@ -0,0 +1,50 @@
+function getTimeRemaining(endtime){
+    const total = Date.parse(endtime) - Date.parse(new Date());
+    const seconds = Math.floor( (total/1000) % 60 );
+    const minutes = Math.floor( (total/1000/60) % 60 );
+    const hours = Math.floor( (total/(1000*60*60)) % 24 );
+    const days = Math.floor( total/(1000*60*60*24) );
+
+    return {
+        total,
+        days,
+        hours,
+        minutes,
+        seconds
+    };
+}
+
+function initializeClock(id, endtime) {
+    const clock = document.getElementById(id);
+
+    const daysSpan = clock.querySelector('.days');
+    const hoursSpan = clock.querySelector('.hours');
+    const minutesSpan = clock.querySelector('.minutes');
+    const secondsSpan = clock.querySelector('.seconds');
+
+    function updateClock() {
+        const t = getTimeRemaining(endtime);
+
+        if (t.days < 0) {
+            clearInterval(timeinterval);
+            location.reload();
+        }
+
+        daysSpan.innerHTML = t.days;
+        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+        $('#glitch').attr('data-text', t.days + ":" + ('0' + t.hours).slice(-2) + ":" + ('0' + t.minutes).slice(-2) + ":" + ('0' + t.seconds).slice(-2))
+
+        if (t.total <= 0) {
+            clearInterval(timeinterval);
+            location.reload();
+        }
+    }
+
+    updateClock(); // run function once at first to avoid delay
+    var timeinterval = setInterval(updateClock, 1000);
+}
+
+initializeClock('clockdiv', deadline);
+$('#trip-name').text(tripName);

static/glitch.css

@@ -0,0 +1,683 @@
+body {
+  overflow: hidden;
+}
+
+.wrap {
+  background-image: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=20);
+  -moz-animation: noise 0.3s infinite;
+  -webkit-animation: noise 0.3s infinite;
+  animation: noise 0.3s infinite;
+  background-size: contain;
+  height: 100vh;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+          justify-content: center;
+}
+
+.glitch {
+  font-family: 'vt-323';
+  font-weight: 600;
+  color: white;
+  font-size: 60px;
+  position: relative;
+  margin: 0 auto;
+  text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 0px 0px 15px rgba(255, 255, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
+  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
+          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate, blur 8s ease-in-out infinite alternate;
+  -webkit-transform: skewX(0deg);
+  transform: skewX(0deg);
+}
+.wrap:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  background: url(http://api.thumbr.it/whitenoise-361x370.png?background=000000ff&noise=ffffff&density=61&opacity=40);
+  -moz-animation: bar 0.5s infinite;
+  -webkit-animation: bar 0.5s infinite;
+  animation: bar 0.5s infinite;
+}
+@-webkit-keyframes blur {
+  0%,40%, 50%, 60%, 90%, 95%, 100% {
+    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
+  }
+  45%, 75% {
+    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
+  }
+  97.5% {
+    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes blur {
+  0%,40%, 50%, 60%, 90%, 95%, 100% {
+    text-shadow: 0px -5px 10px white, 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 15px rgba(100, 240, 255, 0), 0px 0px 20px rgba(255, 255, 255, 0);
+  }
+  45%, 75% {
+    text-shadow: 0px -5px 10px white, 0px 0px 5px white, 0px 0px 10px white, 2px 1px 15px #64f0ff, 0px 0px 20px white;
+  }
+  97.5% {
+    text-shadow: 0px -5px 10px rgba(255, 255, 255, 0), 0px 0px 5px rgba(255, 255, 255, 0), 0px 0px 10px rgba(255, 255, 255, 0), 2px 1px 4px #ff6464, 0px 0px 20px rgba(255, 255, 255, 0);
+  }
+}
+.glitch:after {
+  content: attr(data-text);
+  position: absolute;
+  left: 3px;
+  text-shadow: -1px 0 red;
+  top: 0;
+  color: transparent;
+  background: transparent;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
+          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
+  -webkit-transform: skewX(0deg);
+  transform: skewX(0deg);
+  z-index: -2;
+  opacity: .7;
+}
+
+.glitch:before {
+  content: attr(data-text);
+  position: absolute;
+  left: 1px;
+  text-shadow: -3px 0 cyan;
+  top: 0;
+  color: transparent;
+  background: transparent;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
+          animation: noise-anim-2 3s infinite linear alternate-reverse, shift 4s ease-in-out infinite alternate;
+  -webkit-transform: skewX(0deg);
+  transform: skewX(0deg);
+  z-index: -1;
+  opacity: .8;
+}
+
+@-webkit-keyframes noise-anim {
+  0% {
+    clip: rect(8px, 9999px, 66px, 0);
+  }
+  5% {
+    clip: rect(27px, 9999px, 62px, 0);
+  }
+  10% {
+    clip: rect(86px, 9999px, 14px, 0);
+  }
+  15% {
+    clip: rect(25px, 9999px, 44px, 0);
+  }
+  20% {
+    clip: rect(60px, 9999px, 59px, 0);
+  }
+  25% {
+    clip: rect(29px, 9999px, 55px, 0);
+  }
+  30% {
+    clip: rect(20px, 9999px, 96px, 0);
+  }
+  35% {
+    clip: rect(98px, 9999px, 33px, 0);
+  }
+  40% {
+    clip: rect(10px, 9999px, 44px, 0);
+  }
+  45% {
+    clip: rect(49px, 9999px, 28px, 0);
+  }
+  50% {
+    clip: rect(6px, 9999px, 35px, 0);
+  }
+  55% {
+    clip: rect(18px, 9999px, 14px, 0);
+  }
+  60% {
+    clip: rect(29px, 9999px, 22px, 0);
+  }
+  65% {
+    clip: rect(86px, 9999px, 65px, 0);
+  }
+  70% {
+    clip: rect(29px, 9999px, 81px, 0);
+  }
+  75% {
+    clip: rect(1px, 9999px, 32px, 0);
+  }
+  80% {
+    clip: rect(66px, 9999px, 37px, 0);
+  }
+  85% {
+    clip: rect(16px, 9999px, 4px, 0);
+  }
+  90% {
+    clip: rect(12px, 9999px, 54px, 0);
+  }
+  95% {
+    clip: rect(14px, 9999px, 88px, 0);
+  }
+  100% {
+    clip: rect(26px, 9999px, 26px, 0);
+  }
+}
+
+@keyframes noise-anim {
+  0% {
+    clip: rect(8px, 9999px, 66px, 0);
+  }
+  5% {
+    clip: rect(27px, 9999px, 62px, 0);
+  }
+  10% {
+    clip: rect(86px, 9999px, 14px, 0);
+  }
+  15% {
+    clip: rect(25px, 9999px, 44px, 0);
+  }
+  20% {
+    clip: rect(60px, 9999px, 59px, 0);
+  }
+  25% {
+    clip: rect(29px, 9999px, 55px, 0);
+  }
+  30% {
+    clip: rect(20px, 9999px, 96px, 0);
+  }
+  35% {
+    clip: rect(98px, 9999px, 33px, 0);
+  }
+  40% {
+    clip: rect(10px, 9999px, 44px, 0);
+  }
+  45% {
+    clip: rect(49px, 9999px, 28px, 0);
+  }
+  50% {
+    clip: rect(6px, 9999px, 35px, 0);
+  }
+  55% {
+    clip: rect(18px, 9999px, 14px, 0);
+  }
+  60% {
+    clip: rect(29px, 9999px, 22px, 0);
+  }
+  65% {
+    clip: rect(86px, 9999px, 65px, 0);
+  }
+  70% {
+    clip: rect(29px, 9999px, 81px, 0);
+  }
+  75% {
+    clip: rect(1px, 9999px, 32px, 0);
+  }
+  80% {
+    clip: rect(66px, 9999px, 37px, 0);
+  }
+  85% {
+    clip: rect(16px, 9999px, 4px, 0);
+  }
+  90% {
+    clip: rect(12px, 9999px, 54px, 0);
+  }
+  95% {
+    clip: rect(14px, 9999px, 88px, 0);
+  }
+  100% {
+    clip: rect(26px, 9999px, 26px, 0);
+  }
+}
+@-webkit-keyframes noise-anim-2 {
+  0% {
+    clip: rect(53px, 9999px, 81px, 0);
+  }
+  5% {
+    clip: rect(40px, 9999px, 55px, 0);
+  }
+  10% {
+    clip: rect(72px, 9999px, 65px, 0);
+  }
+  15% {
+    clip: rect(68px, 9999px, 46px, 0);
+  }
+  20% {
+    clip: rect(55px, 9999px, 36px, 0);
+  }
+  25% {
+    clip: rect(96px, 9999px, 39px, 0);
+  }
+  30% {
+    clip: rect(7px, 9999px, 6px, 0);
+  }
+  35% {
+    clip: rect(37px, 9999px, 59px, 0);
+  }
+  40% {
+    clip: rect(69px, 9999px, 58px, 0);
+  }
+  45% {
+    clip: rect(98px, 9999px, 94px, 0);
+  }
+  50% {
+    clip: rect(35px, 9999px, 41px, 0);
+  }
+  55% {
+    clip: rect(76px, 9999px, 40px, 0);
+  }
+  60% {
+    clip: rect(91px, 9999px, 74px, 0);
+  }
+  65% {
+    clip: rect(75px, 9999px, 57px, 0);
+  }
+  70% {
+    clip: rect(62px, 9999px, 45px, 0);
+  }
+  75% {
+    clip: rect(100px, 9999px, 34px, 0);
+  }
+  80% {
+    clip: rect(56px, 9999px, 9px, 0);
+  }
+  85% {
+    clip: rect(27px, 9999px, 87px, 0);
+  }
+  90% {
+    clip: rect(84px, 9999px, 27px, 0);
+  }
+  95% {
+    clip: rect(27px, 9999px, 34px, 0);
+  }
+  100% {
+    clip: rect(44px, 9999px, 79px, 0);
+  }
+}
+@keyframes noise-anim-2 {
+  0% {
+    clip: rect(53px, 9999px, 81px, 0);
+  }
+  5% {
+    clip: rect(40px, 9999px, 55px, 0);
+  }
+  10% {
+    clip: rect(72px, 9999px, 65px, 0);
+  }
+  15% {
+    clip: rect(68px, 9999px, 46px, 0);
+  }
+  20% {
+    clip: rect(55px, 9999px, 36px, 0);
+  }
+  25% {
+    clip: rect(96px, 9999px, 39px, 0);
+  }
+  30% {
+    clip: rect(7px, 9999px, 6px, 0);
+  }
+  35% {
+    clip: rect(37px, 9999px, 59px, 0);
+  }
+  40% {
+    clip: rect(69px, 9999px, 58px, 0);
+  }
+  45% {
+    clip: rect(98px, 9999px, 94px, 0);
+  }
+  50% {
+    clip: rect(35px, 9999px, 41px, 0);
+  }
+  55% {
+    clip: rect(76px, 9999px, 40px, 0);
+  }
+  60% {
+    clip: rect(91px, 9999px, 74px, 0);
+  }
+  65% {
+    clip: rect(75px, 9999px, 57px, 0);
+  }
+  70% {
+    clip: rect(62px, 9999px, 45px, 0);
+  }
+  75% {
+    clip: rect(100px, 9999px, 34px, 0);
+  }
+  80% {
+    clip: rect(56px, 9999px, 9px, 0);
+  }
+  85% {
+    clip: rect(27px, 9999px, 87px, 0);
+  }
+  90% {
+    clip: rect(84px, 9999px, 27px, 0);
+  }
+  95% {
+    clip: rect(27px, 9999px, 34px, 0);
+  }
+  100% {
+    clip: rect(44px, 9999px, 79px, 0);
+  }
+}
+@-webkit-keyframes shift {
+  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
+    -webkit-transform: skewX(0deg);
+    transform: skewX(0deg);
+  }
+  41% {
+    -webkit-transform: skewX(10deg);
+    transform: skewX(10deg);
+  }
+  42% {
+    -webkit-transform: skewX(-10deg);
+    transform: skewX(-10deg);
+  }
+  59% {
+    -webkit-transform: skewX(40deg) skewY(10deg);
+    transform: skewX(40deg) skewY(10deg);
+  }
+  60% {
+    -webkit-transform: skewX(-40deg) skewY(-10deg);
+    transform: skewX(-40deg) skewY(-10deg);
+  }
+  63% {
+    -webkit-transform: skewX(10deg) skewY(-5deg);
+    transform: skewX(10deg) skewY(-5deg);
+  }
+  70% {
+    -webkit-transform: skewX(-50deg) skewY(-20deg);
+    transform: skewX(-50deg) skewY(-20deg);
+  }
+  71% {
+    -webkit-transform: skewX(10deg) skewY(-10deg);
+    transform: skewX(10deg) skewY(-10deg);
+  }
+}
+@keyframes shift {
+  0%,40%, 44%, 58%, 61%, 65%,69%,73%,100% {
+    -webkit-transform: skewX(0deg);
+    transform: skewX(0deg);
+  }
+  41% {
+    -webkit-transform: skewX(10deg);
+    transform: skewX(10deg);
+  }
+  42% {
+    -webkit-transform: skewX(-10deg);
+    transform: skewX(-10deg);
+  }
+  59% {
+    -webkit-transform: skewX(40deg) skewY(10deg);
+    transform: skewX(40deg) skewY(10deg);
+  }
+  60% {
+    -webkit-transform: skewX(-40deg) skewY(-10deg);
+    transform: skewX(-40deg) skewY(-10deg);
+  }
+  63% {
+    -webkit-transform: skewX(10deg) skewY(-5deg);
+    transform: skewX(10deg) skewY(-5deg);
+  }
+  70% {
+    -webkit-transform: skewX(-50deg) skewY(-20deg);
+    transform: skewX(-50deg) skewY(-20deg);
+  }
+  71% {
+    -webkit-transform: skewX(10deg) skewY(-10deg);
+    transform: skewX(10deg) skewY(-10deg);
+  }
+}
+
+@-moz-keyframes noise {
+  0% {
+    background-position: 49px 45px;
+  }
+  10% {
+    background-position: 12px 22px;
+  }
+  20% {
+    background-position: -81px 32px;
+  }
+  30% {
+    background-position: 52px -87px;
+  }
+  40% {
+    background-position: 33px 46px;
+  }
+  50% {
+    background-position: 6px -83px;
+  }
+  60% {
+    background-position: 23px 26px;
+  }
+  70% {
+    background-position: -97px -75px;
+  }
+  80% {
+    background-position: -49px 89px;
+  }
+  90% {
+    background-position: 69px -23px;
+  }
+}
+@-webkit-keyframes noise {
+  0% {
+    background-position: -84px -42px;
+  }
+  10% {
+    background-position: 91px -12px;
+  }
+  20% {
+    background-position: -19px 24px;
+  }
+  30% {
+    background-position: -62px 53px;
+  }
+  40% {
+    background-position: 83px -50px;
+  }
+  50% {
+    background-position: -80px 39px;
+  }
+  60% {
+    background-position: 62px -67px;
+  }
+  70% {
+    background-position: -30px 51px;
+  }
+  80% {
+    background-position: 45px 8px;
+  }
+  90% {
+    background-position: -11px -20px;
+  }
+}
+@keyframes noise {
+  0% {
+    background-position: -50px -96px;
+  }
+  10% {
+    background-position: -51px -33px;
+  }
+  20% {
+    background-position: -81px 13px;
+  }
+  30% {
+    background-position: -4px -79px;
+  }
+  40% {
+    background-position: -7px -27px;
+  }
+  50% {
+    background-position: -58px 21px;
+  }
+  60% {
+    background-position: 86px -69px;
+  }
+  70% {
+    background-position: 97px 35px;
+  }
+  80% {
+    background-position: 5px -84px;
+  }
+  90% {
+    background-position: 19px -24px;
+  }
+}
+@-moz-keyframes bar {
+  0% {
+    height: 397px;
+    top: 72%;
+    opacity: 0.42;
+  }
+  10% {
+    height: 498px;
+    top: 60%;
+    opacity: 0.49;
+  }
+  20% {
+    height: 182px;
+    top: 18%;
+    opacity: 0.23;
+  }
+  30% {
+    height: 543px;
+    top: 18%;
+    opacity: 0.41;
+  }
+  40% {
+    height: 219px;
+    top: 58%;
+    opacity: 0.33;
+  }
+  50% {
+    height: 288px;
+    top: 6%;
+    opacity: 0.34;
+  }
+  60% {
+    height: 132px;
+    top: 42%;
+    opacity: 0.58;
+  }
+  70% {
+    height: 389px;
+    top: 77%;
+    opacity: 0.26;
+  }
+  80% {
+    height: 383px;
+    top: 68%;
+    opacity: 0.68;
+  }
+  90% {
+    height: 346px;
+    top: 86%;
+    opacity: 0.06;
+  }
+}
+@-webkit-keyframes bar {
+  0% {
+    height: 591px;
+    top: 86%;
+    opacity: 0.61;
+  }
+  10% {
+    height: 420px;
+    top: 54%;
+    opacity: 0.15;
+  }
+  20% {
+    height: 626px;
+    top: 24%;
+    opacity: 0.19;
+  }
+  30% {
+    height: 595px;
+    top: 87%;
+    opacity: 0.1;
+  }
+  40% {
+    height: 81px;
+    top: 29%;
+    opacity: 0.47;
+  }
+  50% {
+    height: 621px;
+    top: 23%;
+    opacity: 0.22;
+  }
+  60% {
+    height: 79px;
+    top: 67%;
+    opacity: 0.38;
+  }
+  70% {
+    height: 119px;
+    top: 37%;
+    opacity: 0.39;
+  }
+  80% {
+    height: 178px;
+    top: 48%;
+    opacity: 0.55;
+  }
+  90% {
+    height: 415px;
+    top: 72%;
+    opacity: 0.3;
+  }
+}
+@keyframes bar {
+  0% {
+    height: 578px;
+    top: 100%;
+    opacity: 0.48;
+  }
+  10% {
+    height: 32px;
+    top: 24%;
+    opacity: 0.36;
+  }
+  20% {
+    height: 359px;
+    top: 15%;
+    opacity: 0.03;
+  }
+  30% {
+    height: 177px;
+    top: 43%;
+    opacity: 0.07;
+  }
+  40% {
+    height: 124px;
+    top: 52%;
+    opacity: 0.42;
+  }
+  50% {
+    height: 216px;
+    top: 34%;
+    opacity: 0.1;
+  }
+  60% {
+    height: 315px;
+    top: 30%;
+    opacity: 0.02;
+  }
+  70% {
+    height: 379px;
+    top: 30%;
+    opacity: 0.47;
+  }
+  80% {
+    height: 475px;
+    top: 100%;
+    opacity: 0.48;
+  }
+  90% {
+    height: 401px;
+    top: 98%;
+    opacity: 0.12;
+  }
+}

static/style.css

@@ -129,3 +129,168 @@
     opacity: 1;
   }
 }
+
+@keyframes flicker {
+  0% {
+    opacity: 0.27861;
+  }
+  5% {
+    opacity: 0.34769;
+  }
+  10% {
+    opacity: 0.23604;
+  }
+  15% {
+    opacity: 0.90626;
+  }
+  20% {
+    opacity: 0.18128;
+  }
+  25% {
+    opacity: 0.83891;
+  }
+  30% {
+    opacity: 0.65583;
+  }
+  35% {
+    opacity: 0.67807;
+  }
+  40% {
+    opacity: 0.26559;
+  }
+  45% {
+    opacity: 0.84693;
+  }
+  50% {
+    opacity: 0.96019;
+  }
+  55% {
+    opacity: 0.08594;
+  }
+  60% {
+    opacity: 0.20313;
+  }
+  65% {
+    opacity: 0.71988;
+  }
+  70% {
+    opacity: 0.53455;
+  }
+  75% {
+    opacity: 0.37288;
+  }
+  80% {
+    opacity: 0.71428;
+  }
+  85% {
+    opacity: 0.70419;
+  }
+  90% {
+    opacity: 0.7003;
+  }
+  95% {
+    opacity: 0.36108;
+  }
+  100% {
+    opacity: 0.24387;
+  }
+}
+@keyframes textShadow {
+  0% {
+    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  5% {
+    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  10% {
+    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  15% {
+    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  20% {
+    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  25% {
+    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  30% {
+    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  35% {
+    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  40% {
+    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  45% {
+    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  50% {
+    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  55% {
+    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  60% {
+    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  65% {
+    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  70% {
+    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  75% {
+    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  80% {
+    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  85% {
+    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  90% {
+    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  95% {
+    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+  100% {
+    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
+  }
+}
+.crt::after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(18, 16, 16, 0.1);
+  opacity: 0;
+  z-index: 2;
+  pointer-events: none;
+  animation: flicker 0.15s infinite;
+}
+.crt::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
+  z-index: 2;
+  background-size: 100% 2px, 3px 100%;
+  pointer-events: none;
+}
+.crt {
+  animation: textShadow 1.6s infinite;
+}
+
+.colon {
+  font-size: 40px;
+}

templates/final_countdown.j2

@@ -0,0 +1,31 @@
+{% extends "bootstrap/base.html" %}
+{% block title %}Technical Incompetence - Home{% endblock %}
+
+{% block styles %}
+{{super()}}
+<link rel="stylesheet" href="{{url_for('.static', filename='style.css')}}">
+{% if countdown is defined or final_countdown is defined %}
+    <link rel="stylesheet" href="{{url_for('.static', filename='final_clock.css')}}">
+    <link rel="stylesheet" href="{{url_for('.static', filename='glitch.css')}}">
+{% endif %}
+{% endblock %}
+
+{% block content %}
+<div class="crt" style="margin: auto; overflow: hidden;">
+    <div id="clockdiv" class="wrap">
+        <div id='glitch' class="glitch" data-text=""><span class="days"></span><span class="colon">:</span><span class="hours"></span><span class="colon">:</span><span class="minutes"></span><span class="colon">:</span><span class="seconds"></span></div> 
+    </div>
+</div>
+<br>
+{% endblock %}
+
+{% block scripts %}
+{{ super () }}
+{% if final_countdown is defined %}
+    <script>
+        const deadline = '{{ final_countdown['timestamp'] }}';
+        const tripName = '{{ final_countdown['name'] }}';
+    </script>
+    <script src="{{url_for('.static', filename='final_clock.js')}}"></script>
+{% endif %}
+{% endblock %}