@extends('layout')
@section('title', ' | ' . $data['numberID'] . ' | Buy')

@section('style')

<style>

* {color: #fff !important;}
body {background: #000;}
  #message1 {font-size: 4em;}
  #message2 {font-size: 4em; font-weight: bold;}
  #message3 {font-size: 4em; font-weight: bold;}
  h3 { font-size: 5em;  margin: 50px;}


  /******** Media Query for Mobile ********/

  @media only screen and (min-width: 300px) and (max-width: 800px) {
    #message1 {font-size: 1.8em; font-weight: bold;}
    #message2 {font-size: 1.8em; font-weight: bold;}
    #message3 {font-size: 2em; font-weight: bold;}
    h3 { font-size: 1.8em;  margin: 50px 50px;}



  }


</style>

@endsection



@section('content')


<button onclick="history.back()" class="x_close" type="button"><span class="sr-only">Close</span>&#9587;</button>

<div class="table_wrapper">
    <div class="table_container">

      <div id="message0" style="display: none;">
        <img style="width: 220px; margin-top: 0px; margin-right: 50px;" class="pointer" src="{{ URL::asset('/images/apple_icon_blank.png') }}">
        <img style="width: 200px; margin-top: 0px; margin-left: 50px;" class="pointer" src="{{ URL::asset('/images/android_icon_blank.png') }}">

        <h3 style="font-weight: bold;">The new way</br>to get smart</h3>
      </div>
      <!-- <h3 id="message1" style="display: none;">Buy Online</h4> -->
      <h3 id="message2" style="display: none;">Next Day Delivery</h4>
      <h3 id="message3" style="display: none;">Easy</h4>
  </div>
    </div>
</div>


@endsection

@section('script')
<script type="text/javascript">

// $('.x_close').on('click', function (e) {
//   e.preventDefault(e);
//   window.history.back();
// });

var fadeInSpeed = 500;
var fadeOutSpeed = fadeInSpeed;

//splash screen flow
$('document').ready(function(){
  $("#message2").fadeIn(fadeInSpeed, function() {
    $("#message2").delay(800).fadeOut(fadeOutSpeed, function() {
      // $("#message1").fadeIn(fadeInSpeed, function() {
      //   $("#message1").delay(800).fadeOut(fadeOutSpeed, function() {
          // $("#message0").fadeIn(fadeInSpeed, function() {
          //   $("#message0").delay(800).fadeOut(fadeOutSpeed, function() {
              $("#message3").fadeIn(fadeInSpeed);
          //   });
          // });
      //   });
      // });
    });
  });
});


</script>
@endsection