<!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-5/short/_assets/img/favicon/favicon-16x16.png" sizes="16x16"/>
    <link rel="icon" type="image/png" href="templates/wedding-5/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">
    <!-- Glide -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.core.min.css" integrity="sha512-YQlbvfX5C6Ym6fTUSZ9GZpyB3F92hmQAZTO5YjciedwAaGRI9ccNs4iw2QTCJiSPheUQZomZKHQtuwbHkA9lgw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/css/glide.theme.min.css" integrity="sha512-wCwx+DYp8LDIaTem/rpXubV/C1WiNRsEVqoztV0NZm8tiTvsUeSlA/Uz02VTGSiqfzAHD4RnqVoevMcRZgYEcQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- 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-5/short/_assets/css/app.min.css">
</head>
<body id="index" class="opening-show" style="cursor: default !important;">
<!-- <body> -->

    <section id="opening">
        <div class="container text-center d-flex flex-column align-items-center justify-content-center">
            <div class="img-wrapper-spouse mx-auto mb-4">
                <div class="img-wrapper">
                    <img src="templates/wedding-5/short/_assets/img/misc/header-bridge.jpg" alt="">
                </div>
            </div>

            <h5 class="mb-2">Halo, <span id="guest">Justin Gouse</span></h5>
            <h5>Kami mengundang Anda ke Acara Pernikahan kami</h5>
            <h1 class="spouse-text font-type-secondary my-6">John Doe & Jane Doe</h1>
            <h5>Save the Date</h5>
            <h4>20 - 02 - 2022</h4>

            <div class="row justify-content-center mt-6">
                <div class="col-auto">
                    <button id="btn-open-opening" class="btn btn-sm btn-primary"><i class="ri ri-mail mr-1"></i> Buka Undangan</button>
                </div>
            </div>
        </div>

        <img src="templates/wedding-5/short/_assets/img/decoration/foliage-top-right.png" class="decoration decoration-1" data-aos="fade-down-left" data-aos-offset="-150" data-aos-duration="1200" alt="">
        <img src="templates/wedding-5/short/_assets/img/decoration/foliage-bottom-left.png" class="decoration decoration-2" data-aos="fade-up-right" data-aos-offset="-150" id="opening-decoration-2" 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">
        <div class="carousel-inner">
            <div class="carousel-item active">
                
                <section id="section-1">
                    
                    <div class="container-xxl">
                        <div class="row">
                            <div class="col-lg p-8 p-lg-8">
                                <div class="text-md mb-4">
                                    Assalamu’alaikum Warahmatullahi Wabarakatuh
                                </div>
                                <div class="text-md mb-5">
                                    Dengan memohon rahmat dan ridho Allah Subhanahu Wataala, serta diiringi shalawat dan salam pada baginda Rasulullah, kami bermaksud menyelenggarakan acara akad nikah dan resepsi pernikahan putra dan putri kami tercinta, yakni John Doe dan Jane Doe yang Insya Allah akan dilaksanakan pada:
                                </div>
                                <div class="row mb-4">
                                    <div class="col-lg-6 mb-4 mb-lg-0">
                                        <div class="row align-items-center">
                                            <div class="col-auto"><i class="ri ri-calendar"></i></div>
                                            <div class="col">
                                                <div class="text-md font-semibold">Hari dan Tanggal</div>
                                                <div class="text-md">Minggu, 30 Mei 2021</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="row align-items-center">
                                            <div class="col-auto"><i class="ri ri-calendar"></i></div>
                                            <div class="col">
                                                <div class="text-md font-semibold">Waktu</div>
                                                <div class="text-md">07.00 - Selesai</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row align-items-center mb-4">
                                    <div class="col-auto"><i class="ri ri-pin"></i></div>
                                    <div class="col">
                                        <div class="text-md font-semibold">Lokasi</div>
                                        <div class="text-md">Jl. Lorem ipsum X No. 00</div>
                                    </div>
                                </div>

                                <div class="text-md mb-3">
                                    Kami berterima kasih sebesar-besarnya apabila Bapak/Ibu, Saudara/i berkenan hadir untuk memberikan doa restu untuk kedua mempelai.
                                </div>
                                <div class="text-md">
                                    Wassalamu’alaikum Warahmatullahi Wabarakatuh.
                                </div>
                            </div>
                            <div class="col-lg-auto d-none d-lg-block">
                                <div id="section-1-img-wrapper">
                                    <img src="templates/wedding-5/short/_assets/img/misc/schedule-3.jpg" class="img-content" alt="">

                                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-bottom-right.png" class="decoration" id="img-wrapper-decoration" alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- decoration -->
                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-top-right.png" class="decoration decoration-1" data-aos="fade-down-left" data-aos-offset="-150" data-aos-duration="1200" alt="">
                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-bottom-left.png" class="decoration decoration-2" data-aos="fade-up-right" data-aos-offset="-150" data-aos-duration="1200" alt="">
                </section>

            </div>
            <div class="carousel-item">

                <section id="section-2">
                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-top-right.png" class="decoration decoration-1" data-aos="fade-down-left" data-aos-offset="-150" data-aos-duration="1200" alt="">
                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-bottom-left.png" class="decoration decoration-2" data-aos="fade-up-right" data-aos-offset="-150" data-aos-duration="1200" alt="">

                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 mb-8 mb-lg-0">
                                <h4>Berikan Ucapan dan Doa Terbaik untuk Mempelai</h4>
                                <!-- form ucapan -->
                                <form action="core.php" method="POST">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                                    <div class="mb-3">
                                        <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-3">
                                        <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="my-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>
                                    <div class="mb-5">
                                        <input type="text" name="greeting" id="" placeholder="Tulis pesan dan doa untuk mempelai" 
                                            value="{% if session.flash_old_greeting!=null %} {{session.flash_old_greeting}} {% endif %}"
                                            class="form-control {% if session.flash_greeting!=null %} is-invalid {% else %} is-valid {% endif %}">
                                        {% 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 -->
                            </div>

                            {% if datas.read().in('greetings').count() > 0 %}
                                <div class="col-lg-6">
                                    <div class="card border-0" id="section-2-card-message" style="background-color: #ffffffce;">
                                        <div class="card-body px-4 py-8 h-100">

                                            <ul class="list-group list-group-flush">
                                                {% for data in datas.read().in('greetings').get() %}
                                                    <li class="list-group-item">
                                                        <div class="row align-items-center">
                                                            <div class="col-auto">
                                                                <div class="w-3rem h-3rem bg-secondary rounded-circle d-flex align-items-center justify-content-center">
                                                                    <i class="ri ri-user text-primary font-bold"></i>
                                                                </div>
                                                            </div>
                                                            <div class="col"><h6 class="font-semibold">{{ datas.read().in('rsvp').where('id', '==', data.rsvp_id).first().name }}</h6></div>
                                                            <div class="col-12 mt-4">
                                                                {{ data.greeting }}
                                                            </div>
                                                        </div>
                                                    </li>
                                                {% endfor %}
                                            </ul>

                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </section>

            </div>
            <div class="carousel-item">
                
                <section id="section-3">
                    <div class="container">
                        <h4 class="text-center mb-6">Foto Prewedding Kami</h4>
                        <div style="height: 2px;" class="divider divider-horizontal bg-primary w-22rem mx-auto"></div>

                        <div class="glide mt-10">
                            <div class="glide__track mb-4" data-glide-el="track">
                                <div class="row gx-0 glide__slides">
                                    <div class="col-lg-5 glide__slide">
                                        <div class="obj-fit obj-fit-cover h-24rem h-sm-26rem h-lg-30rem">
                                            <img src="templates/wedding-5/short/_assets/img/gallery/1.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="col-lg-5 glide__slide">
                                        <div class="obj-fit obj-fit-cover h-24rem h-sm-26rem h-lg-30rem">
                                            <img src="templates/wedding-5/short/_assets/img/gallery/2.jpg" alt="">
                                        </div>
                                    </div>
                                    <div class="col-lg-5 glide__slide">
                                        <div class="obj-fit obj-fit-cover h-24rem h-sm-26rem h-lg-30rem">
                                            <img src="templates/wedding-5/short/_assets/img/gallery/3.jpg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div data-glide-el="controls">
                                <button data-glide-dir=">">
                                    <i class="ri ri-chevron-right"></i>
                                </button>
                            </div>

                            <div data-glide-el="controls[nav]">
                                <button data-glide-dir="=0"></button>
                                <button data-glide-dir="=1"></button>
                                <button data-glide-dir="=2"></button>
                            </div>
                        </div>
                    </div>

                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-top-right.png" class="decoration decoration-1" data-aos="fade-down-left" data-aos-offset="-150" data-aos-duration="1200" alt="">
                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-bottom-left.png" class="decoration decoration-2" data-aos="fade-up-right" data-aos-offset="-150" data-aos-duration="1200" alt="">
                </section>

            </div>
            <div class="carousel-item">
                <section id="section-4">
                    <div class="container text-center d-flex flex-column align-items-center justify-content-center">
                        <div class="img-wrapper-spouse mx-auto mb-4">
                            <div class="img-wrapper">
                                <img src="templates/wedding-5/short/_assets/img/misc/header-bridge.jpg" alt="">
                            </div>
                        </div>
                        
                        <div class="text-md">
                            “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.”
                        </div>
                        <img src="templates/wedding-5/short/_assets/img/decoration/foliage-footer.png" alt="" class="w-18rem">
                        <h4 class="my-6">Terimakasih atas doa restunya</h4>
                        <h1 class="spouse-text font-type-secondary mb-6">John Doe & Jane Doe</h1>
                    </div>

                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-top-right.png" class="decoration decoration-1" data-aos="fade-down-left" data-aos-offset="-150" data-aos-duration="1200" alt="">
                    <img src="templates/wedding-5/short/_assets/img/decoration/foliage-bottom-left.png" class="decoration decoration-2" data-aos="fade-up-right" data-aos-offset="-150" data-aos-duration="1200" alt="">
                </section>
            </div>
        </div>
    </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 btn-primary">
                    <i class="ri ri-monitor"></i>
                    <div class="mt-1">Home</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="1" class="btn btn-action btn-primary">
                    <i class="ri ri-chat"></i>
                    <div class="mt-1">RSVP</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="2" class="btn btn-action btn-primary">
                    <i class="ri ri-user-check"></i>
                    <div class="mt-1">Galeri</div>
                </button>
                <button data-bs-target="#carouselExampleFade" data-bs-slide-to="3" class="btn btn-action btn-primary">
                    <i class="ri ri-star"></i>
                    <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-5/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>
    <!-- Glide -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.2.0/glide.min.js" integrity="sha512-IkLiryZhI6G4pnA3bBZzYCT9Ewk87U4DGEOz+TnRD3MrKqaUitt+ssHgn2X/sxoM7FxCP/ROUp6wcxjH/GcI5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Aos Animation os scroll -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.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-5/short/_assets/js/app.js"></script>
</body>
</html>