commit acdb3689d7bee7ffd674ec619189fb3f0f66f635 Author: Ruds Date: Sat Dec 13 01:26:09 2025 +0000 feat: initial commit diff --git a/badges/email_me.gif b/badges/email_me.gif new file mode 100644 index 0000000..e003e98 Binary files /dev/null and b/badges/email_me.gif differ diff --git a/badges/ie.gif b/badges/ie.gif new file mode 100644 index 0000000..e78cebb Binary files /dev/null and b/badges/ie.gif differ diff --git a/badges/wget.gif b/badges/wget.gif new file mode 100644 index 0000000..3bff9d2 Binary files /dev/null and b/badges/wget.gif differ diff --git a/badges/why-aol-image.gif b/badges/why-aol-image.gif new file mode 100644 index 0000000..9e1e852 Binary files /dev/null and b/badges/why-aol-image.gif differ diff --git a/badges/written_in_vi.gif b/badges/written_in_vi.gif new file mode 100644 index 0000000..98289d7 Binary files /dev/null and b/badges/written_in_vi.gif differ diff --git a/badges/yay_its_a_button.gif b/badges/yay_its_a_button.gif new file mode 100644 index 0000000..215ab9c Binary files /dev/null and b/badges/yay_its_a_button.gif differ diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..ccecddd --- /dev/null +++ b/blog.html @@ -0,0 +1,85 @@ + + + + + + blog - EmoDied + + + + + + + + + +
+

hello there, kind stranger \o/

