diff --git a/grzegorz_clients/constants.py b/grzegorz_clients/constants.py
index 3271c49..68f5bcc 100644
--- a/grzegorz_clients/constants.py
+++ b/grzegorz_clients/constants.py
@@ -25,6 +25,7 @@ COLOR_LIGHT = "#f8f9fa"
COLOR_DARK = "#343a40"
# Font Awesome
+ICON_PARTY = ''
ICON_PREV = ''
ICON_NEXT = ''
ICON_PLAY = ''
diff --git a/grzegorz_clients/remi_ui.py b/grzegorz_clients/remi_ui.py
index 9f51ecd..a81bc4c 100644
--- a/grzegorz_clients/remi_ui.py
+++ b/grzegorz_clients/remi_ui.py
@@ -25,6 +25,9 @@ class RemiApp(App):
self.playback.playing = gui.Label("Now playing: None")# (TODO): update this
+ self.playback.party = gui.Button(ICON_PARTY)
+ self.playback.party.attributes["onclick"] = "document.body.classList.toggle('dancing');"
+ self.playback.party.attributes["title"] = "ENABLE PARTY MODE" # hover text
self.playback.previous = gui.Button(ICON_PREV)
self.playback.previous.set_on_click_listener(self.playback_previous)
self.playback.play = gui.Button(ICON_PLAY)
@@ -64,13 +67,17 @@ class RemiApp(App):
def make_gui_container(self):#placement and styling
# Logo image:
self.logo_image.style["width"] = f"100%"
- for i in (self.playback.previous, self.playback.play, self.playback.next):
+ for i in (self.playback.previous, self.playback.play, self.playback.next, self.playback.party):
i.style["margin"] = "3px"
i.style["width"] = "2.8em"
# Playback:
+ self.playback.party.style["background"] \
+ = f"linear-gradient(40deg,{COLOR_PINK},{COLOR_TEAL})"
+
self.playback.play.style["background"] \
= f"linear-gradient(40deg,{COLOR_BLUE},{COLOR_PURPLE})"
+
self.playback.volume_label.style["font-size"] = "0.8em"
@@ -128,6 +135,7 @@ class RemiApp(App):
left_container.append(self.playback.playing)
playback_container = gui.HBox()
+ playback_container.append(self.playback.party)
playback_container.append(self.playback.previous)
playback_container.append(self.playback.play)
playback_container.append(self.playback.next)
diff --git a/grzegorz_clients/res/dance1.gif b/grzegorz_clients/res/dance1.gif
new file mode 100644
index 0000000..19cc28c
Binary files /dev/null and b/grzegorz_clients/res/dance1.gif differ
diff --git a/grzegorz_clients/res/dance2.gif b/grzegorz_clients/res/dance2.gif
new file mode 100644
index 0000000..62d4519
Binary files /dev/null and b/grzegorz_clients/res/dance2.gif differ
diff --git a/grzegorz_clients/res/style.css b/grzegorz_clients/res/style.css
index 260148d..5bbd2a8 100644
--- a/grzegorz_clients/res/style.css
+++ b/grzegorz_clients/res/style.css
@@ -1,5 +1,5 @@
@charset "UTF-8";
-@import url("https://use.fontawesome.com/releases/v5.0.7/css/all.css");
+@import url("https://use.fontawesome.com/releases/v5.7.2/css/all.css");
@font-face {
font-family: 'Roboto';
@@ -658,3 +658,44 @@ ul.TreeView{
.TreeItem[has-subtree='true'][treeopen='true']:hover {
background-color: transparent;
}
+
+/* document.body.classList.toggle("dancing"); */
+body.dancing::before,
+body.dancing::after {
+ position: fixed !important;
+ display: block;
+ z-index: 1;
+ bottom:-0.2em;
+}
+
+body.dancing::before {
+ left:0;
+ content: url('/res/dance2.gif');
+}
+
+body.dancing::after {
+ right:0;
+ content: url('/res/dance1.gif');
+ transform: scale(0.5);
+ transform-origin: 100% 100%;
+}
+
+body.dancing {
+ animation-name: party_colors;
+ animation-duration: 2s;
+ animation-iteration-count: infinite;
+
+}
+@keyframes party_colors {
+ 0%{background-color: red;}
+ 10%{background-color: blue;}
+ 20%{background-color: green;}
+ 30%{background-color: yellow;}
+ 40%{background-color: pink;}
+ 50%{background-color: white;}
+ 60%{background-color: cyan;}
+ 70%{background-color: purple;}
+ 80%{background-color: lime;}
+ 90%{background-color: #a0aaff;}
+ 100%{background-color: red;}
+}