Update script.js

script.js

@@ -1,1167 +1,1167 @@
-function getQueryParam(param) {
-	const urlParams = new URLSearchParams(window.location.search);
-	return urlParams.get(param);
-}
-
-const fN = "Aditya Dwi Nugraha";
-const whatsappNumber = "6289668041554";
-
-var fromName = fN;
-let urlsdatasDB = {};
-let urlsdataDB = {};
-let urlDB = "";
-let ucapanGabungan = "";
-let renderedUcapanGabungan = "";
-
-var inputConfigs = [
-	{
-		label: "Nama Anda:",
-		type: "text",
-		placeholder: "Masukkan nama anda",
-		id: "targetName",
-		value: "",
-	},
-];
-
-var selectConfigs = [
-	{
-		label: `Pilih relasi (hubungan) antara Anda dan ${fromName}:`,
-		options: [
-			{ value: "0", label: "Anak anda" },
-			{ value: "1", label: "Keponakan anda" },
-			{ value: "2", label: "Murid anda" },
-			{ value: "3", label: "Saudaramu" },
-			{ value: "4", label: "Sepupumu" },
-			{ value: "5", label: "Sahabatmu" },
-			{ value: "6", label: "Temanmu" },
-			{ value: "7", label: "Orang lain" },
-		],
-		default: "6",
-		id: "relationshipOption",
-	},
-];
-
-const innerHTMLOnTopMessage = `<h2 class="mb-3">Masukkan Nama Penerima & Pilih Relasi</h2>`;
-
-try {
-	const GEMINI_API_KEY = atob(
-		"QUl6YVN5QzUyNGNQREdEcWRZSnZkYmNtaUZ2N1Q2QzRnbE9JQXNR"
-	);
-	const MODEL_ID = "gemini-1.5-flash";
-	const GENERATE_CONTENT_API = "streamGenerateContent";
-
-	var noUcapan = "Ucapan tidak tersedia. Silakan coba lagi nanti.";
-
-	const tryErrorMessage = document.querySelectorAll(".tryErrorMessage");
-	const tryOtherMessage = document.querySelectorAll(".tryOtherMessage");
-
-	const relationshipMapping = {
-		0: "Ayah/Ibu",
-		1: "Pakde/Bude",
-		2: "Guru",
-		3: "Saudara",
-		4: "Sepupu",
-		5: "Sahabat",
-		6: "Teman",
-		7: "Tidak dikenal alias orang lain",
-	};
-
-	async function generateUcapan(
-		name,
-		option,
-		regenerate = false,
-		isChange = false
-	) {
-		const targetName = name;
-		const relationship =
-			relationshipMapping[option.toString()] || relationshipMapping["6"];
-		// const language = [0, 1, 2].includes(parseInt(option))
-		// 	? "Sopan"
-		// 	: `Gaul tapi tetap Sopan dan tidak berlebihan, karena INGAT! SAYA LAKI LAKI GENTLEMAN DAN PUNYA WIBAWA!. jangan pakai "lo" tapi "kamu"`;
-
-		const payload = {
-			contents: [
-				{
-					role: "user",
-					parts: [{ text: `Nama targetnya: ${targetName}` }],
-				},
-			],
-			systemInstruction: {
-				parts: [
-					{ text: "Sekarang tahun 1446H." },
-					{
-						text: 'Langsung mulai dengan "Assalamu\'alaikum Wr. Wb." alias salam lalu "Taqabbalallah wa minna ...." dan "Untuk ..." tanpa basa-basi.',
-					},
-					{
-						text: `Buat kartu ucapan Idul Fitri yang personal untuk ${targetName} berdasarkan jenis kelamin dan hubungan sebagai ${relationship}. Jika hubungan adalah "teman", jangan gunakan kata-kata romantis seperti "sayang", "ku cinta", atau istilah sejenis yang terkesan intim secara romantis.`,
-					},
-					{
-						text: `Sertakan kalimat "Kami sekeluarga ${fromName} mengucapkan..." jika hubungan bukan termasuk keluarga saya (Ayah/Ibu/Saudara). Jika termasuk keluarga saya maka beda lagi kalimatnya! Misal kalau untuk ibu: "Untuk ibuku yang tercinta..." atau kalau saudara: "Untuk ${targetName} yang ku cinta...".`,
-					},
-					{
-						text: "Setelah itu, lanjutkan ucapan dengan salam pembuka, doa, permohonan maaf, dan harapan yang hangat namun tidak berlebihan karena saya laki-laki yang gentleman punya wibawa.",
-					},
-					{
-						text: `Berikan emoji di setiap kalimat sebanyak-banyaknya untuk kesan asik dan santai.`,
-					},
-					{
-						text: "Jadikan bahasa manusia agak kaku agar tidak dikira robot.",
-					},
-					{
-						text: 'Ingat! Langsung mulai dengan "Assalamu\'alaikum Wr. Wb." alias salam lalu "Untuk ..." tanpa basa-basi.',
-					},
-					{
-						text: `INGAT KALAU KELUARGA SENDIRI TIDAK PAKAI KALIMAT "kami sekeluarga ${fromName}"!!!!!`,
-					},
-				],
-			},
-			generationConfig: {
-				responseMimeType: "text/plain",
-			},
-		};
-
-		ucapanGabungan = "";
-		let isFDB = false;
-		let isCU = false;
-
-		urlsdatasDB = (await getURLSDATAs())[0];
-
-		localStorage.setItem("data", JSON.stringify(urlsdatasDB));
-
-		for (const [key, data] of Object.entries(urlsdatasDB)) {
-			if (
-				data.from === fromName &&
-				data.target === name &&
-				data.option === option &&
-				data.message &&
-				data.message !== noUcapan
-			) {
-				ucapanGabungan = data.message;
-				urlDB = `${window.location.origin}?i=` + key;
-				isFDB = true;
-
-				localStorage.setItem("url", key);
-				break;
-			}
-		}
-
-		const logic =
-			(!isFDB && !regenerate && !isChange) ||
-			(isFDB && regenerate && !isChange) ||
-			(!isFDB && regenerate && isChange);
-
-		console.log([regenerate, isFDB, isChange], logic);
-
-		try {
-			if (logic) {
-				const response = await fetch(
-					`https://generativelanguage.googleapis.com/v1beta/models/${MODEL_ID}:${GENERATE_CONTENT_API}?key=${GEMINI_API_KEY}`,
-					{
-						method: "POST",
-						headers: { "Content-Type": "application/json" },
-						body: JSON.stringify(payload),
-					}
-				);
-
-				const data = await response.json();
-
-				ucapanGabungan = "";
-				isCU = true;
-
-				if (Array.isArray(data)) {
-					data.forEach((item) => {
-						if (
-							item &&
-							item.candidates &&
-							item.candidates[0] &&
-							item.candidates[0].content &&
-							item.candidates[0].content.parts &&
-							item.candidates[0].content.parts[0] &&
-							item.candidates[0].content.parts[0].text
-						) {
-							ucapanGabungan +=
-								item.candidates[0].content.parts[0].text;
-						}
-					});
-					ucapanGabungan = ucapanGabungan.trim();
-				} else {
-					ucapanGabungan = noUcapan;
-				}
-			}
-
-			console.log("Ucapan:", ucapanGabungan);
-		} catch (error) {
-			ucapanGabungan = noUcapan;
-
-			console.error("Error:", error);
-		}
-
-		if (!ucapanGabungan.trim() || ucapanGabungan === noUcapan) {
-			tryErrorMessage.forEach((elm) => {
-				do {
-					elm.classList.remove("d-none");
-				} while (elm.classList.contains("d-none"));
-			});
-		} else {
-			tryOtherMessage.forEach((elm) => {
-				do {
-					elm.classList.remove("d-none");
-				} while (elm.classList.contains("d-none"));
-			});
-
-			const data = {
-				from: fromName,
-				target: name,
-				option: parseInt(option),
-				message: ucapanGabungan,
-			};
-
-			if (isCU) {
-				[urlDB, urlsdataDB] = await generateUrl(Object.values(data));
-
-				urlsdatasDB[urlDB] = urlsdataDB;
-
-				localStorage.setItem(
-					"url",
-					urlDB
-						.replace(window.location.origin, "")
-						.replace(urlDB.origin, "")
-						.replace("?i=", "")
-				);
-				function isCircular(obj, seen = new WeakSet()) {
-					if (typeof obj !== "object" || obj === null) return false;
-					if (seen.has(obj)) return true;
-					seen.add(obj);
-					return Object.values(obj).some((value) =>
-						isCircular(value, seen)
-					);
-				}
-
-				if (isCircular(urlsdataDB)) {
-					console.error("Data mengandung referensi circular!");
-				} else {
-					localStorage.setItem(urlDB, JSON.stringify(urlsdataDB));
-				}
-			}
-		}
-
-		return [ucapanGabungan, urlDB];
-	}
-
-	async function tampilkanKartu(
-		name,
-		option,
-		regenerate = false,
-		isChange = false
-	) {
-		// document.getElementById("cardTitle").innerText = `Untuk ${name}`;
-		// document.getElementById("cardSection").style.display = "block";
-
-		console.log(name, option, regenerate);
-
-		[ucapanGabungan, urlDB] = await generateUcapan(
-			name,
-			option,
-			regenerate,
-			isChange
-		);
-
-		document.getElementById("cardMessage").innerHTML =
-			marked.parse(ucapanGabungan);
-
-		alert(`Akses halaman ini di: ${urlDB}`, false);
-
-		if (window.location.href.replace("/?", "?") !== urlDB) {
-			await alert(`Kamu akan diarahkan ke halaman ${urlDB}`);
-			await new Promise((res) => setTimeout(res, 1000));
-			window.location.href = urlDB;
-		}
-	}
-
-	async function getUser() {
-		let url = localStorage.getItem("url");
-		let data = localStorage.getItem("data");
-
-		if (data) {
-			try {
-				data = JSON.parse(data);
-			} catch (e) {
-				data = await getURLSDATAs();
-			}
-		} else {
-			data = await getURLSDATAs();
-		}
-
-		console.log(url, data);
-
-		return url && data ? data[url] || null : null;
-	}
-
-	async function setConfigs() {
-		urlsdataDB = await getUser();
-
-		console.log(urlsdataDB);
-
-		if (urlsdataDB) {
-			inputConfigs[0].value = urlsdataDB.target;
-			selectConfigs[0].label = `Pilih relasi (hubungan) antara Anda dan ${urlsdataDB.from}:`;
-			selectConfigs[0].default = urlsdataDB.option;
-		}
-	}
-
-	async function handleTryClick(target) {
-		target.classList.add("d-none");
-
-		await setConfigs();
-
-		const res = await multiPrompt(
-			inputConfigs,
-			selectConfigs,
-			innerHTMLOnTopMessage
-		);
-
-		if (!res.isCancel) {
-			userName = res["inputValues"]["targetName"];
-			userOption = res["selectValues"]["relationshipOption"];
-
-			let isC = false;
-
-			urlsdataDB = await getUser();
-
-			if (urlsdataDB) {
-				if (
-					(urlsdataDB.target === userName &&
-						urlsdataDB.option !== userOption) ||
-					(urlsdataDB.target !== userName &&
-						urlsdataDB.option === userOption)
-				) {
-					isC = true;
-				}
-			} else {
-				isC = true;
-			}
-
-			await tampilkanKartu(userName, userOption, true, isC);
-		}
-
-		target.classList.remove("d-none");
-	}
-
-	document.addEventListener("click", async function (event) {
-		// Jika tombol yang diklik adalah .tryErrorMessage
-		if (event.target.classList.contains("tryErrorMessage")) {
-			await handleTryClick(event.target);
-		}
-
-		// Jika tombol yang diklik adalah .tryOtherMessage
-		if (event.target.classList.contains("tryOtherMessage")) {
-			await handleTryClick(event.target);
-		}
-
-		if (event.target.classList.contains("waButton")) {
-			window.open(`https://wa.me/${whatsappNumber}`, "_blank");
-		}
-
-		if (event.target.classList.contains("manageURL")) {
-			window.open(`manage.html`, "_blank");
-		}
-
-		if (event.target.classList.contains("urlButton")) {
-			navigator.clipboard.writeText(window.location.href).then(
-				() => alert("URL berhasil disalin", false),
-				() => alert("Gagal menyalin URL", false)
-			);
-		}
-	});
-
-	if (!window.location.href.includes("manage")) {
-		document.addEventListener("DOMContentLoaded", async () => {
-			const queryId = getQueryParam("i");
-			let isId = false;
-			let data = {};
-
-			if (queryId) {
-				data = await getURLSDATA(queryId);
-				console.log(data);
-
-				if (data) {
-					isId = true;
-				} else {
-					await alert("Id Kartu Tidak Ditemukan.");
-				}
-			}
-
-			urlsdataDB = await getUser();
-
-			const queryFromName = isId
-				? data.from
-				: getQueryParam("f") ||
-				  (urlsdataDB && urlsdataDB.from
-						? urlsdataDB.from
-						: fromName || fN);
-			let queryTargetName = isId
-				? data.target
-				: getQueryParam("t") ||
-				  (urlsdataDB && urlsdataDB.target ? urlsdataDB.target : "");
-			let queryOption = isId
-				? data.option
-				: getQueryParam("o") ||
-				  (urlsdataDB && urlsdataDB.option ? urlsdataDB.option : "");
-
-			fromName = queryFromName;
-
-			console.log(queryFromName, queryTargetName, queryOption);
-
-			if (
-				queryFromName.trim() &&
-				queryTargetName.trim() &&
-				queryOption.trim()
-			) {
-				[urlDB, urlsdatasDB] = await generateUrl([
-					queryFromName.trim(),
-					queryTargetName.trim(),
-					queryOption.trim(),
-				]);
-
-				urlsdatasDB[urlDB] = urlsdataDB;
-
-				localStorage.setItem(
-					"url",
-					urlDB
-						.replace(window.location.origin, "")
-						.replace(urlDB.origin, "")
-						.replace("?i=", "")
-				);
-				localStorage.setItem(urlDB, JSON.stringify(urlsdataDB));
-				localStorage.setItem("data", JSON.stringify(urlsdatasDB));
-			}
-
-			await setConfigs();
-
-			let res3 = false;
-
-			do {
-				let res2 = false;
-
-				do {
-					let res1 = false;
-
-					if (!res3 === !res2 || (!res3 && res2)) {
-						do {
-							let res0 = false;
-
-							if (!res2 === !res1 || (!res2 && res1)) {
-								do {
-									// MultiPrompt 1: Konfirmasi awal
-									if (!res1 === !res0 || (!res1 && res0)) {
-										let res = await multiPrompt(
-											inputConfigs,
-											selectConfigs,
-											`<div class="child-container text-center">
-								<img class="img-fluid rounded-circle" src="https://media.stickerswiki.app/stickerly_o1nn49_by_stickerly_official_bot/1825567.512.webp">
-								<h2 class="mb-3">Apakah benar ini Anda?</h2></div>`,
-											false,
-											false,
-											isId
-										);
-
-										let isC = false;
-
-										if (!isId && !res.isCancel) {
-											queryTargetName =
-												res["inputValues"][
-													"targetName"
-												];
-											queryOption =
-												res["selectValues"][
-													"relationshipOption"
-												];
-
-											let isC = false;
-
-											urlsdataDB = await getUser();
-
-											if (urlsdataDB) {
-												if (
-													(urlsdataDB.target ===
-														userName &&
-														urlsdataDB.option !==
-															userOption) ||
-													(urlsdataDB.target !==
-														userName &&
-														urlsdataDB.option ===
-															userOption)
-												) {
-													isC = true;
-												}
-											} else {
-												isC = true;
-											}
-
-											// [urlDB, urlsdatasDB] =
-											// 	await generateUrl([
-											// 		queryFromName.trim(),
-											// 		queryTargetName.trim(),
-											// 		queryOption.trim(),
-											// 	]);
-
-											// urlsdatasDB[urlDB] = urlsdataDB;
-
-											localStorage.setItem(
-												"url",
-												urlDB
-													.replace(
-														window.location.origin,
-														""
-													)
-													.replace(urlDB.origin, "")
-													.replace("?i=", "")
-											);
-											localStorage.setItem(
-												urlDB,
-												JSON.stringify(urlsdataDB)
-											);
-											localStorage.setItem(
-												"data",
-												JSON.stringify(urlsdatasDB)
-											);
-										}
-
-										alert("Tunggu sebentar...", false);
-
-										await tampilkanKartu(
-											queryTargetName,
-											queryOption,
-											isC,
-											isC
-										);
-
-										alert("Lanjut...", false);
-									}
-
-									// MultiPrompt 2: Konfirmasi lanjutan
-									res0 = (
-										await multiPrompt(
-											[],
-											[],
-											`<div class="child-container text-center">
-							<img class="img-fluid rounded-circle" src="https://i.pinimg.com/236x/db/75/9f/db759f85996381cfc69fc4878f6fa3c6.jpg">
-							<h2 class="mb-3">
-								"${queryTargetName}", apakah benar ini kamu?<br>
-								Kalau iya, yuk lanjut ada yang spesial buat kamu! 🎉✨
-							</h2>
-						</div>`.trim(),
-											true,
-											false,
-											true,
-											"Kembali"
-										)
-									).isCancel;
-								} while (res0);
-							}
-
-							// MultiPrompt 3: Menampilkan nama penerima
-							res1 = (
-								await multiPrompt(
-									[],
-									[],
-									`<div class="child-container text-center">
-						<img class="img-fluid rounded-circle" src="https://media.stickerswiki.app/pandagemoi4byofcsaraya/215937.512.webp">
-						<h2 class="mb-3">
-							Klik Lanjut
-						</h2>
-					</div>`.trim(),
-									true,
-									false,
-									true,
-									"Kembali"
-								)
-							).isCancel;
-						} while (res1);
-					}
-
-					// MultiPrompt 4: Pesan tambahan
-					res2 = (
-						await multiPrompt(
-							[],
-							[],
-							`<div class="child-container text-center">
-						<img class="img-fluid rounded-circle" src="https://i.pinimg.com/474x/7d/08/e5/7d08e5de7c11a7356c7ee187f39cbc34.jpg">
-						<div class="text-center">${
-							document.getElementById("cardSection").innerHTML
-						}</div></div>`,
-							true,
-							false,
-							true,
-							"Kembali",
-							true,
-							true,
-							document.getElementById("cardMessage").innerHTML ||
-								ucapanGabungan
-						)
-					).isCancel;
-				} while (res2);
-
-				res3 = (
-					await multiPrompt(
-						[],
-						[],
-						`<div class="child-container text-center">
-					<img class="img-fluid rounded-circle" src="https://i.pinimg.com/736x/c1/78/ea/c178eae8b11823b36f4d76fc5f8a2a29.jpg">
-					<div class="text-center">${
-						document.querySelector(".areaFooter").innerHTML
-					}</div></div>`,
-						true,
-						false,
-						true,
-						"Kembali",
-						false
-					)
-				).isCancel;
-			} while (res3);
-		});
-	}
-} catch (e) {
-	console.error(e);
-}
-
-let counterAlert = 0;
-
-async function alert(
-	message = "",
-	isPopUp = true,
-	isTime = false,
-	timeOut = 5,
-	messagesAfterTimeOut = [],
-	awaitResolve = 0
-) {
-	counterAlert++;
-
-	return new Promise((resolve) => {
-		try {
-			let modal;
-			let messageElem;
-			let timeOutElm;
-			let okBtn;
-			let intervalId;
-
-			if (isPopUp) {
-				modal = document.createElement("div");
-				modal.className = "modal";
-				modal.style.position = "fixed";
-				modal.style.top = "0";
-				modal.style.left = "0";
-				modal.style.width = "100%";
-				modal.style.height = "100%";
-				modal.style.backgroundColor = "rgba(0,0,0,0.5)";
-				modal.style.display = "flex";
-				modal.style.alignItems = "center";
-				modal.style.justifyContent = "center";
-			} else {
-				modal = document.createElement("div");
-				modal.className = "notification";
-				modal.style.position = "fixed";
-				modal.style.top = "5%";
-				modal.style.right = "2.5%";
-				modal.style.padding = "10px 20px";
-				modal.style.borderRadius = "5px";
-				modal.style.zIndex = "1000000000";
-				modal.setAttribute("data-aos", "fade-left");
-			}
-
-			const modalContent = document.createElement("div");
-			modalContent.className = `modal-content d-flex align-items-center ${
-				isPopUp
-					? "bg-light"
-					: counterAlert % 2 === 0
-					? "bg-success"
-					: "bg-primary"
-			} p-3 ${isPopUp ? "" : "text-white"}`;
-			modalContent.style.width = isPopUp ? "75%" : "100%";
-			modalContent.style.height = isPopUp ? "" : "100%";
-			modalContent.style.borderRadius = "5px";
-			modalContent.style.boxShadow = isPopUp
-				? "0 2px 10px rgba(0,0,0,0.1)"
-				: "";
-
-			messageElem = document.createElement("p");
-			messageElem.innerHTML =
-				(!isPopUp ? `<i class="bi bi-bell-fill m-2"></i>` : ``) +
-				message;
-
-			timeOutElm = document.createElement("p");
-
-			okBtn = document.createElement("button");
-			okBtn.className = `btn ${
-				counterAlert % 2 === 0 ? "btn-primary" : "btn-warning"
-			} btn-lg`;
-			okBtn.textContent = "OK";
-			okBtn.style.minWidth = "80px";
-			okBtn.style.display = isTime ? "none" : "block";
-			okBtn.style.marginTop = "10px";
-
-			modalContent.appendChild(messageElem);
-
-			if (isTime) {
-				modalContent.appendChild(timeOutElm);
-			}
-
-			if (isPopUp) {
-				const btnContainer = document.createElement("div");
-				btnContainer.style.marginTop = "20px";
-				btnContainer.appendChild(okBtn);
-				modalContent.appendChild(btnContainer);
-			}
-
-			modal.appendChild(modalContent);
-			document.body.appendChild(modal);
-
-			okBtn.addEventListener("click", function () {
-				if (intervalId) clearInterval(intervalId);
-				if (document.body.contains(modal)) {
-					document.body.removeChild(modal);
-				}
-				resolve();
-			});
-
-			if (!isPopUp) {
-				intervalId = setInterval(async () => {
-					timeOut--;
-					console.log(timeOut);
-					if (messagesAfterTimeOut.length === 0)
-						timeOutElm.textContent = timeOut;
-					if (messagesAfterTimeOut.length > 0) {
-						messagesAfterTimeOut.forEach((mes) => {
-							if (mes.timeOut >= timeOut) {
-								modalContent.className =
-									"modal-content d-flex align-items-center bg-warning p-3";
-								messageElem.textContent = mes.message;
-								timeOutElm.textContent = timeOut;
-							}
-						});
-					}
-
-					if (timeOut <= 0) {
-						await new Promise((res) =>
-							setTimeout(res, awaitResolve)
-						);
-						if (document.body.contains(modal)) {
-							document.body.removeChild(modal);
-						}
-						clearInterval(intervalId);
-						resolve();
-					}
-				}, 1000);
-
-				setTimeout(() => {
-					if (document.body.contains(modal)) {
-						document.body.removeChild(modal);
-					}
-					resolve();
-				}, timeOut * 1000);
-			}
-		} catch (e) {
-			console.error(e);
-		}
-	});
-}
-
-async function multiPrompt(
-	inputConfigs = [
-		{
-			label: "Nama:",
-			type: "text",
-			placeholder: "Masukkan nama Anda",
-			id: "name",
-			value: "",
-		},
-	],
-	selectConfigs = [
-		{
-			label: "Pilih Gender:",
-			options: [
-				{ value: "L", label: "Laki-laki" },
-				{ value: "P", label: "Perempuan" },
-			],
-			default: "L",
-			id: "gender",
-		},
-	],
-	innerHTMLOnTopMessage = "",
-	withCancelButton = true,
-	isDOM = false,
-	isDisabledAll = false,
-	cancelText = "",
-	withNextButton = true,
-	runFunc = false,
-	originalText = ""
-) {
-	console.log(ucapanGabungan, originalText, "AAAA");
-	return new Promise((resolve) => {
-		const modal = document.createElement("div");
-		modal.className = "modal";
-		Object.assign(modal.style, {
-			position: "fixed",
-			top: "0",
-			left: "0",
-			width: "100%",
-			height: "100%",
-			backgroundColor: "rgba(0,0,0,0.5)",
-			display: "flex",
-			alignItems: "center",
-			justifyContent: "center",
-		});
-
-		const modalContent = document.createElement("div");
-		modalContent.className = "modal-content";
-		Object.assign(modalContent.style, {
-			width: "75%",
-			background: "#fff",
-			padding: "20px",
-			borderRadius: "5px",
-			boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
-		});
-
-		const okBtn = document.createElement("button");
-		const okBtnClassName = "btn btn-success btn-lg";
-		const okBtnTextContent = "Cari";
-
-		okBtn.className = isDOM
-			? okBtnClassName.replace("success", "warning")
-			: okBtnClassName;
-		okBtn.textContent = isDisabledAll
-			? "Lanjut"
-			: isDOM
-			? okBtnTextContent
-			: "Ganti pesan";
-		okBtn.style.marginRight = "10px";
-		okBtn.style.display = withNextButton ? "" : "none";
-
-		const cancelBtn = document.createElement("button");
-		cancelBtn.className =
-			"btn btn-danger btn-lg" + (withCancelButton ? "" : " d-none");
-		cancelBtn.textContent = cancelText || "Batal";
-
-		const innerHTMLOnTopMessageContent = document.createElement("div");
-		innerHTMLOnTopMessageContent.innerHTML = innerHTMLOnTopMessage;
-
-		const form = document.createElement("form");
-
-		const inputElements = {};
-		const selectElements = {};
-
-		function changeOKBTN(isChange) {
-			okBtn.textContent = isDisabledAll
-				? "Lanjut"
-				: isDOM
-				? okBtnTextContent
-				: isChange === false
-				? "Ganti pesan"
-				: "Ganti data";
-			okBtn.className = isDOM
-				? okBtnClassName.replace("success", "warning")
-				: isChange === false
-				? okBtnClassName
-				: okBtnClassName.replace("success", "primary");
-		}
-
-		inputConfigs.forEach((config) => {
-			const labelElem = document.createElement("label");
-			labelElem.textContent = config.label;
-			Object.assign(labelElem.style, {
-				display: "block",
-				marginTop: "10px",
-			});
-			form.appendChild(labelElem);
-
-			const input = document.createElement("input");
-			Object.assign(input, {
-				type: config.type || "text",
-				placeholder: config.placeholder || "",
-				required: true,
-				id: config.id,
-			});
-			Object.assign(input.style, {
-				width: "100%",
-				marginTop: "5px",
-			});
-			input.className = "form-control form-control-lg";
-			input.value = config.value;
-			inputElements[config.id] = input;
-			form.appendChild(input);
-
-			if (isDisabledAll) input.disabled = true;
-
-			input.addEventListener("change", () => {
-				changeOKBTN(inputElements[config.id].value !== config.value);
-			});
-		});
-
-		selectConfigs.forEach((config) => {
-			const labelElem = document.createElement("label");
-			labelElem.textContent = config.label;
-			Object.assign(labelElem.style, {
-				display: "block",
-				marginTop: "10px",
-			});
-			form.appendChild(labelElem);
-
-			const selectElem = document.createElement("select");
-			Object.assign(selectElem, {
-				required: true,
-				id: config.id,
-			});
-			Object.assign(selectElem.style, {
-				width: "100%",
-				marginTop: "5px",
-			});
-			selectElem.className = "form-select form-select-lg";
-
-			config.options.forEach((opt) => {
-				const optionElem = document.createElement("option");
-				optionElem.value = opt.value;
-				optionElem.textContent = opt.label;
-				if (config.default === opt.value) optionElem.selected = true;
-				selectElem.appendChild(optionElem);
-			});
-
-			selectElements[config.id] = selectElem;
-			form.appendChild(selectElem);
-
-			if (isDisabledAll) selectElem.disabled = true;
-
-			selectElem.addEventListener("change", () => {
-				changeOKBTN(selectElements[config.id].value !== config.default);
-			});
-		});
-
-		const btnContainer = document.createElement("div");
-		Object.assign(btnContainer.style, {
-			marginTop: "20px",
-			textAlign: "right",
-		});
-
-		btnContainer.appendChild(okBtn);
-		btnContainer.appendChild(cancelBtn);
-		form.appendChild(btnContainer);
-
-		modalContent.appendChild(innerHTMLOnTopMessageContent);
-		modalContent.appendChild(form);
-		modal.appendChild(modalContent);
-		document.body.appendChild(modal);
-
-		console.log(runFunc);
-
-		function initTypewriter() {
-			async function typeWriterHTML(element, html, speed = 50) {
-				let currentLength = renderedUcapanGabungan.length;
-				for (let i = currentLength; i < html.length; i++) {
-					renderedUcapanGabungan += html.charAt(i);
-					element.innerHTML = renderedUcapanGabungan;
-					await new Promise((resolve) => setTimeout(resolve, speed));
-
-					okBtn.disabled = true;
-					cancelBtn.disabled = true;
-				}
-
-				okBtn.disabled = false;
-				cancelBtn.disabled = false;
-			}
-
-			const cardMessagess = document.querySelectorAll(".card-body");
-			cardMessagess.forEach((cardMessages, index) => {
-				if (index !== 0) {
-					typeWriterHTML(
-						cardMessages,
-						marked.parse(originalText),
-						25
-					);
-				}
-			});
-		}
-
-		if (document.readyState === "loading") {
-			document.addEventListener("DOMContentLoaded", initTypewriter);
-		} else {
-			initTypewriter();
-		}
-
-		form.addEventListener("submit", function (e) {
-			e.preventDefault();
-
-			let isValid = true;
-			const inputValues = {};
-			const selectValues = {};
-
-			Object.entries(inputElements).forEach(([id, elem]) => {
-				const value = elem.value.trim();
-				inputValues[id] = value;
-				if (value.length === 0) {
-					elem.style.border = "1px solid red";
-					isValid = false;
-				} else {
-					elem.style.border = "";
-				}
-			});
-
-			Object.entries(selectElements).forEach(([id, elem]) => {
-				const value = elem.value;
-				selectValues[id] = value;
-				if (!value) {
-					elem.style.border = "1px solid red";
-					isValid = false;
-				} else {
-					elem.style.border = "";
-				}
-			});
-
-			if (isValid) {
-				document.body.removeChild(modal);
-				console.log(inputValues, selectValues);
-				resolve({ inputValues, selectValues, isCancel: false });
-			}
-		});
-
-		okBtn.addEventListener("click", () => {
-			form.dispatchEvent(new Event("submit", { cancelable: true }));
-		});
-
-		cancelBtn.addEventListener("click", () => {
-			document.body.removeChild(modal);
-			resolve({
-				inputValues: null,
-				selectValues: null,
-				isCancel: true,
-			});
-		});
-	});
-}
-
-let isCustomMessage = false;
-
-try {
-	document
-		.getElementById("btnGU")
-		.addEventListener("click", async function () {
-			const fromName = document.getElementById("fromName").value.trim();
-			const targetName = document
-				.getElementById("targetName")
-				.value.trim();
-			const option = parseInt(
-				document.getElementById("relationshipOption").value.trim()
-			);
-			const message = document.getElementById("message").value.trim();
-
-			const generatedUrl = (
-				await generateUrl([
-					fromName,
-					targetName,
-					option,
-					isCustomMessage ? message : "",
-				])
-			)[0];
-
-			document.getElementById(
-				"generatedUrl"
-			).innerHTML = `<div class='alert alert-success'>
-					 <strong>URL Generated:</strong> <a href="${generatedUrl}" target="_blank">${generatedUrl}</a>
-				 </div>`;
-		});
-
-	document
-		.getElementById("isCustomMessage")
-		.addEventListener("change", function () {
-			const inputMessage = document.getElementById("inputMessage");
-			if (this.checked) {
-				inputMessage.setAttribute("class", "mt-3");
-				isCustomMessage = true;
-			} else {
-				inputMessage.setAttribute("class", "mt-3 d-none");
-				isCustomMessage = false;
-			}
-		});
-} catch (error) {}
-
-async function generateUrl([fromName, targetName, option, message = ""]) {
-	let i = 0;
-	let generatedUrl = "";
-
-	while (true) {
-		let queryUrl = "";
-
-		if (!fromName || !targetName) {
-			alert("Mohon isi semua field sebelum generate URL", false);
-			return;
-		}
-
-		const fts = [fromName, targetName];
-
-		fts.forEach((ft, indexs) => {
-			let finalFN = "";
-
-			let fNS = ft.split(" ");
-			let fNSJ = fNS.join("");
-
-			fNS.forEach((word, index) => {
-				let wl = Math.round(word.length / (i + 2));
-				finalFN +=
-					(indexs === 0 && index === 0) ||
-					(indexs === 1 && index === fNS.length - 1)
-						? (word[i] || "x") +
-						  (fNSJ[wl] || "y") +
-						  (word[word.length - (i + 1)] || "z")
-						: "";
-			});
-
-			queryUrl += finalFN + (indexs === 0 ? "X" : "Y");
-		});
-
-		const char = "abcdefghijklmnopqrstuvwxyz";
-
-		queryUrl += char[option + i] || "Z";
-
-		let data = await getURLSDATA(queryUrl);
-
-		if (!data) {
-			data = {
-				from: fromName,
-				target: targetName,
-				option: option.toString(),
-				message: message,
-			};
-		}
-
-		console.log(queryUrl, data);
-
-		let isSuccess = false;
-
-		[isSuccess, urlsdatasDB] = await setURLSDATAData(queryUrl, data);
-
-		i++;
-
-		if (isSuccess) {
-			generatedUrl = `${window.location.origin}?i=` + queryUrl;
-			break;
-		}
-	}
-
-	return [generatedUrl, urlsdatasDB];
-}
-
-try {
-	function addStars(count) {
-		for (let i = 0; i < count; i++) {
-			const star = document.createElement("div");
-			star.className = "star";
-			// Atur posisi acak
-			star.style.top = Math.random() * 100 + "%";
-			star.style.left = Math.random() * 100 + "%";
-			// Atur durasi animasi antara 2s hingga 5s
-			star.style.animationDuration = 2 + Math.random() * 3 + "s";
-			// Atur delay animasi antara 0s hingga 3s
-			star.style.animationDelay = Math.random() * 3 + "s";
-			document.body.appendChild(star);
-		}
-	}
-	addStars(100);
-} catch {}
+function getQueryParam(param) {
+	const urlParams = new URLSearchParams(window.location.search);
+	return urlParams.get(param);
+}
+
+const fN = "Aditya Dwi Nugraha";
+const whatsappNumber = "6289668041554";
+
+var fromName = fN;
+let urlsdatasDB = {};
+let urlsdataDB = {};
+let urlDB = "";
+let ucapanGabungan = "";
+let renderedUcapanGabungan = "";
+
+var inputConfigs = [
+	{
+		label: "Nama Anda:",
+		type: "text",
+		placeholder: "Masukkan nama anda",
+		id: "targetName",
+		value: "",
+	},
+];
+
+var selectConfigs = [
+	{
+		label: `Pilih relasi (hubungan) antara Anda dan ${fromName}:`,
+		options: [
+			{ value: "0", label: "Anak anda" },
+			{ value: "1", label: "Keponakan anda" },
+			{ value: "2", label: "Murid anda" },
+			{ value: "3", label: "Saudaramu" },
+			{ value: "4", label: "Sepupumu" },
+			{ value: "5", label: "Sahabatmu" },
+			{ value: "6", label: "Temanmu" },
+			{ value: "7", label: "Orang lain" },
+		],
+		default: "6",
+		id: "relationshipOption",
+	},
+];
+
+const innerHTMLOnTopMessage = `<h2 class="mb-3">Masukkan Nama Penerima & Pilih Relasi</h2>`;
+
+try {
+	const GEMINI_API_KEY = atob(
+		"QUl6YVN5QzUyNGNQREdEcWRZSnZkYmNtaUZ2N1Q2QzRnbE9JQXNR"
+	);
+	const MODEL_ID = "gemini-1.5-flash";
+	const GENERATE_CONTENT_API = "streamGenerateContent";
+
+	var noUcapan = "Ucapan tidak tersedia. Silakan coba lagi nanti.";
+
+	const tryErrorMessage = document.querySelectorAll(".tryErrorMessage");
+	const tryOtherMessage = document.querySelectorAll(".tryOtherMessage");
+
+	const relationshipMapping = {
+		0: "Ayah/Ibu",
+		1: "Pakde/Bude",
+		2: "Guru",
+		3: "Saudara",
+		4: "Sepupu",
+		5: "Sahabat",
+		6: "Teman",
+		7: "Tidak dikenal alias orang lain",
+	};
+
+	async function generateUcapan(
+		name,
+		option,
+		regenerate = false,
+		isChange = false
+	) {
+		const targetName = name;
+		const relationship =
+			relationshipMapping[option.toString()] || relationshipMapping["6"];
+		// const language = [0, 1, 2].includes(parseInt(option))
+		// 	? "Sopan"
+		// 	: `Gaul tapi tetap Sopan dan tidak berlebihan, karena INGAT! SAYA LAKI LAKI GENTLEMAN DAN PUNYA WIBAWA!. jangan pakai "lo" tapi "kamu"`;
+
+		const payload = {
+			contents: [
+				{
+					role: "user",
+					parts: [{ text: `Nama targetnya: ${targetName}` }],
+				},
+			],
+			systemInstruction: {
+				parts: [
+					{ text: "Sekarang tahun 1446H." },
+					{
+						text: 'Langsung mulai dengan "Assalamu\'alaikum Wr. Wb." alias salam lalu "Taqabbalallah wa minna ...." dan "Untuk ..." tanpa basa-basi.',
+					},
+					{
+						text: `Buat kartu ucapan Idul Fitri yang personal untuk ${targetName} berdasarkan jenis kelamin dan hubungan sebagai ${relationship}. Jika hubungan adalah "teman", jangan gunakan kata-kata romantis seperti "sayang", "ku cinta", atau istilah sejenis yang terkesan intim secara romantis.`,
+					},
+					{
+						text: `Sertakan kalimat "Kami sekeluarga ${fromName} mengucapkan..." jika hubungan bukan termasuk keluarga saya (Ayah/Ibu/Saudara). Jika termasuk keluarga saya maka beda lagi kalimatnya! Misal kalau untuk ibu: "Untuk ibuku yang tercinta..." atau kalau saudara: "Untuk ${targetName} yang ku cinta...".`,
+					},
+					{
+						text: "Setelah itu, lanjutkan ucapan dengan salam pembuka, doa, permohonan maaf, dan harapan yang hangat namun tidak berlebihan karena saya laki-laki yang gentleman punya wibawa.",
+					},
+					{
+						text: `Berikan emoji di setiap kalimat sebanyak-banyaknya untuk kesan asik dan santai.`,
+					},
+					{
+						text: "Jadikan bahasa manusia agak kaku agar tidak dikira robot.",
+					},
+					{
+						text: 'Ingat! Langsung mulai dengan "Assalamu\'alaikum Wr. Wb." alias salam lalu "Untuk ..." tanpa basa-basi.',
+					},
+					{
+						text: `INGAT KALAU KELUARGA SENDIRI TIDAK PAKAI KALIMAT "kami sekeluarga ${fromName}"!!!!!`,
+					},
+				],
+			},
+			generationConfig: {
+				responseMimeType: "text/plain",
+			},
+		};
+
+		ucapanGabungan = "";
+		let isFDB = false;
+		let isCU = false;
+
+		urlsdatasDB = (await getURLSDATAs())[0];
+
+		localStorage.setItem("data", JSON.stringify(urlsdatasDB));
+
+		for (const [key, data] of Object.entries(urlsdatasDB)) {
+			if (
+				data.from === fromName &&
+				data.target === name &&
+				data.option === option &&
+				data.message &&
+				data.message !== noUcapan
+			) {
+				ucapanGabungan = data.message;
+				urlDB = `${window.location.origin}?i=` + key;
+				isFDB = true;
+
+				localStorage.setItem("url", key);
+				break;
+			}
+		}
+
+		const logic =
+			(!isFDB && !regenerate && !isChange) ||
+			(isFDB && regenerate && !isChange) ||
+			(!isFDB && regenerate && isChange);
+
+		console.log([regenerate, isFDB, isChange], logic);
+
+		try {
+			if (logic) {
+				const response = await fetch(
+					`https://generativelanguage.googleapis.com/v1beta/models/${MODEL_ID}:${GENERATE_CONTENT_API}?key=${GEMINI_API_KEY}`,
+					{
+						method: "POST",
+						headers: { "Content-Type": "application/json" },
+						body: JSON.stringify(payload),
+					}
+				);
+
+				const data = await response.json();
+
+				ucapanGabungan = "";
+				isCU = true;
+
+				if (Array.isArray(data)) {
+					data.forEach((item) => {
+						if (
+							item &&
+							item.candidates &&
+							item.candidates[0] &&
+							item.candidates[0].content &&
+							item.candidates[0].content.parts &&
+							item.candidates[0].content.parts[0] &&
+							item.candidates[0].content.parts[0].text
+						) {
+							ucapanGabungan +=
+								item.candidates[0].content.parts[0].text;
+						}
+					});
+					ucapanGabungan = ucapanGabungan.trim();
+				} else {
+					ucapanGabungan = noUcapan;
+				}
+			}
+
+			console.log("Ucapan:", ucapanGabungan);
+		} catch (error) {
+			ucapanGabungan = noUcapan;
+
+			console.error("Error:", error);
+		}
+
+		if (!ucapanGabungan.trim() || ucapanGabungan === noUcapan) {
+			tryErrorMessage.forEach((elm) => {
+				do {
+					elm.classList.remove("d-none");
+				} while (elm.classList.contains("d-none"));
+			});
+		} else {
+			tryOtherMessage.forEach((elm) => {
+				do {
+					elm.classList.remove("d-none");
+				} while (elm.classList.contains("d-none"));
+			});
+
+			const data = {
+				from: fromName,
+				target: name,
+				option: parseInt(option),
+				message: ucapanGabungan,
+			};
+
+			if (isCU) {
+				[urlDB, urlsdataDB] = await generateUrl(Object.values(data));
+
+				urlsdatasDB[urlDB] = urlsdataDB;
+
+				localStorage.setItem(
+					"url",
+					urlDB
+						.replace(window.location.origin, "")
+						.replace(urlDB.origin, "")
+						.replace("?i=", "")
+				);
+				function isCircular(obj, seen = new WeakSet()) {
+					if (typeof obj !== "object" || obj === null) return false;
+					if (seen.has(obj)) return true;
+					seen.add(obj);
+					return Object.values(obj).some((value) =>
+						isCircular(value, seen)
+					);
+				}
+
+				if (isCircular(urlsdataDB)) {
+					console.error("Data mengandung referensi circular!");
+				} else {
+					localStorage.setItem(urlDB, JSON.stringify(urlsdataDB));
+				}
+			}
+		}
+
+		return [ucapanGabungan, urlDB];
+	}
+
+	async function tampilkanKartu(
+		name,
+		option,
+		regenerate = false,
+		isChange = false
+	) {
+		// document.getElementById("cardTitle").innerText = `Untuk ${name}`;
+		// document.getElementById("cardSection").style.display = "block";
+
+		console.log(name, option, regenerate);
+
+		[ucapanGabungan, urlDB] = await generateUcapan(
+			name,
+			option,
+			regenerate,
+			isChange
+		);
+
+		document.getElementById("cardMessage").innerHTML =
+			marked.parse(ucapanGabungan);
+
+		alert(`Akses halaman ini di: ${urlDB}`, false);
+
+		if (window.location.href.replace("/?", "?") !== urlDB.replace("index.html", "")) {
+			await alert(`Kamu akan diarahkan ke halaman ${urlDB}`);
+			await new Promise((res) => setTimeout(res, 1000));
+			window.location.href = urlDB;
+		}
+	}
+
+	async function getUser() {
+		let url = localStorage.getItem("url");
+		let data = localStorage.getItem("data");
+
+		if (data) {
+			try {
+				data = JSON.parse(data);
+			} catch (e) {
+				data = await getURLSDATAs();
+			}
+		} else {
+			data = await getURLSDATAs();
+		}
+
+		console.log(url, data);
+
+		return url && data ? data[url] || null : null;
+	}
+
+	async function setConfigs() {
+		urlsdataDB = await getUser();
+
+		console.log(urlsdataDB);
+
+		if (urlsdataDB) {
+			inputConfigs[0].value = urlsdataDB.target;
+			selectConfigs[0].label = `Pilih relasi (hubungan) antara Anda dan ${urlsdataDB.from}:`;
+			selectConfigs[0].default = urlsdataDB.option;
+		}
+	}
+
+	async function handleTryClick(target) {
+		target.classList.add("d-none");
+
+		await setConfigs();
+
+		const res = await multiPrompt(
+			inputConfigs,
+			selectConfigs,
+			innerHTMLOnTopMessage
+		);
+
+		if (!res.isCancel) {
+			userName = res["inputValues"]["targetName"];
+			userOption = res["selectValues"]["relationshipOption"];
+
+			let isC = false;
+
+			urlsdataDB = await getUser();
+
+			if (urlsdataDB) {
+				if (
+					(urlsdataDB.target === userName &&
+						urlsdataDB.option !== userOption) ||
+					(urlsdataDB.target !== userName &&
+						urlsdataDB.option === userOption)
+				) {
+					isC = true;
+				}
+			} else {
+				isC = true;
+			}
+
+			await tampilkanKartu(userName, userOption, true, isC);
+		}
+
+		target.classList.remove("d-none");
+	}
+
+	document.addEventListener("click", async function (event) {
+		// Jika tombol yang diklik adalah .tryErrorMessage
+		if (event.target.classList.contains("tryErrorMessage")) {
+			await handleTryClick(event.target);
+		}
+
+		// Jika tombol yang diklik adalah .tryOtherMessage
+		if (event.target.classList.contains("tryOtherMessage")) {
+			await handleTryClick(event.target);
+		}
+
+		if (event.target.classList.contains("waButton")) {
+			window.open(`https://wa.me/${whatsappNumber}`, "_blank");
+		}
+
+		if (event.target.classList.contains("manageURL")) {
+			window.open(`manage.html`, "_blank");
+		}
+
+		if (event.target.classList.contains("urlButton")) {
+			navigator.clipboard.writeText(window.location.href).then(
+				() => alert("URL berhasil disalin", false),
+				() => alert("Gagal menyalin URL", false)
+			);
+		}
+	});
+
+	if (!window.location.href.includes("manage")) {
+		document.addEventListener("DOMContentLoaded", async () => {
+			const queryId = getQueryParam("i");
+			let isId = false;
+			let data = {};
+
+			if (queryId) {
+				data = await getURLSDATA(queryId);
+				console.log(data);
+
+				if (data) {
+					isId = true;
+				} else {
+					await alert("Id Kartu Tidak Ditemukan.");
+				}
+			}
+
+			urlsdataDB = await getUser();
+
+			const queryFromName = isId
+				? data.from
+				: getQueryParam("f") ||
+				  (urlsdataDB && urlsdataDB.from
+						? urlsdataDB.from
+						: fromName || fN);
+			let queryTargetName = isId
+				? data.target
+				: getQueryParam("t") ||
+				  (urlsdataDB && urlsdataDB.target ? urlsdataDB.target : "");
+			let queryOption = isId
+				? data.option
+				: getQueryParam("o") ||
+				  (urlsdataDB && urlsdataDB.option ? urlsdataDB.option : "");
+
+			fromName = queryFromName;
+
+			console.log(queryFromName, queryTargetName, queryOption);
+
+			if (
+				queryFromName.trim() &&
+				queryTargetName.trim() &&
+				queryOption.trim()
+			) {
+				[urlDB, urlsdatasDB] = await generateUrl([
+					queryFromName.trim(),
+					queryTargetName.trim(),
+					queryOption.trim(),
+				]);
+
+				urlsdatasDB[urlDB] = urlsdataDB;
+
+				localStorage.setItem(
+					"url",
+					urlDB
+						.replace(window.location.origin, "")
+						.replace(urlDB.origin, "")
+						.replace("?i=", "")
+				);
+				localStorage.setItem(urlDB, JSON.stringify(urlsdataDB));
+				localStorage.setItem("data", JSON.stringify(urlsdatasDB));
+			}
+
+			await setConfigs();
+
+			let res3 = false;
+
+			do {
+				let res2 = false;
+
+				do {
+					let res1 = false;
+
+					if (!res3 === !res2 || (!res3 && res2)) {
+						do {
+							let res0 = false;
+
+							if (!res2 === !res1 || (!res2 && res1)) {
+								do {
+									// MultiPrompt 1: Konfirmasi awal
+									if (!res1 === !res0 || (!res1 && res0)) {
+										let res = await multiPrompt(
+											inputConfigs,
+											selectConfigs,
+											`<div class="child-container text-center">
+								<img class="img-fluid rounded-circle" src="https://media.stickerswiki.app/stickerly_o1nn49_by_stickerly_official_bot/1825567.512.webp">
+								<h2 class="mb-3">Apakah benar ini Anda?</h2></div>`,
+											false,
+											false,
+											isId
+										);
+
+										let isC = false;
+
+										if (!isId && !res.isCancel) {
+											queryTargetName =
+												res["inputValues"][
+													"targetName"
+												];
+											queryOption =
+												res["selectValues"][
+													"relationshipOption"
+												];
+
+											let isC = false;
+
+											urlsdataDB = await getUser();
+
+											if (urlsdataDB) {
+												if (
+													(urlsdataDB.target ===
+														userName &&
+														urlsdataDB.option !==
+															userOption) ||
+													(urlsdataDB.target !==
+														userName &&
+														urlsdataDB.option ===
+															userOption)
+												) {
+													isC = true;
+												}
+											} else {
+												isC = true;
+											}
+
+											// [urlDB, urlsdatasDB] =
+											// 	await generateUrl([
+											// 		queryFromName.trim(),
+											// 		queryTargetName.trim(),
+											// 		queryOption.trim(),
+											// 	]);
+
+											// urlsdatasDB[urlDB] = urlsdataDB;
+
+											localStorage.setItem(
+												"url",
+												urlDB
+													.replace(
+														window.location.origin,
+														""
+													)
+													.replace(urlDB.origin, "")
+													.replace("?i=", "")
+											);
+											localStorage.setItem(
+												urlDB,
+												JSON.stringify(urlsdataDB)
+											);
+											localStorage.setItem(
+												"data",
+												JSON.stringify(urlsdatasDB)
+											);
+										}
+
+										alert("Tunggu sebentar...", false);
+
+										await tampilkanKartu(
+											queryTargetName,
+											queryOption,
+											isC,
+											isC
+										);
+
+										alert("Lanjut...", false);
+									}
+
+									// MultiPrompt 2: Konfirmasi lanjutan
+									res0 = (
+										await multiPrompt(
+											[],
+											[],
+											`<div class="child-container text-center">
+							<img class="img-fluid rounded-circle" src="https://i.pinimg.com/236x/db/75/9f/db759f85996381cfc69fc4878f6fa3c6.jpg">
+							<h2 class="mb-3">
+								"${queryTargetName}", apakah benar ini kamu?<br>
+								Kalau iya, yuk lanjut ada yang spesial buat kamu! 🎉✨
+							</h2>
+						</div>`.trim(),
+											true,
+											false,
+											true,
+											"Kembali"
+										)
+									).isCancel;
+								} while (res0);
+							}
+
+							// MultiPrompt 3: Menampilkan nama penerima
+							res1 = (
+								await multiPrompt(
+									[],
+									[],
+									`<div class="child-container text-center">
+						<img class="img-fluid rounded-circle" src="https://media.stickerswiki.app/pandagemoi4byofcsaraya/215937.512.webp">
+						<h2 class="mb-3">
+							Klik Lanjut
+						</h2>
+					</div>`.trim(),
+									true,
+									false,
+									true,
+									"Kembali"
+								)
+							).isCancel;
+						} while (res1);
+					}
+
+					// MultiPrompt 4: Pesan tambahan
+					res2 = (
+						await multiPrompt(
+							[],
+							[],
+							`<div class="child-container text-center">
+						<img class="img-fluid rounded-circle" src="https://i.pinimg.com/474x/7d/08/e5/7d08e5de7c11a7356c7ee187f39cbc34.jpg">
+						<div class="text-center">${
+							document.getElementById("cardSection").innerHTML
+						}</div></div>`,
+							true,
+							false,
+							true,
+							"Kembali",
+							true,
+							true,
+							document.getElementById("cardMessage").innerHTML ||
+								ucapanGabungan
+						)
+					).isCancel;
+				} while (res2);
+
+				res3 = (
+					await multiPrompt(
+						[],
+						[],
+						`<div class="child-container text-center">
+					<img class="img-fluid rounded-circle" src="https://i.pinimg.com/736x/c1/78/ea/c178eae8b11823b36f4d76fc5f8a2a29.jpg">
+					<div class="text-center">${
+						document.querySelector(".areaFooter").innerHTML
+					}</div></div>`,
+						true,
+						false,
+						true,
+						"Kembali",
+						false
+					)
+				).isCancel;
+			} while (res3);
+		});
+	}
+} catch (e) {
+	console.error(e);
+}
+
+let counterAlert = 0;
+
+async function alert(
+	message = "",
+	isPopUp = true,
+	isTime = false,
+	timeOut = 5,
+	messagesAfterTimeOut = [],
+	awaitResolve = 0
+) {
+	counterAlert++;
+
+	return new Promise((resolve) => {
+		try {
+			let modal;
+			let messageElem;
+			let timeOutElm;
+			let okBtn;
+			let intervalId;
+
+			if (isPopUp) {
+				modal = document.createElement("div");
+				modal.className = "modal";
+				modal.style.position = "fixed";
+				modal.style.top = "0";
+				modal.style.left = "0";
+				modal.style.width = "100%";
+				modal.style.height = "100%";
+				modal.style.backgroundColor = "rgba(0,0,0,0.5)";
+				modal.style.display = "flex";
+				modal.style.alignItems = "center";
+				modal.style.justifyContent = "center";
+			} else {
+				modal = document.createElement("div");
+				modal.className = "notification";
+				modal.style.position = "fixed";
+				modal.style.top = "5%";
+				modal.style.right = "2.5%";
+				modal.style.padding = "10px 20px";
+				modal.style.borderRadius = "5px";
+				modal.style.zIndex = "1000000000";
+				modal.setAttribute("data-aos", "fade-left");
+			}
+
+			const modalContent = document.createElement("div");
+			modalContent.className = `modal-content d-flex align-items-center ${
+				isPopUp
+					? "bg-light"
+					: counterAlert % 2 === 0
+					? "bg-success"
+					: "bg-primary"
+			} p-3 ${isPopUp ? "" : "text-white"}`;
+			modalContent.style.width = isPopUp ? "75%" : "100%";
+			modalContent.style.height = isPopUp ? "" : "100%";
+			modalContent.style.borderRadius = "5px";
+			modalContent.style.boxShadow = isPopUp
+				? "0 2px 10px rgba(0,0,0,0.1)"
+				: "";
+
+			messageElem = document.createElement("p");
+			messageElem.innerHTML =
+				(!isPopUp ? `<i class="bi bi-bell-fill m-2"></i>` : ``) +
+				message;
+
+			timeOutElm = document.createElement("p");
+
+			okBtn = document.createElement("button");
+			okBtn.className = `btn ${
+				counterAlert % 2 === 0 ? "btn-primary" : "btn-warning"
+			} btn-lg`;
+			okBtn.textContent = "OK";
+			okBtn.style.minWidth = "80px";
+			okBtn.style.display = isTime ? "none" : "block";
+			okBtn.style.marginTop = "10px";
+
+			modalContent.appendChild(messageElem);
+
+			if (isTime) {
+				modalContent.appendChild(timeOutElm);
+			}
+
+			if (isPopUp) {
+				const btnContainer = document.createElement("div");
+				btnContainer.style.marginTop = "20px";
+				btnContainer.appendChild(okBtn);
+				modalContent.appendChild(btnContainer);
+			}
+
+			modal.appendChild(modalContent);
+			document.body.appendChild(modal);
+
+			okBtn.addEventListener("click", function () {
+				if (intervalId) clearInterval(intervalId);
+				if (document.body.contains(modal)) {
+					document.body.removeChild(modal);
+				}
+				resolve();
+			});
+
+			if (!isPopUp) {
+				intervalId = setInterval(async () => {
+					timeOut--;
+					console.log(timeOut);
+					if (messagesAfterTimeOut.length === 0)
+						timeOutElm.textContent = timeOut;
+					if (messagesAfterTimeOut.length > 0) {
+						messagesAfterTimeOut.forEach((mes) => {
+							if (mes.timeOut >= timeOut) {
+								modalContent.className =
+									"modal-content d-flex align-items-center bg-warning p-3";
+								messageElem.textContent = mes.message;
+								timeOutElm.textContent = timeOut;
+							}
+						});
+					}
+
+					if (timeOut <= 0) {
+						await new Promise((res) =>
+							setTimeout(res, awaitResolve)
+						);
+						if (document.body.contains(modal)) {
+							document.body.removeChild(modal);
+						}
+						clearInterval(intervalId);
+						resolve();
+					}
+				}, 1000);
+
+				setTimeout(() => {
+					if (document.body.contains(modal)) {
+						document.body.removeChild(modal);
+					}
+					resolve();
+				}, timeOut * 1000);
+			}
+		} catch (e) {
+			console.error(e);
+		}
+	});
+}
+
+async function multiPrompt(
+	inputConfigs = [
+		{
+			label: "Nama:",
+			type: "text",
+			placeholder: "Masukkan nama Anda",
+			id: "name",
+			value: "",
+		},
+	],
+	selectConfigs = [
+		{
+			label: "Pilih Gender:",
+			options: [
+				{ value: "L", label: "Laki-laki" },
+				{ value: "P", label: "Perempuan" },
+			],
+			default: "L",
+			id: "gender",
+		},
+	],
+	innerHTMLOnTopMessage = "",
+	withCancelButton = true,
+	isDOM = false,
+	isDisabledAll = false,
+	cancelText = "",
+	withNextButton = true,
+	runFunc = false,
+	originalText = ""
+) {
+	console.log(ucapanGabungan, originalText, "AAAA");
+	return new Promise((resolve) => {
+		const modal = document.createElement("div");
+		modal.className = "modal";
+		Object.assign(modal.style, {
+			position: "fixed",
+			top: "0",
+			left: "0",
+			width: "100%",
+			height: "100%",
+			backgroundColor: "rgba(0,0,0,0.5)",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+		});
+
+		const modalContent = document.createElement("div");
+		modalContent.className = "modal-content";
+		Object.assign(modalContent.style, {
+			width: "75%",
+			background: "#fff",
+			padding: "20px",
+			borderRadius: "5px",
+			boxShadow: "0 2px 10px rgba(0,0,0,0.1)",
+		});
+
+		const okBtn = document.createElement("button");
+		const okBtnClassName = "btn btn-success btn-lg";
+		const okBtnTextContent = "Cari";
+
+		okBtn.className = isDOM
+			? okBtnClassName.replace("success", "warning")
+			: okBtnClassName;
+		okBtn.textContent = isDisabledAll
+			? "Lanjut"
+			: isDOM
+			? okBtnTextContent
+			: "Ganti pesan";
+		okBtn.style.marginRight = "10px";
+		okBtn.style.display = withNextButton ? "" : "none";
+
+		const cancelBtn = document.createElement("button");
+		cancelBtn.className =
+			"btn btn-danger btn-lg" + (withCancelButton ? "" : " d-none");
+		cancelBtn.textContent = cancelText || "Batal";
+
+		const innerHTMLOnTopMessageContent = document.createElement("div");
+		innerHTMLOnTopMessageContent.innerHTML = innerHTMLOnTopMessage;
+
+		const form = document.createElement("form");
+
+		const inputElements = {};
+		const selectElements = {};
+
+		function changeOKBTN(isChange) {
+			okBtn.textContent = isDisabledAll
+				? "Lanjut"
+				: isDOM
+				? okBtnTextContent
+				: isChange === false
+				? "Ganti pesan"
+				: "Ganti data";
+			okBtn.className = isDOM
+				? okBtnClassName.replace("success", "warning")
+				: isChange === false
+				? okBtnClassName
+				: okBtnClassName.replace("success", "primary");
+		}
+
+		inputConfigs.forEach((config) => {
+			const labelElem = document.createElement("label");
+			labelElem.textContent = config.label;
+			Object.assign(labelElem.style, {
+				display: "block",
+				marginTop: "10px",
+			});
+			form.appendChild(labelElem);
+
+			const input = document.createElement("input");
+			Object.assign(input, {
+				type: config.type || "text",
+				placeholder: config.placeholder || "",
+				required: true,
+				id: config.id,
+			});
+			Object.assign(input.style, {
+				width: "100%",
+				marginTop: "5px",
+			});
+			input.className = "form-control form-control-lg";
+			input.value = config.value;
+			inputElements[config.id] = input;
+			form.appendChild(input);
+
+			if (isDisabledAll) input.disabled = true;
+
+			input.addEventListener("change", () => {
+				changeOKBTN(inputElements[config.id].value !== config.value);
+			});
+		});
+
+		selectConfigs.forEach((config) => {
+			const labelElem = document.createElement("label");
+			labelElem.textContent = config.label;
+			Object.assign(labelElem.style, {
+				display: "block",
+				marginTop: "10px",
+			});
+			form.appendChild(labelElem);
+
+			const selectElem = document.createElement("select");
+			Object.assign(selectElem, {
+				required: true,
+				id: config.id,
+			});
+			Object.assign(selectElem.style, {
+				width: "100%",
+				marginTop: "5px",
+			});
+			selectElem.className = "form-select form-select-lg";
+
+			config.options.forEach((opt) => {
+				const optionElem = document.createElement("option");
+				optionElem.value = opt.value;
+				optionElem.textContent = opt.label;
+				if (config.default === opt.value) optionElem.selected = true;
+				selectElem.appendChild(optionElem);
+			});
+
+			selectElements[config.id] = selectElem;
+			form.appendChild(selectElem);
+
+			if (isDisabledAll) selectElem.disabled = true;
+
+			selectElem.addEventListener("change", () => {
+				changeOKBTN(selectElements[config.id].value !== config.default);
+			});
+		});
+
+		const btnContainer = document.createElement("div");
+		Object.assign(btnContainer.style, {
+			marginTop: "20px",
+			textAlign: "right",
+		});
+
+		btnContainer.appendChild(okBtn);
+		btnContainer.appendChild(cancelBtn);
+		form.appendChild(btnContainer);
+
+		modalContent.appendChild(innerHTMLOnTopMessageContent);
+		modalContent.appendChild(form);
+		modal.appendChild(modalContent);
+		document.body.appendChild(modal);
+
+		console.log(runFunc);
+
+		function initTypewriter() {
+			async function typeWriterHTML(element, html, speed = 50) {
+				let currentLength = renderedUcapanGabungan.length;
+				for (let i = currentLength; i < html.length; i++) {
+					renderedUcapanGabungan += html.charAt(i);
+					element.innerHTML = renderedUcapanGabungan;
+					await new Promise((resolve) => setTimeout(resolve, speed));
+
+					okBtn.disabled = true;
+					cancelBtn.disabled = true;
+				}
+
+				okBtn.disabled = false;
+				cancelBtn.disabled = false;
+			}
+
+			const cardMessagess = document.querySelectorAll(".card-body");
+			cardMessagess.forEach((cardMessages, index) => {
+				if (index !== 0) {
+					typeWriterHTML(
+						cardMessages,
+						marked.parse(originalText),
+						25
+					);
+				}
+			});
+		}
+
+		if (document.readyState === "loading") {
+			document.addEventListener("DOMContentLoaded", initTypewriter);
+		} else {
+			initTypewriter();
+		}
+
+		form.addEventListener("submit", function (e) {
+			e.preventDefault();
+
+			let isValid = true;
+			const inputValues = {};
+			const selectValues = {};
+
+			Object.entries(inputElements).forEach(([id, elem]) => {
+				const value = elem.value.trim();
+				inputValues[id] = value;
+				if (value.length === 0) {
+					elem.style.border = "1px solid red";
+					isValid = false;
+				} else {
+					elem.style.border = "";
+				}
+			});
+
+			Object.entries(selectElements).forEach(([id, elem]) => {
+				const value = elem.value;
+				selectValues[id] = value;
+				if (!value) {
+					elem.style.border = "1px solid red";
+					isValid = false;
+				} else {
+					elem.style.border = "";
+				}
+			});
+
+			if (isValid) {
+				document.body.removeChild(modal);
+				console.log(inputValues, selectValues);
+				resolve({ inputValues, selectValues, isCancel: false });
+			}
+		});
+
+		okBtn.addEventListener("click", () => {
+			form.dispatchEvent(new Event("submit", { cancelable: true }));
+		});
+
+		cancelBtn.addEventListener("click", () => {
+			document.body.removeChild(modal);
+			resolve({
+				inputValues: null,
+				selectValues: null,
+				isCancel: true,
+			});
+		});
+	});
+}
+
+let isCustomMessage = false;
+
+try {
+	document
+		.getElementById("btnGU")
+		.addEventListener("click", async function () {
+			const fromName = document.getElementById("fromName").value.trim();
+			const targetName = document
+				.getElementById("targetName")
+				.value.trim();
+			const option = parseInt(
+				document.getElementById("relationshipOption").value.trim()
+			);
+			const message = document.getElementById("message").value.trim();
+
+			const generatedUrl = (
+				await generateUrl([
+					fromName,
+					targetName,
+					option,
+					isCustomMessage ? message : "",
+				])
+			)[0];
+
+			document.getElementById(
+				"generatedUrl"
+			).innerHTML = `<div class='alert alert-success'>
+					 <strong>URL Generated:</strong> <a href="${generatedUrl}" target="_blank">${generatedUrl}</a>
+				 </div>`;
+		});
+
+	document
+		.getElementById("isCustomMessage")
+		.addEventListener("change", function () {
+			const inputMessage = document.getElementById("inputMessage");
+			if (this.checked) {
+				inputMessage.setAttribute("class", "mt-3");
+				isCustomMessage = true;
+			} else {
+				inputMessage.setAttribute("class", "mt-3 d-none");
+				isCustomMessage = false;
+			}
+		});
+} catch (error) {}
+
+async function generateUrl([fromName, targetName, option, message = ""]) {
+	let i = 0;
+	let generatedUrl = "";
+
+	while (true) {
+		let queryUrl = "";
+
+		if (!fromName || !targetName) {
+			alert("Mohon isi semua field sebelum generate URL", false);
+			return;
+		}
+
+		const fts = [fromName, targetName];
+
+		fts.forEach((ft, indexs) => {
+			let finalFN = "";
+
+			let fNS = ft.split(" ");
+			let fNSJ = fNS.join("");
+
+			fNS.forEach((word, index) => {
+				let wl = Math.round(word.length / (i + 2));
+				finalFN +=
+					(indexs === 0 && index === 0) ||
+					(indexs === 1 && index === fNS.length - 1)
+						? (word[i] || "x") +
+						  (fNSJ[wl] || "y") +
+						  (word[word.length - (i + 1)] || "z")
+						: "";
+			});
+
+			queryUrl += finalFN + (indexs === 0 ? "X" : "Y");
+		});
+
+		const char = "abcdefghijklmnopqrstuvwxyz";
+
+		queryUrl += char[option + i] || "Z";
+
+		let data = await getURLSDATA(queryUrl);
+
+		if (!data) {
+			data = {
+				from: fromName,
+				target: targetName,
+				option: option.toString(),
+				message: message,
+			};
+		}
+
+		console.log(queryUrl, data);
+
+		let isSuccess = false;
+
+		[isSuccess, urlsdatasDB] = await setURLSDATAData(queryUrl, data);
+
+		i++;
+
+		if (isSuccess) {
+			generatedUrl = `${window.location.origin}?i=` + queryUrl;
+			break;
+		}
+	}
+
+	return [generatedUrl, urlsdatasDB];
+}
+
+try {
+	function addStars(count) {
+		for (let i = 0; i < count; i++) {
+			const star = document.createElement("div");
+			star.className = "star";
+			// Atur posisi acak
+			star.style.top = Math.random() * 100 + "%";
+			star.style.left = Math.random() * 100 + "%";
+			// Atur durasi animasi antara 2s hingga 5s
+			star.style.animationDuration = 2 + Math.random() * 3 + "s";
+			// Atur delay animasi antara 0s hingga 3s
+			star.style.animationDelay = Math.random() * 3 + "s";
+			document.body.appendChild(star);
+		}
+	}
+	addStars(100);
+} catch {}