mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-07-08 06:00:50 -07:00
feat: rework pages
This commit is contained in:
Jamie Rees
parent
2138c18738
commit
2e386ad794
3 changed files with 837 additions and 181 deletions
538
css/dark-style.css
Normal file
538
css/dark-style.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
335
index.html
335
index.html
|
|
@ -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 class="button-container">
|
||||||
|
<a class="button-primary" href="https://github.com/tidusjar/Ombi/releases">Download Now</a>
|
||||||
|
<a class="button-white" href="https://app.ombi.io/">Try Demo</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="intro-read-more">
|
</div>
|
||||||
<p>more info</p>
|
</div>
|
||||||
<a href="#main">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="53.76" viewbox="0 0 96 53.76">
|
<section id="features" class="what-container">
|
||||||
<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"/>
|
<h1 class="text-center">Powerful Media Request Management</h1>
|
||||||
</svg>
|
<p class="text-center">Ombi transforms how you manage your media server with these essential features:</p>
|
||||||
|
|
||||||
|
<div class="features-grid">
|
||||||
|
<div class="feature-card slide-up">
|
||||||
|
<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 class="feature-card slide-up">
|
||||||
|
<i class="fas fa-search feature-icon"></i>
|
||||||
|
<h3>Smart Search</h3>
|
||||||
|
<p>Powerful search capabilities to find TV shows and movies across multiple providers with rich metadata.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card slide-up">
|
||||||
|
<i class="fas fa-robot feature-icon"></i>
|
||||||
|
<h3>Automation</h3>
|
||||||
|
<p>Seamless integration with Sonarr, Radarr, CouchPotato, SickRage, and more to automatically fulfill requests.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card slide-up">
|
||||||
|
<i class="fas fa-bell feature-icon"></i>
|
||||||
|
<h3>Notifications</h3>
|
||||||
|
<p>Customizable notifications through various channels to keep users updated on their requests.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="feature-card slide-up">
|
||||||
|
<i class="fas fa-lock feature-icon"></i>
|
||||||
|
<h3>Request Approval</h3>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="how" class="how-container">
|
||||||
|
<div class="install-content">
|
||||||
|
<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 class="google-badge badges" href="https://play.google.com/store/apps/details?id=com.tidusjar.Ombi">
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<main id="main">
|
</section>
|
||||||
<div class="what-container float-container">
|
|
||||||
<div class="left text-center">
|
<section id="team" class="madeby-container">
|
||||||
<h1>What is Ombi?</h1>
|
<h1 class="text-center">The Team Behind Ombi</h1>
|
||||||
<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="team-grid">
|
||||||
to create a seamless end-to-end experience for your users.
|
<div class="team-card fade-in">
|
||||||
</p>
|
<h3>Community Support</h3>
|
||||||
</div>
|
<p>Join our active community for help, feature discussions, and more.</p>
|
||||||
<div class="right text-center">
|
<div class="button-container">
|
||||||
<h1>That's great and all, but how?</h1>
|
|
||||||
<ol>
|
|
||||||
<li>
|
|
||||||
<b>1.</b>
|
|
||||||
User visits website and requests content
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>2.</b>
|
|
||||||
Ombi matches request and sends to DVR app
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<b>3.</b>
|
|
||||||
DVR app retrieves content and pushes to Plex/Emby
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<br>
|
|
||||||
(there's also a
|
|
||||||
<a href="https://app.ombi.io/">demo</a>
|
|
||||||
)
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="screenshots-container">
|
|
||||||
<h1>Screenshots? ok.</h1>
|
|
||||||
<div class="screenshots">
|
|
||||||
<a href="/img/screens/1.png">
|
|
||||||
<img src="/img/screens/1-thumb.png" alt="Screenshot">
|
|
||||||
</a>
|
|
||||||
<a href="/img/screens/2.png">
|
|
||||||
<img src="/img/screens/2-thumb.png" alt="Screenshot">
|
|
||||||
</a>
|
|
||||||
<a href="/img/screens/3.png">
|
|
||||||
<img src="/img/screens/3-thumb.png" alt="Screenshot">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="install-container">
|
|
||||||
<div class="center text-center">
|
|
||||||
<h1>I'm ready. How do I install it?</h1>
|
|
||||||
<a class="button-white" href="https://docs.ombi.app/guides/installation/">Here you go!</a>
|
|
||||||
</div>
|
|
||||||
<div class="center text-center">
|
|
||||||
<h1>There's also a mobile app!</h1>
|
|
||||||
<a class="apple-badge badges" href="https://apps.apple.com/us/app/ombi/id1335260043?itscg=30200&itsct=apps_box_badge&mttnsubad=1335260043">
|
|
||||||
<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" />
|
|
||||||
</a>
|
|
||||||
<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'>
|
|
||||||
<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="madeby-container float-container">
|
|
||||||
<div class="left text-center">
|
|
||||||
<h1>Who made this? Can I thank them?</h1>
|
|
||||||
<p>
|
|
||||||
Ombi is made by
|
|
||||||
<a href="https://www.linkedin.com/in/jamiearees">Jamie Rees</a>
|
|
||||||
and
|
|
||||||
<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://discord.gg/Sa7wNWb">Discord</a>
|
||||||
<a class="button-black" href="https://github.com/tidusjar/Ombi/issues/new">Report an issue</a>
|
<a class="button-black" href="https://github.com/tidusjar/Ombi/issues/new">Report an issue</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="team-card fade-in">
|
||||||
|
<h3>Support the Project</h3>
|
||||||
|
<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>
|
||||||
|
<div class="button-container">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="https://github.com/tidusjar/Ombi"><i class="fab fa-github"></i></a>
|
||||||
|
<a href="https://discord.gg/Sa7wNWb"><i class="fab fa-discord"></i></a>
|
||||||
|
<a href="https://twitter.com/tidusjar"><i class="fab fa-twitter"></i></a>
|
||||||
|
</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>
|
||||||
|
|
|
||||||
107
js/javascript.js
107
js/javascript.js
|
|
@ -16,8 +16,10 @@
|
||||||
};
|
};
|
||||||
})($);
|
})($);
|
||||||
|
|
||||||
// Smooth scrolling when clicking anchor
|
// Document Ready
|
||||||
$('a[href*="#"]')
|
$(document).ready(function() {
|
||||||
|
// Smooth scrolling when clicking anchor
|
||||||
|
$('a[href*="#"]')
|
||||||
.not('[href="#"]')
|
.not('[href="#"]')
|
||||||
.not('[href="#0"]')
|
.not('[href="#0"]')
|
||||||
.click(function(event) {
|
.click(function(event) {
|
||||||
|
|
@ -30,8 +32,8 @@ $('a[href*="#"]')
|
||||||
if (target.length) {
|
if (target.length) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$('html, body').animate({
|
$('html, body').animate({
|
||||||
scrollTop: target.offset().top
|
scrollTop: target.offset().top - 70 // Adjusted for fixed header
|
||||||
}, 1000, function() {
|
}, 800, function() {
|
||||||
var $target = $(target);
|
var $target = $(target);
|
||||||
$target.focus();
|
$target.focus();
|
||||||
if ($target.is(":focus")) {
|
if ($target.is(":focus")) {
|
||||||
|
|
@ -45,30 +47,101 @@ $('a[href*="#"]')
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Fit long h1 on small screen
|
// Fit text for responsive headings
|
||||||
$("h1").fitText(1.2, {
|
$("h1").fitText(1.2, {
|
||||||
'maxFontSize': 30
|
'maxFontSize': 48
|
||||||
});
|
});
|
||||||
|
|
||||||
// enable screenshot lightbox
|
// Remove lightbox initialization
|
||||||
var lightbox = $('.screenshots a').simpleLightbox();
|
// var lightbox = $('.screenshots a').simpleLightbox({
|
||||||
|
// 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
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Scroll animations for elements with animation classes
|
||||||
|
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
|
||||||
|
$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);
|
setTimeout(slideshow, 5000);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
slideshow();
|
|
||||||
|
// Start the slideshow after a delay
|
||||||
|
setTimeout(slideshow, 5000);
|
||||||
}(jQuery));
|
}(jQuery));
|
||||||
})
|
});
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue