<?php
  $fevicon_story = ($advancenews['pStories_Logo'] !='') ?  $advancenews['pStories_Logo'] : $advancenews['Website_Fevicon'];
  $auto_advance_after = ($advancenews['pStories_Animation'] !='') ?  $advancenews['pStories_Animation'] : 8;
?>
<!DOCTYPE html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <title><?php echo $the_story['story_title'].$advancenews['Title_Separetor'].$advancenews['Website_title']; ?></title>
    <link rel="canonical" href="<?php echo $site_domain ?>photo-stories/<?php echo $the_story['story_url'] ?>/"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
    <!-- Favicons -->
    <link href="<?php echo $advancenews['Website_Fevicon'] ?>" rel="icon">
    <link href="<?php echo $advancenews['Website_Fevicon'] ?>" rel="apple-touch-icon">
        <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        }
        @-webkit-keyframes -amp-start {
            from {
            visibility: hidden;
            }
            to {
            visibility: visible;
            }
        }
        @-moz-keyframes -amp-start {
            from {
            visibility: hidden;
            }
            to {
            visibility: visible;
            }
        }
        @-ms-keyframes -amp-start {
            from {
            visibility: hidden;
            }
            to {
            visibility: visible;
            }
        }
        @-o-keyframes -amp-start {
            from {
            visibility: hidden;
            }
            to {
            visibility: visible;
            }
        }
        @keyframes -amp-start {
            from {
            visibility: hidden;
            }
            to {
            visibility: visible;
            }
        }
        </style>
        <style amp-custom>
            @font-face {
            font-family: 'ajp';
            src: url('<?php echo $site_domain ?>assets/font/VarendraAP-Semibold_v7.ttf') format('woff2'),
                    url('<?php echo $site_domain ?>assets/font/VarendraAP-Semibold_v7.ttf') format('woff');
            font-weight: 600;
            }
            amp-story {
            font-family: "ajp", sans-serif;
            color: #fff;
            }
            .full-image-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3), transparent);
            z-index: 15;
            }
            .container {
            width: 100%;
            position: absolute;
            bottom: 0;
            padding: 0px 40px;
            padding-bottom: 56px;
            }
            .date-container {
            margin-bottom: 20px;
            text-align: center;
            font-size: 20px;
            width: 100%;
            display: flex;
            justify-content: center;
            }
            .date-container p {
            background-color: #efefef;
            color: #000000;
            padding: 5px 10px;
            font-weight: 700;
            }
            .title-container {
            border-top: 3px solid <?php echo $advancenews['Theme_Color'] ?>;
            padding-top: 12px;
            width: 100%;
            text-align: center;
            }
            .first-title-container {
            padding-top: 12px;
            width: 100%;
            text-align: center;
            }
            .first-story-title {
            font-size: 35px;
            line-height: 44px;
            color: <?php echo $advancenews['Theme_Color'] ?>;
            }
            .story-title {
            font-size: 30px;
            line-height: 44px;
            color: #fff;
            text-align: left;
            }
            .noedge {
            padding: 20px 20px;
            }
        </style>
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none;
            }
        </style>
    </noscript>
</head>
<body>
    <amp-story standalone title="<?php echo $advancenews['Website_title'] ?>" publisher="MahamudFutureIT.Com" publisher-logo-src="<?php echo $advancenews['Website_Logo'] ?>" poster-portrait-src="<?php echo $advancenews['Website_Social'] ?>">

      <?php
      $story_count = 1;
      foreach ($storyData as $the_story_item) {
        if ($the_story_item['storyimage'] !='') {
          if ($story_count == 1) {
            ?>
            <amp-story-page id="1" auto-advance-after="<?php echo $auto_advance_after  ?>s">
              <amp-story-grid-layer template="fill">
                <amp-img animate-in="zoom-in" scale-end="1.3" animate-in-duration="8s" src="<?php echo $the_story_item['storyimage'] ?>" width="720" height="1280" layout="responsive"></amp-img>
              </amp-story-grid-layer>
              <amp-story-grid-layer template="fill" class="full-image-layer"></amp-story-grid-layer>
              <amp-story-grid-layer template="vertical">
                <div class='container'>
                  <div class='date-container'>
                    <p animate-in="fly-in-bottom" animate-in-duration="1s"><?php echo dokanDate($the_story['story_date']) ?></p>
                  </div>
                  <div class="first-title-container">
                    <div>
                      <h1 class="first-story-title" animate-in="fly-in-bottom" animate-in-duration="1s"> <?php echo $the_story['story_title'] ?> </h1>
                    </div>
                  </div>
                </div>
              </amp-story-grid-layer>
              <amp-story-grid-layer template="vertical" class="noedge">
                <amp-img src="<?php echo $fevicon_story ?>" width="40" height="40" layout="fixed"></amp-img>
              </amp-story-grid-layer>
            </amp-story-page>
            <?php
          }else {
            ?>
            <amp-story-page id="565" auto-advance-after="<?php echo $auto_advance_after  ?>s">
              <amp-story-grid-layer template="fill">
                <amp-img animate-in="zoom-in" scale-end="1.3" animate-in-duration="8s" src="<?php echo $the_story_item['storyimage'] ?>" width="720" height="1280" layout="responsive"></amp-img>
              </amp-story-grid-layer>
              <amp-story-grid-layer template="fill" class="full-image-layer"></amp-story-grid-layer>
              <amp-story-grid-layer template="vertical">
                <div class='container'>
                  <div class="title-container">
                    <div>
                      <h1 class="story-title" animate-in="fly-in-bottom" animate-in-duration="1s"><?php echo $the_story_item['storycaption'] ?></h1>
                    </div>
                  </div>
                </div>
              </amp-story-grid-layer>
              <amp-story-grid-layer template="vertical" class="noedge">
                <amp-img src="<?php echo $fevicon_story ?>" width="40" height="40" layout="fixed"></amp-img>
              </amp-story-grid-layer>
            </amp-story-page>
            <?php
          }
        }
        $story_count ++;
      }
      ?>
      <span style="position:absolute; top:13px; right:40px;padding: 5px 10px;border-radius: 10px;z-index: 999;">
        <a href="<?php echo $site_domain ?>photo-stories/" style="color:#000; font-size:16px;text-decoration: none;"><img style="width:40px; height:40px;" class="" src="https://www.kalbela.com/assets/slider/images/storycross.png"></a>
        </span>
    </amp-story>
  </body>
</html>
