1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-08-18 07:59:37 +02:00

Merge pull request #200 from GilbN/develop

custom landing page
This commit is contained in:
GilbN 2021-05-16 00:42:49 +02:00 committed by GitHub
commit 3f265ff124
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
63 changed files with 11625 additions and 0 deletions

View File

@ -0,0 +1,35 @@
/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
/* SONARR MIND STONE THEME */
@import url(https://gilbn.github.io/theme.park/CSS/themes/sonarr/sonarr-base.css);
:root {
--main-bg-color: radial-gradient(ellipse at center bottom, rgba(255, 242, 0, .7) 0%, #0d0400 80%, rgba(0, 0, 0, 1) 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/mind.jpg") center center/cover no-repeat fixed;
--modal-bg-color: linear-gradient(180deg, rgba(51, 49, 0, .7) 0%, #000 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/mind.jpg") center center/cover no-repeat fixed;
--calendar-tv-Unaired-Premiere: 53 197 244;
--calendar-tv-Downloading: 122 67 182;
--calendar-tv-Unmonitored: 173 173 173;
--calendar-tv-Unaired: 93 156 236;
--calendar-tv-missing: 240 80 80;
--calendar-tv-On-Air: 255 165 0;
--calendar-tv-available: 39 194 76;
--button-color: rgba(255, 255, 255, .15);
--button-color-hover: #fff200cc;
--accent-color: #fff200cc;
--accent-color-hover: #fff200cc;
--queue-color: #204c80cc;
}

View File

@ -0,0 +1,33 @@
/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
/* SONARR THEME */
@import url(https://gflix.app/theme.park/CSS/themes/sonarr/sonarr-base.css);
:root {
--main-bg-color: linear-gradient(45deg, #fb3f62 0%, #204c80 37%, #004249 97%) center center/cover no-repeat fixed;
--modal-bg-color: radial-gradient(circle, #204c80 0%, #000 100%) center center/cover no-repeat fixed;
--calendar-tv-Unaired-Premiere: 53 197 244;
--calendar-tv-Downloading: 122 67 182;
--calendar-tv-Unmonitored: 173 173 173;
--calendar-tv-Unaired: 93 156 236;
--calendar-tv-missing: 240 80 80;
--calendar-tv-On-Air: 255 165 0;
--calendar-tv-available: 39 194 76;
--button-color: #fb3f62;
--button-color-hover: rgba(251, 63, 98, .8);
--accent-color: rgba(251, 63, 98, .8);
--accent-color-hover: rgba(251, 63, 98, .8);
--queue-color: rgba(63, 251, 157, .8);
}

View File

@ -0,0 +1,34 @@
/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
/* SONARR POWER STONE THEME */
@import url(https://gilbn.github.io/theme.park/CSS/themes/sonarr/sonarr-base.css);
:root {
--main-bg-color: radial-gradient(ellipse at center bottom, rgba(166, 40, 140, .7) 0%, rgba(11,8,51,1) 80%, rgba(0,0,0,1) 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/power.jpg") center center/cover no-repeat fixed;
--modal-bg-color: linear-gradient(180deg, rgba(35, 0, 57, .7) 0%, #000 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/power.jpg") center center/cover no-repeat fixed;
--calendar-tv-Unaired-Premiere: 53 197 244;
--calendar-tv-Downloading: 122 67 182;
--calendar-tv-Unmonitored: 173 173 173;
--calendar-tv-Unaired: 93 156 236;
--calendar-tv-missing: 240 80 80;
--calendar-tv-On-Air: 255 165 0;
--calendar-tv-available: 39 194 76;
--button-color: #85096b;
--button-color-hover: #85096bcc;
--accent-color: #85096bcc;
--accent-color-hover: #85096bcc;
--queue-color: #204c80cc;
}

View File

@ -0,0 +1,36 @@
/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
/* SONARR REALITY STONE THEME */
@import url(https://gilbn.github.io/theme.park/CSS/themes/sonarr/sonarr-base.css);
:root {
--main-bg-color: radial-gradient(ellipse at center bottom, rgba(232, 11, 11, 0.7) 0%, #08000d 80%, rgba(0,0,0,1) 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/reality.jpg") center center/cover no-repeat fixed;
--modal-bg-color: linear-gradient(180deg, rgba(102, 5, 5, 0.7) 0%, #000 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/reality.jpg") center center/cover no-repeat fixed;
--calendar-tv-Unaired-Premiere: 53 197 244;
--calendar-tv-Downloading: 122 67 182;
--calendar-tv-Unmonitored: 173 173 173;
--calendar-tv-Unaired: 93 156 236;
--calendar-tv-missing: 240 80 80;
--calendar-tv-On-Air: 255 165 0;
--calendar-tv-available: 39 194 76;
--button-color: rgba(255, 255, 255, .15);
--button-color-hover: #e80c0bcc;
--accent-color: #e80c0bcc;
--accent-color-hover: #e80c0bcc;
--queue-color: #204c80cc;
}

View File

@ -0,0 +1,35 @@
/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
/* SONARR SOUL STONE THEME */
@import url(https://gilbn.github.io/theme.park/CSS/themes/sonarr/sonarr-base.css);
:root {
--main-bg-color: radial-gradient(ellipse at center bottom, rgba(255, 153, 0, .7) 0%, #3c0015 80%, rgba(0, 0, 0, 1) 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/soul.jpg") center center/cover no-repeat fixed;
--modal-bg-color: linear-gradient(180deg, rgba(140, 64, 2, .8) 0%, #3c0015 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/soul.jpg") center center/cover no-repeat fixed;
--calendar-tv-Unaired-Premiere: 53 197 244;
--calendar-tv-Downloading: 122 67 182;
--calendar-tv-Unmonitored: 173 173 173;
--calendar-tv-Unaired: 93 156 236;
--calendar-tv-missing: 240 80 80;
--calendar-tv-On-Air: 255 165 0;
--calendar-tv-available: 39 194 76;
--button-color: rgba(255, 255, 255, .15);
--button-color-hover: #f90c;
--accent-color: #f90c;
--accent-color-hover: #f90c;
--queue-color: #204c80cc;
}

View File

@ -0,0 +1,35 @@
/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
/* SONARR SPACE STONE THEME */
@import url(https://gilbn.github.io/theme.park/CSS/themes/sonarr/sonarr-base.css);
:root {
--main-bg-color: radial-gradient(ellipse at center bottom, rgba(0, 98, 255, .7) 0%, #020013 80%, rgb(0, 0, 0) 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/space.jpg") center center/cover no-repeat fixed;
--modal-bg-color: linear-gradient(180deg, rgba(0, 98, 255, .7) 0%, #10003c 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/space.jpg") center center/cover no-repeat fixed;
--calendar-tv-Unaired-Premiere: 53 197 244;
--calendar-tv-Downloading: 122 67 182;
--calendar-tv-Unmonitored: 173 173 173;
--calendar-tv-Unaired: 93 156 236;
--calendar-tv-missing: 240 80 80;
--calendar-tv-On-Air: 255 165 0;
--calendar-tv-available: 39 194 76;
--button-color: rgba(255, 255, 255, .15);
--button-color-hover: #0062ffcc;
--accent-color: #0062ffcc;
--accent-color-hover: #0062ffcc;
--queue-color: #0062ffcc;
}

View File

@ -0,0 +1,35 @@
/* dP dP dP */
/* 88 88 88 */
/* d8888P 88d888b. .d8888b. 88d8b.d8b. .d8888b. 88d888b. .d8888b. 88d888b. 88 .dP */
/* 88 88' `88 88ooood8 88'`88'`88 88ooood8 88' `88 88' `88 88' `88 88888" */
/* 88 88 88 88. ... 88 88 88 88. ... 88. .88 88. .88 88 88 `8b. */
/* dP dP dP `88888P' dP dP dP `88888P' 88 88Y888P' `88888P8 dP dP `YP */
/* 88 */
/* dP */
/* Made by @gilbN */
/* https://github.com/gilbN/theme.park */
/* SONARR TIME STONE THEME */
@import url(https://gilbn.github.io/theme.park/CSS/themes/sonarr/sonarr-base.css);
:root {
--main-bg-color: radial-gradient(ellipse at center bottom, rgba(109, 247, 81, .7) 0%, #00130c 80%, rgb(0, 0, 0) 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/time.jpg") center center/cover no-repeat fixed;
--modal-bg-color: linear-gradient(180deg, rgba(2, 77, 0, .8) 0%, #00130c 100%) center center/cover no-repeat fixed,
url("https://themepark-develop.netlify.app/Resources/time.jpg") center center/cover no-repeat fixed;
--calendar-tv-Unaired-Premiere: 53 197 244;
--calendar-tv-Downloading: 122 67 182;
--calendar-tv-Unmonitored: 173 173 173;
--calendar-tv-Unaired: 93 156 236;
--calendar-tv-missing: 240 80 80;
--calendar-tv-On-Air: 255 165 0;
--calendar-tv-available: 39 194 76;
--button-color: rgba(255, 255, 255, .15);
--button-color-hover: rgba(4, 168, 0, .8);
--accent-color: #6df751cc;
--accent-color-hover: #6df751cc;
--queue-color: #6df751cc;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 841 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 390 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 454 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 365 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

View File

@ -0,0 +1,256 @@
@media (min-width: 992px) {
#mainNav {
box-shadow: none;
background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
}
#mainNav .navbar-brand {
color: rgba(255, 255, 255, 0.7);
}
#mainNav .navbar-brand:hover {
color: #fff;
}
#mainNav .navbar-nav .nav-item .nav-link {
color: rgba(255, 255, 255, 0.7);
padding: 0 1rem;
}
#mainNav .navbar-nav .nav-item .nav-link:hover {
color: #fff;
}
#mainNav .navbar-nav .nav-item:last-child .nav-link {
padding-right: 0;
}
#mainNav.navbar-scrolled {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
}
#mainNav.navbar-scrolled .navbar-brand {
color: #212529;
}
#mainNav.navbar-scrolled .navbar-brand:hover {
color: #12afa0;
}
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
color: #fff;
;
}
#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
color: #12afa0;
}
}
#mainNav {
box-shadow: none;
background-color: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
}
.navbar-light .navbar-toggler-icon {
filter: invert(1);
}
.mfp-container {
backdrop-filter: blur(10px);
}
/* BUTTON SHIT*/
.btn-primary {
color: #fff;
background-color: #009688;
border-color: #009688;
}
.btn-primary:hover {
color: #fff;
background-color: #12afa0;
border-color: #12afa0;
}
.btn-primary:focus,
.btn-primary.focus {
color: #fff;
background-color: #12afa0;
border-color: #12afa0;
box-shadow: 0 0 0 0.2rem #12afa080;
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #009688;
border-color: #009688;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #12afa0;
border-color: #12afa0;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.2rem #12afa080;
}
hr.divider {
border-color: #12afa0
}
a {
color: #fff;
}
a:hover {
color: #12afa0;
text-decoration: none;
}
.text-primary {
color: #12afa0 !important;
}
body,html {
background: transparent;
}
/* IMAGE SLIDER */
.jquery-bg-slideshow-wrap-bg-element {
width: 100%;
height: 100%;
background-color: transparent;
}
.bg {
height: 100%;
width: 100%;
background-color: black;
color: white;
font-size: 30pt;
align-items: center;
justify-content: center;
display: flex;
text-align: center;
text-shadow: 1px 1px 10px black;
margin: 0;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption,
#portfolio .container-sm .portfolio-box .portfolio-box-caption,
#portfolio .container-md .portfolio-box .portfolio-box-caption,
#portfolio .container-lg .portfolio-box .portfolio-box-caption,
#portfolio .container-xl .portfolio-box .portfolio-box-caption {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
text-align: center;
opacity: 0;
color: #fff;
background: transparent;
transition: opacity 0.25s ease;
text-align: center;
}
.bg-primary,
.bg-dark {
background: #2d2d2d;
/* fallback for old browsers */
background: -webkit-linear-gradient(to top, #2d2d2d, #000000);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to top, #2d2d2d, #000000);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.theme-overview {
background: #2d2d2d;
/* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #2d2d2d, #000000);
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #2d2d2d, #000000);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: var(--font-family-sans-serif);
}
#services {
background: #2d2d2d;
color: white;
padding: 0rem 0 8rem 0;
}
.app-container {
background: rgba(0, 0, 0, 0.2);
color:rgba(255, 255, 255, 0.7);
border-radius: 5px;
}
.app-container:hover {
color: white;
text-decoration: none;
background: #47918a80;
}
.app-container:hover img {
transform: scale(1.1);
}
.app-container img {
transition: transform .5s;
}
.app-container-image {
width: 48px;
height: 48px;
}
p {
margin-bottom: 0.5rem;
font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 500;
line-height: 1.2;
}
.portfolio-box img {
object-fit: cover;
width: 562.4px;
height: 295.56px;
}
#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;
opacity: .9;
}
#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;
opacity: .9;
}
#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;
opacity: .9;
}
#portfolio .container-fluid .portfolio-box .portfolio-box-caption.organizr-dark-hover:hover {
background: #1f1f1f;
opacity: .9;
}
#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;
opacity: .9;
}
#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;
opacity: .9;
}

View File

@ -0,0 +1 @@
.jquery-bg-slideshow-wrap-bg-element{position:relative}.jquery-bg-slideshow-list-control-element{position:absolute;text-align:center;bottom:0;width:100%}.jquery-bg-slideshow-list-control-image-element{display:inline-block;border-radius:5pt;height:5pt;width:5pt;margin-right:5px;background:#000;border:2px #fff;box-shadow:1px 1px 10px 1px #fff;cursor:pointer}.jquery-bg-slideshow-list-control-image-active-element{background-color:red;height:10px;width:10px;border-radius:10px;transition:background-color .5s ease}.jquery-bg-slideshow-cloned{z-index:-100;display:none}

View File

@ -0,0 +1,60 @@
/*
* This is the class for the wrapper around the element that
* will have the slidshow background.
*/
.jquery-bg-slideshow-wrap-bg-element {
position: relative;
}
/*
* This class is for the div that holds all of the small 'ball'
* that can be used to traverse the images in the list control.
*/
.jquery-bg-slideshow-list-control-element {
position: absolute;
text-align: center;
bottom: 0;
width: 100%;
}
/*
* This is the class that defines the small 'ball' on the bottom
* of the image for the user to click to view different images.
* This is used if the user has the 'listControls.enabled=true'.
* NOTE: listControls.size, listControls.backgroundColor,
* listControls.borderSize, listControls.spaceBetween,
* and listControls.borderColor will impact this class.
*/
.jquery-bg-slideshow-list-control-image-element {
display: inline-block;
border-radius: 5pt;
height: 5pt;
width: 5pt;
margin-right: 5px;
background: rgb(0, 0, 0);
border: 2px rgb(255, 255, 255);
box-shadow: 1px 1px 10px 1px white;
cursor: pointer;
}
/*
* This is the class that highlights which image is being displayed
* within the list control. That is, the small 'ball' on the bottom
* of the page.
*/
.jquery-bg-slideshow-list-control-image-active-element {
background-color: red;
height: 10px;
width: 10px;
border-radius: 10px;
transition: background-color 0.5s ease;
}
/*
* This is the class used to store the cloned element. This
* will be in the background as the other one fades out.
*/
.jquery-bg-slideshow-cloned {
z-index: -100;
display: none;
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,7 @@
/**
* Author : Sunil Samuel (web_github@sunilsamuel.com)
* License : GPLv3
* GIT URL : https://github.com/sunil-samuel/jquery-responsive-background-slideshow
* Version: 1.5
*/
!function(e){e.fn.bgSlideShow=function(n){var t=new Array,a=e.extend({current:-1,images:[],transitionDelay:5e3,transitionSpeed:3e3,transitionEffect:"fade-in",randomize:!1,initialBackground:null,debug:!1,eventHandlers:{beforeInit:null,afterInit:null,beforeChange:null,afterChange:null},slideControls:{enabled:!0,classes:null}},n);return this.each(function(n,t){var i=function(n,t){var i={};i.uniqueId=(a=n,s=e(a).attr("id"),s||(s="ABCDEFGHIJKLMNOPQRSTUVWXYZ".charAt(Math.floor(Math.random()*"ABCDEFGHIJKLMNOPQRSTUVWXYZ".length))+Date.now()),s),i.current=e(n).data("current")||t.current||0,i.images=t.images,i.slideControls=t.slideControls,i.slideControls.enabled=e(n).data("slidecontrols.enabled")||t.slideControls.enabled,i.slideControls.classes=e(n).data("slidecontrols.classes")||t.slideControls.classes,e(n).data("images")&&(i.images=e(n).data("images").split(",").map(e=>e.trim()));var a,s;return i.initialBackground=e(n).data("initialbackground")||t.initialBackground,i.transitionDelay=e(n).data("transitiondelay")||t.transitionDelay,i.transitionSpeed=e(n).data("transitionspeed")||t.transitionSpeed,i.transitionEffect=e(n).data("transitioneffect")||t.transitionEffect,i.randomize=r(e(n).data("randomize"),t.randomize),i.debug=r(e(n).data("debug"),t.debug),i.eventHandlers=t.eventHandlers,i.defaultDisplay=e(n).css("display")||"block",i}(this,a);i.eventHandlers.beforeInit&&i.eventHandlers.beforeInit(this,i),function(n,t){s(t.debug,"ProcessShow with element ["+n+"]"),e(n).data("bgSlideShowApplied",!0),function(n,t){if(!t.initialBackground)return;s(t.debug,"Setting initial image");var i=t.initialBackground,a="";if(!isNaN(i)&&i<t.images.length)a=t.images[i],t.current=i+1;else if("random"==i.toLowerCase()){var r=t.randomize;t.randomize=!0,a=l(t),t.randomize=r}else a=t.initialBackground;e(n).css("background-image","url("+a+")")}(n,t),u(t.images),t.wrapBgElement=e("<div/>",{class:"jquery-bg-slideshow-wrap-bg-element",id:t.uniqueId+"-wrap-widget"}),e(n).wrap(t.wrapBgElement);var i=e(n).css("position","absolute");(function(n,t,i){if(s(i.debug,"List controls enabled: "+i.slideControls.enabled),1==i.slideControls.enabled){i.slideControlsElement=e("<div/>",{class:"jquery-bg-slideshow-list-control-element"+(i.slideControls.classes?" "+i.slideControls.classes:"")});for(var a=i.images.length,r=0;r<a;r++){var l=i.uniqueId+"-image"+r;e("<div/>",{class:"jquery-bg-slideshow-list-control-image-element",id:l}).appendTo(i.slideControlsElement)}e(t).append(i.slideControlsElement),e("[id^='"+i.uniqueId+"-image']").off("click").on("click",function(){e(i.cloned).remove();var t=e(this).attr("id"),a=parseInt(t.match(/-image(\d+)/)[1]);i.current=a+1,e(n).css("background-image","url("+i.images[a]+")"),d(i,i.current-1),console.log("clicked on ["+e(this).attr("id")+"]")})}})(n,i.parent(),t),s(t.debug,"Setting timeout for element ["+n+"]"),d(t,t.current),t.timerId=setTimeout(o,t.transitionDelay,n,t)}(this,i),i.eventHandlers.afterInit&&i.eventHandlers.afterInit(this,i),s(i.debug,"Done processing element ["+t+"] number ["+n+"]")});function r(e,n){return void 0===e?n:"boolean"==typeof e?e:(e=e.trim().toLowerCase()).startsWith("t")||e.startsWith("y")||1==e}function s(e,n){e&&console.log(n)}function l(e){if(e.randomize){for(var n=e.current;n==e.current;)n=Math.floor(Math.random()*e.images.length);return e.current=n,e.images[n]}e.current>=e.images.length&&(e.current=0);var t=e.images[e.current];return e.current=e.current+1,t}function o(n,t){s(t.debug,"Calling timer for element ["+n+"]"),function(n,t,i){t.eventHandlers.beforeChange&&t.eventHandlers.beforeChange(n,t,i);e(t.cloned).length&&e(t.cloned).remove();t.cloned=e(n).clone(),e(t.cloned).addClass("jquery-bg-slideshow-cloned").css({"background-image":"url("+i+")"}).insertAfter(e(n)),e(t.cloned).css("display",t.defaultDisplay),s(t.debug,"Before element fadeout"),e(n).stop().fadeOut(t.transitionSpeed,function(){s(t.debug,"Fading out is done - should remove cloned element"),e(this).css({"background-image":"url("+i+")",position:"absolute",display:t.defaultDisplay}),t.eventHandlers.afterChange&&t.eventHandlers.afterChange(n,t,i),d(t,t.current),t.timerId=setTimeout(o,t.transitionDelay,n,t)})}(n,t,l(t))}function d(n,t){if(n.slideControls.enabled){var i="#"+n.uniqueId+"-image"+t;e("[id^='"+n.uniqueId+"-image']").removeClass("jquery-bg-slideshow-list-control-image-active-element"),e(i).addClass("jquery-bg-slideshow-list-control-image-active-element")}}function u(e){for(i=0;i<e.length;i++){var n=u.length;t[n]=new Image,t[n].src=e[i]}}},e.fn.bgSlideshowApplied=function(){return 1==e(this).data("bgSlideShowApplied")}}(jQuery);

View File

@ -0,0 +1,383 @@
/**
* Author : Sunil Samuel (web_github@sunilsamuel.com)
* License : GPLv3
* GIT URL : https://github.com/sunil-samuel/jquery-responsive-background-slideshow
* Version: 1.5
* ______ _
* | ___ \ (_)
* | |_/ /___ ___ _ __ ___ _ __ ___ ___ _____
* | // _ \/ __| '_ \ / _ \| '_ \/ __| \ \ / / _ \
* | |\ \ __/\__ \ |_) | (_) | | | \__ \ |\ V / __/
* \_| \_\___||___/ .__/ \___/|_| |_|___/_| \_/ \___|
* | |
* |_|
* ______ _ _
* | ___ \ | | | |
* | |_/ / __ _ ___| | ____ _ _ __ ___ _ _ _ __ __| |
* | ___ \/ _` |/ __| |/ / _` | '__/ _ \| | | | '_ \ / _` |
* | |_/ / (_| | (__| < (_| | | | (_) | |_| | | | | (_| |
* \____/ \__,_|\___|_|\_\__, |_| \___/ \__,_|_| |_|\__,_|
* __/ |
* |___/
* _____ _ _ _ _
* / ___| (_) | | | |
* \ `--.| |_ __| | ___ ___| |__ _____ __
* `--. \ | |/ _` |/ _ \/ __| '_ \ / _ \ \ /\ / /
* /\__/ / | | (_| | __/\__ \ | | | (_) \ V V /
* \____/|_|_|\__,_|\___||___/_| |_|\___/ \_/\_/
*
* This is a responsive JQuery pluging that creates a background slideshow
* using JQuery animations.
*
*/
(function($) {
$.fn.bgSlideShow = function(options) {
var preloadedImages = new Array();
var defaultOptions = $.extend({
// Start with element 0 as default. Always 0 based.
current: -1,
// The list of images
images: [],
// Time in ms between the transition from one image to another
transitionDelay: 5000,
// The speed of the transition effect
transitionSpeed: 3000,
// The effect to use when transitioning (fade-in, from-right, from-left)
transitionEffect: 'fade-in',
// Adds a gradient over the images.
gradient: null,
// Randomize the start element
randomize: false,
// If the initial image should also be rendered by this plugin
// if null - then do not do anything for the first image
// if a number or 'random' or an image url - then use the appropriate image
initialBackground: null,
// Print console.log debug messages for debug purposes
debug: false,
// Event handlers for different events
eventHandlers: {
// Event before initialization
beforeInit: null,
// Event after initialization
afterInit: null,
// Event before the existing image is replaced
beforeChange: null,
// Event after the existing image is replaced
afterChange: null
},
// Controls the list control icons. The small ball on the bottom
// of the image for the user to go to a specific image.
slideControls: {
enabled: true,
classes: null
}
}, options);
// Process each element defined by the caller
return this.each(function(i, el) {
// Overwrite settings with data- attributes for each
// element that we are processing.
var elmtSettings = getSettings(this, defaultOptions);
// Call the before init event handler
if (elmtSettings.eventHandlers.beforeInit) {
elmtSettings.eventHandlers.beforeInit(this, elmtSettings);
}
processElement(this, elmtSettings)
// Call the after init event handler
if (elmtSettings.eventHandlers.afterInit) {
elmtSettings.eventHandlers.afterInit(this, elmtSettings);
}
debug(elmtSettings.debug, "Done processing element [" + el + "] number [" + i + "]");
});
/**
* Returns boolean true or false based on the string. If the string is
* 'true', 1, yes -> true
* otherwise -> false
*/
function getBoolean(str, defaultValue) {
if (str === undefined) {
return defaultValue;
}
if (typeof str === "boolean") {
return str;
}
str = str.trim().toLowerCase();
return str.startsWith("t") || str.startsWith("y") || str == 1;
}
/**
* Uses the default options, options from calling the plugin, and any
* data- attributes on the element to create the settings. The
* data- elements will have the most preference.
*/
function getSettings(elmt, s) {
var thisSetting = {};
thisSetting.uniqueId = getUniqueId(elmt);
thisSetting.current = $(elmt).data("current") || s.current || 0;
thisSetting.images = s.images;
thisSetting.slideControls = s.slideControls;
// List controls
thisSetting.slideControls.enabled = getBoolean($(elmt).data("slidecontrols.enabled"),s.slideControls.enabled);
thisSetting.slideControls.classes = $(elmt).data("slidecontrols.classes") || s.slideControls.classes;
// thisSetting.slideControls.size = $(elmt).data("slideControls.size") || s.slideControls.size;
// thisSetting.slideControls.spaceBetween = $(elmt).data("slideControls.spacebetween") || s.slideControls.spaceBetween;
// thisSetting.slideControls.backgroundColor = $(elmt).data("slideControls.backgroundcolor") || s.slideControls.backgroundColor;
// thisSetting.slideControls.borderColor = $(elmt).data("slideControls.bordercolor") || s.slideControls.borderColor;
// thisSetting.slideControls.borderSize = $(elmt).data("slideControls.bordersize") || s.slideControls.borderSize;
// Images are comma separated, so we need to split that into arrays
if ($(elmt).data("images")) {
thisSetting.images = $(elmt).data("images").split(",").map(item => item.trim());
}
thisSetting.initialBackground = $(elmt).data("initialbackground") || s.initialBackground;
thisSetting.transitionDelay = $(elmt).data("transitiondelay") || s.transitionDelay;
thisSetting.gradient = $(elmt).data("gradient") || s.gradient;
thisSetting.transitionSpeed = $(elmt).data("transitionspeed") || s.transitionSpeed;
thisSetting.transitionEffect = $(elmt).data("transitioneffect") || s.transitionEffect;
thisSetting.randomize = getBoolean($(elmt).data("randomize"), s.randomize);
thisSetting.debug = getBoolean($(elmt).data("debug"), s.debug);
thisSetting.eventHandlers = s.eventHandlers;
// If the element already has a 'display', css tag, then lets keep that instead
// of going to block.
thisSetting.defaultDisplay = $(elmt).css("display") || "block";
return thisSetting;
}
/**
* Print log messages only if debug is turned on by the caller.
*/
function debug(v, str) {
v && console.log(str);
}
/**
* Based on the options selected by the caller, find the next image and
* return the image
*/
function getNextImage(settings) {
/**If the user wanted to randomize, then just pick any from the list of images
making sure it is not the current one */
if (settings.randomize) {
var rand = settings.current;
while (rand == settings.current) {
rand = Math.floor(Math.random() * settings.images.length);
}
settings.current = rand;
return settings.images[rand];
}
/** If not randomize, then get the next image in the list or recyle */
if (settings.current >= settings.images.length) {
settings.current = 0;
}
var rval = settings.images[settings.current];
settings.current = settings.current + 1;
return rval;
}
/**
* Process each element that was selected by the caller. The
* timer is set to load the images.
*/
function processElement(element, settings) {
debug(settings.debug, "ProcessShow with element [" + element + "]");
$(element).data("bgSlideShowApplied", true);
// Check if we need to set the initial image
setInitialImage(element, settings);
// Preload all of the images
// FIXME - Do in another thread
preloadImages(settings.images);
// Wrap an element around this element with certain
// css attributes.
settings.wrapBgElement = $('<div/>', {
class: 'jquery-bg-slideshow-wrap-bg-element',
id: settings.uniqueId + "-wrap-widget"
});
$(element).wrap(settings.wrapBgElement);
var wrappedElement = $(element).css("position", "absolute");
createImageSlideControls(element, wrappedElement.parent(), settings);
debug(settings.debug, "Setting timeout for element [" + element + "]");
updateCurrentSlideElement(settings, settings.current);
settings.timerId = setTimeout(timeoutEvent, settings.transitionDelay, element, settings);
}
/**
* Create a list of small 'ball' images on the bottom of the image for the user
* to click to view diffferent images.
*/
function createImageSlideControls(element, wrappedElement, settings) {
debug(settings.debug, "List controls enabled: " + settings.slideControls.enabled);
if (settings.slideControls.enabled == true) {
settings.slideControlsElement = $('<div/>', {
class: "jquery-bg-slideshow-list-control-element" +
(settings.slideControls.classes ? " " + settings.slideControls.classes : ""),
});
var ilen = settings.images.length;
for (var i = 0; i < ilen; i++) {
var id = settings.uniqueId + "-image" + i;
$("<div/>", {
class: "jquery-bg-slideshow-list-control-image-element",
id: id
}).appendTo(settings.slideControlsElement);
}
$(wrappedElement).append(settings.slideControlsElement);
$("[id^='" + settings.uniqueId + "-image']").off("click").on("click", function() {
$(settings.cloned).remove();
// Id will give us image number
var id = $(this).attr("id");
var imageOffset = parseInt(id.match(/-image(\d+)/)[1]);
settings.current = imageOffset + 1;
$(element).css("background-image", "url(" + settings.images[imageOffset] + ")");
updateCurrentSlideElement(settings, settings.current - 1);
console.log("clicked on [" + $(this).attr("id") + "]");
});
}
}
/**
* Given an element, if it has a id attribute, then return it otherwise create a unique
* id and return it.
*/
function getUniqueId(element) {
var id = $(element).attr("id");
if (!id) {
id = generateUniqueId();
}
return id;
}
/**
* Generate a unique id based on random character and current date in ms.
*/
function generateUniqueId() {
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var rval = characters.charAt(Math.floor(Math.random() * characters.length)) + Date.now();
return rval;
}
/**
* Check to see if the initial background should be set by this code.
*/
function setInitialImage(element, settings) {
if (!settings.initialBackground) {
return;
}
debug(settings.debug, "Setting initial image");
var initialImage = settings.initialBackground;
var image = "";
// If this is a number then use the number
if (!isNaN(initialImage) && initialImage < settings.images.length) {
image = settings.images[initialImage];
settings.current = initialImage + 1;
} else if (initialImage.toLowerCase() == "random") {
var originalRandom = settings.randomize;
settings.randomize = true;
image = getNextImage(settings);
settings.randomize = originalRandom;
} else {
image = settings.initialBackground;
}
if(settings.gradient) {
$(element).css("background-image", settings.gradient + ", url(" + image + ")");
}else {
$(element).css("background-image", "url(" + image + ")");
}
}
/**
* The timeout event is called based on the transition time set by
* the caller. This will continually call itself once the background
* image is set on the element.
*/
function timeoutEvent(element, settings) {
debug(settings.debug, "Calling timer for element [" + element + "]");
var nextImage = getNextImage(settings);
slideBackgroundImage(element, settings, nextImage);
}
/**
* Slide the background now given the next image.
*/
function slideBackgroundImage(element, settings, nextImage) {
if (settings.eventHandlers.beforeChange) {
settings.eventHandlers.beforeChange(element, settings, nextImage);
}
if ($(settings.cloned).length) {
$(settings.cloned).remove();
}
settings.cloned = $(element).clone();
if(settings.gradient) {
$(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({
"background-image": settings.gradient+", url(" + nextImage + ")"
}).insertAfter($(element));
} else {
$(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({
"background-image": "url(" + nextImage + ")"
}).insertAfter($(element));
}
$(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({
"background-image": settings.gradient+", url(" + nextImage + ")"
}).insertAfter($(element));
$(settings.cloned).css("display", settings.defaultDisplay);
debug(settings.debug, "Before element fadeout");
$(element).stop().fadeOut(settings.transitionSpeed, function() {
debug(settings.debug, "Fading out is done - should remove cloned element");
if(settings.gradient) {
$(this).css({
"background-image": settings.gradient+", url(" + nextImage + ")",
"position": "absolute",
"display": settings.defaultDisplay
});
} else {
$(this).css({
"background-image": "url(" + nextImage + ")",
"position": "absolute",
"display": settings.defaultDisplay
});
}
//var removed = $(settings.cloned).remove();
//debug(settings.debug, "Total removed [" + removed.length + "]");
if (settings.eventHandlers.afterChange) {
settings.eventHandlers.afterChange(element, settings, nextImage);
}
updateCurrentSlideElement(settings, settings.current);
settings.timerId = setTimeout(timeoutEvent, settings.transitionDelay, element, settings);
});
}
function updateCurrentSlideElement(settings, current) {
if (settings.slideControls.enabled) {
var id = "#" + settings.uniqueId + "-image" + current;
$("[id^='" + settings.uniqueId + "-image']").removeClass("jquery-bg-slideshow-list-control-image-active-element");
$(id).addClass("jquery-bg-slideshow-list-control-image-active-element");
}
}
/**
* Preload all of the images so that there will be no delay in showing
* the background.
*/
function preloadImages(images) {
for (i = 0; i < images.length; i++) {
var length = preloadImages.length;
preloadedImages[length] = new Image();
preloadedImages[length].src = images[i];
}
}
};
/**
* Helper function to check if plugin is applied
*/
$.fn.bgSlideshowApplied = function() {
return $(this).data("bgSlideShowApplied") == true ? true : false;
}
}(jQuery));

View File

@ -0,0 +1,72 @@
/*!
* Start Bootstrap - Creative v6.0.5 (https://startbootstrap.com/theme/creative)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-creative/blob/master/LICENSE)
*/
(function ($) {
"use strict"; // Start of use strict
// Smooth scrolling using anime.js
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ?
target :
$("[name=" + this.hash.slice(1) + "]");
if (target.length) {
anime({
targets: 'html, body',
scrollTop: target.offset().top - 72,
duration: 1000,
easing: 'easeInOutExpo'
});
return false;
}
}
});
// Closes responsive menu when a scroll trigger link is clicked
$('.js-scroll-trigger').click(function () {
$('.navbar-collapse').collapse('hide');
});
// Activate scrollspy to add active class to navbar items on scroll
$('body').scrollspy({
target: '#mainNav',
offset: 75
});
// Collapse Navbar
var navbarCollapse = function () {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-scrolled");
} else {
$("#mainNav").removeClass("navbar-scrolled");
}
};
// Collapse now if page is not at top
navbarCollapse();
// Collapse the navbar when page is scrolled
$(window).scroll(navbarCollapse);
// Magnific popup calls
$('#portfolio').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0, 1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
}
});
})(jQuery); // End of use strict

BIN
Resources/mind.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 KiB

BIN
Resources/power.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 318 KiB

BIN
Resources/reality.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB

BIN
Resources/soul.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 KiB

BIN
Resources/space.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 KiB

BIN
Resources/time.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 KiB

BIN
banners/mind_banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 350 KiB

BIN
banners/power_banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 492 KiB

BIN
banners/reality_banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 438 KiB

BIN
banners/soul_banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 474 KiB

BIN
banners/space_banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 446 KiB

BIN
banners/time_banner.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 457 KiB

428
index.html Normal file
View File

@ -0,0 +1,428 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>theme.park</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="Resources/landing-page/assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic"
rel="stylesheet" type="text/css" />
<!-- Third party plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="Resources/landing-page/css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
<link rel="stylesheet" href="Resources/landing-page/css/custom.css">
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img 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"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://docs.theme-park.dev"><i
class="fas fa-book"></i> Docs</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="https://github.com/gilbn/theme.park"><i class="fab fa-github"></i> Github</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="https://docs.theme-park.dev/discord"><i class="fab fa-discord"></i> Discord</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger"
href="https://github.com/sponsors/GilbN"><i class="fas fa-heart"></i> Sponsor</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<!-- -->
<header class="masthead bg" data-current="0"
data-images="Resources/landing-page/assets/img/slides/1.jpg,Resources/landing-page/assets/img/slides/2.jpg,Resources/landing-page/assets/img/slides/3.jpg,Resources/landing-page/assets/img/slides/4.jpg,Resources/landing-page/assets/img/slides/5.jpg,Resources/landing-page/assets/img/slides/6.jpg,Resources/landing-page/assets/img/slides/7.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="from-right" data-randomize="false"
data-initialBackground="1" data-debug="true" data-slidecontrols.enabled="false"
data-gradient="linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.404) 100%)">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold">Custom themes for your favorite apps!</h1>
<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 45 selfhosted apps!
</p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
</div>
</div>
</div>
</header>
<!-- About-->
<section class="page-section bg-primary" id="about">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">Over 45 themed apps</h2>
<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">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>
<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">
<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">
<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/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/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/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/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/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>
</div>
<div class="row">
<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/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>
</div>
<div class="row">
<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>
</div>
<div class="container">
<div class="row justify-content-md-center">
<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>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<h2 class="text-center mt-0">How to get started</h2>
<hr class="divider my-4" />
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-book text-primary mb-4"></i>
<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>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<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-muted mb-0">Having issues with a theme? Let us know on Github!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fab fa-4x fa-discord text-primary mb-4"></i>
<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>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-heart text-primary mb-4"></i>
<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>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio-->
<div id="portfolio">
<div class="container-fluid p-0">
<div class="row no-gutters theme-overview">
<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.png" 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.png" 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.png" 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.png" 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.png" alt="..." />
<div class="portfolio-box-caption dark-hover" style="width: 562px; height: 295px !important;">
<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.png" 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>
<!-- Call to action-->
<!-- <section class="page-section bg-dark text-white">
<div class="container text-center">
<h2 class="mb-4">Free Download at Start Bootstrap!</h2>
<a class="btn btn-light btn-xl" href="https://startbootstrap.com/theme/creative/">Download Now!</a>
</div>
</section> -->
<!-- Contact-->
<!-- <section class="page-section" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mt-0">Let's Get In Touch!</h2>
<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
email and we will get back to you as soon as possible!</p>
</div>
</div>
<div class="row">
<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>
<div>+1 (555) 123-4567</div>
</div>
<div class="col-lg-4 mr-auto text-center">
<i class="fas fa-envelope fa-3x mb-3 text-muted"></i>
<!-- 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>
</div>
</div>
</div>
</section> -->
<!-- Footer-->
<footer class="theme-overview py-5">
<div class="container">
<div class="small text-center text-muted">
Copyright &copy;
<!-- This script automatically adds the current year to your website footer-->
<!-- (credit: https://updateyourfooter.com/)-->
<script>
document.write(new Date().getFullYear());
</script>
- GilbN
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<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"></script>
<script src="Resources/landing-page/js/jquery-bg-slideshow.js"></script>
<script type="text/javascript">
$(function () {
$(".bg").bgSlideShow();
});
</script>
</body>
</html>