<?php
   include 'config/MainFunction.php';
   if (empty($_GET['url']) || !$_GET['url']) {
       header('Location:index.php');
   }
  
   $article = $use->getArticleByUrl(urldecode($_GET['url']));
   $angels = $use->angels();

   $articles = $use->randomArticleSeven();

   $angels_icon = $use->mergeArray($angels, $articles);
   $angels = $use->mergeArray($angels, $article);
       // echo "<pre>"; print_r($angels);die;

   $randomArticle = $use->randomArticleOne();
   // echo "<pre>"; print_r($randomArticle);die;
   $use->updateView($article[0]['id'], $article[0]['views'] + 1);
   ?>
  
<!doctype html>
<html lang="en">
   <head>
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4801985982356333"
         crossorigin="anonymous"></script>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- 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="css/new-style.css?<?php echo time();?>">
      <link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <link rel="stylesheet" href="css/message.css?<?php echo time();?>">
      <link rel="stylesheet" href="css/audio.css?<?php echo time();?>">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="icon" type="image/png" href="images/arch-logo.png" />
      <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">
      <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
      <title>Lords Message Mp3</title>
   </head>
   <body>
        <header class="w-100 clearfix MainHeader px-md-4 py-2" id="TopHeader">
         <div class="header_sec container-fluid">
            <nav class="navbar navbar-expand-lg p-0">
               <a class="navbar-brand head_logo" href="javascript:void(0)">
               <img class="logo" src="images/arch-logo.png" alt="Logi"></a>
               <button class="navbar-toggler" type="button" id="sidebar" onclick="openNav()">
               ☰
               </button>
               <div class="side_bar pl-xl-5" id="collapsibleNavbar">
                  <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>
                  </ul>
               </div>
            </nav>
         </div>
      </header>
      <div class="article">
         <div class="left-ads">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- AP - Horizontal -->
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4801985982356333" data-ad-slot="5263271406" data-ad-format="auto" data-full-width-responsive="true"></ins>
            <script>
               (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
         </div>
         <div class="right-ads">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
            <!-- AP - Horizontal -->
            <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4801985982356333" data-ad-slot="5263271406" data-ad-format="auto" data-full-width-responsive="true"></ins>
            <script>
               (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
         </div>
         <div class="container py-5">
            <div class="Guardvare text-center">               
            <h4 class="mb-0">Here's The <br>Lord's Message Today</h4>
            </div>
            <div class="row">
               <div class="col-md-8 m-auto">
                  <div class="audio_img my-3 pb-5">
                     <div class="angel-card">
                        <img src="images/thumb/<?= $article[0]['image'] ?>" alt="<?= $article[0]['title'] ?>" class="card">
                     </div>
                    
                     <div class="click_here text-center">
  <h4>RADIATE BOUNDLESS LOVE TO THE ENTIRE WORLD </h4>
                        <h3>Click Here to Play Your 
                           Audio Message
                        </h3>
                        <div class="my-3">
                           <img src="images/arrow.png" width="20px">
                        </div>
                     </div>
                     <audio controls class="audio-message" style="display: none;">
                        <source src="images/thumb/<?= $article[0]['audio'] ?>"  type="audio/mp3">
                     </audio>
                     <!-- <div style="width: 50px; height: 50px;"></div> -->
                     <div class="flower position-relative">
                     </div>
                     <div class="audio-player">
                        <div class="controls">
                           <div class="play-container">
                              <div class="play-audio">
                                 <div class="toggle-play play">
                                 </div>
                              </div>
                           </div>
                           <div class="time">
                              <div class="current">0:00</div>
                              <div class="divider">/</div>
                              <div class="length"></div>
                           </div>
                           <!--     credit for icon to https://saeedalipoor.github.io/icono/ -->
                           <div class="volume-container">
                              <div class="volume-button">
                                 <div class="volume">
                                    <img src="images/volume.png">
                                 </div>
                              </div>
                              <div class="volume-slider">
                                 <div class="volume-percentage"></div>
                              </div>
                           </div>
                        </div>
                        <div class="timeline">
                           <div class="progress"></div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="about_angle text-center my-4">
                  <a href="javascript:void(0);" class="btn px-5 py-2">WOULD YOU PREFER TO READ?
                  </a>
               </div>
            </div>
            <div class="ads" style="text-align: center; margin: 0 auto; margin-top: 5px; margin-bottom: 5px">
               <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
               <!-- AP - Horizontal -->
               <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4801985982356333" data-ad-slot="5263271406" data-ad-format="auto" data-full-width-responsive="true"></ins>
               <script>
                  (adsbygoogle = window.adsbygoogle || []).push({});
               </script>
            </div>
            </div>
            
            <div class="second_section">
            <div class="container">
            <div class="row h-100">
               <div class="col-md-6 main-article mb-3">
                  <div class="details h-100">
                      
                      
                     <div  class="content_article">
                        <?= $use->add_adsense_code($article[0]['content']) ?>
                     </div>
                    <div class="my-3 text-center" onclick="content_more(this);">
                        <img src="images/arrow.png" width="20px" class="arrow_img">
                     </div>
					<div class="my-3 text-center" onclick="content_remove(this);" style="display:none;">
                        <img src="images/arrow.png" width="20px" class="arrow_img_remove">
                     </div>
              
                  </div>
               </div>
               <div class="col-md-6 mb-3">
                  <div class="side h-100">
                   
                     <div class="col-side angel-col-side">
                        <h4>Want To Hear From another Lord's Message?</h4>
                        <div class="row d-flex justify-content-center">
                           <?php foreach ($angels_icon as $angel) : ?>
                           <div class="col-md-4 justify-content-center d-flex">
                              <a href="article.php?url=<?= $angel['url'].'&icon='.$angel['angel'] ?>">
                              <img src="images/card/<?= ($angel['angel']) ?>.png" alt="<?= $angel['angel'] ?>" class="angel-side">
                              </a>
                           </div>
                           <?php endforeach; ?>
                        </div>
                     </div>
                     <div class="col-side">
                        <div class="ads" style="text-align: center; margin: 0 auto; margin-top: 5px; margin-bottom: 5px">
                           <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                           <!-- AP - Horizontal -->
                           <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4801985982356333" data-ad-slot="5263271406" data-ad-format="auto" data-full-width-responsive="true"></ins>
                           <script>
                              (adsbygoogle = window.adsbygoogle || []).push({});
                           </script>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            </div>
            <div class="ads" style="text-align: center; margin: 0 auto; margin-top: 5px; margin-bottom: 5px">
               <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
               <!-- AP - Horizontal -->
               <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4801985982356333" data-ad-slot="5263271406" data-ad-format="auto" data-full-width-responsive="true"></ins>
               <script>
                  (adsbygoogle = window.adsbygoogle || []).push({});
               </script>
            </div>
            </div>
             </div>
        
      </div>
    <section class="footer">
        <div class="container">
            <div class="first_footer pb-3 mb-3">
            <div class="row">
                <div class="col-md-6">
                     <a class="footer_logo" href="avascript:void(0)">
                         <img  src="images/arch-logo.png" alt="Logi">
                     </a>
                </div>
                <div class="col-md-6">
                    <div class="follow_part text-center">
                        <h5>Follow Us</h5>
                           <ul class="nav footer_menu">
                               <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);"> <i class="fa fa-facebook" aria-hidden="true"></i>
                                    </a>
                                 </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);"> <i class="fa fa-instagram" aria-hidden="true"></i>

                                    </a>
                                 </li>
                                 <li class="nav-item">
                                    <a class="nav-link" href="javascript:void(0);"> <i class="fa fa-twitter" aria-hidden="true"></i>
                                    </a>
                                 </li>
                           </ul>
                    </div>
                </div>
            </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                     <p class="footer-text">© 2021 Karmic Tarot Message. All rights reserved.</p>
                </div>
                <div class="col-md-6">
                    <div class="footer-links text-right">
                        <a class="footer-link" href="terms-and-conditions.php">Terms &amp; Conditions</a>
                        <a class="footer-link" href="privacy-policy.php">Privacy Policy</a>
                 </div>
                </div>
            </div>
        </div>          
      </section>
      <script src="js/jquery.min.js"></script>
      <script src="js/popper.min.js"></script>
      <script src="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>
         function openNav() {
               document.getElementById("collapsibleNavbar").style.transform = "translate(0%, 0%)";
               }
         
               function closeNav() {
               document.getElementById("collapsibleNavbar").style.transform = "translate(-130%, 0%)";
               }
         
          const audioPlayer = document.querySelector(".audio-player");
         var audiourl = $('source').attr('src');
         
         const audio = new Audio(audiourl);
         
         console.dir(audio);
         
         audio.addEventListener(
         "loadeddata",
         () => {
         audioPlayer.querySelector(".time .length").textContent = getTimeCodeFromNum(
         audio.duration
         );
         audio.volume = .75;
         },
         false
         );
         
         //click on timeline to skip around
         const timeline = audioPlayer.querySelector(".timeline");
         timeline.addEventListener("click", e => {
         const timelineWidth = window.getComputedStyle(timeline).width;
         const timeToSeek = e.offsetX / parseInt(timelineWidth) * audio.duration;
         audio.currentTime = timeToSeek;
         }, false);
         
         //click volume slider to change volume
         const volumeSlider = audioPlayer.querySelector(".controls .volume-slider");
         volumeSlider.addEventListener('click', e => {
         const sliderWidth = window.getComputedStyle(volumeSlider).width;
         const newVolume = e.offsetX / parseInt(sliderWidth);
         audio.volume = newVolume;
         audioPlayer.querySelector(".controls .volume-percentage").style.width = newVolume * 100 + '%';
         }, false)
         
         //check audio percentage and update time accordingly
         setInterval(() => {
         const progressBar = audioPlayer.querySelector(".progress");
         progressBar.style.width = audio.currentTime / audio.duration * 100 + "%";
         audioPlayer.querySelector(".time .current").textContent = getTimeCodeFromNum(
         audio.currentTime
         );
         }, 500);
         
         //toggle between playing and pausing on button click
         const playBtn = audioPlayer.querySelector(".controls .toggle-play");
         playBtn.addEventListener(
         "click",
         () => {
         if (audio.paused) {
         playBtn.classList.remove("play");
         playBtn.classList.add("pause");
         audio.play();
         } else {
         playBtn.classList.remove("pause");
         playBtn.classList.add("play");
         audio.pause();
         }
         },
         false
         );
         
         audioPlayer.querySelector(".volume-button").addEventListener("click", () => {
         const volumeEl = audioPlayer.querySelector(".volume-container .volume");
         audio.muted = !audio.muted;
         if (audio.muted) {
         volumeEl.classList.remove("icono-volumeMedium");
         volumeEl.classList.add("icono-volumeMute");
         } else {
         volumeEl.classList.add("icono-volumeMedium");
         volumeEl.classList.remove("icono-volumeMute");
         }
         });
         
         //turn 128 seconds into 2:08
         function getTimeCodeFromNum(num) {
         let seconds = parseInt(num);
         let minutes = parseInt(seconds / 60);
         seconds -= minutes * 60;
         const hours = parseInt(minutes / 60);
         minutes -= hours * 60;
         
         if (hours === 0) return `${minutes}:${String(seconds % 60).padStart(2, 0)}`;
         return `${String(hours).padStart(2, 0)}:${minutes}:${String(
         seconds % 60
         ).padStart(2, 0)}`;
         }
		 
		  function  content_more(e){
				$(".content_article p").addClass('content_part');
				$(".arrow_img").hide();
				$(".arrow_img_remove").parent().show();
			}
			function  content_remove(e){
				$(".content_article p").removeClass('content_part');
				$(".arrow_img_remove").parent().hide();
				$(".arrow_img").show();
			}
         
      </script>
   </body>
</html>