Hugging Face's logo

Spaces:
Adityadn
/
KUEID14H
Running

App Files Community
KUEID14H
File size: 3,618 Bytes 
b094f43
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
<!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>