diff --git a/random-projects/season3-countdown/index.html b/random-projects/season3-countdown/index.html new file mode 100644 index 0000000..d9f8c84 --- /dev/null +++ b/random-projects/season3-countdown/index.html @@ -0,0 +1,26 @@ +--- +layout: random-project +info: + title: Season 3 Countdown + description: I'M PICKLE RICK!!! + image: https://noahloomans.com/random-projects/bad-password-generator/image.png +branding: false +--- +

+ +

Season 3 will air in:

+ d h m s +

+ + + + + + +

diff --git a/random-projects/season3-countdown/script.js b/random-projects/season3-countdown/script.js new file mode 100644 index 0000000..203bbd0 --- /dev/null +++ b/random-projects/season3-countdown/script.js @@ -0,0 +1,58 @@ +// var EVENT_TIME = 1501471800 +var EVENT_TIME = 1501471800000 +var NODES = { + VIDEO: document.querySelector('.background-video'), + DAYS: document.querySelector('#days'), + HOURS: document.querySelector('#hours'), + MINUTES: document.querySelector('#minutes'), + SECONDS: document.querySelector('#seconds'), + MILLISECONDS: document.querySelector('#milliseconds') +} + +function format (number, length) { + var string = number.toString() + while (length > string.length) { + string = '0' + string + } + return string +} + +window.setInterval(function () { + var timeDiff = EVENT_TIME - new Date().getTime() + duration = moment.duration(timeDiff, 'milliseconds') + NODES.DAYS.innerText = format(duration.days(), 2) + NODES.HOURS.innerText = format(duration.hours(), 2) + NODES.MINUTES.innerText = format(duration.minutes(), 2) + NODES.SECONDS.innerText = format(duration.seconds(), 2) + NODES.MILLISECONDS.innerText = format(duration.milliseconds(), 3) +}, 1); + +function onYouTubeIframeAPIReady () { + var player = new YT.Player('youtube-background', { + videoId: 'DeAw6aXHzcY', + width: 1080, + height: 1920, + playerVars: { + autoplay: 1, + controls: 0, + showinfo: 0, + modestbranding: 1, + loop: 1, + fs: 0, + cc_load_policy: 0, + iv_load_policy: 3, + autohide: 0 + }, + events: { + onReady: function(e) { + e.target.mute(); + }, + onStateChange: function(e) { + console.log('video ended') + if (e.data === YT.PlayerState.ENDED) { + player.playVideo(); + } + } + } + }); +} diff --git a/random-projects/season3-countdown/style.scss b/random-projects/season3-countdown/style.scss new file mode 100644 index 0000000..d0b445f --- /dev/null +++ b/random-projects/season3-countdown/style.scss @@ -0,0 +1,70 @@ +.random-project__project__season3-countdown { + #youtube-background { + position: absolute; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + + pointer-events: none; + + z-index: -1; + } + + .container { + color: white; + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: 1em; + } + + .text { + font-size: 4em; + text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; + } + + .countdown { + text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000; + font-size: 4em; + + span { + font-size: 3em; + } + } +} + +@media screen and (max-width: 1600px) { + .random-project__project__season3-countdown { + .container { + font-size: 0.5em; + } + } +} + +@media screen and (max-width: 1024px) { + .random-project__project__season3-countdown { + .container { + font-size: 0.4em; + } + } +} + +@media screen and (max-width: 700px) { + .random-project__project__season3-countdown { + .container { + font-size: 0.3em; + } + } +} + +@media screen and (max-width: 500px) { + .random-project__project__season3-countdown { + .container { + font-size: 0.2em; + } + } +} diff --git a/style/_random-project.scss b/style/_random-project.scss index ce8de3e..ebbb3b7 100644 --- a/style/_random-project.scss +++ b/style/_random-project.scss @@ -66,3 +66,4 @@ body.random-project { // import the style sheet of all the random projects @import '../random-projects/bad-password-generator/style.scss'; +@import '../random-projects/season3-countdown/style.scss'; -- cgit v1.1