{% extends 'base.html' %}

{% block title %}{{ title }}{% endblock %}

{% block content %}

<div class="md:flex content-start bg-white px-12 md:px-20 py-10">
  <div class="md:w-1/2 xl:py-40 lg:py-20 md:py-20 lg:pr-20">
    <!--<h1 class="text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl font-bold text-gray-800 leading-tight">Website monitoring as simple as posting on Instagram!</h1>-->
    <h1 class="text-3xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-5xl font-bold text-gray-800 leading-tight">Website monitoring that saves your time!</h1>
    <p class="py-4 md:py-8 font-light text-xl md:text-xl text-left text-gray-600 pr-16 md:pr-0">Getting real time data, insights and alerts about your website anywhere and anytime immediatly through SMS and E-Mail.</p>
    <div>
      <!-- Email Octopus -->
      <form method="post"
        action="https://emailoctopus.com/lists/21c15f58-e49e-11e9-be00-06b4694bee2a/members/embedded/1.3/add"
        class="email-octopus-form"
        data-sitekey="6LdYsmsUAAAAAPXVTt-ovRsPIJ_IVhvYBBhGvRV6">
      <div class="container">
          <div class="block lg:inline-block email-octopus-form-row">
              <input class="w-64 py-2 px-4 rounded border focus:outline-none focus:border-orange-500 text-orange-500" id="field_0" name="field_0" type="email" placeholder="Your Email">
          </div>
          <div class="block hidden email-octopus-form-row-hp" aria-hidden="true">
              <!-- Do not remove this field, otherwise you risk bot sign-ups -->
              <input type="text" name="hp21c15f58-e49e-11e9-be00-06b4694bee2a"
                 tabindex="-1"
                 autocomplete="nope">
          </div>
          <div class="block lg:inline-block email-octopus-form-row-subscribe">
              <input type="hidden"
                  name="successRedirectUrl"
                  value="{{ url_for('main.thankyou') }}">
              <button class="text-xl shadow-md font-medium bg-orange-500 hover:bg-orange-700 text-white sm:mt-2 md:mt-0 py-2 px-4 rounded">Tell me when it's available!</button>
          </div>
      </div>
      </form>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
      <script src="https://emailoctopus.com/bundles/emailoctopuslist/js/1.3/recaptcha.js"></script>
      <script src="https://emailoctopus.com/bundles/emailoctopuslist/js/1.3/formEmbed.js"></script>
      <!-- Email Octopus End -->
    </div>
  </div>
  <div class="w-1/3 mt-8 block justify-center items-center mx-auto flex md:visible lg:visible xl:visible">
    <img class="min-w-1/2 xl:max-w-3xl lg:max-w-lg md:max-w-sm md:pl-10 md:pr-20 lg:pr-0" src="/static/img/undraw_google.svg" alt="">
  </div>
</div>
<div class="bg-gray-200 p-10 text-gray-900">
  <div>
    <h2 class="pb-10 text-center text-gray-800 text-3xl font-bold">Monitor your website without a lot of work</h2>
    <div class="container justify-center items-center mx-auto flex pb-20">
      <div class="block md:inline-block bg-white rounded shadow p-4 m-2">
        <img class="object-fill" src="static/img/undraw_user_flow_vr6w.svg" alt="">
        <h4 class="font-bold text-center pt-20">Adding your website in a single and simple workflow</h4>
        <p class="pt-2 text-center text-gray-700 font-normal">Setup monitoring for your website in one simple workflow that takes no time.</p>
      </div>
      <div class="block md:inline-block bg-white rounded shadow p-4 m-2">
        <img src="static/img/undraw_preferences_uuo2.svg" alt="">
        <h4 class="font-bold text-center pt-20">Customize, how and when you want to be informed</h4>
        <p class="pt-2 text-center text-gray-700 font-normal">Get the necessary information about your website only when needed and how you want.</p>
      </div>
      <div class="block md:inline-block bg-white rounded shadow p-4 m-2">
        <img src="static/img/undraw_site_stats_l57q.svg" alt="">
        <h4 class="font-bold text-center pt-20">Inform your users trough status pages</h4>
        <p class="pt-2 text-center text-gray-700 font-normal">A status page informs your users at any time.</p>
      </div>
    </div>
  </div>
</div>

<!--- ### JavaScript ### -->
<script>
    document.getElementById('button-addon2').addEventListener('click', myFunction);

    function myFunction(){
      $("#loadingmask").fadeTo(2, 0.3);
    }
</script>

<script>
  function checkHost(){
    var h = document.getElementById('url').value.toLowerCase();
    h = h.startsWith("http://")? h.substring(7): h
    h = h.startsWith("https://") ? h.substring(8) : h
    h = h.indexOf("/") > 0 ? h.substring(0,h.indexOf("/")) : h
    var domain = '/' + h;
    console.log(domain)
    window.location = h;
    console.log(window.location)
    return false;
  };
</script>



{% endblock %}