<!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-6/short/_assets/img/favicon/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="templates/wedding-6/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">
    <!-- 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-6/short/_assets/css/app.min.css">
</head>
<body class="opening-show" style="cursor: default !important;">
<!-- <body> -->

    <section id="opening">
        <div class="container">
            <div class="row align-items-center justify-content-around">
                <div class="col-lg-4 order-2 order-lg-1 text-center text-lg-start">
                    <h5>Halo, <span id="guest">Justin Gouse</span></h5>
                    <h5>Mengundang Anda ke Acara Pernikahan</h5>
                    <h1 class="spouse-text font-type-secondary my-7">John Doe & Jane Doe</h1>
                    <h5>Save the Date</h5>
                    <h4 class="mt-3 mb-8">01.01.2022</h4>
                    <button id="btn-open-opening" class="btn btn-sm btn-primary"><i class="ri ri-mail mr-1"></i> Buka Undangan</button>
                </div>
                <div class="col-lg-auto order-1 order-lg-2">
                    <div class="img-wrapper-spouse mx-auto mb-4">
                        <img src="templates/wedding-6/short/_assets/img/spouse/man-woman.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>

        <img src="templates/wedding-6/short/_assets/img/decoration/leafs-left-1-lt.png" class="decoration" id="opening-decoration-1" data-aos="fade-down-right" data-aos-duration="1200" alt="">
        <img src="templates/wedding-6/short/_assets/img/decoration/leafs-right-2.png" class="decoration" id="opening-decoration-2" data-aos="fade-down-left" data-aos-duration="1200" alt="">
        <img src="templates/wedding-6/short/_assets/img/decoration/leafs-left-1-rb.png" class="decoration" id="opening-decoration-3" data-aos="fade-up-left" data-aos-duration="1200" alt="">
    </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">
                
                <section id="section-1">
                    
                    <div class="container-xxl">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card rounded-0" style="background: rgba(52, 94, 76, 0.815);">
                                    <div class="card-body text-white">
                                        <h6 class="text-height-2">Assalamu’alaikum Warahmatullahi Wabarakatuh</h6>
                                        <h6 class="text-height-2 my-4">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Massa nunc ipsum amet ipsum nibh enim massa purus. Tellus nisl nisl faucibus donec tempor mauris sed eget. Tincidunt enim, laoreet erat vivamus dignissim sit. Curabitur id consectetur sed nisl. Mauris cras tempor nulla imperdiet in eu, blandit arcu urna. Tellus consequat sapien pellentesque semper euismod vitae libero. Enim lacinia quis etiam proin congue nec id neque.
                                        </h6>
                                        <h6 class="text-height-2 mb-4">
                                            Kami berterima kasih sebesar-besarnya apabila Bapak/Ibu, Saudara/i berkenan hadir untuk memberikan doa restu untuk kedua mempelai.
                                        </h6>
                                        <h6 class="text-height-2">Wassalamu’alaikum Warahmatullahi Wabarakatuh</h6>
                                    </div>
                                </div>
                            </div>
                            <!-- divider -->
                            <div class="w-100"></div>
                            <div class="col-lg-auto">
                                <div class="card rounded-0" style="background: rgba(255, 255, 255, 0.925);">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-auto mb-3 mb-lg-0">
                                                <div class="row align-items-center">
                                                    <div class="col-auto"><img src="templates/wedding-6/short/_assets/img/icons/calendar.svg" class="w-2rem" alt=""></div>
                                                    <div class="col">
                                                        <div class="text-spacing-default mb-1">HARI DAN TANGGAL</div>
                                                        <div class="text-dark-500 text-light">Minggu, 30 Mei 2021</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-auto mb-3 mb-lg-0">
                                                <div class="row align-items-center">
                                                    <div class="col-auto"><img src="templates/wedding-6/short/_assets/img/icons/clock.svg" class="w-2rem" alt=""></div>
                                                    <div class="col">
                                                        <div class="text-spacing-default mb-1">WAKTU</div>
                                                        <div class="text-dark-500 text-light">07.00 - Selesai</div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-auto mb-3 mb-lg-0">
                                                <div class="row align-items-center">
                                                    <div class="col-auto"><img src="templates/wedding-6/short/_assets/img/icons/pin.svg" class="w-2rem" alt=""></div>
                                                    <div class="col">
                                                        <div class="text-spacing-default mb-1">HARI DAN TANGGAL</div>
                                                        <div class="text-dark-500 text-light">Minggu, 30 Mei 2021</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <img src="templates/wedding-6/short/_assets/img/decoration/leafs-right-1-rt.png" class="decoration" id="section-1-decoration-1" data-aos="fade-down-left" data-aos-duration="1200" alt="">
                    <img src="templates/wedding-6/short/_assets/img/decoration/leafs-right-1-rb2.png" class="decoration" id="section-1-decoration-2" data-aos="fade-up-left" data-aos-duration="1200" alt="">
                </section>

            </div>
            <div class="carousel-item">
                <section id="section-2">
                    <div class="container-xxl position-relative overflow-hidden">
                        <div class="row justify-content-center">
                            <div class="col-lg-5 pt-10 py-lg-12">
                                
                                <!-- card form -->
                                <div class="card" style="background: rgba(255, 255, 255, 0.925);">
                                    <div class="card-body p-5">
                                        <h3 class="font-type-secondary mb-4">RSVP</h3>
                                        <!-- form ucapan dan doa -->
                                        <form action="core.php" method="POST">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                            <!-- input nama -->
                                            <div class="mb-5">
                                                <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>
                                            <!-- input nomor -->
                                            <div class="mb-5">
                                                <label for="" class="form-label">Nomor WhatsApp atau HP</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>
                                            <!-- input hadir -->
                                            <div class="mb-5">
                                                <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>
                                            <!-- input ucapan -->
                                            <div class="mb-5">
                                                <label for="" class="form-label">Ucapan dan Doa Anda</label>
                                                <textarea name="greeting" id="" cols="30" rows="8" placeholder="Tulis ucapan dan doa anda untuk mempelai pengantin"
                                                    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>
                                        <!-- end of form ucapan dan doa -->
                                    </div>
                                </div>
                                <!-- end of card form -->
                            </div>
                            {% if datas.read().in('greetings').count() > 0 %}
                                <div class="col-lg-6 mt-3 mt-lg-0">
                                    <div id="section-2-list-group"style="background: rgba(255, 255, 255, 0.925);">
                                        <ul class="list-group list-group-flush">
                                            {% for data in datas.read().in('greetings').get() %}
                                                <li class="li list-group-item">
                                                    <h5 class="font-bold mb-2">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().name }}</h5>
                                                    <p class="text-lg font-light mb-3">
                                                        {{ data.greeting }}
                                                    </p>
                                                    <div class="text-dark-500 font-light">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().created_at | timeago }}</div>
                                                </li>
                                            {% endfor %}                                                
                                        </ul>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </section>
            </div>
            <div class="carousel-item">
                <section id="section-3">
                    <div id="tinyslider-container-wrapper">
                        <div id="tinyslider-container" class="tinyslider">
                            <div class="tinyslider-item">
                                <img src="templates/wedding-6/short/_assets/img/gallery/1.jpg" alt="">
                            </div>
                            <div class="tinyslider-item">
                                <img src="templates/wedding-6/short/_assets/img/gallery/2.jpg" alt="">
                            </div>
                            <div class="tinyslider-item">
                                <img src="templates/wedding-6/short/_assets/img/gallery/3.jpg" alt="">
                            </div>
                            <div class="tinyslider-item">
                                <img src="templates/wedding-6/short/_assets/img/gallery/4.jpg" alt="">
                            </div>
                        </div>
                    </div>

                    <div id="tinyslider-controls-wrapper">
                        <div id="tinyslider-controls" class="row justify-content-end">
                            <div class="col-auto d-none">
                                <img src="templates/wedding-6/short/_assets/img/icons/tinyslider-next.png" alt="">
                            </div>
                            <div class="col-auto">
                                <img src="templates/wedding-6/short/_assets/img/icons/tinyslider-next.png" class="csr-pointer w-5rem w-lg-10rem" alt="">
                            </div>
                        </div>
                    </div>

                    <div id="tinyslider-thumbnails-wrapper">
                        <div id="tinyslider-thumbnails" >
                            <div class="tinyslider-thumbnail">
                                <img src="templates/wedding-6/short/_assets/img/gallery/1.jpg" alt="">
                            </div>
                            <div class="tinyslider-thumbnail">
                                <img src="templates/wedding-6/short/_assets/img/gallery/2.jpg" alt="">
                            </div>
                            <div class="tinyslider-thumbnail">
                                <img src="templates/wedding-6/short/_assets/img/gallery/3.jpg" alt="">
                            </div>
                            <div class="tinyslider-thumbnail">
                                <img src="templates/wedding-6/short/_assets/img/gallery/4.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="carousel-item">
                <section id="section-4">
                    <div class="container text-center">
                        <div class="img-wrapper-spouse mx-auto mb-4">
                            <div class="img-wrapper">
                                <img src="templates/wedding-6/short/_assets/img/spouse/man-woman.jpg" alt="">
                            </div>
                        </div>
                        <h5 class="font-light my-6">
                            “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tristique facilisi metus pretium hendrerit feugiat ornare sed nunc, suspendisse. Odio a nunc id purus. Erat diam mattis tempor scelerisque risus. Non, proin sit enim at nulla at.”
                        </h5>
                        <h4 class="font-type-secondary text-dark-500">Terimakasih atas doa restunya</h4>
                        <h2 class="font-type-secondary text-black">John & Jane</h2>
                    </div>

                    <img src="templates/wedding-6/short/_assets/img/decoration/flowers-bottom.png" alt="" class="decoration" id="section-4-decoration-1" data-aos="fade-up" data-aos-duration="1200">
                </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-6/short/_assets/img/icons/house.svg" alt="" class="w-2rem w-lg-3rem mb-1">
                    <div class="mt-1">Home</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="1" class="btn btn-action">
                    <img src="templates/wedding-6/short/_assets/img/icons/speech-bubble.svg" alt="" class="w-2rem w-lg-3rem mb-1">
                    <div class="mt-1">RSVP</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="2" class="btn btn-action">
                    <img src="templates/wedding-6/short/_assets/img/icons/image.svg" alt="" class="w-2rem w-lg-3rem mb-1">
                    <div class="mt-1">Galeri</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="3" class="btn btn-action">
                    <img src="templates/wedding-6/short/_assets/img/icons/heart-balloon.svg" alt="" class="w-2rem w-lg-3rem mb-1">
                    <div class="mt-1">Quote</div>
                </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-6/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-6/short/_assets/js/app.js"></script>
</body>
</html>