|
|
@ -21,7 +21,7 @@ |
|
|
|
<!-- Core theme CSS (includes Bootstrap)--> |
|
|
|
<link href="Resources/landing-page/css/styles.css?v=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=1.2"> |
|
|
|
<link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=1.3"> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body id="page-top"> |
|
|
@ -62,7 +62,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 50 selfhosted |
|
|
|
<p class="text-white-75 font-weight-light mb-5">A collection of themes/skins for over 40 selfhosted |
|
|
|
apps! |
|
|
|
</p> |
|
|
|
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a> |
|
|
@ -75,9 +75,9 @@ |
|
|
|
<div class="container"> |
|
|
|
<div class="row justify-content-center"> |
|
|
|
<div class="col-lg-8 text-center"> |
|
|
|
<h2 class="text-white mt-0">50 themed apps</h2> |
|
|
|
<h2 class="text-white mt-0">Over 40 themed applications!</h2> |
|
|
|
<hr class="divider light my-4" /> |
|
|
|
<p class="text-white-50 mb-1">theme.park contains 50 themed applications, with css <a |
|
|
|
<p class="text-white-50 mb-1">theme.park contains 44 themed applications, with css <a |
|
|
|
href="https://docs.theme-park.dev/themes/addons/sonarr/">addons</a> on certain themes. </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> |
|
|
@ -85,6 +85,9 @@ |
|
|
|
<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">7 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>. </p> |
|
|
|
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a> |
|
|
|
</div> |
|
|
|
|
|
|
@ -113,7 +116,8 @@ |
|
|
|
<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><img class="app-container-image" |
|
|
|
src="https://docs.theme-park.dev/site_assets/prowlarr/logo.png" /> |
|
|
|
</p> |
|
|
|
<p>Prowlarr</p> |
|
|
|
</a> |
|
|
@ -127,6 +131,12 @@ |
|
|
|
</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> |
|
|
@ -138,8 +148,8 @@ |
|
|
|
<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><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"> |
|
|
@ -163,8 +173,8 @@ |
|
|
|
<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><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"> |
|
|
@ -193,26 +203,28 @@ |
|
|
|
<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><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><img class="app-container-image" |
|
|
|
src="https://docs.theme-park.dev/site_assets/jackett/logo.png" /> |
|
|
|
</p> |
|
|
|
<p>jackett</p> |
|
|
|
<p>Jackett</p> |
|
|
|
</a> |
|
|
|
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/grafana"> |
|
|
|
<!-- <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> --> |
|
|
|
<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"> |
|
|
|
<!-- <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> |
|
|
@ -221,7 +233,7 @@ |
|
|
|
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/logarr/logo.png" /> |
|
|
|
</p> |
|
|
|
<p>Logarr</p> |
|
|
|
</a> |
|
|
|
</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> |
|
|
@ -242,21 +254,21 @@ |
|
|
|
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"> |
|
|
|
<!-- <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> --> |
|
|
|
<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"> |
|
|
|
<!-- <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> --> |
|
|
|
<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" |
|
|
@ -288,11 +300,11 @@ |
|
|
|
</p> |
|
|
|
<p>Kitana</p> |
|
|
|
</a> |
|
|
|
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/webtools"> |
|
|
|
<!-- <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> --> |
|
|
|
<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> |
|
|
@ -330,7 +342,8 @@ |
|
|
|
</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><img class="app-container-image" |
|
|
|
src="https://docs.theme-park.dev/site_assets/vuetorrent/logo.png" /> |
|
|
|
</p> |
|
|
|
<p>VueTorrent</p> |
|
|
|
</a> |
|
|
@ -342,7 +355,8 @@ |
|
|
|
</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><img class="app-container-image" |
|
|
|
src="https://docs.theme-park.dev/site_assets/xbackbone/logo.png" /> |
|
|
|
</p> |
|
|
|
<p>Xbackbone</p> |
|
|
|
</a> |
|
|
@ -368,7 +382,8 @@ |
|
|
|
<div class="mt-5"> |
|
|
|
<i class="fab fa-4x fa-github text-primary mb-4"></i> |
|
|
|
<h3 class="h4 mb-2">Find us on Github</h3> |
|
|
|
<p class="text-white-50 mb-0">Having issues with a theme? Let us know on <a href="https://github.com/gilbn/theme.park">Github!</a></p> |
|
|
|
<p class="text-white-50 mb-0">Having issues with a theme? Let us know on <a |
|
|
|
href="https://github.com/gilbn/theme.park">Github!</a></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="col-lg-3 col-md-6 text-center"> |
|
|
@ -389,67 +404,83 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<!-- Portfolio--> |
|
|
|
<div id="portfolio" class="theme-overview"> |
|
|
|
<div class="container-fluid p-0"> |
|
|
|
<div class="row no-gutters"> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption aquamarine-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Aquamarine</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption hotline-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Hotline</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption space-gray-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Space Gray</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption organizr-dark-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Organizr Dark</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption dark-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Dark</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption p-3 plex-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Plex</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
<!-- Portfolio--> |
|
|
|
<section class="page-section pb-1" id="themes"> |
|
|
|
<div class="container"> |
|
|
|
<h2 class="text-center mt-0">Available theme options</h2> |
|
|
|
<hr class="divider my-4" /> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
<div id="portfolio" class="theme-overview"> |
|
|
|
<div class="container-fluid p-0"> |
|
|
|
<div class="row no-gutters d-flex justify-content-center"> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/dracula.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/dracula-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption p-3 dracula-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Dracula</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption aquamarine-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Aquamarine</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption hotline-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Hotline</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption space-gray-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Space Gray</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg" |
|
|
|
alt="..." /> |
|
|
|
<div class="portfolio-box-caption organizr-dark-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Organizr Dark</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption dark-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Dark</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="col-lg-4 col-sm-6 p-1"> |
|
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png"> |
|
|
|
<img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." /> |
|
|
|
<div class="portfolio-box-caption p-3 plex-hover"> |
|
|
|
<div class="project-category text-white-50">Theme</div> |
|
|
|
<div class="project-name">Plex</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- Footer--> |
|
|
|
<footer class=" py-5"> |
|
|
|
<div class="container"> |
|
|
@ -480,4 +511,4 @@ |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
|
|
|
|
</html> |
|
|
|
</html> |