topaLE
/
theme.park.app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

some fixes

pull/204/head
Marius 4 years ago
parent
0334c5d4d5
commit
2eddb40b83
3 changed files with 304 additions and 229 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 65
      Resources/landing-page/css/custom.css
  2. 16
      Resources/landing-page/js/jquery-bg-slideshow.js
  3. 450
      index.html

65
Resources/landing-page/css/custom.css
View File

@ -1,8 +1,28 @@
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
#mainNav,
#mainNav.navbar-scrolled {
box-shadow: none;
background-color: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
}
/* slightly transparent fallback for Firefox (not supporting backdrop-filter) */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
#mainNav,
#mainNav.navbar-scrolled {
box-shadow: none;
background-color: rgba(0, 0, 0, 0.9);
}
}
@media (min-width: 992px) { @media (min-width: 992px) {
#mainNav { #mainNav {
box-shadow: none; box-shadow: none;
background-color: rgba(0, 0, 0, 0.55); background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
#mainNav .navbar-brand { #mainNav .navbar-brand {
@ -30,6 +50,7 @@
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
background-color: rgba(0, 0, 0, 0.55); background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
} }
#mainNav.navbar-scrolled .navbar-brand { #mainNav.navbar-scrolled .navbar-brand {
@ -49,13 +70,12 @@
color: #12afa0; color: #12afa0;
} }
} }
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
#mainNav { color: #12afa0;
box-shadow: none; }
background-color: rgba(0, 0, 0, 0.55); #mainNav .navbar-nav .nav-item .nav-link.active {
backdrop-filter: blur(10px); color: #12afa0 !important;
} }
.navbar-light .navbar-toggler-icon { .navbar-light .navbar-toggler-icon {
filter: invert(1); filter: invert(1);
} }
@ -138,12 +158,7 @@ header.masthead {
width: 100%; width: 100%;
background-color: black; background-color: black;
color: white; color: white;
font-size: 30pt;
align-items: center;
justify-content: center;
display: flex;
text-align: center;
text-shadow: 1px 1px 10px black;
margin: 0; margin: 0;
} }
@ -172,24 +187,22 @@ header.masthead {
.bg-primary, .bg-primary,
.bg-dark { .bg-dark {
background: #2d2d2d; background: #2d2d2d;
/* fallback for old browsers */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
background: -webkit-linear-gradient(to top, #2d2d2d, #000000); background: -moz-linear-gradient(top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
/* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
background: linear-gradient(to top, #2d2d2d, #000000);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
} }
.theme-overview { .theme-overview {
background: #2d2d2d; background: #2d2d2d;
/* fallback for old browsers */ background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
background: -webkit-linear-gradient(to bottom, #2d2d2d, #000000); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
/* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to top, rgba(0, 0, 0, 1.0), rgba(87, 109, 117, 1.0));
background: linear-gradient(to bottom, #2d2d2d, #000000);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: var(--font-family-sans-serif); font-family: var(--font-family-sans-serif);
} }
#services { #services {
background: #2d2d2d; background: rgba(87, 109, 117, 1.0);
color: white; color: white;
padding: 0rem 0 8rem 0; padding: 0rem 0 8rem 0;
} }
@ -198,6 +211,8 @@ header.masthead {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
color:rgba(255, 255, 255, 0.7); color:rgba(255, 255, 255, 0.7);
border-radius: 5px; border-radius: 5px;
max-width: 120px;
min-width: 120px;
} }
.app-container:hover { .app-container:hover {
color: white; color: white;
@ -233,29 +248,35 @@ p {
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.aquamarine-hover:hover { #portfolio .container-fluid .portfolio-box .portfolio-box-caption.aquamarine-hover:hover {
background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed; background: radial-gradient(ellipse at center, #47918a 0%, #0b3161 100%) center center/cover no-repeat fixed;
opacity: .9; opacity: .9;
width: 562.4px;
} }
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.hotline-hover:hover { #portfolio .container-fluid .portfolio-box .portfolio-box-caption.hotline-hover:hover {
background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed; background: radial-gradient(ellipse at center, #F44336 0%, #0b3161 100%) center center/cover no-repeat fixed;
opacity: .9; opacity: .9;
width: 562.4px;
} }
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.space-gray-hover:hover { #portfolio .container-fluid .portfolio-box .portfolio-box-caption.space-gray-hover:hover {
background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed; background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%) center center/cover no-repeat fixed;
opacity: .9; opacity: .9;
width: 562.4px;
} }
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.organizr-dark-hover:hover { #portfolio .container-fluid .portfolio-box .portfolio-box-caption.organizr-dark-hover:hover {
background: #1f1f1f; background: #1f1f1f;
opacity: .9; opacity: .9;
width: 562.4px;
} }
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.dark-hover:hover { #portfolio .container-fluid .portfolio-box .portfolio-box-caption.dark-hover:hover {
background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed; background: radial-gradient(circle, #3a3a3a, #2d2d2d, #202020, #141414, #000000) center center/cover no-repeat fixed;
opacity: .9; opacity: .9;
width: 562.4px;
} }
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.plex-hover:hover { #portfolio .container-fluid .portfolio-box .portfolio-box-caption.plex-hover:hover {
background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed; background: url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/blur-noise.png"), url("https://raw.githubusercontent.com/gilbN/theme.park/master/Resources/preset-light2.png") center center/cover no-repeat fixed;
opacity: .9; opacity: .9;
width: 562.4px;
} }

16
Resources/landing-page/js/jquery-bg-slideshow.js
View File

@ -232,7 +232,7 @@
var id = $(this).attr("id"); var id = $(this).attr("id");
var imageOffset = parseInt(id.match(/-image(\d+)/)[1]); var imageOffset = parseInt(id.match(/-image(\d+)/)[1]);
settings.current = imageOffset + 1; settings.current = imageOffset + 1;
$(element).css("background-image", "url(" + settings.images[imageOffset] + ")"); $(element).css("background", "url(" + settings.images[imageOffset] + ")");
updateCurrentSlideElement(settings, settings.current - 1); updateCurrentSlideElement(settings, settings.current - 1);
console.log("clicked on [" + $(this).attr("id") + "]"); console.log("clicked on [" + $(this).attr("id") + "]");
}); });
@ -283,9 +283,9 @@
image = settings.initialBackground; image = settings.initialBackground;
} }
if(settings.gradient) { if(settings.gradient) {
$(element).css("background-image", settings.gradient + ", url(" + image + ")"); $(element).css("background", settings.gradient + ", url(" + image + ") center center/cover no-repeat fixed");
}else { }else {
$(element).css("background-image", "url(" + image + ")"); $(element).css("background", "url(" + image + ") center center/cover no-repeat fixed");
} }
} }
@ -314,15 +314,15 @@
settings.cloned = $(element).clone(); settings.cloned = $(element).clone();
if(settings.gradient) { if(settings.gradient) {
$(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({ $(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({
"background-image": settings.gradient+", url(" + nextImage + ")" "background": settings.gradient+", url(" + nextImage + ") center center/cover no-repeat fixed"
}).insertAfter($(element)); }).insertAfter($(element));
} else { } else {
$(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({ $(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({
"background-image": "url(" + nextImage + ")" "background": "url(" + nextImage + ") center center/cover no-repeat fixed"
}).insertAfter($(element)); }).insertAfter($(element));
} }
$(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({ $(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({
"background-image": settings.gradient+", url(" + nextImage + ")" "background": settings.gradient+", url(" + nextImage + ") center center/cover no-repeat fixed"
}).insertAfter($(element)); }).insertAfter($(element));
$(settings.cloned).css("display", settings.defaultDisplay); $(settings.cloned).css("display", settings.defaultDisplay);
debug(settings.debug, "Before element fadeout"); debug(settings.debug, "Before element fadeout");
@ -330,13 +330,13 @@
debug(settings.debug, "Fading out is done - should remove cloned element"); debug(settings.debug, "Fading out is done - should remove cloned element");
if(settings.gradient) { if(settings.gradient) {
$(this).css({ $(this).css({
"background-image": settings.gradient+", url(" + nextImage + ")", "background": settings.gradient+", url(" + nextImage + ") center center/cover no-repeat fixed",
"position": "absolute", "position": "absolute",
"display": settings.defaultDisplay "display": settings.defaultDisplay
}); });
} else { } else {
$(this).css({ $(this).css({
"background-image": "url(" + nextImage + ")", "background": "url(" + nextImage + ") center center/cover no-repeat fixed",
"position": "absolute", "position": "absolute",
"display": settings.defaultDisplay "display": settings.defaultDisplay
}); });

450
index.html
View File

@ -28,8 +28,8 @@
<!-- Navigation--> <!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav"> <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container"> <div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img src="Resources/landing-page/assets/img/themepark-logo.png" <a class="navbar-brand js-scroll-trigger" href="#page-top"><img
height="55px" alt=""></a> src="Resources/landing-page/assets/img/themepark-logo.png" height="55px" alt=""></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
@ -54,7 +54,7 @@
Resources/landing-page/assets/img/slides/8.jpg,Resources/landing-page/assets/img/slides/9.jpg,Resources/landing-page/assets/img/slides/10.jpg" Resources/landing-page/assets/img/slides/8.jpg,Resources/landing-page/assets/img/slides/9.jpg,Resources/landing-page/assets/img/slides/10.jpg"
data-transitionDelay="1000" data-transitionSpeed="2000" data-transitionEffect="fade-in" data-randomize="false" data-transitionDelay="1000" data-transitionSpeed="2000" data-transitionEffect="fade-in" data-randomize="false"
data-initialBackground="4" data-debug="false" data-slidecontrols.enabled="false" data-initialBackground="4" data-debug="false" data-slidecontrols.enabled="false"
data-gradient="linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.404) 100%)"> data-gradient="linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%)">
<div class="container h-100"> <div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center"> <div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end"> <div class="col-lg-10 align-self-end">
@ -62,7 +62,8 @@
<hr class="divider my-4" /> <hr class="divider my-4" />
</div> </div>
<div class="col-lg-8 align-self-baseline"> <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 45 selfhosted apps! <p class="text-white-75 font-weight-light mb-5">A collection of themes/skins for over 45 selfhosted
apps!
</p> </p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a> <a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
</div> </div>
@ -76,195 +77,245 @@
<div class="col-lg-8 text-center"> <div class="col-lg-8 text-center">
<h2 class="text-white mt-0">Over 45 themed apps</h2> <h2 class="text-white mt-0">Over 45 themed apps</h2>
<hr class="divider light my-4" /> <hr class="divider light my-4" />
<p class="text-white-50 mb-1">theme.park contains 46 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">theme.park contains 47 themed applications, with css <a
<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> href="https://docs.theme-park.dev/themes/addons/sonarr/">addons</a> on certain themes. </p>
<p class="text-white-50 mb-5">custom scripts for select <a href="https://hotio.dev/">Hotio</a> containers <p class="text-white-50 mb-1">Installation methods include custom <a
and multiple examples of subfiltering using webservers like Nginx and Apache</p> 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>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a> <a class="btn btn-primary btn-xl js-scroll-trigger" href="#services">Get Started!</a>
</div> </div>
</div> </div>
</div> </div>
<div class="col justify-content-center pt-5"> <div class="col justify-content-center pt-5">
<div class="row justify-content-center"> <div class="row justify-content-center">
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/sonarr"> <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><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/sonarr/logo.png" />
<p>Sonarr</p> </p>
</a> <p>Sonarr</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/radarr"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/radarr/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/radarr">
<p>Radarr</p> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/radarr/logo.png" />
</a> </p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/lidarr"> <p>Radarr</p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/lidarr/logo.png" /></p> </a>
<p>Lidarr</p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/lidarr">
</a> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/lidarr/logo.png" />
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/bazarr"> </p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/bazarr/logo.png" /></p> <p>Lidarr</p>
<p>Bazarr</p> </a>
</a> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/bazarr">
<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/bazarr/logo.png" />
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/readarr/logo.png" /></p> </p>
<p>Readarr</p> <p>Bazarr</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plex"> <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/plex/logo.png" /></p> <p><img class="app-container-image"
<p>Plex</p> src="https://docs.theme-park.dev/site_assets/readarr/logo.png" /></p>
</a> <p>Readarr</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/calibreweb"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plex">
<p>Calibre-Web</p> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/plex/logo.png" />
</a> </p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/jellyfin"> <p>Plex</p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/jellyfin/logo.png" /></p> </a>
<p>Jellyfin</p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/calibreweb">
</a> <p><img class="app-container-image"
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/tautulli"> src="https://docs.theme-park.dev/site_assets/calibreweb/logo.png" /></p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/tautulli/logo.png" /></p> <p>Calibre-Web</p>
<p>Tautulli</p> </a>
</a> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/jellyfin">
<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"
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/ombi/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/jellyfin/logo.png" /></p>
<p>Ombi</p> <p>Jellyfin</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/requestrr"> <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/requestrr/logo.png" /></p> <p><img class="app-container-image"
<p>Requestrr</p> src="https://docs.theme-park.dev/site_assets/emby/logo.png" /></p>
</a> <p>Emby</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/organizr"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/organizr/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/tautulli">
<p>Organizr</p> <p><img class="app-container-image"
</a> src="https://docs.theme-park.dev/site_assets/tautulli/logo.png" /></p>
</div> <p>Tautulli</p>
<div class="row"> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/qbittorrent"> <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/qbittorrent/logo.png" /></p> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/ombi/logo.png" />
<p>qBittorrent</p> </p>
</a> <p>Ombi</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/rutorrent"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/rutorrent/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/requestrr">
<p>ruTorrent</p> <p><img class="app-container-image"
</a> src="https://docs.theme-park.dev/site_assets/requestrr/logo.png" /></p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/transmission"> <p>Requestrr</p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/transmission/logo.png" /></p> </a>
<p>Transmission</p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/organizr">
</a> <p><img class="app-container-image"
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/sabnzbd"> src="https://docs.theme-park.dev/site_assets/organizr/logo.png" /></p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/sabnzbd/logo.png" /></p> <p>Organizr</p>
<p>SABnzbd</p> </a>
</a> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/qbittorrent">
<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"
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/nzbget/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/qbittorrent/logo.png" /></p>
<p>NZBGet</p> <p>qBittorrent</p>
</a> </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/rutorrent">
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/grafana/logo.png" /></p> <p><img class="app-container-image"
<p>Grafana</p> src="https://docs.theme-park.dev/site_assets/rutorrent/logo.png" /></p>
</a> <p>ruTorrent</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/netdata"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/netdata/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/transmission">
<p>Netdata</p> <p><img class="app-container-image"
</a> src="https://docs.theme-park.dev/site_assets/transmission/logo.png" /></p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/monitorr"> <p>Transmission</p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" /></p> </a>
<p>Monitorr</p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/sabnzbd">
</a> <p><img class="app-container-image"
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/logarr"> src="https://docs.theme-park.dev/site_assets/sabnzbd/logo.png" /></p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/logarr/logo.png" /></p> <p>SABnzbd</p>
<p>Logarr</p> </a>
</a> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/nzbget">
<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/nzbget/logo.png" />
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/portainer/logo.png" /></p> </p>
<p>Portainer</p> <p>NZBGet</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/pihole"> <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/pihole/logo.png" /></p> <p><img class="app-container-image"
<p>Pi-hole</p> src="https://docs.theme-park.dev/site_assets/grafana/logo.png" /></p>
</a> <p>Grafana</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/guacamole"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/guacamole/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/netdata">
<p>Guacamole</p> <p><img class="app-container-image"
</a> src="https://docs.theme-park.dev/site_assets/netdata/logo.png" /></p>
</div> <p>Netdata</p>
<div class="row"> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/filebrowser"> <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/filebrowser/logo.png" /></p> <p><img class="app-container-image"
<p>Filebrowser</p> src="https://docs.theme-park.dev/site_assets/monitorr/logo.png" /></p>
</a> <p>Monitorr</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plpp"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/plpp/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/logarr">
<p>PLPP</p> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/logarr/logo.png" />
</a> </p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/librespeed"> <p>Logarr</p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" /></p> </a>
<p>Librespeed</p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/portainer">
</a> <p><img class="app-container-image"
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/thelounge"> src="https://docs.theme-park.dev/site_assets/portainer/logo.png" /></p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" /></p> <p>Portainer</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/pihole">
<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/pihole/logo.png" />
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/lazylibrarian/logo.png" /></p> </p>
<p>Lazylibrarian</p> <p>Pi-hole</p>
</a> </a>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/adguard"> <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/adguard/logo.png" /></p> <p><img class="app-container-image"
<p>Adguard</p> src="https://docs.theme-park.dev/site_assets/guacamole/logo.png" /></p>
</a> <p>Guacamole</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/gaps"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/gaps/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/filebrowser">
<p>Gaps</p> <p><img class="app-container-image"
</a> src="https://docs.theme-park.dev/site_assets/filebrowser/logo.png" /></p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/bitwarden"> <p>Filebrowser</p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/bitwarden/logo.png" /></p> </a>
<p>Bitwarden</p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/plpp">
</a> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/plpp/logo.png" />
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/duplicacy"> </p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/duplicacy/logo.png" /></p> <p>PLPP</p>
<p>Duplicacy</p> </a>
</a> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/librespeed">
<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"
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/kitana/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/librespeed/logo.png" /></p>
<p>Kitana</p> <p>Librespeed</p>
</a> </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/thelounge">
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/webtools/logo.png" /></p> <p><img class="app-container-image"
<p>Webtools</p> src="https://docs.theme-park.dev/site_assets/thelounge/logo.png" /></p>
</a> <p>The Lounge</p>
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/resilio-sync"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/resilio-sync/logo.png" /></p> <a class="col app-container text-center p-2 m-1"
<p>Resilio-Sync</p> href="https://docs.theme-park.dev/themes/lazylibrarian">
</a> <p><img class="app-container-image"
</div> src="https://docs.theme-park.dev/site_assets/lazylibrarian/logo.png" /></p>
<div class="container"> <p>Lazylibrarian</p>
<div class="row justify-content-md-center"> </a>
<a class="col align-self-center app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/gitea"> <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/gitea/logo.png" /></p> <p><img class="app-container-image"
<p>Gitea</p> src="https://docs.theme-park.dev/site_assets/adguard/logo.png" /></p>
</a> <p>Adguard</p>
<a class="col align-self-center app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/unraid"> </a>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/unraid/logo.png" /></p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/gaps">
<p>Unraid</p> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/gaps/logo.png" />
</a> </p>
<a class="col align-self-center app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/moviematch"> <p>Gaps</p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/moviematch/logo.png" /></p> </a>
<p>Moviematch</p> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/bitwarden">
</a> <p><img class="app-container-image"
<a class="col align-self-center app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/petio"> src="https://docs.theme-park.dev/site_assets/bitwarden/logo.png" /></p>
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/petio/logo.png" /></p> <p>Bitwarden</p>
<p>Petio</p> </a>
</a> <a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/duplicacy">
<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"
<p><img class="app-container-image"src="https://docs.theme-park.dev/site_assets/flood/logo.png" /></p> src="https://docs.theme-park.dev/site_assets/duplicacy/logo.png" /></p>
<p>Flood</p> <p>Duplicacy</p>
</a> </a>
<a class="col align-self-center app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/dozzle"> <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/dozzle/logo.png" /></p> <p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/kitana/logo.png" />
<p>Dozzle</p> </p>
</a> <p>Kitana</p>
</div> </a>
</div> <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/dozzle">
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/dozzle/logo.png" />
</p>
<p>Dozzle</p>
</a>
</div> </div>
</div>
</section> </section>
<!-- Services--> <!-- Services-->
<section class="page-section" id="services"> <section class="page-section" id="services">
@ -276,35 +327,38 @@
<div class="mt-5"> <div class="mt-5">
<i class="fas fa-4x fa-book text-primary mb-4"></i> <i class="fas fa-4x fa-book text-primary mb-4"></i>
<h3 class="h4 mb-2">Theme Docs</h3> <h3 class="h4 mb-2">Theme Docs</h3>
<p class="text-muted mb-0">Head over to the <a href="https://docs.theme-park.dev/">documentation</a> page for more information on each theme!</p> <p class="text-white-50 mb-0">Head over to the <a
href="https://docs.theme-park.dev/">documentation</a> page for more information on each
theme!</p>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6 text-center"> <div class="col-lg-3 col-md-6 text-center">
<div class="mt-5"> <div class="mt-5">
<i class="fab fa-4x fa-github text-primary mb-4"></i> <i class="fab fa-4x fa-github text-primary mb-4"></i>
<h3 class="h4 mb-2">Find us on Github</h3> <h3 class="h4 mb-2">Find us on Github</h3>
<p class="text-muted mb-0">Having issues with a theme? Let us know on Github!</p> <p class="text-white-50 mb-0">Having issues with a theme? Let us know on Github!</p>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6 text-center"> <div class="col-lg-3 col-md-6 text-center">
<div class="mt-5"> <div class="mt-5">
<i class="fab fa-4x fa-discord text-primary mb-4"></i> <i class="fab fa-4x fa-discord text-primary mb-4"></i>
<h3 class="h4 mb-2">Discord Community</h3> <h3 class="h4 mb-2">Discord Community</h3>
<p class="text-muted mb-0">Need live support? Head over to our <a href="https://docs.theme-park.dev/discord">Discord</a> server!</p> <p class="text-white-50 mb-0">Need live support? Head over to our <a
href="https://docs.theme-park.dev/discord">Discord</a> server!</p>
</div> </div>
</div> </div>
<div class="col-lg-3 col-md-6 text-center"> <div class="col-lg-3 col-md-6 text-center">
<div class="mt-5"> <div class="mt-5">
<i class="fas fa-4x fa-heart text-primary mb-4"></i> <i class="fas fa-4x fa-heart text-primary mb-4"></i>
<h3 class="h4 mb-2">Made with Love</h3> <h3 class="h4 mb-2">Made with Love</h3>
<p class="text-muted mb-0">Is it really open source if it's not made with love?</p> <p class="text-white-50 mb-0">Is it really open source if it's not made with love?</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- Portfolio--> <!-- Portfolio-->
<div id="portfolio"> <div id="portfolio" class="theme-overview">
<div class="container-fluid p-0"> <div class="container-fluid p-0">
<div class="row no-gutters theme-overview"> <div class="row no-gutters theme-overview">
<div class="col-lg-4 col-sm-6 p-1"> <div class="col-lg-4 col-sm-6 p-1">
@ -378,27 +432,27 @@
<div class="col-lg-8 text-center"> <div class="col-lg-8 text-center">
<h2 class="mt-0">Let's Get In Touch!</h2> <h2 class="mt-0">Let's Get In Touch!</h2>
<hr class="divider my-4" /> <hr class="divider my-4" />
<p class="text-muted mb-5">Ready to start your next project with us? Give us a call or send us an <p class="text-white-50 mb-5">Ready to start your next project with us? Give us a call or send us an
email and we will get back to you as soon as possible!</p> email and we will get back to you as soon as possible!</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0"> <div class="col-lg-4 ml-auto text-center mb-5 mb-lg-0">
<i class="fas fa-phone fa-3x mb-3 text-muted"></i> <i class="fas fa-phone fa-3x mb-3 text-white-50"></i>
<div>+1 (555) 123-4567</div> <div>+1 (555) 123-4567</div>
</div> </div>
<div class="col-lg-4 mr-auto text-center"> <div class="col-lg-4 mr-auto text-center">
<i class="fas fa-envelope fa-3x mb-3 text-muted"></i> <i class="fas fa-envelope fa-3x mb-3 text-white-50"></i>
<!-- Make sure to change the email address in BOTH the anchor text and the link target below!--> <!-- Make sure to change the email address in BOTH the anchor text and the link target below!-->
<!-- <a class="d-block" href="mailto:contact@yourwebsite.com">contact@yourwebsite.com</a> <!-- <a class="d-block" href="mailto:contact@yourwebsite.com">contact@yourwebsite.com</a>
</div> </div>
</div> </div>
</div> </div>
</section> --> </section> -->
<!-- Footer--> <!-- Footer-->
<footer class="theme-overview py-5"> <footer class=" py-5">
<div class="container"> <div class="container">
<div class="small text-center text-muted"> <div class="small text-center text-white-50">
Copyright &copy; Copyright &copy;
<!-- This script automatically adds the current year to your website footer--> <!-- This script automatically adds the current year to your website footer-->
<!-- (credit: https://updateyourfooter.com/)--> <!-- (credit: https://updateyourfooter.com/)-->

Write Preview
Loading…
Cancel
Save