1
0
mirror of https://github.com/gilbN/theme.park.git synced 2024-11-10 21:22:30 +01:00
theme.park/index.html
2021-10-30 12:25:13 +02:00

212 lines
12 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.4">
</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" id="all-themes">
</div>
</div>
</div>
<!-- Footer-->
<footer class=" py-5">
<div class="container">
<div class="small text-center text-white-50">
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?v=1.6"></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>