deploy: 9da3a4366a

README.md

@@ -136,22 +136,10 @@
 </td>
 </tr>
 <tr style="height: 56px;">
-<td style="width: 110px; height: 56px; text-align: center;">
+<td>
-<p><a href="https://docs.theme-park.dev/themes/grafana"><img src="https://docs.theme-park.dev/site_assets/grafana/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/grafana">Grafana (Deprecated)</a></p>
-</td>
-<td style="width: 160px; height: 56px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/netdata"><img src="https://docs.theme-park.dev/site_assets/netdata/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/netdata">Netdata</a></p>
 </td>
-<td style="width: 10px; height: 56px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/monitorr"><img src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/monitorr">Monitorr (Deprecated)</a></p>
-</td>
-<td style="width: 90px; height: 56px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/logarr"><img src="https://docs.theme-park.dev/site_assets/logarr/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/logarr">Logarr (Deprecated)</a></p>
-</td>
 <td style="width: 136px; height: 56px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/portainer"><img src="https://docs.theme-park.dev/site_assets/portainer/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/portainer">Portainer</a></p>
@@ -164,24 +152,30 @@
 <p><a href="https://docs.theme-park.dev/themes/guacamole"><img src="https://docs.theme-park.dev/site_assets/guacamole/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/guacamole">Guacamole</a></p>
 </td>
+</td>
+<td style="width: 90px; height: 40px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/dozzle"><img src="https://docs.theme-park.dev/site_assets/dozzle/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/dozzle">Dozzle</a></p>
+</td>
+<td style="width: 110px; height: 26px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/calibreweb"><img src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/calibreweb">Calibre-web</a></p>
+</td>
+<td style="width: 110px; height: 26px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/xbackbone"><img src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/xbackbone">Xbackbone</a></p>
+</td>
 </tr>
 <tr style="height: 40px; text-align: center;">
 <td style="width: 110px; height: 40px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/filebrowser"><img src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/filebrowser">Filebrowser</a></p>
-</td>
+
-<td style="width: 160px; height: 40px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/plpp"><img src="https://docs.theme-park.dev/site_assets/plpp/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/plpp">PLPP (Deprecated)</a></p>
-</td>
 <td style="width: 10px; height: 40px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/librespeed"><img src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/librespeed">librespeed</a></p>
 </td>
-<td style="width: 90px; height: 40px; text-align: center;">
+
-<p><a href="https://docs.theme-park.dev/themes/thelounge"><img src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/thelounge">The Lounge (Deprecated)</a></p>
-</td>
 <td style="width: 90px; height: 40px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/lazylibrarian"><img src="https://docs.theme-park.dev/site_assets/lazylibrarian/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/lazylibrarian">Lazylibrarian</a></p>
@@ -194,6 +188,14 @@
 <p><a href="https://docs.theme-park.dev/themes/gaps"><img src="https://docs.theme-park.dev/site_assets/gaps/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/gaps">Gaps</a></p>
 </td>
+<td style="width: 90px; height: 26px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/uptime-kuma"><img src="https://docs.theme-park.dev/site_assets/uptime-kuma/logo.png" alt="" width="48" height="45" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/uptime-kuma">Uptime Kuma</a></p>
+</td>
+<td style="width: 90px; height: 26px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/mylar3"><img src="https://docs.theme-park.dev/site_assets/mylar3/logo.png" alt="" width="48" height="45" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/mylar3">Mylar 3</a></p>
+</td>
 </tr>
 <tr>
 <td style="width: 90px; height: 40px; text-align: center;">
@@ -209,10 +211,6 @@
 <p><a href="https://docs.theme-park.dev/themes/kitana">Kitana</a></p>
 </td>
 <td style="width: 90px; height: 40px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/webtools"><img src="https://docs.theme-park.dev/site_assets/webtools/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/webtools">Webtools (Deprecated)</a></p>
-</td>
-<td style="width: 90px; height: 40px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/resilio-sync"><img src="https://docs.theme-park.dev/site_assets/resilio-sync/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/resilio-sync">Resilio-Sync</a></p>
 </td>
