├── LICENSE.txt ├── README.md ├── about.txt ├── index.html ├── script.js └── themes ├── default ├── about.txt ├── fonts │ ├── licenses │ │ └── slkscr.txt │ └── slkscr.ttf ├── images │ ├── green-light-off.gif │ ├── green-light-on.gif │ ├── info.png │ ├── mute.png │ ├── next.png │ ├── pause.png │ ├── play.png │ ├── prev.png │ ├── slider.gif │ ├── sound.png │ └── stop.png ├── logo.png └── webdeck-player.css ├── minimal ├── about.txt ├── fonts │ ├── licenses │ │ └── slkscr.txt │ └── slkscr.ttf ├── images │ ├── green-light-off.gif │ ├── green-light-on.gif │ ├── info.png │ ├── mute.png │ ├── next.png │ ├── pause.png │ ├── play.png │ ├── prev.png │ ├── slider.gif │ ├── sound.png │ └── stop.png ├── logo.png └── webdeck-player.css ├── red-grunge ├── about.txt ├── fonts │ ├── licenses │ │ └── slkscr.txt │ └── slkscr.ttf ├── images │ ├── background.jpg │ ├── green-light-off.gif │ ├── green-light-on.gif │ ├── info.png │ ├── mute.png │ ├── next.png │ ├── pause.png │ ├── play.png │ ├── prev.png │ ├── slider.gif │ ├── sound.png │ └── stop.png ├── logo.png └── webdeck-player.css ├── silver ├── about.txt ├── fonts │ ├── EurostileExtendedBlack.ttf │ ├── LED-Dot-Matrix.ttf │ ├── licenses │ │ └── slkscr.txt │ └── slkscr.ttf ├── images │ ├── green-light-off.gif │ ├── green-light-on.gif │ ├── info.png │ ├── mute.png │ ├── next.png │ ├── pause.png │ ├── play.png │ ├── prev.png │ ├── sound.png │ └── stop.png ├── logo.png └── webdeck-player.css └── violet ├── about.txt ├── fonts ├── DS-DIGII.TTF ├── EurostileExtendedBlack.ttf └── licenses │ └── DIGITAL.TXT ├── images ├── green-light-off.gif ├── green-light-on.gif ├── info.png ├── mute.png ├── next.png ├── pause.png ├── play.png ├── prev.png ├── sound.png └── stop.png ├── logo.png └── webdeck-player.css /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Chris 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ![header](https://user-images.githubusercontent.com/72354794/211170247-af9a802e-73f2-429c-a697-6edd49c24006.png) 3 | 4 | # Webdeck Player 5 | *Cool music for your cool website!* 6 | 7 | The **Webdeck Player** is a player for Youtube playlists coded entirely in Javascript and intended for personal websites. Use it for showing your amazing music taste to your visitors! 8 | 9 | **Live demo**: https://webdeckplayer.neocities.org 10 | 11 | ![GitHub release (latest by date)](https://img.shields.io/github/v/release/cristiancfm/webdeck-player) 12 | ![GitHub](https://img.shields.io/github/license/cristiancfm/webdeck-player) 13 | ![GitHub all releases downloads](https://img.shields.io/github/downloads/cristiancfm/webdeck-player/total) 14 | [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://paypal.me/cristiancfm) 15 | 16 | 17 | ## Features 18 | - Play Youtube videos saved in playlists 19 | - Integrated video controls (play, pause, volume, shuffling, etc.) 20 | - Playlist selector - select between your defined playlists 21 | - Themes - customize the player with the included themes or create your own! 22 | - Very easy to use 23 | - Written in pure modern Javascript - no weird stuff! 24 | - Lightweight 25 | - aesthetic™ 26 | 27 | 28 | ## Downloads 29 | Releases section: https://github.com/cristiancfm/webdeck-player/releases 30 | 31 | ## Instructions 32 | *(read these instructions also on the [website](https://webdeckplayer.neocities.org))* 33 | 34 | Getting started with the Webdeck Player is very simple. Follow this tutorial and you'll get your copy of the player running in a few minutes! 35 | 36 | 37 | ### Installing the player 38 | 1. Go to the Releases section of the Github repository and download the latest version available. You should get a `webdeck-player-v.X.X.X.zip` file. 39 | 2. Unzip the file and put the `webdeck-player` folder into your website root folder. 40 | 41 | 3. a. **Run the player on a separate browser window (recommended)** 42 | - The player is designed to work inside a container of 600x250 pixels. You can make the player open in a new browser window - it will look great and visitors can navigate the rest of your site while keeping the player running! To do it, place a tag like the following in your site: 43 | `` 44 | This code creates a button that will open a window with the specified height and width containing the player. 45 | 46 | 3. b. **Run the player inside an iframe** 47 | - You can also run the player inside a page of your site using an iframe tag. To do it, you can write the following tag in the HTML of your page: 48 | `` 49 | 50 | ### Adding playlists 51 | 52 | Go to the `script.js` file inside the webdeck-player folder. There you can follow the instructions to change the playlists shown in the player. 53 | 54 | ### Adding themes 55 | 56 | To add a new theme to the player, copy its folder to the themes folder. Then, open the `script.js` file and add it to the list following the instructions. 57 | 58 | ### Creating a new theme 59 | 60 | Themes are just a collection of resources (like images or fonts) and a CSS file to modify the player appearance. You just need basic knowledge about CSS to start! Create a new theme following these steps: 61 | 62 | 1. Inside the `webdeck-player` folder, locate the themes folder and open it. 63 | 2. Choose a theme folder as a base, for example, the default theme. You can modify any other theme. 64 | 3. Duplicate your chosen folder and rename it. For example, call it `my-theme`. 65 | 4. Add your new theme to the `script.js` file following the instructions inside it. 66 | 5. Inside your theme folder, open the `webdeck-player.css` file and modify it to your liking. You can also change the fonts and the images. **Do not rename any image.** Their paths are used in the `script.js` file. The `about.txt` file is for adding a description about the theme and your name. 67 | 68 | ## About 69 | Created by Chris. Licensed under the MIT License. Some components of the software such as fonts were created by others. In these cases, attribution was given for their work. 70 | -------------------------------------------------------------------------------- /about.txt: -------------------------------------------------------------------------------- 1 | Webdeck Player - A Javascript Youtube playlists player for webpages 2 | MIT License 3 | Copyright (c) 2022 Chris 4 | 5 | Thanks for downloading this software! Check the latest updates at the Github 6 | repo: https://github.com/cristiancfm/webdeck-player 7 | 8 | Please send me an e-mail (cristian.ferreiro.montoiro@gmail.com) if you find any bugs or 9 | have some suggestions. Consider sending me a link to your work using this 10 | software, I'd love to see it! 11 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Webdeck Player 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 | WEBDECK PLAYER 23 |
24 | 25 |
26 |
27 |
28 |
29 |
30 |
31 | 32 |
33 |
34 |

Loading...

35 |

36 |
37 | 38 |
39 |
40 | 41 | 42 |
43 | 44 | 47 |
48 | 49 |
50 | 51 | 52 | 53 |
54 |
55 |
56 |
57 | 58 |
59 | 60 |
61 | 62 |
63 | 64 | 65 | 66 | 67 |
68 | 69 |
70 | 71 |
72 | 73 | 74 | 75 |
76 | 79 |
80 | 81 |
82 | 83 |
84 |
85 | 86 |
87 | 88 |
89 | 90 | 91 | 92 |
93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Web Deck Player v1.0 - script file 3 | * 4 | * Welcome to the script file! 5 | * 6 | * CONTENTS: 7 | * 1. Playlists Array 8 | * 2. Initial Playlist 9 | * 3. Themes 10 | * 4. Current Theme 11 | */ 12 | 13 | 14 | /** 15 | * [1. PLAYLISTS ] 16 | * Here are the Youtube Playlists that will be available to play. To add a new one, 17 | * first make sure that your playlist is set to 'Hidden' or 'Public' in Youtube. 18 | * 19 | * Then, look for the URL (for example: https://www.youtube.com/playlist?list=PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7) 20 | * and copy only the part after 'list=' (for example: PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7). 21 | * Finally, write a name for your playlist and paste the code you copied in the list below. 22 | * 23 | * You can also delete the lists that you don't want. 24 | */ 25 | var myPlaylists = { 26 | "90s HITS": 'PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7', 27 | "00s HITS": 'PL69714D95619E327E', 28 | "VAPORWAVE": 'PLSChV4T8EDb9TZsLO23Tsj6-UUyAXtGg5', 29 | //"ANOTHER PLAYLIST": 'PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7', 30 | }; 31 | 32 | 33 | /** 34 | * [2. INITIAL PLAYLIST ] 35 | * The first playlist that the player will load on startup. You may change it by 36 | * writing the name of the new playlist below. 37 | */ 38 | var currentPlaylist = "90s HITS"; 39 | 40 | 41 | /** 42 | * [3. THEMES] 43 | * Themes are a great way to customize the look of your player! Refer to the website 44 | * instructions to get new themes or to know how can you create yours. Then, you may 45 | * add them to the list below using the format ( "THEME NAME": 'theme-folder-name' ). 46 | * 47 | * You can also delete the themes that you don't want. 48 | */ 49 | var myThemes = { 50 | "DEFAULT": 'default', 51 | "SILVER": 'silver', 52 | "VIOLET": "violet", 53 | "MINIMAL": "minimal", 54 | "RED GRUNGE": "red-grunge", 55 | //"ANOTHER THEME": 'another-theme', 56 | }; 57 | 58 | 59 | /** 60 | * [4. CURRENT THEME] 61 | * Set the theme of your player writing its name below. 62 | */ 63 | var currentTheme = "DEFAULT"; 64 | 65 | 66 | // ===== END OF CONFIGURATION ===== 67 | 68 | 69 | 70 | document.getElementById("player-theme").setAttribute("href", "./themes/"+ myThemes[currentTheme] + "/webdeck-player.css"); 71 | 72 | 73 | var tag = document.createElement('script'); 74 | 75 | tag.src = "https://www.youtube.com/iframe_api"; 76 | var firstScriptTag = document.getElementsByTagName('script')[0]; 77 | firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 78 | 79 | var player; 80 | var songLabel = document.getElementById("songLabel"); 81 | var statusLabel = document.getElementById("statusLabel"); 82 | var statusLabelInterval; 83 | 84 | var savedVolume = 50; 85 | var volumeButton = document.getElementById("volumeButton"); 86 | volumeButton.innerHTML = ""; 87 | var volumeBar = document.getElementById("volumeBar"); 88 | var isSlidingVolumeBar = false; 89 | var videoButton = document.getElementById("videoButton"); 90 | var isVideoShowing = true; 91 | 92 | var logo = document.getElementById("playerLogo"); 93 | logo.innerHTML = ""; 94 | 95 | var seekBar = document.getElementById("seekBar"); 96 | var isSlidingSeekBar = false; 97 | var prevButton = document.getElementById("prevButton"); 98 | var playButton = document.getElementById("playButton"); 99 | var stopButton = document.getElementById("stopButton"); 100 | var nextButton = document.getElementById("nextButton"); 101 | var shuffleButton = document.getElementById("shuffleButton"); 102 | var shufflePlaylist = false; 103 | var infoButton = document.getElementById("infoButton"); 104 | prevButton.innerHTML = ""; 105 | playButton.innerHTML = ""; 106 | stopButton.innerHTML = ""; 107 | nextButton.innerHTML = ""; 108 | infoButton.innerHTML = ""; 109 | 110 | var playlistSelector = document.getElementById("playlistSelector"); 111 | for(var key in myPlaylists){ 112 | var option = document.createElement('option'); 113 | option.value = key; 114 | option.innerHTML = key; 115 | playlistSelector.appendChild(option); 116 | } 117 | 118 | var themeSelector = document.getElementById("themeSelector"); 119 | for(var key in myThemes){ 120 | var option = document.createElement('option'); 121 | option.value = key; 122 | option.innerHTML = key; 123 | themeSelector.appendChild(option); 124 | } 125 | themeSelector.value = currentTheme; 126 | 127 | 128 | 129 | 130 | function onYouTubeIframeAPIReady() { 131 | player = new YT.Player('youtube-player', { 132 | height: '100%', 133 | width: '100%', 134 | playerVars: { 135 | 'controls': 0, 136 | 'autoplay': 0, 137 | 'playsinline': 1, 138 | 'loop': 1 139 | }, 140 | events: { 141 | 'onReady': onPlayerReady, 142 | 'onStateChange': onPlayerStateChange 143 | } 144 | }); 145 | } 146 | 147 | function updateSongLabel() { 148 | if(player.getVideoData() && player.getVideoData().title != undefined){ 149 | if(player.getVideoData().title == ""){ 150 | songLabel.innerHTML = "READY"; 151 | } 152 | else{ 153 | songLabel.innerHTML = "" + player.getVideoData().title + " - " + player.getVideoData().author + ""; 154 | } 155 | }else{ 156 | songLabel.innerHTML = "Loading..."; 157 | } 158 | } 159 | 160 | function updateStatusLabel() { 161 | let statusLabelText = ""; 162 | let listText = " " + (player.getPlaylistIndex() + 1) + "/" + player.getPlaylist().length; 163 | let timeText = "0:00/0:00"; 164 | 165 | seekBar.setAttribute("max", player.getDuration()); 166 | if(!isSlidingSeekBar){ 167 | seekBar.value = player.getCurrentTime(); 168 | } 169 | if(!isSlidingVolumeBar){ 170 | volumeBar.value = player.getVolume(); 171 | } 172 | 173 | 174 | switch (player.getPlayerState()) { 175 | case -1: 176 | statusLabelText = "Stopped"; 177 | break; 178 | case 0: 179 | statusLabelText = "Ended"; 180 | break; 181 | case 1: 182 | statusLabelText = "Playing"; 183 | break; 184 | case 2: 185 | statusLabelText = "Paused"; 186 | break; 187 | case 3: 188 | statusLabelText = "Loading... "; 189 | break; 190 | case 5: 191 | statusLabelText = "Video Cued"; 192 | break; 193 | } 194 | timeText = formatTime(player.getCurrentTime()) + "/" + formatTime(player.getDuration()); 195 | statusLabel.innerHTML = statusLabelText + listText + " " + timeText; 196 | 197 | if(player.getPlayerState() == 2 /* Paused */){ 198 | statusLabel.setAttribute('class', 'blink'); 199 | } 200 | else{ 201 | statusLabel.removeAttribute('class'); 202 | } 203 | } 204 | 205 | function formatTime(input) { 206 | var minutes = Math.trunc(input / 60); 207 | var seconds = Math.trunc(input - minutes * 60); 208 | if(seconds < 10) { 209 | return minutes + ":0" + seconds; 210 | } 211 | else { 212 | return minutes + ":" + seconds; 213 | } 214 | } 215 | 216 | 217 | 218 | 219 | volumeButton.addEventListener("click", function(){ 220 | if(volumeBar.value != 0){ 221 | savedVolume = volumeBar.value; 222 | player.setVolume(0); 223 | volumeBar.value = 0; 224 | volumeButton.innerHTML = ""; 225 | } 226 | else{ 227 | player.setVolume(savedVolume); 228 | volumeBar.value = savedVolume; 229 | volumeButton.innerHTML = ""; 230 | } 231 | 232 | }); 233 | 234 | volumeBar.addEventListener("input", function(){ 235 | isSlidingVolumeBar = true; 236 | player.setVolume(this.value); 237 | if(volumeBar.value == 0){ 238 | volumeButton.innerHTML = ""; 239 | } 240 | else{ 241 | volumeButton.innerHTML = ""; 242 | } 243 | }); 244 | volumeBar.addEventListener("mouseup", function(){ 245 | isSlidingVolumeBar = false; 246 | }); 247 | 248 | videoButton.addEventListener("click", function(){ 249 | if(isVideoShowing){ 250 | document.getElementById("youtube-player").hidden = true; 251 | isVideoShowing = false; 252 | videoButton.setAttribute('state', 'off'); 253 | } 254 | else{ 255 | document.getElementById("youtube-player").hidden = false; 256 | isVideoShowing = true; 257 | videoButton.setAttribute('state', 'on'); 258 | } 259 | }); 260 | 261 | 262 | 263 | 264 | seekBar.addEventListener("input", function(){ 265 | isSlidingSeekBar = true; 266 | player.seekTo(this.value); 267 | }); 268 | seekBar.addEventListener("mouseup", function(){ 269 | isSlidingSeekBar = false; 270 | }); 271 | 272 | 273 | playButton.addEventListener("click", function() { 274 | if(player.getPlayerState() == 1) { 275 | player.pauseVideo(); 276 | } 277 | else { 278 | player.playVideo(); 279 | } 280 | }); 281 | 282 | stopButton.addEventListener("click", function() { 283 | if(player.getPlayerState() == 1 || player.getPlayerState() == 2) { 284 | player.stopVideo(); 285 | } 286 | }); 287 | 288 | nextButton.addEventListener("click", function() { 289 | player.nextVideo(); 290 | }); 291 | 292 | prevButton.addEventListener("click", function() { 293 | player.previousVideo(); 294 | }); 295 | 296 | shuffleButton.addEventListener("click", function() { 297 | if(shufflePlaylist == false){ 298 | shufflePlaylist = true; 299 | shuffleButton.setAttribute('state', 'on'); 300 | } 301 | else{ 302 | shufflePlaylist = false; 303 | shuffleButton.setAttribute('state', 'off'); 304 | } 305 | player.setShuffle(shufflePlaylist); 306 | }); 307 | 308 | infoButton.addEventListener("click", function() { 309 | alert("Webdeck Player - created by Chris\ngithub.com/cristiancfm/webdeck-player\n(c) MIT License"); 310 | }); 311 | 312 | playlistSelector.addEventListener("change", function() { 313 | currentPlaylist = playlistSelector.value; 314 | player.stopVideo(); 315 | player.loadPlaylist({ list: myPlaylists[currentPlaylist] }); 316 | }); 317 | 318 | themeSelector.addEventListener("change", function() { 319 | currentTheme = themeSelector.value; 320 | document.getElementById("player-theme").setAttribute("href", "./themes/"+ myThemes[currentTheme] + "/webdeck-player.css"); 321 | 322 | volumeButton.innerHTML = ""; 323 | prevButton.innerHTML = ""; 324 | playButton.innerHTML = ""; 325 | stopButton.innerHTML = ""; 326 | nextButton.innerHTML = ""; 327 | infoButton.innerHTML = ""; 328 | }); 329 | 330 | 331 | 332 | 333 | 334 | function onPlayerReady(event) { 335 | player.loadPlaylist({ list: myPlaylists[currentPlaylist] }); 336 | player.setVolume(50); 337 | player.setLoop(true); 338 | } 339 | 340 | function onPlayerStateChange(event) { 341 | //Change play/pause button icons 342 | if(player.getPlayerState() == 1 /* Playing */) { 343 | playButton.innerHTML = ""; 344 | } 345 | else { 346 | playButton.innerHTML = ""; 347 | } 348 | 349 | 350 | //Load next video 351 | if (event.data == YT.PlayerState.ENDED) { 352 | player.nextVideo(); 353 | } 354 | updateSongLabel(); 355 | clearInterval(statusLabelInterval); 356 | statusLabelInterval = setInterval(updateStatusLabel, 100); 357 | } -------------------------------------------------------------------------------- /themes/default/about.txt: -------------------------------------------------------------------------------- 1 | DEFAULT THEME - FOR WEBDECK PLAYER 2 | Created by Chris -------------------------------------------------------------------------------- /themes/default/fonts/licenses/slkscr.txt: -------------------------------------------------------------------------------- 1 | Thank you for downloading Silkscreen, a type family for your Web graphics 2 | by Jason Kottke (jason@kottke.org). 3 | 4 | To install the Silkscreen type family, unzip this file and drag the files 5 | into the Fonts folder in the Control Panel. 6 | 7 | If you encounter any problems in using this font, please email me and I'll 8 | see if I can try and fix it. Please note that I can't help you with any 9 | installation issues. Please consult your system's help files for assistance. 10 | 11 | This font is free for personal and corporate use and may be redistributed in 12 | this unmodified form on your Web site. I would ask that you not modify and 13 | then redistribute this font...although you may modify it for your own 14 | personal use. If you really like this font and use it often, feel free to 15 | mail me (e- or snail mail) some small token of your appreciation. A URL 16 | of your work using Silkscreen would be appreciated as well. 17 | 18 | All future bug fixes, updates, and additions to the Silkscreen type family 19 | will be available on my Web site at the following URL: 20 | 21 | http://www.kottke.org/plus/type/silkscreen/index.html 22 | 23 | Again, thanks for downloading Silkscreen. Enjoy! 24 | 25 | -jason -------------------------------------------------------------------------------- /themes/default/fonts/slkscr.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/fonts/slkscr.ttf -------------------------------------------------------------------------------- /themes/default/images/green-light-off.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/green-light-off.gif -------------------------------------------------------------------------------- /themes/default/images/green-light-on.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/green-light-on.gif -------------------------------------------------------------------------------- /themes/default/images/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/info.png -------------------------------------------------------------------------------- /themes/default/images/mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/mute.png -------------------------------------------------------------------------------- /themes/default/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/next.png -------------------------------------------------------------------------------- /themes/default/images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/pause.png -------------------------------------------------------------------------------- /themes/default/images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/play.png -------------------------------------------------------------------------------- /themes/default/images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/prev.png -------------------------------------------------------------------------------- /themes/default/images/slider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/slider.gif -------------------------------------------------------------------------------- /themes/default/images/sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/sound.png -------------------------------------------------------------------------------- /themes/default/images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/images/stop.png -------------------------------------------------------------------------------- /themes/default/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/default/logo.png -------------------------------------------------------------------------------- /themes/default/webdeck-player.css: -------------------------------------------------------------------------------- 1 | /* Font import */ 2 | @font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body{ 10 | width: 600px; 11 | height: 250px; 12 | font-family: Silkscreen, monospace; 13 | color: white; 14 | background: linear-gradient(to right, #212133 0%, #343353 50%, #212133 100%); 15 | } 16 | 17 | select{ 18 | margin-right: 1px; 19 | } 20 | 21 | button{ 22 | padding: 2px; 23 | margin-right: 1px; 24 | font-family: Silkscreen, monospace; 25 | 26 | background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); 27 | border: outset 2px #ECE0B8; 28 | border-radius: 2px; 29 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 30 | } 31 | 32 | button:active{ 33 | background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); 34 | border: inset 2px #ECE0B8; 35 | border-radius: 2px; 36 | box-shadow: none; 37 | } 38 | 39 | .toggle-button[state='off'] > p::before{ 40 | content: url(./images/green-light-off.gif); 41 | margin-right: 3px; 42 | } 43 | 44 | .toggle-button[state='on'] > p::before{ 45 | content: url(./images/green-light-on.gif); 46 | margin-right: 3px; 47 | } 48 | 49 | 50 | select{ 51 | font-family: Silkscreen, monospace; 52 | 53 | background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); 54 | border: outset 2px #ECE0B8; 55 | border-radius: 2px; 56 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 57 | } 58 | 59 | select:active{ 60 | background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); 61 | border: inset 2px #ECE0B8; 62 | border-radius: 2px; 63 | box-shadow: none; 64 | } 65 | 66 | 67 | 68 | 69 | /* Blink class */ 70 | .blink { 71 | animation: blinker 2s step-start infinite; 72 | } 73 | 74 | @keyframes blinker { 75 | 50% { 76 | opacity: 0; 77 | } 78 | } 79 | 80 | 81 | /* Columns section */ 82 | .columns{ 83 | display: flex; 84 | } 85 | 86 | .columns > div:first-child{ 87 | flex-shrink: 0; 88 | margin-right: 5px; 89 | } 90 | 91 | .columns > div:last-child{ 92 | flex-grow: 1; 93 | } 94 | 95 | 96 | 97 | /* -- Sliders -- */ 98 | input[type="range"] { 99 | appearance: none; 100 | background: none; 101 | border: inset 2px #403f67; 102 | } 103 | 104 | /* slider track */ 105 | input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { 106 | background-color: #201e3a; 107 | height: 100%; 108 | } 109 | 110 | input[type="range"]::-moz-range-track /* For Firefox */ { 111 | background-color: #201e3a; 112 | height: 100%; 113 | } 114 | 115 | /* slider thumb */ 116 | input[type="range"]::-webkit-slider-thumb /* For Chrome */ { 117 | appearance: none; 118 | 119 | background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); 120 | background-repeat: no-repeat; 121 | background-position: center; 122 | background-size: contain; 123 | border: outset 2px #ECE0B8; 124 | 125 | border-radius: 2px; 126 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 127 | 128 | height: 1rem; 129 | width: 2.5rem; 130 | } 131 | 132 | input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { 133 | background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); 134 | background-repeat: no-repeat; 135 | background-position: center; 136 | background-size: contain; 137 | border: inset 2px #ECE0B8; 138 | border-radius: 2px; 139 | box-shadow: none; 140 | } 141 | 142 | 143 | 144 | input[type="range"]::-moz-range-thumb /* For Firefox */ { 145 | background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); 146 | background-repeat: no-repeat; 147 | background-position: center; 148 | background-size: contain; 149 | border: outset 2px #ECE0B8; 150 | 151 | border-radius: 2px; 152 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 153 | 154 | height: 1rem; 155 | width: 2.5rem; 156 | } 157 | 158 | input[type="range"]::-moz-range-thumb:active /* For Firefox */ { 159 | background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); 160 | background-repeat: no-repeat; 161 | background-position: center; 162 | background-size: contain; 163 | border: inset 2px #ECE0B8; 164 | border-radius: 2px; 165 | box-shadow: none; 166 | } 167 | 168 | 169 | 170 | /* ---- Web Deck Player ---- */ 171 | #web-deck-player{ 172 | padding: 0 5px; 173 | } 174 | 175 | 176 | /* Player title bar */ 177 | #player-title-bar{ 178 | display: flex; 179 | } 180 | 181 | #player-title-bar:before, 182 | #player-title-bar:after{ 183 | content: ""; 184 | flex: 1; 185 | margin: auto 1em; 186 | height: 2px; 187 | border-top: ridge #ECE0B8 2px; 188 | border-bottom: ridge #ECE0B8 2px; 189 | } 190 | 191 | /* Player body */ 192 | #player-body{ 193 | padding: 5px; 194 | border: groove 3px #403f67; 195 | } 196 | 197 | /* Player main section */ 198 | #player-main-section{ 199 | margin-bottom: 5px; 200 | } 201 | 202 | 203 | /* Player display */ 204 | #player-display{ 205 | width: 250px; 206 | height: 140px; 207 | background: black; 208 | border: inset 2px #403f67; 209 | } 210 | 211 | 212 | /* Player info */ 213 | #info-screen{ 214 | background: black; 215 | color: limegreen; 216 | border: inset 2px #403f67; 217 | margin-bottom: 5px; 218 | } 219 | 220 | #songLabel{ 221 | text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); 222 | } 223 | 224 | #statusLabel{ 225 | text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); 226 | } 227 | 228 | .player-row{ 229 | margin-top: 5px; 230 | display: flex; 231 | flex-wrap: nowrap; 232 | justify-content: space-between; 233 | } 234 | 235 | #volumeButton{ 236 | height: 25px; 237 | width: 25px; 238 | } 239 | 240 | #volumeButton img{ 241 | height: 100%; 242 | } 243 | 244 | #volumeBar{ 245 | width: 120px; 246 | } 247 | 248 | #themeSelector{ 249 | height: 25px; 250 | max-width: 150px; 251 | text-overflow: ellipsis; 252 | } 253 | 254 | #videoButton{ 255 | height: 25px; 256 | } 257 | 258 | #playerLogo{ 259 | text-align: center; 260 | height: fit-content; 261 | } 262 | 263 | #playerLogo > img{ 264 | margin-top: 5px; 265 | max-height: 50px; 266 | } 267 | 268 | /* Player control panel */ 269 | #player-control-panel{ 270 | font-size: 0; 271 | } 272 | 273 | #seekBar{ 274 | width: 99%; 275 | margin-bottom: 5px; 276 | } 277 | 278 | .playing-controls{ 279 | margin-bottom: 5px; 280 | margin-right: 5px; 281 | display: inline-block; 282 | width: fit-content; 283 | background: #201e3a; 284 | border: inset 2px #403f67; 285 | vertical-align: middle; 286 | } 287 | 288 | .playing-controls[rounded]{ 289 | border-radius: 20px; 290 | } 291 | 292 | .playing-controls[float-right]{ 293 | float: right; 294 | } 295 | 296 | .playing-controls button{ 297 | height: 30px; 298 | min-width: 50px; 299 | } 300 | 301 | .playing-controls button img{ 302 | height: 100%; 303 | } 304 | 305 | 306 | #infoButton{ 307 | border-radius: 20px; 308 | height: 30px; 309 | min-width: 30px; 310 | font-size: large; 311 | } 312 | 313 | #playlistSelector{ 314 | height: 30px; 315 | max-width: 175px; 316 | text-overflow: ellipsis; 317 | } -------------------------------------------------------------------------------- /themes/minimal/about.txt: -------------------------------------------------------------------------------- 1 | MINIMAL THEME - FOR WEBDECK PLAYER 2 | Created by Chris -------------------------------------------------------------------------------- /themes/minimal/fonts/licenses/slkscr.txt: -------------------------------------------------------------------------------- 1 | Thank you for downloading Silkscreen, a type family for your Web graphics 2 | by Jason Kottke (jason@kottke.org). 3 | 4 | To install the Silkscreen type family, unzip this file and drag the files 5 | into the Fonts folder in the Control Panel. 6 | 7 | If you encounter any problems in using this font, please email me and I'll 8 | see if I can try and fix it. Please note that I can't help you with any 9 | installation issues. Please consult your system's help files for assistance. 10 | 11 | This font is free for personal and corporate use and may be redistributed in 12 | this unmodified form on your Web site. I would ask that you not modify and 13 | then redistribute this font...although you may modify it for your own 14 | personal use. If you really like this font and use it often, feel free to 15 | mail me (e- or snail mail) some small token of your appreciation. A URL 16 | of your work using Silkscreen would be appreciated as well. 17 | 18 | All future bug fixes, updates, and additions to the Silkscreen type family 19 | will be available on my Web site at the following URL: 20 | 21 | http://www.kottke.org/plus/type/silkscreen/index.html 22 | 23 | Again, thanks for downloading Silkscreen. Enjoy! 24 | 25 | -jason -------------------------------------------------------------------------------- /themes/minimal/fonts/slkscr.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/fonts/slkscr.ttf -------------------------------------------------------------------------------- /themes/minimal/images/green-light-off.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/green-light-off.gif -------------------------------------------------------------------------------- /themes/minimal/images/green-light-on.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/green-light-on.gif -------------------------------------------------------------------------------- /themes/minimal/images/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/info.png -------------------------------------------------------------------------------- /themes/minimal/images/mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/mute.png -------------------------------------------------------------------------------- /themes/minimal/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/next.png -------------------------------------------------------------------------------- /themes/minimal/images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/pause.png -------------------------------------------------------------------------------- /themes/minimal/images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/play.png -------------------------------------------------------------------------------- /themes/minimal/images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/prev.png -------------------------------------------------------------------------------- /themes/minimal/images/slider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/slider.gif -------------------------------------------------------------------------------- /themes/minimal/images/sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/sound.png -------------------------------------------------------------------------------- /themes/minimal/images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/images/stop.png -------------------------------------------------------------------------------- /themes/minimal/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/minimal/logo.png -------------------------------------------------------------------------------- /themes/minimal/webdeck-player.css: -------------------------------------------------------------------------------- 1 | /* Font import */ 2 | @font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body{ 10 | width: 600px; 11 | height: 250px; 12 | font-family: Silkscreen, monospace; 13 | color: black; 14 | background: linear-gradient(180deg, rgb(92, 92, 92) 0%, rgb(49, 49, 49) 10%, rgba(30,30,30,1) 90%); 15 | } 16 | 17 | select{ 18 | margin-right: 1px; 19 | } 20 | 21 | button{ 22 | padding: 2px; 23 | margin-right: 1px; 24 | font-family: Silkscreen, monospace; 25 | 26 | background: linear-gradient(to bottom, #ededed 0%, #c7c7c7 100%); 27 | border: outset 2px #eeeeee; 28 | border-radius: 2px; 29 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 30 | } 31 | 32 | button:active{ 33 | background: linear-gradient(to top, #ededed 0%, #c7c7c7 100%); 34 | border: outset 2px #eeeeee; 35 | border-radius: 2px; 36 | box-shadow: none; 37 | } 38 | 39 | .toggle-button[state='off'] > p::before{ 40 | content: url(./images/green-light-off.gif); 41 | margin-right: 3px; 42 | } 43 | 44 | .toggle-button[state='on'] > p::before{ 45 | content: url(./images/green-light-on.gif); 46 | margin-right: 3px; 47 | } 48 | 49 | 50 | select{ 51 | font-family: Silkscreen, monospace; 52 | 53 | background: linear-gradient(to bottom, #ededed 0%, #c7c7c7 100%); 54 | border: outset 2px #eeeeee; 55 | border-radius: 2px; 56 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 57 | } 58 | 59 | select:active{ 60 | background: linear-gradient(to top, #ededed 0%, #c7c7c7 100%); 61 | border: outset 2px #eeeeee; 62 | border-radius: 2px; 63 | box-shadow: none; 64 | } 65 | 66 | 67 | 68 | 69 | /* Blink class */ 70 | .blink { 71 | animation: blinker 2s step-start infinite; 72 | } 73 | 74 | @keyframes blinker { 75 | 50% { 76 | opacity: 0; 77 | } 78 | } 79 | 80 | 81 | /* Columns section */ 82 | .columns{ 83 | display: flex; 84 | } 85 | 86 | .columns > div:first-child{ 87 | flex-shrink: 0; 88 | margin-right: 5px; 89 | } 90 | 91 | .columns > div:last-child{ 92 | flex-grow: 1; 93 | } 94 | 95 | 96 | 97 | /* -- Sliders -- */ 98 | input[type="range"] { 99 | appearance: none; 100 | background: none; 101 | border: inset 2px silver; 102 | } 103 | 104 | /* slider track */ 105 | input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { 106 | background-color: rgb(30, 30, 30); 107 | height: 100%; 108 | } 109 | 110 | input[type="range"]::-moz-range-track /* For Firefox */ { 111 | background-color: rgb(30, 30, 30); 112 | height: 100%; 113 | } 114 | 115 | /* slider thumb */ 116 | input[type="range"]::-webkit-slider-thumb /* For Chrome */ { 117 | appearance: none; 118 | 119 | background: url(./images/slider.gif), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%); 120 | background-repeat: no-repeat; 121 | background-position: center; 122 | background-size: contain; 123 | border: outset 2px #eaeaea; 124 | 125 | border-radius: 2px; 126 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 127 | 128 | height: 1rem; 129 | width: 2.5rem; 130 | } 131 | 132 | input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { 133 | background: url(./images/slider.gif), linear-gradient(to top, #f0f0f0 0%, #cccccc 100%); 134 | background-repeat: no-repeat; 135 | background-position: center; 136 | background-size: contain; 137 | border: inset 2px #eaeaea; 138 | border-radius: 2px; 139 | box-shadow: none; 140 | } 141 | 142 | 143 | 144 | input[type="range"]::-moz-range-thumb /* For Firefox */ { 145 | background: url(./images/slider.gif), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%); 146 | background-repeat: no-repeat; 147 | background-position: center; 148 | background-size: contain; 149 | border: outset 2px #eaeaea; 150 | 151 | border-radius: 2px; 152 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 153 | 154 | height: 1rem; 155 | width: 2.5rem; 156 | } 157 | 158 | input[type="range"]::-moz-range-thumb:active /* For Firefox */ { 159 | background: url(./images/slider.gif), linear-gradient(to top, #f0f0f0 0%, #cccccc 100%); 160 | background-repeat: no-repeat; 161 | background-position: center; 162 | background-size: contain; 163 | border: inset 2px #eaeaea; 164 | border-radius: 2px; 165 | box-shadow: none; 166 | } 167 | 168 | 169 | 170 | /* ---- Web Deck Player ---- */ 171 | #web-deck-player{ 172 | padding: 0 5px; 173 | } 174 | 175 | 176 | /* Player title bar */ 177 | #player-title-bar{ 178 | display: flex; 179 | color: white; 180 | } 181 | 182 | #player-title-bar:before, 183 | #player-title-bar:after{ 184 | content: ""; 185 | flex: 1; 186 | margin: auto 1em; 187 | height: 2px; 188 | } 189 | 190 | /* Player body */ 191 | #player-body{ 192 | background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(232,232,232,1) 30%, rgba(214,214,214,1) 100%); 193 | padding: 5px; 194 | border: groove 3px gray; 195 | } 196 | 197 | /* Player main section */ 198 | #player-main-section{ 199 | margin-bottom: 5px; 200 | } 201 | 202 | 203 | /* Player display */ 204 | #player-display{ 205 | width: 250px; 206 | height: 140px; 207 | background: black; 208 | border: inset 2px #403f67; 209 | } 210 | 211 | 212 | /* Player info */ 213 | #info-screen{ 214 | background: black; 215 | color: limegreen; 216 | border: inset 2px #403f67; 217 | margin-bottom: 5px; 218 | } 219 | 220 | #songLabel{ 221 | text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); 222 | } 223 | 224 | #statusLabel{ 225 | text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); 226 | } 227 | 228 | .player-row{ 229 | margin-top: 5px; 230 | display: flex; 231 | flex-wrap: nowrap; 232 | justify-content: space-between; 233 | } 234 | 235 | #volumeButton{ 236 | height: 25px; 237 | width: 25px; 238 | } 239 | 240 | #volumeButton img{ 241 | height: 100%; 242 | } 243 | 244 | #volumeBar{ 245 | width: 120px; 246 | } 247 | 248 | #themeSelector{ 249 | height: 25px; 250 | max-width: 150px; 251 | text-overflow: ellipsis; 252 | } 253 | 254 | #videoButton{ 255 | height: 25px; 256 | } 257 | 258 | #playerLogo{ 259 | text-align: center; 260 | height: fit-content; 261 | } 262 | 263 | #playerLogo > img{ 264 | margin-top: 5px; 265 | max-height: 50px; 266 | } 267 | 268 | /* Player control panel */ 269 | #player-control-panel{ 270 | font-size: 0; 271 | } 272 | 273 | #seekBar{ 274 | width: 99%; 275 | margin-bottom: 5px; 276 | } 277 | 278 | .playing-controls{ 279 | margin-bottom: 5px; 280 | margin-right: 5px; 281 | display: inline-block; 282 | width: fit-content; 283 | background: dimgray; 284 | border: inset 2px silver; 285 | vertical-align: middle; 286 | } 287 | 288 | .playing-controls[rounded]{ 289 | border-radius: 20px; 290 | } 291 | 292 | .playing-controls[float-right]{ 293 | float: right; 294 | } 295 | 296 | .playing-controls button{ 297 | height: 30px; 298 | min-width: 50px; 299 | } 300 | 301 | .playing-controls button img{ 302 | height: 100%; 303 | } 304 | 305 | 306 | #infoButton{ 307 | border-radius: 20px; 308 | height: 30px; 309 | min-width: 30px; 310 | font-size: large; 311 | } 312 | 313 | #playlistSelector{ 314 | height: 30px; 315 | max-width: 175px; 316 | text-overflow: ellipsis; 317 | } -------------------------------------------------------------------------------- /themes/red-grunge/about.txt: -------------------------------------------------------------------------------- 1 | RED GRUNGE THEME - FOR WEBDECK PLAYER 2 | Created by Chris -------------------------------------------------------------------------------- /themes/red-grunge/fonts/licenses/slkscr.txt: -------------------------------------------------------------------------------- 1 | Thank you for downloading Silkscreen, a type family for your Web graphics 2 | by Jason Kottke (jason@kottke.org). 3 | 4 | To install the Silkscreen type family, unzip this file and drag the files 5 | into the Fonts folder in the Control Panel. 6 | 7 | If you encounter any problems in using this font, please email me and I'll 8 | see if I can try and fix it. Please note that I can't help you with any 9 | installation issues. Please consult your system's help files for assistance. 10 | 11 | This font is free for personal and corporate use and may be redistributed in 12 | this unmodified form on your Web site. I would ask that you not modify and 13 | then redistribute this font...although you may modify it for your own 14 | personal use. If you really like this font and use it often, feel free to 15 | mail me (e- or snail mail) some small token of your appreciation. A URL 16 | of your work using Silkscreen would be appreciated as well. 17 | 18 | All future bug fixes, updates, and additions to the Silkscreen type family 19 | will be available on my Web site at the following URL: 20 | 21 | http://www.kottke.org/plus/type/silkscreen/index.html 22 | 23 | Again, thanks for downloading Silkscreen. Enjoy! 24 | 25 | -jason -------------------------------------------------------------------------------- /themes/red-grunge/fonts/slkscr.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/fonts/slkscr.ttf -------------------------------------------------------------------------------- /themes/red-grunge/images/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/background.jpg -------------------------------------------------------------------------------- /themes/red-grunge/images/green-light-off.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/green-light-off.gif -------------------------------------------------------------------------------- /themes/red-grunge/images/green-light-on.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/green-light-on.gif -------------------------------------------------------------------------------- /themes/red-grunge/images/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/info.png -------------------------------------------------------------------------------- /themes/red-grunge/images/mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/mute.png -------------------------------------------------------------------------------- /themes/red-grunge/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/next.png -------------------------------------------------------------------------------- /themes/red-grunge/images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/pause.png -------------------------------------------------------------------------------- /themes/red-grunge/images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/play.png -------------------------------------------------------------------------------- /themes/red-grunge/images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/prev.png -------------------------------------------------------------------------------- /themes/red-grunge/images/slider.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/slider.gif -------------------------------------------------------------------------------- /themes/red-grunge/images/sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/sound.png -------------------------------------------------------------------------------- /themes/red-grunge/images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/images/stop.png -------------------------------------------------------------------------------- /themes/red-grunge/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/red-grunge/logo.png -------------------------------------------------------------------------------- /themes/red-grunge/webdeck-player.css: -------------------------------------------------------------------------------- 1 | /* Font import */ 2 | @font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body{ 10 | width: 600px; 11 | height: 250px; 12 | font-family: Georgia, 'Times New Roman', Times, serif; 13 | color: black; 14 | background: black; 15 | } 16 | 17 | select{ 18 | margin-right: 1px; 19 | } 20 | 21 | button{ 22 | padding: 2px; 23 | margin-right: 1px; 24 | font-family: Georgia, 'Times New Roman', Times, serif; 25 | text-transform: lowercase; 26 | font-weight: bold; 27 | color: white; 28 | 29 | background: #202020; 30 | border: outset 2px #a42c2c; 31 | border-radius: 2px; 32 | } 33 | 34 | button:active{ 35 | background: #000000; 36 | border: outset 2px #6e1c1c; 37 | border-radius: 2px; 38 | box-shadow: none; 39 | } 40 | 41 | .toggle-button[state='off'] > p::before{ 42 | content: url(./images/green-light-off.gif); 43 | margin-right: 3px; 44 | } 45 | 46 | .toggle-button[state='on'] > p::before{ 47 | content: url(./images/green-light-on.gif); 48 | margin-right: 3px; 49 | } 50 | 51 | 52 | select{ 53 | font-family: Georgia, 'Times New Roman', Times, serif; 54 | text-transform: lowercase; 55 | font-weight: bold; 56 | color: white; 57 | padding: 0 2px; 58 | 59 | background: #202020; 60 | border: outset 2px #a42c2c; 61 | border-radius: 2px; 62 | } 63 | 64 | select option{ 65 | background: black; 66 | } 67 | 68 | select:active{ 69 | background: #000000; 70 | border: outset 2px #6e1c1c; 71 | border-radius: 2px; 72 | box-shadow: none; 73 | } 74 | 75 | 76 | 77 | 78 | /* Blink class */ 79 | .blink { 80 | animation: blinker 2s step-start infinite; 81 | } 82 | 83 | @keyframes blinker { 84 | 50% { 85 | opacity: 0; 86 | } 87 | } 88 | 89 | 90 | /* Columns section */ 91 | .columns{ 92 | display: flex; 93 | } 94 | 95 | .columns > div:first-child{ 96 | flex-shrink: 0; 97 | margin-right: 5px; 98 | } 99 | 100 | .columns > div:last-child{ 101 | flex-grow: 1; 102 | } 103 | 104 | 105 | 106 | /* -- Sliders -- */ 107 | input[type="range"] { 108 | appearance: none; 109 | background: none; 110 | border: inset 2px #2c2c2c; 111 | 112 | height: 5px; 113 | margin-top: 7px; 114 | margin-bottom: 7px; 115 | } 116 | 117 | /* slider track */ 118 | input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { 119 | background-color: rgb(30, 30, 30); 120 | height: 100%; 121 | } 122 | 123 | input[type="range"]::-moz-range-track /* For Firefox */ { 124 | background-color: rgb(30, 30, 30); 125 | height: 100%; 126 | } 127 | 128 | /* slider thumb */ 129 | input[type="range"]::-webkit-slider-thumb /* For Chrome */ { 130 | appearance: none; 131 | 132 | background: url(./images/slider.gif), linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);; 133 | background-repeat: no-repeat; 134 | background-position: center; 135 | background-size: contain; 136 | border: outset 2px #2c2c2c; 137 | 138 | border-radius: 2px; 139 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 140 | 141 | height: 20pt; 142 | width: 12pt; 143 | position: relative; 144 | top: -10px; 145 | } 146 | 147 | input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { 148 | background: url(./images/slider.gif), linear-gradient(to top, #4c4c4c 0%, #2c2c2c 100%);; 149 | background-repeat: no-repeat; 150 | background-position: center; 151 | background-size: contain; 152 | border: inset 2px #2c2c2c; 153 | border-radius: 2px; 154 | box-shadow: none; 155 | } 156 | 157 | 158 | 159 | input[type="range"]::-moz-range-thumb /* For Firefox */ { 160 | background: url(./images/slider.gif), linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);; 161 | background-repeat: no-repeat; 162 | background-position: center; 163 | background-size: contain; 164 | border: outset 2px #2c2c2c; 165 | 166 | border-radius: 2px; 167 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 168 | 169 | height: 1.5rem; 170 | width: 0.8rem; 171 | } 172 | 173 | input[type="range"]::-moz-range-thumb:active /* For Firefox */ { 174 | background: url(./images/slider.gif), linear-gradient(to top, #4c4c4c 0%, #2c2c2c 100%);; 175 | background-repeat: no-repeat; 176 | background-position: center; 177 | background-size: contain; 178 | border: inset 2px #2c2c2c; 179 | border-radius: 2px; 180 | box-shadow: none; 181 | } 182 | 183 | 184 | 185 | /* ---- Web Deck Player ---- */ 186 | #web-deck-player{ 187 | padding: 0 5px; 188 | } 189 | 190 | 191 | /* Player title bar */ 192 | #player-title-bar{ 193 | display: flex; 194 | margin-bottom: 2px; 195 | color: #a42c2c; 196 | text-transform: lowercase; 197 | font-weight: bold; 198 | } 199 | 200 | #player-title-bar:before, 201 | #player-title-bar:after{ 202 | content: ""; 203 | flex: 1; 204 | margin: auto 1em; 205 | height: 2px; 206 | border-top: ridge #a42c2c 2px; 207 | border-bottom: ridge #a42c2c 2px; 208 | } 209 | 210 | /* Player body */ 211 | #player-body{ 212 | padding: 5px; 213 | border: groove 2px #282828; 214 | background: url(./images/background.jpg); 215 | background-repeat: no-repeat; 216 | background-size: cover; 217 | background-position: center; 218 | } 219 | 220 | /* Player main section */ 221 | #player-main-section{ 222 | margin-bottom: 5px; 223 | } 224 | 225 | 226 | /* Player display */ 227 | #player-display{ 228 | width: 250px; 229 | height: 140px; 230 | background: black; 231 | border: inset 2px #282828; 232 | } 233 | 234 | 235 | /* Player info */ 236 | #info-screen{ 237 | background: black; 238 | font-family: Silkscreen, monospace; 239 | color: white; 240 | border: inset 2px #282828; 241 | margin-bottom: 5px; 242 | } 243 | 244 | #songLabel{ 245 | text-shadow: 0 0 10px #c84040, 0 0 20px #fc6b6b, 2px 2px 2px rgba(206,89,55,0); 246 | } 247 | 248 | #statusLabel{ 249 | text-shadow: 0 0 10px #c84040, 0 0 20px #fc6b6b, 2px 2px 2px rgba(206,89,55,0); 250 | } 251 | 252 | .player-row{ 253 | margin-top: 5px; 254 | display: flex; 255 | flex-wrap: nowrap; 256 | justify-content: space-between; 257 | } 258 | 259 | #volumeButton{ 260 | height: 25px; 261 | width: 25px; 262 | } 263 | 264 | #volumeButton img{ 265 | height: 100%; 266 | } 267 | 268 | #volumeBar{ 269 | width: 120px; 270 | } 271 | 272 | #themeSelector{ 273 | height: 25px; 274 | max-width: 150px; 275 | text-overflow: ellipsis; 276 | } 277 | 278 | #videoButton{ 279 | height: 25px; 280 | } 281 | 282 | #playerLogo{ 283 | text-align: center; 284 | height: fit-content; 285 | } 286 | 287 | #playerLogo > img{ 288 | margin-top: 5px; 289 | max-height: 50px; 290 | } 291 | 292 | /* Player control panel */ 293 | #player-control-panel{ 294 | font-size: 0; 295 | } 296 | 297 | #seekBar{ 298 | width: 99%; 299 | margin-bottom: 12px; 300 | } 301 | 302 | .playing-controls{ 303 | margin-bottom: 5px; 304 | margin-right: 5px; 305 | display: inline-block; 306 | width: fit-content; 307 | background: black; 308 | vertical-align: middle; 309 | } 310 | 311 | .playing-controls[rounded]{ 312 | border-radius: 20px; 313 | } 314 | 315 | .playing-controls[float-right]{ 316 | float: right; 317 | } 318 | 319 | .playing-controls button{ 320 | height: 30px; 321 | min-width: 50px; 322 | } 323 | 324 | .playing-controls button img{ 325 | height: 100%; 326 | } 327 | 328 | 329 | #infoButton{ 330 | border-radius: 20px; 331 | height: 30px; 332 | min-width: 30px; 333 | font-size: large; 334 | } 335 | 336 | #playlistSelector{ 337 | height: 30px; 338 | max-width: 175px; 339 | text-overflow: ellipsis; 340 | } -------------------------------------------------------------------------------- /themes/silver/about.txt: -------------------------------------------------------------------------------- 1 | SILVER THEME - FOR WEBDECK PLAYER 2 | Created by Chris -------------------------------------------------------------------------------- /themes/silver/fonts/EurostileExtendedBlack.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/fonts/EurostileExtendedBlack.ttf -------------------------------------------------------------------------------- /themes/silver/fonts/LED-Dot-Matrix.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/fonts/LED-Dot-Matrix.ttf -------------------------------------------------------------------------------- /themes/silver/fonts/licenses/slkscr.txt: -------------------------------------------------------------------------------- 1 | Thank you for downloading Silkscreen, a type family for your Web graphics 2 | by Jason Kottke (jason@kottke.org). 3 | 4 | To install the Silkscreen type family, unzip this file and drag the files 5 | into the Fonts folder in the Control Panel. 6 | 7 | If you encounter any problems in using this font, please email me and I'll 8 | see if I can try and fix it. Please note that I can't help you with any 9 | installation issues. Please consult your system's help files for assistance. 10 | 11 | This font is free for personal and corporate use and may be redistributed in 12 | this unmodified form on your Web site. I would ask that you not modify and 13 | then redistribute this font...although you may modify it for your own 14 | personal use. If you really like this font and use it often, feel free to 15 | mail me (e- or snail mail) some small token of your appreciation. A URL 16 | of your work using Silkscreen would be appreciated as well. 17 | 18 | All future bug fixes, updates, and additions to the Silkscreen type family 19 | will be available on my Web site at the following URL: 20 | 21 | http://www.kottke.org/plus/type/silkscreen/index.html 22 | 23 | Again, thanks for downloading Silkscreen. Enjoy! 24 | 25 | -jason -------------------------------------------------------------------------------- /themes/silver/fonts/slkscr.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/fonts/slkscr.ttf -------------------------------------------------------------------------------- /themes/silver/images/green-light-off.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/green-light-off.gif -------------------------------------------------------------------------------- /themes/silver/images/green-light-on.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/green-light-on.gif -------------------------------------------------------------------------------- /themes/silver/images/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/info.png -------------------------------------------------------------------------------- /themes/silver/images/mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/mute.png -------------------------------------------------------------------------------- /themes/silver/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/next.png -------------------------------------------------------------------------------- /themes/silver/images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/pause.png -------------------------------------------------------------------------------- /themes/silver/images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/play.png -------------------------------------------------------------------------------- /themes/silver/images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/prev.png -------------------------------------------------------------------------------- /themes/silver/images/sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/sound.png -------------------------------------------------------------------------------- /themes/silver/images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/images/stop.png -------------------------------------------------------------------------------- /themes/silver/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/silver/logo.png -------------------------------------------------------------------------------- /themes/silver/webdeck-player.css: -------------------------------------------------------------------------------- 1 | /* Font import */ 2 | @font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} 3 | @font-face {font-family: LED Dot-Matrix; src: url(./fonts/LED-Dot-Matrix.ttf);} 4 | @font-face { 5 | font-family: Eurostile; 6 | src: url(./fonts/EurostileExtendedBlack.ttf); 7 | font-weight: 900; 8 | } 9 | 10 | 11 | *{ 12 | margin: 0; 13 | padding: 0; 14 | } 15 | 16 | body{ 17 | width: 600px; 18 | height: 250px; 19 | font-family: Silkscreen, monospace; 20 | color: white; 21 | background: linear-gradient(180deg, rgb(239, 241, 244) 0%, rgb(234, 236, 239) 20%, rgba(189,194,200,1) 95%, rgb(219, 222, 227) 100%); 22 | } 23 | 24 | select{ 25 | margin-right: 1px; 26 | } 27 | 28 | button{ 29 | padding: 2px; 30 | margin-right: 1px; 31 | font-family: Silkscreen, monospace; 32 | 33 | background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 34 | border: groove 2px white; 35 | border-radius: 5px; 36 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 37 | } 38 | 39 | button:active{ 40 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 41 | border: groove 2px white; 42 | border-radius: 5px; 43 | box-shadow: none; 44 | } 45 | 46 | .toggle-button[state='off'] > p::before{ 47 | content: url(./images/green-light-off.gif); 48 | margin-right: 3px; 49 | } 50 | 51 | .toggle-button[state='on'] > p::before{ 52 | content: url(./images/green-light-on.gif); 53 | margin-right: 3px; 54 | } 55 | 56 | 57 | select{ 58 | font-family: Silkscreen, monospace; 59 | 60 | background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 61 | border: groove 2px white; 62 | border-radius: 5px; 63 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 64 | } 65 | 66 | select:active{ 67 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 68 | border: groove 2px white; 69 | border-radius: 5px; 70 | box-shadow: none; 71 | } 72 | 73 | 74 | 75 | 76 | /* Blink class */ 77 | .blink { 78 | animation: blinker 2s step-start infinite; 79 | } 80 | 81 | @keyframes blinker { 82 | 50% { 83 | opacity: 0; 84 | } 85 | } 86 | 87 | 88 | /* Columns section */ 89 | .columns{ 90 | display: flex; 91 | } 92 | 93 | .columns > div:first-child{ 94 | flex-shrink: 0; 95 | margin-right: 5px; 96 | } 97 | 98 | .columns > div:last-child{ 99 | flex-grow: 1; 100 | } 101 | 102 | 103 | 104 | /* -- Sliders -- */ 105 | input[type="range"] { 106 | appearance: none; 107 | background: none; 108 | border: solid 1px darkgray; 109 | border-radius: 10px; 110 | 111 | height: 5px; 112 | margin-top: 7px; 113 | margin-bottom: 7px; 114 | } 115 | 116 | /* slider track */ 117 | input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { 118 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 2%, rgba(221,221,221,1) 50%, rgb(105, 105, 105) 98%, rgba(255,255,255,1) 100%); 119 | height: 100%; 120 | border-radius: 10px; 121 | } 122 | 123 | input[type="range"]::-moz-range-track /* For Firefox */ { 124 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 2%, rgba(221,221,221,1) 50%, rgb(105, 105, 105) 98%, rgba(255,255,255,1) 100%); 125 | height: 100%; 126 | border-radius: 10px; 127 | } 128 | 129 | /* slider thumb */ 130 | input[type="range"]::-webkit-slider-thumb /* For Chrome */ { 131 | appearance: none; 132 | position: relative; 133 | top: -4px; 134 | 135 | background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 136 | border: groove 2px white; 137 | 138 | border-radius: 10px; 139 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 140 | 141 | height: 0.8rem; 142 | width: 1.8rem; 143 | } 144 | 145 | input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { 146 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 147 | border: groove 2px white; 148 | 149 | border-radius: 10px; 150 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 151 | } 152 | 153 | 154 | 155 | input[type="range"]::-moz-range-thumb /* For Firefox */ { 156 | background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 157 | border: groove 2px white; 158 | 159 | border-radius: 10px; 160 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 161 | 162 | height: 0.7rem; 163 | width: 1.8rem; 164 | } 165 | 166 | input[type="range"]::-moz-range-thumb:active /* For Firefox */ { 167 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(189,194,200,1) 95%, rgba(227,227,227,1) 100%); 168 | border: groove 2px white; 169 | 170 | border-radius: 10px; 171 | box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); 172 | } 173 | 174 | 175 | 176 | /* ---- Web Deck Player ---- */ 177 | #web-deck-player{ 178 | padding: 0 5px; 179 | } 180 | 181 | 182 | /* Player title bar */ 183 | #player-title-bar{ 184 | display: flex; 185 | color: gray; 186 | font-family: Eurostile, Arial, Helvetica, sans-serif; 187 | font-weight: bold; 188 | font-size: 10pt; 189 | padding: 2px 0; 190 | } 191 | 192 | #player-title-bar:before, 193 | #player-title-bar:after{ 194 | content: ""; 195 | flex: 1; 196 | margin: auto 1em; 197 | height: 2px; 198 | border-top: ridge silver 2px; 199 | border-bottom: ridge silver 2px; 200 | } 201 | 202 | /* Player body */ 203 | #player-body{ 204 | margin: 2px; 205 | padding: 5px; 206 | border: groove 2px silver; 207 | border-radius: 5px; 208 | } 209 | 210 | /* Player main section */ 211 | #player-main-section{ 212 | margin-bottom: 5px; 213 | } 214 | 215 | 216 | /* Player display */ 217 | #player-display{ 218 | width: 250px; 219 | height: 140px; 220 | background: black; 221 | border: solid 1px dimgray; 222 | border-radius: 5px; 223 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 224 | } 225 | 226 | 227 | /* Player info */ 228 | #info-screen{ 229 | background: radial-gradient(circle, rgb(89, 187, 248) 0%, rgb(56, 136, 248) 70%); 230 | color: #0a3765; 231 | border: solid 1px dimgray; 232 | border-radius: 5px; 233 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 234 | margin-bottom: 5px; 235 | padding: 2px; 236 | font-family: "LED Dot-Matrix", monospace; 237 | font-size: medium; 238 | } 239 | 240 | #songLabel{ 241 | background: #0a3765; 242 | border-radius: 3px; 243 | color: #3888f8; 244 | } 245 | 246 | #statusLabel{ 247 | margin: 2px 0; 248 | border-top: 1.5px dotted #0a3765; 249 | line-height: 0.9em; 250 | } 251 | 252 | .player-row{ 253 | margin-top: 5px; 254 | display: flex; 255 | flex-wrap: nowrap; 256 | justify-content: space-between; 257 | } 258 | 259 | #volumeButton{ 260 | height: 25px; 261 | width: 25px; 262 | } 263 | 264 | #volumeButton img{ 265 | height: 100%; 266 | } 267 | 268 | #volumeBar{ 269 | width: 120px; 270 | } 271 | 272 | #themeSelector{ 273 | height: 25px; 274 | max-width: 150px; 275 | text-overflow: ellipsis; 276 | } 277 | 278 | #videoButton{ 279 | height: 25px; 280 | } 281 | 282 | #playerLogo{ 283 | text-align: center; 284 | height: fit-content; 285 | } 286 | 287 | #playerLogo > img{ 288 | margin-top: 5px; 289 | max-height: 50px; 290 | } 291 | 292 | /* Player control panel */ 293 | #player-control-panel{ 294 | font-size: 0; 295 | } 296 | 297 | #seekBar{ 298 | width: 99%; 299 | margin-bottom: 12px; 300 | } 301 | 302 | .playing-controls{ 303 | margin-bottom: 5px; 304 | margin-right: 5px; 305 | display: inline-block; 306 | width: fit-content; 307 | background: none; 308 | border-radius: 20px; 309 | vertical-align: middle; 310 | } 311 | 312 | .playing-controls[rounded]{ 313 | border-radius: 20px; 314 | } 315 | 316 | .playing-controls[float-right]{ 317 | float: right; 318 | } 319 | 320 | .playing-controls button{ 321 | height: 30px; 322 | min-width: 50px; 323 | } 324 | 325 | .playing-controls button img{ 326 | height: 100%; 327 | } 328 | 329 | 330 | #infoButton{ 331 | border-radius: 20px; 332 | height: 30px; 333 | min-width: 30px; 334 | font-size: large; 335 | } 336 | 337 | #playlistSelector{ 338 | height: 30px; 339 | max-width: 175px; 340 | text-overflow: ellipsis; 341 | } -------------------------------------------------------------------------------- /themes/violet/about.txt: -------------------------------------------------------------------------------- 1 | VIOLET THEME - FOR WEBDECK PLAYER 2 | Created by Chris -------------------------------------------------------------------------------- /themes/violet/fonts/DS-DIGII.TTF: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/fonts/DS-DIGII.TTF -------------------------------------------------------------------------------- /themes/violet/fonts/EurostileExtendedBlack.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/fonts/EurostileExtendedBlack.ttf -------------------------------------------------------------------------------- /themes/violet/fonts/licenses/DIGITAL.TXT: -------------------------------------------------------------------------------- 1 | DS-Font's TrueType Fonts 2 | Font name: DS-Digital (Normal, Bold, Italic, Bold Italic), Version 1.0 3 | Author: Dusit Supasawat 4 | Web Site: http://ds-font.hypermart.net 5 | Contact me: Dusit Supasawat, 325/38 Suksawat32 Ratburana Bangkok Thailand 10140 6 | Email address: dusit@mailcity.com 7 | 8 | Thanks for trying! We hope you really enjoy this my typeface. This font is 9 | distributed as shareware. You can use this font for a long time as you want. 10 | After all, when you think this font can be usefulness for you. You can send 11 | me some money, that would be way cool. 12 | 13 | I'm only asking $20 US shareware fee per this typeface for personal use. 14 | And $45 US is the usual amount per this typeface for commercial use. 15 | 16 | Distribution: You are free to distribute this archive so long as this text 17 | file is distributed with the archive, the font file have not been modified, 18 | and it is understood that the font's copyright remains with the original 19 | author (Dusit Supasawat). 20 | 21 | To register send your payment to: 22 | 23 | Dusit Supasawat 24 | 325/38 Suksawat32 Ratburana 25 | Bangkok Thailand 10140 26 | 27 | And fill out something as this order form, and send it in with your payment. 28 | 29 | Font name:_________________________________________ 30 | Your information 31 | Name:______________________________________________ 32 | Address:___________________________________________ 33 | City, State : _____________________________________ 34 | Zip Code:__________________________________________ 35 | Country:___________________________________________ 36 | E-MAIL address:____________________________________ 37 | 38 | 39 | You will receive fonts which you order by Email after registration. These fonts 40 | will be generated for you by specify your name in font information. -------------------------------------------------------------------------------- /themes/violet/images/green-light-off.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/green-light-off.gif -------------------------------------------------------------------------------- /themes/violet/images/green-light-on.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/green-light-on.gif -------------------------------------------------------------------------------- /themes/violet/images/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/info.png -------------------------------------------------------------------------------- /themes/violet/images/mute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/mute.png -------------------------------------------------------------------------------- /themes/violet/images/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/next.png -------------------------------------------------------------------------------- /themes/violet/images/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/pause.png -------------------------------------------------------------------------------- /themes/violet/images/play.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/play.png -------------------------------------------------------------------------------- /themes/violet/images/prev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/prev.png -------------------------------------------------------------------------------- /themes/violet/images/sound.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/sound.png -------------------------------------------------------------------------------- /themes/violet/images/stop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/images/stop.png -------------------------------------------------------------------------------- /themes/violet/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cristiancfm/webdeck-player/9c3259614e38f4fdb0647a88b5cfef2f03ca5ebe/themes/violet/logo.png -------------------------------------------------------------------------------- /themes/violet/webdeck-player.css: -------------------------------------------------------------------------------- 1 | /* Font import */ 2 | @font-face {font-family: DS-Digital; src: url(./fonts/DS-DIGII.TTF);} 3 | @font-face { 4 | font-family: Eurostile; 5 | src: url(./fonts/EurostileExtendedBlack.ttf); 6 | font-weight: 900; 7 | } 8 | 9 | *{ 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | body{ 15 | width: 600px; 16 | height: 250px; 17 | font-family: monospace; 18 | color: white; 19 | background: linear-gradient(90deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 20 | } 21 | 22 | select{ 23 | margin-right: 1px; 24 | } 25 | 26 | button{ 27 | padding: 4px; 28 | margin-right: 1px; 29 | font-family: Eurostile, monospace; 30 | text-transform: uppercase; 31 | font-weight: bold; 32 | font-size: 8pt; 33 | color: gainsboro; 34 | 35 | background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 36 | border: groove 2px gray; 37 | border-radius: 20px; 38 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 39 | } 40 | 41 | button:active{ 42 | background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 43 | border: groove 2px gray; 44 | border-radius: 20px; 45 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 46 | } 47 | 48 | .toggle-button[state='off'] > p::before{ 49 | content: url(./images/green-light-off.gif); 50 | margin-right: 3px; 51 | } 52 | 53 | .toggle-button[state='on'] > p::before{ 54 | content: url(./images/green-light-on.gif); 55 | margin-right: 3px; 56 | } 57 | 58 | 59 | select{ 60 | font-family: Eurostile, monospace; 61 | text-transform: uppercase; 62 | font-weight: bold; 63 | font-size: 8pt; 64 | color: gainsboro; 65 | padding:0 5px; 66 | 67 | background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 68 | border: groove 2px gray; 69 | border-radius: 20px; 70 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 71 | } 72 | 73 | select option{ 74 | background: black; 75 | } 76 | 77 | select:active{ 78 | background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 79 | border: groove 2px gray; 80 | border-radius: 20px; 81 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 82 | } 83 | 84 | 85 | 86 | 87 | /* Blink class */ 88 | .blink { 89 | animation: blinker 2s step-start infinite; 90 | } 91 | 92 | @keyframes blinker { 93 | 50% { 94 | opacity: 0; 95 | } 96 | } 97 | 98 | 99 | /* Columns section */ 100 | .columns{ 101 | display: flex; 102 | } 103 | 104 | .columns > div:first-child{ 105 | flex-shrink: 0; 106 | margin-right: 5px; 107 | } 108 | 109 | .columns > div:last-child{ 110 | flex-grow: 1; 111 | } 112 | 113 | 114 | 115 | /* -- Sliders -- */ 116 | input[type="range"] { 117 | appearance: none; 118 | background: none; 119 | border: solid 1px darkgray; 120 | border-radius: 10px; 121 | 122 | height: 5px; 123 | margin-top: 7px; 124 | margin-bottom: 7px; 125 | } 126 | 127 | /* slider track */ 128 | input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { 129 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 2%, rgba(221,221,221,1) 50%, rgb(105, 105, 105) 98%, rgba(255,255,255,1) 100%); 130 | height: 100%; 131 | border-radius: 10px; 132 | } 133 | 134 | input[type="range"]::-moz-range-track /* For Firefox */ { 135 | background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 2%, rgba(221,221,221,1) 50%, rgb(105, 105, 105) 98%, rgba(255,255,255,1) 100%); 136 | height: 100%; 137 | border-radius: 10px; 138 | } 139 | 140 | /* slider thumb */ 141 | input[type="range"]::-webkit-slider-thumb /* For Chrome */ { 142 | appearance: none; 143 | position: relative; 144 | top: -4px; 145 | 146 | background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 147 | border: groove 1px gainsboro; 148 | border-radius: 20px; 149 | 150 | border-radius: 5px; 151 | box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); 152 | 153 | height: 0.8rem; 154 | width: 1.5rem; 155 | } 156 | 157 | input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { 158 | background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 159 | border: groove 2px gainsboro; 160 | 161 | border-radius: 10px; 162 | box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); 163 | } 164 | 165 | 166 | 167 | input[type="range"]::-moz-range-thumb /* For Firefox */ { 168 | background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 169 | border: groove 1px gainsboro; 170 | border-radius: 20px; 171 | 172 | border-radius: 5px; 173 | box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); 174 | 175 | height: 0.8rem; 176 | width: 1.5rem; 177 | } 178 | 179 | input[type="range"]::-moz-range-thumb:active /* For Firefox */ { 180 | background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); 181 | border: groove 2px gainsboro; 182 | 183 | border-radius: 10px; 184 | box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); 185 | } 186 | 187 | 188 | 189 | /* ---- Web Deck Player ---- */ 190 | #web-deck-player{ 191 | padding: 0 5px; 192 | } 193 | 194 | 195 | /* Player title bar */ 196 | #player-title-bar{ 197 | display: flex; 198 | color: gainsboro; 199 | font-family: Eurostile, Arial, Helvetica, sans-serif; 200 | font-weight: bold; 201 | font-size: 10pt; 202 | } 203 | 204 | #player-title-bar:before, 205 | #player-title-bar:after{ 206 | content: ""; 207 | flex: 1; 208 | margin: auto 1em; 209 | height: 2px; 210 | border-top: ridge white 2px; 211 | border-bottom: ridge white 2px; 212 | } 213 | 214 | /* Player body */ 215 | #player-body{ 216 | margin: 2px; 217 | padding: 5px; 218 | border: inset 2px dimgray; 219 | border-radius: 5px; 220 | border-bottom-left-radius: 8%; 221 | border-bottom-right-radius: 8%; 222 | background: linear-gradient(90deg, rgb(222, 206, 247) 0%, rgba(184,151,235,1) 10%, rgba(84,60,124,1) 90%); 223 | } 224 | 225 | /* Player main section */ 226 | #player-main-section{ 227 | margin-bottom: 5px; 228 | } 229 | 230 | 231 | /* Player display */ 232 | #player-display{ 233 | width: 250px; 234 | height: 140px; 235 | background: black; 236 | border: solid 1px dimgray; 237 | border-radius: 5px; 238 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 239 | } 240 | 241 | 242 | /* Player info */ 243 | #info-screen{ 244 | background: #8c9569; 245 | color: black; 246 | border: solid 1px dimgray; 247 | border-radius: 5px; 248 | box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); 249 | margin-bottom: 5px; 250 | padding: 2px; 251 | font-family: DS-Digital, monospace; 252 | font-size: large; 253 | letter-spacing: 0.1em; 254 | } 255 | 256 | .player-row{ 257 | margin-top: 5px; 258 | display: flex; 259 | flex-wrap: nowrap; 260 | justify-content: space-between; 261 | } 262 | 263 | #volumeButton{ 264 | height: 25px; 265 | width: 25px; 266 | } 267 | 268 | #volumeButton img{ 269 | height: 100%; 270 | } 271 | 272 | #volumeBar{ 273 | width: 120px; 274 | } 275 | 276 | #themeSelector{ 277 | height: 25px; 278 | max-width: 150px; 279 | text-overflow: ellipsis; 280 | } 281 | 282 | #videoButton{ 283 | height: 25px; 284 | } 285 | 286 | #playerLogo{ 287 | text-align: center; 288 | height: fit-content; 289 | } 290 | 291 | #playerLogo > img{ 292 | margin-top: 5px; 293 | max-height: 50px; 294 | } 295 | 296 | /* Player control panel */ 297 | #player-control-panel{ 298 | font-size: 0; 299 | } 300 | 301 | #seekBar{ 302 | width: 99%; 303 | margin-bottom: 12px; 304 | } 305 | 306 | .playing-controls{ 307 | margin-bottom: 5px; 308 | margin-right: 5px; 309 | padding: 3px; 310 | display: inline-block; 311 | width: fit-content; 312 | background: none; 313 | border-radius: 5px; 314 | vertical-align: middle; 315 | } 316 | 317 | .playing-controls[rounded]{ 318 | border-radius: 20px; 319 | } 320 | 321 | .playing-controls[float-right]{ 322 | float: right; 323 | } 324 | 325 | .playing-controls button{ 326 | height: 30px; 327 | min-width: 50px; 328 | } 329 | 330 | .playing-controls button img{ 331 | height: 100%; 332 | } 333 | 334 | 335 | #infoButton{ 336 | border-radius: 20px; 337 | height: 30px; 338 | min-width: 30px; 339 | font-size: large; 340 | } 341 | 342 | #playlistSelector{ 343 | height: 30px; 344 | max-width: 175px; 345 | text-overflow: ellipsis; 346 | } --------------------------------------------------------------------------------