Find this useful? Enter your email to receive occasional updates for securing PHP code.

Signing you up...

Thank you for signing up!

PHP Decode

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewp..

Decoded Output download

<?  <!doctype html> 
<html lang="en"> 
 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Yusuf & Anggi | Undangan Virtual</title> 
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> 
  <meta content='https://danielcorsel.my.id/wedding/img/thumbnail.jpg' property='og:image' /> 
 
  <link rel="preconnect" href="https://fonts.googleapis.com"> 
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
  <link 
    href="https://fonts.googleapis.com/css2?family=Sacramento&family=Work+Sans:wght@100;300;400;600;700&display=swap" 
    rel="stylesheet"> 
 
  <!-- simplyCountdown --> 
  <link rel="stylesheet" href="countdown/simplyCountdown.theme.default.css" /> 
  <script src="countdown/simplyCountdown.min.js"></script> 
 
  <!-- Bootstrap Icons --> 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 
 
  <link rel="stylesheet" href="style.css"> 
 
</head> 
 
<body> 
 
  <section id="hero" 
    class="hero w-100 h-100 p-3 mx-auto text-center d-flex justify-content-center align-items-center text-white"> 
    <main> 
      <h4>Kepada Yth. Bapak/Ibu/Saudara/i</h4> 
      <h2><span></span></h2> 
      <br> 
      <h1>Yusuf & Anggi </h1> 
 
      <p>Akan melangsungkan resepsi pernikahan dalam:</p> 
      <div class="simply-countdown"></div> 
      <a href="#home" class="btn btn-lg mt-4" onClick="enableScroll()">Lihat Undangan</a> 
    </main> 
 
  </section> 
 
  <nav class="navbar navbar-expand-md bg-transparent sticky-top mynavbar"> 
    <div class="container"> 
      <a class="navbar-brand" href="#">Danix</a> 
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" 
        aria-controls="offcanvasNavbar" aria-label="Toggle navigation"> 
        <span class="navbar-toggler-icon"></span> 
      </button> 
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel"> 
        <div class="offcanvas-header"> 
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">dino</h5> 
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> 
        </div> 
        <div class="offcanvas-body"> 
          <div class="navbar-nav ms-auto"> 
            <a class="nav-link" href="#home">Home</a> 
            <a class="nav-link" href="#info">Info</a> 
            <a class="nav-link" href="#story">Story</a> 
            <a class="nav-link" href="#gallery">Gallery</a> 
            <a class="nav-link" href="#rsvp">RSVP</a> 
            <a class="nav-link" href="#gifts">Gifts</a> 
          </div> 
        </div> 
      </div> 
    </div> 
  </nav> 
 
  <section id="home" class="home"> 
    <div class="container"> 
      <div class="row justify-content-center"> 
        <div class="col-md-8 text-center"> 
          <h2>Acara Pernikahan</h2> 
          <h3>Diselenggarakan pada Sabtu, 06 Juli 2024 di Dusun Sukadamai 
            Desa Kayu Calla Kec. Rarossa.</h3> 
          <p>Oleh karena itu, dengan segala hormat, kami bermaksud untuk mengundang Bapak/Ibu, Saudara/i, untuk hadir 
            pada acara pernikahan kami. </p> 
        </div> 
      </div> 
 
      <div class="row couple"> 
        <div class="col-lg-6"> 
          <div class="row"> 
            <div class="col-8 text-end"> 
              <h3>Muhammad Yusuf Dm (Yusuf)</h3> 
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque praesentium aut ipsa perferendis, 
                incidunt soluta?</p> 
              <p>Putra dari Bpk. ??? <br> dan <br> Ibu ?????</p> 
            </div> 
            <div class="col-4"> 
              <img src="img/peria.jpg" alt="peria" class="img-responsive rounded-circle"> 
            </div> 
          </div> 
        </div> 
 
        <span class="heart"><i class="bi bi-heart-fill"></i></span> 
 
        <div class="col-lg-6"> 
          <div class="row"> 
            <div class="col-4"> 
              <img src="img/wanita.jpg" alt="wanita" class="img-responsive rounded-circle"> 
            </div> 
            <div class="col-8"> 
              <h3>Kartina Anggreani (Anggi)</h3> 
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque praesentium aut ipsa perferendis, 
                incidunt soluta?</p> 
              <p>Putra dari Bpk. ????? <br> dan <br> Ibu ???</p> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </section> 
 
 
  <section id="info" class="info"> 
    <div class="container"> 
      <div class="row justify-content-center"> 
        <div class="col-md-8 col-10 text-center"> 
          <h2>Informasi Acara</h2> 
          <p class="alamat">Alamat: Mora 2 lrg 3 Dusun Sukadamai 
            Desa Kayu Calla Kec. Karossa</p> 
 
          <iframe 
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9484.80450365687!2d119.37674588268126!3d-1.7910777076046909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2d8d0972a084c473%3A0x3c6ed203e2de06f!2sMYC%20RELOAD!5e0!3m2!1sen!2ssg!4v1719558223648!5m2!1sen!2ssg" 
            width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy" 
            referrerpolicy="no-referrer-when-downgrade"></iframe> 
 
          <a href="https://maps.app.goo.gl/CgSbbJvuGPb4jyXo6" target="_blank" class="btn btn-light btn-sm my-3">Klik 
            untuk 
            membuka peta</a> 
          <p class="description">Diharapkan untuk tidak salah alamat dan tanggal. Manakala tiba di tujuan namun tidak 
            ada tanda-tanda sedang dilangsungkan pernikahan, boleh jadi Anda salah jadwal, atau salah tempat.</p> 
        </div> 
      </div> 
 
      <div class="row justify-content-center mt-4"> 
        <div class="col-md-5 col-10"> 
          <div class="card text-center text-bg-light mb-5"> 
            <div class="card-header">Akad Nikah</div> 
            <div class="card-body"> 
              <div class="row justify-content-center"> 
                <div class="col-md-6"> 
                  <i class="bi bi-clock d-block"></i> 
                  <span>09.00 Wita - selesai</span> 
                </div> 
                <div class="col-md-6"> 
                  <i class="bi bi-calendar3 d-block"></i> 
                  <span>Sabtu 06 Juli 2024</span> 
                </div> 
              </div> 
            </div> 
            <div class="card-footer"> 
              Saat acara akad diharapkan untuk kondusif menjaga kekhidmatan dan kekhusyuan seluruh prosesi. 
            </div> 
          </div> 
        </div> 
        <div class="col-md-5 col-10"> 
          <div class="card text-center text-bg-light"> 
            <div class="card-header">Resepsi</div> 
            <div class="card-body"> 
              <div class="row justify-content-center"> 
                <div class="col-md-6"> 
                  <i class="bi bi-clock d-block"></i> 
                  <span>10.00 Wita - selesai</span> 
                </div> 
                <div class="col-md-6"> 
                  <i class="bi bi-calendar3 d-block"></i> 
                  <span>Sabtu 06 Juli 2024</span> 
                </div> 
              </div> 
            </div> 
            <div class="card-footer"> 
              Saat acara akad diharapkan untuk kondusif menjaga kekhidmatan dan kekhusyuan seluruh prosesi. 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </section> 
 
  <section id="story" class="story"> 
    <div class="container"> 
      <div class="row justify-content-center"> 
        <div class="col-md-8 col-10 text-center"> 
          <span>Bagaimana Cinta Kami Bersemi</span> 
          <h2>Cerita Kami</h2> 
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, similique non soluta nulla asperiores 
            voluptatem.</p> 
        </div> 
      </div> 
 
      <div class="row"> 
        <div class="col"> 
          <ul class="timeline"> 
            <li> 
              <div class="timeline-image" style="background-image: url(img/sman23.jpg);"></div> 
              <div class="timeline-panel"> 
                <div class="timeline-heading"> 
                  <h3>Pertama Bertemu</h3> 
                  <span>1 Juni 1998</span> 
                </div> 
                <div class="timeline-body"> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, modi autem? Commodi autem quo quia? 
                  </p> 
                </div> 
              </div> 
 
            </li> 
            <li class="timeline-inverted"> 
              <div class="timeline-image" style="background-image: url(https://picsum.photos/300/300);"></div> 
              <div class="timeline-panel"> 
                <div class="timeline-heading"> 
                  <h3>Mulai Serius</h3> 
                  <span>1 Januari 2005</span> 
                </div> 
                <div class="timeline-body"> 
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto enim eaque obcaecati odit 
                    itaque explicabo quisquam quos at. 
                  </p> 
                </div> 
              </div> 
 
            </li> 
            <li> 
              <div class="timeline-image" style="background-image: url(https://picsum.photos/301/301);"></div> 
              <div class="timeline-panel"> 
                <div class="timeline-heading"> 
                  <h3>Tunangan</h3> 
                  <span>7 November 2009</span> 
                </div> 
                <div class="timeline-body"> 
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, deleniti distinctio. Esse quas sit 
                  explicabo corporis magni qui expedita a. 
                </div> 
              </div> 
            </li> 
          </ul> 
        </div> 
      </div> 
    </div> 
  </section> 
 
  <section id="gallery" class="gallery"> 
    <div class="container"> 
      <div class="row justify-content-center"> 
        <div class="col-md-8 col-10 text-center"> 
          <span>Memori Kisah Kami</span> 
          <h2>Galeri Foto</h2> 
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, itaque?</p> 
        </div> 
      </div> 
 
      <div class="row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center"> 
        <div class="col mt-3"> 
          <a href="img/gallery/2.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 1" data-gallery="mygallery"> 
            <img src="img/gallery/2.jpg" alt="Yusuf & Anggi 1" class="img-fluid w-100 rounded"> 
          </a> 
        </div> 
        <div class="col mt-3"> 
          <a href="img/gallery/3.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 2" data-gallery="mygallery"> 
            <img src="img/gallery/3.jpg" alt="Yusuf & Anggi 2" class="img-fluid w-100 rounded"> 
          </a> 
        </div> 
        <div class="col mt-3"> 
          <a href="img/gallery/4.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 3" data-gallery="mygallery"> 
            <img src="img/gallery/4.jpg" alt="Yusuf & Anggi 3" class="img-fluid w-100 rounded"> 
          </a> 
        </div> 
        <div class="col mt-3"> 
          <a href="img/gallery/5.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 4" data-gallery="mygallery"> 
            <img src="img/gallery/5.jpg" alt="Yusuf & Anggi 4" class="img-fluid w-100 rounded"> 
          </a> 
        </div> 
        <div class="col mt-3"> 
          <a href="img/gallery/6.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 4" data-gallery="mygallery"> 
            <img src="img/gallery/6.jpg" alt="Yusuf & Anggi 4" class="img-fluid w-100 rounded"> 
          </a> 
        </div> 
        </a> 
      </div> 
    </div> 
    </div> 
  </section> 
 
  <section id="rsvp" class="rsvp"> 
    <div class="container"> 
      <div class="row justify-content-center"> 
        <div class="col-md-8 col-10 text-center"> 
          <h2>Konfirmasi Kehadiran</h2> 
          <p>Isi form di bawah ini untuk melakukan konfirmasi kehadiran.</p> 
        </div> 
      </div> 
 
      <form class="container text-center col-md-8 col-10 align-items-center justify-content-center" method="POST" 
        action="https://script.google.com/macros/s/AKfycbzvAE5Umsk20OZ_9FiZx9UaXghJdyIlmHSKEv4LwDq9iNdP7tfZ0L5Qus8CBQtcJpfZuA/exec" 
        id="my-form"> 
        <div class="col-md-6 offset-md-3"> 
          <div class="mb-3"> 
            <label for="nama" class="form-label">Nama</label> 
            <input type="text" class="form-control" id="nama" name="nama"> 
          </div> 
        </div> 
        <div class="col-md-6 offset-md-3"> 
          <div class="mb-3"> 
            <label for="jumlah" class="form-label">Jumlah</label> 
            <input type="number" class="form-control" id="jumlah" name="jumlah" min="1" max="5" length="1" value="1"> 
          </div> 
        </div> 
        <div class="col-md-6 offset-md-3"> 
          <div class="mb-3"> 
            <label for="status" class="form-label">Konfirmasi Kehadiran</label> 
            <select name="status" id="status" class="form-select"> 
              <option selected>Hadir</option> 
              <option value="Tidak Hadir">Tidak Hadir</option> 
              <option value="Ragu Ragu">Maaf Masi Ragu</option> 
            </select> 
          </div> 
        </div> 
        <div class="col-md-6 offset-md-3"> 
          <div class="mb-3"> 
            <label for="komentar" class="form-label">Komentar</label> 
            <textarea type="text" class="form-control" id="komentar" name="komentar" rows="3"></textarea> 
          </div> 
        </div> 
        <div class="col-12" style="margin-top: 35px;"> 
          <button class="btn btn-primary">Kirim</button> 
        </div> 
 
 
      </form> 
 
      <div class="row justify-content-center mt-5"> 
        <div class="col-md-6"> 
          <p id="data"></p> 
          <script type="text/javascript"> 
 
            fetch('https://script.googleusercontent.com/macros/echo?user_content_key=8pYnBG23ZhEktYWwXGRC-PvUlyhzZgyqhXl3eeVt2eFpWafJDiywpe5-0lWKbtI0WVuTbmkzmqlgRNElETzwUlT4be7kJPNRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnGCD8gFr0GmwZFA12MnjxjTURui5ItFPv7Ccie0LFHqxZ05gNaqymvS4LCh1VJEMdm4WEOOJWkhC9CXHkZHrAOBRV7LFLxNHrdz9Jw9Md8uu&lib=M8aEmX_G6RYpehN77Hbc-bAWST27xRaaO') 
 
              .then(function (response) { 
                return response.json(); 
              }) 
 
              .then(function ({ data }) { 
                for (var i = 0; i < data.length; i++) { 
                  document.getElementById("data").innerHTML += 
                    data[i].nama + " - " + data[i].status + "<br />" + 
                    data[i].komentar + "<hr>"; 
                } 
              }) 
              .catch(function (err) { 
                console.log(err); 
              }); 
 
          </script> 
          <noscript>Please enable JavaScript to view the <a href="https://undanganvirtual.com">comments powered by 
              Undangan Virtual.</a></noscript> 
        </div> 
      </div> 
 
    </div> 
  </section> 
 
  <section id="gifts" class="gifts"> 
    <div class="container"> 
      <div class="row justify-content-center"> 
        <div class="col-md-8 col-10 text-center"> 
          <span>ungkapan tanda kasih</span> 
          <h2>Kirim Hadiah</h2> 
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam iure perferendis provident ab aliquam nemo. 
          </p> 
        </div> 
      </div> 
 
      <div class="row justify-content-center text-center"> 
        <div class="col-md-6"> 
          <ul class="list-group"> 
            <li class="list-group-item"> 
              <div class="fw-bold">BCA</div> 
              123456789 - MUHAMMAD YUSUF DM (Yusuf) 
            </li> 
            <li class="list-group-item"> 
              <div class="fw-bold">MANDIRI</div> 
              987654321 - MUHAMMAD YUSUF DM (Yusuf) 
            </li> 
            <li class="list-group-item"> 
              <div class="fw-bold">QR Code Dana</div> 
              <img src="img/saweria.png" alt="Saweria QR" class="img-thumbnail" width="150"> 
            </li> 
          </ul> 
        </div> 
      </div> 
    </div> 
  </section> 
 
  <footer> 
    <div class="container"> 
      <div class="row"> 
        <div class="col text-center"> 
          <img src="img/logo.png" alt="Logo" class="img-thumbnail" width="150"> 
          <br> 
          <br> 
          <small class="block">&copy; 2024 Undangan Virtual. All Rights Reserved.</small> 
          <small class="block">Design by <a href="https://aksesglobalmultimedia.com/pulsa.html">Wonk N'deso</a>.</small> 
 
          <ul class="mt-3"> 
            <li><a href="#"><i class="bi bi-instagram"></i></a></li> 
            <li><a href="#"><i class="bi bi-youtube"></i></a></li> 
            <li><a href="#"><i class="bi bi-twitter"></i></a></li> 
            <li><a href="#"><i class="bi bi-facebook"></i></a></li> 
            <li><a href="#"><i class="bi bi-tiktok"></i></a></li> 
          </ul> 
        </div> 
      </div> 
    </div> 
  </footer> 
 
  <div id="audio-containerc"> 
    <audio id="song" autoplay loop> 
      <source src="audio/save-and-sound.mp3" type="audio/mp3"> 
    </audio> 
 
    <div class="audio-icon-wrapper" style="display: none;"> 
      <i class="bi bi-disc"></i> 
    </div> 
  </div> 
 
 
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" 
    crossorigin="anonymous"></script> 
 
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.bundle.min.js"></script> 
 
  <script> 
    simplyCountdown('.simply-countdown', { 
      year: 2024, // required 
      month: 7, // required 
      day: 6, // required 
      hours: 9, // Default is 0 [0-23] integer 
      words: { //words displayed into the countdown 
        days: { singular: 'hari', plural: 'hari' }, 
        hours: { singular: 'jam', plural: 'jam' }, 
        minutes: { singular: 'menit', plural: 'menit' }, 
        seconds: { singular: 'detik', plural: 'detik' } 
      }, 
    }); 
  </script> 
 
  <script> 
    const stickyTop = document.querySelector('.sticky-top'); 
    const offcanvas = document.querySelector('.offcanvas'); 
 
    offcanvas.addEventListener('show.bs.offcanvas', function () { 
      stickyTop.style.overflow = 'visible'; 
    }); 
 
    offcanvas.addEventListener('hidden.bs.offcanvas', function () { 
      stickyTop.style.overflow = 'hidden'; 
    }); 
 
  </script> 
 
  <script> 
    const rootElement = document.querySelector(":root"); 
    const audioIconWrapper = document.querySelector('.audio-icon-wrapper'); 
    const audioIcon = document.querySelector('.audio-icon-wrapper i'); 
    const song = document.querySelector('#song'); 
    let isPlaying = false; 
 
    function disableScroll() { 
      scrollTop = window.pageYOffset || document.documentElement.scrollTop; 
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; 
 
      window.onscroll = function () { 
        window.scrollTo(scrollTop, scrollLeft); 
      } 
 
      rootElement.style.scrollBehavior = 'auto'; 
    } 
 
    function enableScroll() { 
      window.onscroll = function () { } 
      rootElement.style.scrollBehavior = 'smooth'; 
      // localStorage.setItem('opened', 'true'); 
      playAudio(); 
    } 
 
    function playAudio() { 
      audioIconWrapper.style.display = 'flex'; 
      song.play(); 
      isPlaying = true; 
    } 
 
    audioIconWrapper.onclick = function () { 
      if (isPlaying) { 
        song.pause(); 
        audioIcon.classList.remove('bi-disc'); 
        audioIcon.classList.add('bi-pause-circle'); 
      } else { 
        song.play(); 
        audioIcon.classList.add('bi-disc'); 
        audioIcon.classList.remove('bi-pause-circle'); 
      } 
 
      isPlaying = !isPlaying; 
    } 
 
    // if (!localStorage.getItem('opened')) { 
    //   disableScroll(); 
    // } 
    disableScroll(); 
  </script> 
  <script> 
    window.addEventListener("load", function () { 
      const form = document.getElementById('my-form'); 
      form.addEventListener("submit", function (e) { 
        e.preventDefault(); 
        const data = new FormData(form); 
        const action = e.target.action; 
        fetch(action, { 
          method: 'POST', 
          body: data, 
        }) 
          .then(() => { 
            alert("Konfirmasi kehadiran berhasil terkirim!"); 
          }) 
      }); 
    }); 
 
  </script> 
  <script> 
    const urlParams = new URLSearchParams(window.location.search); 
    const nama = urlParams.get('to') || ''; 
    const namaContainer = document.querySelector('.hero h2 span'); 
    namaContainer.innerText = `${nama}`.replace(/ ,$/, ','); 
 
    document.querySelector('#nama').value = nama; 
  </script> 
</body> 
 
</html> ?>

Did this file decode correctly?

Original Code

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Yusuf & Anggi | Undangan Virtual</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <meta content='https://danielcorsel.my.id/wedding/img/thumbnail.jpg' property='og:image' />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Sacramento&family=Work+Sans:wght@100;300;400;600;700&display=swap"
    rel="stylesheet">

  <!-- simplyCountdown -->
  <link rel="stylesheet" href="countdown/simplyCountdown.theme.default.css" />
  <script src="countdown/simplyCountdown.min.js"></script>

  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <section id="hero"
    class="hero w-100 h-100 p-3 mx-auto text-center d-flex justify-content-center align-items-center text-white">
    <main>
      <h4>Kepada Yth. Bapak/Ibu/Saudara/i</h4>
      <h2><span></span></h2>
      <br>
      <h1>Yusuf & Anggi </h1>

      <p>Akan melangsungkan resepsi pernikahan dalam:</p>
      <div class="simply-countdown"></div>
      <a href="#home" class="btn btn-lg mt-4" onClick="enableScroll()">Lihat Undangan</a>
    </main>

  </section>

  <nav class="navbar navbar-expand-md bg-transparent sticky-top mynavbar">
    <div class="container">
      <a class="navbar-brand" href="#">Danix</a>
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
        aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">dino</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <div class="navbar-nav ms-auto">
            <a class="nav-link" href="#home">Home</a>
            <a class="nav-link" href="#info">Info</a>
            <a class="nav-link" href="#story">Story</a>
            <a class="nav-link" href="#gallery">Gallery</a>
            <a class="nav-link" href="#rsvp">RSVP</a>
            <a class="nav-link" href="#gifts">Gifts</a>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <section id="home" class="home">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 text-center">
          <h2>Acara Pernikahan</h2>
          <h3>Diselenggarakan pada Sabtu, 06 Juli 2024 di Dusun Sukadamai
            Desa Kayu Calla Kec. Rarossa.</h3>
          <p>Oleh karena itu, dengan segala hormat, kami bermaksud untuk mengundang Bapak/Ibu, Saudara/i, untuk hadir
            pada acara pernikahan kami. </p>
        </div>
      </div>

      <div class="row couple">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-8 text-end">
              <h3>Muhammad Yusuf Dm (Yusuf)</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque praesentium aut ipsa perferendis,
                incidunt soluta?</p>
              <p>Putra dari Bpk. ??? <br> dan <br> Ibu ?????</p>
            </div>
            <div class="col-4">
              <img src="img/peria.jpg" alt="peria" class="img-responsive rounded-circle">
            </div>
          </div>
        </div>

        <span class="heart"><i class="bi bi-heart-fill"></i></span>

        <div class="col-lg-6">
          <div class="row">
            <div class="col-4">
              <img src="img/wanita.jpg" alt="wanita" class="img-responsive rounded-circle">
            </div>
            <div class="col-8">
              <h3>Kartina Anggreani (Anggi)</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque praesentium aut ipsa perferendis,
                incidunt soluta?</p>
              <p>Putra dari Bpk. ????? <br> dan <br> Ibu ???</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>


  <section id="info" class="info">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-10 text-center">
          <h2>Informasi Acara</h2>
          <p class="alamat">Alamat: Mora 2 lrg 3 Dusun Sukadamai
            Desa Kayu Calla Kec. Karossa</p>

          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d9484.80450365687!2d119.37674588268126!3d-1.7910777076046909!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2d8d0972a084c473%3A0x3c6ed203e2de06f!2sMYC%20RELOAD!5e0!3m2!1sen!2ssg!4v1719558223648!5m2!1sen!2ssg"
            width="100%" height="250" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>

          <a href="https://maps.app.goo.gl/CgSbbJvuGPb4jyXo6" target="_blank" class="btn btn-light btn-sm my-3">Klik
            untuk
            membuka peta</a>
          <p class="description">Diharapkan untuk tidak salah alamat dan tanggal. Manakala tiba di tujuan namun tidak
            ada tanda-tanda sedang dilangsungkan pernikahan, boleh jadi Anda salah jadwal, atau salah tempat.</p>
        </div>
      </div>

      <div class="row justify-content-center mt-4">
        <div class="col-md-5 col-10">
          <div class="card text-center text-bg-light mb-5">
            <div class="card-header">Akad Nikah</div>
            <div class="card-body">
              <div class="row justify-content-center">
                <div class="col-md-6">
                  <i class="bi bi-clock d-block"></i>
                  <span>09.00 Wita - selesai</span>
                </div>
                <div class="col-md-6">
                  <i class="bi bi-calendar3 d-block"></i>
                  <span>Sabtu 06 Juli 2024</span>
                </div>
              </div>
            </div>
            <div class="card-footer">
              Saat acara akad diharapkan untuk kondusif menjaga kekhidmatan dan kekhusyuan seluruh prosesi.
            </div>
          </div>
        </div>
        <div class="col-md-5 col-10">
          <div class="card text-center text-bg-light">
            <div class="card-header">Resepsi</div>
            <div class="card-body">
              <div class="row justify-content-center">
                <div class="col-md-6">
                  <i class="bi bi-clock d-block"></i>
                  <span>10.00 Wita - selesai</span>
                </div>
                <div class="col-md-6">
                  <i class="bi bi-calendar3 d-block"></i>
                  <span>Sabtu 06 Juli 2024</span>
                </div>
              </div>
            </div>
            <div class="card-footer">
              Saat acara akad diharapkan untuk kondusif menjaga kekhidmatan dan kekhusyuan seluruh prosesi.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="story" class="story">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-10 text-center">
          <span>Bagaimana Cinta Kami Bersemi</span>
          <h2>Cerita Kami</h2>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, similique non soluta nulla asperiores
            voluptatem.</p>
        </div>
      </div>

      <div class="row">
        <div class="col">
          <ul class="timeline">
            <li>
              <div class="timeline-image" style="background-image: url(img/sman23.jpg);"></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h3>Pertama Bertemu</h3>
                  <span>1 Juni 1998</span>
                </div>
                <div class="timeline-body">
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, modi autem? Commodi autem quo quia?
                  </p>
                </div>
              </div>

            </li>
            <li class="timeline-inverted">
              <div class="timeline-image" style="background-image: url(https://picsum.photos/300/300);"></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h3>Mulai Serius</h3>
                  <span>1 Januari 2005</span>
                </div>
                <div class="timeline-body">
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto enim eaque obcaecati odit
                    itaque explicabo quisquam quos at.
                  </p>
                </div>
              </div>

            </li>
            <li>
              <div class="timeline-image" style="background-image: url(https://picsum.photos/301/301);"></div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h3>Tunangan</h3>
                  <span>7 November 2009</span>
                </div>
                <div class="timeline-body">
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, deleniti distinctio. Esse quas sit
                  explicabo corporis magni qui expedita a.
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section id="gallery" class="gallery">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-10 text-center">
          <span>Memori Kisah Kami</span>
          <h2>Galeri Foto</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, itaque?</p>
        </div>
      </div>

      <div class="row row-cols-lg-4 row-cols-md-3 row-cols-sm-2 row-cols-1 justify-content-center">
        <div class="col mt-3">
          <a href="img/gallery/2.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 1" data-gallery="mygallery">
            <img src="img/gallery/2.jpg" alt="Yusuf & Anggi 1" class="img-fluid w-100 rounded">
          </a>
        </div>
        <div class="col mt-3">
          <a href="img/gallery/3.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 2" data-gallery="mygallery">
            <img src="img/gallery/3.jpg" alt="Yusuf & Anggi 2" class="img-fluid w-100 rounded">
          </a>
        </div>
        <div class="col mt-3">
          <a href="img/gallery/4.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 3" data-gallery="mygallery">
            <img src="img/gallery/4.jpg" alt="Yusuf & Anggi 3" class="img-fluid w-100 rounded">
          </a>
        </div>
        <div class="col mt-3">
          <a href="img/gallery/5.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 4" data-gallery="mygallery">
            <img src="img/gallery/5.jpg" alt="Yusuf & Anggi 4" class="img-fluid w-100 rounded">
          </a>
        </div>
        <div class="col mt-3">
          <a href="img/gallery/6.jpg" data-toggle="lightbox" data-caption="Yusuf & Anggi 4" data-gallery="mygallery">
            <img src="img/gallery/6.jpg" alt="Yusuf & Anggi 4" class="img-fluid w-100 rounded">
          </a>
        </div>
        </a>
      </div>
    </div>
    </div>
  </section>

  <section id="rsvp" class="rsvp">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-10 text-center">
          <h2>Konfirmasi Kehadiran</h2>
          <p>Isi form di bawah ini untuk melakukan konfirmasi kehadiran.</p>
        </div>
      </div>

      <form class="container text-center col-md-8 col-10 align-items-center justify-content-center" method="POST"
        action="https://script.google.com/macros/s/AKfycbzvAE5Umsk20OZ_9FiZx9UaXghJdyIlmHSKEv4LwDq9iNdP7tfZ0L5Qus8CBQtcJpfZuA/exec"
        id="my-form">
        <div class="col-md-6 offset-md-3">
          <div class="mb-3">
            <label for="nama" class="form-label">Nama</label>
            <input type="text" class="form-control" id="nama" name="nama">
          </div>
        </div>
        <div class="col-md-6 offset-md-3">
          <div class="mb-3">
            <label for="jumlah" class="form-label">Jumlah</label>
            <input type="number" class="form-control" id="jumlah" name="jumlah" min="1" max="5" length="1" value="1">
          </div>
        </div>
        <div class="col-md-6 offset-md-3">
          <div class="mb-3">
            <label for="status" class="form-label">Konfirmasi Kehadiran</label>
            <select name="status" id="status" class="form-select">
              <option selected>Hadir</option>
              <option value="Tidak Hadir">Tidak Hadir</option>
              <option value="Ragu Ragu">Maaf Masi Ragu</option>
            </select>
          </div>
        </div>
        <div class="col-md-6 offset-md-3">
          <div class="mb-3">
            <label for="komentar" class="form-label">Komentar</label>
            <textarea type="text" class="form-control" id="komentar" name="komentar" rows="3"></textarea>
          </div>
        </div>
        <div class="col-12" style="margin-top: 35px;">
          <button class="btn btn-primary">Kirim</button>
        </div>


      </form>

      <div class="row justify-content-center mt-5">
        <div class="col-md-6">
          <p id="data"></p>
          <script type="text/javascript">

            fetch('https://script.googleusercontent.com/macros/echo?user_content_key=8pYnBG23ZhEktYWwXGRC-PvUlyhzZgyqhXl3eeVt2eFpWafJDiywpe5-0lWKbtI0WVuTbmkzmqlgRNElETzwUlT4be7kJPNRm5_BxDlH2jW0nuo2oDemN9CCS2h10ox_1xSncGQajx_ryfhECjZEnGCD8gFr0GmwZFA12MnjxjTURui5ItFPv7Ccie0LFHqxZ05gNaqymvS4LCh1VJEMdm4WEOOJWkhC9CXHkZHrAOBRV7LFLxNHrdz9Jw9Md8uu&lib=M8aEmX_G6RYpehN77Hbc-bAWST27xRaaO')

              .then(function (response) {
                return response.json();
              })

              .then(function ({ data }) {
                for (var i = 0; i < data.length; i++) {
                  document.getElementById("data").innerHTML +=
                    data[i].nama + " - " + data[i].status + "<br />" +
                    data[i].komentar + "<hr>";
                }
              })
              .catch(function (err) {
                console.log(err);
              });

          </script>
          <noscript>Please enable JavaScript to view the <a href="https://undanganvirtual.com">comments powered by
              Undangan Virtual.</a></noscript>
        </div>
      </div>

    </div>
  </section>

  <section id="gifts" class="gifts">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-8 col-10 text-center">
          <span>ungkapan tanda kasih</span>
          <h2>Kirim Hadiah</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam iure perferendis provident ab aliquam nemo.
          </p>
        </div>
      </div>

      <div class="row justify-content-center text-center">
        <div class="col-md-6">
          <ul class="list-group">
            <li class="list-group-item">
              <div class="fw-bold">BCA</div>
              123456789 - MUHAMMAD YUSUF DM (Yusuf)
            </li>
            <li class="list-group-item">
              <div class="fw-bold">MANDIRI</div>
              987654321 - MUHAMMAD YUSUF DM (Yusuf)
            </li>
            <li class="list-group-item">
              <div class="fw-bold">QR Code Dana</div>
              <img src="img/saweria.png" alt="Saweria QR" class="img-thumbnail" width="150">
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <footer>
    <div class="container">
      <div class="row">
        <div class="col text-center">
          <img src="img/logo.png" alt="Logo" class="img-thumbnail" width="150">
          <br>
          <br>
          <small class="block">&copy; 2024 Undangan Virtual. All Rights Reserved.</small>
          <small class="block">Design by <a href="https://aksesglobalmultimedia.com/pulsa.html">Wonk N'deso</a>.</small>

          <ul class="mt-3">
            <li><a href="#"><i class="bi bi-instagram"></i></a></li>
            <li><a href="#"><i class="bi bi-youtube"></i></a></li>
            <li><a href="#"><i class="bi bi-twitter"></i></a></li>
            <li><a href="#"><i class="bi bi-facebook"></i></a></li>
            <li><a href="#"><i class="bi bi-tiktok"></i></a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

  <div id="audio-containerc">
    <audio id="song" autoplay loop>
      <source src="audio/save-and-sound.mp3" type="audio/mp3">
    </audio>

    <div class="audio-icon-wrapper" style="display: none;">
      <i class="bi bi-disc"></i>
    </div>
  </div>


  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
    crossorigin="anonymous"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.bundle.min.js"></script>

  <script>
    simplyCountdown('.simply-countdown', {
      year: 2024, // required
      month: 7, // required
      day: 6, // required
      hours: 9, // Default is 0 [0-23] integer
      words: { //words displayed into the countdown
        days: { singular: 'hari', plural: 'hari' },
        hours: { singular: 'jam', plural: 'jam' },
        minutes: { singular: 'menit', plural: 'menit' },
        seconds: { singular: 'detik', plural: 'detik' }
      },
    });
  </script>

  <script>
    const stickyTop = document.querySelector('.sticky-top');
    const offcanvas = document.querySelector('.offcanvas');

    offcanvas.addEventListener('show.bs.offcanvas', function () {
      stickyTop.style.overflow = 'visible';
    });

    offcanvas.addEventListener('hidden.bs.offcanvas', function () {
      stickyTop.style.overflow = 'hidden';
    });

  </script>

  <script>
    const rootElement = document.querySelector(":root");
    const audioIconWrapper = document.querySelector('.audio-icon-wrapper');
    const audioIcon = document.querySelector('.audio-icon-wrapper i');
    const song = document.querySelector('#song');
    let isPlaying = false;

    function disableScroll() {
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

      window.onscroll = function () {
        window.scrollTo(scrollTop, scrollLeft);
      }

      rootElement.style.scrollBehavior = 'auto';
    }

    function enableScroll() {
      window.onscroll = function () { }
      rootElement.style.scrollBehavior = 'smooth';
      // localStorage.setItem('opened', 'true');
      playAudio();
    }

    function playAudio() {
      audioIconWrapper.style.display = 'flex';
      song.play();
      isPlaying = true;
    }

    audioIconWrapper.onclick = function () {
      if (isPlaying) {
        song.pause();
        audioIcon.classList.remove('bi-disc');
        audioIcon.classList.add('bi-pause-circle');
      } else {
        song.play();
        audioIcon.classList.add('bi-disc');
        audioIcon.classList.remove('bi-pause-circle');
      }

      isPlaying = !isPlaying;
    }

    // if (!localStorage.getItem('opened')) {
    //   disableScroll();
    // }
    disableScroll();
  </script>
  <script>
    window.addEventListener("load", function () {
      const form = document.getElementById('my-form');
      form.addEventListener("submit", function (e) {
        e.preventDefault();
        const data = new FormData(form);
        const action = e.target.action;
        fetch(action, {
          method: 'POST',
          body: data,
        })
          .then(() => {
            alert("Konfirmasi kehadiran berhasil terkirim!");
          })
      });
    });

  </script>
  <script>
    const urlParams = new URLSearchParams(window.location.search);
    const nama = urlParams.get('to') || '';
    const namaContainer = document.querySelector('.hero h2 span');
    namaContainer.innerText = `${nama}`.replace(/ ,$/, ',');

    document.querySelector('#nama').value = nama;
  </script>
</body>

</html>

Function Calls

None

Variables

None

Stats

MD5 0476221bbab12955ebd90c23d9de9951
Eval Count 0
Decode Time 63 ms