feat: rework pages

This commit is contained in:
Jamie Rees 2025-03-05 10:35:40 +00:00
parent 2138c18738
commit 2e386ad794
3 changed files with 837 additions and 181 deletions

538
css/dark-style.css Normal file
View file

@ -0,0 +1,538 @@
:root {
--primary-color: #ff6f00;
--secondary-color: #1e1e1e;
--background-color: #121212;
--text-color: #ffffff;
--card-bg-color: #1d1d1d;
--accent-color: #ff9100;
--hover-color: #ff4500;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: var(--background-color);
color: var(--text-color);
line-height: 1.6;
overflow-x: hidden;
transition: opacity 0.8s ease-in;
opacity: 0;
}
body.load-done {
opacity: 1;
}
.loader {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--background-color);
z-index: 9999;
color: var(--text-color);
transition: opacity 0.5s, visibility 0.5s;
}
body.load-done .loader {
opacity: 0;
visibility: hidden;
}
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
transform: rotateZ(45deg);
}
.sk-cube {
background-color: var(--primary-color);
}
h1, h2, h3 {
font-family: 'Poppins', sans-serif;
margin-bottom: 1rem;
font-weight: 700;
}
h1 {
font-size: 2.5rem;
background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--hover-color);
}
.text-center {
text-align: center;
}
/* Header and Navigation */
header {
padding: 1rem 2rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: background-color 0.3s ease;
background-color: rgba(18, 18, 18, 0.8);
backdrop-filter: blur(10px);
}
.nav-scrolled {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.logo img {
height: 40px;
}
.nav-links {
display: flex;
gap: 2rem;
}
.nav-links a {
color: var(--text-color);
font-weight: 500;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: var(--primary-color);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* Hero Section */
.intro-container {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.intro-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: brightness(0.4);
transition: transform 0.5s ease-in-out;
transform: scale(1.05);
z-index: -2;
}
/* Add styles for the next slide element */
.intro-bg-next {
z-index: -1; /* Position above the main background */
opacity: 0;
}
.intro {
text-align: center;
z-index: 2;
padding: 2rem;
border-radius: 10px;
max-width: 700px;
backdrop-filter: blur(10px);
background-color: rgba(30, 30, 30, 0.7);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
transform: translateY(0);
transition: transform 0.5s ease-out;
}
.intro h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
}
.intro p {
font-size: 1.2rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.intro img {
max-width: 250px;
margin-bottom: 2rem;
filter: drop-shadow(0 5px 15px rgba(255, 111, 0, 0.6));
}
/* Buttons */
.button-container {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.button-primary, .button-white, .button-black {
display: inline-block;
padding: 0.8rem 1.8rem;
border-radius: 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
z-index: 1;
border: none;
cursor: pointer;
font-size: 1rem;
margin: 0.5rem;
}
.button-primary {
background-color: var(--primary-color);
color: white;
}
.button-white {
background-color: rgba(255, 255, 255, 0.9);
color: var(--secondary-color);
}
.button-black {
background-color: var(--secondary-color);
color: white;
border: 2px solid var(--primary-color);
}
.button-primary:hover, .button-white:hover, .button-black:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.button-primary:hover {
background-color: var(--hover-color);
}
.button-white:hover {
background-color: white;
}
.button-black:hover {
background-color: var(--primary-color);
}
/* Features Section */
.what-container {
padding: 6rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
background-color: var(--card-bg-color);
padding: 2rem;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: var(--primary-color);
transition: width 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.feature-card:hover::before {
width: 10px;
}
.feature-card h3 {
margin-bottom: 1rem;
color: var(--primary-color);
}
.feature-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--primary-color);
}
/* How It Works Section */
.how-container {
background-color: var(--secondary-color);
padding: 6rem 2rem;
}
.steps {
max-width: 800px;
margin: 0 auto;
}
.step {
display: flex;
margin-bottom: 3rem;
align-items: center;
position: relative;
}
.step-number {
background-color: var(--primary-color);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
margin-right: 1.5rem;
flex-shrink: 0;
}
.step-content {
flex-grow: 1;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
width: 2px;
background-color: var(--primary-color);
top: 40px;
bottom: -30px;
left: 20px;
}
/* Installation Section */
.install-container {
background-color: var(--secondary-color);
padding: 6rem 2rem;
text-align: center;
}
.install-content {
max-width: 800px;
margin: 0 auto;
}
.badges {
display: inline-block;
margin: 1rem;
transition: transform 0.3s ease;
}
.badges:hover {
transform: translateY(-5px);
}
.badges img {
height: 50px;
}
.apple-badge img {
height: 40px;
}
/* Team Section */
.madeby-container {
padding: 6rem 2rem;
max-width: 1200px;
margin: 0 auto;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.team-card {
background-color: var(--card-bg-color);
border-radius: 10px;
padding: 2rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}
.team-card:hover {
transform: translateY(-10px);
}
/* Footer */
footer {
background-color: var(--secondary-color);
padding: 2rem;
text-align: center;
}
.social-links {
margin-bottom: 1rem;
}
.social-links a {
display: inline-block;
margin: 0 10px;
font-size: 1.5rem;
color: var(--text-color);
transition: color 0.3s ease;
}
.social-links a:hover {
color: var(--primary-color);
}
.legal {
padding: 2rem;
font-size: 0.8rem;
opacity: 0.7;
}
/* Remove old elements that are not needed in the new design */
.triangle-top,
.triangle-bottom,
.intro-read-more {
display: none;
}
/* Float container for legacy support */
.float-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.left,
.right,
.center {
flex: 1 1 300px;
}
/* Animation Classes */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
gap: 1rem;
}
.intro h1 {
font-size: 2.5rem;
}
.feature-card {
padding: 1.5rem;
}
.step {
flex-direction: column;
text-align: center;
}
.step-number {
margin-right: 0;
margin-bottom: 1rem;
}
.step:not(:last-child)::after {
display: none;
}
}
@media (max-width: 480px) {
header {
padding: 1rem;
}
.nav-links {
gap: 0.5rem;
font-size: 0.9rem;
}
.intro h1 {
font-size: 2rem;
}
.intro p {
font-size: 1rem;
}
.button-primary,
.button-white,
.button-black {
padding: 0.7rem 1.4rem;
font-size: 0.9rem;
}
}

View file

@ -6,14 +6,14 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/1.12.1/simplelightbox.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/1.12.1/simplelightbox.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Krona+One" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="css/dark-style.css">
<title>Ombi</title> <title>Ombi - Media Request System</title>
</head> </head>
<body> <body>
<div class="loader"> <div class="loader">
<span>Loading images</span> <span>Loading</span>
<div class="sk-folding-cube"> <div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div> <div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div> <div class="sk-cube2 sk-cube"></div>
@ -21,174 +21,219 @@
<div class="sk-cube3 sk-cube"></div> <div class="sk-cube3 sk-cube"></div>
</div> </div>
</div> </div>
<header id="navbar">
<div class="nav-container">
<a href="#" class="logo">
<img src="img/logo-orange-small.png" alt="Ombi logo">
</a>
<div class="nav-links">
<a href="#features">Features</a>
<a href="#how">How it Works</a>
<a href="#install">Install</a>
<a href="#team">Team</a>
</div>
</div>
</header>
<div class="intro-container"> <div class="intro-container">
<preload-images hidden="hidden"> <preload-images hidden="hidden">
<img src="/img/fanart/1.jpg"> <img src="img/fanart/1.jpg">
<img src="/img/fanart/2.jpg"> <img src="img/fanart/2.jpg">
<img src="/img/fanart/3.jpg"> <img src="img/fanart/3.jpg">
<img src="/img/fanart/4.jpg"> <img src="img/fanart/4.jpg">
<img src="/img/fanart/5.jpg"> <img src="img/fanart/5.jpg">
<img src="/img/fanart/6.jpg"> <img src="img/fanart/6.jpg">
<img src="/img/fanart/7.jpg"> <img src="img/fanart/7.jpg">
<img src="/img/fanart/8.jpg"> <img src="img/fanart/8.jpg">
<img src="/img/fanart/9.jpg"> <img src="img/fanart/9.jpg">
<img src="/img/fanart/10.jpg"> <img src="img/fanart/10.jpg">
<img src="/img/fanart/11.jpg"> <img src="img/fanart/11.jpg">
<img src="/img/fanart/12.jpg"> <img src="img/fanart/12.jpg">
</preload-images> </preload-images>
<div <div
class="intro-bg" class="intro-bg"
data-slides='[ data-slides='[
"/img/fanart/1.jpg", "img/fanart/1.jpg",
"/img/fanart/2.jpg", "img/fanart/2.jpg",
"/img/fanart/3.jpg", "img/fanart/3.jpg",
"/img/fanart/4.jpg", "img/fanart/4.jpg",
"/img/fanart/5.jpg", "img/fanart/5.jpg",
"/img/fanart/6.jpg", "img/fanart/6.jpg",
"/img/fanart/7.jpg", "img/fanart/7.jpg",
"/img/fanart/8.jpg", "img/fanart/8.jpg",
"/img/fanart/9.jpg", "img/fanart/9.jpg",
"/img/fanart/10.jpg", "img/fanart/10.jpg",
"/img/fanart/11.jpg", "img/fanart/11.jpg",
"/img/fanart/12.jpg" "img/fanart/12.jpg"
]'></div> ]'></div>
<svg class="triangle-top" fill="white" width="100vw" height="25vh" preserveaspectratio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 103">
<polygon points="-0.5,-0.3 500.5,-0.3 -0.5,100"/> <div class="intro slide-up">
</svg>
<svg
class="triangle-bottom"
fill="white"
width="100vw"
height="25vh"
preserveaspectratio="none"
xmlns="http://www.w3.org/2000/svg"
;=";"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewbox="0 0 500 103">
<polygon points="501,105.3 500.5,0.7 0.5,103"/>
</svg>
<div class="intro">
<img src="img/logo-orange-small.png" alt="Ombi logo"> <img src="img/logo-orange-small.png" alt="Ombi logo">
<a class="button-white" href="https://github.com/tidusjar/Ombi/releases">Download</a> <h1>Your Media, On Demand</h1>
<a class="button-white" href="https://app.ombi.io/">Demo</a> <p>The seamless way for your Plex and Emby users to request new content. Ombi integrates with your media server and automatically manages user requests.</p>
</div> <div class="button-container">
<div class="intro-read-more"> <a class="button-primary" href="https://github.com/tidusjar/Ombi/releases">Download Now</a>
<p>more info</p> <a class="button-white" href="https://app.ombi.io/">Try Demo</a>
<a href="#main"> </div>
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="53.76" viewbox="0 0 96 53.76">
<polygon points="96 5.97 90.03 0 48 42.03 5.97 0 0 5.97 47.79 53.76 48 53.55 48.21 53.76 96 5.97"/>
</svg>
</a>
</div> </div>
</div> </div>
<main id="main">
<div class="what-container float-container"> <section id="features" class="what-container">
<div class="left text-center"> <h1 class="text-center">Powerful Media Request Management</h1>
<h1>What is Ombi?</h1> <p class="text-center">Ombi transforms how you manage your media server with these essential features:</p>
<p>
Ombi is a self-hosted web application that automatically gives your shared Plex or Emby users the ability to request content by themselves! Ombi can be linked to multiple TV Show and Movie DVR tools <div class="features-grid">
to create a seamless end-to-end experience for your users. <div class="feature-card slide-up">
</p> <i class="fas fa-user-friends feature-icon"></i>
<h3>User Management</h3>
<p>Connect to your Plex or Emby server and automatically sync users, giving them a personalized request experience.</p>
</div> </div>
<div class="right text-center">
<h1>That's great and all, but how?</h1> <div class="feature-card slide-up">
<ol> <i class="fas fa-search feature-icon"></i>
<li> <h3>Smart Search</h3>
<b>1.</b> <p>Powerful search capabilities to find TV shows and movies across multiple providers with rich metadata.</p>
User visits website and requests content </div>
</li>
<li> <div class="feature-card slide-up">
<b>2.</b> <i class="fas fa-robot feature-icon"></i>
Ombi matches request and sends to DVR app <h3>Automation</h3>
</li> <p>Seamless integration with Sonarr, Radarr, CouchPotato, SickRage, and more to automatically fulfill requests.</p>
<li> </div>
<b>3.</b>
DVR app retrieves content and pushes to Plex/Emby <div class="feature-card slide-up">
</li> <i class="fas fa-bell feature-icon"></i>
<li> <h3>Notifications</h3>
<br> <p>Customizable notifications through various channels to keep users updated on their requests.</p>
(there's also a </div>
<a href="https://app.ombi.io/">demo</a>
) <div class="feature-card slide-up">
</li> <i class="fas fa-lock feature-icon"></i>
</ol> <h3>Request Approval</h3>
<br> <p>Optional approval system for admins to manage and control what content gets added to your server.</p>
</div>
<div class="feature-card slide-up">
<i class="fas fa-mobile-alt feature-icon"></i>
<h3>Mobile Apps</h3>
<p>Native mobile applications for iOS and Android for on-the-go request management.</p>
</div> </div>
</div> </div>
<div class="screenshots-container"> </section>
<h1>Screenshots? ok.</h1>
<div class="screenshots"> <section id="how" class="how-container">
<a href="/img/screens/1.png"> <div class="install-content">
<img src="/img/screens/1-thumb.png" alt="Screenshot"> <h1 class="text-center">How Ombi Works</h1>
<div class="steps">
<div class="step fade-in">
<div class="step-number">1</div>
<div class="step-content">
<h3>User Requests Content</h3>
<p>Users browse the intuitive interface to find and request movies or TV shows they'd like to watch.</p>
</div>
</div>
<div class="step fade-in">
<div class="step-number">2</div>
<div class="step-content">
<h3>Ombi Processes Request</h3>
<p>Ombi checks if the content already exists and either notifies the user or forwards the request.</p>
</div>
</div>
<div class="step fade-in">
<div class="step-number">3</div>
<div class="step-content">
<h3>DVR Integration</h3>
<p>The request is automatically sent to your configured media management tools like Sonarr or Radarr.</p>
</div>
</div>
<div class="step fade-in">
<div class="step-number">4</div>
<div class="step-content">
<h3>Content is Added to Your Server</h3>
<p>Once the content is available, it's added to your Plex or Emby server and users are notified.</p>
</div>
</div>
</div>
</div>
</section>
<section id="install" class="install-container">
<div class="install-content">
<h1 class="text-center">Ready to Get Started?</h1>
<p class="text-center">Ombi works on Windows, macOS, Linux, Docker, and more!</p>
<div class="button-container">
<a class="button-primary" href="https://docs.ombi.app/guides/installation/">Installation Guide</a>
<a class="button-white" href="https://github.com/tidusjar/Ombi/releases">Download Latest Release</a>
</div>
<h2 class="text-center" style="margin-top: 3rem;">Mobile Apps</h2>
<p class="text-center">Take Ombi wherever you go with our mobile apps</p>
<div>
<a class="apple-badge badges" href="https://apps.apple.com/us/app/ombi/id1335260043">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us" alt="Download on the App Store">
</a> </a>
<a href="/img/screens/2.png"> <a class="google-badge badges" href="https://play.google.com/store/apps/details?id=com.tidusjar.Ombi">
<img src="/img/screens/2-thumb.png" alt="Screenshot"> <img alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png">
</a>
<a href="/img/screens/3.png">
<img src="/img/screens/3-thumb.png" alt="Screenshot">
</a> </a>
</div> </div>
</div> </div>
<div class="install-container"> </section>
<div class="center text-center">
<h1>I'm ready. How do I install it?</h1> <section id="team" class="madeby-container">
<a class="button-white" href="https://docs.ombi.app/guides/installation/">Here you go!</a> <h1 class="text-center">The Team Behind Ombi</h1>
<div class="team-grid">
<div class="team-card fade-in">
<h3>Community Support</h3>
<p>Join our active community for help, feature discussions, and more.</p>
<div class="button-container">
<a class="button-black" href="https://discord.gg/Sa7wNWb">Discord</a>
<a class="button-black" href="https://github.com/tidusjar/Ombi/issues/new">Report an issue</a>
</div>
</div> </div>
<div class="center text-center">
<h1>There's also a mobile app!</h1> <div class="team-card fade-in">
<a class="apple-badge badges" href="https://apps.apple.com/us/app/ombi/id1335260043?itscg=30200&itsct=apps_box_badge&mttnsubad=1335260043"> <h3>Support the Project</h3>
<img src="https://toolbox.marketingtools.apple.com/api/v2/badges/download-on-the-app-store/black/en-us?releaseDate=1526601600" alt="Download on the App Store" /> <p>Ombi is developed by <a href="https://www.linkedin.com/in/jamiearees">Jamie Rees</a> and <a href="https://github.com/tidusjar/Ombi/graphs/contributors">contributors</a>.</p>
</a> <div class="button-container">
<a class="google-badge badges" href='https://play.google.com/store/apps/details?id=com.tidusjar.Ombi&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'> <a class="button-black" href="https://www.paypal.me/PlexRequestsNet/25">PayPal</a>
<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/> <a class="button-black" href="https://www.patreon.com/tidusjar">Patreon</a>
</a> </div>
</div> </div>
</div> </div>
<div class="madeby-container float-container"> </section>
<div class="left text-center">
<h1>Who made this? Can I thank them?</h1> <footer>
<p> <div class="social-links">
Ombi is made by <a href="https://github.com/tidusjar/Ombi"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/jamiearees">Jamie Rees</a> <a href="https://discord.gg/Sa7wNWb"><i class="fab fa-discord"></i></a>
and <a href="https://twitter.com/tidusjar"><i class="fab fa-twitter"></i></a>
<a href="https://github.com/tidusjar/Ombi/graphs/contributors">contributors</a>. This site is made by
<a href="https://louislaureys.com">Louis</a>.
<br>
You can donate to Jamie here:
</p>
<a class="button-black" href="https://www.paypal.me/PlexRequestsNet/25">PayPal</a>
<a class="button-black" href="https://www.patreon.com/tidusjar">Patreon</a>
</div>
<div class="right text-center">
<h1>HAAAALP! I'm stuck!</h1>
<p>
There's probably someone out there who can help you.
<br>
Check Discord, or report an issue on GitHub.
</p>
<a class="button-black" href="https://discord.gg/Sa7wNWb">Discord</a>
<a class="button-black" href="https://github.com/tidusjar/Ombi/issues/new">Report an issue</a>
</div>
</div> </div>
<div class="legal text-center"> <div class="legal text-center">
<p>Apple and the Apple logo are trademarks of Apple Inc. App Store is a service mark of Apple Inc.</p> <p>Apple and the Apple logo are trademarks of Apple Inc. App Store is a service mark of Apple Inc.</p>
<p>Google Play and the Google Play logo are trademarks of Google LLC.</p> <p>Google Play and the Google Play logo are trademarks of Google LLC.</p>
</div> </div>
</main> </footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/1.12.1/simple-lightbox.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/simplelightbox/1.12.1/simple-lightbox.min.js"></script>
<script src="/js/javascript.js" charset="utf-8"></script> <script src="js/javascript.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-89270627-1"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-89270627-2"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-89270627-2"></script>
<script> <script>
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag() { function gtag() {
dataLayer.push(arguments); dataLayer.push(arguments);
} }
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'UA-89270627-2'); gtag('config', 'UA-89270627-2');
</script> </script>
</body> </body>

