<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Generator Link Undangan</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<style>

body{

    background:#f7f5f2;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

.generator{

    width:100%;

    max-width:650px;

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

h2{

    text-align:center;

    margin-bottom:30px;

}

.result{

    display:none;

}

#link{

    font-size:14px;

}

</style>

</head>

<body>

<div class="generator">

<h2>

<i class="fa-solid fa-link"></i>

Generator Link Undangan

</h2>

<div class="mb-3">

<label class="form-label">

Nama Tamu

</label>

<input
type="text"
id="guest"
class="form-control"
placeholder="Contoh : Bapak Andi">

</div>

<button
class="btn btn-warning w-100"
onclick="generateLink()">

Generate Link

</button>

<div class="result mt-4" id="result">

<label class="form-label">

Link Undangan

</label>

<input
type="text"
id="link"
class="form-control"
readonly>

<div class="d-grid gap-2 mt-3">

<button
class="btn btn-success"
onclick="copyLink()">

<i class="fa-solid fa-copy"></i>

Copy Link

</button>

<a
id="wa"
target="_blank"
class="btn btn-success">

<i class="fab fa-whatsapp"></i>

Kirim WhatsApp

</a>

</div>

</div>

</div>

<script>

const baseURL="http://localhost/undangan/";

function generateLink(){

    let guest=document.getElementById("guest").value.trim();

    if(guest==""){

        alert("Masukkan nama tamu.");

        return;

    }

    let url=baseURL+"?to="+encodeURIComponent(guest);

    document.getElementById("result").style.display="block";

    document.getElementById("link").value=url;

    document.getElementById("wa").href="https://wa.me/?text="+encodeURIComponent(url);

}

async function copyLink(){

    const text=document.getElementById("link").value;

    try{

        await navigator.clipboard.writeText(text);

        alert("Link berhasil disalin.");

    }catch{

        const input=document.getElementById("link");

        input.select();

        document.execCommand("copy");

        alert("Link berhasil disalin.");

    }

}

</script>

</body>

</html>