First commit to new site

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 */

index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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/simplelightbox/1.12.1/simplelightbox.min.css"/>
+    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Krona+One" rel="stylesheet">
+    <link rel="stylesheet" href="/css/style.css">
+    <title>Ombi</title>
+  </head>
+  <body>
+    <div class="loader">
+      <span>Loading images</span>
+      <div class="sk-folding-cube">
+        <div class="sk-cube1 sk-cube"></div>
+        <div class="sk-cube2 sk-cube"></div>
+        <div class="sk-cube4 sk-cube"></div>
+        <div class="sk-cube3 sk-cube"></div>
+      </div>
+    </div>
+    <div class="intro-container">
+      <preload-images hidden="hidden">
+        <img src="/img/fanart/1.jpg">
+        <img src="/img/fanart/2.jpg">
+        <img src="/img/fanart/3.jpg">
+        <img src="/img/fanart/4.jpg">
+        <img src="/img/fanart/5.jpg">
+        <img src="/img/fanart/6.jpg">
+        <img src="/img/fanart/7.jpg">
+        <img src="/img/fanart/8.jpg">
+        <img src="/img/fanart/9.jpg">
+        <img src="/img/fanart/10.jpg">
+        <img src="/img/fanart/11.jpg">
+        <img src="/img/fanart/12.jpg">
+      </preload-images>
+      <div
+        class="intro-bg"
+        data-slides='[
+          "/img/fanart/1.jpg",
+          "/img/fanart/2.jpg",
+          "/img/fanart/3.jpg",
+          "/img/fanart/4.jpg",
+          "/img/fanart/5.jpg",
+          "/img/fanart/6.jpg",
+          "/img/fanart/7.jpg",
+          "/img/fanart/8.jpg",
+          "/img/fanart/9.jpg",
+          "/img/fanart/10.jpg",
+          "/img/fanart/11.jpg",
+          "/img/fanart/12.jpg"
+      ]'></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"/>
+      </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">
+        <a class="button-white" href="https://github.com/tidusjar/Ombi">Download</a>
+        <a class="button-white" href="http://google.com">Demo</a>
+      </div>
+      <div class="intro-read-more">
+        <p>more info</p>
+        <a href="#main">
+          <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>
+    <main id="main">
+      <div class="what-container float-container">
+        <div class="left text-center">
+          <h1>What is 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
+            to create a seamless end-to-end experience for your users.
+          </p>
+        </div>
+        <div class="right text-center">
+          <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 retreives content and pushes to Plex/Emby
+            </li>
+            <li>
+              <br>
+              (there's also a
+              <a href="https://google.com/">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://github.com/tidusjar/Ombi/wiki/Installation">Here you go!</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/KxYZ64w">Discord</a>
+          <a class="button-black" href="https://github.com/tidusjar/Ombi/issues/new">Report an issue</a>
+        </div>
+      </div>
+    </main>
+    <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/simplelightbox/1.12.1/simple-lightbox.min.js"></script>
+    <script src="/js/javascript.js" charset="utf-8"></script>
+  </body>
+</html>

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));
+})