<?php
$post_url = $_GET["post_url"];
include "config/MainFunction.php";
$angels = $use->angels();
//$articles = $use->randomArticleSeven();
//$card_details = $use->getCardBySlug($post_url);
$card_details = $use->randomAdviseVideo();
$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>
      <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" />
       <!-- <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>-->
   </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 reading-page">
              
        <div class="container">
            
            <h3>Your Arcana Message For Today</h3>
            <h5 class="mb-5 text-center"><?php echo $card_details[0]["title"]?></h5>
					         
            <div class="col-md-9 m-3 mx-auto">
				<div class="row">
					<?php 
						if(strpos($card_details[0]["ylink"],'embed',0) >0 ){
							$video_id = str_replace('https://www.youtube.com/embed/', '', $card_details[0]["ylink"]);
						}elseif(strpos($card_details[0]["ylink"],'watch?',0) >0 ){
							$video_id = str_replace('https://www.youtube.com/watch?v=', '', $card_details[0]["ylink"]);
						}elseif(strpos($card_details[0]["ylink"],'youtu.be',0) >0 ){
							$video_id = str_replace('https://youtu.be/', '', $card_details[0]["ylink"]);
						}
					?>
				   <div id="ytplayer"></div>
					<script>
					  // Load the IFrame Player API code asynchronously.
					  var tag = document.createElement('script');
					  tag.src = "https://www.youtube.com/player_api";
					  var firstScriptTag = document.getElementsByTagName('script')[0];
					  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

					  // Replace the 'ytplayer' element with an <iframe> and
					  // YouTube player after the API code downloads.
					  var player;
					  function onYouTubePlayerAPIReady() {
						player = new YT.Player('ytplayer', {
						  height: '390',
						  width: '640',
						  controls: 0,
						  titile: '<=$card_details[0]["name"]>',
						  videoId: '<?=$video_id?>'
						});
					  }
					</script>
				</div>
			</div>
		

			<div class="my-4">
				<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 class="col-md-6 p-3 m-3 mx-auto">
			<div class="row">
				<?php shuffle($angels);
				//print_r($angels);die;
                    for($i = 0; $i < 6;$i++) : ?>
                    <div class="col-md-4 box mb-1 flip-box m-auto">
                         <a class = "click-zoom" data-url ="<?php echo $base_url.'oracle-card/result/'.$angels[$i] ;?>" href="javascript:">
                            <div class="flip-container flip-box-inner">
                                <div class="flip-box-back">
                                    <img src="../images/card/<?=$angels[$i]?>.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 endfor; ?>
			</div>
			</div>
        </div>
    </section>
    </div>
    
<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 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>
        <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="<?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>
      <!--<script src="//c.pubguru.net/pg.astrologyvalley.com.js" async></script>-->
    </body>
    </html>