From 502c4c5cc2c59928ad6ea4092fc161754ca1d7dd Mon Sep 17 00:00:00 2001 From: Biswakalyan Bhuyan Date: Fri, 26 May 2023 17:31:35 +0530 Subject: webplayer --- LICENSE.txt | 21 ++ README.md | 68 +++++ about.txt | 10 + index.html | 95 +++++++ script.js | 357 +++++++++++++++++++++++++ themes/default/about.txt | 2 + themes/default/fonts/licenses/slkscr.txt | 25 ++ themes/default/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/default/images/green-light-off.gif | Bin 0 -> 114 bytes themes/default/images/green-light-on.gif | Bin 0 -> 113 bytes themes/default/images/info.png | Bin 0 -> 1639 bytes themes/default/images/mute.png | Bin 0 -> 1648 bytes themes/default/images/next.png | Bin 0 -> 1287 bytes themes/default/images/pause.png | Bin 0 -> 329 bytes themes/default/images/play.png | Bin 0 -> 1253 bytes themes/default/images/prev.png | Bin 0 -> 1420 bytes themes/default/images/slider.gif | Bin 0 -> 1293 bytes themes/default/images/sound.png | Bin 0 -> 4277 bytes themes/default/images/stop.png | Bin 0 -> 297 bytes themes/default/logo.png | Bin 0 -> 10199 bytes themes/default/webdeck-player.css | 322 ++++++++++++++++++++++ themes/minimal/about.txt | 2 + themes/minimal/fonts/licenses/slkscr.txt | 25 ++ themes/minimal/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/minimal/images/green-light-off.gif | Bin 0 -> 114 bytes themes/minimal/images/green-light-on.gif | Bin 0 -> 113 bytes themes/minimal/images/info.png | Bin 0 -> 1639 bytes themes/minimal/images/mute.png | Bin 0 -> 1648 bytes themes/minimal/images/next.png | Bin 0 -> 1287 bytes themes/minimal/images/pause.png | Bin 0 -> 329 bytes themes/minimal/images/play.png | Bin 0 -> 1253 bytes themes/minimal/images/prev.png | Bin 0 -> 1420 bytes themes/minimal/images/slider.gif | Bin 0 -> 1293 bytes themes/minimal/images/sound.png | Bin 0 -> 4277 bytes themes/minimal/images/stop.png | Bin 0 -> 297 bytes themes/minimal/logo.png | Bin 0 -> 10199 bytes themes/minimal/webdeck-player.css | 322 ++++++++++++++++++++++ themes/red-grunge/about.txt | 2 + themes/red-grunge/fonts/licenses/slkscr.txt | 25 ++ themes/red-grunge/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/red-grunge/images/background.jpg | Bin 0 -> 161954 bytes themes/red-grunge/images/green-light-off.gif | Bin 0 -> 1148 bytes themes/red-grunge/images/green-light-on.gif | Bin 0 -> 1147 bytes themes/red-grunge/images/info.png | Bin 0 -> 1479 bytes themes/red-grunge/images/mute.png | Bin 0 -> 1367 bytes themes/red-grunge/images/next.png | Bin 0 -> 1113 bytes themes/red-grunge/images/pause.png | Bin 0 -> 308 bytes themes/red-grunge/images/play.png | Bin 0 -> 1031 bytes themes/red-grunge/images/prev.png | Bin 0 -> 1224 bytes themes/red-grunge/images/slider.gif | Bin 0 -> 1269 bytes themes/red-grunge/images/sound.png | Bin 0 -> 2210 bytes themes/red-grunge/images/stop.png | Bin 0 -> 1778 bytes themes/red-grunge/logo.png | Bin 0 -> 10199 bytes themes/red-grunge/webdeck-player.css | 345 ++++++++++++++++++++++++ themes/silver/about.txt | 2 + themes/silver/fonts/EurostileExtendedBlack.ttf | Bin 0 -> 32324 bytes themes/silver/fonts/LED-Dot-Matrix.ttf | Bin 0 -> 46436 bytes themes/silver/fonts/licenses/slkscr.txt | 25 ++ themes/silver/fonts/slkscr.ttf | Bin 0 -> 7636 bytes themes/silver/images/green-light-off.gif | Bin 0 -> 114 bytes themes/silver/images/green-light-on.gif | Bin 0 -> 113 bytes themes/silver/images/info.png | Bin 0 -> 1639 bytes themes/silver/images/mute.png | Bin 0 -> 1648 bytes themes/silver/images/next.png | Bin 0 -> 1287 bytes themes/silver/images/pause.png | Bin 0 -> 329 bytes themes/silver/images/play.png | Bin 0 -> 1253 bytes themes/silver/images/prev.png | Bin 0 -> 1420 bytes themes/silver/images/sound.png | Bin 0 -> 4277 bytes themes/silver/images/stop.png | Bin 0 -> 297 bytes themes/silver/logo.png | Bin 0 -> 10199 bytes themes/silver/webdeck-player.css | 346 ++++++++++++++++++++++++ themes/violet/about.txt | 2 + themes/violet/fonts/DS-DIGII.TTF | Bin 0 -> 24676 bytes themes/violet/fonts/EurostileExtendedBlack.ttf | Bin 0 -> 32324 bytes themes/violet/fonts/licenses/DIGITAL.TXT | 40 +++ themes/violet/fonts/licenses/slkscr.txt | 25 ++ themes/violet/images/green-light-off.gif | Bin 0 -> 114 bytes themes/violet/images/green-light-on.gif | Bin 0 -> 113 bytes themes/violet/images/info.png | Bin 0 -> 1479 bytes themes/violet/images/mute.png | Bin 0 -> 1367 bytes themes/violet/images/next.png | Bin 0 -> 1113 bytes themes/violet/images/pause.png | Bin 0 -> 308 bytes themes/violet/images/play.png | Bin 0 -> 1031 bytes themes/violet/images/prev.png | Bin 0 -> 1224 bytes themes/violet/images/sound.png | Bin 0 -> 2210 bytes themes/violet/images/stop.png | Bin 0 -> 1778 bytes themes/violet/logo.png | Bin 0 -> 10199 bytes themes/violet/webdeck-player.css | 351 ++++++++++++++++++++++++ 88 files changed, 2412 insertions(+) create mode 100644 LICENSE.txt create mode 100644 README.md create mode 100644 about.txt create mode 100644 index.html create mode 100644 script.js create mode 100644 themes/default/about.txt create mode 100644 themes/default/fonts/licenses/slkscr.txt create mode 100644 themes/default/fonts/slkscr.ttf create mode 100644 themes/default/images/green-light-off.gif create mode 100644 themes/default/images/green-light-on.gif create mode 100644 themes/default/images/info.png create mode 100644 themes/default/images/mute.png create mode 100644 themes/default/images/next.png create mode 100644 themes/default/images/pause.png create mode 100644 themes/default/images/play.png create mode 100644 themes/default/images/prev.png create mode 100644 themes/default/images/slider.gif create mode 100644 themes/default/images/sound.png create mode 100644 themes/default/images/stop.png create mode 100644 themes/default/logo.png create mode 100644 themes/default/webdeck-player.css create mode 100644 themes/minimal/about.txt create mode 100644 themes/minimal/fonts/licenses/slkscr.txt create mode 100644 themes/minimal/fonts/slkscr.ttf create mode 100644 themes/minimal/images/green-light-off.gif create mode 100644 themes/minimal/images/green-light-on.gif create mode 100644 themes/minimal/images/info.png create mode 100644 themes/minimal/images/mute.png create mode 100644 themes/minimal/images/next.png create mode 100644 themes/minimal/images/pause.png create mode 100644 themes/minimal/images/play.png create mode 100644 themes/minimal/images/prev.png create mode 100644 themes/minimal/images/slider.gif create mode 100644 themes/minimal/images/sound.png create mode 100644 themes/minimal/images/stop.png create mode 100644 themes/minimal/logo.png create mode 100644 themes/minimal/webdeck-player.css create mode 100644 themes/red-grunge/about.txt create mode 100644 themes/red-grunge/fonts/licenses/slkscr.txt create mode 100644 themes/red-grunge/fonts/slkscr.ttf create mode 100644 themes/red-grunge/images/background.jpg create mode 100644 themes/red-grunge/images/green-light-off.gif create mode 100644 themes/red-grunge/images/green-light-on.gif create mode 100644 themes/red-grunge/images/info.png create mode 100644 themes/red-grunge/images/mute.png create mode 100644 themes/red-grunge/images/next.png create mode 100644 themes/red-grunge/images/pause.png create mode 100644 themes/red-grunge/images/play.png create mode 100644 themes/red-grunge/images/prev.png create mode 100644 themes/red-grunge/images/slider.gif create mode 100644 themes/red-grunge/images/sound.png create mode 100644 themes/red-grunge/images/stop.png create mode 100644 themes/red-grunge/logo.png create mode 100644 themes/red-grunge/webdeck-player.css create mode 100644 themes/silver/about.txt create mode 100644 themes/silver/fonts/EurostileExtendedBlack.ttf create mode 100644 themes/silver/fonts/LED-Dot-Matrix.ttf create mode 100644 themes/silver/fonts/licenses/slkscr.txt create mode 100644 themes/silver/fonts/slkscr.ttf create mode 100644 themes/silver/images/green-light-off.gif create mode 100644 themes/silver/images/green-light-on.gif create mode 100644 themes/silver/images/info.png create mode 100644 themes/silver/images/mute.png create mode 100644 themes/silver/images/next.png create mode 100644 themes/silver/images/pause.png create mode 100644 themes/silver/images/play.png create mode 100644 themes/silver/images/prev.png create mode 100644 themes/silver/images/sound.png create mode 100644 themes/silver/images/stop.png create mode 100644 themes/silver/logo.png create mode 100644 themes/silver/webdeck-player.css create mode 100644 themes/violet/about.txt create mode 100644 themes/violet/fonts/DS-DIGII.TTF create mode 100644 themes/violet/fonts/EurostileExtendedBlack.ttf create mode 100644 themes/violet/fonts/licenses/DIGITAL.TXT create mode 100644 themes/violet/fonts/licenses/slkscr.txt create mode 100644 themes/violet/images/green-light-off.gif create mode 100644 themes/violet/images/green-light-on.gif create mode 100644 themes/violet/images/info.png create mode 100644 themes/violet/images/mute.png create mode 100644 themes/violet/images/next.png create mode 100644 themes/violet/images/pause.png create mode 100644 themes/violet/images/play.png create mode 100644 themes/violet/images/prev.png create mode 100644 themes/violet/images/sound.png create mode 100644 themes/violet/images/stop.png create mode 100644 themes/violet/logo.png create mode 100644 themes/violet/webdeck-player.css diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..81db5d2 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2022 Chris + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..7e5e228 --- /dev/null +++ b/README.md @@ -0,0 +1,68 @@ + +![header](https://user-images.githubusercontent.com/72354794/211170247-af9a802e-73f2-429c-a697-6edd49c24006.png) + +# Webdeck Player +*Cool music for your cool website!* + +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! + +**Live demo**: https://webdeckplayer.neocities.org + +![GitHub release (latest by date)](https://img.shields.io/github/v/release/cristiancfm/webdeck-player) +![GitHub](https://img.shields.io/github/license/cristiancfm/webdeck-player) +[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif)](https://paypal.me/cristiancfm) + + +## Features +- Play Youtube videos saved in playlists +- Integrated video controls (play, pause, volume, shuffling, etc.) +- Playlist selector - select between your defined playlists +- Themes - customize the player with the included themes or create your own! +- Very easy to use +- Written in pure modern Javascript - no weird stuff! +- Lightweight +- aesthetic™ + + +## Downloads +Releases section: https://github.com/cristiancfm/webdeck-player/releases + +## Instructions +*(read these instructions also on the [website](https://webdeckplayer.neocities.org))* + +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! + + +### Installing the player +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. +2. Unzip the file and put the `webdeck-player` folder into your website root folder. + +3. a. **Run the player on a separate browser window (recommended)** + - 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: +`` +This code creates a button that will open a window with the specified height and width containing the player. + +3. b. **Run the player inside an iframe** + - 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: +`` + +### Adding playlists + +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. + +### Adding themes + +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. + +### Creating a new theme + +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: + +1. Inside the `webdeck-player` folder, locate the themes folder and open it. +2. Choose a theme folder as a base, for example, the default theme. You can modify any other theme. +3. Duplicate your chosen folder and rename it. For example, call it `my-theme`. +4. Add your new theme to the `script.js` file following the instructions inside it. +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. + +## About +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. diff --git a/about.txt b/about.txt new file mode 100644 index 0000000..c9df8e9 --- /dev/null +++ b/about.txt @@ -0,0 +1,10 @@ +Webdeck Player - A Javascript Youtube playlists player for webpages +MIT License +Copyright (c) 2023 Chris + +Thanks for downloading this software! Check the latest updates at the Github +repo: https://git.xgenos.me/webdeck-player + +Please send me an e-mail (biswa@xgenos.me) if you find any bugs or +have some suggestions. Consider sending me a link to your work using this +software, I'd love to see it! diff --git a/index.html b/index.html new file mode 100644 index 0000000..a621013 --- /dev/null +++ b/index.html @@ -0,0 +1,95 @@ + + + + + + + + + + silent suburbia + + + + + + +
+ +
+ +
+ GENOS JACKBOX +
+ +
+
+
+
+
+
+ +
+
+

Loading...

+

+
+ +
+
+ + +
+ + +
+ +
+ + + +
+
+
+
+ +
+ +
+ +
+ + + + +
+ +
+ +
+ + + +
+ +
+ +
+ +
+
+ +
+ +
+ + + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..75793a9 --- /dev/null +++ b/script.js @@ -0,0 +1,357 @@ +/** + * Web Deck Player v1.0 - script file + * + * Welcome to the script file! + * + * CONTENTS: + * 1. Playlists Array + * 2. Initial Playlist + * 3. Themes + * 4. Current Theme +*/ + + +/** + * [1. PLAYLISTS ] + * Here are the Youtube Playlists that will be available to play. To add a new one, + * first make sure that your playlist is set to 'Hidden' or 'Public' in Youtube. + * + * Then, look for the URL (for example: https://www.youtube.com/playlist?list=PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7) + * and copy only the part after 'list=' (for example: PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7). + * Finally, write a name for your playlist and paste the code you copied in the list below. + * + * You can also delete the lists that you don't want. +*/ +var myPlaylists = { + "90s HITS": 'PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7', + "00s HITS": 'PL69714D95619E327E', + "VAPORWAVE": 'PLSChV4T8EDb9TZsLO23Tsj6-UUyAXtGg5', + //"ANOTHER PLAYLIST": 'PLZyqOyXxaVETqpHhT_c5GPmAPzhJpJ5K7', +}; + + +/** + * [2. INITIAL PLAYLIST ] + * The first playlist that the player will load on startup. You may change it by + * writing the name of the new playlist below. +*/ +var currentPlaylist = "90s HITS"; + + +/** + * [3. THEMES] + * Themes are a great way to customize the look of your player! Refer to the website + * instructions to get new themes or to know how can you create yours. Then, you may + * add them to the list below using the format ( "THEME NAME": 'theme-folder-name' ). + * + * You can also delete the themes that you don't want. +*/ +var myThemes = { + "DEFAULT": 'default', + "SILVER": 'silver', + "VIOLET": "violet", + "MINIMAL": "minimal", + "RED GRUNGE": "red-grunge", + //"ANOTHER THEME": 'another-theme', +}; + + +/** + * [4. CURRENT THEME] + * Set the theme of your player writing its name below. + */ +var currentTheme = "DEFAULT"; + + +// ===== END OF CONFIGURATION ===== + + + +document.getElementById("player-theme").setAttribute("href", "./themes/"+ myThemes[currentTheme] + "/webdeck-player.css"); + + +var tag = document.createElement('script'); + +tag.src = "https://www.youtube.com/iframe_api"; +var firstScriptTag = document.getElementsByTagName('script')[0]; +firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); + +var player; +var songLabel = document.getElementById("songLabel"); +var statusLabel = document.getElementById("statusLabel"); +var statusLabelInterval; + +var savedVolume = 50; +var volumeButton = document.getElementById("volumeButton"); +volumeButton.innerHTML = ""; +var volumeBar = document.getElementById("volumeBar"); +var isSlidingVolumeBar = false; +var videoButton = document.getElementById("videoButton"); +var isVideoShowing = true; + +var logo = document.getElementById("playerLogo"); +logo.innerHTML = ""; + +var seekBar = document.getElementById("seekBar"); +var isSlidingSeekBar = false; +var prevButton = document.getElementById("prevButton"); +var playButton = document.getElementById("playButton"); +var stopButton = document.getElementById("stopButton"); +var nextButton = document.getElementById("nextButton"); +var shuffleButton = document.getElementById("shuffleButton"); +var shufflePlaylist = false; +var infoButton = document.getElementById("infoButton"); +prevButton.innerHTML = ""; +playButton.innerHTML = ""; +stopButton.innerHTML = ""; +nextButton.innerHTML = ""; +infoButton.innerHTML = ""; + +var playlistSelector = document.getElementById("playlistSelector"); +for(var key in myPlaylists){ + var option = document.createElement('option'); + option.value = key; + option.innerHTML = key; + playlistSelector.appendChild(option); +} + +var themeSelector = document.getElementById("themeSelector"); +for(var key in myThemes){ + var option = document.createElement('option'); + option.value = key; + option.innerHTML = key; + themeSelector.appendChild(option); +} +themeSelector.value = currentTheme; + + + + +function onYouTubeIframeAPIReady() { + player = new YT.Player('youtube-player', { + height: '100%', + width: '100%', + playerVars: { + 'controls': 0, + 'autoplay': 0, + 'playsinline': 1, + 'loop': 1 + }, + events: { + 'onReady': onPlayerReady, + 'onStateChange': onPlayerStateChange + } + }); +} + +function updateSongLabel() { + if(player.getVideoData() && player.getVideoData().title != undefined){ + if(player.getVideoData().title == ""){ + songLabel.innerHTML = "READY"; + } + else{ + songLabel.innerHTML = "" + player.getVideoData().title + " - " + player.getVideoData().author + ""; + } + }else{ + songLabel.innerHTML = "Loading..."; + } +} + +function updateStatusLabel() { + let statusLabelText = ""; + let listText = " " + (player.getPlaylistIndex() + 1) + "/" + player.getPlaylist().length; + let timeText = "0:00/0:00"; + + seekBar.setAttribute("max", player.getDuration()); + if(!isSlidingSeekBar){ + seekBar.value = player.getCurrentTime(); + } + if(!isSlidingVolumeBar){ + volumeBar.value = player.getVolume(); + } + + + switch (player.getPlayerState()) { + case -1: + statusLabelText = "Stopped"; + break; + case 0: + statusLabelText = "Ended"; + break; + case 1: + statusLabelText = "Playing"; + break; + case 2: + statusLabelText = "Paused"; + break; + case 3: + statusLabelText = "Loading... "; + break; + case 5: + statusLabelText = "Video Cued"; + break; + } + timeText = formatTime(player.getCurrentTime()) + "/" + formatTime(player.getDuration()); + statusLabel.innerHTML = statusLabelText + listText + " " + timeText; + + if(player.getPlayerState() == 2 /* Paused */){ + statusLabel.setAttribute('class', 'blink'); + } + else{ + statusLabel.removeAttribute('class'); + } +} + +function formatTime(input) { + var minutes = Math.trunc(input / 60); + var seconds = Math.trunc(input - minutes * 60); + if(seconds < 10) { + return minutes + ":0" + seconds; + } + else { + return minutes + ":" + seconds; + } +} + + + + +volumeButton.addEventListener("click", function(){ + if(volumeBar.value != 0){ + savedVolume = volumeBar.value; + player.setVolume(0); + volumeBar.value = 0; + volumeButton.innerHTML = ""; + } + else{ + player.setVolume(savedVolume); + volumeBar.value = savedVolume; + volumeButton.innerHTML = ""; + } + +}); + +volumeBar.addEventListener("input", function(){ + isSlidingVolumeBar = true; + player.setVolume(this.value); + if(volumeBar.value == 0){ + volumeButton.innerHTML = ""; + } + else{ + volumeButton.innerHTML = ""; + } +}); +volumeBar.addEventListener("mouseup", function(){ + isSlidingVolumeBar = false; +}); + +videoButton.addEventListener("click", function(){ + if(isVideoShowing){ + document.getElementById("youtube-player").hidden = true; + isVideoShowing = false; + videoButton.setAttribute('state', 'off'); + } + else{ + document.getElementById("youtube-player").hidden = false; + isVideoShowing = true; + videoButton.setAttribute('state', 'on'); + } +}); + + + + +seekBar.addEventListener("input", function(){ + isSlidingSeekBar = true; + player.seekTo(this.value); +}); +seekBar.addEventListener("mouseup", function(){ + isSlidingSeekBar = false; +}); + + +playButton.addEventListener("click", function() { + if(player.getPlayerState() == 1) { + player.pauseVideo(); + } + else { + player.playVideo(); + } +}); + +stopButton.addEventListener("click", function() { + if(player.getPlayerState() == 1 || player.getPlayerState() == 2) { + player.stopVideo(); + } +}); + +nextButton.addEventListener("click", function() { + player.nextVideo(); +}); + +prevButton.addEventListener("click", function() { + player.previousVideo(); +}); + +shuffleButton.addEventListener("click", function() { + if(shufflePlaylist == false){ + shufflePlaylist = true; + shuffleButton.setAttribute('state', 'on'); + } + else{ + shufflePlaylist = false; + shuffleButton.setAttribute('state', 'off'); + } + player.setShuffle(shufflePlaylist); +}); + +infoButton.addEventListener("click", function() { + alert("Webdeck Player - created by Genos\ngit.xgenos.me/webdeck-player\n(c) MIT License"); +}); + +playlistSelector.addEventListener("change", function() { + currentPlaylist = playlistSelector.value; + player.stopVideo(); + player.loadPlaylist({ list: myPlaylists[currentPlaylist] }); +}); + +themeSelector.addEventListener("change", function() { + currentTheme = themeSelector.value; + document.getElementById("player-theme").setAttribute("href", "./themes/"+ myThemes[currentTheme] + "/webdeck-player.css"); + + volumeButton.innerHTML = ""; + prevButton.innerHTML = ""; + playButton.innerHTML = ""; + stopButton.innerHTML = ""; + nextButton.innerHTML = ""; + infoButton.innerHTML = ""; +}); + + + + + +function onPlayerReady(event) { + player.loadPlaylist({ list: myPlaylists[currentPlaylist] }); + player.setVolume(50); + player.setLoop(true); +} + +function onPlayerStateChange(event) { + //Change play/pause button icons + if(player.getPlayerState() == 1 /* Playing */) { + playButton.innerHTML = ""; + } + else { + playButton.innerHTML = ""; + } + + + //Load next video + if (event.data == YT.PlayerState.ENDED) { + player.nextVideo(); + } + updateSongLabel(); + clearInterval(statusLabelInterval); + statusLabelInterval = setInterval(updateStatusLabel, 100); +} diff --git a/themes/default/about.txt b/themes/default/about.txt new file mode 100644 index 0000000..72e650d --- /dev/null +++ b/themes/default/about.txt @@ -0,0 +1,2 @@ +DEFAULT THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/default/fonts/licenses/slkscr.txt b/themes/default/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/default/fonts/licenses/slkscr.txt @@ -0,0 +1,25 @@ +Thank you for downloading Silkscreen, a type family for your Web graphics +by Jason Kottke (jason@kottke.org). + +To install the Silkscreen type family, unzip this file and drag the files +into the Fonts folder in the Control Panel. + +If you encounter any problems in using this font, please email me and I'll +see if I can try and fix it. Please note that I can't help you with any +installation issues. Please consult your system's help files for assistance. + +This font is free for personal and corporate use and may be redistributed in +this unmodified form on your Web site. I would ask that you not modify and +then redistribute this font...although you may modify it for your own +personal use. If you really like this font and use it often, feel free to +mail me (e- or snail mail) some small token of your appreciation. A URL +of your work using Silkscreen would be appreciated as well. + +All future bug fixes, updates, and additions to the Silkscreen type family +will be available on my Web site at the following URL: + +http://www.kottke.org/plus/type/silkscreen/index.html + +Again, thanks for downloading Silkscreen. Enjoy! + +-jason \ No newline at end of file diff --git a/themes/default/fonts/slkscr.ttf b/themes/default/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/themes/default/fonts/slkscr.ttf differ diff --git a/themes/default/images/green-light-off.gif b/themes/default/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/themes/default/images/green-light-off.gif differ diff --git a/themes/default/images/green-light-on.gif b/themes/default/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/themes/default/images/green-light-on.gif differ diff --git a/themes/default/images/info.png b/themes/default/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/themes/default/images/info.png differ diff --git a/themes/default/images/mute.png b/themes/default/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/themes/default/images/mute.png differ diff --git a/themes/default/images/next.png b/themes/default/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/themes/default/images/next.png differ diff --git a/themes/default/images/pause.png b/themes/default/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/themes/default/images/pause.png differ diff --git a/themes/default/images/play.png b/themes/default/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/themes/default/images/play.png differ diff --git a/themes/default/images/prev.png b/themes/default/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/themes/default/images/prev.png differ diff --git a/themes/default/images/slider.gif b/themes/default/images/slider.gif new file mode 100644 index 0000000..86a5b9f Binary files /dev/null and b/themes/default/images/slider.gif differ diff --git a/themes/default/images/sound.png b/themes/default/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/themes/default/images/sound.png differ diff --git a/themes/default/images/stop.png b/themes/default/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/themes/default/images/stop.png differ diff --git a/themes/default/logo.png b/themes/default/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/default/logo.png differ diff --git a/themes/default/webdeck-player.css b/themes/default/webdeck-player.css new file mode 100644 index 0000000..598d791 --- /dev/null +++ b/themes/default/webdeck-player.css @@ -0,0 +1,322 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: Silkscreen, monospace; + color: white; + background: linear-gradient(to right, #212133 0%, #343353 50%, #212133 100%); +} + +select{ + margin-right: 1px; +} + +button{ + padding: 2px; + margin-right: 1px; + font-family: Silkscreen, monospace; + + background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); + border: outset 2px #ECE0B8; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +button:active{ + background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + border: inset 2px #ECE0B8; + border-radius: 2px; + box-shadow: none; +} + +.toggle-button[state='off'] > p::before{ + content: url(./images/green-light-off.gif); + margin-right: 3px; +} + +.toggle-button[state='on'] > p::before{ + content: url(./images/green-light-on.gif); + margin-right: 3px; +} + + +select{ + font-family: Silkscreen, monospace; + + background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); + border: outset 2px #ECE0B8; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +select:active{ + background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + border: inset 2px #ECE0B8; + border-radius: 2px; + box-shadow: none; +} + + + + +/* Blink class */ +.blink { + animation: blinker 2s step-start infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + + +/* Columns section */ +.columns{ + display: flex; +} + +.columns > div:first-child{ + flex-shrink: 0; + margin-right: 5px; +} + +.columns > div:last-child{ + flex-grow: 1; +} + + + +/* -- Sliders -- */ +input[type="range"] { + appearance: none; + background: none; + border: inset 2px #403f67; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + background-color: #201e3a; + height: 100%; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + background-color: #201e3a; + height: 100%; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + + background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #ECE0B8; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #ECE0B8; + border-radius: 2px; + box-shadow: none; +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #ECE0B8; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to top, #ECE0B8 0%, #c5b580 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #ECE0B8; + border-radius: 2px; + box-shadow: none; +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; + border-top: ridge #ECE0B8 2px; + border-bottom: ridge #ECE0B8 2px; +} + +/* Player body */ +#player-body{ + padding: 5px; + border: groove 3px #403f67; +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: inset 2px #403f67; +} + + +/* Player info */ +#info-screen{ + background: black; + color: limegreen; + border: inset 2px #403f67; + margin-bottom: 5px; +} + +#songLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +#statusLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +.player-row{ + margin-top: 5px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; +} + +#volumeButton{ + height: 25px; + width: 25px; +} + +#volumeButton img{ + height: 100%; +} + +#volumeBar{ + width: 120px; +} + +#themeSelector{ + height: 25px; + max-width: 150px; + text-overflow: ellipsis; +} + +#videoButton{ + height: 25px; +} + +#playerLogo{ + text-align: center; + height: fit-content; +} + +#playerLogo > img{ + margin-top: 5px; + max-height: 50px; +} + +/* Player control panel */ +#player-control-panel{ + font-size: 0; +} + +#seekBar{ + width: 99%; + margin-bottom: 5px; +} + +.playing-controls{ + margin-bottom: 5px; + margin-right: 5px; + display: inline-block; + width: fit-content; + background: #201e3a; + border: inset 2px #403f67; + vertical-align: middle; +} + +.playing-controls[rounded]{ + border-radius: 20px; +} + +.playing-controls[float-right]{ + float: right; +} + +.playing-controls button{ + height: 30px; + min-width: 50px; +} + +.playing-controls button img{ + height: 100%; +} + + +#infoButton{ + border-radius: 20px; + height: 30px; + min-width: 30px; + font-size: large; +} + +#playlistSelector{ + height: 30px; + max-width: 175px; + text-overflow: ellipsis; +} diff --git a/themes/minimal/about.txt b/themes/minimal/about.txt new file mode 100644 index 0000000..d950449 --- /dev/null +++ b/themes/minimal/about.txt @@ -0,0 +1,2 @@ +MINIMAL THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/minimal/fonts/licenses/slkscr.txt b/themes/minimal/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/minimal/fonts/licenses/slkscr.txt @@ -0,0 +1,25 @@ +Thank you for downloading Silkscreen, a type family for your Web graphics +by Jason Kottke (jason@kottke.org). + +To install the Silkscreen type family, unzip this file and drag the files +into the Fonts folder in the Control Panel. + +If you encounter any problems in using this font, please email me and I'll +see if I can try and fix it. Please note that I can't help you with any +installation issues. Please consult your system's help files for assistance. + +This font is free for personal and corporate use and may be redistributed in +this unmodified form on your Web site. I would ask that you not modify and +then redistribute this font...although you may modify it for your own +personal use. If you really like this font and use it often, feel free to +mail me (e- or snail mail) some small token of your appreciation. A URL +of your work using Silkscreen would be appreciated as well. + +All future bug fixes, updates, and additions to the Silkscreen type family +will be available on my Web site at the following URL: + +http://www.kottke.org/plus/type/silkscreen/index.html + +Again, thanks for downloading Silkscreen. Enjoy! + +-jason \ No newline at end of file diff --git a/themes/minimal/fonts/slkscr.ttf b/themes/minimal/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/themes/minimal/fonts/slkscr.ttf differ diff --git a/themes/minimal/images/green-light-off.gif b/themes/minimal/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/themes/minimal/images/green-light-off.gif differ diff --git a/themes/minimal/images/green-light-on.gif b/themes/minimal/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/themes/minimal/images/green-light-on.gif differ diff --git a/themes/minimal/images/info.png b/themes/minimal/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/themes/minimal/images/info.png differ diff --git a/themes/minimal/images/mute.png b/themes/minimal/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/themes/minimal/images/mute.png differ diff --git a/themes/minimal/images/next.png b/themes/minimal/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/themes/minimal/images/next.png differ diff --git a/themes/minimal/images/pause.png b/themes/minimal/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/themes/minimal/images/pause.png differ diff --git a/themes/minimal/images/play.png b/themes/minimal/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/themes/minimal/images/play.png differ diff --git a/themes/minimal/images/prev.png b/themes/minimal/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/themes/minimal/images/prev.png differ diff --git a/themes/minimal/images/slider.gif b/themes/minimal/images/slider.gif new file mode 100644 index 0000000..2d9e1ff Binary files /dev/null and b/themes/minimal/images/slider.gif differ diff --git a/themes/minimal/images/sound.png b/themes/minimal/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/themes/minimal/images/sound.png differ diff --git a/themes/minimal/images/stop.png b/themes/minimal/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/themes/minimal/images/stop.png differ diff --git a/themes/minimal/logo.png b/themes/minimal/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/minimal/logo.png differ diff --git a/themes/minimal/webdeck-player.css b/themes/minimal/webdeck-player.css new file mode 100644 index 0000000..1803a4c --- /dev/null +++ b/themes/minimal/webdeck-player.css @@ -0,0 +1,322 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: Silkscreen, monospace; + color: black; + background: linear-gradient(180deg, rgb(92, 92, 92) 0%, rgb(49, 49, 49) 10%, rgba(30,30,30,1) 90%); +} + +select{ + margin-right: 1px; +} + +button{ + padding: 2px; + margin-right: 1px; + font-family: Silkscreen, monospace; + + background: linear-gradient(to bottom, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +button:active{ + background: linear-gradient(to top, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + box-shadow: none; +} + +.toggle-button[state='off'] > p::before{ + content: url(./images/green-light-off.gif); + margin-right: 3px; +} + +.toggle-button[state='on'] > p::before{ + content: url(./images/green-light-on.gif); + margin-right: 3px; +} + + +select{ + font-family: Silkscreen, monospace; + + background: linear-gradient(to bottom, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +select:active{ + background: linear-gradient(to top, #ededed 0%, #c7c7c7 100%); + border: outset 2px #eeeeee; + border-radius: 2px; + box-shadow: none; +} + + + + +/* Blink class */ +.blink { + animation: blinker 2s step-start infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + + +/* Columns section */ +.columns{ + display: flex; +} + +.columns > div:first-child{ + flex-shrink: 0; + margin-right: 5px; +} + +.columns > div:last-child{ + flex-grow: 1; +} + + + +/* -- Sliders -- */ +input[type="range"] { + appearance: none; + background: none; + border: inset 2px silver; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + + background: url(./images/slider.gif), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #eaeaea; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + background: url(./images/slider.gif), linear-gradient(to top, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #eaeaea; + border-radius: 2px; + box-shadow: none; +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #eaeaea; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1rem; + width: 2.5rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to top, #f0f0f0 0%, #cccccc 100%); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #eaeaea; + border-radius: 2px; + box-shadow: none; +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; + color: white; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; +} + +/* Player body */ +#player-body{ + background: linear-gradient(180deg, rgba(238,238,238,1) 0%, rgba(232,232,232,1) 30%, rgba(214,214,214,1) 100%); + padding: 5px; + border: groove 3px gray; +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: inset 2px #403f67; +} + + +/* Player info */ +#info-screen{ + background: black; + color: limegreen; + border: inset 2px #403f67; + margin-bottom: 5px; +} + +#songLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +#statusLabel{ + text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18, 2px 2px 2px rgba(206,89,55,0); +} + +.player-row{ + margin-top: 5px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; +} + +#volumeButton{ + height: 25px; + width: 25px; +} + +#volumeButton img{ + height: 100%; +} + +#volumeBar{ + width: 120px; +} + +#themeSelector{ + height: 25px; + max-width: 150px; + text-overflow: ellipsis; +} + +#videoButton{ + height: 25px; +} + +#playerLogo{ + text-align: center; + height: fit-content; +} + +#playerLogo > img{ + margin-top: 5px; + max-height: 50px; +} + +/* Player control panel */ +#player-control-panel{ + font-size: 0; +} + +#seekBar{ + width: 99%; + margin-bottom: 5px; +} + +.playing-controls{ + margin-bottom: 5px; + margin-right: 5px; + display: inline-block; + width: fit-content; + background: dimgray; + border: inset 2px silver; + vertical-align: middle; +} + +.playing-controls[rounded]{ + border-radius: 20px; +} + +.playing-controls[float-right]{ + float: right; +} + +.playing-controls button{ + height: 30px; + min-width: 50px; +} + +.playing-controls button img{ + height: 100%; +} + + +#infoButton{ + border-radius: 20px; + height: 30px; + min-width: 30px; + font-size: large; +} + +#playlistSelector{ + height: 30px; + max-width: 175px; + text-overflow: ellipsis; +} diff --git a/themes/red-grunge/about.txt b/themes/red-grunge/about.txt new file mode 100644 index 0000000..48b310d --- /dev/null +++ b/themes/red-grunge/about.txt @@ -0,0 +1,2 @@ +RED GRUNGE THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/red-grunge/fonts/licenses/slkscr.txt b/themes/red-grunge/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/red-grunge/fonts/licenses/slkscr.txt @@ -0,0 +1,25 @@ +Thank you for downloading Silkscreen, a type family for your Web graphics +by Jason Kottke (jason@kottke.org). + +To install the Silkscreen type family, unzip this file and drag the files +into the Fonts folder in the Control Panel. + +If you encounter any problems in using this font, please email me and I'll +see if I can try and fix it. Please note that I can't help you with any +installation issues. Please consult your system's help files for assistance. + +This font is free for personal and corporate use and may be redistributed in +this unmodified form on your Web site. I would ask that you not modify and +then redistribute this font...although you may modify it for your own +personal use. If you really like this font and use it often, feel free to +mail me (e- or snail mail) some small token of your appreciation. A URL +of your work using Silkscreen would be appreciated as well. + +All future bug fixes, updates, and additions to the Silkscreen type family +will be available on my Web site at the following URL: + +http://www.kottke.org/plus/type/silkscreen/index.html + +Again, thanks for downloading Silkscreen. Enjoy! + +-jason \ No newline at end of file diff --git a/themes/red-grunge/fonts/slkscr.ttf b/themes/red-grunge/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/themes/red-grunge/fonts/slkscr.ttf differ diff --git a/themes/red-grunge/images/background.jpg b/themes/red-grunge/images/background.jpg new file mode 100644 index 0000000..a52a384 Binary files /dev/null and b/themes/red-grunge/images/background.jpg differ diff --git a/themes/red-grunge/images/green-light-off.gif b/themes/red-grunge/images/green-light-off.gif new file mode 100644 index 0000000..d3d9971 Binary files /dev/null and b/themes/red-grunge/images/green-light-off.gif differ diff --git a/themes/red-grunge/images/green-light-on.gif b/themes/red-grunge/images/green-light-on.gif new file mode 100644 index 0000000..10d3853 Binary files /dev/null and b/themes/red-grunge/images/green-light-on.gif differ diff --git a/themes/red-grunge/images/info.png b/themes/red-grunge/images/info.png new file mode 100644 index 0000000..4532073 Binary files /dev/null and b/themes/red-grunge/images/info.png differ diff --git a/themes/red-grunge/images/mute.png b/themes/red-grunge/images/mute.png new file mode 100644 index 0000000..4a95ef4 Binary files /dev/null and b/themes/red-grunge/images/mute.png differ diff --git a/themes/red-grunge/images/next.png b/themes/red-grunge/images/next.png new file mode 100644 index 0000000..26b73b4 Binary files /dev/null and b/themes/red-grunge/images/next.png differ diff --git a/themes/red-grunge/images/pause.png b/themes/red-grunge/images/pause.png new file mode 100644 index 0000000..f71dd7d Binary files /dev/null and b/themes/red-grunge/images/pause.png differ diff --git a/themes/red-grunge/images/play.png b/themes/red-grunge/images/play.png new file mode 100644 index 0000000..889fcc7 Binary files /dev/null and b/themes/red-grunge/images/play.png differ diff --git a/themes/red-grunge/images/prev.png b/themes/red-grunge/images/prev.png new file mode 100644 index 0000000..1ec7092 Binary files /dev/null and b/themes/red-grunge/images/prev.png differ diff --git a/themes/red-grunge/images/slider.gif b/themes/red-grunge/images/slider.gif new file mode 100644 index 0000000..37eeae6 Binary files /dev/null and b/themes/red-grunge/images/slider.gif differ diff --git a/themes/red-grunge/images/sound.png b/themes/red-grunge/images/sound.png new file mode 100644 index 0000000..a979fac Binary files /dev/null and b/themes/red-grunge/images/sound.png differ diff --git a/themes/red-grunge/images/stop.png b/themes/red-grunge/images/stop.png new file mode 100644 index 0000000..b8210b1 Binary files /dev/null and b/themes/red-grunge/images/stop.png differ diff --git a/themes/red-grunge/logo.png b/themes/red-grunge/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/red-grunge/logo.png differ diff --git a/themes/red-grunge/webdeck-player.css b/themes/red-grunge/webdeck-player.css new file mode 100644 index 0000000..52bd00b --- /dev/null +++ b/themes/red-grunge/webdeck-player.css @@ -0,0 +1,345 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: Georgia, 'Times New Roman', Times, serif; + color: black; + background: black; +} + +select{ + margin-right: 1px; +} + +button{ + padding: 2px; + margin-right: 1px; + font-family: Georgia, 'Times New Roman', Times, serif; + text-transform: lowercase; + font-weight: bold; + color: white; + + background: #202020; + border: outset 2px #a42c2c; + border-radius: 2px; +} + +button:active{ + background: #000000; + border: outset 2px #6e1c1c; + border-radius: 2px; + box-shadow: none; +} + +.toggle-button[state='off'] > p::before{ + content: url(./images/green-light-off.gif); + margin-right: 3px; +} + +.toggle-button[state='on'] > p::before{ + content: url(./images/green-light-on.gif); + margin-right: 3px; +} + + +select{ + font-family: Georgia, 'Times New Roman', Times, serif; + text-transform: lowercase; + font-weight: bold; + color: white; + padding: 0 2px; + + background: #202020; + border: outset 2px #a42c2c; + border-radius: 2px; +} + +select option{ + background: black; +} + +select:active{ + background: #000000; + border: outset 2px #6e1c1c; + border-radius: 2px; + box-shadow: none; +} + + + + +/* Blink class */ +.blink { + animation: blinker 2s step-start infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + + +/* Columns section */ +.columns{ + display: flex; +} + +.columns > div:first-child{ + flex-shrink: 0; + margin-right: 5px; +} + +.columns > div:last-child{ + flex-grow: 1; +} + + + +/* -- Sliders -- */ +input[type="range"] { + appearance: none; + background: none; + border: inset 2px #2c2c2c; + + height: 5px; + margin-top: 7px; + margin-bottom: 7px; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + background-color: rgb(30, 30, 30); + height: 100%; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + + background: url(./images/slider.gif), linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #2c2c2c; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 20pt; + width: 12pt; + position: relative; + top: -10px; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + background: url(./images/slider.gif), linear-gradient(to top, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #2c2c2c; + border-radius: 2px; + box-shadow: none; +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to bottom, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: outset 2px #2c2c2c; + + border-radius: 2px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 1.5rem; + width: 0.8rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + background: url(./images/slider.gif), linear-gradient(to top, #4c4c4c 0%, #2c2c2c 100%);; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: inset 2px #2c2c2c; + border-radius: 2px; + box-shadow: none; +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; + margin-bottom: 2px; + color: #a42c2c; + text-transform: lowercase; + font-weight: bold; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; + border-top: ridge #a42c2c 2px; + border-bottom: ridge #a42c2c 2px; +} + +/* Player body */ +#player-body{ + padding: 5px; + border: groove 2px #282828; + background: url(./images/background.jpg); + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: inset 2px #282828; +} + + +/* Player info */ +#info-screen{ + background: black; + font-family: Silkscreen, monospace; + color: white; + border: inset 2px #282828; + margin-bottom: 5px; +} + +#songLabel{ + text-shadow: 0 0 10px #c84040, 0 0 20px #fc6b6b, 2px 2px 2px rgba(206,89,55,0); +} + +#statusLabel{ + text-shadow: 0 0 10px #c84040, 0 0 20px #fc6b6b, 2px 2px 2px rgba(206,89,55,0); +} + +.player-row{ + margin-top: 5px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; +} + +#volumeButton{ + height: 25px; + width: 25px; +} + +#volumeButton img{ + height: 100%; +} + +#volumeBar{ + width: 120px; +} + +#themeSelector{ + height: 25px; + max-width: 150px; + text-overflow: ellipsis; +} + +#videoButton{ + height: 25px; +} + +#playerLogo{ + text-align: center; + height: fit-content; +} + +#playerLogo > img{ + margin-top: 5px; + max-height: 50px; +} + +/* Player control panel */ +#player-control-panel{ + font-size: 0; +} + +#seekBar{ + width: 99%; + margin-bottom: 12px; +} + +.playing-controls{ + margin-bottom: 5px; + margin-right: 5px; + display: inline-block; + width: fit-content; + background: black; + vertical-align: middle; +} + +.playing-controls[rounded]{ + border-radius: 20px; +} + +.playing-controls[float-right]{ + float: right; +} + +.playing-controls button{ + height: 30px; + min-width: 50px; +} + +.playing-controls button img{ + height: 100%; +} + + +#infoButton{ + border-radius: 20px; + height: 30px; + min-width: 30px; + font-size: large; +} + +#playlistSelector{ + height: 30px; + max-width: 175px; + text-overflow: ellipsis; +} diff --git a/themes/silver/about.txt b/themes/silver/about.txt new file mode 100644 index 0000000..f02e3b8 --- /dev/null +++ b/themes/silver/about.txt @@ -0,0 +1,2 @@ +SILVER THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/silver/fonts/EurostileExtendedBlack.ttf b/themes/silver/fonts/EurostileExtendedBlack.ttf new file mode 100644 index 0000000..8856fbe Binary files /dev/null and b/themes/silver/fonts/EurostileExtendedBlack.ttf differ diff --git a/themes/silver/fonts/LED-Dot-Matrix.ttf b/themes/silver/fonts/LED-Dot-Matrix.ttf new file mode 100644 index 0000000..1be9221 Binary files /dev/null and b/themes/silver/fonts/LED-Dot-Matrix.ttf differ diff --git a/themes/silver/fonts/licenses/slkscr.txt b/themes/silver/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/silver/fonts/licenses/slkscr.txt @@ -0,0 +1,25 @@ +Thank you for downloading Silkscreen, a type family for your Web graphics +by Jason Kottke (jason@kottke.org). + +To install the Silkscreen type family, unzip this file and drag the files +into the Fonts folder in the Control Panel. + +If you encounter any problems in using this font, please email me and I'll +see if I can try and fix it. Please note that I can't help you with any +installation issues. Please consult your system's help files for assistance. + +This font is free for personal and corporate use and may be redistributed in +this unmodified form on your Web site. I would ask that you not modify and +then redistribute this font...although you may modify it for your own +personal use. If you really like this font and use it often, feel free to +mail me (e- or snail mail) some small token of your appreciation. A URL +of your work using Silkscreen would be appreciated as well. + +All future bug fixes, updates, and additions to the Silkscreen type family +will be available on my Web site at the following URL: + +http://www.kottke.org/plus/type/silkscreen/index.html + +Again, thanks for downloading Silkscreen. Enjoy! + +-jason \ No newline at end of file diff --git a/themes/silver/fonts/slkscr.ttf b/themes/silver/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/themes/silver/fonts/slkscr.ttf differ diff --git a/themes/silver/images/green-light-off.gif b/themes/silver/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/themes/silver/images/green-light-off.gif differ diff --git a/themes/silver/images/green-light-on.gif b/themes/silver/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/themes/silver/images/green-light-on.gif differ diff --git a/themes/silver/images/info.png b/themes/silver/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/themes/silver/images/info.png differ diff --git a/themes/silver/images/mute.png b/themes/silver/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/themes/silver/images/mute.png differ diff --git a/themes/silver/images/next.png b/themes/silver/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/themes/silver/images/next.png differ diff --git a/themes/silver/images/pause.png b/themes/silver/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/themes/silver/images/pause.png differ diff --git a/themes/silver/images/play.png b/themes/silver/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/themes/silver/images/play.png differ diff --git a/themes/silver/images/prev.png b/themes/silver/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/themes/silver/images/prev.png differ diff --git a/themes/silver/images/sound.png b/themes/silver/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/themes/silver/images/sound.png differ diff --git a/themes/silver/images/stop.png b/themes/silver/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/themes/silver/images/stop.png differ diff --git a/themes/silver/logo.png b/themes/silver/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/silver/logo.png differ diff --git a/themes/silver/webdeck-player.css b/themes/silver/webdeck-player.css new file mode 100644 index 0000000..fe67fdc --- /dev/null +++ b/themes/silver/webdeck-player.css @@ -0,0 +1,346 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} +@font-face {font-family: LED Dot-Matrix; src: url(./fonts/LED-Dot-Matrix.ttf);} +@font-face { + font-family: Eurostile; + src: url(./fonts/EurostileExtendedBlack.ttf); + font-weight: 900; +} + + +*{ + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: Silkscreen, monospace; + color: white; + 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%); +} + +select{ + margin-right: 1px; +} + +button{ + padding: 2px; + margin-right: 1px; + font-family: Silkscreen, monospace; + + 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%); + border: groove 2px white; + border-radius: 5px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +button:active{ + 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%); + border: groove 2px white; + border-radius: 5px; + box-shadow: none; +} + +.toggle-button[state='off'] > p::before{ + content: url(./images/green-light-off.gif); + margin-right: 3px; +} + +.toggle-button[state='on'] > p::before{ + content: url(./images/green-light-on.gif); + margin-right: 3px; +} + + +select{ + font-family: Silkscreen, monospace; + + 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%); + border: groove 2px white; + border-radius: 5px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + +select:active{ + 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%); + border: groove 2px white; + border-radius: 5px; + box-shadow: none; +} + + + + +/* Blink class */ +.blink { + animation: blinker 2s step-start infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + + +/* Columns section */ +.columns{ + display: flex; +} + +.columns > div:first-child{ + flex-shrink: 0; + margin-right: 5px; +} + +.columns > div:last-child{ + flex-grow: 1; +} + + + +/* -- Sliders -- */ +input[type="range"] { + appearance: none; + background: none; + border: solid 1px darkgray; + border-radius: 10px; + + height: 5px; + margin-top: 7px; + margin-bottom: 7px; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + 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%); + height: 100%; + border-radius: 10px; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + 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%); + height: 100%; + border-radius: 10px; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + position: relative; + top: -4px; + + 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%); + border: groove 2px white; + + border-radius: 10px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 0.8rem; + width: 1.8rem; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + 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%); + border: groove 2px white; + + border-radius: 10px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + 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%); + border: groove 2px white; + + border-radius: 10px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); + + height: 0.7rem; + width: 1.8rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + 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%); + border: groove 2px white; + + border-radius: 10px; + box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75); +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; + color: gray; + font-family: Eurostile, Arial, Helvetica, sans-serif; + font-weight: bold; + font-size: 10pt; + padding: 2px 0; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; + border-top: ridge silver 2px; + border-bottom: ridge silver 2px; +} + +/* Player body */ +#player-body{ + margin: 2px; + padding: 5px; + border: groove 2px silver; + border-radius: 5px; +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: solid 1px dimgray; + border-radius: 5px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); +} + + +/* Player info */ +#info-screen{ + background: radial-gradient(circle, rgb(89, 187, 248) 0%, rgb(56, 136, 248) 70%); + color: #0a3765; + border: solid 1px dimgray; + border-radius: 5px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); + margin-bottom: 5px; + padding: 2px; + font-family: "LED Dot-Matrix", monospace; + font-size: medium; +} + +#songLabel{ + background: #0a3765; + border-radius: 3px; + color: #3888f8; +} + +#statusLabel{ + margin: 2px 0; + border-top: 1.5px dotted #0a3765; + line-height: 0.9em; +} + +.player-row{ + margin-top: 5px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; +} + +#volumeButton{ + height: 25px; + width: 25px; +} + +#volumeButton img{ + height: 100%; +} + +#volumeBar{ + width: 120px; +} + +#themeSelector{ + height: 25px; + max-width: 150px; + text-overflow: ellipsis; +} + +#videoButton{ + height: 25px; +} + +#playerLogo{ + text-align: center; + height: fit-content; +} + +#playerLogo > img{ + margin-top: 5px; + max-height: 50px; +} + +/* Player control panel */ +#player-control-panel{ + font-size: 0; +} + +#seekBar{ + width: 99%; + margin-bottom: 12px; +} + +.playing-controls{ + margin-bottom: 5px; + margin-right: 5px; + display: inline-block; + width: fit-content; + background: none; + border-radius: 20px; + vertical-align: middle; +} + +.playing-controls[rounded]{ + border-radius: 20px; +} + +.playing-controls[float-right]{ + float: right; +} + +.playing-controls button{ + height: 30px; + min-width: 50px; +} + +.playing-controls button img{ + height: 100%; +} + + +#infoButton{ + border-radius: 20px; + height: 30px; + min-width: 30px; + font-size: large; +} + +#playlistSelector{ + height: 30px; + max-width: 175px; + text-overflow: ellipsis; +} diff --git a/themes/violet/about.txt b/themes/violet/about.txt new file mode 100644 index 0000000..89e5e66 --- /dev/null +++ b/themes/violet/about.txt @@ -0,0 +1,2 @@ +VIOLET THEME - FOR WEBDECK PLAYER +Created by Chris \ No newline at end of file diff --git a/themes/violet/fonts/DS-DIGII.TTF b/themes/violet/fonts/DS-DIGII.TTF new file mode 100644 index 0000000..2aae3d8 Binary files /dev/null and b/themes/violet/fonts/DS-DIGII.TTF differ diff --git a/themes/violet/fonts/EurostileExtendedBlack.ttf b/themes/violet/fonts/EurostileExtendedBlack.ttf new file mode 100644 index 0000000..8856fbe Binary files /dev/null and b/themes/violet/fonts/EurostileExtendedBlack.ttf differ diff --git a/themes/violet/fonts/licenses/DIGITAL.TXT b/themes/violet/fonts/licenses/DIGITAL.TXT new file mode 100644 index 0000000..484dd47 --- /dev/null +++ b/themes/violet/fonts/licenses/DIGITAL.TXT @@ -0,0 +1,40 @@ +DS-Font's TrueType Fonts +Font name: DS-Digital (Normal, Bold, Italic, Bold Italic), Version 1.0 +Author: Dusit Supasawat +Web Site: http://ds-font.hypermart.net +Contact me: Dusit Supasawat, 325/38 Suksawat32 Ratburana Bangkok Thailand 10140 +Email address: dusit@mailcity.com + +Thanks for trying! We hope you really enjoy this my typeface. This font is +distributed as shareware. You can use this font for a long time as you want. +After all, when you think this font can be usefulness for you. You can send +me some money, that would be way cool. + +I'm only asking $20 US shareware fee per this typeface for personal use. +And $45 US is the usual amount per this typeface for commercial use. + +Distribution: You are free to distribute this archive so long as this text +file is distributed with the archive, the font file have not been modified, +and it is understood that the font's copyright remains with the original +author (Dusit Supasawat). + +To register send your payment to: + +Dusit Supasawat +325/38 Suksawat32 Ratburana +Bangkok Thailand 10140 + +And fill out something as this order form, and send it in with your payment. + +Font name:_________________________________________ +Your information +Name:______________________________________________ +Address:___________________________________________ +City, State : _____________________________________ +Zip Code:__________________________________________ +Country:___________________________________________ +E-MAIL address:____________________________________ + + +You will receive fonts which you order by Email after registration. These fonts +will be generated for you by specify your name in font information. \ No newline at end of file diff --git a/themes/violet/fonts/licenses/slkscr.txt b/themes/violet/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/themes/violet/fonts/licenses/slkscr.txt @@ -0,0 +1,25 @@ +Thank you for downloading Silkscreen, a type family for your Web graphics +by Jason Kottke (jason@kottke.org). + +To install the Silkscreen type family, unzip this file and drag the files +into the Fonts folder in the Control Panel. + +If you encounter any problems in using this font, please email me and I'll +see if I can try and fix it. Please note that I can't help you with any +installation issues. Please consult your system's help files for assistance. + +This font is free for personal and corporate use and may be redistributed in +this unmodified form on your Web site. I would ask that you not modify and +then redistribute this font...although you may modify it for your own +personal use. If you really like this font and use it often, feel free to +mail me (e- or snail mail) some small token of your appreciation. A URL +of your work using Silkscreen would be appreciated as well. + +All future bug fixes, updates, and additions to the Silkscreen type family +will be available on my Web site at the following URL: + +http://www.kottke.org/plus/type/silkscreen/index.html + +Again, thanks for downloading Silkscreen. Enjoy! + +-jason \ No newline at end of file diff --git a/themes/violet/images/green-light-off.gif b/themes/violet/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/themes/violet/images/green-light-off.gif differ diff --git a/themes/violet/images/green-light-on.gif b/themes/violet/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/themes/violet/images/green-light-on.gif differ diff --git a/themes/violet/images/info.png b/themes/violet/images/info.png new file mode 100644 index 0000000..4532073 Binary files /dev/null and b/themes/violet/images/info.png differ diff --git a/themes/violet/images/mute.png b/themes/violet/images/mute.png new file mode 100644 index 0000000..4a95ef4 Binary files /dev/null and b/themes/violet/images/mute.png differ diff --git a/themes/violet/images/next.png b/themes/violet/images/next.png new file mode 100644 index 0000000..26b73b4 Binary files /dev/null and b/themes/violet/images/next.png differ diff --git a/themes/violet/images/pause.png b/themes/violet/images/pause.png new file mode 100644 index 0000000..f71dd7d Binary files /dev/null and b/themes/violet/images/pause.png differ diff --git a/themes/violet/images/play.png b/themes/violet/images/play.png new file mode 100644 index 0000000..889fcc7 Binary files /dev/null and b/themes/violet/images/play.png differ diff --git a/themes/violet/images/prev.png b/themes/violet/images/prev.png new file mode 100644 index 0000000..1ec7092 Binary files /dev/null and b/themes/violet/images/prev.png differ diff --git a/themes/violet/images/sound.png b/themes/violet/images/sound.png new file mode 100644 index 0000000..a979fac Binary files /dev/null and b/themes/violet/images/sound.png differ diff --git a/themes/violet/images/stop.png b/themes/violet/images/stop.png new file mode 100644 index 0000000..b8210b1 Binary files /dev/null and b/themes/violet/images/stop.png differ diff --git a/themes/violet/logo.png b/themes/violet/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/themes/violet/logo.png differ diff --git a/themes/violet/webdeck-player.css b/themes/violet/webdeck-player.css new file mode 100644 index 0000000..7596ad5 --- /dev/null +++ b/themes/violet/webdeck-player.css @@ -0,0 +1,351 @@ +/* Font import */ +@font-face {font-family: DS-Digital; src: url(./fonts/DS-DIGII.TTF);} +@font-face { + font-family: Eurostile; + src: url(./fonts/EurostileExtendedBlack.ttf); + font-weight: 900; +} + +*{ + margin: 0; + padding: 0; +} + +html, body { + height: 100%; +} + +body{ + display: flex; + justify-content: center; + align-items: center; + font-family: monospace; + color: white; + background: linear-gradient(90deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); +} + +select{ + margin-right: 1px; +} + +button{ + padding: 4px; + margin-right: 1px; + font-family: Eurostile, monospace; + text-transform: uppercase; + font-weight: bold; + font-size: 8pt; + color: gainsboro; + + background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 2px gray; + border-radius: 20px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); +} + +button:active{ + background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 2px gray; + border-radius: 20px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); +} + +.toggle-button[state='off'] > p::before{ + content: url(./images/green-light-off.gif); + margin-right: 3px; +} + +.toggle-button[state='on'] > p::before{ + content: url(./images/green-light-on.gif); + margin-right: 3px; +} + + +select{ + font-family: Eurostile, monospace; + text-transform: uppercase; + font-weight: bold; + font-size: 8pt; + color: gainsboro; + padding:0 5px; + + background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 2px gray; + border-radius: 20px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); +} + +select option{ + background: black; +} + +select:active{ + background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 2px gray; + border-radius: 20px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); +} + + + + +/* Blink class */ +.blink { + animation: blinker 2s step-start infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} + + +/* Columns section */ +.columns{ + display: flex; +} + +.columns > div:first-child{ + flex-shrink: 0; + margin-right: 5px; +} + +.columns > div:last-child{ + flex-grow: 1; +} + + + +/* -- Sliders -- */ +input[type="range"] { + appearance: none; + background: none; + border: solid 1px darkgray; + border-radius: 10px; + + height: 5px; + margin-top: 7px; + margin-bottom: 7px; +} + +/* slider track */ +input[type="range"]::-webkit-slider-runnable-track /* For Chrome */ { + 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%); + height: 100%; + border-radius: 10px; +} + +input[type="range"]::-moz-range-track /* For Firefox */ { + 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%); + height: 100%; + border-radius: 10px; +} + +/* slider thumb */ +input[type="range"]::-webkit-slider-thumb /* For Chrome */ { + appearance: none; + position: relative; + top: -4px; + + background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 1px gainsboro; + border-radius: 20px; + + border-radius: 5px; + box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); + + height: 0.8rem; + width: 1.5rem; +} + +input[type="range"]::-webkit-slider-thumb:active /* For Chrome */ { + background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 2px gainsboro; + + border-radius: 10px; + box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); +} + + + +input[type="range"]::-moz-range-thumb /* For Firefox */ { + background: linear-gradient(180deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 1px gainsboro; + border-radius: 20px; + + border-radius: 5px; + box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); + + height: 0.8rem; + width: 1.5rem; +} + +input[type="range"]::-moz-range-thumb:active /* For Firefox */ { + background: linear-gradient(0deg, rgba(129,129,129,1) 0%, rgba(96,96,96,1) 10%, rgba(30,30,30,1) 90%); + border: groove 2px gainsboro; + + border-radius: 10px; + box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.75); +} + + + +/* ---- Web Deck Player ---- */ +#web-deck-player{ + padding: 0 5px; +} + + +/* Player title bar */ +#player-title-bar{ + display: flex; + color: gainsboro; + font-family: Eurostile, Arial, Helvetica, sans-serif; + font-weight: bold; + font-size: 10pt; +} + +#player-title-bar:before, +#player-title-bar:after{ + content: ""; + flex: 1; + margin: auto 1em; + height: 2px; + border-top: ridge white 2px; + border-bottom: ridge white 2px; +} + +/* Player body */ +#player-body{ + margin: 2px; + padding: 5px; + border: inset 2px dimgray; + border-radius: 5px; + border-bottom-left-radius: 8%; + border-bottom-right-radius: 8%; + background: linear-gradient(90deg, rgb(222, 206, 247) 0%, rgba(184,151,235,1) 10%, rgba(84,60,124,1) 90%); +} + +/* Player main section */ +#player-main-section{ + margin-bottom: 5px; +} + + +/* Player display */ +#player-display{ + width: 250px; + height: 140px; + background: black; + border: solid 1px dimgray; + border-radius: 5px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); +} + + +/* Player info */ +#info-screen{ + background: #8c9569; + color: black; + border: solid 1px dimgray; + border-radius: 5px; + box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.75), 0px -1px 0px 0px rgba(0, 0, 0, 0.75); + margin-bottom: 5px; + padding: 2px; + font-family: DS-Digital, monospace; + font-size: large; + letter-spacing: 0.1em; +} + +.player-row{ + margin-top: 5px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; +} + +#volumeButton{ + height: 25px; + width: 25px; +} + +#volumeButton img{ + height: 100%; +} + +#volumeBar{ + width: 120px; +} + +#themeSelector{ + height: 25px; + max-width: 150px; + text-overflow: ellipsis; +} + +#videoButton{ + height: 25px; +} + +#playerLogo{ + text-align: center; + height: fit-content; +} + +#playerLogo > img{ + margin-top: 5px; + max-height: 50px; +} + +/* Player control panel */ +#player-control-panel{ + font-size: 0; +} + +#seekBar{ + width: 99%; + margin-bottom: 12px; +} + +.playing-controls{ + margin-bottom: 5px; + margin-right: 5px; + padding: 3px; + display: inline-block; + width: fit-content; + background: none; + border-radius: 5px; + vertical-align: middle; +} + +.playing-controls[rounded]{ + border-radius: 20px; +} + +.playing-controls[float-right]{ + float: right; +} + +.playing-controls button{ + height: 30px; + min-width: 50px; +} + +.playing-controls button img{ + height: 100%; +} + + +#infoButton{ + border-radius: 20px; + height: 30px; + min-width: 30px; + font-size: large; +} + +#playlistSelector{ + height: 30px; + max-width: 175px; + text-overflow: ellipsis; +} -- cgit v1.2.3-59-g8ed1b