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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
|
<! DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Name Card</title>
<meta name="description" />
<meta content="initial-scale=1" name="viewport" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
</script>
<body>
<div class="header">
<article class="profile">
<div class="profile-image">
<img src="img/photo.jpeg" class="w-full" />
</div>
<div class="mb-4">
<h2 class="profile-username">Samuel Chan </h2>
<small class="profile-user-handle">Collections Senior Supervisor</small>
</div>
<p class="mb-1">One Solution Limited</p>
<div class="logo-image">
<img src="img/logo.png" class="w-full" />
</div>
<div class="profile-actions">
<button class="btn btn--primary" id="save-btn">Save Contact</button>
<button class="btn btn--primary" data-bs-toggle="modal" data-bs-target="#ExChangeModal">Exchange
Contact</button>
</div>
</article>
</div>
<div class="body">
<div class="box mb-4">Hello, I am Samuel Chan</div>
<ul class="list">
<li>
<a href="tel:85269900822" target="_blank" class="link item box">
<div class="listIcon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" class="full-width">
<path
d="M5 4H9L11 9L8.5 10.5C9.57096 12.6715 11.3285 14.429 13.5 15.5L15 13L20 15V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21C14.0993 20.763 10.4202 19.1065 7.65683 16.3432C4.8935 13.5798 3.23705 9.90074 3 6C3 5.46957 3.21071 4.96086 3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4Z"
stroke="#194ecd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="listDetail">
<p class="secound-text small mb-1">Phone</p>
<p>+852 6990 0822</p>
</div>
</a>
</li>
<li>
<a href="mailto:samuel@onesolution.com.hk" target="_blank" class="link item box">
<div class="listIcon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6ZM20 6L12 11L4 6H20ZM20 18H4V8L12 13L20 8V18Z"
fill="#194ecd" />
</svg>
</div>
<div class="listDetail">
<p class="secound-text small mb-1">Email</p>
<p class="text-truncate">samuel@onesolution.com.hk</p>
</div>
</a>
</li>
<li>
<a href="https://wa.me/85269900822?text=Hello,%20I%20am%20Samuel%20Chan" target="_blank"
class="link item box">
<div class="listIcon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" class="full-width">
<path
d="M5 4H9L11 9L8.5 10.5C9.57096 12.6715 11.3285 14.429 13.5 15.5L15 13L20 15V19C20 19.5304 19.7893 20.0391 19.4142 20.4142C19.0391 20.7893 18.5304 21 18 21C14.0993 20.763 10.4202 19.1065 7.65683 16.3432C4.8935 13.5798 3.23705 9.90074 3 6C3 5.46957 3.21071 4.96086 3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4Z"
stroke="#194ecd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="listDetail">
<p class="secound-text small mb-1">WhatsApp</p>
<p>+852 6990 0822</p>
</div>
</a>
</li>
<li>
<a href="https://www.onesolution.com.hk" target="_blank" class="link item box">
<div class="listIcon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" class="full-width">
<path
d="M10.2322 10.2309C11.1394 9.32386 12.3604 8.80016 13.6429 8.76815C14.9253 8.73613 16.171 9.19826 17.1222 10.0589L17.3032 10.2309L20.1312 13.0599C21.0523 13.9826 21.5765 15.2285 21.5922 16.5321C21.6079 17.8357 21.1138 19.0939 20.2153 20.0385C19.3167 20.9831 18.0848 21.5393 16.782 21.5887C15.4793 21.6381 14.2087 21.1768 13.2412 20.3029L13.0612 20.1309L10.9392 18.0089C10.7599 17.829 10.6558 17.5875 10.648 17.3335C10.6402 17.0796 10.7294 16.8322 10.8975 16.6417C11.0655 16.4511 11.2998 16.3316 11.5527 16.3075C11.8056 16.2834 12.0582 16.3565 12.2592 16.5119L12.3532 16.5949L14.4752 18.7169C15.0253 19.2702 15.7693 19.5874 16.5494 19.6013C17.3294 19.6152 18.0842 19.3246 18.6536 18.7913C19.223 18.2579 19.5622 17.5237 19.5993 16.7444C19.6364 15.9651 19.3684 15.202 18.8522 14.6169L18.7172 14.4739L15.8892 11.6459C15.6106 11.3673 15.2799 11.1463 14.9159 10.9955C14.5519 10.8447 14.1617 10.7671 13.7677 10.7671C13.3737 10.7671 12.9836 10.8447 12.6196 10.9955C12.2556 11.1463 11.9248 11.3673 11.6462 11.6459C11.4586 11.8334 11.2041 11.9387 10.9389 11.9386C10.6736 11.9385 10.4192 11.8331 10.2317 11.6454C10.0442 11.4578 9.93893 11.2033 9.93903 10.9381C9.93912 10.6728 10.0446 10.4184 10.2322 10.2309ZM3.86823 3.86693C4.77536 2.95986 5.99643 2.43616 7.27886 2.40415C8.56129 2.37213 9.80697 2.83426 10.7582 3.69493L10.9392 3.86693L13.0602 5.98993C13.2396 6.16989 13.3437 6.41137 13.3515 6.66532C13.3592 6.91927 13.27 7.16665 13.102 7.35721C12.9339 7.54778 12.6997 7.66724 12.4468 7.69133C12.1938 7.71542 11.9412 7.64234 11.7402 7.48693L11.6462 7.40393L9.52523 5.28293C8.9742 4.73549 8.23232 4.42311 7.45566 4.41151C6.67901 4.3999 5.92813 4.68998 5.36099 5.22072C4.79385 5.75146 4.45467 6.48147 4.4148 7.25719C4.37494 8.03291 4.63749 8.79385 5.14723 9.37993L5.28223 9.52393L8.11123 12.3529C8.67381 12.9153 9.43674 13.2313 10.2322 13.2313C11.0277 13.2313 11.7906 12.9153 12.3532 12.3529C12.4461 12.26 12.5563 12.1863 12.6776 12.136C12.799 12.0857 12.929 12.0598 13.0604 12.0597C13.1917 12.0597 13.3218 12.0855 13.4432 12.1357C13.5645 12.186 13.6748 12.2596 13.7677 12.3524C13.8606 12.4453 13.9344 12.5555 13.9847 12.6768C14.035 12.7982 14.0609 12.9282 14.0609 13.0596C14.061 13.1909 14.0352 13.321 13.9849 13.4424C13.9347 13.5637 13.8611 13.674 13.7682 13.7669C12.8611 14.674 11.64 15.1977 10.3576 15.2297C9.07517 15.2617 7.82949 14.7996 6.87823 13.9389L6.69623 13.7669L3.86823 10.9379C2.93087 10.0003 2.4043 8.72875 2.4043 7.40293C2.4043 6.07711 2.93087 4.80457 3.86823 3.86693Z"
fill="#194ecd" />
</svg>
</div>
<div class="listDetail">
<p class="secound-text small mb-1">WebSite</p>
<p class="text-truncate">www.onesolution.com.hk</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank" class="link item box">
<div class="listIcon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12 6.5C12.663 6.5 13.2989 6.76339 13.7678 7.23223C14.2366 7.70107 14.5 8.33696 14.5 9C14.5 9.3283 14.4353 9.65339 14.3097 9.95671C14.1841 10.26 13.9999 10.5356 13.7678 10.7678C13.5356 10.9999 13.26 11.1841 12.9567 11.3097C12.6534 11.4353 12.3283 11.5 12 11.5C11.337 11.5 10.7011 11.2366 10.2322 10.7678C9.76339 10.2989 9.5 9.66304 9.5 9C9.5 8.33696 9.76339 7.70107 10.2322 7.23223C10.7011 6.76339 11.337 6.5 12 6.5ZM12 2C13.8565 2 15.637 2.7375 16.9497 4.05025C18.2625 5.36301 19 7.14348 19 9C19 14.25 12 22 12 22C12 22 5 14.25 5 9C5 7.14348 5.7375 5.36301 7.05025 4.05025C8.36301 2.7375 10.1435 2 12 2ZM12 4C10.6739 4 9.40215 4.52678 8.46447 5.46447C7.52678 6.40215 7 7.67392 7 9C7 10 7 12 12 18.71C17 12 17 10 17 9C17 7.67392 16.4732 6.40215 15.5355 5.46447C14.5979 4.52678 13.3261 4 12 4Z"
fill="#194ecd" />
</svg>
</div>
<div class="listDetail">
<p class="secound-text small mb-1">Address</p>
<p>Unit 16, 11/F., Wah Shing Centre, 11-13 Shing Yip Street, Kwun Tong, Kowloon, Hong Kong
</p>
</div>
</a>
</li>
<li>
<a href="https://www.instagram.com/onesolutionhk/" target="_blank" class="link item box">
<div class="listIcon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" class="full-width">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3 8C3 6.67392 3.52678 5.40215 4.46447 4.46447C5.40215 3.52678 6.67392 3 8 3H16C17.3261 3 18.5979 3.52678 19.5355 4.46447C20.4732 5.40215 21 6.67392 21 8V16C21 17.3261 20.4732 18.5979 19.5355 19.5355C18.5979 20.4732 17.3261 21 16 21H8C6.67392 21 5.40215 20.4732 4.46447 19.5355C3.52678 18.5979 3 17.3261 3 16V8ZM8 5C7.20435 5 6.44129 5.31607 5.87868 5.87868C5.31607 6.44129 5 7.20435 5 8V16C5 16.7956 5.31607 17.5587 5.87868 18.1213C6.44129 18.6839 7.20435 19 8 19H16C16.7956 19 17.5587 18.6839 18.1213 18.1213C18.6839 17.5587 19 16.7956 19 16V8C19 7.20435 18.6839 6.44129 18.1213 5.87868C17.5587 5.31607 16.7956 5 16 5H8ZM15.597 7.214C15.597 6.94878 15.7024 6.69443 15.8899 6.50689C16.0774 6.31936 16.3318 6.214 16.597 6.214H16.607C16.8722 6.214 17.1266 6.31936 17.3141 6.50689C17.5016 6.69443 17.607 6.94878 17.607 7.214C17.607 7.47922 17.5016 7.73357 17.3141 7.92111C17.1266 8.10864 16.8722 8.214 16.607 8.214H16.597C16.3318 8.214 16.0774 8.10864 15.8899 7.92111C15.7024 7.73357 15.597 7.47922 15.597 7.214ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9ZM7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12Z"
fill="#194ecd" />
</svg>
</div>
<div class="listDetail">
<p class="secound-text small mb-1">Instagram</p>
<p class="text-truncate">https://www.instagram.com/onesolutionhk/</p>
</div>
</a>
</li>
<li>
<a href="https://www.facebook.com/OneSolutionHK/" target="_blank" class="link item box">
<div class="listIcon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.88766 18.7501C3.18891 18.7501 2.52516 18.4726 2.02516 17.9789C1.52516 17.4851 1.25391 16.8151 1.25391 16.1164V3.87887C1.25391 3.18012 1.53141 2.51637 2.02516 2.01637C2.51891 1.51637 3.18891 1.24512 3.88766 1.24512H16.1252C16.8239 1.24512 17.4877 1.52262 17.9877 2.01637C18.4877 2.51012 18.7589 3.18012 18.7589 3.87887V16.1164C18.7589 16.8151 18.4814 17.4789 17.9877 17.9789C17.4939 18.4789 16.8239 18.7501 16.1252 18.7501H3.88766ZM14.5752 11.3626H12.7252V17.4751H16.1252C16.3037 17.4756 16.4806 17.4408 16.6457 17.3727C16.8108 17.3046 16.9608 17.2045 17.087 17.0783C17.2133 16.952 17.3134 16.802 17.3815 16.6369C17.4496 16.4718 17.4844 16.2949 17.4839 16.1164V3.87887C17.4841 3.70039 17.449 3.52363 17.3808 3.3587C17.3126 3.19378 17.2125 3.04392 17.0863 2.91772C16.9601 2.79151 16.8102 2.69144 16.6453 2.62321C16.4804 2.55499 16.3036 2.51995 16.1252 2.52012H3.88766C3.5276 2.52111 3.18257 2.66458 2.92797 2.91918C2.67337 3.17378 2.5299 3.51881 2.52891 3.87887V16.1164C2.5299 16.4764 2.67337 16.8215 2.92797 17.0761C3.18257 17.3307 3.5276 17.4741 3.88766 17.4751H10.6877V11.3626H8.65016V9.32512H10.6877V8.23012C10.6877 6.15512 11.6977 5.24262 13.4252 5.24262C14.2339 5.24262 14.6689 5.30137 14.8752 5.33012L14.8877 5.33137V7.28137H13.7127C13.1202 7.28137 12.8402 7.53512 12.7552 8.04637C12.7347 8.17954 12.7251 8.31415 12.7264 8.44887V9.32012H14.8639L14.5727 11.3576L14.5752 11.3626Z"
fill="#194ECD" />
</svg>
</div>
<div class="listDetail">
<p class="secound-text small mb-1">Facebook</p>
<p class="text-truncate">https://www.facebook.com/OneSolutionHK/</p>
</div>
</a>
</li>
</ul>
</div>
<!-- Modal -->
<div class="modal fade" id="ExChangeModal" tabindex="-1" aria-labelledby="ExChangeModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form id="contactForm">
<div class="modal-header">
<h5 class="modal-title" id="ExchangeContact">Exchange Contact</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="ExName" class="form-label small"><span
class="text-danger">*</span>Name</label>
<input type="text" class="form-control" id="ExName">
</div>
<div class="mb-3">
<label for="Ex_phone" class="form-label small"><span
class="text-danger">*</span>Phone</label>
<div class="input-group mb-3">
<select class="form-select" id="Ex_phone_city">
<option selected value="+852">+852</option>
<option value="+86">+86</option>
</select>
<input type="text" class="form-control" id="Ex_phone" maxlength="8"
aria-label="Exchange Phone">
</div>
</div>
<div class="mb-3">
<label for="ExEmail" class="form-label small"><span class="text-danger">*</span>Email
Address</label>
<input type="email" class="form-control" id="ExEmail" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="ExCompany" class="form-label small">Company Name</label>
<input type="text" class="form-control" id="ExCompany">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn--secondary" data-bs-dismiss="modal">Close</button>
<button class="btn btn--primary" id="ChangeBtn">ExChange Contact</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var saveBtn = document.getElementById("save-btn");
saveBtn.addEventListener("click", function() {
// Get the contact information from the website
var contact = {
name: "Samuel Chan",
company: "One Solution Limited",
title: "Collections Senior Supervisor",
whatsapp: "+85269900822",
phone: "+85269900822",
/* logo: "https://www.onesolution.com.hk/namecard/samuelchan/img/logo.png", */
email: "samuel@onesolution.com.hk",
website: "www.onesolution.com.hk",
address: "Unit 16, 11/F., Wah Shing Centre, 11-13 Shing Yip Street, Kwun Tong, Kowloon, Hong Kong"
};
// create a vcard file
var vcard = "BEGIN:VCARD\nVERSION:4.0\nPRODID:-//Apple Inc.//iPhone OS 12.3.1//EN\nFN:" +
contact.name + "\nTEL;TYPE=work,voice:" + contact.phone +
"\nEMAIL:" + contact.email + "\nADR:" + contact.address +
/* "\nORG:" + contact.company + */
/* "\nPHOTO;MEDIATYPE=image/jpeg;ENCODING=b:" + base64String + */
"\nTITLE:" + contact.title +
"\nURL:" + contact.website +
/* "\nLOGO;MEDIATYPE=image/png:" + contact.logo + */
"\nEND:VCARD";
var blob = new Blob([vcard], {
type: "text/vcard"
});
var url = URL.createObjectURL(blob);
const newLink = document.createElement('a');
newLink.download = contact.name + ".vcf";
newLink.textContent = contact.name;
newLink.href = url;
newLink.click();
});
$(function() {
$(document).on('change', '#Ex_phone_city', function() {
var selectedValue = $(this).val();
/* console.log(selectedValue); */
phoneCity(selectedValue);
});
});
function phoneCity(selectedValue) {
switch (selectedValue) {
case "+852":
$("#Ex_phone").val("");
$("#Ex_phone").attr("maxlength", "8");
break;
case "+86":
$("#Ex_phone").val("");
$("#Ex_phone").attr("maxlength", "11");
break;
}
}
function myClickFunction() {
const email = "samuel@onesolution.com.hk";
const ex_name = $("#ExName").val();
const ex_phone_all = $("#Ex_phone_city").val() + $('#Ex_phone').val();
const ex_phone = $('#Ex_phone').val();
const ex_email = $("#ExEmail").val();
const ex_company = $("#ExCompany").val();
/*
console.log("name:" + ex_name + "name:" + ex_phone + "name:" + ex_email); */
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phonePattern = /^[0-9]{8,11}$/;
let errorMessage = ""; // 儲存錯誤信息
if (ex_name != "" && ex_phone != "" && ex_email != "") {
const isEmailValid = emailPattern.test(ex_email);
const isPhoneValid = phonePattern.test(ex_phone);
if (!isEmailValid) {
errorMessage += "Please enter a valid email\n";
}
if (!isPhoneValid) {
errorMessage += "Please enter a valid phone";
}
if (isEmailValid && isPhoneValid) {
sendvcard(ex_name, ex_phone_all, ex_email, ex_company, email);
} else if (errorMessage) {
alert(errorMessage.trim()); // 顯示錯誤信息
}
} else {
alert('Please enter a valid.');
}
}
function sendvcard(ex_name, ex_phone_all, ex_email, ex_company, email) {
const subject = 'NEW exchange contact -' + ex_name;
const body =
`Name:${ex_name}_____\nPhone:${ex_phone_all}_____\nEmail:${ex_email}_____\nCompany:${ex_company}`;
const mailtoLink =
`mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
window.location.href = mailtoLink;
$('#ExChangeModal').modal('hide');
}
// Add event listener to the button
document.getElementById('ChangeBtn').addEventListener('click', myClickFunction);
</script>
</body>
</html>
|