mirror of
https://github.com/gilbN/theme.park.git
synced 2024-11-20 01:52:32 +01:00
304 lines
18 KiB
HTML
304 lines
18 KiB
HTML
<!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?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">
|
|
</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 class="branding"
|
|
src="Resources/landing-page/assets/img/themepark-logo.png" 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>
|
|
<li style="padding: 0 1rem;">
|
|
<a class="github-button" href="https://github.com/gilbn/theme.park" data-show-count="true"
|
|
aria-label="Star gilbn/theme.park on GitHub">Star</a>
|
|
</li>
|
|
<li style="padding: 0 1rem;">
|
|
<a class="github-button" href="https://github.com/gilbn/theme.park/fork"
|
|
data-icon="octicon-repo-forked" data-show-count="true"
|
|
aria-label="Fork gilbn/theme.park on GitHub">Fork</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,Resources/landing-page/assets/img/slides/11.jpg,Resources/landing-page/assets/img/slides/12.jpg,Resources/landing-page/assets/img/slides/13.jpg"
|
|
data-transitionDelay="1000" data-transitionSpeed="2000" data-transitionEffect="fade-in" data-randomize="false"
|
|
data-initialBackground="4" data-debug="false" data-slidecontrols.enabled="false"
|
|
data-gradient="linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%)">
|
|
<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 id="tag-line" class="text-white-75 font-weight-light mb-5">...</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 id="theme-header-text" class="text-white mt-0">...</h2>
|
|
<hr class="divider light my-4" />
|
|
<p class="text-white-50 mb-1" id=app-count>...</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>
|
|
<p class="text-white-50 mb-5" id="theme-count">... </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 all-apps container">
|
|
<div id="all-apps" class="row justify-content-center">
|
|
...
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Services-->
|
|
<section class="page-section" id="services">
|
|
<div class="container" style="min-width: 90%;">
|
|
<h2 class="text-center mt-0">How to get started</h2>
|
|
<hr class="divider my-4" />
|
|
<div class="row">
|
|
<div class="col-lg 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-white-50 mb-0">Head over to the <a
|
|
href="https://docs.theme-park.dev/">documentation</a> page for more information on each
|
|
theme!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg 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-white-50 mb-0">Having issues with a theme? Let us know on <a
|
|
href="https://github.com/gilbn/theme.park">Github!</a></p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg 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-white-50 mb-0">Need live support? Head over to our <a
|
|
href="https://docs.theme-park.dev/discord">Discord</a> server!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg col-md-6 text-center">
|
|
<div class="mt-5">
|
|
<i class="fas fa-4x fa-palette text-primary mb-4"></i>
|
|
<h3 class="h4 mb-2"><a href="https://docs.theme-park.dev/community-themes/">Community Themes!</a></h3>
|
|
<p class="text-white-50 mb-0">Got a good <a href="https://docs.theme-park.dev/community-themes/">color scheme</a> you'd like to see added? PR it!</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg 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-white-50 mb-0">Is it really open source if it's not made with love?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Portfolio-->
|
|
<section class="page-section pt-0">
|
|
<div class="container pb-3">
|
|
<div class="row h-100 align-items-center justify-content-center text-center">
|
|
<div class="col-lg-10 align-self-end">
|
|
</div>
|
|
<div class="col-lg-8 align-self-baseline">
|
|
<button id="switch-theme" class="btn btn-primary btn-xl click-me-btn">Click Me!</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="page-section pb-1" id="themes">
|
|
<div class="container">
|
|
<h2 class="text-center mt-0">Official theme options</h2>
|
|
<h6 class="text-center mt-0">Click here for the <a href="https://docs.theme-park.dev/community-themes/">community themes</a></h6>
|
|
|
|
|
|
<hr class="divider my-4" />
|
|
</div>
|
|
</section>
|
|
<div id="portfolio" class="theme-overview">
|
|
<div class="container-fluid p-0">
|
|
<div class="row no-gutters d-flex justify-content-center">
|
|
<div class="col-lg-4 col-sm-6 p-1">
|
|
<a class="portfolio-box" href="Resources/landing-page/assets/img/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>
|
|
<!-- Footer-->
|
|
<footer class=" py-5">
|
|
<div class="container">
|
|
<div class="small text-center text-white-50">
|
|
Copyright ©
|
|
<!-- 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?v=1.4"></script>
|
|
<script src="Resources/landing-page/js/jquery-bg-slideshow.js?v=1"></script>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
$(".bg").bgSlideShow();
|
|
});
|
|
</script>
|
|
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
|
</body>
|
|
|
|
</html>
|