mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 21:03:17 -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"
|
||||
]'></div>
|
||||
|
||||
<div class="intro slide-up">
|
||||
<div class="intro">
|
||||
<img src="img/logo-orange-small.png" alt="Ombi logo">
|
||||
<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>
|
||||
|
|
@ -84,37 +84,37 @@
|
|||
<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">
|
||||
<div class="feature-card ">
|
||||
<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">
|
||||
<div class="feature-card ">
|
||||
<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">
|
||||
<div class="feature-card ">
|
||||
<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">
|
||||
<div class="feature-card ">
|
||||
<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">
|
||||
<div class="feature-card ">
|
||||
<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">
|
||||
<div class="feature-card ">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue