aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-07-15 22:50:21 +0200
committerNoah Loomans <noahloomans@gmail.com>2017-07-15 22:50:21 +0200
commitf72a71927b89a0455414d48da5211df07051bfca (patch)
treec1b68571c0e888d8c78c78f0f78818f706550053
parent2a3a5c79aa34a2e246732199f6c9273a4c4b012f (diff)
Create season 3 countdown random project
Diffstat
-rw-r--r--_layouts/random-project.html16
-rw-r--r--articles/random-projects.md1
-rw-r--r--random-projects/bad-password-generator/index.html1
-rw-r--r--random-projects/season3-countdown/index.html26
-rw-r--r--random-projects/season3-countdown/script.js58
-rw-r--r--random-projects/season3-countdown/style.scss70
-rw-r--r--style/_random-project.scss1
7 files changed, 166 insertions, 7 deletions
diff --git a/_layouts/random-project.html b/_layouts/random-project.html
index ac8f507..4c7f650 100644
--- a/_layouts/random-project.html
+++ b/_layouts/random-project.html
@@ -4,14 +4,16 @@
<html>
{% include head.html %}
<body class="random-project">
- <div class="random-project__header">
- <div class="logo">
- <img src="/assets/face.jpg" alt="Noah Loomans" class="logo">
+ {% if page.branding == true %}
+ <div class="random-project__header">
+ <div class="logo">
+ <img src="/assets/face.jpg" alt="Noah Loomans" class="logo">
+ </div>
+ <div class="text">Random Project</div>
+ <div class="grow"></div>
+ <a href="/">Go to main site</a>
</div>
- <div class="text">Random Project</div>
- <div class="grow"></div>
- <a href="/">Go to main site</a>
- </div>
+ {% endif %}
{{ content }}
</body>
</html>
diff --git a/articles/random-projects.md b/articles/random-projects.md
index be175bc..4d16824 100644
--- a/articles/random-projects.md
+++ b/articles/random-projects.md
@@ -6,6 +6,7 @@ permalink: /random-projects/
These are some of the random project I've made:
- [Bad Password Generator](/random-projects/bad-password-generator/)
+ - [Season 3 Countdown](/random-projects/season3-countdown/)
The source code of all of them can be found on
[GitLab](https://gitlab.com/nloomans/noahloomans.com/tree/master/random-projects).
diff --git a/random-projects/bad-password-generator/index.html b/random-projects/bad-password-generator/index.html
index 0a68113..ecbf053 100644
--- a/random-projects/bad-password-generator/index.html
+++ b/random-projects/bad-password-generator/index.html
@@ -4,6 +4,7 @@ info:
title: Bad Password Generator
description: Surely you wouldn't use one like it, would you?
image: https://noahloomans.com/random-projects/bad-password-generator/image.png
+branding: true
---
<main class='random-project__project__bad-password-generator'>
<div class="text">
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
+---
+<main class='random-project__project__season3-countdown'>
+ <div id="youtube-background" style="curso"></div>
+
+ <div class="container">
+ <div class="text">
+ <p>Season 3 will air in:</p>
+ </div>
+ <div class="countdown">
+ <span id="days"></span>d <span id="hours"></span>h <span id="minutes"></span>m <span id="seconds"></span>s <span id="milliseconds"></span>
+ </div>
+ </div>
+
+
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" charset="utf-8"></script>
+ <script src="./script.js" charset="utf-8"></script>
+
+ <script async src="https://www.youtube.com/iframe_api"></script>
+</main>
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';
generated by cgit v1.1 at 2024-05-07 19:46:19 +0000