Update version.txt

.dockerignore

@@ -1,27 +1,18 @@
-.DS_Store
 .idea
 *.iws
 *.iml
 *.ipr
 out/
-/data/uploads/*
-!/data/uploads/.gitkeep
-/data/db/*
+data/uploads/*
+!data/uploads/.gitkeep
+data/db/*
 !/data/db/.gitkeep
 /plugins/user/*
 !/plugins/user/.gitkeep
 *.lock
 __pycache__/
 *.log
-/var/run/*
-!/var/run/.gitkeep
-*.swp
+var/run/*
+!var/run/.gitkeep
 .env
 venv/
-node_modules
-tmp.py
-!/plugins/user/Dashboard
-/data/www/plugins/*
-!/data/www/plugins/.gitkeep
-/var/run/storage/*
-!/var/run/storage/.gitkeep

.env.dist

@@ -1,11 +1,4 @@
-# Core
 DEBUG=false
-SECRET_KEY=ANY_SECRET_KEY_HERE
-
-# Application Server
 PORT=5000
-BIND=0.0.0.0
-EXTERNAL_STORAGE_MOUNTPOINT=%application_dir%/var/run/storage
-
-# Misc
-DEMO=false
+SECRET_KEY=ANY_SECRET_KEY_HERE
+PLAYER_AUTOSTART_FILE=./var/run/play # Replace by "/dev/null" if not needed

.github/FUNDING.yml

@@ -1 +0,0 @@
-custom: https://paypal.me/jierka

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,46 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: "[BUG] "
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Hardware (please complete the following information):**
- - *Device*: `Raspberry Xb+`
- - *OS*: `Raspbian vXX` [use command *lsb_release -a*]
- - *Architecture*: `armvX` [use command *uname -a*]
-
-**Sofware (please complete the following information):**
- - *Obscreen version*: `v1.XX`
- - *Installation method*: `Docker` or `System`
- - *Browser*: `Chromium` or `Chrome`
- - *Player method*: `Systemd with obscreen-player.service` or `Manually`
-
-**Additional context**
-Add any other context about the problem here.
-
-**Extra (Recommended)**
-You can send us a backup of your data to help speed up the debugging process. Please ensure that no sensitive data is included in your slides and follow these steps:
-```bash
-cd obscreen
-tar -vcf data.tar data/
-```
-Afterward, attach the `data.tar` file to your issue attachment.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,21 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: "[FEATURE] "
-labels: enhancement
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
-

.github/workflows/build-nightly.yml

@@ -1,41 +0,0 @@
-name: Nightly build synced with develop and push docker image
-
-on:
-  schedule:
-    - cron: '0 0 * * *'
-  workflow_dispatch:
-
-jobs:
-  build-and-push-nightly:
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/develop'
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          ref: develop
-
-      - name: Set up Git
-        run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-
-      - name: Sync nightly branch
-        run: |
-          git checkout nightly
-          git merge develop --no-edit
-          git push origin nightly --force
-
-      - name: Checkout nightly branch
-        uses: actions/checkout@v2
-        with:
-          ref: nightly
-
-      - name: Call common build workflow
-        uses: ./.github/actions/common-docker-build
-        with:
-          build_tags: csmith1865/obscreen:nightly
-          manifest_tags: type=semver,pattern=nightly
-          flavor: ""
-          docker_username: ${{ secrets.DOCKER_USERNAME }}
-          docker_password: ${{ secrets.DOCKER_PASSWORD }}

.github/workflows/build-pr.yml

@@ -1,28 +0,0 @@
-name: PR build and push docker image
-
-on:
-  pull_request:
-    types: [opened, synchronize, labeled]
-  push:
-    branches-ignore:
-      - master
-      - develop
-      - nightly
-  workflow_dispatch:
-
-jobs:
-  build-and-push-pr:
-    runs-on: ubuntu-latest
-    if: contains(github.event.pull_request.labels.*.name, 'build-pr')
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Call common build workflow
-        uses: ./.github/actions/common-docker-build
-        with:
-          build_tags: csmith1865/obscreen:pr-${{ github.event.pull_request.number }}
-          manifest_tags: type=semver,pattern=pr
-          flavor: ""
-          docker_username: ${{ secrets.DOCKER_USERNAME }}
-          docker_password: ${{ secrets.DOCKER_PASSWORD }}

.github/workflows/master.yml

@@ -24,7 +24,7 @@ jobs:
         with:
           build_tags: |
             csmith1865/obscreen:v${{ steps.version.outputs.VERSION }}
-            csmith1865/obscreen:latest
+            csmith1865/obscreen:latest                        
           manifest_tags: type=semver,pattern=v${{ steps.version.outputs.VERSION }}
           flavor: latest=true
           docker_username: ${{ secrets.DOCKER_USERNAME }}

.gitignore

@@ -1,30 +1,19 @@
-.DS_Store
 .idea
 *.iws
 *.iml
 *.ipr
 out/
-/data/uploads/*
-!/data/uploads/.gitkeep
-/data/db/*
+data/uploads/*
+!data/uploads/.gitkeep
+data/db/*
 !/data/db/.gitkeep
 /plugins/user/*
 !/plugins/user/.gitkeep
 *.lock
 __pycache__/
 *.log
-/var/run/*
-!/var/run/.gitkeep
+var/run/*
+!var/run/.gitkeep
 *.swp
 .env
 venv/
-node_modules
-tmp.py
-!/plugins/user/Dashboard
-/data/www/plugins/*
-!/data/www/plugins/.gitkeep
-/var/run/storage/*
-!/var/run/storage/.gitkeep
-*.egg-info
-/build/
-/dist/

Dockerfile

@@ -1,24 +1,11 @@
-FROM python:3.9-slim-bullseye
+FROM python:3.9.17-alpine3.17
 
-# Install ffmpeg and other dependencies
-RUN apt-get update && apt-get install -y --no-install-recommends \
-    gcc \
-    libc6-dev \
-    sqlite3 \
-    libsqlite3-dev \
-    ntfs-3g \
-    ffmpeg \
-    build-essential \
-    curl \
-    tar \
-    bash \
-    && rm -rf /var/lib/apt/lists/*
+RUN apk add --no-cache --virtual .build-deps gcc musl-dev sqlite-dev build-base linux-headers
 
 WORKDIR /app
 
 COPY . .
 
-# Install Python dependencies
-RUN pip install --no-cache-dir -r requirements.txt
+RUN pip install -r requirements.txt && apk del .build-deps gcc musl-dev sqlite-dev build-base linux-headers
 
 ENTRYPOINT ["python", "/app/obscreen.py"]

MANIFEST.in

@@ -1,4 +0,0 @@
-include README.md
-include LICENSE
-docs/setup-run-on-rpi.md
-docs/setup-run-headless.md

README.md

@@ -1,120 +1,39 @@
-<div align="center" width="100%">
-    <img src="./docs/img/obscreen.png" width="128" alt="" />
-</div>
+# <img src="https://github.com/jr-k/obscreen/blob/master/docs/img/obscreen.png" width="22"> Obscreen
 
-# Obscreen
 
-Obscreen is a user-friendly self-hosted digital signage tool leveraging chromium browser. 
+🧑‍🎄 Open to feature request and pull request
 
-<a target="_blank" href="https://git.sumisu.xyz/csmith1865/obscreen"><img src="https://img.shields.io/gitea/stars/csmith1865/obscreen?gitea_url=https%3A%2F%2Fgit.sumisu.xyz&style=flat" /></a> <a target="_blank" href="https://hub.docker.com/r/csmith1865/obscreen"><img src="https://img.shields.io/docker/pulls/csmith1865/obscreen" /></a> <a target="_blank" href="https://hub.docker.com/r/csmith1865/obscreen"><img src="https://img.shields.io/docker/v/csmith1865/obscreen/latest?label=docker%20image%20ver." /></a> <a target="_blank" href="https://git.sumisu.xyz/csmith1865/obscreen"><img src="https://img.shields.io/gitea/last-commit/csmith1865/obscreen?gitea_url=https%3A%2F%2Fgit.sumisu.xyz&style=flat" /></a> 
+**⭐️ You liked it ? Give this repository a star, it's free :)**
 
-<img src="https://git.sumisu.xyz/csmith1865/obscreen/raw/branch/master/docs/screenshot-playlist-edit.png" width="700" alt="" />
+## About
+Use a RaspberryPi (Lite OS) to show a fullscreen slideshow (Kiosk-mode)
 
-🧑‍🎄 Open to feature request and pull request. [Cast your vote for your preferred ones on the Canny platform](https://obscreen.canny.io/feature-requests)
+[![Docker Pulls](https://badgen.net/docker/pulls/jierka/obscreen?icon=docker&label=docker%20pulls)](https://hub.docker.com/r/jierka/obscreen/)
 
-⭐️ You liked it ? Give this repository a star, it's free :)
-
----
-
-## 🕹️ Live Demo
-
-Try it!
-
-Demo Server (Location: Roubaix - France): [https://demo.obscreen.io](https://demo.obscreen.io/login?username=admin&password=admin)
-
-It is a temporary live demo, all data will be deleted after 30 minutes (~30secs downtime).
-
-## 🎉 Features
-- Dead simple chromium webview inside
-- Fancy graphical user interface
+### Features:
+- Dead simple chromium webview
+- Clear GUI
 - Very few dependencies
-- Embeddable SQLite database
-- Fleet screen management
-- Playlist management
-- Authentication management
-- Plays content from flashdrive in offline mode
-- Core API & Plugin system to extend capabilities
-- [Multi Languages](https://git.sumisu.xyz/csmith1865/obscreen/src/branch/master/lang)
-- Cast pictures and iframes to Chromecast
-- No costly monthly pricing plan per screen or whatever, no cloud, no telemetry
+- SQLite database
+- Plugin system
+- Feature flags to enable complex use cases (Fleet/User/Playlist management)
+- No stupid pricing plan
+- No cloud
+- No telemetry
 
-## 👨‍🍳 How to install
+![Obscreen Screenshot](https://github.com/jr-k/obscreen/blob/master/docs/screenshot.png  "Obscreen Screenshot")
+
+# Cookbooks
 
 ### 🔴 [I want to power a RaspberryPi and automatically see my slideshow on a screen connected to it and manage the slideshow](docs/setup-run-on-rpi.md)
 ### 🔵 [I just want a slideshow manager and I'll deal with screen and browser myself](docs/setup-run-headless.md)
-
-## 📸 More Screenshots
-
-Light Mode:
-
-<img src="https://git.sumisu.xyz/csmith1865/obscreen/raw/branch/master/docs/screenshot-light-mode.png" width="512" alt="" />
-
-Content Explorer:
-
-<img src="https://git.sumisu.xyz/csmith1865/obscreen/raw/branch/master/docs/screenshot-content-explorer.png" width="512" alt="" />
-
-Settings Page:
-
-<img src="https://git.sumisu.xyz/csmith1865/obscreen/raw/branch/master/docs/screenshot-settings.png" width="512" alt="" />
-
-Add Content Modal:
-
-<img src="https://git.sumisu.xyz/csmith1865/obscreen/raw/branch/master/docs/screenshot-add-content.png" width="512" alt="" />
-
-## 🫡 Motivation
-
-- I was searching for a self-hosted monitoring tool similar to "Screenly", but struggled with "Anthias" (formerly Screenly OSE) due to compatibility issues on some webpages. Chromium does a great job at rendering webpages, so I decided to create my own solution based on browsers.
-- Enjoy a beautiful graphical interface
-- My goal was to keep the code as simple as possible, using reliable technology with minimal dependencies.
-- Aim to showcase the power of the Raspberry Pi 5.
-- Deploy my first true Docker image to Docker Hub using a continuous deployment pipeline.
-
-If you value this project, please think about awarding it a ⭐. Thanks ! 🙏
-
-## 🗺️ Short-term roadmap
-- New `Composition` content type: Check out a [video demo here](https://demo.obscreen.io/data/uploads/compositions.mp4)
-- New `Text` Content Type: Display text with customizable styles, including options for scrolling effects.
-- New `HTML` Content Type: Display HTML snippets for more powerful text customization, giving you full control over the content.
-- Fleet Studio Management: Reviving a legacy feature
-- Remote Player Server: A new way to manage a player from the studio without needing SSH access to player
-
-## 🛟 Discussion / Need help ?
+ 
+# Discussion
 
 ### Join our Discord
-[<img src="https://git.sumisu.xyz/csmith1865/obscreen/raw/branch/master/docs/img/discord.png" width="64">](https://discord.obscreen.io)
+[<img src="https://github.com/jr-k/obscreen/blob/master/docs/img/discord.png" width="64">](https://discord.obscreen.io)
 
-### Open an Issue
-[<img src="https://git.sumisu.xyz/csmith1865/obscreen/raw/branch/master/docs/img/github.png" width="64">](https://git.sumisu.xyz/csmith1865/obscreen/issues/new/choose)
-
-### Troubleshoot
+### Open an Issue or a Pull Request on Github
+[<img src="https://github.com/jr-k/obscreen/blob/master/docs/img/github.png" width="64">](https://github.com/jr-k/obscreen/issues)
 
 
-<details closed>
-<summary><h3>Why aren't the videos starting?</h3></summary>
-
-This is "normal" behavior. Videos do not play automatically in Chrome because it requires user interaction with the page (a simple click inside the webpage is enough). If you open the console, you'll see the error: [Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first...](https://goo.gl/xX8pDD)
-
-To resolve this, you need to use the Chrome flag `--autoplay-policy=no-user-gesture-required`. When connecting a Raspberry Pi with Obscreen Player autorun, this issue doesn't occur because the flag is handled automatically for you. You need to enable this flag yourself otherwise.
-
----
-
-</details>
-
-## 👑 Contributions
-
-### Create Pull Requests
-
-We accept all types of pull requests.
-
-### Test Beta Version
-
-Check out the latest beta release here: https://github.com/jr-k/obscreen/releases
-
-### Translations
-
-If you want to translate Obscreen into your language, please visit [Languages Files](https://git.sumisu.xyz/csmith1865/obscreen/src/branch/master/lang).
-
-### Spelling & Grammar
-
-Feel free to correct the grammar in the documentation or code.
-My mother language is not English and my grammar is not that great.

data/www/browserconfig.xml

@@ -1,12 +1,2 @@
 <?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square70x70logo src="/favicon/mstile-70x70.png"/>
-            <square150x150logo src="/favicon/mstile-150x150.png"/>
-            <square310x310logo src="/favicon/mstile-310x3150.png"/>
-            <square310x310logo src="/favicon/mstile-310x310.png"/>
-            <TileColor>#333333</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>
+<browserconfig><msapplication><tile><square70x70logo src="/favicon/ms-icon-70x70.png"/><square150x150logo src="/favicon/ms-icon-150x150.png"/><square310x310logo src="/favicon/ms-icon-310x310.png"/><TileColor>#692fbd</TileColor></tile></msapplication></browserconfig>

data/www/css/lib/jquery-explr-1.4.css

@@ -1,211 +0,0 @@
-/*
- * Explr.js v1.4
- * Explorer-like tree jQuery plugin
- * https://github.com/faisalman/explr-js
- *
- * Copyright © 2010-2011 Faisal Salman <f@faisalman.com>
- * Dual licensed under GPLv2 & MIT
- */
-
-.explr-tree * {
-	margin: 0;
-	padding: 0;
-}
-
-.explr-tree, 
-.explr-tree ol,
-.explr-tree ul {
-	display: block;
-	font-family: Ubuntu, Helvetica, Tahoma, sans-serif;
-	font-size: 12px;
-	letter-spacing: normal;
-	line-height: 12px;
-	list-style: none;
-	margin: 0;
-	padding-bottom: 0;
-	padding-left: 20px;
-	padding-top: 5px;
-	position: relative;
-}
-
-.explr-tree {
-	overflow: auto;
-}
-
-.explr-tree li {
-	background: url("../../img/explr/folder.png") 16px 2px no-repeat;
-	display: block;
-	position: relative;
-	white-space: nowrap;
-}
-
-.explr-tree li a {
-	color: #555;
-	display: block;
-	font-size: 12px;
-	margin-left: 30px;
-	padding: 3px 0 5px 8px;
-	text-decoration: none;
-}
-
-.explr-tree li a:hover {
-	color: #ff0084;
-	text-decoration: underline;
-}
-
-.explr-line {
-	/*border-left: 1px dotted #999;*/
-	/*border-bottom: 1px dotted #999;*/
-	height: 22px;
-	position: absolute;
-	margin-left: 0;
-	margin-top: -12px;
-	width: 12px;
-}
-
-.explr-tree ol>li:first-child>.explr-line,
-.explr-tree ul>li:first-child>.explr-line {
-	margin-top: -8px;
-	height: 18px;
-}
-
-.explr-line-fix {
-	/*border-left: 1px dotted #999;*/
-}
-
-.explr-icon {
-	background-repeat: no-repeat;
-	background-position: 0 0;
-	height: 16px;
-	width: 16px;
-}
-
-.explr-item i.fa {
-	position: absolute;
-	z-index: 1;
-	top: 2px;
-	font-size: 14px;
-	left: 16px;
-	color: rgb(187, 187, 187);
-	width: 18px;
-	text-align: center;
-}
-
-.explr-toggler {
-	background-repeat: no-repeat;
-	background-position: 0 0;
-	height: 16px;
-	margin-left: -8px;
-	margin-top: 2px;
-	position: absolute;
-	width: 40px;
-}
-
-/*.explr-plus { background-image: url("../../img/explr/plus.png"); }*/
-/*.explr-minus { background-image: url("../../img/explr/busy.png"); }*/
-
-
-/* Menu icons: */
-
-.explr-tree .icon-text > li, .explr-tree li.icon-text { background-image: none; }
-.explr-tree .icon-file > li, .explr-tree li.icon-file { background-image: url("../../img/explr/attibutes.png"); }
-.explr-tree .icon-address > li, .explr-tree li.icon-address { background-image: url("../../img/explr/address.png"); }
-.explr-tree .icon-archives > li, .explr-tree li.icon-archives { background-image: url("../../img/explr/archives.png"); }
-.explr-tree .icon-badge > li, .explr-tree li.icon-badge { background-image: url("../../img/explr/bestseller.png"); }
-.explr-tree .icon-bank > li, .explr-tree li.icon-bank { background-image: url("../../img/explr/bank.png"); }
-.explr-tree .icon-basket > li, .explr-tree li.icon-basket { background-image: url("../../img/explr/basket.png"); }
-.explr-tree .icon-board > li, .explr-tree li.icon-board { background-image: url("../../img/explr/order.png"); }
-.explr-tree .icon-board2 > li, .explr-tree li.icon-board2 { background-image: url("../../img/explr/order-1.png"); }
-.explr-tree .icon-book > li, .explr-tree li.icon-book { background-image: url("../../img/explr/library.png"); }
-.explr-tree .icon-bookmark > li, .explr-tree li.icon-bookmark { background-image: url("../../img/explr/bookmark.png"); }
-.explr-tree .icon-business > li, .explr-tree li.icon-business { background-image: url("../../img/explr/business-contact.png"); }
-.explr-tree .icon-calendar > li, .explr-tree li.icon-calendar { background-image: url("../../img/explr/calendar.png"); }
-.explr-tree .icon-card > li, .explr-tree li.icon-card { background-image: url("../../img/explr/credit-card.png"); }
-.explr-tree .icon-card2 > li, .explr-tree li.icon-card2 { background-image: url("../../img/explr/my-account.png"); }
-.explr-tree .icon-chain > li, .explr-tree li.icon-chain { background-image: url("../../img/explr/link.png"); }
-.explr-tree .icon-chart > li, .explr-tree li.icon-chart { background-image: url("../../img/explr/statistics.png"); }
-.explr-tree .icon-check > li, .explr-tree li.icon-check { background-image: url("../../img/explr/check.png"); }
-.explr-tree .icon-clock > li, .explr-tree li.icon-clock { background-image: url("../../img/explr/full-time.png"); }
-.explr-tree .icon-comment > li, .explr-tree li.icon-comment { background-image: url("../../img/explr/comment.png"); }
-.explr-tree .icon-config > li, .explr-tree li.icon-config { background-image: url("../../img/explr/config.png"); }
-.explr-tree .icon-customers > li, .explr-tree li.icon-customers { background-image: url("../../img/explr/customers.png"); }
-.explr-tree .icon-cv > li, .explr-tree li.icon-cv { background-image: url("../../img/explr/cv.png"); }
-.explr-tree .icon-db > li, .explr-tree li.icon-db { background-image: url("../../img/explr/database.png"); }
-.explr-tree .icon-direction > li, .explr-tree li.icon-direction { background-image: url("../../img/explr/milestone.png"); }
-.explr-tree .icon-flag > li, .explr-tree li.icon-flag { background-image: url("../../img/explr/flag.png"); }
-.explr-tree .icon-folder > li, .explr-tree li.icon-folder, .explr-icon-folder { background-image: url("../../img/explr/folder.png"); }
-.explr-tree .icon-folder2 > li, .explr-tree li.icon-folder2 { background-image: url("../../img/explr/finished-work.png"); }
-.explr-tree .icon-folder3 > li, .explr-tree li.icon-folder3 { background-image: url("../../img/explr/upcoming-work.png"); }
-.explr-tree .icon-hand > li, .explr-tree li.icon-hand { background-image: url("../../img/explr/freelance.png"); }
-.explr-tree .icon-heart > li, .explr-tree li.icon-heart { background-image: url("../../img/explr/heart.png"); }
-.explr-tree .icon-help > li, .explr-tree li.icon-help { background-image: url("../../img/explr/consulting.png"); }
-.explr-tree .icon-home > li, .explr-tree li.icon-home { background-image: url("../../img/explr/home.png"); }
-.explr-tree .icon-lamp > li, .explr-tree li.icon-lamp { background-image: url("../../img/explr/lightbulb.png"); }
-.explr-tree .icon-left > li, .explr-tree li.icon-left { background-image: url("../../img/explr/sign-out.png"); }
-.explr-tree .icon-left2 > li, .explr-tree li.icon-left2 { background-image: url("../../img/explr/login.png"); }
-.explr-tree .icon-lock > li, .explr-tree li.icon-lock { background-image: url("../../img/explr/lock.png"); }
-.explr-tree .icon-mail > li, .explr-tree li.icon-mail { background-image: url("../../img/explr/contact.png"); }
-.explr-tree .icon-mail2 > li, .explr-tree li.icon-mail2 { background-image: url("../../img/explr/email.png"); }
-.explr-tree .icon-palette > li, .explr-tree li.icon-palette { background-image: url("../../img/explr/drawings.png"); }
-.explr-tree .icon-pencil > li, .explr-tree li.icon-pencil { background-image: url("../../img/explr/edit.png"); }
-.explr-tree .icon-pencil2 > li, .explr-tree li.icon-pencil2 { background-image: url("../../img/explr/pencil.png"); }
-.explr-tree .icon-phone > li, .explr-tree li.icon-phone { background-image: url("../../img/explr/phone.png"); }
-.explr-tree .icon-photo > li, .explr-tree li.icon-photo { background-image: url("../../img/explr/photography.png"); }
-.explr-tree .icon-print > li, .explr-tree li.icon-print { background-image: url("../../img/explr/print.png"); }
-.explr-tree .icon-project > li, .explr-tree li.icon-project { background-image: url("../../img/explr/project.png"); }
-.explr-tree .icon-refresh > li, .explr-tree li.icon-refresh { background-image: url("../../img/explr/refresh.png"); }
-.explr-tree .icon-right > li, .explr-tree li.icon-right { background-image: url("../../img/explr/sign-in.png"); }
-.explr-tree .icon-right2 > li, .explr-tree li.icon-right2 { background-image: url("../../img/explr/logout.png"); }
-.explr-tree .icon-showreel > li, .explr-tree li.icon-showreel { background-image: url("../../img/explr/showreel.png"); }
-.explr-tree .icon-star > li, .explr-tree li.icon-star { background-image: url("../../img/explr/star.png"); }
-.explr-tree .icon-tag > li, .explr-tree li.icon-tag { background-image: url("../../img/explr/tag.png"); }
-.explr-tree .icon-text2 > li, .explr-tree li.icon-text2 { background-image: url("../../img/explr/issue.png"); }
-.explr-tree .icon-text3 > li, .explr-tree li.icon-text3 { background-image: url("../../img/explr/future-projects.png"); }
-.explr-tree .icon-text4 > li, .explr-tree li.icon-text4 { background-image: url("../../img/explr/old-versions.png"); }
-.explr-tree .icon-user > li, .explr-tree li.icon-user { background-image: url("../../img/explr/user.png"); }
-.explr-tree .icon-world > li, .explr-tree li.icon-world { background-image: url("../../img/explr/world.png"); }
-.explr-tree .icon-zoom > li, .explr-tree li.icon-zoom { background-image: url("../../img/explr/zoom.png"); }
-.explr-tree .icon-youtube > li, .explr-tree li.icon-youtube { background-image: url("../../img/explr/youtube.png"); }
-.explr-tree .icon-globe > li, .explr-tree li.icon-globe { background-image: url("../../img/explr/globe.png"); }
-.explr-tree .icon-video > li, .explr-tree li.icon-video { background-image: url("../../img/explr/video.png"); }
-.explr-tree .icon-landscape > li, .explr-tree li.icon-landscape { background-image: url("../../img/explr/landscape.png"); }
-
-
-/* IE Hack Fixes: */
-
-.explr-ie, 
-.explr-ie ol,
-.explr-ie ul {
-	margin-left: 4px;
-	padding-left: 16px;
-	position: static;
-}
-
-.explr-ie ol,
-.explr-ie ul {
-	overflow: hidden;
-}
-
-.explr-ie {
-	padding-top: 20px;
-}
-
-.explr-ie .explr-line, 
-.explr-ie .explr-toggler {
-	top: 0;
-	left: 4px;
-}
-
-.explr-ie li {
-	height: auto !important;
-	height: 24px;
-	*padding-top: 12px;
-	_padding-top: 0;
-}
-
-.explr-ie li a {
-	*position: absolute;
-	_position: static;
-	*top: 0;
-	_top: auto;
-}

