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']}}

- + + + {% if contribution == 'karaoke' %} + + {% else %} + + + {%endif%} {%endif%} {% endfor %}