chore: restructure site
This commit is contained in:
parent
acdb3689d7
commit
c3e9c53a81
80 changed files with 34 additions and 53 deletions
BIN
site/badges/email_me.gif
Normal file
BIN
site/badges/email_me.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
site/badges/ie.gif
Normal file
BIN
site/badges/ie.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
site/badges/wget.gif
Normal file
BIN
site/badges/wget.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
site/badges/why-aol-image.gif
Normal file
BIN
site/badges/why-aol-image.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
site/badges/written_in_vi.gif
Normal file
BIN
site/badges/written_in_vi.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
site/badges/yay_its_a_button.gif
Normal file
BIN
site/badges/yay_its_a_button.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
85
site/blog.html
Normal file
85
site/blog.html
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>blog - EmoDied</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/98.css">
|
||||
|
||||
<link rel="stylesheet" href="/site/global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>hello there, kind stranger \o/</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="box-lp subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">pages</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul style="padding-left: 1em">
|
||||
<li><a href="/site">home</a></li>
|
||||
<li><a href="/site/pages/notes.html">notes</a></li>
|
||||
<li><a href="/site/pages/credits.html">credits</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">blogpost viewer</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space" id="post-body"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-rp">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">blog</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul id="posts_list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/site/posts.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
|
||||
|
||||
<script>
|
||||
async function loadPost() {
|
||||
let response = await fetch('/site/posts/' + new URLSearchParams(window.location.search).get('post') + '.md');
|
||||
let text = await response.text();
|
||||
|
||||
document.title = text.split('\n')[0];
|
||||
document.getElementById('post-body').innerHTML = marked.parse(text.split('\n').slice(2).join('\n'));
|
||||
}
|
||||
|
||||
loadPost()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
site/fonts/ComicRelief-Bold.ttf
Normal file
BIN
site/fonts/ComicRelief-Bold.ttf
Normal file
Binary file not shown.
104
site/global.css
Normal file
104
site/global.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
@font-face {
|
||||
font-family: 'Comic Relief';
|
||||
src: url('/site/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;
|
||||
}
|
||||
116
site/index.html
Normal file
116
site/index.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>home - ruds.io</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/98.css">
|
||||
|
||||
<link rel="stylesheet" href="/site/global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>hello there, kind stranger \o/</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="box-lp subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">pages</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul>
|
||||
<li><a href="/site">home</a></li>
|
||||
<li><a href="/site/pages/notes.html">notes</a></li>
|
||||
<li><a href="/site/pages/credits.html">credits</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">about me</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<p>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!</p>
|
||||
|
||||
<p>additionally, I also serve as the lead maintainer for several projects you might have heard of, including Ubuntu Unity (owing to which I am an Ubuntu member) & blendOS.</p>
|
||||
|
||||
<a href="https://en.wikipedia.org/wiki/History_of_Internet_Explorer"><img title="this page is best viewed with internet explorer" style="image-rendering: pixelated;" src="/site/badges/ie.gif"></a>
|
||||
<a href="mailto:rs2009@ruds.io"><img title="email me" style="image-rendering: pixelated;" src="/site/badges/email_me.gif"></a>
|
||||
<a href="https://en.wikipedia.org/wiki/AOL"><img title="thanks for not using AOL" style="image-rendering: pixelated;" src="/site/badges/why-aol-image.gif"></a>
|
||||
<a href="https://en.wikipedia.org/wiki/GNU_Emacs"><img title="written in vi" style="image-rendering: pixelated;" src="/site/badges/written_in_vi.gif"></a>
|
||||
<a href="https://gimp.org"><img title="I use MS Paint" style="image-rendering: pixelated;" src="/site/badges/yay_its_a_button.gif"></a>
|
||||
<a href="https://curl.se"><img title="wget" style="image-rendering: pixelated;" src="/site/badges/wget.gif"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">projects (& past projects)</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul>
|
||||
<li><a href="https://blendos.co">blendOS</a>: an atomic and immutable Linux distribution</li>
|
||||
<li><a href="https://ubuntuunity.org">Ubuntu Unity</a>: a flavour of Ubuntu that uses the Unity desktop environment</li>
|
||||
<li><a href="https://x.com/ubunweb">Ubuntu Web</a>: a privacy-respecting ChromeOS alternative</li>
|
||||
<li><a href="https://github.com/AFK-OS/una">una</a>: a client for the makedeb Package Repository</li>
|
||||
<li><a href="https://www.forbes.com/sites/jasonevangelho/2022/01/31/linux-gaming-gets-a-big-boost-from-a-12-year-old-ubuntu-developer/">Gamebuntu</a>: a utility to set up a gaming environment on Ubuntu</li>
|
||||
<li><a href="https://github.com/RudraSwat/modren">Modren</a>: a modern Linux store</li>
|
||||
<li><a href="https://x.com/ed_ubuntu">UbuntuEd</a>: an educational Ubuntu remix (superseded by Edubuntu)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">music player</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<iframe src="/site/webdeck-player/index.html" height="250" width="600"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-rp">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">blog</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul id="posts_list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/site/posts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
site/neocities.png
Normal file
BIN
site/neocities.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
81
site/pages/credits.html
Normal file
81
site/pages/credits.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>home - ruds.io</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/98.css">
|
||||
|
||||
<link rel="stylesheet" href="/site/global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>hello there, kind stranger \o/</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="box-lp subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">pages</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul>
|
||||
<li><a href="/site">home</a></li>
|
||||
<li><a href="/site/pages/notes.html">notes</a></li>
|
||||
<li><a href="/site/pages/credits.html">credits</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">credits</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul>CSS stylesheet: <a href="https://jdan.github.io/98.css/">98.css</a></ul>
|
||||
<ul>
|
||||
<li>88x31 (buttons):
|
||||
<ul>
|
||||
<li><a href="https://hellnet.work/8831/">hellnet.work/8831/</a></li>
|
||||
<li><a href="https://cyber.dabamos.de/88x31/">cyber.dabamos.de/88x31/</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-rp">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">blog</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul id="posts_list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/site/posts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
73
site/pages/notes.html
Normal file
73
site/pages/notes.html
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>home - ruds.io</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<link rel="stylesheet" href="https://unpkg.com/98.css">
|
||||
|
||||
<link rel="stylesheet" href="/site/global.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>hello there, kind stranger \o/</h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="box-lp subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">pages</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul>
|
||||
<li><a href="/site/">home</a></li>
|
||||
<li><a href="/site/pages/notes.html">notes</a></li>
|
||||
<li><a href="/site/pages/credits.html">credits</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content subcontainer">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">credits</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<p>This page is presently empty; enjoy the quiet while it lasts.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-rp">
|
||||
<div class="window active">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">blog</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Maximize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body has-space">
|
||||
<ul id="posts_list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/site/posts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
9
site/posts.js
Normal file
9
site/posts.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
let posts = {
|
||||
'first post!': 'first-post'
|
||||
}
|
||||
|
||||
Object.keys(posts).forEach(post => {
|
||||
document.getElementById('posts_list').innerHTML += `
|
||||
<li><a href="/site/blog.html?post=${posts[post]}">${post}</a></li>
|
||||
`
|
||||
});
|
||||
7
site/posts/first-post.md
Normal file
7
site/posts/first-post.md
Normal file
|
|
@ -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)!
|
||||
2
site/robots.txt
Normal file
2
site/robots.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
User-agent: *
|
||||
Allow: /
|
||||
21
site/webdeck-player/LICENSE.txt
Normal file
21
site/webdeck-player/LICENSE.txt
Normal file
|
|
@ -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.
|
||||
69
site/webdeck-player/README.md
Normal file
69
site/webdeck-player/README.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
|
||||
|
||||
|
||||
# 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" scrolling="no"></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.
|
||||
10
site/webdeck-player/about.txt
Normal file
10
site/webdeck-player/about.txt
Normal file
|
|
@ -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!
|
||||
95
site/webdeck-player/index.html
Normal file
95
site/webdeck-player/index.html
Normal file
|
|
@ -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>Webdeck Player</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">
|
||||
WEBDECK PLAYER
|
||||
</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>
|
||||
353
site/webdeck-player/script.js
Normal file
353
site/webdeck-player/script.js
Normal file
|
|
@ -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 = "<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 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 = "<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);
|
||||
}
|
||||
2
site/webdeck-player/themes/default/about.txt
Normal file
2
site/webdeck-player/themes/default/about.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
DEFAULT THEME - FOR WEBDECK PLAYER
|
||||
Created by Chris
|
||||
25
site/webdeck-player/themes/default/fonts/licenses/slkscr.txt
Normal file
25
site/webdeck-player/themes/default/fonts/licenses/slkscr.txt
Normal file
|
|
@ -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
|
||||
BIN
site/webdeck-player/themes/default/fonts/slkscr.ttf
Normal file
BIN
site/webdeck-player/themes/default/fonts/slkscr.ttf
Normal file
Binary file not shown.
BIN
site/webdeck-player/themes/default/images/green-light-off.gif
Normal file
BIN
site/webdeck-player/themes/default/images/green-light-off.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 B |
BIN
site/webdeck-player/themes/default/images/green-light-on.gif
Normal file
BIN
site/webdeck-player/themes/default/images/green-light-on.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 B |
BIN
site/webdeck-player/themes/default/images/info.png
Normal file
BIN
site/webdeck-player/themes/default/images/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
site/webdeck-player/themes/default/images/mute.png
Normal file
BIN
site/webdeck-player/themes/default/images/mute.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
site/webdeck-player/themes/default/images/next.png
Normal file
BIN
site/webdeck-player/themes/default/images/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
site/webdeck-player/themes/default/images/pause.png
Normal file
BIN
site/webdeck-player/themes/default/images/pause.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 B |
BIN
site/webdeck-player/themes/default/images/play.png
Normal file
BIN
site/webdeck-player/themes/default/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
site/webdeck-player/themes/default/images/prev.png
Normal file
BIN
site/webdeck-player/themes/default/images/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
site/webdeck-player/themes/default/images/slider.gif
Normal file
BIN
site/webdeck-player/themes/default/images/slider.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
site/webdeck-player/themes/default/images/sound.png
Normal file
BIN
site/webdeck-player/themes/default/images/sound.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
site/webdeck-player/themes/default/images/stop.png
Normal file
BIN
site/webdeck-player/themes/default/images/stop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
BIN
site/webdeck-player/themes/default/logo.png
Normal file
BIN
site/webdeck-player/themes/default/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
317
site/webdeck-player/themes/default/webdeck-player.css
Normal file
317
site/webdeck-player/themes/default/webdeck-player.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
2
site/webdeck-player/themes/minimal/about.txt
Normal file
2
site/webdeck-player/themes/minimal/about.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
MINIMAL THEME - FOR WEBDECK PLAYER
|
||||
Created by Chris
|
||||
25
site/webdeck-player/themes/minimal/fonts/licenses/slkscr.txt
Normal file
25
site/webdeck-player/themes/minimal/fonts/licenses/slkscr.txt
Normal file
|
|
@ -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
|
||||
BIN
site/webdeck-player/themes/minimal/fonts/slkscr.ttf
Normal file
BIN
site/webdeck-player/themes/minimal/fonts/slkscr.ttf
Normal file
Binary file not shown.
BIN
site/webdeck-player/themes/minimal/images/green-light-off.gif
Normal file
BIN
site/webdeck-player/themes/minimal/images/green-light-off.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 B |
BIN
site/webdeck-player/themes/minimal/images/green-light-on.gif
Normal file
BIN
site/webdeck-player/themes/minimal/images/green-light-on.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 B |
BIN
site/webdeck-player/themes/minimal/images/info.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
site/webdeck-player/themes/minimal/images/mute.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/mute.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
site/webdeck-player/themes/minimal/images/next.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
site/webdeck-player/themes/minimal/images/pause.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/pause.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 B |
BIN
site/webdeck-player/themes/minimal/images/play.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
site/webdeck-player/themes/minimal/images/prev.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
site/webdeck-player/themes/minimal/images/slider.gif
Normal file
BIN
site/webdeck-player/themes/minimal/images/slider.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
site/webdeck-player/themes/minimal/images/sound.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/sound.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
site/webdeck-player/themes/minimal/images/stop.png
Normal file
BIN
site/webdeck-player/themes/minimal/images/stop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
BIN
site/webdeck-player/themes/minimal/logo.png
Normal file
BIN
site/webdeck-player/themes/minimal/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
317
site/webdeck-player/themes/minimal/webdeck-player.css
Normal file
317
site/webdeck-player/themes/minimal/webdeck-player.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
2
site/webdeck-player/themes/red-grunge/about.txt
Normal file
2
site/webdeck-player/themes/red-grunge/about.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
RED GRUNGE THEME - FOR WEBDECK PLAYER
|
||||
Created by Chris
|
||||
|
|
@ -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
|
||||
BIN
site/webdeck-player/themes/red-grunge/fonts/slkscr.ttf
Normal file
BIN
site/webdeck-player/themes/red-grunge/fonts/slkscr.ttf
Normal file
Binary file not shown.
BIN
site/webdeck-player/themes/red-grunge/images/background.jpg
Normal file
BIN
site/webdeck-player/themes/red-grunge/images/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
site/webdeck-player/themes/red-grunge/images/green-light-off.gif
Normal file
BIN
site/webdeck-player/themes/red-grunge/images/green-light-off.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
site/webdeck-player/themes/red-grunge/images/green-light-on.gif
Normal file
BIN
site/webdeck-player/themes/red-grunge/images/green-light-on.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
site/webdeck-player/themes/red-grunge/images/info.png
Normal file
BIN
site/webdeck-player/themes/red-grunge/images/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
2
site/webdeck-player/themes/silver/about.txt
Normal file
2
site/webdeck-player/themes/silver/about.txt
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
SILVER THEME - FOR WEBDECK PLAYER
|
||||
Created by Chris
|
||||
Binary file not shown.
BIN
site/webdeck-player/themes/silver/fonts/LED-Dot-Matrix.ttf
Normal file
BIN
site/webdeck-player/themes/silver/fonts/LED-Dot-Matrix.ttf
Normal file
Binary file not shown.
25
site/webdeck-player/themes/silver/fonts/licenses/slkscr.txt
Normal file
25
site/webdeck-player/themes/silver/fonts/licenses/slkscr.txt
Normal file
|
|
@ -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
|
||||
BIN
site/webdeck-player/themes/silver/fonts/slkscr.ttf
Normal file
BIN
site/webdeck-player/themes/silver/fonts/slkscr.ttf
Normal file
Binary file not shown.
BIN
site/webdeck-player/themes/silver/images/green-light-off.gif
Normal file
BIN
site/webdeck-player/themes/silver/images/green-light-off.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 B |
BIN
site/webdeck-player/themes/silver/images/green-light-on.gif
Normal file
BIN
site/webdeck-player/themes/silver/images/green-light-on.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 B |
BIN
site/webdeck-player/themes/silver/images/info.png
Normal file
BIN
site/webdeck-player/themes/silver/images/info.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
site/webdeck-player/themes/silver/images/mute.png
Normal file
BIN
site/webdeck-player/themes/silver/images/mute.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
site/webdeck-player/themes/silver/images/next.png
Normal file
BIN
site/webdeck-player/themes/silver/images/next.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
site/webdeck-player/themes/silver/images/pause.png
Normal file
BIN
site/webdeck-player/themes/silver/images/pause.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 329 B |
BIN
site/webdeck-player/themes/silver/images/play.png
Normal file
BIN
site/webdeck-player/themes/silver/images/play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
site/webdeck-player/themes/silver/images/prev.png
Normal file
BIN
site/webdeck-player/themes/silver/images/prev.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
site/webdeck-player/themes/silver/images/sound.png
Normal file
BIN
site/webdeck-player/themes/silver/images/sound.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
site/webdeck-player/themes/silver/images/stop.png
Normal file
BIN
site/webdeck-player/themes/silver/images/stop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 297 B |
BIN
site/webdeck-player/themes/silver/logo.png
Normal file
BIN
site/webdeck-player/themes/silver/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
341
site/webdeck-player/themes/silver/webdeck-player.css
Normal file
341
site/webdeck-player/themes/silver/webdeck-player.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue