From e90a5dc28f520879ff3bcd0aa3eafbc987b016f6 Mon Sep 17 00:00:00 2001
From: Francesco Luzzana
Date: Sun, 20 Mar 2022 21:18:15 +0100
Subject: [PATCH] custom karaoke progress bar
---
postit/contents.json | 2 +-
postit/static/css/contents.css | 21 +++++++++++++++++++++
postit/templates/postit.html | 24 +++++++++++++++++-------
3 files changed, 39 insertions(+), 8 deletions(-)
diff --git a/postit/contents.json b/postit/contents.json
index ba7c875..569813f 100644
--- a/postit/contents.json
+++ b/postit/contents.json
@@ -1 +1 @@
-{"outro": [{"title": "Outro", "pic": "fagenotpound.png", "alt": "pzwiki.wdka.nl/mediadesign/Fage_Not_Pound"}]}
\ No newline at end of file
+{"karaoke": [{"title": "Can Gaming Make a Better World?", "pic": "can_gaming_make_a_better_world.jpg"}, {"title": "Can Gaming Make a Better World?", "pic": "karaoke.png", "alt": "hub.xpub.nl/soupboat/si17/\ud83c\udfa4/"}, {"title": "Can Gaming Make a Better World?", "description": "Let's get straight into it!"}, {"title": "Can Gaming Make a Better World?", "description": "PLACEHOLDER IMAGE?? (BONUS)"}, {"title": "Can Gaming Make a Better World?", "description": "I wake up early every day to be the best"}, {"title": "Can Gaming Make a Better World?", "description": "Don't close the mac cuz there's no need for me to rest"}, {"title": "Can Gaming Make a Better World?", "description": "My job is like a game\nthat's why I feel\nso blessed"}, {"title": "Can Gaming Make a Better World?", "description": "Oh, a, oh"}, {"title": "Can Gaming Make a Better World?", "description": "They took the fun out\nof my creativity\n(BUT)"}, {"title": "Can Gaming Make a Better World?", "description": "I'm responsible for\nmy stability \n(AND)"}, {"title": "Can Gaming Make a Better World?", "description": "My mentor said 'Self-motivation is the key!'"}, {"title": "Can Gaming Make a Better World?", "description": "20 points"}, {"title": "Can Gaming Make a Better World?", "description": "I did a good job!"}, {"title": "Can Gaming Make a Better World?", "description": "50 points"}, {"title": "Can Gaming Make a Better World?", "description": "I did a better job!"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming could make a promising world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming should make a fulfilling world"}, {"title": "Can Gaming Make a Better World?", "description": "Gamify your entire day"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a-a-a oh"}, {"title": "Can Gaming Make a Better World?", "description": "Waiting the host to let me enter the zoom call"}, {"title": "Can Gaming Make a Better World?", "description": "Checking my emails \nwhile I'm having\nhealthy lunch"}, {"title": "Can Gaming Make a Better World?", "description": "My job is like a game\nbut why I feel\nso stressed"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a oh-a"}, {"title": "Can Gaming Make a Better World?", "description": "Is this my leisure time?"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a oh-a"}, {"title": "Can Gaming Make a Better World?", "description": "Is this my working time?"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming could make a healthier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming should make a happier world"}, {"title": "Can Gaming Make a Better World?", "description": "Manage life through all your apps"}, {"title": "Can Gaming Make a Better World?", "description": "Get some rest and back to work"}, {"title": "Can Gaming Make a Better World?", "description": "Oh-a-aho oh x2"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming could make an easier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming should make a better world"}, {"title": "Can Gaming Make a Better World?", "description": "If you fail then don't complain"}, {"title": "Can Gaming Make a Better World?", "description": "Try your best and play the game"}, {"title": "Can Gaming Make a Better World?", "description": "Life is better when\nyou may"}, {"title": "Can Gaming Make a Better World?", "description": "gamify all the way"}, {"title": "Can Gaming Make a Better World?", "description": "Can't go on anymore x2"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a promising world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a healthier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a happier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make an easier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a better world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a fulfilling world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a healthier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a happier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make an easier world"}, {"title": "Can Gaming Make a Better World?", "description": "Gaming can't make a better world"}]}
\ No newline at end of file
diff --git a/postit/static/css/contents.css b/postit/static/css/contents.css
index 0d3a0fd..fd7d42e 100644
--- a/postit/static/css/contents.css
+++ b/postit/static/css/contents.css
@@ -144,3 +144,24 @@
.outro figcaption {
font-size: 14px;
}
+
+.karaoke footer {
+ height: 27.6px;
+}
+
+.karaoke .title {
+ margin: 0;
+ width: auto;
+ position: absolute;
+ top: 50%;
+ left: 4mm;
+ transform: translate(0, -50%);
+ white-space: nowrap;
+ /* text-align: center; */
+ font-weight: bold;
+ color: var(--background);
+}
+
+.karaoke .fill {
+ color: var(--color);
+}
diff --git a/postit/templates/postit.html b/postit/templates/postit.html
index c7a608d..52f5d96 100644
--- a/postit/templates/postit.html
+++ b/postit/templates/postit.html
@@ -162,13 +162,23 @@
{{content['description']}}