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;} +}