data/www/css/main.css

@@ -0,0 +1,760 @@
+* {
+    font-family: Roboto;
+}
+
+html {
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    background-color: #0f0035;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: stretch;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    flex: 1;
+    background-color: #0f0035;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    align-self: stretch;
+}
+
+.invisible {
+    visibility: hidden !important;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.tac {
+    text-align: center;
+}
+
+a {
+    text-decoration: none;
+}
+
+.container {
+    background: rgba(0, 0, 0, 0.1);
+    margin: auto;
+    display: flex;
+    align-self: stretch;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    flex: 1;
+    min-width: 70%;
+
+    @media only screen and (max-width: 1200px) {
+        min-width: 95%;
+    }
+}
+
+.container.expand {
+    min-width: 100%;
+
+    @media only screen and (max-width: 1200px) {
+        min-width: 100%;
+    }
+}
+
+header {
+    text-align: center;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+    padding: 0 25px 0 25px;
+}
+
+header .logo {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+header .logo a {
+    color: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+header .logo img {
+    width: 32px;
+    height: 32px;
+    margin-right: 10px;
+}
+
+header nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    flex: 1;
+}
+
+header nav ul {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+header nav ul li {
+    margin: 0 15px;
+}
+
+header nav ul li.user-menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid #0bc44e;
+    padding: 5px 15px;
+    border-radius: 4px;
+    background: rgba(14, 239, 95, .2);
+}
+
+header nav ul li.user-menu .logout {
+    color: rgb(255, 255, 255);
+}
+
+header nav ul li.user-menu .username {
+    margin-right: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    font-weight: bold;
+    color: #0bc44e;
+}
+
+header nav ul li.user-menu .username i {
+    margin-right: 5px;
+    font-size: 12px;
+}
+
+header nav ul li a {
+    color: rgba(255, 255, 255, 0.6);
+    text-decoration: none;
+}
+
+header nav ul li a:hover,
+header nav ul li.active a {
+    color: white;
+}
+
+.toolbar {
+    display: flex;
+    flex-direction: row;
+    padding: 0 25px 0 25px;
+    align-self: stretch;
+}
+
+.toolbar h2 {
+    padding: 0 25px 0 0;
+}
+
+.toolbar .toolbar-actions {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+select.playlist-picker,
+a.btn,
+button {
+    background-color: #fff;
+    border-radius: 5px;
+    border: 1px solid #bc48ff;
+    color: #270035;
+    padding: 10px 30px;
+    text-decoration: none;
+    margin: 10px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    transition: .2s linear all;
+}
+
+a.btn:hover,
+button:hover {
+    color: #bc48ff;
+}
+
+select.playlist-picker,
+button.purple {
+    font-weight: bold;
+    border: 1px solid #692fbd;
+    color: white;
+    background: #692fbd;
+    background: linear-gradient(90deg, #bc48ff 0%, #692fbd 100%);
+}
+
+button.green {
+    font-weight: bold;
+    color: white;
+    border: 1px solid #0eef5f;
+    background: linear-gradient(90deg, #2fde6f 0%, #13c251 100%);
+}
+
+button.normal:hover {
+    color: white;
+    border-color: #692fbd;
+    background: #692fbd;
+    background: linear-gradient(90deg, #bc48ff 0%, #692fbd 100%);
+}
+
+button.green:hover,
+button.purple:hover {
+    border: 1px solid #fff;
+}
+
+.alert {
+    margin: 10px 30px 20px 30px;
+    padding: 20px 50px;
+    align-self: stretch;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+}
+
+.alert-info {
+    color: rgb(70, 70, 70);
+    border: 1px solid rgb(70, 70, 70);
+    background: rgba(70, 70, 70, .2);
+}
+
+.alert-success {
+    color: rgb(14, 239, 95);
+    border: 1px solid rgb(14, 239, 95);
+    background: rgba(14, 239, 95, .2);
+}
+
+.alert-error {
+    color: rgb(239, 14, 93);
+    border: 1px solid rgb(239, 14, 93);
+    background: rgba(239, 14, 93, .2);
+}
+
+
+.panel {
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 5px;
+    padding: 0 25px 80px 25px;
+    margin: 10px 25px;
+    border-left: 5px solid #0eef5f;
+    align-self: stretch;
+}
+
+.panel h3 {
+    color: #fff;
+}
+
+.panel-inactive {
+    background: white;
+    color: #AAA;
+    border-color: #BBB;
+}
+
+.panel-inactive h3 {
+    color: #333;
+}
+
+.panel table {
+    width: 100%;
+    margin-top: 30px;
+    border-collapse: collapse;
+    text-align: left;
+    font-weight: normal;
+}
+
+.panel th {
+    border-bottom: 1px solid #fff;
+    border-collapse: collapse;
+    padding: 10px;
+    font-weight: normal;
+}
+
+.panel-inactive th {
+    border-color: #EEE;
+
+}
+
+.panel td {
+    border-collapse: collapse;
+    padding: 10px;
+}
+
+.panel td a.item.sort {
+    cursor: move;
+}
+
+.panel td a.item-name {
+    color: white;
+}
+
+.panel-inactive td a.item-name {
+    color: #AAA;
+}
+
+.panel td a.item-name:hover {
+    text-decoration: underline;
+}
+
+.panel td.actions a {
+    background: white;
+    color: #333;
+    border: 1px solid #AAA;
+    border-radius: 4px;
+    padding: 2px;
+    width: 35px;
+    display: inline-block;
+    text-align: center;
+    margin: 0 2px;
+}
+
+.panel td.actions a:hover {
+    color: #0eef5f;
+    border-color: #0eef5f;
+}
+
+.panel td.actions a.item-edit:hover {
+    color: #bc48ff;
+    border-color: #bc48ff;
+}
+
+.panel td.actions a.item-delete:hover {
+    color: #ef0e0e;
+    border-color: #ef0e0e;
+}
+
+.panel td.infos {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.panel td .inner {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.panel td div.badge {
+    margin-right: 5px;
+    font-size: 10px;
+    font-weight: bold;
+}
+
+.panel a {
+    color: #0eef5f;
+    text-decoration: none;
+}
+
+.panel a:hover {
+    color: #0bc44e;
+}
+
+.icon-right {
+    margin: 0 0 0 10px;
+}
+
+.icon-left {
+    margin: 0 10px 0 0;
+}
+
+.pure-material-switch {
+    z-index: 0;
+    position: relative;
+    display: inline-block;
+}
+
+.pure-material-switch > input {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    z-index: -1;
+    position: absolute;
+    right: 6px;
+    top: -8px;
+    display: block;
+    margin: 0;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    background-color: rgba(0, 0, 0, 0.38);
+    outline: none;
+    opacity: 0;
+    transform: scale(1);
+    pointer-events: none;
+    transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
+}
+
+.pure-material-switch > span {
+    display: inline-block;
+    width: 100%;
+    cursor: pointer;
+}
+
+.pure-material-switch > span::before {
+    content: "";
+    float: right;
+    display: inline-block;
+    margin: 5px 0 5px 10px;
+    border-radius: 7px;
+    width: 36px;
+    height: 14px;
+    background-color: rgba(0, 0, 0, 0.38);
+    vertical-align: top;
+    transition: background-color 0.2s, opacity 0.2s;
+}
+
+.pure-material-switch > span::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    right: 16px;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    background-color: rgb(255, 255, 255);
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    transition: background-color 0.2s, transform 0.2s;
+}
+
+.pure-material-switch > input:checked {
+    right: -10px;
+    background-color: rgb(14, 239, 95);
+}
+
+.pure-material-switch > input:checked + span::before {
+    background-color: rgba(14, 239, 95, 0.6);
+}
+
+.pure-material-switch > input:checked + span::after {
+    background-color: rgb(14, 239, 95);
+    transform: translateX(16px);
+}
+
+.pure-material-switch:hover > input {
+    opacity: 0.04;
+}
+
+.pure-material-switch > input:focus {
+    opacity: 0.12;
+}
+
+.pure-material-switch:hover > input:focus {
+    opacity: 0.16;
+}
+
+.pure-material-switch > input:active {
+    opacity: 1;
+    transform: scale(0);
+    transition: transform 0s, opacity 0s;
+}
+
+.pure-material-switch > input:active + span::before {
+    background-color: rgba(14, 239, 95, 0.6);
+}
+
+.pure-material-switch > input:checked:active + span::before {
+    background-color: rgba(0, 0, 0, 0.38);
+}
+
+.pure-material-switch > input:disabled {
+    opacity: 0;
+}
+
+.pure-material-switch > input:disabled + span {
+    color: rgb(0, 0, 0);
+    opacity: 0.38;
+    cursor: default;
+}
+
+.pure-material-switch > input:disabled + span::before {
+    background-color: rgba(0, 0, 0, 0.38);
+}
+
+.pure-material-switch > input:checked:disabled + span::before {
+    background-color: rgba(14, 239, 95, 0.6);
+}
+
+.modals {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.4);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.modals-outer {
+    min-width: 30%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.modals-outer .modal-close {
+    color: white;
+    font-size: 30px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-bottom: 20px;
+    margin-top: 0px;
+}
+
+.modals-inner {
+    background: white;
+    border-radius: 10px;
+    color: #333;
+}
+
+.modals-inner .modal h2 {
+    border-bottom: 1px solid #DDD;
+    padding: 15px 15px;
+    margin: 0;
+}
+
+
+.modals-inner .modal h3 {
+    align-self: stretch;
+    border-bottom: 1px solid #DDD;
+    padding: 15px 15px;
+    margin: 0;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 20px;
+}
+
+form .form-group {
+    margin: 10px 20px 5px 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+    flex: 1;
+}
+
+form .form-group label {
+    flex: 1;
+    padding: 10px;
+    text-align: right;
+    margin-right: 20px;
+}
+
+form .form-group .widget {
+    flex: 3;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    align-self: stretch;
+}
+
+form .form-group input,
+form .form-group select,
+form .form-group textarea {
+    flex: 1;
+    padding: 10px 5px 10px 5px;
+    border: 1px solid #EEE;
+    border-radius: 4px;
+    width: auto;
+}
+
+form .form-group input[type=checkbox] {
+    flex: 0;
+}
+
+form .form-group .trigger {
+    margin-right: 10px;
+}
+
+form .form-group select.trigger {
+    max-width: 120px;
+}
+
+form .form-group span {
+    margin-left: 10px;
+}
+
+form .actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 10px;
+    align-self: stretch;
+}
+
+form .actions button.green,
+form .actions button {
+    font-size: 18px;
+}
+
+form .actions button.green:hover {
+    background: white;
+    color: rgb(14, 239, 95);
+    border-color: rgb(14, 239, 95);
+}
+
+form .actions button.btn-normal {
+    color: #999;
+    border-color: #999;
+    font-size: 18px;
+    margin: 0;
+}
+
+form .actions button.btn-normal:hover {
+    color: #555;
+    border-color: #555;
+}
+
+span.empty {
+    text-transform: uppercase;
+    opacity: 0.5;
+    color: #999;
+}
+
+footer {
+    align-self: stretch;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    display: flex;
+    padding: 20px;
+}
+
+footer .version {
+    opacity: 0.3;
+}
+
+.login-page {
+    max-width: 600px;
+    padding-top: 50px;
+}
+
+.card {
+    background: white;
+    border-radius: 6px;
+    padding: 50px 50px;
+    color: #333;
+}
+
+.card form {
+    padding: 0;
+}
+
+.card form .form-group  {
+    margin: 0 0 30px 0;
+    padding: 0;
+}
+.card form .form-group .widget {
+    flex: 1;
+}
+
+.card form .form-group label {
+    text-align: left;
+}
+
+.card button[type=submit] {
+    margin: 0 auto;
+}
+
+.card h3 {
+    text-align: center;
+    font-size: 36px;
+    margin: 0 0 40px 0;
+}
+
+a.badge,
+.badge {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 5px 5px;
+    border-radius: 4px;
+    font-size: 12px;
+    background: rgba(255, 255, 255, .1);
+    border: 1px solid transparent;
+    color: #ffffff;
+}
+
+a.badge:hover {
+    color: #FFFFFF;
+    border: 1px solid rgba(255,255,255,.4);
+}
+
+.panel-inactive .badge {
+    background: rgba(200, 200, 200, .1);
+    color: #999999;
+}
+
+.panel-inactive a.badge:hover {
+    color: #999999;
+    border: 1px solid rgba(180,180,180,.4);
+}
+
+.badge.anonymous {
+    opacity: .2;
+}
+
+.panel-logs {
+    padding-bottom: 20px;
+}
+
+.panel-logs pre {
+    background: rgba(0,0,0,0.9);
+    border: 1px solid #555;
+    border-radius: 4px;
+    font-family: monospace;
+    color: #BBB;
+    padding: 20px;
+    min-height: 200px;
+    max-height: 500px;
+    overflow: auto;
+}
+
+.plugin-description {
+    font-size: 14px;
+    margin-left: 34px;
+    color: #999;
+
+}