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:
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;
|
||||||
|
}
|
||||||
|
}
|
327
index.html
327
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>
|
<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>
|
||||||
|
|
153
js/javascript.js
153
js/javascript.js
|
@ -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));
|
||||||
})
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue