<?php 

$strTitle = "TIEMPO DE FLORECER";
$strUrl   = "https://altares.mviglobal.org/comparte/";
$strUrlImg= "http://altares.mviglobal.org/comparte/images/image_06ene21.jpg";
$strUrlImgRect="http://altares.mviglobal.org/comparte/images/Altares_Jan06.jpg";
$strUrlFb = "https://www.facebook.com/MVIQUERETARO/videos/957825274749882";
$strUrlYt = "https://www.youtube.com/watch?v=74yHpRXnenM";

$strTypeImage = "image/jpeg";
$strWidthImg  = "300";
$strHeightImg = "300";

$strVerseText = "7 »Si a un árbol se le derriba, queda al menos la esperanza de que retoñe y de que no se marchiten sus renuevos. 8 Tal vez sus raíces envejezcan en la tierra y su tronco muera en su terreno, 9 pero al sentir el agua, florecerá; echará ramas como árbol recién plantado.";
$strVerse     = "Job 14:7-9 (NVI)";
$strContent= "<i>'".$strVerseText."'</i><br><b>".$strVerse."</b>";
?>
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#">
<head>
<title><?= $strTitle ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="<?= $strVerse ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?= $strUrl ?>" />
<meta property="og:description" content="<?= $strVerseText?>" />
<meta property="og:image" content="<?= $strUrlImg?>" />
<meta property="og:image:type" content="<?= $strTypeImage?>" />
<meta property="og:image:width" content="<?= $strWidthImg?>" />
<meta property="og:image:height" content="<?= $strHeightImg?>" />
 <script src="https://kit.fontawesome.com/1e4203a92c.js" crossorigin="anonymous"></script>
 <style>
    body {
        background-color: #e1d271;
        font-family: "Monaco";
        color: black;
    }
    #block_container {
        text-align:center;}
    #bloc1, #bloc2 {
        display:inline;
    } 
    .btn {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 32px;
  border-radius: 8px;
    }
    .btnFb {
        background-color: #008CBA;
    }
    .btnYt {
        background-color: red;
    }
    .responsive {
        max-width: 80%;
        height: auto;
        margin: 20px;
    }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="block_container">
        <img src="images/logoAltaresYellow.png"><br>
        <h1>&iexcl;Bienvenido!</h1>
        <div>Presiona el botón para entrar al Altar en la red de tu preferencia</div><br>
        <div>
            <div id="bloc1"><button class="btn btnFb"><i class="fab fa-facebook"></i></button></div>  
            <div id="bloc2"><button class="btn btnYt"><i class="fab fa-youtube-square"></i></button></div>
        </div>
        <img src="images/Altares_Jan06.jpg" class="responsive">
        <h3><i><?= $strVerseText ?></i></h3>
        <h2><?= $strVerse?></h2>
        
    </div>
    <script>
        $('.btnFb').click(function() {
           window.location = "<?= $strUrlFb ?>"; 
        });
        
        $('.btnYt').click(function() {
           window.location = "<?= $strUrlYt ?>"; 
        });
    </script>
</body>
</html>