-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
108 lines (102 loc) · 3.91 KB
/
index.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Maps with PACI</title>
</head>
<body class="font-sans text-gray-50 bg-gray-800 flex md:items-center h-screen">
<div id="app" class="mx-auto">
<h1 class="text-xl/normal md:mb-4 md:text-4xl/normal text-center">Improved User Address Extraction Flows for Kuwaiti
Addresses</h1>
<div id="map" class="mb-4 h-96"></div>
<div class="rounded-2xl bg-gray-700 p-4 flex flex-col md:flex-row md:justify-between space-x-3">
<address class="block space-y-1 text-sm not-italic leading-6 text-gray-60">
<div class="flex space-x-4">
<div class="w-24 font-bold">
Governorate:
</div>
<div id="governorate"></div>
</div>
<div class="flex space-x-4">
<div class="w-24 font-bold">
City:
</div>
<div id="city"></div>
</div>
<div class="flex space-x-4">
<div class="w-24 font-bold">
Block:
</div>
<div id="block"></div>
</div>
<div class="flex space-x-4">
<div class="w-24 font-bold">
Street:
</div>
<div id="street"></div>
</div>
<div class="flex space-x-4">
<div class="w-24 font-bold">
House #:
</div>
<div id="house"></div>
</div>
<div class="flex space-x-4">
<div class="w-24 font-bold">
Parcel:
</div>
<div id="parcel"></div>
</div>
</address>
<address class="block self-end md:self-auto text-right space-y-1 text-sm not-italic leading-6 text-gray-60">
<div class="flex space-x-4">
<div id="governorate-ar" class="w-24"></div>
<div class="font-bold">
:المحافظة
</div>
</div>
<div class="flex space-x-4">
<div id="city-ar" class="w-24"></div>
<div class="font-bold">
:المنطقة
</div>
</div>
<div class="flex space-x-4">
<div id="block-ar" class="w-24"></div>
<div class="font-bold">
:القطعة
</div>
</div>
<div class="flex space-x-4">
<div id="street-ar" class="w-24"></div>
<div class="font-bold">
:الشارع
</div>
</div>
<div class="flex space-x-4">
<div id="house-ar" class="w-24"></div>
<div class="font-bold">
:منزل
</div>
</div>
<div class="flex space-x-4">
<div id="parcel-ar" class="w-24"></div>
<div class="font-bold">
:القسيمة
</div>
</div>
</address>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: '%VITE_GOOGLE_MAPS_API_KEY%',
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
</html>