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%);
|
||||
}
|
||||
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-dark-hover {
|
||||
#portfolio [class*="container-"] .portfolio-box .portfolio-box-caption.organizr-hover {
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
@ -364,7 +364,7 @@ p {
|
||||
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%);
|
||||
}
|
||||
|
||||
|
@ -6,29 +6,6 @@
|
||||
(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');
|
||||
@ -71,17 +48,14 @@
|
||||
|
||||
})(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") {
|
||||
if (container === "head") {
|
||||
html_element = document.head;
|
||||
} else html_element = document.body;
|
||||
let themeOption = document.getElementById("theme-option")
|
||||
let link = themeOption ? themeOption : document.createElement("link");
|
||||
url = "/CSS/variables/"
|
||||
url = "/CSS/theme-options/"
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
link.href = `${url}/${theme.toLowerCase()}.css`;
|
||||
@ -92,6 +66,7 @@ function injectTheme(theme,container="head") {
|
||||
// Add theme data and set theme vars
|
||||
var apps;
|
||||
var themeOptions;
|
||||
|
||||
function addThemeData() {
|
||||
let themeJsonUrl = "/themes.json"
|
||||
fetch(themeJsonUrl)
|
||||
@ -105,24 +80,42 @@ function injectTheme(theme,container="head") {
|
||||
document.getElementById("app-count").innerHTML = `
|
||||
theme.park contains ${appCount} themed applications, with css <a
|
||||
href="https://docs.theme-park.dev/themes/addons/">addons</a> on certain themes.`
|
||||
document.getElementById("theme-count").innerHTML = `Choose between <a class="js-scroll-trigger" href="#themes">${Object.keys(json.themes).length} different
|
||||
styles!</a> With the possibility to easily create your own themes using the defined <a
|
||||
document.getElementById("theme-count").innerHTML = `Choose between <a class="js-scroll-trigger" href="#themes">${Object.keys(json.themes).length} official
|
||||
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>.`
|
||||
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")
|
||||
sorted = Object.keys(apps).sort()
|
||||
for (let app in sorted) {
|
||||
let allThemesDiv = document.getElementById("all-themes")
|
||||
sortedApps = Object.keys(apps).sort()
|
||||
sortedThemes = Object.keys(themeOptions).sort()
|
||||
for (let app in sortedApps) {
|
||||
let newApp = `
|
||||
<a class="col app-container text-center p-2 m-1" href="https://docs.theme-park.dev/themes/${sorted[app]}/">
|
||||
<p><img class="app-container-image" src="https://docs.theme-park.dev/site_assets/${sorted[app]}/logo.png"/></p>
|
||||
<p>${sorted[app][0].toUpperCase() + sorted[app].slice(1)}</p>
|
||||
<a 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/${sortedApps[app]}/logo.png"/></p>
|
||||
<p>${sortedApps[app][0].toUpperCase() + sortedApps[app].slice(1)}</p>
|
||||
</a>`
|
||||
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) {
|
||||
@ -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();
|
||||
document.getElementById("switch-theme").addEventListener("click", () => {
|
||||
fadeOutIn(350);
|
||||
|
@ -8,6 +8,7 @@ echo '---------------------------'
|
||||
echo -e "Variables set:\\n\
|
||||
'TP_DOMAIN'=${TP_DOMAIN}\\n\
|
||||
'TP_ADDON'=${TP_ADDON}\\n\
|
||||
'TP_COMMUNITY_THEME'=${TP_COMMUNITY_THEME}\\n\
|
||||
'TP_THEME'=${TP_THEME}\\n"
|
||||
|
||||
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'
|
||||
fi
|
||||
|
||||
THEME_TYPE='theme-options'
|
||||
if [ "${TP_COMMUNITY_THEME}" = true ]; then
|
||||
THEME_TYPE='community-theme-options'
|
||||
fi
|
||||
|
||||
# Set default
|
||||
if [[ -z ${TP_DOMAIN} ]]; then
|
||||
echo 'No domain set, defaulting to theme-park.dev'
|
||||
@ -39,8 +45,8 @@ if ! grep -q "${TP_DOMAIN}" "${APP_FILEPATH}"; then
|
||||
echo '---------------------------'
|
||||
echo '| Adding the stylesheet |'
|
||||
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\/variables\/${TP_THEME}.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\/${THEME_TYPE}\/${TP_THEME}.css'><\/head> /g" "${APP_FILEPATH}"
|
||||
printf 'Stylesheet set to %s\n' "${TP_THEME}"
|
||||
if [[ -n ${TP_ADDON} ]]; then
|
||||
for addon in $(echo "$TP_ADDON" | tr "|" " "); do
|
||||
|
98
index.html
@ -21,7 +21,7 @@
|
||||
<!-- Core theme CSS (includes Bootstrap)-->
|
||||
<link href="Resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="Resources/landing-page/css/jquery-bg-slideshow.css">
|
||||
<link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.2">
|
||||
<link rel="stylesheet" href="Resources/landing-page/css/custom.css?v=2.3">
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
@ -99,7 +99,6 @@
|
||||
</div>
|
||||
<div class="col justify-content-center pt-5 all-apps container">
|
||||
<div id="all-apps" class="row justify-content-center">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -174,98 +173,7 @@
|
||||
</section>
|
||||
<div id="portfolio" class="theme-overview">
|
||||
<div class="container-fluid p-0">
|
||||
<div class="row no-gutters d-flex justify-content-center">
|
||||
<div class="col-lg-4 col-sm-6 p-1">
|
||||
<a class="portfolio-box" href="Resources/landing-page/assets/img/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 class="row no-gutters d-flex justify-content-center" id="all-themes">
|
||||
</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/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
|
||||
<!-- Core theme JS-->
|
||||
<script src="Resources/landing-page/js/scripts.js?v=1.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 type="text/javascript">
|
||||
$(function () {
|
||||
|