View file

@ -16,59 +16,132 @@
}; };
})($); })($);
// Smooth scrolling when clicking anchor // Document Ready
$('a[href*="#"]') $(document).ready(function() {
.not('[href="#"]') // Smooth scrolling when clicking anchor
.not('[href="#0"]') $('a[href*="#"]')
.click(function(event) { .not('[href="#"]')
if ( .not('[href="#0"]')
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && .click(function(event) {
location.hostname == this.hostname if (
) { location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
var target = $(this.hash); location.hostname == this.hostname
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); ) {
if (target.length) { var target = $(this.hash);
event.preventDefault(); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
$('html, body').animate({ if (target.length) {
scrollTop: target.offset().top event.preventDefault();
}, 1000, function() { $('html, body').animate({
var $target = $(target); scrollTop: target.offset().top - 70 // Adjusted for fixed header
$target.focus(); }, 800, function() {
if ($target.is(":focus")) { var $target = $(target);
return false;
} else {
$target.attr('tabindex', '-1');
$target.focus(); $target.focus();
}; if ($target.is(":focus")) {
}); return false;
} else {
$target.attr('tabindex', '-1');
$target.focus();
};
});
}
} }
} });
// Fit text for responsive headings
$("h1").fitText(1.2, {
'maxFontSize': 48
}); });
// Fit long h1 on small screen // Remove lightbox initialization
$("h1").fitText(1.2, { // var lightbox = $('.screenshots a').simpleLightbox({
'maxFontSize': 30 // nav: true,
}); // navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
// closeText: '<i class="fas fa-times"></i>',
// showCounter: false
// });
// enable screenshot lightbox // Scroll animations for elements with animation classes
var lightbox = $('.screenshots a').simpleLightbox(); function revealOnScroll() {
var scrolled = $(window).scrollTop();
var windowHeight = $(window).height();
$('.fade-in, .slide-up').each(function() {
var $this = $(this);
var offsetTop = $this.offset().top;
if (scrolled + windowHeight - 100 > offsetTop) {
$this.css({
'opacity': 1,
'transform': 'translateY(0)'
});
}
});
}
// Run once on page load
setTimeout(revealOnScroll, 100);
// Run on scroll
$(window).on('scroll', revealOnScroll);
// Navbar scroll effect
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#navbar').addClass('nav-scrolled');
} else {
$('#navbar').removeClass('nav-scrolled');
}
});
});
// only after all images have loaded // only after all images have loaded
$(window).on('load', function() { $(window).on('load', function() {
$('body').addClass('load-done'); // unfold triangles etc $('body').addClass('load-done'); // Show content once loaded
/*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
// Enhanced Background slideshow with smooth transitions
(function($) { (function($) {
'use strict'; 'use strict';
var $slides = $('[data-slides]'); var $slides = $('[data-slides]');
var images = $slides.data('slides'); var images = $slides.data('slides');
var count = images.length; var count = images.length;
var current = 0;
var nextImage = 1;
// Create a second background element for crossfade effect
var $nextSlide = $('<div class="intro-bg intro-bg-next"></div>');
$nextSlide.insertAfter($slides);
// Initial setup
$slides.css('background-image', 'url("' + images[0] + '")');
$nextSlide.css({
'background-image': 'url("' + images[1] + '")',
'opacity': 0
});
// Enhanced slideshow with crossfade
var slideshow = function() { var slideshow = function() {
$slides nextImage = (current + 1) % count;
.css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
.show(0, function() { // Set the next slide's background
setTimeout(slideshow, 5000); $nextSlide.css('background-image', 'url("' + images[nextImage] + '")');
});
// Fade in next slide
$nextSlide.animate({opacity: 1}, 1000, function() {
// Update current slide with next image (behind the scenes)
$slides.css('background-image', 'url("' + images[nextImage] + '")');
// Reset next slide opacity
$nextSlide.css('opacity', 0);
// Update current index
current = nextImage;
// Queue next slide transition
setTimeout(slideshow, 5000);
});
}; };
slideshow();
// Start the slideshow after a delay
setTimeout(slideshow, 5000);
}(jQuery)); }(jQuery));
}) });