diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..d108f117e --- /dev/null +++ b/css/style.css @@ -0,0 +1,403 @@ +@-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; +} + +.madeby-container { + padding: 150px 0; + color: #000; + background: #fff; +} + +/* 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 */ diff --git a/img/fanart/1.jpg b/img/fanart/1.jpg new file mode 100644 index 000000000..7320f565d Binary files /dev/null and b/img/fanart/1.jpg differ diff --git a/img/fanart/10.jpg b/img/fanart/10.jpg new file mode 100644 index 000000000..c00723109 Binary files /dev/null and b/img/fanart/10.jpg differ diff --git a/img/fanart/11.jpg b/img/fanart/11.jpg new file mode 100644 index 000000000..785e8e7d9 Binary files /dev/null and b/img/fanart/11.jpg differ diff --git a/img/fanart/12.jpg b/img/fanart/12.jpg new file mode 100644 index 000000000..5a10c45da Binary files /dev/null and b/img/fanart/12.jpg differ diff --git a/img/fanart/2.jpg b/img/fanart/2.jpg new file mode 100644 index 000000000..d65cd23b0 Binary files /dev/null and b/img/fanart/2.jpg differ diff --git a/img/fanart/3.jpg b/img/fanart/3.jpg new file mode 100644 index 000000000..41ec781ff Binary files /dev/null and b/img/fanart/3.jpg differ diff --git a/img/fanart/4.jpg b/img/fanart/4.jpg new file mode 100644 index 000000000..713949ee8 Binary files /dev/null and b/img/fanart/4.jpg differ diff --git a/img/fanart/5.jpg b/img/fanart/5.jpg new file mode 100644 index 000000000..bb66a3689 Binary files /dev/null and b/img/fanart/5.jpg differ diff --git a/img/fanart/6.jpg b/img/fanart/6.jpg new file mode 100644 index 000000000..fbfbc3260 Binary files /dev/null and b/img/fanart/6.jpg differ diff --git a/img/fanart/7.jpg b/img/fanart/7.jpg new file mode 100644 index 000000000..6b7083293 Binary files /dev/null and b/img/fanart/7.jpg differ diff --git a/img/fanart/8.jpg b/img/fanart/8.jpg new file mode 100644 index 000000000..02207c25d Binary files /dev/null and b/img/fanart/8.jpg differ diff --git a/img/fanart/9.jpg b/img/fanart/9.jpg new file mode 100644 index 000000000..5935b3490 Binary files /dev/null and b/img/fanart/9.jpg differ diff --git a/img/logo-orange-small.png b/img/logo-orange-small.png new file mode 100644 index 000000000..b11a8c55a Binary files /dev/null and b/img/logo-orange-small.png differ diff --git a/img/screens/1-thumb.png b/img/screens/1-thumb.png new file mode 100644 index 000000000..dcf686e98 Binary files /dev/null and b/img/screens/1-thumb.png differ diff --git a/img/screens/1.png b/img/screens/1.png new file mode 100644 index 000000000..95538cf5f Binary files /dev/null and b/img/screens/1.png differ diff --git a/img/screens/2-thumb.png b/img/screens/2-thumb.png new file mode 100644 index 000000000..49dfb1c05 Binary files /dev/null and b/img/screens/2-thumb.png differ diff --git a/img/screens/2.png b/img/screens/2.png new file mode 100644 index 000000000..c01eaec91 Binary files /dev/null and b/img/screens/2.png differ diff --git a/img/screens/3-thumb.png b/img/screens/3-thumb.png new file mode 100644 index 000000000..9079e9b1a Binary files /dev/null and b/img/screens/3-thumb.png differ diff --git a/img/screens/3.png b/img/screens/3.png new file mode 100644 index 000000000..4018b6353 Binary files /dev/null and b/img/screens/3.png differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..0e690445d --- /dev/null +++ b/index.html @@ -0,0 +1,168 @@ + + + + + + + + + + + + Ombi + + +
+ Loading images +
+
+
+
+
+
+
+
+ +
+ + + + + + +
+ Ombi logo + Download + Demo +
+
+

more info

+ + + + + +
+
+
+
+
+

What is Ombi?

+

+ 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 + to create a seamless end-to-end experience for your users. +

+
+
+

That's great and all, but how?

+
    +
  1. + 1. + User visits website and requests content +
    2. +
  2. + 2. + Ombi matches request and sends to DVR app +
    3. +
  3. + 3. + DVR app retreives content and pushes to Plex/Emby +
    4. +
  4. +
    + (there's also a + demo) +
    5. +
+
+
+
+
+

Screenshots? ok.

+
+ + Screenshot + + + Screenshot + + + Screenshot + +
+
+
+
+

I'm ready. How do I install it?

+ Here you go! +
+
+
+
+

Who made this? Can I thank them?

+

+ Ombi is made by + Jamie Rees + and + contributors. This site is made by + Louis. +
+ You can donate to Jamie here: +

+ PayPal + Patreon +
+
+

HAAAALP! I'm stuck!

+

+ There's probably someone out there who can help you. +
+ Check Discord, or report an issue on GitHub. +

+ Discord + Report an issue +
+
+
+ + + + + \ No newline at end of file diff --git a/js/javascript.js b/js/javascript.js new file mode 100644 index 000000000..f52ab9a7c --- /dev/null +++ b/js/javascript.js @@ -0,0 +1,74 @@ +(function($) { + $.fn.fitText = function(kompressor, options) { + var compressor = kompressor || 1, + settings = $.extend({ + 'minFontSize': Number.NEGATIVE_INFINITY, + 'maxFontSize': Number.POSITIVE_INFINITY + }, options); + return this.each(function() { + var $this = $(this); + var resizer = function() { + $this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); + }; + resizer(); + $(window).on('resize.fittext orientationchange.fittext', resizer); + }); + }; +})($); + +// Smooth scrolling when clicking anchor +$('a[href*="#"]') + .not('[href="#"]') + .not('[href="#0"]') + .click(function(event) { + if ( + location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && + location.hostname == this.hostname + ) { + var target = $(this.hash); + target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); + if (target.length) { + event.preventDefault(); + $('html, body').animate({ + scrollTop: target.offset().top + }, 1000, function() { + var $target = $(target); + $target.focus(); + if ($target.is(":focus")) { + return false; + } else { + $target.attr('tabindex', '-1'); + $target.focus(); + }; + }); + } + } + }); + +// Fit long h1 on small screen +$("h1").fitText(1.2, { + 'maxFontSize': 30 +}); + +// enable screenshot lightbox +var lightbox = $('.screenshots a').simpleLightbox(); + +// only after all images have loaded +$(window).on('load', function() { + $('body').addClass('load-done'); // unfold triangles etc + /*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */ + (function($) { + 'use strict'; + var $slides = $('[data-slides]'); + var images = $slides.data('slides'); + var count = images.length; + var slideshow = function() { + $slides + .css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")') + .show(0, function() { + setTimeout(slideshow, 5000); + }); + }; + slideshow(); + }(jQuery)); +})