@extends('layouts.auth')

@section('title')
Pendahuluan - Aplikasi AFRIKOT
@endsection

<style>
     
       img {
         width: auto;
         height: 50%;
         position: absolute;
         bottom: 0;
         
         right:0;
         
         
         margin: 0 auto;
         
       }

@media only screen and (max-width: 400px) {
    .hide-img{
        display:none !important;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
    }
}


       @media only screen and (min-device-width : 401px) and (max-width: 600px) {
         /* For phone: */


        img {
          width: auto;
         height: 40%;
         position: absolute;
         bottom: 0;
         left: 0;
         
         margin: auto;
  }

}

@media only screen and (min-device-width : 600px) and (max-width: 992px) {
  /* For tablet: */
  img {
         width: auto;
         height: 60%;
         position: absolute;
         bottom: 0;
         right:0;        
         
         margin: auto;
         
       }


}

@media only screen and (min-width: 992px) {
  /* For desktop: */
  img {
         width: auto;
         height: 50%;
         position: absolute;
         bottom: 0;
         
         right:0;         
         
         margin: 0 auto;
         
       }



}

       </style>


@section('main-content')
<div class="container pb-4">
<div class="row">
  <div class="col-md-12">
  <h1 class="h5 mt-3  text-gray-100 font-weight-bold"><span id="blink"><i class="fa fa-circle text-success"></i></span>   AFRIKOT APP</h1>
</div>
</div>
</div>

<div class="container-fluid bg-info">

    <!-- Outer Row -->
    
          <div class="row">
          <div class="col-md-8 offset-md-2">
          <div class="card  mt-3 mb-3 bg-transparent shadow">
                <div class="card-body" style="padding-bottom:0px !important">
              <div class="text-left"  style="margin-top:0px !important">
            <p class="mt-0 mb-0 text-gray-100">Aplikasi AFRIKOT adalah aplikasi yang membantu para bunda yang sedang hamil  untuk dapat  mengidentifikasi faktor  yang beresiko dapat mengganggu masa  kehamilan.</p>
            <hr>
            <p><h1 class="h4 mb-0 text-center font-weight-bold"><span class="btn btn-danger">"Aplikasi ini dilengkapi dengan rekomendasi terpadu bagi bunda  selama menjalani proses kehamilan"</span></h1></p>
          </div>
          <div class="align-items-center justify-content-between text-right">
          <small class=" text-gray-200"><em>&copy; Milkhatun - Zulmah A - Triwahyuni - Alfi Ari FR</em></small>
          </div>
</div>
</div>
</div>
</div>
</div>

<div class="container-fluid align-items-center">
          <!-- Content Row -->
          <div class="row mt-2">
      
  
          <!-- File -->
          @guest
            <div class="col-md-8 offset-md-2 text-center">
            <a href="{{ url('auth/google') }}" style="text-decoration:none">
              <div class="bg-transparent h-100">
                
                  <div class="row">
                    <div class="col md-6">
                      	<div class="display-4 font-weight-bold" ><span class="badge badge-pill badge-warning" id="blink">Go .. <i class="fa fa-arrow-circle-right"></i></span>
                    </div>                  	
                    	
                    </div>                                    
                  </div>
                
             
               
            </div></a>
            </div>

            @else

            <div class="col-md-8 offset-md-2">
            <a href="{{ url('navigasiUtama') }}" style="text-decoration:none">
              <div class="bg-transparent h-100">
                
                  <div class="row">
                    <div class="col md-6">
                      	<div class="display-4 font-weight-bold" ><span class="badge badge-pill badge-info" id="blink">Go .. <i class="fa fa-arrow-circle-right"></i></span>
                    </div>                  	
                    	
                    </div>                                    
                  </div>
                
             
               
            </div></a>
            </div>

            @endguest

</div>
</div>

<div class="container">

  
<img class="hide-img" src="{{ asset('img/Zuliani.png') }}" rel="popover" alt="description of myimage">

</div>

<style>
        #blink {
            transition: 0.5s;
        }
    </style>


<script type="text/javascript">
        var blink = document.getElementById('blink');
        setInterval(function() {
            blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
        }, 1000);
    </script>
@endsection