<?php
include "config/MainFunction.php";
$angels = $use->angels();
$base_url = $use->base_url();
?>
<!doctype html>
<html lang="en">

   <head>

      
    <!-- Global site tag (gtag.js) - Google Analytics -->
	<!--<script async src="https://www.googletagmanager.com/gtag/js?id=G-59EZVSJE3F"></script>
	<script>
	  window.dataLayer = window.dataLayer || [];
	  function gtag(){dataLayer.push(arguments);}
	  gtag('js', new Date());

	  gtag('config', 'G-59EZVSJE3F');
	</script>-->
	
      <!-- Required meta tags -->

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="shortcut icon" href="<?php echo $base_url;?>front-assets/images/astrologo_fav.png" type="image/x-icon" />   

      <!-- Bootstrap CSS -->

      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

      <link rel="stylesheet" href="<?php echo $base_url?>oracle-card/css/new-style.css?<?php echo time();?>">

      <link rel="stylesheet" href="<?php echo $base_url?>oracle-card/css/bootstrap.css">

      <link rel="stylesheet" href="<?php echo $base_url?>oracle-card/css/font-awesome.min.css">

      <link rel="stylesheet" href="<?php echo $base_url?>oracle-card/css/audio.css?<?php echo time();?>">

      <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      
     <title>Oracle Card</title>
        <!--<script>
        	(adsbygoogle = window.adsbygoogle || []).push({
        	"google_ad_client":"ca-pub-4801985982356333",
        	"enable_page_level_ads":true,
        	"Tag_partner":"site_kit" //added by site kit plugin
        	}); 
        </script>-->
        <link rel="icon" href="https://www.angelicprayer.com/wp-content/uploads/2021/06/aaa.png" sizes="32x32" />
        <link rel="icon" href="https://www.angelicprayer.com/wp-content/uploads/2021/06/aaa.png" sizes="192x192" />
   </head>

   <body>

      <header class="w-100 clearfix py-2 bg-white" id="TopHeader">
          <div class="container">
                    <nav class="navbar navbar-expand-lg p-0">
                        <a class="navbar-brand head_logo" href="avascript:void(0)">
                            <img src="images/new-arch-logo.png" class="img-fluid" alt="No Logo"></a>
                        <button class="navbar-toggler" type="button" id="" onclick="openNav()">
                    ☰
                    </button>
                        <div class="side_bar pl-xl-5" id="oracle-card">
                            <ul class="navbar-nav header_menu">
                                <a href="javascript:void(0)" class="closebtn d-lg-none d-block text-decoration-none text-dark" onclick="closeNav()">×</a>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Home</a>
                                </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Daily Message</a>
                                </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Guardian Angel</a>
                                </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);">Protection</a>
                                </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);"> Blessing & Prayers</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);"> Healing</a>
                                </li>
                                <li class="nav-item d-lg-block d-none">
                                    <a class="nav-link" href="javascript:void(0);"> <i class="penci-faicon fa fa-search"></i></a>
                                </li>
                                
                            </ul>
                        </div>


                    </nav>
                </div>
       </header>

    <div class="container">

			<div class="my-3">
				<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9681438547491692"
     crossorigin="anonymous"></script>
<!-- AP Display - Horizontal -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9681438547491692"
     crossorigin="anonymous"></script>
<!-- AP Display - Horizontal -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9681438547491692"
     data-ad-slot="1604053373"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
			</div>

		</div>
		<div style="background-image: url(images/oracle-card-background.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;">
	<section class="angels-category" id="card">
              
        <div class="container">
            
            <h3>Which Arcana Do You Wish To Hear From Today?</h3>
            <h5 class="mb-5 text-center">Tap an Arcana Card below to reveal their message for you:</h5>
            
                       
            <div class="row d-flex align-items-center justify-content-center">
              
                
                <!--<div class="col-md-2 col-sm-3 box mb-1 flip-box m-auto">
                        <a href="article.php?url=<?= $angel['url'] ?>">
                            <div class="flip-container flip-box-inner">
                                <div class="flip-box-front">
                                    <img src="images/card/<?= ($angel['angel']) ?>.jpg" alt="Archangel Ariel" class="">
                                </div>
                                <div class="flip-box-back">
                                    <img src="images/back/<?= rand(1, 2) ?>.jpg" alt="">
                                </div>
                            </div>
                        </a>
                    </div>-->
                <?php foreach ($angels as $angel) : ?>
                    <div class="col-md-2 col-sm-3 box mb-1 flip-box m-auto">
                        <a class = "click-zoom" data-url ="<?php echo $base_url.'oracle-card/result/'.$angel ;?>" href="javascript:">
                            <div class="flip-container flip-box-inner">
                                <div class="flip-box-back">
                                    <img src="images/card/<?=$angel?>.png" alt="Archangel Ariel" class="">
                                </div>
                                <div class="flip-box-front">
                                    <img src="images/back/<?= rand(1, 3) ?>.png" alt="">
                                </div>
                            </div>
                        </a>
                    </div>
                <?php endforeach; ?>
            </div>
            
        </div>
    </section>
    </div>
    
    <section class="">
        <div class="container">

			<div class="my-3">
			<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9681438547491692"
     crossorigin="anonymous"></script>
