diff options
88 files changed, 2412 insertions, 0 deletions
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 @@ + + + +# 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 + + + +[](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: +`<button onclick="window.open('/webdeck-player/index.html', 'Web Deck Player', 'height=250, width=600')">Open Web Deck Player</button>` +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: +`<iframe src="/webdeck-player/index.html" height="250" width="600"></iframe>` + +### 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 @@ +<!DOCTYPE html>
+
+<html lang="en">
+ <head>
+ <meta charset="utf-8" lang="en"/>
+ <meta name="author" content="Chris"/>
+ <meta name="description" content=""/>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <title>silent suburbia</title>
+ <link rel="icon" type="image/x-icon" href="/favicon.ico">
+ <link id="player-theme" rel="stylesheet" href="./themes/default/webdeck-player.css">
+ </head>
+
+ <body>
+
+ <div id="content">
+
+ <div id="web-deck-player">
+
+ <div id="player-title-bar">
+ GENOS JACKBOX
+ </div>
+
+ <div id="player-body">
+ <div id="player-main-section">
+ <div class="columns">
+ <div id="player-display">
+ <div id="youtube-player"></div>
+ </div>
+
+ <div id="player-info">
+ <div id="info-screen">
+ <p id="songLabel"><b>Loading...</b></p>
+ <div id="statusLabel"><br></div>
+ </div>
+
+ <div class="player-row">
+ <div id="player-volume">
+ <button id="volumeButton" title="Mute / Unmute"></button>
+ <input type="range" id="volumeBar" title="Volume" min="0" max="100" value="50">
+ </div>
+
+ <select id="themeSelector" title="Select Theme">
+ <!-- themes are injected with javascript -->
+ </select>
+ </div>
+
+ <div class="player-row">
+ <button id="videoButton" class="toggle-button" state="on" title="Toggle Video"><p>Video</p></button>
+
+ <div id="playerLogo"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="player-control-panel">
+ <input type="range" id="seekBar" title="Seek" value="0">
+ <br>
+
+ <div class="playing-controls">
+ <button id="prevButton" title="Previous Track"></button>
+ <button id="playButton" title="Play / Pause"></button>
+ <button id="stopButton" title="Stop"></button>
+ <button id="nextButton" title="Next Track"></button>
+ </div>
+
+ <div class="playing-controls">
+ <button id="shuffleButton" class="toggle-button" state="off" title="Toggle Shuffle"><p>Shuffle</p></button>
+ </div>
+
+
+
+ <div class="playing-controls" float-right>
+ <select id="playlistSelector" title="Select Playlist">
+ <!-- playlists are injected with javascript -->
+ </select>
+ </div>
+
+ <div class="playing-controls" rounded float-right>
+ <button id="infoButton" title="Info"></button>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+ <script src="./script.js"></script>
+
+ </div>
+
+ </body>
+</html>
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 = "<img src='./themes/" + myThemes[currentTheme] + "/images/sound.png' alt=''>";
+var volumeBar = document.getElementById("volumeBar");
+var isSlidingVolumeBar = false;
+var videoButton = document.getElementById("videoButton");
+var isVideoShowing = true;
+
+var logo = document.getElementById("playerLogo");
+logo.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/logo.png' alt=''>";
+
+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 = "<img src='./themes/" + myThemes[currentTheme] + "/images/prev.png' alt=''>";
+playButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/play.png' alt=''>";
+stopButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/stop.png' alt=''>";
+nextButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/next.png' alt=''>";
+infoButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/info.png' alt=''>";
+
+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 = "<b>READY</b>";
+ }
+ else{
+ songLabel.innerHTML = "<marquee><b>" + player.getVideoData().title + " - " + player.getVideoData().author + "</b></marquee>";
+ }
+ }else{
+ songLabel.innerHTML = "<b>Loading...</b>";
+ }
+}
+
+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 = "<img src='./themes/" + myThemes[currentTheme] + "/images/mute.png' alt=''>";
+ }
+ else{
+ player.setVolume(savedVolume);
+ volumeBar.value = savedVolume;
+ volumeButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/sound.png' alt=''>";
+ }
+
+});
+
+volumeBar.addEventListener("input", function(){
+ isSlidingVolumeBar = true;
+ player.setVolume(this.value);
+ if(volumeBar.value == 0){
+ volumeButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/mute.png' alt=''>";
+ }
+ else{
+ volumeButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/sound.png' alt=''>";
+ }
+});
+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 = "<img src='./themes/" + myThemes[currentTheme] + "/images/sound.png' alt=''>";
+ prevButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/prev.png' alt=''>";
+ playButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/play.png' alt=''>";
+ stopButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/stop.png' alt=''>";
+ nextButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/next.png' alt=''>";
+ infoButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/info.png' alt=''>";
+});
+
+
+
+
+
+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 = "<img src='./themes/" + myThemes[currentTheme] + "/images/pause.png' alt=''>";
+ }
+ else {
+ playButton.innerHTML = "<img src='./themes/" + myThemes[currentTheme] + "/images/play.png' alt=''>";
+ }
+
+
+ //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 Binary files differnew file mode 100644 index 0000000..85a2037 --- /dev/null +++ b/themes/default/fonts/slkscr.ttf diff --git a/themes/default/images/green-light-off.gif b/themes/default/images/green-light-off.gif Binary files differnew file mode 100644 index 0000000..eb106e4 --- /dev/null +++ b/themes/default/images/green-light-off.gif diff --git a/themes/default/images/green-light-on.gif b/themes/default/images/green-light-on.gif Binary files differnew file mode 100644 index 0000000..1001fb9 --- /dev/null +++ b/themes/default/images/green-light-on.gif diff --git a/themes/default/images/info.png b/themes/default/images/info.png Binary files differnew file mode 100644 index 0000000..1b49e2c --- /dev/null +++ b/themes/default/images/info.png diff --git a/themes/default/images/mute.png b/themes/default/images/mute.png Binary files differnew file mode 100644 index 0000000..7c8466a --- /dev/null +++ b/themes/default/images/mute.png diff --git a/themes/default/images/next.png b/themes/default/images/next.png Binary files differnew file mode 100644 index 0000000..5367e4d --- /dev/null +++ b/themes/default/images/next.png diff --git a/themes/default/images/pause.png b/themes/default/images/pause.png Binary files differnew file mode 100644 index 0000000..af51e03 --- /dev/null +++ b/themes/default/images/pause.png diff --git a/themes/default/images/play.png b/themes/default/images/play.png Binary files differnew file mode 100644 index 0000000..958ce5b --- /dev/null +++ b/themes/default/images/play.png diff --git a/themes/default/images/prev.png b/themes/default/images/prev.png Binary files differnew file mode 100644 index 0000000..bb3ff27 --- /dev/null +++ b/themes/default/images/prev.png diff --git a/themes/default/images/slider.gif b/themes/default/images/slider.gif Binary files differnew file mode 100644 index 0000000..86a5b9f --- /dev/null +++ b/themes/default/images/slider.gif diff --git a/themes/default/images/sound.png b/themes/default/images/sound.png Binary files differnew file mode 100644 index 0000000..7271d16 --- /dev/null +++ b/themes/default/images/sound.png diff --git a/themes/default/images/stop.png b/themes/default/images/stop.png Binary files differnew file mode 100644 index 0000000..365fedd --- /dev/null +++ b/themes/default/images/stop.png diff --git a/themes/default/logo.png b/themes/default/logo.png Binary files differnew file mode 100644 index 0000000..730c4e5 --- /dev/null +++ b/themes/default/logo.png 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 Binary files differnew file mode 100644 index 0000000..85a2037 --- /dev/null +++ b/themes/minimal/fonts/slkscr.ttf diff --git a/themes/minimal/images/green-light-off.gif b/themes/minimal/images/green-light-off.gif Binary files differnew file mode 100644 index 0000000..eb106e4 --- /dev/null +++ b/themes/minimal/images/green-light-off.gif diff --git a/themes/minimal/images/green-light-on.gif b/themes/minimal/images/green-light-on.gif Binary files differnew file mode 100644 index 0000000..1001fb9 --- /dev/null +++ b/themes/minimal/images/green-light-on.gif diff --git a/themes/minimal/images/info.png b/themes/minimal/images/info.png Binary files differnew file mode 100644 index 0000000..1b49e2c --- /dev/null +++ b/themes/minimal/images/info.png diff --git a/themes/minimal/images/mute.png b/themes/minimal/images/mute.png Binary files differnew file mode 100644 index 0000000..7c8466a --- /dev/null +++ b/themes/minimal/images/mute.png diff --git a/themes/minimal/images/next.png b/themes/minimal/images/next.png Binary files differnew file mode 100644 index 0000000..5367e4d --- /dev/null +++ b/themes/minimal/images/next.png diff --git a/themes/minimal/images/pause.png b/themes/minimal/images/pause.png Binary files differnew file mode 100644 index 0000000..af51e03 --- /dev/null +++ b/themes/minimal/images/pause.png diff --git a/themes/minimal/images/play.png b/themes/minimal/images/play.png Binary files differnew file mode 100644 index 0000000..958ce5b --- /dev/null +++ b/themes/minimal/images/play.png diff --git a/themes/minimal/images/prev.png b/themes/minimal/images/prev.png Binary files differnew file mode 100644 index 0000000..bb3ff27 --- /dev/null +++ b/themes/minimal/images/prev.png diff --git a/themes/minimal/images/slider.gif b/themes/minimal/images/slider.gif Binary files differnew file mode 100644 index 0000000..2d9e1ff --- /dev/null +++ b/themes/minimal/images/slider.gif diff --git a/themes/minimal/images/sound.png b/themes/minimal/images/sound.png Binary files differnew file mode 100644 index 0000000..7271d16 --- /dev/null +++ b/themes/minimal/images/sound.png diff --git a/themes/minimal/images/stop.png b/themes/minimal/images/stop.png Binary files differnew file mode 100644 index 0000000..365fedd --- /dev/null +++ b/themes/minimal/images/stop.png diff --git a/themes/minimal/logo.png b/themes/minimal/logo.png Binary files differnew file mode 100644 index 0000000..730c4e5 --- /dev/null +++ b/themes/minimal/logo.png 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 Binary files differnew file mode 100644 index 0000000..85a2037 --- /dev/null +++ b/themes/red-grunge/fonts/slkscr.ttf diff --git a/themes/red-grunge/images/background.jpg b/themes/red-grunge/images/background.jpg Binary files differnew file mode 100644 index 0000000..a52a384 --- /dev/null +++ b/themes/red-grunge/images/background.jpg diff --git a/themes/red-grunge/images/green-light-off.gif b/themes/red-grunge/images/green-light-off.gif Binary files differnew file mode 100644 index 0000000..d3d9971 --- /dev/null +++ b/themes/red-grunge/images/green-light-off.gif diff --git a/themes/red-grunge/images/green-light-on.gif b/themes/red-grunge/images/green-light-on.gif Binary files differnew file mode 100644 index 0000000..10d3853 --- /dev/null +++ b/themes/red-grunge/images/green-light-on.gif diff --git a/themes/red-grunge/images/info.png b/themes/red-grunge/images/info.png Binary files differnew file mode 100644 index 0000000..4532073 --- /dev/null +++ b/themes/red-grunge/images/info.png diff --git a/themes/red-grunge/images/mute.png b/themes/red-grunge/images/mute.png Binary files differnew file mode 100644 index 0000000..4a95ef4 --- /dev/null +++ b/themes/red-grunge/images/mute.png diff --git a/themes/red-grunge/images/next.png b/themes/red-grunge/images/next.png Binary files differnew file mode 100644 index 0000000..26b73b4 --- /dev/null +++ b/themes/red-grunge/images/next.png diff --git a/themes/red-grunge/images/pause.png b/themes/red-grunge/images/pause.png Binary files differnew file mode 100644 index 0000000..f71dd7d --- /dev/null +++ b/themes/red-grunge/images/pause.png diff --git a/themes/red-grunge/images/play.png b/themes/red-grunge/images/play.png Binary files differnew file mode 100644 index 0000000..889fcc7 --- /dev/null +++ b/themes/red-grunge/images/play.png diff --git a/themes/red-grunge/images/prev.png b/themes/red-grunge/images/prev.png Binary files differnew file mode 100644 index 0000000..1ec7092 --- /dev/null +++ b/themes/red-grunge/images/prev.png diff --git a/themes/red-grunge/images/slider.gif b/themes/red-grunge/images/slider.gif Binary files differnew file mode 100644 index 0000000..37eeae6 --- /dev/null +++ b/themes/red-grunge/images/slider.gif diff --git a/themes/red-grunge/images/sound.png b/themes/red-grunge/images/sound.png Binary files differnew file mode 100644 index 0000000..a979fac --- /dev/null +++ b/themes/red-grunge/images/sound.png diff --git a/themes/red-grunge/images/stop.png b/themes/red-grunge/images/stop.png Binary files differnew file mode 100644 index 0000000..b8210b1 --- /dev/null +++ b/themes/red-grunge/images/stop.png diff --git a/themes/red-grunge/logo.png b/themes/red-grunge/logo.png Binary files differnew file mode 100644 index 0000000..730c4e5 --- /dev/null +++ b/themes/red-grunge/logo.png 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 Binary files differnew file mode 100644 index 0000000..8856fbe --- /dev/null +++ b/themes/silver/fonts/EurostileExtendedBlack.ttf diff --git a/themes/silver/fonts/LED-Dot-Matrix.ttf b/themes/silver/fonts/LED-Dot-Matrix.ttf Binary files differnew file mode 100644 index 0000000..1be9221 --- /dev/null +++ b/themes/silver/fonts/LED-Dot-Matrix.ttf 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 Binary files differnew file mode 100644 index 0000000..85a2037 --- /dev/null +++ b/themes/silver/fonts/slkscr.ttf diff --git a/themes/silver/images/green-light-off.gif b/themes/silver/images/green-light-off.gif Binary files differnew file mode 100644 index 0000000..eb106e4 --- /dev/null +++ b/themes/silver/images/green-light-off.gif diff --git a/themes/silver/images/green-light-on.gif b/themes/silver/images/green-light-on.gif Binary files differnew file mode 100644 index 0000000..1001fb9 --- /dev/null +++ b/themes/silver/images/green-light-on.gif diff --git a/themes/silver/images/info.png b/themes/silver/images/info.png Binary files differnew file mode 100644 index 0000000..1b49e2c --- /dev/null +++ b/themes/silver/images/info.png diff --git a/themes/silver/images/mute.png b/themes/silver/images/mute.png Binary files differnew file mode 100644 index 0000000..7c8466a --- /dev/null +++ b/themes/silver/images/mute.png diff --git a/themes/silver/images/next.png b/themes/silver/images/next.png Binary files differnew file mode 100644 index 0000000..5367e4d --- /dev/null +++ b/themes/silver/images/next.png diff --git a/themes/silver/images/pause.png b/themes/silver/images/pause.png Binary files differnew file mode 100644 index 0000000..af51e03 --- /dev/null +++ b/themes/silver/images/pause.png diff --git a/themes/silver/images/play.png b/themes/silver/images/play.png Binary files differnew file mode 100644 index 0000000..958ce5b --- /dev/null +++ b/themes/silver/images/play.png diff --git a/themes/silver/images/prev.png b/themes/silver/images/prev.png Binary files differnew file mode 100644 index 0000000..bb3ff27 --- /dev/null +++ b/themes/silver/images/prev.png diff --git a/themes/silver/images/sound.png b/themes/silver/images/sound.png Binary files differnew file mode 100644 index 0000000..7271d16 --- /dev/null +++ b/themes/silver/images/sound.png diff --git a/themes/silver/images/stop.png b/themes/silver/images/stop.png Binary files differnew file mode 100644 index 0000000..365fedd --- /dev/null +++ b/themes/silver/images/stop.png diff --git a/themes/silver/logo.png b/themes/silver/logo.png Binary files differnew file mode 100644 index 0000000..730c4e5 --- /dev/null +++ b/themes/silver/logo.png 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 Binary files differnew file mode 100644 index 0000000..2aae3d8 --- /dev/null +++ b/themes/violet/fonts/DS-DIGII.TTF diff --git a/themes/violet/fonts/EurostileExtendedBlack.ttf b/themes/violet/fonts/EurostileExtendedBlack.ttf Binary files differnew file mode 100644 index 0000000..8856fbe --- /dev/null +++ b/themes/violet/fonts/EurostileExtendedBlack.ttf 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 Binary files differnew file mode 100644 index 0000000..eb106e4 --- /dev/null +++ b/themes/violet/images/green-light-off.gif diff --git a/themes/violet/images/green-light-on.gif b/themes/violet/images/green-light-on.gif Binary files differnew file mode 100644 index 0000000..1001fb9 --- /dev/null +++ b/themes/violet/images/green-light-on.gif diff --git a/themes/violet/images/info.png b/themes/violet/images/info.png Binary files differnew file mode 100644 index 0000000..4532073 --- /dev/null +++ b/themes/violet/images/info.png diff --git a/themes/violet/images/mute.png b/themes/violet/images/mute.png Binary files differnew file mode 100644 index 0000000..4a95ef4 --- /dev/null +++ b/themes/violet/images/mute.png diff --git a/themes/violet/images/next.png b/themes/violet/images/next.png Binary files differnew file mode 100644 index 0000000..26b73b4 --- /dev/null +++ b/themes/violet/images/next.png diff --git a/themes/violet/images/pause.png b/themes/violet/images/pause.png Binary files differnew file mode 100644 index 0000000..f71dd7d --- /dev/null +++ b/themes/violet/images/pause.png diff --git a/themes/violet/images/play.png b/themes/violet/images/play.png Binary files differnew file mode 100644 index 0000000..889fcc7 --- /dev/null +++ b/themes/violet/images/play.png diff --git a/themes/violet/images/prev.png b/themes/violet/images/prev.png Binary files differnew file mode 100644 index 0000000..1ec7092 --- /dev/null +++ b/themes/violet/images/prev.png diff --git a/themes/violet/images/sound.png b/themes/violet/images/sound.png Binary files differnew file mode 100644 index 0000000..a979fac --- /dev/null +++ b/themes/violet/images/sound.png diff --git a/themes/violet/images/stop.png b/themes/violet/images/stop.png Binary files differnew file mode 100644 index 0000000..b8210b1 --- /dev/null +++ b/themes/violet/images/stop.png diff --git a/themes/violet/logo.png b/themes/violet/logo.png Binary files differnew file mode 100644 index 0000000..730c4e5 --- /dev/null +++ b/themes/violet/logo.png 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;
+}
|