@@ -224,12 +222,12 @@
 <p><a href="https://docs.theme-park.dev/themes/unraid"><img src="https://docs.theme-park.dev/site_assets/unraid/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/unraid">Unraid</a></p>
 </td>
-</tr>
-<tr>
 <td style="width: 90px; height: 40px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/moviematch"><img src="https://docs.theme-park.dev/site_assets/moviematch/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/moviematch">Moviematch</a></p>
 </td>
+</tr>
+<tr>
 <td style="width: 90px; height: 40px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/petio"><img src="https://docs.theme-park.dev/site_assets/petio/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/petio">Petio</a></p>
@@ -242,32 +240,43 @@
 <p><a href="https://docs.theme-park.dev/themes/vuetorrent"><img src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" alt="" width="48" height="48" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/vuetorrent">VueTorrent</a></p>
 </td>
-<td style="width: 90px; height: 40px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/dozzle"><img src="https://docs.theme-park.dev/site_assets/dozzle/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/dozzle">Dozzle</a></p>
-</td>
-<td style="width: 110px; height: 26px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/calibreweb"><img src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/calibreweb">Calibre-web</a></p>
-</td>
-<td style="width: 110px; height: 26px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/xbackbone"><img src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/xbackbone">Xbackbone</a></p>
-</td>
-</tr>
-<tr>
 <td style="width: 90px; height: 26px; text-align: center;">
 <p><a href="https://docs.theme-park.dev/themes/requestrr"><img src="https://docs.theme-park.dev/site_assets/requestrr/logo.png" alt="" width="48" height="45" /></a></p>
 <p><a href="https://docs.theme-park.dev/themes/requestrr">Requestrr</a></p>
 </td>
-<td style="width: 90px; height: 26px; text-align: center;">
+<td style="width: 90px; height: 56px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/uptime-kuma"><img src="https://docs.theme-park.dev/site_assets/uptime-kuma/logo.png" alt="" width="48" height="45" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/duplicati"><img src="https://docs.theme-park.dev/site_assets/duplicati/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/uptime-kuma">Uptime Kuma</a></p>
+<p><a href="https://docs.theme-park.dev/themes/duplicati">Duplicati</a></p>
 </td>
-<td style="width: 90px; height: 26px; text-align: center;">
+<td style="width: 160px; height: 40px; text-align: center;">
-<p><a href="https://docs.theme-park.dev/themes/mylar"><img src="https://docs.theme-park.dev/site_assets/mylar/logo.png" alt="" width="48" height="45" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/plpp"><img src="https://docs.theme-park.dev/site_assets/plpp/logo.png" alt="" width="48" height="48" /></a></p>
-<p><a href="https://docs.theme-park.dev/themes/mylar">Mylar 3</a></p>
+<p><a href="https://docs.theme-park.dev/themes/plpp">PLPP (Deprecated)</a></p>
 </td>
+<td style="width: 90px; height: 40px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/thelounge"><img src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/thelounge">The Lounge (Deprecated)</a></p>
+</td>
+</tr>
+<tr>
+<td>
+<p><a href="https://docs.theme-park.dev/themes/grafana"><img src="https://docs.theme-park.dev/site_assets/grafana/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/grafana">Grafana (Deprecated)</a></p>
+</td>
+<td style="width: 10px; height: 56px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/monitorr"><img src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/monitorr">Monitorr (Deprecated)</a></p>
+</td>
+<td style="width: 90px; height: 40px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/webtools"><img src="https://docs.theme-park.dev/site_assets/webtools/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/webtools">Webtools (Deprecated)</a></p>
+</td>
+<td style="width: 90px; height: 56px; text-align: center;">
+<p><a href="https://docs.theme-park.dev/themes/logarr"><img src="https://docs.theme-park.dev/site_assets/logarr/logo.png" alt="" width="48" height="48" /></a></p>
+<p><a href="https://docs.theme-park.dev/themes/logarr">Logarr (Deprecated)</a></p>
+</td>
+<td style="width: 110px; height: 56px; text-align: center;">
+<td style="width: 110px; height: 56px; text-align: center;">
+<td style="width: 110px; height: 56px; text-align: center;">
 </tr>
 </tbody>
 </table>
