<!DOCTYPE html>
<html lang="en">
	<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<title>QRCode Event</title>
		<meta name="description" content="Free Bootstrap 4 Template by uicookies.com">
		<meta name="keywords" content="Free website templates, Free bootstrap themes, Free template, Free bootstrap, Free website template">

    <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600|Montserrat:200,300,400" rel="stylesheet">

		<link rel="stylesheet" href="assets-event/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="assets-event/fonts/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="assets-event/fonts/law-icons/font/flaticon.css">

    <link rel="stylesheet" href="assets-event/fonts/fontawesome/css/font-awesome.min.css">

    <script src="../js/sweetalert.min.js"></script>
    
    <link rel="stylesheet" href="assets-event/css/slick.css">
    <link rel="stylesheet" href="assets-event/css/slick-theme.css">

    <link rel="stylesheet" href="assets-event/css/helpers.css">
    <link rel="stylesheet" href="assets-event/css/style.css">
    <link rel="stylesheet" href="assets-event/css/landing-2.css">
    
	</head>
	<body data-spy="scroll" data-target="#pb-navbar" data-offset="200">

    <nav class="navbar navbar-expand-lg navbar-dark pb_navbar pb_scrolled-light" id="pb-navbar">
      <div class="container">
        <a class="navbar-brand" href="index.html">QRCode Event</a>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#probootstrap-navbar" aria-controls="probootstrap-navbar" aria-expanded="false" aria-label="Toggle navigation">
          <span><i class="ion-navicon"></i></span>
        </button>
        <div class="collapse navbar-collapse" id="probootstrap-navbar">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#section-home">Home</a></li>
            <!-- <li class="nav-item"><a class="nav-link" href="#section-features">Features</a></li>
            <li class="nav-item"><a class="nav-link" href="#section-reviews">Reviews</a></li>
            <li class="nav-item"><a class="nav-link" href="#section-pricing">Pricing</a></li>
            <li class="nav-item"><a class="nav-link" href="#section-faq">FAQ</a></li>
            <li class="nav-item cta-btn ml-xl-2 ml-lg-2 ml-md-0 ml-sm-0 ml-0"><a class="nav-link" href="" target="_blank"><span class="pb_rounded-4 px-4">Get Started</span></a></li> -->
          </ul>
        </div>
      </div>
    </nav>
    <!-- END nav -->




    <section class="pb_cover_v3 overflow-hidden cover-bg-indigo cover-bg-opacity text-left pb_gradient_v1 pb_slant-light" id="section-home">
      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-md-6">
            <h2 class="heading mb-3">Validasi Kehadiran Anda</h2>
            <div class="sub-heading">
              <p class="mb-4">Arahkan QRCode Anda ke Kamera ini.</p>
              
            </div>
          </div>
          <div class="col-md-1">
          </div>
          <div align="center" class="col-md-5 relative align-self-center">

            <form action="#" class="bg-white rounded pb_form_v1">
            
                <div align="center" class="panel-body text-center" >
                    <canvas></canvas>
                    <hr>
                    <select></select>
                  </div>
                  
            <?php
            IF(!empty($_GET[p]=='error')){
                echo '<script>
            	        swal("MAAF","ANDA TIDAK TERDAFTAR","error");
                    </script>';    
            }
            IF(!empty($_GET[p]=='sukses')){
                echo '<div class="pesan"><center><b>ANDA SUDAH DIVALIDASI</b></div>';
                 echo '<script>
            	        swal("SUKSESS","TERIMA KASIH ATAS KEHADIRANNYA, ANDA SUDAH DIVALIDASI","success");
                    </script>';
            }
            IF(!empty($_GET[p]=='ver')){
                 echo '<script>
            	        swal("MAAF YA","ANDA SUDAH DIVALIDASI SEBELUMNYA","error");
                    </script>';
            }
            ?>   
              
            </form>

          </div>
        </div>
      </div>
    </section>
    <!-- END section -->

    <footer class="pb_footer bg-light" role="contentinfo">
      <div class="container">
        <div class="row text-center">
          <div class="col">
            <ul class="list-inline">
              <li class="list-inline-item"><a href="#" class="p-2"><i class="fa fa-facebook"></i></a></li>
              <li class="list-inline-item"><a href="#" class="p-2"><i class="fa fa-twitter"></i></a></li>
              <li class="list-inline-item"><a href="#" class="p-2"><i class="fa fa-linkedin"></i></a></li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="col text-center">
            <p class="pb_font-14">&copy; 2019-2020. All Rights Reserved. </p>
          </div>
        </div>
      </div>
    </footer>

    <!-- loader -->
    <div id="pb_loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#1d82ff"/></svg></div>



    <script src="assets-event/js/jquery.min.js"></script>

    <script src="assets-event/js/popper.min.js"></script>
    <script src="assets-event/js/bootstrap.min.js"></script>
    <script src="assets-event/js/slick.min.js"></script>
    <script src="assets-event/js/jquery.mb.YTPlayer.min.js"></script>

    <script src="assets-event/js/jquery.waypoints.min.js"></script>
    <script src="assets-event/js/jquery.easing.1.3.js"></script>

    <script src="assets-event/js/main.js"></script>

    <!-- Js Lib -->
<script type="text/javascript" src="tools/jquery.js"></script>
<script type="text/javascript" src="tools/qrcodelib.js"></script>
<script type="text/javascript" src="tools/webcodecamjquery.js"></script>

<script type="text/javascript">
    var arg = {
        resultFunction: function(result) {
            var redirect = 'cekevent.php';
            $.redirectPost(redirect, {kode: result.code});
        }
    };
    
    var decoder = $("canvas").WebCodeCamJQuery(arg).data().plugin_WebCodeCamJQuery;
    decoder.buildSelectMenu("select");
    decoder.play();
    
    $('select').on('change', function(){
        decoder.stop().play();
    });

    $.extend(
    {
        redirectPost: function(location, args)
        {
            var form = '';
            $.each( args, function( key, value ) {
                form += '<input type="hidden" name="'+key+'" value="'+value+'">';
            });
            $('<form action="'+location+'" method="POST">'+form+'</form>').appendTo('body').submit();
        }
    });

</script>


        <script>
            //angka 500 = 0,3 detik 
            $(document).ready(function(){setTimeout(function(){$(".pesan").fadeIn('slow');}, 300);});
            //angka 10000 = 10 detik setelah muncul
            setTimeout(function(){$(".pesan").fadeOut('slow');}, 10000);
        </script>
        
	</body>
</html>
