-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
214 lines (198 loc) · 20.4 KB
/
contact.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-52115242-15"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-52115242-15');
</script>
<meta charset="utf-8">
<title>Bintang Muda Indonusa</title>
<link rel="icon" type="image/png" href="assets/img/logo3.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Website Resmi PT. Bintang Muda Indonusa">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,400i,600,600i,700,700i%7cPermanent+Marker"
rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link href="assets/css/theme.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-0 navTop"></nav>
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow navBottom"></nav>
<section class="bg-dark shadow">
<img src="assets/img/header.png" alt="Image" class="bg-image">
<div class="container">
<div class="row">
<div class="col-md-7 my-4">
<h1 class="display-4 text-primary">Hubungi Kami</h1>
<p class="lead mb-0 text-primary">Anda bisa menghubungi kami kapan pun dan dimana pun.</p>
</div>
</div>
</div>
</section>
<section class="bg-white">
<div class="container">
<div class="row text-center text-md-left justify-content-center">
<div class="col-lg-4 my-2">
<a href="#" target="_blank" class="linkWhatsapp d-sm-flex targetBlank">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg"
class="icon mr-sm-3 flex-shrink-0">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M2.00002 47.995C2.00002 49.121 2.89802 50 4.00502 50H27.995C28.526 49.9977 29.0347 49.7857 29.4102 49.4102C29.7856 49.0347 29.9976 48.5261 30 47.995V4.00502C30.0016 3.74127 29.9508 3.47984 29.8506 3.23586C29.7504 2.99188 29.6028 2.77022 29.4163 2.58372C29.2298 2.39722 29.0082 2.24959 28.7642 2.1494C28.5202 2.0492 28.2588 1.99843 27.995 2.00002H4.00502C3.47399 2.00239 2.96538 2.21439 2.58988 2.58988C2.21439 2.96538 2.00239 3.47399 2.00002 4.00502V40H30V42H2.00002V47.995ZM1.80876e-05 4.00502C0.00239539 2.94356 0.425113 1.92625 1.17568 1.17568C1.92625 0.425113 2.94356 0.00239539 4.00502 1.80876e-05H27.995C28.5214 -0.00156624 29.0429 0.100945 29.5295 0.301654C30.0162 0.502363 30.4583 0.797308 30.8305 1.16952C31.2027 1.54174 31.4977 1.98387 31.6984 2.4705C31.8991 2.95712 32.0016 3.47863 32 4.00502V47.995C31.9976 49.0565 31.5749 50.0738 30.8244 50.8244C30.0738 51.5749 29.0565 51.9976 27.995 52H4.00502C3.47863 52.0016 2.95712 51.8991 2.4705 51.6984C1.98387 51.4977 1.54174 51.2027 1.16952 50.8305C0.797308 50.4583 0.502363 50.0162 0.301654 49.5295C0.100945 49.0429 -0.00156624 48.5214 1.80876e-05 47.995V4.00502ZM16 48C15.4696 48 14.9609 47.7893 14.5858 47.4142C14.2107 47.0392 14 46.5305 14 46C14 45.4696 14.2107 44.9609 14.5858 44.5858C14.9609 44.2107 15.4696 44 16 44C16.5305 44 17.0392 44.2107 17.4142 44.5858C17.7893 44.9609 18 45.4696 18 46C18 46.5305 17.7893 47.0392 17.4142 47.4142C17.0392 47.7893 16.5305 48 16 48ZM4.00002 9.00002C4.00002 8.44802 4.45802 8.00002 5.00002 8.00002H27C27.552 8.00002 28 8.46402 28 9.00002C28 9.55202 27.542 10 27 10H5.00002C4.44802 10 4.00002 9.53602 4.00002 9.00002Z"
transform="translate(13 3)" fill="#333333" />
</svg>
<div>
<h5 class="mb-1 text-primary"><i class="bi bi-whatsapp mr-1"></i><strong class="spanTelepon"></strong></h5>
<p class="mb-0">Senin - Jum'at, 08.00 - 17.00</p>
</div>
</a>
</div>
<div class="col-lg-4 my-2">
<div class="d-sm-flex">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg"
class="icon mr-sm-3 flex-shrink-0">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10 23.6755V45.6755H12V23.6755H10ZM8 23.6755H6.989C5.333 23.6755 4 22.3115 4 20.6755C4 20.3255 4.06 19.9885 4.17 19.6755H3.003C0.482 19.6755 -0.389001 16.8645 1.717 15.4605L24.064 0.5625C25.191 -0.1895 26.814 -0.1855 27.936 0.5625L50.283 15.4605C52.4 16.8715 51.517 19.6755 48.997 19.6755H47.827C47.9869 20.127 48.0363 20.6102 47.9711 21.0847C47.9059 21.5593 47.728 22.0113 47.4523 22.4029C47.1765 22.7946 46.811 23.1145 46.3863 23.3359C45.9616 23.5573 45.49 23.6737 45.011 23.6755H44V45.6755H46.998C47.552 45.6755 48 46.1395 48 46.6755C48 47.2275 47.565 47.6755 46.998 47.6755H5.002C4.73732 47.6732 4.48412 47.5671 4.29677 47.3801C4.10942 47.1932 4.00287 46.9402 4 46.6755C4 46.1235 4.435 45.6755 5.002 45.6755H8V23.6755ZM42 23.6755H40V45.6755H42V23.6755ZM38 23.6755H34V45.6755H38V23.6755ZM32 23.6755H30V45.6755H32V23.6755ZM28 23.6755H24V45.6755H28V23.6755ZM22 23.6755H20V45.6755H22V23.6755ZM18 23.6755H14V45.6755H18V23.6755ZM5.12742e-10 50.6755C-8.44238e-06 50.4117 0.10425 50.1585 0.29006 49.9712C0.47587 49.7839 0.728173 49.6776 0.992001 49.6755H51.008C51.2732 49.6755 51.5276 49.7809 51.7151 49.9684C51.9026 50.1559 52.008 50.4103 52.008 50.6755C52.008 50.9407 51.9026 51.1951 51.7151 51.3826C51.5276 51.5701 51.2732 51.6755 51.008 51.6755H0.992001C0.444001 51.6755 5.12742e-10 51.2115 5.12742e-10 50.6755ZM25.174 2.2255L2.826 17.1255C2.377 17.4245 2.449 17.6755 3.003 17.6755H48.997C49.555 17.6755 49.63 17.4285 49.174 17.1255L26.826 2.2255C26.377 1.9265 25.63 1.9225 25.174 2.2255V2.2255ZM6 20.6755C6 21.2115 6.443 21.6755 6.989 21.6755H45.01C45.55 21.6755 45.999 21.2275 45.999 20.6755C45.999 20.1395 45.556 19.6755 45.01 19.6755H6.99C6.72644 19.6779 6.47449 19.7843 6.28906 19.9716C6.10362 20.1589 5.99973 20.4119 6 20.6755V20.6755ZM18 12.6755C18 12.1235 18.462 11.6755 19 11.6755H33C33.552 11.6755 34 12.1395 34 12.6755C34 13.2275 33.538 13.6755 33 13.6755H19C18.448 13.6755 18 13.2115 18 12.6755ZM24 7.6755H28C28.2652 7.6755 28.5196 7.78086 28.7071 7.96839C28.8946 8.15593 29 8.41028 29 8.6755C29 8.94072 28.8946 9.19507 28.7071 9.38261C28.5196 9.57014 28.2652 9.6755 28 9.6755H24C23.7348 9.6755 23.4804 9.57014 23.2929 9.38261C23.1054 9.19507 23 8.94072 23 8.6755C23 8.41028 23.1054 8.15593 23.2929 7.96839C23.4804 7.78086 23.7348 7.6755 24 7.6755Z"
transform="translate(3 3.32446)" fill="#333333" />
</svg>
<div>
<h5 class="mb-1">Kunjungi Kantor Kami</h5>
<a href="#" target="_blank" class="linkAlamat targetBlank">Temukan lokasi kami</a>
</div>
</div>
</div>
<div class="col-lg-4 my-2">
<div class="d-sm-flex">
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg"
class="icon mr-sm-3 flex-shrink-0">
<path
d="M22.98 31.607L19.134 27.281L13.208 33.206L17.775 36.811L22.979 31.607H22.98ZM24.31 33.104L19.355 38.059L23.065 40.988C23.552 41.372 24.411 41.356 24.905 40.944L27.815 38.519C27.913 38.438 27.9936 38.3379 28.052 38.225C28.1104 38.112 28.1454 37.9884 28.1548 37.8615C28.1643 37.7347 28.148 37.6073 28.1069 37.4869C28.0659 37.3665 28.0009 37.2557 27.916 37.161L24.31 33.104V33.104ZM17.803 25.784L14.589 22.168C14.22 21.753 13.578 21.713 13.179 22.068L8.661 26.084C7.468 27.144 7.509 28.707 8.757 29.692L11.627 31.958L17.803 25.783V25.784ZM34.66 37.925L30.025 33.29C29.8375 33.1024 29.7322 32.8479 29.7323 32.5826C29.7324 32.3174 29.8379 32.063 30.0255 31.8755C30.2131 31.688 30.4676 31.5827 30.7329 31.5828C30.9981 31.5829 31.2525 31.6884 31.44 31.876L36.074 36.51L40.302 32.283L35.71 27.691C35.5278 27.5024 35.427 27.2498 35.4293 26.9876C35.4316 26.7254 35.5368 26.4746 35.7222 26.2892C35.9076 26.1038 36.1584 25.9986 36.4206 25.9963C36.6828 25.994 36.9354 26.0948 37.124 26.277L41.716 30.869L44.873 27.712C44.9628 27.6234 45.0338 27.5175 45.0816 27.4007C45.1293 27.2839 45.153 27.1587 45.151 27.0325C45.149 26.9063 45.1215 26.7819 45.0701 26.6666C45.0188 26.5514 44.9445 26.4478 44.852 26.362L34.317 14.525C34.1231 14.3439 34.0092 14.0931 34.0002 13.8279C33.9912 13.5628 34.0879 13.3049 34.269 13.111C34.4501 12.9171 34.7009 12.8032 34.9661 12.7942C35.2312 12.7851 35.4891 12.8819 35.683 13.063L46.217 24.901C46.557 25.218 46.804 25.595 46.958 26H51C51.2652 26 51.5196 26.1054 51.7071 26.2929C51.8946 26.4804 52 26.7348 52 27C52 27.2652 51.8946 27.5196 51.7071 27.7071C51.5196 27.8946 51.2652 28 51 28H46.992C46.8462 28.4246 46.605 28.8101 46.287 29.127L33.127 42.287C31.99 43.424 30.082 43.562 28.9 42.666L27.504 41.868C27.3932 41.8052 27.2954 41.7217 27.216 41.622L26.186 42.481C24.968 43.495 23.058 43.531 21.826 42.557L7.518 31.262C6.412 30.389 5.836 29.204 5.795 28H1C0.734784 28 0.480429 27.8946 0.292892 27.7071C0.105356 27.5196 0 27.2652 0 27C0 26.7348 0.105356 26.4804 0.292892 26.2929C0.480429 26.1054 0.734784 26 1 26H6.238C6.493 25.49 6.858 25.01 7.333 24.589L11.849 20.574C13.077 19.483 14.983 19.601 16.084 20.839L29.411 35.832C29.6741 36.127 29.8751 36.472 30.002 36.8464C30.1289 37.2208 30.1791 37.6169 30.1496 38.0111C30.1201 38.4053 30.0115 38.7895 29.8303 39.1408C29.6492 39.4922 29.3991 39.8034 29.095 40.056L28.796 40.305L29.996 40.997C30.486 41.364 31.279 41.307 31.713 40.873L34.66 37.926V37.925ZM24.414 2L17.417 8.997C17.36 9.054 17.343 9.212 17.379 9.265L18.286 10.625C18.359 10.735 18.625 10.843 18.786 10.809L28.824 7.016C29.0815 6.97727 29.344 7.04053 29.5556 7.19232C29.7672 7.34411 29.9112 7.57246 29.9571 7.82881C30.003 8.08516 29.947 8.34929 29.8011 8.56502C29.6553 8.78075 29.431 8.93106 29.176 8.984L19.172 12.772C18.242 12.971 17.15 12.528 16.622 11.735L15.714 10.375C15.147 9.523 15.276 8.31 16.003 7.583L21.586 2H17.002C16.721 2 16.198 2.216 15.995 2.419L11.419 6.995C10.84 7.573 9.818 8 9.002 8H1C0.734784 8 0.480429 7.89464 0.292892 7.70711C0.105356 7.51957 0 7.26522 0 7C0 6.73478 0.105356 6.48043 0.292892 6.29289C0.480429 6.10536 0.734784 6 1 6H9.002C9.285 6 9.801 5.785 10.005 5.581L14.581 1.005C15.159 0.425999 16.191 0 17.002 0H36.998C37.815 0 38.841 0.426999 39.418 1.005L43.995 5.581C44.198 5.784 44.721 6 45.003 6H51C51.2652 6 51.5196 6.10536 51.7071 6.29289C51.8946 6.48043 52 6.73478 52 7C52 7.26522 51.8946 7.51957 51.7071 7.70711C51.5196 7.89464 51.2652 8 51 8H45.003C44.191 8 43.159 7.574 42.581 6.995L38.005 2.419C37.801 2.215 37.283 2 36.998 2H24.414Z"
transform="translate(3 7)" fill="#333333" />
</svg>
<div>
<h5 class="mb-1">Janji Bertemu</h5>
<a href="#modalJanji" data-toggle="modal">Buat Janji</a>
<!-- Modal -->
<div class="modal fade" id="modalJanji" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="modalJanjiLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-white">
<div class="modal-header shadow-sm p-1 d-flex justify-content-center">
<h5 class="modal-title text-center" id="modalJanjiLabel">Buat Janji Pertemuan</h5>
</div>
<form>
<div class="modal-body p-3">
<div class="form-group row">
<label for="nama" class="col-sm-2 col-form-label text-primary"><strong>Nama</strong></label>
<div class="col-sm-10">
<input type="text" class="form-control shadow-sm text-primary" id="nama" name="nama" required autocomplete="off">
</div>
</div>
<div class="form-group row">
<label for="tanggal" class="col-sm-2 col-form-label text-primary"><strong>Tanggal</strong></label>
<div class="col-sm-4">
<input type="date" class="form-control shadow-sm text-primary" id="tanggal" name="tanggal" required>
</div>
<label for="jam" class="col-sm-2 col-form-label text-primary"><strong>Jam</strong></label>
<div class="col-sm-4">
<input type="time" class="form-control shadow-sm text-primary" id="jam" name="jam" required>
</div>
</div>
<div class="form-group row">
<label for="tempat" class="col-sm-2 col-form-label text-primary"><strong>Tempat</strong></label>
<div class="col-sm-10">
<input type="text" class="form-control shadow-sm text-primary" id="tempat" name="tempat" required autocomplete="off">
</div>
</div>
<div id="textPesan" class="d-none"></div>
</div>
<div class="modal-footer p-1">
<a href="#" class="btn btn-sm btn-success text-white targetBlank" id="btnKirimPesan"><i class="bi bi-whatsapp mr-1"></i>Kirim</a>
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"><i class="bi bi-x-lg mr-1"></i>Tutup</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-md-6">
<strong class="h1 d-block text-primary spanNama"></strong>
<div class="mb-2">
<span class="d-block"><i class="bi bi-envelope-at mr-2"></i><a href="#" class="spanEmail text-primary"></a></span>
<span class="d-block"><i class="bi bi-whatsapp mr-2"></i><a href="#" class="spanTelepon linkWhatsapp targetBlank text-primary"></a></span>
<span class="d-block"><i class="bi bi-facebook mr-2"></i><a href="#" class="linkFacebook spanNama targetBlank text-primary"></a></span>
<span class="d-block"><i class="bi bi-instagram mr-2"></i><a href="#" class="linkInstagram spanNama targetBlank text-primary"></a></span>
<span class="d-block"><i class="bi bi-tiktok mr-2"></i><a href="#" class="linkTiktok spanNama targetBlank text-primary"></a></span>
<span class="d-block"><i class="bi bi-youtube mr-2"></i><a href="#" class="linkYoutube spanNama targetBlank text-primary"></a></span>
</div>
<a href="#" target="_blank" class="d-block linkAlamat spanAlamat mb-2 targetBlank text-primary"></a>
<small class="small font-italic text-muted">Hubungi kami atau mampir kapan saja, kami berusaha menjawab semua pertanyaan dalam waktu 24 jam pada hari kerja.</small>
</div>
<div class="col-md-6">
<div class="embed-responsive embed-responsive-16by9 overflow-hidden rounded shadow">
<iframe src="" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" class="w-100 h-100 iframeAlamat"></iframe>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<!-- <footer class="spacer-y-2 bg-primary"></footer> -->
<footer class="spacer-y-2 bg-dark"></footer>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.10.0/prism.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.polyfills.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/scrollmonitor@1.2.4/scrollMonitor.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/jquery-countdown@2.2.0/dist/jquery.countdown.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/smartwizard@4.3.1/dist/js/jquery.smartWizard.js"></script>
<script type="text/javascript"
src="https://unpkg.com/@fancyapps/fancybox@3.3.5/dist/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/zoom-vanilla.js@2.0.6/dist/zoom-vanilla.min.js"></script>
<script type="text/javascript" src="assets/js/theme.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
<script>
const modalJanji = document.querySelector("#modalJanji");
const inputNama = document.querySelector("#nama");
const inputTanggal = document.querySelector("#tanggal");
const inputJam = document.querySelector("#jam");
const inputTempat = document.querySelector("#tempat");
const divPesan = document.querySelector("#textPesan");
const btnKirimPesan = document.querySelector("#btnKirimPesan");
btnKirimPesan.addEventListener("click", function(e){
e.preventDefault;
if(inputNama.value == "" || inputTanggal.value == "" || inputJam.value == "" || inputTempat.value == ""){
console.log("Tidak ada data diinput!");
}else{
let pesan = `https://wa.me/62${dataTelepon}?text=Hi admin *PT. Bintang Muda Indonusa*,${urlEnter}${urlEnter}Nama Saya : *${inputNama.value}*${urlEnter}${urlEnter}Saya ingin membuat janji temu pada${urlEnter}Hari / Tanggal : *${formatTanggal(inputTanggal.value)}*${urlEnter}Jam : *${inputJam.value} WITA*${urlEnter}Tempat : *${inputTempat.value}*${urlEnter}Apakah bersedia?`;
divPesan.innerText = pesan;
btnKirimPesan.setAttribute("href",pesan);
btnKirimPesan.setAttribute("target","_blank");
// btnKirimPesan.setAttribute("data-dismiss","modal");
// window.location.reload();
}
})
</script>
</body>
</html>