theme.park site updates
@ -1 +0,0 @@
|
|||||||
@import url("https://develop.theme-park.dev/CSS/variables/organizr.css");
|
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
Before Width: | Height: | Size: 841 KiB After Width: | Height: | Size: 841 KiB |
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 2.2 MiB |
@ -348,7 +348,7 @@ p {
|
|||||||
background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%);
|
background: radial-gradient(ellipse at center, rgba(87, 108, 117, 1) 0%, rgba(37, 50, 55, 1) 100.2%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-dark-hover {
|
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-hover {
|
||||||
background: #1f1f1f;
|
background: #1f1f1f;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -364,7 +364,7 @@ p {
|
|||||||
background: #282a36;
|
background: #282a36;
|
||||||
}
|
}
|
||||||
|
|
||||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.overseer-hover {
|
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.overseerr-hover {
|
||||||
background: linear-gradient(360deg, hsl(221, 39%, 11%) 65%, hsl(215, 28%, 17%) 100%);
|
background: linear-gradient(360deg, hsl(221, 39%, 11%) 65%, hsl(215, 28%, 17%) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -6,29 +6,6 @@
|
|||||||
(function ($) {
|
(function ($) {
|
||||||
"use strict"; // Start of use strict
|
"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
|
// Closes responsive menu when a scroll trigger link is clicked
|
||||||
$('.js-scroll-trigger').click(function () {
|
$('.js-scroll-trigger').click(function () {
|
||||||
$('.navbar-collapse').collapse('hide');
|
$('.navbar-collapse').collapse('hide');
|
||||||
@ -71,17 +48,14 @@
|
|||||||
|
|
||||||
})(jQuery); // End of use strict
|
})(jQuery); // End of use strict
|
||||||
|
|
||||||
const themes = ["aquamarine","hotline","dark","organizr-dark","dracula","overseerr",
|
|
||||||
"plex","space-gray","hotpink","onedark","nord"];
|
|
||||||
var random = themes[~~(Math.random() * themes.length)];
|
|
||||||
// load a random css stylesheet
|
|
||||||
function injectTheme(theme,container="head") {
|
function injectTheme(theme,container="head") {
|
||||||
if (container === "head") {
|
if (container === "head") {
|
||||||
html_element = document.head;
|
html_element = document.head;
|
||||||
} else html_element = document.body;
|
} else html_element = document.body;
|
||||||
let themeOption = document.getElementById("theme-option")
|
let themeOption = document.getElementById("theme-option")
|
||||||
let link = themeOption ? themeOption : document.createElement("link");
|
let link = themeOption ? themeOption : document.createElement("link");
|
||||||
url = "/CSS/variables/"
|
url = "/CSS/theme-options/"
|
||||||
link.type = "text/css";
|
link.type = "text/css";
|
||||||
link.rel = "stylesheet";
|
link.rel = "stylesheet";
|
||||||
link.href = `${url}/${theme.toLowerCase()}.css`;
|
link.href = `${url}/${theme.toLowerCase()}.css`;
|
||||||
@ -92,6 +66,7 @@ function injectTheme(theme,container="head") {
|
|||||||
// Add theme data and set theme vars
|
// Add theme data and set theme vars
|
||||||
var apps;
|
var apps;
|
||||||
var themeOptions;
|
var themeOptions;
|
||||||
|
|
||||||
function addThemeData() {
|
function addThemeData() {
|
||||||
let themeJsonUrl = "/themes.json"
|
let themeJsonUrl = "/themes.json"
|
||||||
fetch(themeJsonUrl)
|
fetch(themeJsonUrl)
|
||||||
@ -105,24 +80,42 @@ function injectTheme(theme,container="head") {
|
|||||||
document.getElementById("app-count").innerHTML = `
|
document.getElementById("app-count").innerHTML = `
|
||||||
theme.park contains ${appCount} themed applications, with css <a
|
theme.park contains ${appCount} themed applications, with css <a
|
||||||
href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`
|
href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`
|
||||||
document.getElementById("theme-count").innerHTML = `Choose between <a class="js-scroll-trigger" href="#themes">${Object.keys(json.themes).length} different
|
document.getElementById("theme-count").innerHTML = `Choose between <a class="js-scroll-trigger" href="#themes">${Object.keys(json.themes).length} official
|
||||||
styles!</a> With the possibility to easily create your own themes using the defined <a
|
styles</a>, and <a href="https://docs.theme-park.dev/community-themes/">${Object.keys(json["community-themes"]).length} community styles!</a> With the possibility to easily create your own themes using the defined <a
|
||||||
href="https://docs.theme-park.dev/custom/">variables</a>.`
|
href="https://docs.theme-park.dev/custom/">variables</a>.`
|
||||||
createApps(apps)
|
createApps(apps,themeOptions)
|
||||||
|
smoothScroll()
|
||||||
|
let randomTheme = Object.keys(themeOptions)[~~(Math.random() * Object.keys(themeOptions).length)]
|
||||||
|
injectTheme(randomTheme)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function createApps(apps) {
|
function createApps(apps,themeOptions) {
|
||||||
let allAppsDiv = document.getElementById("all-apps")
|
let allAppsDiv = document.getElementById("all-apps")
|
||||||
sorted = Object.keys(apps).sort()
|
let allThemesDiv = document.getElementById("all-themes")
|
||||||
for (let app in sorted) {
|
sortedApps = Object.keys(apps).sort()
|
||||||
|
sortedThemes = Object.keys(themeOptions).sort()
|
||||||
|
for (let app in sortedApps) {
|
||||||
let newApp = `
|
let newApp = `
|
||||||
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/${sorted[app]}/">
|
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/${sortedApps[app]}/">
|
||||||
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/${sorted[app]}/logo.png"/></p>
|
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/${sortedApps[app]}/logo.png"/></p>
|
||||||
<p>${sorted[app][0].toUpperCase() + sorted[app].slice(1)}</p>
|
<p>${sortedApps[app][0].toUpperCase() + sortedApps[app].slice(1)}</p>
|
||||||
</a>`
|
</a>`
|
||||||
allAppsDiv.innerHTML += newApp
|
allAppsDiv.innerHTML += newApp
|
||||||
}
|
}
|
||||||
|
for (let option in sortedThemes) {
|
||||||
|
let newApp = `
|
||||||
|
<div class="col-lg-4 col-sm-6 p-1">
|
||||||
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}.png">
|
||||||
|
<img class="img-fluid" src="Resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}-small.jpg" alt="..." />
|
||||||
|
<div class="portfolio-box-caption p-3 ${sortedThemes[option].toLowerCase()}-hover">
|
||||||
|
<div class="project-category text-white-50">Theme</div>
|
||||||
|
<div class="project-name">${sortedThemes[option][0].toUpperCase() + sortedThemes[option].slice(1)}</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>`
|
||||||
|
allThemesDiv.innerHTML += newApp
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function fadeOutIn(speed) {
|
function fadeOutIn(speed) {
|
||||||
@ -146,7 +139,29 @@ function fadeOutIn(speed ) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
injectTheme(random);
|
// Smooth scrolling using anime.js
|
||||||
|
function smoothScroll() {$('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 - 120,
|
||||||
|
duration: 1000,
|
||||||
|
easing: 'easeInOutExpo'
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})};
|
||||||
|
|
||||||
addThemeData();
|
addThemeData();
|
||||||
document.getElementById("switch-theme").addEventListener("click", () => {
|
document.getElementById("switch-theme").addEventListener("click", () => {
|
||||||
fadeOutIn(350);
|
fadeOutIn(350);
|
||||||
|
@ -8,6 +8,7 @@ echo '---------------------------'
|
|||||||
echo -e "Variables set:\\n\
|
echo -e "Variables set:\\n\
|
||||||
'TP_DOMAIN'=${TP_DOMAIN}\\n\
|
'TP_DOMAIN'=${TP_DOMAIN}\\n\
|
||||||
'TP_ADDON'=${TP_ADDON}\\n\
|
'TP_ADDON'=${TP_ADDON}\\n\
|
||||||
|
'TP_COMMUNITY_THEME'=${TP_COMMUNITY_THEME}\\n\
|
||||||
'TP_THEME'=${TP_THEME}\\n"
|
'TP_THEME'=${TP_THEME}\\n"
|
||||||
|
|
||||||
APP_FILEPATH='/app/bazarr/bin/frontend/build/index.html'
|
APP_FILEPATH='/app/bazarr/bin/frontend/build/index.html'
|
||||||
@ -16,6 +17,11 @@ if [ "${TP_HOTIO}" = true ]; then
|
|||||||
APP_FILEPATH='/app/bin/frontend/build/index.html'
|
APP_FILEPATH='/app/bin/frontend/build/index.html'
|
||||||
fi
|
fi
|
||||||
|
|
||||||
|
THEME_TYPE='theme-options'
|
||||||
|
if [ "${TP_COMMUNITY_THEME}" = true ]; then
|
||||||
|
THEME_TYPE='community-theme-options'
|
||||||
|
fi
|
||||||
|
|
||||||
# Set default
|
# Set default
|
||||||
if [[ -z ${TP_DOMAIN} ]]; then
|
if [[ -z ${TP_DOMAIN} ]]; then
|
||||||
echo 'No domain set, defaulting to theme-park.dev'
|
echo 'No domain set, defaulting to theme-park.dev'
|
||||||
@ -39,8 +45,8 @@ if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then
|
|||||||
echo '---------------------------'
|
echo '---------------------------'
|
||||||
echo '| Adding the stylesheet |'
|
echo '| Adding the stylesheet |'
|
||||||
echo '---------------------------'
|
echo '---------------------------'
|
||||||
sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/themes\/bazarr\/bazarr-base.css'><\/head> /g" "${APP_FILEPATH}"
|
sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/base\/bazarr\/bazarr-base.css'><\/head> /g" "${APP_FILEPATH}"
|
||||||
sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/variables\/${TP_THEME}.css'><\/head> /g" "${APP_FILEPATH}"
|
sed -i "s/<\/head>/<link rel='stylesheet' href='https:\/\/${TP_DOMAIN}\/CSS\/${THEME_TYPE}\/${TP_THEME}.css'><\/head> /g" "${APP_FILEPATH}"
|
||||||
printf 'Stylesheet set to %s\n' "${TP_THEME}"
|
printf 'Stylesheet set to %s\n' "${TP_THEME}"
|
||||||
if [[ -n ${TP_ADDON} ]]; then
|
if [[ -n ${TP_ADDON} ]]; then
|
||||||
for addon in $(echo "$TP_ADDON" | tr "|" " "); do
|
for addon in $(echo "$TP_ADDON" | tr "|" " "); do
|
||||||
|
98
index.html
@ -21,7 +21,7 @@
|
|||||||
<!-- Core theme CSS (includes Bootstrap)-->
|
<!-- Core theme CSS (includes Bootstrap)-->
|
||||||
<link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
|
<link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
|
||||||
<link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
|
<link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
|
||||||
<link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.2">
|
<link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.3">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body id="page-top">
|
<body id="page-top">
|
||||||
@ -99,7 +99,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col justify-content-center pt-5 all-apps container">
|
<div class="col justify-content-center pt-5 all-apps container">
|
||||||
<div id="all-apps" class="row justify-content-center">
|
<div id="all-apps" class="row justify-content-center">
|
||||||
...
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -174,98 +173,7 @@
|
|||||||
</section>
|
</section>
|
||||||
<div id="portfolio" class="theme-overview">
|
<div id="portfolio" class="theme-overview">
|
||||||
<div class="container-fluid p-0">
|
<div class="container-fluid p-0">
|
||||||
<div class="row no-gutters d-flex justify-content-center">
|
<div class="row no-gutters d-flex justify-content-center" id="all-themes">
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/hotpink.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/hotpink-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption p-3 hotpink-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Hotpink</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/dracula.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/dracula-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption p-3 dracula-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Dracula</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/overseer.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/overseer-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption p-3 overseer-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Overseer</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/nord.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/nord-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption p-3 nord-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Nord</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/aquamarine.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/aquamarine-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption aquamarine-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Aquamarine</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/hotline.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/hotline-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption hotline-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Hotline</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/space-gray.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/space-gray-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption space-gray-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Space Gray</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/organizr-dark.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/organizr-dark-small.jpg"
|
|
||||||
alt="..." />
|
|
||||||
<div class="portfolio-box-caption organizr-dark-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Organizr Dark</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/dark.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/dark-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption dark-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Dark</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-lg-4 col-sm-6 p-1">
|
|
||||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/plex.png">
|
|
||||||
<img class="img-fluid" src="Resources/landing-page/assets/img/plex-small.jpg" alt="..." />
|
|
||||||
<div class="portfolio-box-caption p-3 plex-hover">
|
|
||||||
<div class="project-category text-white-50">Theme</div>
|
|
||||||
<div class="project-name">Plex</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -290,7 +198,7 @@
|
|||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/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>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
|
||||||
<!-- Core theme JS-->
|
<!-- Core theme JS-->
|
||||||
<script src="Resources/landing-page/js/scripts.js?v=1.4"></script>
|
<script src="Resources/landing-page/js/scripts.js?v=1.5"></script>
|
||||||
<script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
|
<script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function () {
|
$(function () {
|
||||||
|