<?php
require_once "auth.php";


if ($attendance == 1 && !isset($_GET["top"])) {
  header("Location: invitation.php?key=".$_GET["key"]);
  exit;
}
?>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script
  src="//code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script src="lib/anime.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/js/animsition.js"></script>

<script src="linkanimation.js"></script>

</head>
<body class="animsition">
  <div class="fade-layer"></div>
  <div class="contents" style="width:100%; text-align:center;vertical-align:center; position:static;">
    <h1><div class="ml3">藤井陽平・小林千紗</div>
      <div class="ml3">結婚披露宴 招待状</div>
    </h1>
    <div style="text-align:center; position:absolute; bottom:2em; right:0; left:0; width:5em; margin:auto;">
      <a href="./invitation.php?key=<?php echo $_GET["key"];?>" class="animsition-link" style="color:white; font-size:1.5em;"
        data-animsition-out-class="fade-out-up-sm"
        data-animsition-out-duration="2000">開封</a>
    </div>
  </div>



<style >
body {
  background-color: black;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: white;
  text-align: center;

}
.ml3 {
  font-weight: 400;
  font-size: 1em;
  padding: 0px;
  line-height: 1.2em;
}

.ml3 .letter {
  display: inline-block;

}
h1 {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;

  padding: 0.3em;
  margin: 0 auto;
  height: 100%;
  background-color: black;
  text-align: center;
  vertical-align: center;
  opacity: 0.7;
}
h1 * {
  margin: 0 auto;
}

.fadein_area img.bgimage {
    opacity: 0.6;    /* カラーフィルタ効果の度合いを指定(※) */

}
.contents {
  background: transparent;
}
.fade-layer{
  position:absolute;top:0px;left:0px;
  width:100%; height:100%;
  z-index:-1;
  opacity: 1;
  background : url("saganochikurin.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

</style>
<script type="text/javascript">
// Wrap every letter in a span
// Wrap every letter in a span
window.onload = function () {
  $('.ml3').each(function(){
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
  });

  anime.timeline({loop: false})
    .add({
      targets: '.ml3 .letter',
      opacity: [0,1],
      easing: "easeInOutQuad",
      duration: 2250,
      delay: function(el, i) {
        return 150 * (i+1) + 1000
      }
    });
  $(function(){
    $('#fadein_area img').hide();
    $('#fadein_area img').each(function(i) {
  //    $(this).delay(1000 * i + 5000).fadeIn(1500);
    });


    $('.fade-layer').hide();
    $('.fade-layer').delay(5000).fadeIn(3000);

    $('.animsition-link').hide();
    $('.animsition-link').delay(9000).fadeIn(1000);





  });
}
  </script>
</div>

</body>
</html>
