<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- favicon -->
    <link rel="icon" type="image/png" href="templates/wedding-3/short/_assets/img/favicon/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="templates/wedding-3/short/_assets/img/favicon/favicon-32x32.png" sizes="16x16"/>

    <title>Levidio Wedding Vol 2 - Website Templates</title>

    <!-- CSS  -->
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <!-- Root-Icon -->
    <link rel="stylesheet" href="https://cdn.rootpixel.net/assets/rooticon/v2/rooticon.css">
    <!-- Tiny slider -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">
    <!-- Lightgallery -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css" integrity="sha512-kwJUhJJaTDzGp6VTPBbMQWBFUof6+pv0SM3s8fo+E6XnPmVmtfwENK0vHYup3tsYnqHgRDoBDTJWoq7rnQw2+g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- Aos Animation on scroll -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <!-- App -->
    <link rel="stylesheet" href="templates/wedding-3/short/_assets/css/app.min.css">
</head>
<body class="opening-show" style="cursor: default !important;">
<!-- <body> -->

    <section id="opening">
        <div class="container-xxl">
            <div class="row align-items-center">
                <div class="col-lg-7">
                    <section id="opening-left">
                        <div class="container">
                            <h6 class="fw-bold">Wedding Invitation for <span id="guest">Justin Gouse</span></h6>
                            <h6>Kami mengharap kehadiran Anda pada acara pernikahan kami</h6>
                            <h1 class="spouse-text font-type-secondary mt-4 mb-8">John Doe & Jane Doe</h1>

                            <div id="countdown-row" class="row mb-8">
                                <div class="col-auto text-center">
                                    <div class="card card-countdown">
                                        <div data-days class="card-body">20</div>
                                    </div>
                                    <div>Hari</div>
                                </div>
                                <div class="col-auto text-center">
                                    <div class="card card-countdown">
                                        <div data-hours class="card-body">20</div>
                                    </div>
                                    <div>Jam</div>
                                </div>
                                <div class="col-auto text-center">
                                    <div class="card card-countdown">
                                        <div data-minutes class="card-body">20</div>
                                    </div>
                                    <div>Menit</div>
                                </div>
                                <div class="col-auto text-center">
                                    <div class="card card-countdown">
                                        <div data-seconds class="card-body">20</div>
                                    </div>
                                    <div>Detik</div>
                                </div>
                            </div>

                            <a href="#section-1" id="btn-open-opening" class="btn btn-primary page-scroll">Buka Undangan</a>

                        </div>

                        <img src="templates/wedding-3/short/_assets/img/decoration/leaf-top-right-1.png" class="decoration" id="opening-left-decoration-1" data-aos="fade-down-left" data-aos-duration="1200">
                        <img src="templates/wedding-3/short/_assets/img/decoration/leaf-left-1.png" class="decoration" id="opening-left-decoration-2" data-aos="fade-up-right" data-aos-duration="1200">
                        <img src="templates/wedding-3/short/_assets/img/decoration/leaf-top-1.png" class="decoration" id="opening-left-decoration-3">
                    </section>
                </div>
                <div class="col-lg-5 d-none d-lg-block">
                    <section id="opening-right">
                        <img src="templates/wedding-3/short/_assets/img/bg/header.jpg" alt="">
                    </section>
                </div>
            </div>
        </div>
    </section>

    <div id="carouselExampleFade" class="carousel slide carousel-fade" 
        data-bs-ride="carousel"
        data-bs-touch="false" 
        data-bs-interval="false">
        <!-- carousel-inner : page slide -->
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="1000">
                
                <section id="section-1">
                    <div class="container">
                        <div class="row justify-content-between">
                            <div class="col-lg-6 col-xl-5 order-2 order-lg-1">
                                <h6 class="mb-8">Assalamu’alaikum wa rohmatullahi wa barokatuh</h6>
                                <h6 class="mb-8">
                                    Maha suci Allah yang telah menciptakan mahluk-Nya berpasang-pasangan dan sungguh besar rahmat dan karunia yang diberikan Allah kepada kita semua. Kami mengundang bapak/ibu/saudara/i sekaligus mengharapkan doa restu dari bapak/ibu/saudara/i dalam acara pernikahan anak kami pada:
                                </h6>

                                <div class="d-flex align-items-center mb-3">
                                    <img src="templates/wedding-3/short/_assets/img/icons/heart-calendar.svg" alt="" class="w-3rem me-3">
                                    <h6 class="fw-bolder">Ahad, 12 Januari 2021</h6>
                                </div>
                                <div class="d-flex align-items-center mb-3">
                                    <img src="templates/wedding-3/short/_assets/img/icons/heart-clock.svg" alt="" class="w-3rem me-3">
                                    <h6 class="fw-bolder">Pukul 12.00 WIB</h6>
                                </div>
                                <div class="d-flex align-items-center mb-6">
                                    <img src="templates/wedding-3/short/_assets/img/icons/heart-pin.svg" alt="" class="w-3rem me-3">
                                    <h6 class="fw-bolder">di Gedung Serbaguna “Lorem Ipsum”</h6>
                                </div>

                                <div class="mapouter">
                                    <div class="gmap_canvas w-100 h-16rem h-md-22rem rounded-3">
                                        <iframe 
                                            class="h-24rem h-md-26rem"
                                            width="100%" 
                                            id="gmap_canvas" 
                                            src="https://maps.google.com/maps?q=Rootpixel&t=&z=13&ie=UTF8&iwloc=&output=embed" 
                                            frameborder="0"
                                            scrolling="no" 
                                            marginheight="0" marginwidth="0">
                                        </iframe>
                                        <a href="https://2piratebay.org"></a><br><style>.gmap_canvas {overflow:hidden;background:none!important;}</style>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 order-1 order-lg-2">
                                <div class="row gx-5 justify-content-center" data-aos="fade-left" data-aos-duration="1200" data-aos-offset="-50">
                                    <div class="col-12">
                                        <div class="img-wrapper img-wrapper-left mb-16 mx-auto">
                                            <img src="templates/wedding-3/short/_assets/img/gallery/3.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="col-auto d-none d-lg-block" data-aos="fade-up-right" data-aos-duration="1200" data-aos-offset="-50">
                                        <div class="img-wrapper img-wrapper-right">
                                            <img src="templates/wedding-3/short/_assets/img/gallery/4.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="col-auto d-none d-lg-block" data-aos="fade-up-right" data-aos-duration="1200" data-aos-offset="-50">
                                        <div class="img-wrapper img-wrapper-right">
                                            <img src="templates/wedding-3/short/_assets/img/gallery/5.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- decoration -->
                    <img src="templates/wedding-3/short/_assets/img/decoration/leaf-top-right-1.png" class="decoration" id="section-1-decoration-1" data-aos="fade-down-left" data-aos-duration="1200">
                    <img src="templates/wedding-3/short/_assets/img/decoration/leaf-right-1.png" class="decoration" id="section-1-decoration-2" data-aos="fade-up-left" data-aos-duration="1200">
                </section>

            </div>
            <div class="carousel-item" data-bs-interval="1000">
                
                <section id="section-2">
                    <div class="container">
                        <div class="row justify-content-between">
                            <div class="col-lg-6 mb-4 mb-lg-0">
                                <h2 class="font-type-secondary text-center fw-bold mb-6">RSVP</h2>
                                <form action="core.php" method="POST">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                    <div class="mb-4 mb-lg-6">
                                        <label for="" class="form-label">Nama</label>
                                        <input type="text" class="form-control {% if session.flash_name!=null %} is-invalid {% else %} is-valid {% endif %}" 
                                            placeholder="Nama lengkap" name="name" value="{% if session.flash_old_name!=null %} {{session.flash_old_name}} {% endif %}">
                                        {% if session.flash_name!=null %}
                                            <div class="invalid-feedback">
                                                {{ session.flash_name }}
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="mb-4 mb-lg-6">
                                        <label for="" class="form-label">Nomor HP/Whatsapp:</label>
                                        <input type="text" class="form-control {% if session.flash_phone!=null %} is-invalid {% else %} is-valid {% endif %}" 
                                            placeholder="Nomor Hp atau Whatsapp" name="phone" value="{% if session.flash_old_phone!=null %} {{session.flash_old_phone}} {% endif %}">
                                        {% if session.flash_phone!=null %}
                                            <div class="invalid-feedback">
                                                {{ session.flash_phone }}
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div class="mb-4 mb-lg-6">
                                        <label for="" class="form-label">Bersedia hadir?</label>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" value="1" type="radio" name="attendance" id="flexRadioDefault1" checked>
                                            <label class="form-check-label" for="flexRadioDefault1">
                                                Ya, saya akan hadir
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" value="2" type="radio" name="attendance" id="flexRadioDefault2">
                                            <label class="form-check-label" for="flexRadioDefault2">
                                                Tidak, saya tidak bisa hadir
                                            </label>
                                        </div>
                                    </div>
                                    <div class="mb-4 mb-lg-6">
                                        <label for="" class="form-label">Tulis ucapan</label>
                                        <textarea name="greeting" id="" cols="30" rows="8" placeholder="Anda bisa menuliskan ucapan selamat dan doa"
                                            class="form-control {% if session.flash_greeting!=null %} is-invalid {% else %} is-valid {% endif %}"
                                            >{% if session.flash_old_greeting!=null %} {{session.flash_old_greeting}} {% endif %}</textarea>
                                        {% if session.flash_greeting!=null %}
                                            <div class="invalid-feedback">
                                                {{ session.flash_greeting }}
                                            </div>
                                        {% endif %}
                                    </div>

                                    <button class="btn btn-primary" type="submit">Kirim Ucapan</button>
                                </form>
                            </div>

                            {% if datas.read().in('greetings').count() > 0 %}
                                <div class="col-lg-5">
                                    <!-- card message -->
                                    <div class="card card-message">
                                        <!-- message list -->
                                        <div class="card-body">
                                            <div id="tinyslider-container-message">
                                                {% set skip = 0 %}
                                                {% set limit = 4 %}
                                                {% set count_data = (datas.read().in('greetings').count() / limit)|round(0, 'ceil') %}
                                                {% for i in 1..count_data %}
                                                    <div class="tinyslider-item">
                                                        {% for data in datas.read().in('greetings').skip(i-1).limit(limit).get() %}
                                                            <div class="mb-4 mb-lg-6">
                                                                <h6 class="fw-bold mb-2">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().name }}</h6>
                                                                <div>
                                                                    {{ data.greeting }}
                                                                </div>
                                                            </div>
                                                        {% endfor %}
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <!-- nessage nav -->
                                        <div class="divider divider-horizontal bg-primary mt-6 mb-4"></div>
                                        <ol id="tinyslider-nav-message" class="text-center">
                                            {% for i in 1..count_data %}
                                                <span class="d-inline-block csr-pointer p-2">{{ i }}</span>
                                            {% endfor %}
                                        </ol>
                                    </div>
                                    <!-- end of card message -->
                                </div>
                            </div>
                        {% endif %}
                    </div>
                </section>

            </div>
            <div class="carousel-item" data-bs-interval="1000">
                <section id="section-3">
                    <div class="container text-center">
                        <div class="row justify-content-center">
                            <div class="col-lg-8">
                                <h2 class="font-type-secondary fw-bold mb-7 mb-lg-16">Quote</h2>
                                <h5 class="mb-6 mb-lg-10">
                                    Iaculis in viverra quis phasellus bibendum cursus egestas ac rutrum. Erat lorem semper suspendisse orci nunc egestas aenean varius vulputate. Sit ut vulputate et donec mi nibh sit porta. Vulputate felis, ac sit eu nec aliquam. Scelerisque mattis vitae urna nullam rhoncus phasellus. Vitae sagittis, sit leo pulvinar posuere. Risus nulla ullamcorper nam leo faucibus molestie. Ornare in urna massa id interdum nibh tristique.
                                </h5>
                                <h3 class="font-type-secondary fw-bold">John Doe & Jane Doe</h3>
                            </div>
                        </div>
                    </div>
    
                    <img src="templates/wedding-3/short/_assets/img/decoration/leaf-bold-top-left-1.png" class="decoration" id="section-3-decoration-1" data-aos="fade-down-right" data-aos-duration="1200">
                    <img src="templates/wedding-3/short/_assets/img/decoration/leaf-bold-top-right-1.png" class="decoration" id="section-3-decoration-2" data-aos="fade-down-left" data-aos-duration="1200">
                </section>
            </div>
            <div class="carousel-item" data-bs-interval="1000">
                <section id="section-4">
                    <div class="container text-center">
                        <h2 class="font-type-secondary fw-bold mb-5">Gallery Kami</h2>
                        <div id="tinyslider-controls-gallery" class="row w-100 justify-content-end">
                            <div class="col-auto">
                                <img src="templates/wedding-3/short/_assets/img/icons/tinyslider-prev.svg" class="csr-pointer w-3rem" alt="">
                            </div>
                            <div class="col-auto">
                                <img src="templates/wedding-3/short/_assets/img/icons/tinyslider-next.svg" class="csr-pointer w-3rem" alt="">
                            </div>
                        </div>
                        <div id="tinyslider-container-gallery" class="tinyslider-container">
                            <div class="tinyslider-item">
                                <img src="templates/wedding-3/short/_assets/img/gallery/1.jpg" alt="">
                            </div>
                            <div class="tinyslider-item">
                                <img src="templates/wedding-3/short/_assets/img/gallery/2.jpg" alt="">
                            </div>
                            <div class="tinyslider-item">
                                <img src="templates/wedding-3/short/_assets/img/gallery/3.jpg" alt="">
                            </div>
                        </div>
                    </div>

                    <img src="templates/wedding-3/short/_assets/img/decoration/leaf-bold-top-left-1.png" class="decoration" id="section-4-decoration-1" data-aos="fade-down-right" data-aos-duration="1200">
                    <img src="templates/wedding-3/short/_assets/img/decoration/leaf-bold-bottom-left-1.png" class="decoration" id="section-4-decoration-2" data-aos="fade-up-right" data-aos-duration="1200">
                    <img src="templates/wedding-3/short/_assets/img/decoration/leaf-bottom-section-4.png" class="decoration" id="section-4-decoration-3" data-aos="fade-up-left" data-aos-duration="1200" data-aos-offset="-50">
                </section>
            </div>
        </div>
        <!-- end of carousel-inner -->
    </div>

    <div id="btn-group-action" class="btn-group btn-group-action">
        <div class="btn-group-action-container">
            <div class="carousel-indicator">
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="0" class="btn btn-action">
                    <img src="templates/wedding-3/short/_assets/img/icons/home.svg" alt="" class="w-2rem">
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="1" class="btn btn-action">
                    <img src="templates/wedding-3/short/_assets/img/icons/invitation.svg" alt="" class="w-2rem">
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="2" class="btn btn-action">
                    <img src="templates/wedding-3/short/_assets/img/icons/message.svg" alt="" class="w-2rem">
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="3" class="btn btn-action">
                    <img src="templates/wedding-3/short/_assets/img/icons/couple.svg" alt="" class="w-2rem">
                </button>
            </div>
        </div>
    </div>

    <button id="btn-play" class="btn btn-icon btn-icon-page btn-play">
        <i class="ri ri-volume-high"></i>
    </button>

    <audio controls id="audio" class="d-none">
        <source src="templates/wedding-3/short/_assets/music.mp3" type="audio/mpeg">
    </audio>


    <!-- JS -->
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
    <!-- Lightgallery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/js/lightgallery.min.js" integrity="sha512-b4rL1m5b76KrUhDkj2Vf14Y0l1NtbiNXwV+SzOzLGv6Tz1roJHa70yr8RmTUswrauu2Wgb/xBJPR8v80pQYKtQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Countdown -->
    <script src="https://cdn.jsdelivr.net/npm/timezz@6.1.0/dist/timezz.min.js"></script>
    <!-- Aos Animation os scroll -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <!-- Tiny slider -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
    <!-- Anime js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- App -->
    <script src="templates/wedding-3/short/_assets/js/app.js"></script>
</body>
</html>