<!-- AP Display - Horizontal -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9681438547491692"
     crossorigin="anonymous"></script>
<!-- AP Display - Horizontal -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9681438547491692"
     data-ad-slot="1604053373"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
			</div>

		</div>
    </section>
    
    <!--<section class="intro">
        <div class="container">
            
            <div class="row">
                <div class="col-md-7">
                    <div class="d-md-flex  flex-column align-items-center h-100">
                        <h1 class="heading-2">Your (1) <span class="text-span-2">Tarot Card</span> <br> is Ready For You <br> Today</h1>
                        <div class="image mob mb-2 mt-2">
                            <img src="images/tarot-main.png" alt="Tarot Main">
                        </div>
                        <a href="#card" class="btn btn-warning btn-rev w-50">REVEAL MY DESTINED CARD</a>
                    </div>
                </div>
                <div class="col-md-5 laptop">
                    <div class="image my-md-0 my-3">
                        <img src="images/tarot-main.png" alt="Tarot Main">
                    </div>
                </div>
            </div>
        </div>
    </section>-->

        <section class="footer">
            <p class="footer-text">© 2021 Karmic Tarot Message. All rights reserved.</p>
            <div class="footer-links">
                <a class="footer-link" href="javascript:">Terms &amp; Conditions</a>
                <a class="footer-link" href="javascript:">Privacy Policy</a>
                <a class="footer-link" href="javascript:">Contact Us</a>
            </div>
        </section>


        <script src="<?php echo $base_url?>oracle-card/js/jquery.min.js"></script>

      <script src="<?php echo $base_url?>oracle-card/js/popper.min.js"></script>

      <script src="<?php echo $base_url?>oracle-card/js/bootstrap.min.js"></script>

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.0/jquery.flexslider-min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

      <script>
        $(document).ready(function(){
            $('.click-zoom').click(function(event){
                $(this).find('.flip-box-inner').addClass('card-zoom');
                var url = $(this).attr('data-url');
                setTimeout(function(){
                   window.location = url;
                },1500)
            }); 
        });
         function openNav() {
               document.getElementById("oracle-card").style.transform = "translate(0%, 0%)";
               }

               function closeNav() {
               document.getElementById("oracle-card").style.transform = "translate(-130%, 0%)";
               }
      </script>
	  <style>
	  .navbar-expand-lg {
            justify-content: space-between;
        }
	  .navbar-expand-lg .navbar-nav .nav-link {
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 500;
    color: #474444;
    font-family: 'Montserrat', sans-serif;
    line-height: 10px;
    padding: 16px 10px !important;
    text-transform: uppercase;
}
	  @media screen and (max-width: 720px){
		.flip-box {
			padding: 15px;
			width: calc(100%/3);
		}
	  }
	  .card-zoom{
	        position: relative;
            z-index: 99999;
	  }
	  .card-zoom .flip-box-back img {
            transition: transform 0.8s;
            transform: scale(1.5);
            box-shadow: 0px 0px 30px 10px var(--bs-pink);
            border-radius: 10px;
        }
		.angels-category {
				 background-color: rgb(3 38 61 / 82%);
				color: #fcfcfc;
			}
			.angels-category h3 {
				font-weight: 700;
			}
	  </style>
	  <!--<script src="//c.pubguru.net/pg.astrologyvalley.com.js" async></script>-->
    </body>

    </html>