mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 12:59:39 -07:00
fix
This commit is contained in:
Jamie Rees
parent
2e386ad794
commit
5d3ec5889c
2 changed files with 7 additions and 431 deletions
424
css/style.css
424
css/style.css
|
|
@ -1,424 +0,0 @@
|
||||||
@-webkit-keyframes bounce {
|
|
||||||
25% {
|
|
||||||
-webkit-transform: translateY(-2.5px);
|
|
||||||
transform: translateY(-2.5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
-webkit-transform: translateY(2.5px);
|
|
||||||
transform: translateY(2.5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
-webkit-transform: translateY(-2.5px);
|
|
||||||
transform: translateY(-2.5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
25% {
|
|
||||||
-webkit-transform: translateY(-2.5px);
|
|
||||||
transform: translateY(-2.5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
-webkit-transform: translateY(2.5px);
|
|
||||||
transform: translateY(2.5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
75% {
|
|
||||||
-webkit-transform: translateY(-2.5px);
|
|
||||||
transform: translateY(-2.5px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Desktop only shit */
|
|
||||||
@media screen and (min-width: 760px) {
|
|
||||||
.triangle-bottom {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.float-container {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screenshots a {
|
|
||||||
display: table-cell;
|
|
||||||
padding: 0 .5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: Roboto, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
margin-top: 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
b {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 600;
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-transition: .2s linear border-bottom;
|
|
||||||
transition: .2s linear border-bottom;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-family: "Krona One", sans-serif;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol {
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfloats {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left,
|
|
||||||
.right,
|
|
||||||
.center {
|
|
||||||
padding: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left p,
|
|
||||||
.right p {
|
|
||||||
max-width: 550px;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-black,
|
|
||||||
.button-white {
|
|
||||||
font-family: "Krona One", sans-serif;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 5px;
|
|
||||||
padding: 15px 60px;
|
|
||||||
-webkit-transition: all .3s ease-in-out;
|
|
||||||
transition: all .3s ease-in-out;
|
|
||||||
text-decoration: none;
|
|
||||||
color: #fff;
|
|
||||||
border: 0 solid #000;
|
|
||||||
border-radius: 40px;
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-white {
|
|
||||||
color: #000;
|
|
||||||
border: 0 solid #fff;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-black:hover,
|
|
||||||
.button-white:hover {
|
|
||||||
-webkit-transform: scale(1.1);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-container {
|
|
||||||
width: 100vw;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.triangle-bottom,
|
|
||||||
.triangle-top {
|
|
||||||
position: absolute;
|
|
||||||
display: block;
|
|
||||||
width: 100vw;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 110vh;
|
|
||||||
-webkit-transition: 1s ease-in-out height;
|
|
||||||
transition: 1s ease-in-out height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.triangle-top {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.triangle-bottom {
|
|
||||||
bottom: -1px; /* fucking 1px bar on chrome mobile without this */
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-done .triangle-bottom,
|
|
||||||
.load-done .triangle-top {
|
|
||||||
height: 25vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-read-more {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 50%;
|
|
||||||
-webkit-transform: translateX(-50%);
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-read-more p {
|
|
||||||
margin-bottom: -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-read-more svg {
|
|
||||||
display: block;
|
|
||||||
width: 35px;
|
|
||||||
margin: auto;
|
|
||||||
-webkit-transform: translateY(-2.5px);
|
|
||||||
transform: translateY(-2.5px);
|
|
||||||
-webkit-animation: bounce 2s ease-in-out infinite;
|
|
||||||
animation: bounce 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro {
|
|
||||||
font-size: 23px;
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
max-width: 500px;
|
|
||||||
margin: auto;
|
|
||||||
-webkit-transform: translate(-50%, -50%);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro img {
|
|
||||||
max-width: 90vw;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro p {
|
|
||||||
margin: 20px 0 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro-bg {
|
|
||||||
position: absolute; /* for mobile chrome and ios compatibility */
|
|
||||||
bottom: 0; /* for mobile chrome and ios compatibility */
|
|
||||||
width: 100vw;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-slides] {
|
|
||||||
-webkit-transition: background-image 1s linear;
|
|
||||||
transition: background-image 1s linear;
|
|
||||||
background-image: url("/img/fanart/3.jpg"); /* Default image. */
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center top;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.what-container {
|
|
||||||
width: 100%;
|
|
||||||
padding-bottom: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screenshots-container {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screenshots {
|
|
||||||
display: table;
|
|
||||||
max-width: 1000px;
|
|
||||||
margin: 0 auto 75px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sl-overlay {
|
|
||||||
opacity: .8;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sl-wrapper .sl-navigation button,
|
|
||||||
.sl-wrapper .sl-close,
|
|
||||||
.sl-wrapper .sl-counter {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screenshots img {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.install-container {
|
|
||||||
padding: 150px 0;
|
|
||||||
color: #fff;
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badges {
|
|
||||||
display: inline-block;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badges img {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.apple-badge img {
|
|
||||||
width: 88%;
|
|
||||||
margin: 6%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.madeby-container {
|
|
||||||
padding: 150px 0;
|
|
||||||
color: #000;
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.legal {
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 50px 0 30px 0;
|
|
||||||
color: #a0a0a0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Fancy css loader */
|
|
||||||
.loader {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
margin-top: 40px;
|
|
||||||
-webkit-transition: .3s ease-in-out opacity;
|
|
||||||
transition: .3s ease-in-out opacity;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.load-done .loader {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube {
|
|
||||||
position: relative;
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
margin: 25px auto 0;
|
|
||||||
-webkit-transform: rotateZ(45deg);
|
|
||||||
transform: rotateZ(45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube {
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
height: 50%;
|
|
||||||
-webkit-transform: scale(1.1);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube:before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
content: "";
|
|
||||||
-webkit-transform-origin: 100% 100%;
|
|
||||||
transform-origin: 100% 100%;
|
|
||||||
-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
|
|
||||||
animation: sk-foldCubeAngle 2.4s infinite linear both;
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube2 {
|
|
||||||
-webkit-transform: scale(1.1) rotateZ(90deg);
|
|
||||||
transform: scale(1.1) rotateZ(90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube3 {
|
|
||||||
-webkit-transform: scale(1.1) rotateZ(180deg);
|
|
||||||
transform: scale(1.1) rotateZ(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube4 {
|
|
||||||
-webkit-transform: scale(1.1) rotateZ(270deg);
|
|
||||||
transform: scale(1.1) rotateZ(270deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube2:before {
|
|
||||||
-webkit-animation-delay: .3s;
|
|
||||||
animation-delay: .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube3:before {
|
|
||||||
-webkit-animation-delay: .6s;
|
|
||||||
animation-delay: .6s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sk-folding-cube .sk-cube4:before {
|
|
||||||
-webkit-animation-delay: .9s;
|
|
||||||
animation-delay: .9s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes sk-foldCubeAngle {
|
|
||||||
0%,
|
|
||||||
10% {
|
|
||||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
|
||||||
transform: perspective(140px) rotateX(-180deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
25%,
|
|
||||||
75% {
|
|
||||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
|
||||||
transform: perspective(140px) rotateX(0deg);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
90%,
|
|
||||||
100% {
|
|
||||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
|
||||||
transform: perspective(140px) rotateY(180deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes sk-foldCubeAngle {
|
|
||||||
0%,
|
|
||||||
10% {
|
|
||||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
|
||||||
transform: perspective(140px) rotateX(-180deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
25%,
|
|
||||||
75% {
|
|
||||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
|
||||||
transform: perspective(140px) rotateX(0deg);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
90%,
|
|
||||||
100% {
|
|
||||||
-webkit-transform: perspective(140px) rotateY(180deg);
|
|
||||||
transform: perspective(140px) rotateY(180deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
} /* END Fancy css loader */
|
|
||||||
14
index.html
14
index.html
|
|
@ -68,7 +68,7 @@
|
||||||
"img/fanart/12.jpg"
|
"img/fanart/12.jpg"
|
||||||
]'></div>
|
]'></div>
|
||||||
|
|
||||||
<div class="intro slide-up">
|
<div class="intro">
|
||||||
<img src="img/logo-orange-small.png" alt="Ombi logo">
|
<img src="img/logo-orange-small.png" alt="Ombi logo">
|
||||||
<h1>Your Media, On Demand</h1>
|
<h1>Your Media, On Demand</h1>
|
||||||
<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>
|
<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>
|
||||||
|
|
@ -84,37 +84,37 @@
|
||||||
<p class="text-center">Ombi transforms how you manage your media server with these essential features:</p>
|
<p class="text-center">Ombi transforms how you manage your media server with these essential features:</p>
|
||||||
|
|
||||||
<div class="features-grid">
|
<div class="features-grid">
|
||||||
<div class="feature-card slide-up">
|
<div class="feature-card ">
|
||||||
<i class="fas fa-user-friends feature-icon"></i>
|
<i class="fas fa-user-friends feature-icon"></i>
|
||||||
<h3>User Management</h3>
|
<h3>User Management</h3>
|
||||||
<p>Connect to your Plex or Emby server and automatically sync users, giving them a personalized request experience.</p>
|
<p>Connect to your Plex or Emby server and automatically sync users, giving them a personalized request experience.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-card slide-up">
|
<div class="feature-card ">
|
||||||
<i class="fas fa-search feature-icon"></i>
|
<i class="fas fa-search feature-icon"></i>
|
||||||
<h3>Smart Search</h3>
|
<h3>Smart Search</h3>
|
||||||
<p>Powerful search capabilities to find TV shows and movies across multiple providers with rich metadata.</p>
|
<p>Powerful search capabilities to find TV shows and movies across multiple providers with rich metadata.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-card slide-up">
|
<div class="feature-card ">
|
||||||
<i class="fas fa-robot feature-icon"></i>
|
<i class="fas fa-robot feature-icon"></i>
|
||||||
<h3>Automation</h3>
|
<h3>Automation</h3>
|
||||||
<p>Seamless integration with Sonarr, Radarr, CouchPotato, SickRage, and more to automatically fulfill requests.</p>
|
<p>Seamless integration with Sonarr, Radarr, CouchPotato, SickRage, and more to automatically fulfill requests.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-card slide-up">
|
<div class="feature-card ">
|
||||||
<i class="fas fa-bell feature-icon"></i>
|
<i class="fas fa-bell feature-icon"></i>
|
||||||
<h3>Notifications</h3>
|
<h3>Notifications</h3>
|
||||||
<p>Customizable notifications through various channels to keep users updated on their requests.</p>
|
<p>Customizable notifications through various channels to keep users updated on their requests.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-card slide-up">
|
<div class="feature-card ">
|
||||||
<i class="fas fa-lock feature-icon"></i>
|
<i class="fas fa-lock feature-icon"></i>
|
||||||
<h3>Request Approval</h3>
|
<h3>Request Approval</h3>
|
||||||
<p>Optional approval system for admins to manage and control what content gets added to your server.</p>
|
<p>Optional approval system for admins to manage and control what content gets added to your server.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-card slide-up">
|
<div class="feature-card ">
|
||||||
<i class="fas fa-mobile-alt feature-icon"></i>
|
<i class="fas fa-mobile-alt feature-icon"></i>
|
||||||
<h3>Mobile Apps</h3>
|
<h3>Mobile Apps</h3>
|
||||||
<p>Native mobile applications for iOS and Android for on-the-go request management.</p>
|
<p>Native mobile applications for iOS and Android for on-the-go request management.</p>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue