Spaces:

Adityadn
/

KUEID14H

Running

App Files Files Community

Adityadn commited on Mar 30

Commit

b094f43

verified ·

1 Parent(s): 32a99eb

Upload 8 files

Browse files

Files changed (9) hide show

.gitattributes +1 -0
bg.mp4 +3 -0
data.js +106 -0
index.html +74 -19
list.json +7 -0
manage.html +122 -0
script.js +1167 -0
style.css +141 -28
templates.json +0 -0

.gitattributes CHANGED Viewed

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+bg.mp4 filter=lfs diff=lfs merge=lfs -text

bg.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:f5f0eb90cec141d5f9213d5fd10316361108f6350b63f3b31d7365e46327981b
+size 691778

data.js ADDED Viewed

	@@ -0,0 +1,106 @@

+const GITHUB_TOKEN = atob(
+	"Z2l0aHViX3BhdF8xMUFYNEtVTlkwMGFoclFZdjNBRzdLX1MwOW1aOFVDM2VRaTlMNW1mWDk2akdDSWFUaXRuaHJhbEkwSmR4TmRPc2k3Q1RPRUJKTXg4M3NQeExv"
+);
+const GITHUB_OWNER = "Adityadn64";
+const GITHUB_REPO = "KARTU-UCAPAN-EID-1446H";
+const URLS_DATAS_FILE_PATH = "d/urlsdatas.json";
+async function getURLSDATAs() {
+	const res = await fetch(
+		`https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${URLS_DATAS_FILE_PATH}`,
+		{
+			headers: {
+				Accept: "application/vnd.github+json",
+				Authorization: `Bearer ${GITHUB_TOKEN}`,
+			},
+		}
+	);
+	const fileData = await res.json();
+	let currentURLSDATAs = {};
+	try {
+		currentURLSDATAs = JSON.parse(
+			decodeURIComponent(escape(window.atob(fileData.content)))
+		);
+	} catch (e) {
+		console.error("Error parsing current urlsdatas; using empty object", e);
+	}
+	return [currentURLSDATAs, fileData];
+}
+async function getURLSDATA(urlsdata) {
+	return (await getURLSDATAs())[0][urlsdata];
+}
+async function setURLSDATAData(urlsdata, data) {
+	let [urlsdatasDB, fileData] = await getURLSDATAs();
+	const bata = urlsdatasDB[urlsdata];
+	const rbdY =
+		bata &&
+		bata.from &&
+		bata.target &&
+		bata.option &&
+		bata.message &&
+		bata.from === data.from &&
+		bata.target === data.target &&
+		bata.option === data.option &&
+		bata.message === (data.message || "");
+	const rbdN =
+		bata &&
+		bata.from &&
+		bata.target &&
+		bata.option &&
+		bata.message &&
+		bata.message.trim() !== "" &&
+		(bata.from !== data.from ||
+			bata.target !== data.target ||
+			bata.option !== data.option ||
+			bata.message === (data.message || ""));
+	if (bata && rbdN) return [false, urlsdatasDB];
+	if (!rbdY) {
+		urlsdatasDB[urlsdata] = data;
+		await updateURLSDATADataToGitHub(urlsdatasDB, fileData);
+	}
+	return [true, urlsdatasDB];
+}
+async function updateURLSDATADataToGitHub(urlsdataData, fileData) {
+	try {
+		if (!fileData) fileData = (await getURLSDATAs())[1];
+		const sha = fileData.sha;
+		const newContent = btoa(
+			unescape(encodeURIComponent(JSON.stringify(urlsdataData, null, 4)))
+		);
+		const updateRes = await fetch(
+			`https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/contents/${URLS_DATAS_FILE_PATH}`,
+			{
+				method: "PUT",
+				headers: {
+					Accept: "application/vnd.github+json",
+					Authorization: `Bearer ${GITHUB_TOKEN}`,
+				},
+				body: JSON.stringify({
+					message: "Update urlsdata data",
+					content: newContent,
+					sha: sha,
+				}),
+			}
+		);
+		const result = await updateRes.json();
+		console.log("Update urlsdata data result:", result, urlsdataData);
+	} catch (err) {
+		console.error("Error updating urlsdata data to GitHub:", err);
+	}
+}

index.html CHANGED Viewed

@@ -1,19 +1,74 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="id">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Kartu Ucapan Idul Fitri 1446 H</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 Background -->
+		<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">
+			<div
+				id="cardSection"
+				class="card text-center"
+				data-aos="fade-up"
+				style="display: none"
+			>
+				<div class="card-header">
+					<h4>Selamat Hari Raya Idul Fitri 1446 H</h4>
+				</div>
+				<div class="card-body">
+					<p class="card-text" id="cardMessage">
+						Sedang memuat ucapan...
+					</p>
+				</div>
+				<div class="card-footer text-muted">
+					<h5>Mohon maaf lahir dan batin</h5>
+				</div>
+			</div>
+			<div class="areaFooter" style="display: none">
+				<button class="tryErrorMessage btn btn-primary d-none m-3">
+					Ada yang salah. Coba lagi
+				</button>
+				<button class="tryOtherMessage btn btn-warning m-3">
+					Ganti pesan
+				</button>
+				<button class="waButton btn btn-success m-3">
+					Hubungi developer <i class="bi bi-whatsapp"></i>
+				</button>
+				<button class="urlButton btn btn-primary m-3">
+					Salin alamat halaman ini
+					<i class="bi bi-link-45deg"></i>
+				</button>
+				<button class="manageURL btn btn-danger m-3">
+					Buat untuk diri sendiri
+				</button>
+			</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="data.js"></script>
+	</body>
+</html>

list.json ADDED Viewed

	@@ -0,0 +1,7 @@

+[
+	"https://media.stickerswiki.app/stickerly_o1nn49_by_stickerly_official_bot/1825567.512.webp",
+	"https://i.pinimg.com/236x/db/75/9f/db759f85996381cfc69fc4878f6fa3c6.jpg",
+	"https://media.stickerswiki.app/pandagemoi4byofcsaraya/215937.512.webp",
+	"https://i.pinimg.com/474x/7d/08/e5/7d08e5de7c11a7356c7ee187f39cbc34.jpg",
+	"https://i.pinimg.com/736x/c1/78/ea/c178eae8b11823b36f4d76fc5f8a2a29.jpg"
+]

manage.html ADDED Viewed

	@@ -0,0 +1,122 @@

+<!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 Background -->
+		<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>
+						<!-- Switch dengan Bootstrap -->
+						<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>
+						<!-- Input pesan yang muncul saat switch aktif -->
+						<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>

script.js ADDED Viewed

	@@ -0,0 +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 {}

style.css CHANGED Viewed

@@ -1,28 +1,141 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}

+/* Global Styles */
+html,
+body {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%;
+	overflow-x: hidden;
+	box-sizing: border-box;
+}
+body {
+	/* Background gradient hijau ketupat */
+	background: linear-gradient(135deg, #228b22, #32cd32);
+	font-family: "Arial", sans-serif;
+	font-size: 1rem;
+}
+/* Styling untuk kartu ucapan yang sudah ada */
+.card {
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+	border: none;
+}
+/* --- Animasi Bintang --- */
+@keyframes twinkle {
+	0%,
+	100% {
+		opacity: 0.8;
+		transform: scale(1);
+	}
+	50% {
+		opacity: 1;
+		transform: scale(1.2);
+	}
+}
+/* Style untuk bintang */
+.star {
+	position: absolute;
+	background: #fff;
+	border-radius: 50%;
+	width: 2px;
+	height: 2px;
+	animation: twinkle 2s infinite ease-in-out;
+}
+/* --- Elemen Ketupat --- */
+.eid-ketupat {
+	position: absolute;
+	z-index: 2;
+	width: 80px;
+	height: 80px;
+	background: #32cd32; /* Warna hijau */
+	/* Bentuk diamond menggunakan clip-path */
+	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+	border: 2px solid #006400; /* Warna dark green */
+	border-radius: 5px;
+	animation: swing 3s ease-in-out infinite;
+}
+/* --- Elemen Lentera --- */
+.eid-lantern {
+	position: absolute;
+	z-index: 2;
+	width: 50px;
+	height: 70px;
+	background: #ffcc00;
+	border: 2px solid #ff9900;
+	border-radius: 10px;
+	box-shadow: 0 0 10px rgba(255, 204, 0, 0.9);
+	animation: swing 2.5s ease-in-out infinite, blink 1.5s ease-in-out infinite;
+}
+/* Keyframes untuk efek ayunan (swing) */
+@keyframes swing {
+	0% {
+		transform: translateY(0) rotate(0deg);
+	}
+	25% {
+		transform: translateY(-5px) rotate(5deg);
+	}
+	50% {
+		transform: translateY(0) rotate(0deg);
+	}
+	75% {
+		transform: translateY(5px) rotate(-5deg);
+	}
+	100% {
+		transform: translateY(0) rotate(0deg);
+	}
+}
+/* Keyframes untuk efek kedip (blink) pada lentera */
+@keyframes blink {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+/* Style untuk Three.js canvas (jika ada) */
+#threeCanvas,
+#tunnelCanvas {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: -1;
+	display: block;
+}
+/* Video Background */
+#background-video {
+	position: fixed;
+	right: 0;
+	bottom: 0;
+	min-width: 100%;
+	min-height: 100%;
+	width: auto;
+	height: auto;
+	z-index: -1;
+	object-fit: cover;
+	filter: opacity(0.99);
+}
+.child-container {
+	text-align: center;
+	margin: 0 auto;
+}
+.img-fluid {
+	margin: 5px;
+	width: 250px;
+	height: auto;
+	object-fit: cover;
+}

templates.json ADDED Viewed

The diff for this file is too large to render. See raw diff