diff --git a/CSS/themes/duplicati/duplicati-base.css b/CSS/themes/duplicati/duplicati-base.css new file mode 100644 index 00000000..d7e17ce9 --- /dev/null +++ b/CSS/themes/duplicati/duplicati-base.css @@ -0,0 +1,350 @@ +@import url("https://theme-park.dev/CSS/defaults/placeholders.css"); + +* { + outline: none !important; +} + +body { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; + color: var(--text) !important; +} + +body .container .header { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +body .container .footer { + background: var(--main-bg-color); + background-repeat: repeat, no-repeat; + background-attachment: fixed, fixed; + background-position: center center, center center; + background-size: auto, cover; + -webkit-background-size: auto, cover; + -moz-background-size: auto, cover; + -o-background-size: auto, cover; +} + +.mainmenu { + background: initial; +} + +.mainmenu ul li a { + background-color: initial !important; +} + +.mainmenu ul li a.active { + background-color: initial !important; + color: var(--link-color-hover) !important; +} + +body .container .header .action-icons>.pause, +body .container .header .action-icons-small>.pause { + background: url(https://dev.theme-park.dev/Resources/duplicati/pause.png); +} + +body .container .header .action-icons>.throttle, +body .container .header .action-icons-small>.throttle { + background: url(https://dev.theme-park.dev/Resources/duplicati/throttle.png); +} + +body .container .body .content div.add .steps .step.active span, +body .container .body .content div.restore .steps .step.active span { + border: 4px var(--button-color) solid; + background: var(--button-color); + color: var(--button-text); +} + +body .container .body .content div.add .steps-legend li.active, +body .container .body .content div.restore .steps-legend li.active { + color: var(--link-color); +} + +body .container .body .content div.add .steps .step span, +body .container .body .content div.restore .steps .step span { + display: block; + border: 4px var(--button-color) solid; + background: var(--button-color); +} + +body .container .body .content div.add .steps-legend li, +body .container .body .content div.restore .steps-legend li { + color: var(--text-muted); +} + +body .container .body .content div.add .steps .step, +body .container .body .content div.restore .steps .step { + color: var(--button-text-hover); +} + +a, +a span:not(.tabs>li>a>span):not(.buttons>a>span), +body .container .body a { + color: var(--link-color); +} + +a:hover, +a span:hover:not(.tabs>li>a>span):not(.buttons>a>span) { + color: var(--link-color-hover); +} + +body .container .header a { + color: rgb(var(--accent-color)) +} + +body .container .header a:hover { + color: var(--accent-color-hover) +} + +.taskmenu dt { + color: var(--text-hover) !important; +} + +dt { + color: var(--text-hover) !important; +} + +dd { + color: var(--text) !important; +} + +.tasklist dd a, +.tasklist dd p { + color: var(--link-color) !important; +} + +.tasklist dd a:hover, +.tasklist dd p:hover { + color: var(--link-color-hover) !important; +} + +.action-icons { + color: var(--text-hover) !important; +} + +.submit { + color: var(--button-text) !important; + background: var(--button-color) !important; +} + +.submit:hover { + color: var(--button-text-hover) !important; + background: var(--button-color-hover) !important; +} + +input, +select, +form.styled input, +form.styled textarea, +form.styled select, +form.styled .input.select select { + color: var(--text); + border: none; + background: rgba(0, 0, 0, .25); +} + +form.styled input:focus, +form.styled textarea:focus { + color: var(--text-hover); + border: none; + background: rgba(0, 0, 0, .45); +} + +select:focus, +form.styled select:focus, +form.styled .input.select select:focus { + background: #1f1f1f; + color: var(--text-hover); + border: none; + +} + +h1, +h2 { + color: var(--text-hover); +} + +body .container .header .state { + background: rgb(var(--accent-color), .1); + color: var(--text); + border-color: rgb(var(--accent-color)); +} + +/* DROP DOWN MENU */ +@media (max-width:1150px), +(max-width:1150px) and (min-resolution:192dpi), +(max-width:1150px) and (min-resolution:1.25dppx) { + body .container .body .mainmenu { + background: var(--drop-down-menu-bg) !important; + } + +} + +body .container .body .contextmenu { + display: none; + position: absolute; + background: var(--drop-down-menu-bg); + border: 1px rgba(255, 255, 255, 0.1) solid; + box-shadow: 0 4px 8px rgb(0 0 0 / 30%); + z-index: 200; + padding: 5px; +} + +body .container .body .contextmenu li a:hover { + background: rgba(255, 255, 255, 0.25); + color: var(--text-hover); +} + +body .container .body .mainmenu>ul>li>a.home { + background: url(https://dev.theme-park.dev/Resources/duplicati/home.png) no-repeat 8px 7px; +} + +body .container .body .mainmenu>ul>li>a.add { + background: url(https://dev.theme-park.dev/Resources/duplicati/add.png) no-repeat 8px 7px; +} + +body .container .body .mainmenu>ul>li>a.restore { + background: url(https://dev.theme-park.dev/Resources/duplicati/restore.png) no-repeat 8px 7px; +} + +body .container .body .mainmenu>ul>li>a.settings { + background: url(https://dev.theme-park.dev/Resources/duplicati/settings.png) no-repeat 8px 7px; +} + +body .container .body .mainmenu>ul>li>a.about { + background: url(https://dev.theme-park.dev/Resources/duplicati/about.png) no-repeat 8px 7px; +} + +body .container .body .mainmenu>ul>li>a.logout { + background: url(https://dev.theme-park.dev/Resources/duplicati/logout.png) no-repeat 8px 7px; +} + +#threedotmenu_add_destination>ul>li>a>span { + color: var(--text) !important; +} + + +/* MODAL */ + +div.connection-lost div.title, +div.modal-dialog div.title { + border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--modal-bg-color); + border-radius: 5px 5px 0 0; + padding: 10px 20px; + font-weight: bold; + color: var(--text); + text-align: center; +} + +div.connection-lost div.content, +div.modal-dialog div.content { + border: 1px solid rgba(255, 255, 255, 0.1); + background: var(--modal-bg-color); + padding: 20px; +} + + +/* BUTTONS */ + +#login-button { + cursor: pointer; +} + +.button, +form.styled .buttons input, +form.styled .buttons a { + display: block; + background: var(--button-color); + color: var(--button-text) !important; + padding: 5px 15px; + float: right; + margin-left: 10px; + cursor: pointer; + width: auto; + border: none; + font-family: 'Clear Sans', sans-serif; + font-size: 16px; + font-weight: 300; + border-radius: 0; +} + +.button:hover, +form.styled .buttons input:hover, +form.styled .buttons a:hover { + background: var(--button-color-hover); + color: var(--button-text-hover) !important; +} + +ul.tabs>li.active>a { + background: var(--button-color-hover); + color: var(--button-text-hover) !important; +} + +ul.tabs>li.active { + background-color: var(--button-color); + color: var(--button-text-hover); +} + + +ul.tabs>li { + display: inline; + margin-right: 10px; + border: 1px solid var(--button-color); + padding: 5px; +} + +/* FOLDER TREE*/ +.tree-view li div.selected { + border-color: rgba(255, 255, 255, .1); + background-color: rgba(252, 252, 252, .25); +} + + +/* PROGRESS BAR */ +body .container .header .state .progress-bar { + background: rgba(var(--accent-color), 0.25); +} + +/* LOGIN */ +#login h2 { + background: rgba(255, 255, 255, .15); + color: var(--text); +} + +#login fieldset p { + color: var(--text-hover); +} + +#login fieldset { + background-color: rgba(255, 255, 255, .15); +} + +#login fieldset input[type="submit"] { + background: var(--button-color); + color: var(--button-text); +} + +#login fieldset input[type="submit"]:hover { + background: var(--button-color-hover); + color: var(--button-text-hover); +} + +#login fieldset input[type="email"], +#login fieldset input[type="password"] { + background: rgba(0, 0, 0, .25); + color: var(--text); +} \ No newline at end of file diff --git a/README.md b/README.md index f7d96b7a..0e8935dd 100644 --- a/README.md +++ b/README.md @@ -136,22 +136,10 @@ - -

-

Grafana (Deprecated)

- - +

Netdata

- -

-

Monitorr (Deprecated)

- - -

-

Logarr (Deprecated)

-

Portainer

@@ -164,24 +152,30 @@

Guacamole

+ + +

+

Dozzle

+ + +

+

Calibre-web

+ + +

+

Xbackbone

+

Filebrowser

- - -

-

PLPP (Deprecated)

- +

librespeed

- -

-

The Lounge (Deprecated)

- +

Lazylibrarian

@@ -194,6 +188,14 @@

Gaps

+ +

+

Uptime Kuma

+ + +

+

Mylar 3

+ @@ -209,10 +211,6 @@

Kitana

-

-

Webtools (Deprecated)

- -

Resilio-Sync

@@ -224,12 +222,12 @@

Unraid

- -

Moviematch

+ +

Petio

@@ -242,32 +240,43 @@

VueTorrent

- -

-

Dozzle

+ +

+

Requestrr

- -

-

Calibre-web

+ +

+

Duplicati

- -

-

Xbackbone

+ +

+

PLPP (Deprecated)

+ + +

+

The Lounge (Deprecated)

- -

-

Requestrr

+ +

+

Grafana (Deprecated)

- -

-

Uptime Kuma

+ +

+

Monitorr (Deprecated)

- -

-

Mylar 3

+ +

+

Webtools (Deprecated)

+ +

+

Logarr (Deprecated)

+ + + + @@ -275,8 +284,6 @@
-

Honourable mentions

- -

Archmonger/Blackberry-Themes

+

Honourable mentions

-

leram84/layer.Cake

+

Archmonger/Blackberry-Themes

\ No newline at end of file diff --git a/Resources/duplicati/about.png b/Resources/duplicati/about.png new file mode 100644 index 00000000..5779ca7c Binary files /dev/null and b/Resources/duplicati/about.png differ diff --git a/Resources/duplicati/add.png b/Resources/duplicati/add.png new file mode 100644 index 00000000..e0735816 Binary files /dev/null and b/Resources/duplicati/add.png differ diff --git a/Resources/duplicati/home.png b/Resources/duplicati/home.png new file mode 100644 index 00000000..637da01e Binary files /dev/null and b/Resources/duplicati/home.png differ diff --git a/Resources/duplicati/logout.png b/Resources/duplicati/logout.png new file mode 100644 index 00000000..931dcdea Binary files /dev/null and b/Resources/duplicati/logout.png differ diff --git a/Resources/duplicati/pause.png b/Resources/duplicati/pause.png new file mode 100644 index 00000000..be62518e Binary files /dev/null and b/Resources/duplicati/pause.png differ diff --git a/Resources/duplicati/restore.png b/Resources/duplicati/restore.png new file mode 100644 index 00000000..60971613 Binary files /dev/null and b/Resources/duplicati/restore.png differ diff --git a/Resources/duplicati/settings.png b/Resources/duplicati/settings.png new file mode 100644 index 00000000..e897fdea Binary files /dev/null and b/Resources/duplicati/settings.png differ diff --git a/Resources/duplicati/throttle.png b/Resources/duplicati/throttle.png new file mode 100644 index 00000000..678d3f59 Binary files /dev/null and b/Resources/duplicati/throttle.png differ diff --git a/Resources/landing-page/css/custom.css b/Resources/landing-page/css/custom.css index e225f413..d651b934 100644 --- a/Resources/landing-page/css/custom.css +++ b/Resources/landing-page/css/custom.css @@ -17,7 +17,8 @@ .theme-overview, #services, #themes, -footer { +footer, +section { background: var(--main-bg-color); background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; @@ -306,6 +307,23 @@ p { line-height: 1.2; } +@keyframes glowing { + 0% { + background-color: var(--button-color); + box-shadow: 0 0 5px rgba(var(--accent-color), 0.502); + } + 50% { + background-color: var(--button-color-hover); + box-shadow: 0 0 10px rgba(var(--accent-color)); + } + 100% { + background-color: var(--button-color); + box-shadow: 0 0 5px rgba(var(--accent-color), 0.502) + } + } +.click-me-btn { + animation: glowing 1300ms infinite; +} /* @media (min-width: 992px) { .portfolio-box img { object-fit: cover; @@ -356,4 +374,44 @@ p { #portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.nord-hover { background: #2E3440; +} + + +@keyframes fadein { + from { + opacity:0; + } + to { + opacity:1; + } +} +@-moz-keyframes fadein { /* Firefox */ + from { + opacity:0; + } + to { + opacity:1; + } +} +@-webkit-keyframes fadein { /* Safari and Chrome */ + from { + opacity:0; + } + to { + opacity:1; + } +} +@-o-keyframes fadein { /* Opera */ + from { + opacity:0; + } + to { + opacity: 1; + } +} +body { + animation: fadein 2s; + -moz-animation: fadein 2s; /* Firefox */ + -webkit-animation: fadein 2s; /* Safari and Chrome */ + -o-animation: fadein 2s; /* Opera */ } \ No newline at end of file diff --git a/Resources/landing-page/js/scripts.js b/Resources/landing-page/js/scripts.js index 2cb17109..757f6573 100644 --- a/Resources/landing-page/js/scripts.js +++ b/Resources/landing-page/js/scripts.js @@ -71,36 +71,85 @@ })(jQuery); // End of use strict -// load random css stylesheet const themes = ["aquamarine","hotline","dark","organizr-dark","dracula","overseerr", "plex","space-gray","hotpink","onedark","nord"]; var random = themes[~~(Math.random() * themes.length)]; +// load a random css stylesheet function injectTheme(theme,container="head") { if (container === "head") { html_element = document.head; } else html_element = document.body; - let link = document.createElement("link"); + let themeOption = document.getElementById("theme-option") + let link = themeOption ? themeOption : document.createElement("link"); url = "/CSS/variables/" link.type = "text/css"; link.rel = "stylesheet"; - link.href = `${url}/${theme}.css`; - + link.href = `${url}/${theme.toLowerCase()}.css`; + link.id = `theme-option` html_element.appendChild(link); } - // Add updated theme count. - function addThemeCount() { - let themeJsonUrl = "https://theme-park.dev/themes.json" - return fetch(themeJsonUrl) - .then(response => { - return response.json(); - }).then(json => { - document.getElementById("themeCount").innerHTML = ` - theme.park contains ${Object.keys(json.applications).length} themed applications, with css addons on certain themes.` - }) + // Add theme data and set theme vars + var apps; + var themeOptions; + function addThemeData() { + let themeJsonUrl = "/themes.json" + fetch(themeJsonUrl) + .then(response => response.json()) + .then(json => { + apps = json.applications + themeOptions = json.themes + appCount = Object.keys(json.applications).length + document.getElementById("tag-line").innerText = `A collection of themes/skins for ${appCount} selfhosted + apps!` + document.getElementById("theme-header-text").innerText = `${appCount} themed applications!` + document.getElementById("app-count").innerHTML = ` + theme.park contains ${appCount} themed applications, with css addons on certain themes.` + document.getElementById("theme-count").innerHTML = `Choose between ${Object.keys(json.themes).length} different + styles! With the possibility to easily create your own themes using the defined variables.` + createApps(apps) + }) +} + +function createApps(apps) { + let allAppsDiv = document.getElementById("all-apps") + sorted = Object.keys(apps).sort() + for (let app in sorted) { + let newApp = ` + +

+

${sorted[app][0].toUpperCase() + sorted[app].slice(1)}

+
` + allAppsDiv.innerHTML += newApp + } +} + +function fadeOutIn(speed ) { + let theme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)] + if (!document.body.style.opacity) { + document.body.style.opacity = 1; + } + var outInterval = setInterval(function() { + document.body.style.opacity -= 0.02; + if (document.body.style.opacity <= 0) { + clearInterval(outInterval); + injectTheme(theme) + document.getElementById("switch-theme").innerText = theme + var inInterval = setInterval(function() { + document.body.style.opacity = Number(document.body.style.opacity)+0.02; + if (document.body.style.opacity >= 1) + clearInterval(inInterval); + }, speed/50 ); + } + }, speed/50 ); + } injectTheme(random); -addThemeCount(); +addThemeData(); +document.getElementById("switch-theme").addEventListener("click", () => { + fadeOutIn(350); +}) diff --git a/docker-mods/duplicati/Dockerfile b/docker-mods/duplicati/Dockerfile new file mode 100644 index 00000000..5d11a1f6 --- /dev/null +++ b/docker-mods/duplicati/Dockerfile @@ -0,0 +1,7 @@ +FROM scratch + + +LABEL maintainer="GilbN" +LABEL app="Duplicati" +#copy local files. +COPY root/ / \ No newline at end of file diff --git a/docker-mods/duplicati/root/etc/cont-init.d/98-themepark b/docker-mods/duplicati/root/etc/cont-init.d/98-themepark new file mode 100644 index 00000000..293b111b --- /dev/null +++ b/docker-mods/duplicati/root/etc/cont-init.d/98-themepark @@ -0,0 +1,49 @@ +#!/usr/bin/with-contenv bash + +echo '----------------------------' +echo '| Duplicati theme.park Mod |' +echo '----------------------------' + +APP_FILEPATH='/app/duplicati/webroot' + +# Display variables for troubleshooting +echo -e "Variables set:\\n\ +'APP_FILEPATH'=${APP_FILEPATH}\\n\ +'TP_DOMAIN'=${TP_DOMAIN}\\n\ +'TP_THEME'=${TP_THEME}\\n" + +# Set default +if [[ -z ${TP_DOMAIN} ]]; then + echo 'No domain set, defaulting to theme-park.dev' + TP_DOMAIN='theme-park.dev' +fi + +case ${TP_DOMAIN} in + *"github.io"*) + echo "Switching to github.io URL style" + TP_DOMAIN="${TP_DOMAIN}\/theme.park" + ;; +esac + +if [[ -z ${TP_THEME} ]]; then + echo 'No theme set, defaulting to organizr-dark' + TP_THEME='organizr-dark' +fi + +sed_file(){ + sed -i "s/<\/head>/<\/head> /g" $1 + sed -i "s/<\/head>/<\/head> /g" $1 + printf 'Stylesheet set to %s on %s\n\n' "${TP_THEME}" "$1" +} + +# Adding stylesheets +echo '---------------------------------------' +echo '| Adding the stylesheet to html files |' +echo '---------------------------------------' + +if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}/index.html"; then + find ${APP_FILEPATH} -type f -iname *.html | while read fname + do + sed_file $fname + done +fi diff --git a/index.html b/index.html index 1efdb4c8..f5ae4ab5 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ - + @@ -71,9 +71,7 @@
-

A collection of themes/skins for over 40 selfhosted - apps! -

+

...

Find Out More
@@ -84,304 +82,24 @@
-

Over 40 themed applications!

+

...


-

...

+

...

Installation methods include custom docker mods for linuxserver.io containers,

custom scripts for select Hotio containers and multiple examples of subfiltering using webservers like Nginx and Apache

-

Choose between 9 different - styles! With the possibility to easily create your own themes using the defined variables.

+

...

Get Started!
-
- -

-

-

Sonarr

-
- -

-

-

Radarr

-
- -

-

-

Lidarr

-
- -

-

Readarr

-
- -

-

-

Prowlarr

-
- -

-

-

Bazarr

-
- -

-

-

Plex

-
- -

-

-

Synclounge

-
- -

-

Calibre-Web

-
- -

-

Jellyfin

-
- -

-

-

Emby

-
- -

-

Tautulli

-
- -

-

-

Ombi

-
- -

-

Requestrr

-
- -

-

Organizr

-
- -

-

-

deluge

-
- -

-

qBittorrent

-
- -

-

ruTorrent

-
- -

-

Transmission

-
- -

-

SABnzbd

-
- -

-

-

NZBGet

-
- -

-

-

NZBHydra 2

-
- -

-

-

Jackett

-
- - -

-

Netdata

-
- - -

-

Portainer

-
- -

-

-

Pi-hole

-
- -

-

Guacamole

-
- -

-

Filebrowser

-
- - -

-

Librespeed

-
- - -

-

Lazylibrarian

-
- -

-

Adguard

-
- -

-

-

Gaps

-
- -

-

Bitwarden

-
- -

-

Duplicacy

-
- -

-

-

Kitana

-
- - -

-

Resilio-Sync

-
- -

-

-

Gitea

-
- -

-

-

Unraid

-
- -

-

Moviematch

-
- -

-

-

Petio

-
- -

-

-

Flood

-
- -

-

-

VueTorrent

-
- -

-

-

Dozzle

-
- -

-

-

Xbackbone

-
- -

-

-

Uptime Kuma

-
- -

-

-

Mylar 3

-
+
+ ...
@@ -434,9 +152,23 @@
+
+
+
+
+
+
+ +
+
+
+
-

Available theme options

+

Official theme options

+
Click here for the community themes
+ +
@@ -558,7 +290,7 @@ - +