diff --git a/app.py b/app.py index ea6eb21..cb8eaa2 100644 --- a/app.py +++ b/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) diff --git a/config/config.yaml b/config/config.yaml index 8033714..e12b7b5 100644 --- a/config/config.yaml +++ b/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: "
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: "
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: "
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 probably never crash or lose data so all you care about is safe with us." @@ -31,10 +35,16 @@ apps: jellyfin: name: "Jellyfin" description: "
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: "
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: "
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" + diff --git a/requirements.txt b/requirements.txt index 3ca98e8..e60fcb6 100644 --- a/requirements.txt +++ b/requirements.txt @@ -1,3 +1,4 @@ Flask==1.1.2 Flask-Bootstrap4==4.0.2 -PyYAML==5.3.1 \ No newline at end of file +PyYAML==5.3.1 +pytz \ No newline at end of file diff --git a/static/clock.css b/static/clock.css index 4bc6313..f5e7dfa 100644 --- a/static/clock.css +++ b/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); + } + } + + \ No newline at end of file diff --git a/static/final_clock.css b/static/final_clock.css new file mode 100644 index 0000000..4283c43 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/static/final_clock.js b/static/final_clock.js new file mode 100644 index 0000000..49592cc --- /dev/null +++ b/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); \ No newline at end of file diff --git a/static/fonts/VT323-Regular.ttf b/static/fonts/VT323-Regular.ttf new file mode 100644 index 0000000..e838581 Binary files /dev/null and b/static/fonts/VT323-Regular.ttf differ diff --git a/static/glitch.css b/static/glitch.css new file mode 100644 index 0000000..0e2eae8 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/static/images/links.png b/static/images/links.png new file mode 100644 index 0000000..e96b280 Binary files /dev/null and b/static/images/links.png differ diff --git a/static/images/zulip.png b/static/images/zulip.png new file mode 100644 index 0000000..063fdaf Binary files /dev/null and b/static/images/zulip.png differ diff --git a/static/style.css b/static/style.css index dea2621..953cc38 100644 --- a/static/style.css +++ b/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; +} \ No newline at end of file diff --git a/templates/final_countdown.j2 b/templates/final_countdown.j2 new file mode 100644 index 0000000..c7c0b04 --- /dev/null +++ b/templates/final_countdown.j2 @@ -0,0 +1,31 @@ +{% extends "bootstrap/base.html" %} +{% block title %}Technical Incompetence - Home{% endblock %} + +{% block styles %} +{{super()}} + +{% if countdown is defined or final_countdown is defined %} + + +{% endif %} +{% endblock %} + +{% block content %} +
+
+
:::
+
+
+
+{% endblock %} + +{% block scripts %} +{{ super () }} +{% if final_countdown is defined %} + + +{% endif %} +{% endblock %} \ No newline at end of file