|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Generate URL</title>
|
|
<link
|
|
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
|
|
/>
|
|
<link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<video autoplay muted loop playsinline id="background-video">
|
|
<source src="bg.mp4" type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<div class="container py-5">
|
|
<h2 class="text-center mb-4 text-white" data-aos="fade-down">
|
|
Generate URL Kartu Ucapan
|
|
</h2>
|
|
<div class="card p-4 shadow" data-aos="fade-up">
|
|
<form id="generateForm">
|
|
<div class="mb-3">
|
|
<label for="fromName" class="form-label"
|
|
>Nama Pengirim:</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="fromName"
|
|
placeholder="Masukkan nama pengirim"
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="targetName" class="form-label"
|
|
>Nama Penerima:</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="targetName"
|
|
placeholder="Masukkan nama penerima"
|
|
/>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="relationshipOption" class="form-label"
|
|
>Pilih Relasi (Hubungan):</label
|
|
>
|
|
<select class="form-select" id="relationshipOption">
|
|
<option value="0">Anak anda</option>
|
|
<option value="1">Keponakan anda</option>
|
|
<option value="2">Murid anda</option>
|
|
<option value="3">Saudaramu</option>
|
|
<option value="4">Sepupumu</option>
|
|
<option value="5">Sahabatmu</option>
|
|
<option value="6" selected>Temanmu</option>
|
|
<option value="7">Orang lain</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<p>Pilih antara dibuat AI atau Pesan Custom</p>
|
|
|
|
<div
|
|
class="form-check form-switch d-flex align-items-center"
|
|
>
|
|
<input
|
|
class="form-check-input"
|
|
type="checkbox"
|
|
id="isCustomMessage"
|
|
/>
|
|
<label
|
|
class="form-check-label ms-2"
|
|
for="isCustomMessage"
|
|
>Gunakan Pesan Kustom</label
|
|
>
|
|
</div>
|
|
|
|
|
|
<div id="inputMessage" class="mt-3 d-none">
|
|
<label for="message" class="form-label"
|
|
>Masukkan Pesan:</label
|
|
>
|
|
<input
|
|
type="text"
|
|
class="form-control"
|
|
id="message"
|
|
placeholder="Tulis pesan Anda..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary w-100"
|
|
id="btnGU"
|
|
>
|
|
Generate URL
|
|
</button>
|
|
</form>
|
|
<div class="mt-3" id="generatedUrl" data-aos="fade-in"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
|
<script>
|
|
AOS.init();
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
<script src="script.js"></script>
|
|
<script src="animation.js"></script>
|
|
<script src="data.js"></script>
|
|
</body>
|
|
</html>
|
|
|