+
+
+
+
+
+
pages
+
+ + + +
+
+
+ +
+
+
+
+
+
+
blogpost viewer
+
+ + + +
+
+
+
+
+
+
+
+
blog
+
+ + + +
+
+
+
    +
    +
    +
    +
    + + + + + + + + \ No newline at end of file diff --git a/fonts/ComicRelief-Bold.ttf b/fonts/ComicRelief-Bold.ttf new file mode 100644 index 0000000..7b86246 Binary files /dev/null and b/fonts/ComicRelief-Bold.ttf differ diff --git a/global.css b/global.css new file mode 100644 index 0000000..44f2bca --- /dev/null +++ b/global.css @@ -0,0 +1,104 @@ +@font-face { + font-family: 'Comic Relief'; + src: url('fonts/ComicRelief-Bold.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +html { + background-color: #008080; + background-repeat: repeat; + background-attachment: fixed; + background-position: center center; + + min-width: 350px; + font-size: 1.25em; + + width: 100%; + height: 100%; +} + +body { + margin: 1em auto; + width: 100%; + max-width: 1000px; + line-height: 1.25; + font-size: 0.9em; + font-family: 'Comic Relief', serif; +} + +.header { + color: white; + margin: 2em 0; +} + +.container { + display: flex; + + flex-direction: row; + gap: 1em; +} + +.subcontainer { + display: flex; + + flex-direction: column; + gap: 20px; +} + +.box-lp { + flex: 1; +} + +.box-content { + flex: 4; +} + +.box-rp { + flex: 1; +} + +@media (width < 1200px) { + body { + max-width: calc(100% - 2em); + } +} + +@media (width < 600px) { + .container { + flex-direction: column; + } +} + +td { + vertical-align: top; +} + +td:first-child { + font-weight: bold; +} + + +h1 { + font-size: 2em; +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 1.25em; +} + +h4,h5,h6 { + font-size: 1.1em; +} + +ul { + padding-left: 1em; +} + +div { + font-size: 1.2em; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..17efa8c --- /dev/null +++ b/index.html @@ -0,0 +1,114 @@ + + + + + + home - ruds.io + + + + + + + + + +
    +

    hello there, kind stranger \o/

    +
    +
    +
    +
    +
    +
    pages
    +
    + + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    about me
    +
    + + + +
    +
    +
    +

    hiya! :) I'm Rudra, a 16-year-old with some nerdy tendencies - these include a love for anything and everything technology (anything Linux-related in particular), as well as a liking for emo, post-hardcore and Romantic-era classical music!

    + + + + + + + +
    +
    +
    +
    +
    projects (& past projects)
    +
    + + + +
    +
    +
    +
      +
    • blendOS: an atomic and immutable Linux distribution
      • +
    • Ubuntu Unity: a flavour of Ubuntu that uses the Unity desktop environment
      • +
    • Ubuntu Web: a privacy-respecting ChromeOS alternative
      • +
    • una: a client for the makedeb Package Repository
      • +
    • Gamebuntu: a utility to set up a gaming environment on Ubuntu
      • +
    • Modren: a modern Linux store
      • +
    • UbuntuEd: an educational Ubuntu remix (superseded by Edubuntu)
      • +
    +
    +
    +
    +
    +
    music player
    +
    + + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    blog
    +
    + + + +
    +
    +
    +
      +
      +
      +
      +
      + + + + diff --git a/neocities.png b/neocities.png new file mode 100644 index 0000000..73e6030 Binary files /dev/null and b/neocities.png differ diff --git a/not_found.html b/not_found.html new file mode 100644 index 0000000..5c94fe2 --- /dev/null +++ b/not_found.html @@ -0,0 +1,13 @@ + + + + + + Not Found + + + +

      Page Not Found

      +

      The requested page was not found.

      + + diff --git a/pages/credits.html b/pages/credits.html new file mode 100644 index 0000000..ce30b2a --- /dev/null +++ b/pages/credits.html @@ -0,0 +1,80 @@ + + + + + + home - ruds.io + + + + + + + + + +
      +

      hello there, kind stranger \o/

      +
      +
      +
      +
      +
      +
      pages
      +
      + + + +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      credits
      +
      + + + +
      +
      +
      + +
      +
      +
      +
      +
      +
      +
      blog
      +
      + + + +
      +
      +
      +
        +
        +
        +
        +
        + + + + diff --git a/pages/notes.html b/pages/notes.html new file mode 100644 index 0000000..26d6719 --- /dev/null +++ b/pages/notes.html @@ -0,0 +1,73 @@ + + + + + + home - ruds.io + + + + + + + + + +
        +

        hello there, kind stranger \o/

        +
        +
        +
        +
        +
        +
        pages
        +
        + + + +
        +
        +
        + +
        +
        +
        +
        +
        +
        +
        credits
        +
        + + + +
        +
        +
        +

        This page is presently empty; enjoy the quiet while it lasts.

        +
        +
        +
        +
        +
        +
        +
        blog
        +
        + + + +
        +
        +
        +
          +
          +
          +
          +
          + + + + diff --git a/pages/politics.html b/pages/politics.html new file mode 100644 index 0000000..e69de29 diff --git a/posts.js b/posts.js new file mode 100644 index 0000000..657a3bf --- /dev/null +++ b/posts.js @@ -0,0 +1,9 @@ +let posts = { + 'first post!': 'first-post' +} + +Object.keys(posts).forEach(post => { + document.getElementById('posts_list').innerHTML += ` +
        • ${post}
          • + ` +}); \ No newline at end of file diff --git a/posts/first-post.md b/posts/first-post.md new file mode 100644 index 0000000..cbd11bd --- /dev/null +++ b/posts/first-post.md @@ -0,0 +1,7 @@ +first post! +10/08/2025 +# first post! + +I haven't much to write here presently, but progress shall be made soon enough. + +Till then, go learn [how to use a computer](https://badgraph1csghost.neocities.org/computers_index)! \ No newline at end of file diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..c2a49f4 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Allow: / diff --git a/style.css b/style.css new file mode 100644 index 0000000..4360f68 --- /dev/null +++ b/style.css @@ -0,0 +1,9 @@ +/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your + HTML content. To learn how to do something, just try searching Google for questions like + "how to change link color." */ + +body { + background-color: white; + color: black; + font-family: Verdana; +} \ No newline at end of file diff --git a/webdeck-player/LICENSE.txt b/webdeck-player/LICENSE.txt new file mode 100644 index 0000000..81db5d2 --- /dev/null +++ b/webdeck-player/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/webdeck-player/README.md b/webdeck-player/README.md new file mode 100644 index 0000000..cc662d2 --- /dev/null +++ b/webdeck-player/README.md @@ -0,0 +1,69 @@ + +![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) +![GitHub all releases downloads](https://img.shields.io/github/downloads/cristiancfm/webdeck-player/total) +[![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/webdeck-player/about.txt b/webdeck-player/about.txt new file mode 100644 index 0000000..ee8dcc8 --- /dev/null +++ b/webdeck-player/about.txt @@ -0,0 +1,10 @@ +Webdeck Player - A Javascript Youtube playlists player for webpages +MIT License +Copyright (c) 2022 Chris + +Thanks for downloading this software! Check the latest updates at the Github +repo: https://github.com/cristiancfm/webdeck-player + +Please send me an e-mail (cristian.ferreiro.montoiro@gmail.com) 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/webdeck-player/index.html b/webdeck-player/index.html new file mode 100644 index 0000000..07913e0 --- /dev/null +++ b/webdeck-player/index.html @@ -0,0 +1,95 @@ + + + + + + + + + + Webdeck Player + + + + + + +
          + +
          + +
          + WEBDECK PLAYER +
          + +
          +
          +
          +
          +
          +
          + +
          +
          +

          Loading...

          +

          +
          + +
          +
          + + +
          + + +
          + +
          + + + +
          +
          +
          +
          + +
          + +
          + +
          + + + + +
          + +
          + +
          + + + +
          + +
          + +
          + +
          +
          + +
          + +
          + + + +
          + + + diff --git a/webdeck-player/script.js b/webdeck-player/script.js new file mode 100644 index 0000000..e4321a8 --- /dev/null +++ b/webdeck-player/script.js @@ -0,0 +1,353 @@ +/** + * 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 = { + "EMO + PUNK": 'PLaRZpBoyZ7-mAOGzsICVTeSlNTfDNIlHt', + "CLASSICAL": 'PLaRZpBoyZ7-lsNGcfLh1xY8qZXGv3Ffso', + //"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 = "EMO + PUNK"; + + +/** + * [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 = { + "SILVER": 'silver', + "MINIMAL": "minimal", + //"ANOTHER THEME": 'another-theme', +}; + + +/** + * [4. CURRENT THEME] + * Set the theme of your player writing its name below. + */ +var currentTheme = "SILVER"; + + +// ===== 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 Chris\ngithub.com/cristiancfm/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); +} \ No newline at end of file diff --git a/webdeck-player/themes/default/about.txt b/webdeck-player/themes/default/about.txt new file mode 100644 index 0000000..72e650d --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/default/fonts/licenses/slkscr.txt b/webdeck-player/themes/default/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/default/fonts/slkscr.ttf b/webdeck-player/themes/default/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/webdeck-player/themes/default/fonts/slkscr.ttf differ diff --git a/webdeck-player/themes/default/images/green-light-off.gif b/webdeck-player/themes/default/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/webdeck-player/themes/default/images/green-light-off.gif differ diff --git a/webdeck-player/themes/default/images/green-light-on.gif b/webdeck-player/themes/default/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/webdeck-player/themes/default/images/green-light-on.gif differ diff --git a/webdeck-player/themes/default/images/info.png b/webdeck-player/themes/default/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/webdeck-player/themes/default/images/info.png differ diff --git a/webdeck-player/themes/default/images/mute.png b/webdeck-player/themes/default/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/webdeck-player/themes/default/images/mute.png differ diff --git a/webdeck-player/themes/default/images/next.png b/webdeck-player/themes/default/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/webdeck-player/themes/default/images/next.png differ diff --git a/webdeck-player/themes/default/images/pause.png b/webdeck-player/themes/default/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/webdeck-player/themes/default/images/pause.png differ diff --git a/webdeck-player/themes/default/images/play.png b/webdeck-player/themes/default/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/webdeck-player/themes/default/images/play.png differ diff --git a/webdeck-player/themes/default/images/prev.png b/webdeck-player/themes/default/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/webdeck-player/themes/default/images/prev.png differ diff --git a/webdeck-player/themes/default/images/slider.gif b/webdeck-player/themes/default/images/slider.gif new file mode 100644 index 0000000..86a5b9f Binary files /dev/null and b/webdeck-player/themes/default/images/slider.gif differ diff --git a/webdeck-player/themes/default/images/sound.png b/webdeck-player/themes/default/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/webdeck-player/themes/default/images/sound.png differ diff --git a/webdeck-player/themes/default/images/stop.png b/webdeck-player/themes/default/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/webdeck-player/themes/default/images/stop.png differ diff --git a/webdeck-player/themes/default/logo.png b/webdeck-player/themes/default/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/webdeck-player/themes/default/logo.png differ diff --git a/webdeck-player/themes/default/webdeck-player.css b/webdeck-player/themes/default/webdeck-player.css new file mode 100644 index 0000000..c3ece89 --- /dev/null +++ b/webdeck-player/themes/default/webdeck-player.css @@ -0,0 +1,317 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + margin: 0; + padding: 0; +} + +body{ + width: 600px; + height: 250px; + 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; +} \ No newline at end of file diff --git a/webdeck-player/themes/minimal/about.txt b/webdeck-player/themes/minimal/about.txt new file mode 100644 index 0000000..d950449 --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/minimal/fonts/licenses/slkscr.txt b/webdeck-player/themes/minimal/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/minimal/fonts/slkscr.ttf b/webdeck-player/themes/minimal/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/webdeck-player/themes/minimal/fonts/slkscr.ttf differ diff --git a/webdeck-player/themes/minimal/images/green-light-off.gif b/webdeck-player/themes/minimal/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/webdeck-player/themes/minimal/images/green-light-off.gif differ diff --git a/webdeck-player/themes/minimal/images/green-light-on.gif b/webdeck-player/themes/minimal/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/webdeck-player/themes/minimal/images/green-light-on.gif differ diff --git a/webdeck-player/themes/minimal/images/info.png b/webdeck-player/themes/minimal/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/webdeck-player/themes/minimal/images/info.png differ diff --git a/webdeck-player/themes/minimal/images/mute.png b/webdeck-player/themes/minimal/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/webdeck-player/themes/minimal/images/mute.png differ diff --git a/webdeck-player/themes/minimal/images/next.png b/webdeck-player/themes/minimal/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/webdeck-player/themes/minimal/images/next.png differ diff --git a/webdeck-player/themes/minimal/images/pause.png b/webdeck-player/themes/minimal/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/webdeck-player/themes/minimal/images/pause.png differ diff --git a/webdeck-player/themes/minimal/images/play.png b/webdeck-player/themes/minimal/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/webdeck-player/themes/minimal/images/play.png differ diff --git a/webdeck-player/themes/minimal/images/prev.png b/webdeck-player/themes/minimal/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/webdeck-player/themes/minimal/images/prev.png differ diff --git a/webdeck-player/themes/minimal/images/slider.gif b/webdeck-player/themes/minimal/images/slider.gif new file mode 100644 index 0000000..2d9e1ff Binary files /dev/null and b/webdeck-player/themes/minimal/images/slider.gif differ diff --git a/webdeck-player/themes/minimal/images/sound.png b/webdeck-player/themes/minimal/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/webdeck-player/themes/minimal/images/sound.png differ diff --git a/webdeck-player/themes/minimal/images/stop.png b/webdeck-player/themes/minimal/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/webdeck-player/themes/minimal/images/stop.png differ diff --git a/webdeck-player/themes/minimal/logo.png b/webdeck-player/themes/minimal/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/webdeck-player/themes/minimal/logo.png differ diff --git a/webdeck-player/themes/minimal/webdeck-player.css b/webdeck-player/themes/minimal/webdeck-player.css new file mode 100644 index 0000000..205aa2a --- /dev/null +++ b/webdeck-player/themes/minimal/webdeck-player.css @@ -0,0 +1,317 @@ +/* Font import */ +@font-face {font-family: Silkscreen; src: url(./fonts/slkscr.ttf);} + +*{ + margin: 0; + padding: 0; +} + +body{ + width: 600px; + height: 250px; + 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; +} \ No newline at end of file diff --git a/webdeck-player/themes/red-grunge/about.txt b/webdeck-player/themes/red-grunge/about.txt new file mode 100644 index 0000000..48b310d --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/red-grunge/fonts/licenses/slkscr.txt b/webdeck-player/themes/red-grunge/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/red-grunge/fonts/slkscr.ttf b/webdeck-player/themes/red-grunge/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/webdeck-player/themes/red-grunge/fonts/slkscr.ttf differ diff --git a/webdeck-player/themes/red-grunge/images/background.jpg b/webdeck-player/themes/red-grunge/images/background.jpg new file mode 100644 index 0000000..a52a384 Binary files /dev/null and b/webdeck-player/themes/red-grunge/images/background.jpg differ diff --git a/webdeck-player/themes/red-grunge/images/green-light-off.gif b/webdeck-player/themes/red-grunge/images/green-light-off.gif new file mode 100644 index 0000000..d3d9971 Binary files /dev/null and b/webdeck-player/themes/red-grunge/images/green-light-off.gif differ diff --git a/webdeck-player/themes/red-grunge/images/green-light-on.gif b/webdeck-player/themes/red-grunge/images/green-light-on.gif new file mode 100644 index 0000000..10d3853 Binary files /dev/null and b/webdeck-player/themes/red-grunge/images/green-light-on.gif differ diff --git a/webdeck-player/themes/red-grunge/images/info.png b/webdeck-player/themes/red-grunge/images/info.png new file mode 100644 index 0000000..4532073 Binary files /dev/null and b/webdeck-player/themes/red-grunge/images/info.png differ diff --git a/webdeck-player/themes/silver/about.txt b/webdeck-player/themes/silver/about.txt new file mode 100644 index 0000000..f02e3b8 --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/silver/fonts/EurostileExtendedBlack.ttf b/webdeck-player/themes/silver/fonts/EurostileExtendedBlack.ttf new file mode 100644 index 0000000..8856fbe Binary files /dev/null and b/webdeck-player/themes/silver/fonts/EurostileExtendedBlack.ttf differ diff --git a/webdeck-player/themes/silver/fonts/LED-Dot-Matrix.ttf b/webdeck-player/themes/silver/fonts/LED-Dot-Matrix.ttf new file mode 100644 index 0000000..1be9221 Binary files /dev/null and b/webdeck-player/themes/silver/fonts/LED-Dot-Matrix.ttf differ diff --git a/webdeck-player/themes/silver/fonts/licenses/slkscr.txt b/webdeck-player/themes/silver/fonts/licenses/slkscr.txt new file mode 100644 index 0000000..a3d852e --- /dev/null +++ b/webdeck-player/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/webdeck-player/themes/silver/fonts/slkscr.ttf b/webdeck-player/themes/silver/fonts/slkscr.ttf new file mode 100644 index 0000000..85a2037 Binary files /dev/null and b/webdeck-player/themes/silver/fonts/slkscr.ttf differ diff --git a/webdeck-player/themes/silver/images/green-light-off.gif b/webdeck-player/themes/silver/images/green-light-off.gif new file mode 100644 index 0000000..eb106e4 Binary files /dev/null and b/webdeck-player/themes/silver/images/green-light-off.gif differ diff --git a/webdeck-player/themes/silver/images/green-light-on.gif b/webdeck-player/themes/silver/images/green-light-on.gif new file mode 100644 index 0000000..1001fb9 Binary files /dev/null and b/webdeck-player/themes/silver/images/green-light-on.gif differ diff --git a/webdeck-player/themes/silver/images/info.png b/webdeck-player/themes/silver/images/info.png new file mode 100644 index 0000000..1b49e2c Binary files /dev/null and b/webdeck-player/themes/silver/images/info.png differ diff --git a/webdeck-player/themes/silver/images/mute.png b/webdeck-player/themes/silver/images/mute.png new file mode 100644 index 0000000..7c8466a Binary files /dev/null and b/webdeck-player/themes/silver/images/mute.png differ diff --git a/webdeck-player/themes/silver/images/next.png b/webdeck-player/themes/silver/images/next.png new file mode 100644 index 0000000..5367e4d Binary files /dev/null and b/webdeck-player/themes/silver/images/next.png differ diff --git a/webdeck-player/themes/silver/images/pause.png b/webdeck-player/themes/silver/images/pause.png new file mode 100644 index 0000000..af51e03 Binary files /dev/null and b/webdeck-player/themes/silver/images/pause.png differ diff --git a/webdeck-player/themes/silver/images/play.png b/webdeck-player/themes/silver/images/play.png new file mode 100644 index 0000000..958ce5b Binary files /dev/null and b/webdeck-player/themes/silver/images/play.png differ diff --git a/webdeck-player/themes/silver/images/prev.png b/webdeck-player/themes/silver/images/prev.png new file mode 100644 index 0000000..bb3ff27 Binary files /dev/null and b/webdeck-player/themes/silver/images/prev.png differ diff --git a/webdeck-player/themes/silver/images/sound.png b/webdeck-player/themes/silver/images/sound.png new file mode 100644 index 0000000..7271d16 Binary files /dev/null and b/webdeck-player/themes/silver/images/sound.png differ diff --git a/webdeck-player/themes/silver/images/stop.png b/webdeck-player/themes/silver/images/stop.png new file mode 100644 index 0000000..365fedd Binary files /dev/null and b/webdeck-player/themes/silver/images/stop.png differ diff --git a/webdeck-player/themes/silver/logo.png b/webdeck-player/themes/silver/logo.png new file mode 100644 index 0000000..730c4e5 Binary files /dev/null and b/webdeck-player/themes/silver/logo.png differ diff --git a/webdeck-player/themes/silver/webdeck-player.css b/webdeck-player/themes/silver/webdeck-player.css new file mode 100644 index 0000000..a2c878f --- /dev/null +++ b/webdeck-player/themes/silver/webdeck-player.css @@ -0,0 +1,341 @@ +/* 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; +} + +body{ + width: 600px; + height: 250px; + 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; +} \ No newline at end of file