@@ -275,8 +284,6 @@
 
 <br>
 
-<h3><a href="https://docs.theme-park.dev/custom/">Honourable mentions</a></h3>
+<h3>Honourable mentions</h3>
 
-<p><a href="https://github.com/Archmonger/Blackberry-Themes">Archmonger/Blackberry-Themes</a></p>
+<p><a href="https://github.com/Archmonger/Blackberry-Themes">Archmonger/Blackberry-Themes</a></p>
-
-<p><a href="https://github.com/leram84/layer.Cake/">leram84/layer.Cake</a></p>

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 */
 }

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. 
+  // Add theme data and set theme vars
-  function addThemeCount() {
+  var apps;
-  let themeJsonUrl = "https://theme-park.dev/themes.json"
+  var themeOptions;
-  return fetch(themeJsonUrl)
+  function addThemeData() {
-  .then(response => {
+  let themeJsonUrl = "/themes.json"
-      return response.json();
+  fetch(themeJsonUrl)
-  }).then(json => {
+  .then(response =>  response.json())
-      document.getElementById("themeCount").innerHTML = `
+  .then(json => {
-    theme.park contains ${Object.keys(json.applications).length} themed applications, with css <a
+    apps = json.applications
-                                href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`  
+    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 <a
+    href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`
+    document.getElementById("theme-count").innerHTML = `Choose between <a class="js-scroll-trigger" href="#themes">${Object.keys(json.themes).length} different
+    styles!</a> With the possibility to easily create your own themes using the defined <a
+    href="https://docs.theme-park.dev/custom/">variables</a>.`
+    createApps(apps)
+    })
+}
+
+function createApps(apps) {
+    let allAppsDiv = document.getElementById("all-apps")
+    sorted = Object.keys(apps).sort()
+    for (let app in sorted) {
+    let newApp = `
+        <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/${sorted[app]}/">
+            <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/${sorted[app]}/logo.png"/></p>
+            <p>${sorted[app][0].toUpperCase() + sorted[app].slice(1)}</p>
+        </a>`
+    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);
+})
 

docker-mods/duplicati/Dockerfile

@@ -0,0 +1,7 @@
+FROM scratch
+
+
+LABEL maintainer="GilbN"
+LABEL app="Duplicati"
+#copy local files. 
+COPY root/ /

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>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/themes\/duplicati\/duplicati-base.css'><\/head> /g" $1
+    sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/variables\/${TP_THEME}.css'><\/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

index.html

@@ -21,7 +21,7 @@
     <!-- Core theme CSS (includes Bootstrap)-->
     <link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
     <link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
-    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2">
+    <link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.2">
 </head>
 
 <body id="page-top">
@@ -71,9 +71,7 @@
                     <hr class="divider my-4" />
                 </div>
                 <div class="col-lg-8 align-self-baseline">
-                    <p class="text-white-75 font-weight-light mb-5">A collection of themes/skins for over 40 selfhosted
+                    <p id="tag-line" class="text-white-75 font-weight-light mb-5">...</p>
-                        apps!
-                    </p>
                     <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
                 </div>
             </div>
@@ -84,304 +82,24 @@
         <div class="container">
             <div class="row justify-content-center">
                 <div class="col-lg-8 text-center">
-                    <h2 class="text-white mt-0">Over 40 themed applications!</h2>
+                    <h2 id="theme-header-text" class="text-white mt-0">...</h2>
                     <hr class="divider light my-4" />
-                    <p class="text-white-50 mb-1" id=themeCount>...</p>
+                    <p class="text-white-50 mb-1" id=app-count>...</p>
                     <p class="text-white-50 mb-1">Installation methods include custom <a
                             href="https://blog.linuxserver.io/2019/09/14/customizing-our-containers/">docker mods</a>
                         for <a href="https://linuxserver.io">linuxserver.io</a> containers, </p>
                     <p class="text-white-50 mb-5">custom scripts for select <a href="https://hotio.dev/">Hotio</a>
                         containers
                         and multiple examples of subfiltering using webservers like Nginx and Apache</p>
-                    <p class="text-white-50 mb-5">Choose between <a class="js-scroll-trigger" href="#themes">9 different
+                    <p class="text-white-50 mb-5" id="theme-count">... </p>
-                            styles!</a> With the possibility to easily create your own themes using the defined <a
-                            href="https://docs.theme-park.dev/custom/">variables</a>. </p>
                     <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a>
                 </div>
 
             </div>
         </div>
         <div class="col justify-content-center pt-5 all-apps container">
-            <div class="row justify-content-center">
+            <div id="all-apps" class="row justify-content-center">
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/sonarr">
+                ...
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/sonarr/logo.png" />
-                    </p>
-                    <p>Sonarr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/radarr">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/radarr/logo.png" />
-                    </p>
-                    <p>Radarr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/lidarr">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/lidarr/logo.png" />
-                    </p>
-                    <p>Lidarr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/readarr">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/readarr/logo.png" /></p>
-                    <p>Readarr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/prowlarr">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/prowlarr/logo.png" />
-                    </p>
-                    <p>Prowlarr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/bazarr">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/bazarr/logo.png" />
-                    </p>
-                    <p>Bazarr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plex">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/plex/logo.png" />
-                    </p>
-                    <p>Plex</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/synclounge">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/synclounge/logo.png" />
-                    </p>
-                    <p>Synclounge</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/calibreweb">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" /></p>
-                    <p>Calibre-Web</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/jellyfin">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/jellyfin/logo.png" /></p>
-                    <p>Jellyfin</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/emby">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/emby/logo.png" />
-                    </p>
-                    <p>Emby</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/tautulli">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/tautulli/logo.png" /></p>
-                    <p>Tautulli</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/ombi">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/ombi/logo.png" />
-                    </p>
-                    <p>Ombi</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/requestrr">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/requestrr/logo.png" /></p>
-                    <p>Requestrr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/organizr">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/organizr/logo.png" /></p>
-                    <p>Organizr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/deluge">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/deluge/logo.png" />
-                    </p>
-                    <p>deluge</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/qbittorrent">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/qbittorrent/logo.png" /></p>
-                    <p>qBittorrent</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/rutorrent">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/rutorrent/logo.png" /></p>
-                    <p>ruTorrent</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/transmission">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/transmission/logo.png" /></p>
-                    <p>Transmission</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/sabnzbd">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/sabnzbd/logo.png" /></p>
-                    <p>SABnzbd</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/nzbget">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/nzbget/logo.png" />
-                    </p>
-                    <p>NZBGet</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/nzbhydra2">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/nzbhydra2/logo.png" />
-                    </p>
-                    <p>NZBHydra 2</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/jackett">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/jackett/logo.png" />
-                    </p>
-                    <p>Jackett</p>
-                </a>
-                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/grafana">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/grafana/logo.png" /></p>
-                    <p>Grafana</p>
-                </a> -->
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/netdata">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/netdata/logo.png" /></p>
-                    <p>Netdata</p>
-                </a>
-                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/monitorr">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" /></p>
-                    <p>Monitorr</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/logarr">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/logarr/logo.png" />
-                    </p>
-                    <p>Logarr</p>
-                </a> -->
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/portainer">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/portainer/logo.png" /></p>
-                    <p>Portainer</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/pihole">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/pihole/logo.png" />
-                    </p>
-                    <p>Pi-hole</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/guacamole">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/guacamole/logo.png" /></p>
-                    <p>Guacamole</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/filebrowser">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" /></p>
-                    <p>Filebrowser</p>
-                </a>
-                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plpp">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/plpp/logo.png" />
-                    </p>
-                    <p>PLPP</p>
-                </a> -->
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/librespeed">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" /></p>
-                    <p>Librespeed</p>
-                </a>
-                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/thelounge">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" /></p>
-                    <p>The Lounge</p>
-                </a> -->
-                <a class="col app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/lazylibrarian">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/lazylibrarian/logo.png" /></p>
-                    <p>Lazylibrarian</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/adguard">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/adguard/logo.png" /></p>
-                    <p>Adguard</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/gaps">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/gaps/logo.png" />
-                    </p>
-                    <p>Gaps</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/bitwarden">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/bitwarden/logo.png" /></p>
-                    <p>Bitwarden</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/duplicacy">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/duplicacy/logo.png" /></p>
-                    <p>Duplicacy</p>
-                </a>
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/kitana">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/kitana/logo.png" />
-                    </p>
-                    <p>Kitana</p>
-                </a>
-                <!-- <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/webtools">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/webtools/logo.png" /></p>
-                    <p>Webtools</p>
-                </a> -->
-                <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/resilio-sync">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/resilio-sync/logo.png" /></p>
-                    <p>Resilio-Sync</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/gitea">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/gitea/logo.png" />
-                    </p>
-                    <p>Gitea</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/unraid">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/unraid/logo.png" />
-                    </p>
-                    <p>Unraid</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/moviematch">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/moviematch/logo.png" /></p>
-                    <p>Moviematch</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/petio">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/petio/logo.png" />
-                    </p>
-                    <p>Petio</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/flood">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/flood/logo.png" />
-                    </p>
-                    <p>Flood</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/vuetorrent">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" />
-                    </p>
-                    <p>VueTorrent</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/dozzle">
-                    <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/dozzle/logo.png" />
-                    </p>
-                    <p>Dozzle</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/xbackbone">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" />
-                    </p>
-                    <p>Xbackbone</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/uptime-kuma">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/uptime-kuma/logo.png" />
-                    </p>
-                    <p>Uptime Kuma</p>
-                </a>
-                <a class="col align-self-center app-container text-center p-2 m-1"
-                    href="https://docs.theme-park.dev/themes/mylar">
-                    <p><img class="app-container-image"
-                            src="https://docs.theme-park.dev/site_assets/mylar/logo.png" />
-                    </p>
-                    <p>Mylar 3</p>
-                </a>
             </div>
         </div>
     </section>
@@ -434,9 +152,23 @@
         </div>
     </section>
     <!-- Portfolio-->
+    <section class="page-section pt-0">
+    <div class="container pb-3">
+        <div class="row h-100 align-items-center justify-content-center text-center">
+            <div class="col-lg-10 align-self-end">
+            </div>
+            <div class="col-lg-8 align-self-baseline">
+                <button id="switch-theme" class="btn btn-primary btn-xl click-me-btn">Click Me!</button>
+            </div>
+        </div>
+    </div>
+</section>
     <section class="page-section pb-1" id="themes">
         <div class="container">
-            <h2 class="text-center mt-0">Available theme options</h2>
+            <h2 class="text-center mt-0">Official theme options</h2>
+            <h6 class="text-center mt-0">Click here for the <a href="https://docs.theme-park.dev/community-themes/">community themes</a></h6>
+            
+
             <hr class="divider my-4" />
         </div>
     </section>
@@ -558,7 +290,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
     <!-- Core theme JS-->
-    <script src="Resources/landing-page/js/scripts.js?v=1.2"></script>
+    <script src="Resources/landing-page/js/scripts.js?v=1.4"></script>
     <script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
     <script type="text/javascript">
         $(function () {

themes.json

@@ -44,6 +44,10 @@
       "base_css": "https://theme-park.dev/CSS/themes/jackett/jackett-base.css?sha=da57858a0806974e652a41ad730d0d153575d75c",
       "addons": {}
     },
+    "duplicati": {
+      "base_css": "https://theme-park.dev/CSS/themes/duplicati/duplicati-base.css?sha=40054b99b79d98fe31c8bfc48b4516a6338fbe27",
+      "addons": {}
+    },
     "petio": {
       "base_css": "https://theme-park.dev/CSS/themes/petio/petio-base.css?sha=98fe48edde91b9f8714918d9f6f63ea3c148dc49",
       "addons": {}