Mirrors/theme.park
1
0
Fork 0
mirror of https://github.com/gilbN/theme.park.git synced 2024-08-19 08:29:37 +02:00
Code Issues Releases Wiki Activity

landingpage

Browse Source
This commit is contained in:
Marius 2021-05-15 15:00:15 +02:00
parent 94736b177a
commit 0f829f5bf8
27 changed files with 10891 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Resources/landing-page/assets/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Resources/landing-page/assets/img/aquamarine.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
Resources/landing-page/assets/img/dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 MiB

BIN
Resources/landing-page/assets/img/hotline.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
Resources/landing-page/assets/img/organizr-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
Resources/landing-page/assets/img/plex.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 MiB

BIN
Resources/landing-page/assets/img/portfolio/fullsize/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
Resources/landing-page/assets/img/portfolio/fullsize/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
Resources/landing-page/assets/img/portfolio/fullsize/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
Resources/landing-page/assets/img/portfolio/fullsize/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
Resources/landing-page/assets/img/portfolio/fullsize/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
Resources/landing-page/assets/img/portfolio/fullsize/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
Resources/landing-page/assets/img/portfolio/thumbnails/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
Resources/landing-page/assets/img/portfolio/thumbnails/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
Resources/landing-page/assets/img/portfolio/thumbnails/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
Resources/landing-page/assets/img/portfolio/thumbnails/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
Resources/landing-page/assets/img/portfolio/thumbnails/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
Resources/landing-page/assets/img/portfolio/thumbnails/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
Resources/landing-page/assets/img/space-gray.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

BIN
Resources/landing-page/assets/img/themepark-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

1
Resources/landing-page/css/jquery-bg-slideshow-min.css vendored Normal file
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}

60
Resources/landing-page/css/jquery-bg-slideshow.css Normal file
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;
}

10175
Resources/landing-page/css/styles.css Normal file
View File

File diff suppressed because it is too large Load Diff

218
Resources/landing-page/index.html Normal file
View File

@ -0,0 +1,218 @@
<!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="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="css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery-bg-slideshow.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="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">
<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 your favorite 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">We've got what you need!</h2>
<hr class="divider light my-4" />
<p class="text-white-50 mb-4">Start Bootstrap has everything you need to get your new website up and running in no time! Choose one of our open source, free to download, and easy to use themes! No strings attached!</p>
<a class="btn btn-light btn-xl js-scroll-trigger" href="#services">Get Started!</a>
</div>
</div>
</div>
</section>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<h2 class="text-center mt-0">At Your Service</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-gem text-primary mb-4"></i>
<h3 class="h4 mb-2">Sturdy Themes</h3>
<p class="text-muted mb-0">Our themes are updated regularly to keep them bug free!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
<h3 class="h4 mb-2">Up to Date</h3>
<p class="text-muted mb-0">All dependencies are kept current to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-globe text-primary mb-4"></i>
<h3 class="h4 mb-2">Ready to Publish</h3>
<p class="text-muted mb-0">You can use this design as is, or you can make changes!</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">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/1.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/2.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/2.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/3.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/3.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/4.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/4.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/5.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/5.jpg" alt="..." />
<div class="portfolio-box-caption">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/6.jpg">
<img class="img-fluid" src="assets/img/portfolio/thumbnails/6.jpg" alt="..." />
<div class="portfolio-box-caption p-3">
<div class="project-category text-white-50">Category</div>
<div class="project-name">Project Name</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="bg-light 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>
- Company Name
</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="js/scripts.js"></script>
<script src="js/jquery-bg-slideshow.js"></script>
</body>
</html>

7
Resources/landing-page/js/jquery-bg-slideshow-min.js vendored Normal file
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);

358
Resources/landing-page/js/jquery-bg-slideshow.js vendored Normal file
View File

@ -0,0 +1,358 @@
/**
* 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',
// 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 = $(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.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;
}
$(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();
$(settings.cloned).addClass("jquery-bg-slideshow-cloned").css({
"background-image": "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");
$(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));

72
Resources/landing-page/js/scripts.js Normal file
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