├── .DS_Store ├── README.md ├── css ├── fonts │ ├── solution-vcard-icons.eot │ ├── solution-vcard-icons.svg │ ├── solution-vcard-icons.ttf │ ├── solution-vcard-icons.woff │ └── solution-vcard-icons﹖.eot └── styles.css ├── demo.gif ├── img ├── ajax-loader.gif ├── favicon │ └── favicon.ico └── logo.png ├── index.html ├── js └── build │ └── angular.rendering.min﹖v=1.261.js ├── json_data.js ├── public └── lib │ └── jquery │ └── dist │ └── jquery.min﹖v=1.261.js └── vcard.vcf /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # web-card 2 | Une vcard web partageable et ajoutable en un clic au répertoire ! 3 | 4 | ![demo](demo.gif) 5 | 6 | ## Personnalisation 7 | 8 | ### /json_data.js 9 | ```js 10 | json_data = { 11 | show_directions: false, 12 | showPreview: 1, 13 | form: [{ section_design: { fold: false } }, { section_information: { fold: false } }, { section_social: { fold: true } }, { section_welcome_screen: [] }, { section_advance_options: { fold: false } }], 14 | url: "", 15 | color1: "#0288d1", 16 | color2: "#64b5f6", 17 | avatar: "img/logo.png", 18 | avatar_extra: { zoom: 100, background: "#ffffff" }, 19 | address: { autocomplete: "disabled" }, 20 | welcome_screen: "img/logo.png", 21 | welcome_extra: { zoom: 50, background: "#ffffff" }, 22 | sharing: true, 23 | code: { 24 | channels: [ 25 | { input_prefix_label: "URL", link: "", label: "", name: "Facebook" }, 26 | { input_prefix_label: "@", link: "", label: "", name: "Twitter" }, 27 | // { input_prefix_label: "@", link: "", label: "", name: "Instagram" }, 28 | // { input_prefix_label: "URL", link: "", label: "Find us on TikTok", name: "TikTok" }, 29 | // { input_prefix_label: "Phone", link: "", label: "Message us", name: "WhatsApp" }, 30 | // { input_prefix_label: "URL", link: "", label: "Find us on TikTok", name: "TikTok" }, 31 | // { input_prefix_label: "URL", link: "", label: "", name: "YouTube" }, 32 | // { input_prefix_label: "URL", link: "", label: "Get in touch", name: "Telegram" }, 33 | // { input_prefix_label: "URL", link: "", label: "Get in touch", name: "Messenger" }, 34 | // { input_prefix_label: "URL", link: "", label: "Review us on Google", name: "Google Review" }, 35 | // { input_prefix_label: "URL", link: "", label: "", name: "Tripadvisor" }, 36 | // { input_prefix_label: "URL", link: "", label: "", name: "LinkedIn" }, 37 | // { input_prefix_label: "URL", link: "", label: "Order with Uber Eats", name: "Uber Eats" }, 38 | // { input_prefix_label: "URL", link: "", label: "", name: "Dribbble" }, 39 | // { input_prefix_label: "URL", link: "", label: "", name: "VKontakte" }, 40 | // { input_prefix_label: "URL", link: "", label: "Listen to us on Spotify", name: "Spotify" }, 41 | // { input_prefix_label: "URL", link: "", label: "Make a reservation", name: "OpenTable" }, 42 | // { input_prefix_label: "URL", link: "", label: "", name: "Pinterest" }, 43 | ], 44 | }, 45 | firstname: "", 46 | lastname: "", 47 | numbers_mobile: "", 48 | numbers_phone: "", 49 | numbers_fax: "", 50 | email: "", 51 | company: "", 52 | job: "", 53 | venue: "", 54 | street: "", 55 | street_number: "", 56 | state: "", 57 | city: "", 58 | zip: "", 59 | country: "", 60 | website: "", 61 | bio: "", 62 | }; 63 | ``` 64 | 65 | Remplacez les valeurs suivantes : 66 | - website 67 | - url 68 | - username 69 | 70 | Ainsi que les variables pour votre adresse et contact. 71 | Vous pouvez décommentez les réseaux sociaux que vous souhaitez. 72 | 73 | ### /img/logo.png 74 | Vous pouvez mettre votre logo dans `/img/logo.png`. 75 | 76 | ### /img/favicon/favicon.ico 77 | Vous pouvez mettre votre logo pour le favicon ici `/img/favicon/favicon.ico`. 78 | 79 | ### /vcard.vcf 80 | C'est ici que vous mettez votre vcard. Je vous laisse un modèle à remplir au cas ou. 81 | ``` 82 | BEGIN:VCARD 83 | VERSION:3.0 84 | PRODID: 85 | N: 86 | FN: 87 | ORG: 88 | TITLE: 89 | EMAIL;TYPE=PREF,INTERNET: 90 | TEL;TYPE=CELL,voice: 91 | TEL;TYPE=WORK,voice: 92 | TEL;TYPE=WORK,fax: 93 | ADR;TYPE= 94 | URL: 95 | 96 | PHOTO;TYPE=JPG;ENCODING= 97 | 98 | NOTE: 99 | 100 | REV:2008-04-24T19:52:43Z 101 | END:VCARD 102 | ``` 103 | -------------------------------------------------------------------------------- /css/fonts/solution-vcard-icons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/css/fonts/solution-vcard-icons.eot -------------------------------------------------------------------------------- /css/fonts/solution-vcard-icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by Fontastic.me 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 | -------------------------------------------------------------------------------- /css/fonts/solution-vcard-icons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/css/fonts/solution-vcard-icons.ttf -------------------------------------------------------------------------------- /css/fonts/solution-vcard-icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/css/fonts/solution-vcard-icons.woff -------------------------------------------------------------------------------- /css/fonts/solution-vcard-icons﹖.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/css/fonts/solution-vcard-icons﹖.eot -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | .sk-three-bounce { 2 | margin: 40px auto; 3 | width: 80px; 4 | text-align: center; 5 | } 6 | .sk-three-bounce .sk-child { 7 | width: 20px; 8 | height: 20px; 9 | background-color: #333; 10 | border-radius: 100%; 11 | display: inline-block; 12 | animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; 13 | } 14 | .sk-three-bounce .sk-bounce1 { 15 | animation-delay: -0.32s; 16 | } 17 | .sk-three-bounce .sk-bounce2 { 18 | animation-delay: -0.16s; 19 | } 20 | @keyframes sk-three-bounce { 21 | 0%, 22 | 80%, 23 | 100% { 24 | transform: scale(0); 25 | } 26 | 40% { 27 | transform: scale(1); 28 | } 29 | } 30 | .previewZoom { 31 | -webkit-transform: scale(0.9); 32 | -moz-transform: scale(0.9); 33 | -ms-transform: scale(0.9); 34 | -o-transform: scale(0.9); 35 | transform: scale(0.9); 36 | } 37 | *, 38 | *:before, 39 | *:after { 40 | -webkit-box-sizing: border-box; 41 | -moz-box-sizing: border-box; 42 | box-sizing: border-box; 43 | } 44 | html { 45 | height: 100%; 46 | } 47 | body { 48 | margin: 0; 49 | padding: 0; 50 | height: 100%; 51 | color: #82848f; 52 | font-size: 14px; 53 | line-height: 1; 54 | font-family: "Maison Neue", sans-serif; 55 | font-style: normal; 56 | font-weight: 400; 57 | background: #f7f7f7; 58 | } 59 | a { 60 | text-decoration: none; 61 | color: #323032; 62 | -moz-transition: all 0.15s ease; 63 | -o-transition: all 0.15s ease; 64 | -webkit-transition: all 0.15s ease; 65 | transition: all 0.15s ease; 66 | outline: none; 67 | } 68 | a:hover, 69 | a:focus, 70 | a:active { 71 | outline: none; 72 | text-decoration: none; 73 | color: #181718; 74 | } 75 | h1, 76 | h2, 77 | h3, 78 | h4, 79 | h5, 80 | h6 { 81 | margin: 0; 82 | color: #323032; 83 | font-weight: 400; 84 | } 85 | p { 86 | line-height: 1.4; 87 | color: #82848f; 88 | margin: 0; 89 | padding: 0; 90 | } 91 | ul { 92 | margin: 0; 93 | padding: 0; 94 | list-style: none; 95 | } 96 | button { 97 | padding-top: 0px !important; 98 | } 99 | label { 100 | margin: 0; 101 | } 102 | .btn { 103 | cursor: pointer; 104 | display: inline-block; 105 | vertical-align: middle; 106 | height: 40px; 107 | font-size: 14px; 108 | font-weight: bold; 109 | line-height: 1; 110 | text-align: center; 111 | text-transform: uppercase; 112 | padding: 12px 35px 0 35px; 113 | background-color: #50b8e7; 114 | border: none; 115 | color: #fff; 116 | border-radius: 3px; 117 | box-shadow: none !important; 118 | outline: 0 !important; 119 | -moz-transition: all 0.15s ease; 120 | -o-transition: all 0.15s ease; 121 | -webkit-transition: all 0.15s ease; 122 | transition: all 0.15s ease; 123 | } 124 | .btn:hover, 125 | .btn:focus, 126 | .btn:active { 127 | color: #fff; 128 | background-color: #3aafe4; 129 | text-decoration: none; 130 | outline: 0 !important; 131 | } 132 | .btn.small { 133 | height: 36px; 134 | padding-top: 10px; 135 | font-size: 14px; 136 | } 137 | .btn.big { 138 | height: 56px; 139 | padding-top: 19px; 140 | font-size: 16px; 141 | } 142 | .btn.big.fs14 { 143 | font-size: 14px; 144 | padding-top: 20px; 145 | } 146 | .btn.fw400 { 147 | font-weight: 400; 148 | } 149 | .btn.wide { 150 | padding-left: 135px; 151 | padding-right: 135px; 152 | } 153 | @media (max-width: 767px) { 154 | .btn.wide { 155 | padding-left: 50px; 156 | padding-right: 50px; 157 | } 158 | } 159 | .btn.i span { 160 | display: inline-block; 161 | vertical-align: middle; 162 | } 163 | .btn.i i { 164 | display: inline-block; 165 | vertical-align: middle; 166 | padding-right: 10px; 167 | } 168 | .btn.i-right span { 169 | display: inline-block; 170 | vertical-align: middle; 171 | } 172 | .btn.i-right i { 173 | display: inline-block; 174 | vertical-align: middle; 175 | padding-left: 10px; 176 | margin-top: 0px; 177 | } 178 | .btn.lc { 179 | text-transform: none !important; 180 | } 181 | .btn.round { 182 | width: 40px; 183 | text-align: center; 184 | padding: 11px 0 0 0; 185 | } 186 | .btn.round.small { 187 | padding: 10px 0 0 0; 188 | width: 36px; 189 | height: 36px; 190 | } 191 | .btn.block { 192 | display: block; 193 | width: 100%; 194 | } 195 | .btn.green { 196 | background-color: #70c250; 197 | color: #fff !important; 198 | } 199 | .btn.green:hover, 200 | .btn.green:focus, 201 | .btn.green:active { 202 | background-color: #62b840; 203 | color: #fff !important; 204 | } 205 | .btn.red { 206 | background-color: #f65f6e; 207 | color: #fff !important; 208 | } 209 | .btn.red:hover, 210 | .btn.red:focus, 211 | .btn.red:active { 212 | background-color: #f54758; 213 | color: #fff !important; 214 | } 215 | .btn.gray { 216 | background-color: #f7f7f7; 217 | color: #82848f !important; 218 | border: 1px solid #eaeaea; 219 | } 220 | .btn.gray:hover, 221 | .btn.gray:focus, 222 | .btn.gray:active { 223 | background-color: #f2f2f2; 224 | color: #323032 !important; 225 | border: 1px solid #e5e5e5; 226 | } 227 | .btn.white { 228 | background-color: #fff; 229 | color: #82848f !important; 230 | border: 1px solid #eaeaea; 231 | } 232 | .btn.white:hover, 233 | .btn.white:focus, 234 | .btn.white:active { 235 | color: #323032 !important; 236 | border: 1px solid #d1d1d1; 237 | } 238 | .btn.blue-dark { 239 | background-color: #2283f6; 240 | color: #fff !important; 241 | box-shadow: 5px 8.7px 20px rgba(86, 86, 86, 0.5) !important; 242 | } 243 | .btn.blue-dark:hover, 244 | .btn.blue-dark:focus, 245 | .btn.blue-dark:active { 246 | background-color: #0a75f5; 247 | color: #fff !important; 248 | box-shadow: 5px 8.7px 20px rgba(86, 86, 86, 0.7) !important; 249 | } 250 | .btn.white-transparent { 251 | background-color: rgba(255, 255, 255, 0.1) !important; 252 | color: #fff !important; 253 | border: 2px solid rgba(255, 255, 255, 0.3) !important; 254 | } 255 | .btn.white-transparent:hover, 256 | .btn.white-transparent:focus, 257 | .btn.white-transparent:active { 258 | background-color: rgba(255, 255, 255, 0.15) !important; 259 | color: #fff !important; 260 | border: 2px solid rgba(255, 255, 255, 0.7) !important; 261 | } 262 | .btn.transparent { 263 | background-color: transparent; 264 | color: #50b8e7 !important; 265 | border: 1px solid transparent; 266 | } 267 | .btn.transparent:hover, 268 | .btn.transparent:focus, 269 | .btn.transparent:active { 270 | color: #23a6e1 !important; 271 | } 272 | @media (max-width: 666px) { 273 | .vcard-template .fixed-button { 274 | position: fixed !important; 275 | bottom: 16px; 276 | right: 40px; 277 | width: 56px !important; 278 | padding: 0 !important; 279 | } 280 | .vcard-template .fixed-button > .fabs { 281 | right: 0; 282 | } 283 | .vcard-template .fixed-button--share-button { 284 | bottom: 88px !important; 285 | right: 40px !important; 286 | } 287 | } 288 | @media (max-width: 320px) { 289 | .vcard-template .fixed-button { 290 | bottom: 0; 291 | right: 0 !important; 292 | padding: 20px 0 20px 65px !important; 293 | } 294 | } 295 | .vcard-template .PopUps { 296 | position: fixed; 297 | top: 0; 298 | bottom: 0; 299 | left: 0; 300 | right: 0; 301 | width: 100%; 302 | height: 100%; 303 | background-color: rgba(50, 48, 50, 0.85); 304 | display: none; 305 | z-index: 999998; 306 | } 307 | .vcard-template .PopUps.active { 308 | display: block; 309 | } 310 | .vcard-template [popup] { 311 | display: none; 312 | position: fixed; 313 | top: 0; 314 | left: 50%; 315 | margin-top: 10px; 316 | margin-bottom: 10px; 317 | margin-left: -300px; 318 | width: 600px; 319 | background-color: #fff; 320 | border-radius: 2px; 321 | z-index: 999999; 322 | } 323 | @media (max-width: 549px) { 324 | .vcard-template [popup] { 325 | width: 96%; 326 | left: 2%; 327 | margin-left: 0px; 328 | } 329 | } 330 | @media (min-width: 550px) and (max-width: 767px) { 331 | .vcard-template [popup] { 332 | width: 530px; 333 | left: 50%; 334 | margin-left: -265px; 335 | } 336 | } 337 | .vcard-template [popup].active { 338 | display: block; 339 | } 340 | .vcard-template [popup] > [close-popup] { 341 | position: absolute; 342 | top: 15px; 343 | right: 15px; 344 | color: #323032; 345 | font-size: 12px; 346 | opacity: 0.4; 347 | } 348 | .vcard-template [popup] > [close-popup]:hover { 349 | opacity: 1; 350 | } 351 | .vcard-template [popup].style1 { 352 | text-align: center; 353 | padding: 60px 120px; 354 | min-height: 400px; 355 | } 356 | .vcard-template [popup].style1.info a { 357 | cursor: pointer; 358 | color: #5ab7e5; 359 | font-weight: 400; 360 | } 361 | @media (max-width: 767px) { 362 | .vcard-template [popup].style1 { 363 | padding: 30px 20px 20px 20px; 364 | min-height: 330px; 365 | } 366 | } 367 | .vcard-template [popup].style1 .header-icon { 368 | font-size: 48px; 369 | color: #50b8e7; 370 | } 371 | .vcard-template [popup].style1 h3 { 372 | font-size: 18px; 373 | font-weight: 600; 374 | margin: 15px 0 10px 0; 375 | } 376 | .vcard-template [popup].style1 p { 377 | padding-bottom: 25px; 378 | } 379 | .vcard-template [popup].style1 .btn { 380 | position: relative; 381 | margin-bottom: 10px; 382 | text-transform: capitalize; 383 | } 384 | .vcard-template [popup].style1 .btn:last-child { 385 | margin-bottom: 0; 386 | } 387 | .vcard-template [popup].style1 .btn i { 388 | position: absolute; 389 | top: 20px; 390 | left: 25px; 391 | } 392 | .vcard-template [popup].style1 input[type="text"], 393 | .vcard-template [popup].style1 input[type="email"] { 394 | text-align: center; 395 | margin-bottom: 20px; 396 | } 397 | .vcard-template [popup].style2 { 398 | min-height: 400px; 399 | } 400 | @media (max-width: 767px) { 401 | .vcard-template [popup].style2 { 402 | min-height: 330px; 403 | } 404 | } 405 | .vcard-template [popup].style2 .crop { 406 | height: 320px; 407 | background-color: #000; 408 | } 409 | .vcard-template [popup].style2 .crop .cropper-container { 410 | margin: 0 auto; 411 | } 412 | .vcard-template [popup].style2 .footer { 413 | padding: 20px 30px; 414 | background-color: #fff; 415 | text-align: right; 416 | } 417 | .vcard-template [popup].style2 .footer .btn { 418 | margin-right: 10px; 419 | } 420 | .vcard-template [popup].style2 .footer .btn:last-child { 421 | margin-right: 0px; 422 | } 423 | .vcard-template .vcard-body { 424 | height: 100%; 425 | position: relative; 426 | float: left; 427 | width: 100%; 428 | padding: 20px 45px 40px; 429 | box-shadow: 0 -5px 40px 7px rgba(0, 0, 0, 0.08); 430 | } 431 | @media (max-width: 480px) { 432 | .vcard-template .vcard-body { 433 | box-shadow: none; 434 | padding: 20px 0 40px; 435 | } 436 | } 437 | .vcard-template .vcard-body .vcard-row { 438 | position: relative; 439 | padding: 20px 0 20px 65px; 440 | float: left; 441 | width: 100%; 442 | } 443 | .vcard-template .vcard-body .vcard-row i:not(.iconFab) { 444 | position: absolute; 445 | top: 25px; 446 | left: 20px; 447 | font-size: 20px; 448 | color: #b3b4bb; 449 | } 450 | .vcard-template .vcard-body .vcard-row label + i { 451 | position: absolute; 452 | top: 16px !important; 453 | left: 13px !important; 454 | font-size: 35px !important; 455 | color: #b3b4bb; 456 | } 457 | .vcard-template .vcard-body .vcard-row h1, 458 | .vcard-template .vcard-body .vcard-row h2, 459 | .vcard-template .vcard-body .vcard-row h3, 460 | .vcard-template .vcard-body .vcard-row h4, 461 | .vcard-template .vcard-body .vcard-row h5, 462 | .vcard-template .vcard-body .vcard-row h6 { 463 | line-height: 1.3; 464 | margin-bottom: 5px; 465 | color: #323032; 466 | font-weight: 400; 467 | } 468 | .vcard-template .vcard-body .vcard-row small { 469 | display: block; 470 | color: #82848f; 471 | font-size: 13px; 472 | } 473 | .vcard-template .vcard-body .vcard-row.poweredby { 474 | top: 90px; 475 | padding: 0px 0 0px 65px; 476 | } 477 | .vcard-template .vcard-body .vcard-separator { 478 | height: 1px; 479 | background-color: #eaeaea; 480 | float: right; 481 | width: calc(100% - 65px); 482 | } 483 | .vcard-template .vcard-body .vcard-social { 484 | margin: auto; 485 | width: 100%; 486 | display: flex; 487 | justify-content: center; 488 | align-items: center; 489 | padding: 0; 490 | position: relative; 491 | font-size: 20px; 492 | } 493 | .vcard-template .vcard-body .vcard-social .icon-wrapper { 494 | padding: 11px 13px; 495 | display: inline-block; 496 | -moz-border-radius: 100px; 497 | -webkit-border-radius: 100px; 498 | border-radius: 100px; 499 | background: black; 500 | margin: 10px 4px 0px 0px; 501 | color: white !important; 502 | line-height: 23px; 503 | } 504 | .vcard-template .vcard-body .vcard-social .icon-wrapper.pointer { 505 | margin: 0px 4px 0px 0px; 506 | cursor: pointer; 507 | } 508 | .vcard-template .vcard-body .vcard-social .icon-wrapper i { 509 | top: 2px; 510 | position: relative; 511 | } 512 | .vcard-template .vcard-body .vcard-social .icon-wrapper.facebook { 513 | background: #4769a6; 514 | } 515 | .vcard-template .vcard-body .vcard-social .icon-wrapper.twitter { 516 | background: #5ea9dd; 517 | } 518 | .vcard-template .vcard-body .vcard-social .icon-wrapper.linkedin { 519 | background: #0074b9; 520 | } 521 | .vcard-template .vcard-body .vcard-social .icon-wrapper.instagram { 522 | background: #01548a; 523 | } 524 | .vcard-template .vcard-body .vcard-social .icon-wrapper.xing { 525 | background: #006464; 526 | } 527 | .vcard-template .vcard-body .vcard-social .icon-wrapper.pinterest { 528 | background: #cb0c11; 529 | } 530 | .vcard-template .vcard-body .vcard-social .icon-wrapper.googleplus { 531 | background: #ea4f39; 532 | } 533 | .vcard-template .vcard-body .vcard-social .icon-wrapper.twitter { 534 | background: #5ea9dd; 535 | } 536 | .vcard-template .vcard-body .vcard-social .icon-wrapper.vkontakte { 537 | background: #3d6390; 538 | } 539 | .vcard-template .vcard-body .vcard-social .icon-wrapper.vine { 540 | background: #00b58a; 541 | } 542 | .vcard-template .vcard-body .vcard-social .icon-wrapper.flickr { 543 | background: #ff0084; 544 | } 545 | .vcard-template .vcard-body .vcard-social .icon-wrapper.dribbble { 546 | background: #ea4c89; 547 | } 548 | .vcard-template .vcard-body .vcard-social .icon-wrapper.youtube { 549 | background: #bb0000; 550 | } 551 | .vcard-template .vcard-body .vcard-social .icon-wrapper.tripadvisor { 552 | background: #589442; 553 | } 554 | .vcard-template .vcard-body .vcard-social .icon-wrapper.vimeo { 555 | background: #aad450; 556 | } 557 | .vcard-template .vcard-body .vcard-social .icon-wrapper.snapchat { 558 | background: #fffc00; 559 | } 560 | .vcard-template .vcard-body .vcard-social h5 { 561 | font-size: 14px; 562 | color: #82848f; 563 | margin-bottom: 15px; 564 | } 565 | .vcard-template .vcard-body .vcard-social a { 566 | display: inline-block; 567 | vertical-align: middle; 568 | margin-right: 10px; 569 | opacity: 1; 570 | } 571 | .vcard-template .vcard-body .vcard-social a:hover { 572 | opacity: 0.85; 573 | } 574 | .vcard-template.style2 .vcard-header { 575 | position: relative; 576 | text-align: center; 577 | } 578 | @media (min-width: 690px) { 579 | .vcard-template.style2 .vcard-header { 580 | padding-top: 60px; 581 | } 582 | } 583 | @media (min-width: 690px) { 584 | .vcard-template.style2 .vcard-header .vcard-header-wrapper { 585 | width: 570px; 586 | margin: 0 auto; 587 | box-shadow: 0 -5px 40px 7px rgba(0, 0, 0, 0.08); 588 | } 589 | } 590 | .vcard-template.style2 .vcard-header .vcard-top-info { 591 | max-width: 480px; 592 | margin: 0 auto 0 auto; 593 | } 594 | .vcard-template.style2 .vcard-header .top { 595 | padding: 20px 0 20px 0; 596 | color: #fff; 597 | font-weight: 300; 598 | opacity: 0.8; 599 | } 600 | .vcard-template.style2 .vcard-header .img { 601 | height: 95px; 602 | width: 95px; 603 | border-radius: 50%; 604 | background-position: center center !important; 605 | background-size: cover !important; 606 | margin: 10px auto 0 auto; 607 | } 608 | .vcard-template.style2 .vcard-header .name { 609 | padding: 20px 0 15px 0; 610 | color: #fff; 611 | font-weight: 400; 612 | } 613 | .vcard-template.style2 .vcard-header .title { 614 | padding: 0 0 25px 0; 615 | color: #fff; 616 | font-weight: 300; 617 | line-height: 1.4; 618 | max-width: 170px; 619 | margin: 0 auto; 620 | opacity: 0.75; 621 | font-size: 13px; 622 | } 623 | .vcard-template.style2 .vcard-header .add-contact-wrapper { 624 | position: fixed; 625 | bottom: 20px; 626 | right: 20px; 627 | z-index: 150; 628 | } 629 | @media (min-width: 690px) { 630 | .vcard-template.style2 .vcard-header .add-contact-wrapper { 631 | display: none; 632 | } 633 | } 634 | .vcard-template.style2 .vcard-header .add-contact-btn { 635 | cursor: pointer; 636 | display: block; 637 | height: 56px; 638 | width: 56px; 639 | text-align: center; 640 | padding-top: 12px; 641 | font-size: 20px; 642 | border-radius: 50%; 643 | color: #fff; 644 | box-shadow: 8px 14px 38px rgba(0, 0, 0, 0.07); 645 | opacity: 0.9; 646 | border: 1px solid transparent; 647 | } 648 | .vcard-template.style2 .vcard-header .add-contact-btn i { 649 | font-size: 30px; 650 | } 651 | .vcard-template.style2 .vcard-header .add-contact-btn:hover { 652 | box-shadow: 3px 6px 28px rgba(0, 0, 0, 0.2); 653 | opacity: 1; 654 | } 655 | .vcard-template.style2 .vcard-header .vcard-functions { 656 | display: block; 657 | width: 100%; 658 | text-align: center; 659 | height: 60px; 660 | border-top: 1px solid rgba(255, 255, 255, 0.15); 661 | } 662 | .vcard-template.style2 .vcard-header .vcard-functions .vcard-functions-wrapper { 663 | display: table; 664 | margin: 0 auto; 665 | width: 300px; 666 | height: 56px; 667 | text-align: center; 668 | } 669 | @media (min-width: 690px) { 670 | .vcard-template.style2 .vcard-header .vcard-functions .vcard-functions-wrapper { 671 | width: 570px; 672 | } 673 | } 674 | .vcard-template.style2 .vcard-header .vcard-functions a { 675 | cursor: pointer; 676 | display: table-cell; 677 | color: #fff; 678 | padding: 10px 0; 679 | min-width: 100px; 680 | margin: 0; 681 | border-right: 1px solid rgba(255, 255, 255, 0.15); 682 | } 683 | .vcard-template.style2 .vcard-header .vcard-functions a.last-element { 684 | border-right: 0px; 685 | } 686 | @media (min-width: 690px) { 687 | .vcard-template.style2 .vcard-header .vcard-functions a { 688 | min-width: 190px; 689 | } 690 | } 691 | .vcard-template.style2 .vcard-header .vcard-functions a i { 692 | display: inline-block; 693 | font-size: 18px; 694 | margin-bottom: 8px; 695 | } 696 | .vcard-template.style2 .vcard-header .vcard-functions a small { 697 | display: block; 698 | text-transform: uppercase; 699 | font-size: 10px; 700 | } 701 | .vcard-template.style2 .vcard-header .vcard-functions a:hover { 702 | background-color: rgba(0, 0, 0, 0.1); 703 | } 704 | @media (min-width: 690px) { 705 | .vcard-template.style2 .vcard-body-wrapper { 706 | width: 570px; 707 | margin: 0 auto; 708 | box-shadow: 0 -5px 40px 7px rgba(0, 0, 0, 0.08); 709 | margin-bottom: 60px; 710 | overflow: hidden; 711 | } 712 | } 713 | .vcard-template.style2 .vcard-body { 714 | padding-top: 20px; 715 | } 716 | @media (min-width: 690px) { 717 | .vcard-template.style2 .vcard-body { 718 | padding-bottom: 40px; 719 | } 720 | } 721 | .vcard-template.style2 .vcard-body .btn.blue-dark { 722 | display: none; 723 | margin-top: 20px; 724 | float: left; 725 | width: 100%; 726 | margin: 20px auto; 727 | } 728 | @media (min-width: 690px) { 729 | .vcard-template.style2 .vcard-body .btn.blue-dark { 730 | display: block; 731 | } 732 | } 733 | .loading-vcard { 734 | position: fixed; 735 | top: 0; 736 | bottom: 0; 737 | left: 0; 738 | right: 0; 739 | width: 100%; 740 | height: 100%; 741 | background-color: #fff; 742 | display: none; 743 | z-index: 9999998; 744 | opacity: 1; 745 | } 746 | .loading-vcard.active { 747 | display: block; 748 | } 749 | .loading-vcard > div { 750 | margin: 0; 751 | position: fixed; 752 | top: 50%; 753 | left: 50%; 754 | z-index: 9999999; 755 | } 756 | .loading-vcard .sk-three-bounce { 757 | margin-left: -25px; 758 | margin-top: -25px; 759 | } 760 | .mb10 { 761 | margin-bottom: 10px !important; 762 | } 763 | .mb20 { 764 | margin-bottom: 20px !important; 765 | } 766 | input[type="text"], 767 | input[type="password"], 768 | input[type="email"], 769 | textarea, 770 | select { 771 | -webkit-appearance: none; 772 | -moz-appearance: none; 773 | appearance: none; 774 | display: block; 775 | height: 44px; 776 | width: 100%; 777 | margin-bottom: 0px; 778 | background-color: #fff; 779 | border: 2px solid #eaeaea; 780 | border-radius: 2px; 781 | padding-left: 15px; 782 | padding-right: 15px; 783 | font-size: 14px; 784 | color: #323032; 785 | font-weight: 400; 786 | outline: none; 787 | -moz-box-shadow: none; 788 | -webkit-box-shadow: none; 789 | box-shadow: none; 790 | overflow: hidden; 791 | line-height: normal !important; 792 | } 793 | input[type="text"]::-webkit-input-placeholder, 794 | input[type="password"]::-webkit-input-placeholder, 795 | input[type="email"]::-webkit-input-placeholder, 796 | textarea::-webkit-input-placeholder, 797 | select::-webkit-input-placeholder { 798 | font-weight: 400; 799 | color: rgba(130, 132, 143, 0.5); 800 | } 801 | input[type="text"]:-moz-placeholder, 802 | input[type="password"]:-moz-placeholder, 803 | input[type="email"]:-moz-placeholder, 804 | textarea:-moz-placeholder, 805 | select:-moz-placeholder { 806 | font-weight: 400; 807 | color: rgba(130, 132, 143, 0.5); 808 | } 809 | input[type="text"]::-moz-placeholder, 810 | input[type="password"]::-moz-placeholder, 811 | input[type="email"]::-moz-placeholder, 812 | textarea::-moz-placeholder, 813 | select::-moz-placeholder { 814 | font-weight: 400; 815 | color: rgba(130, 132, 143, 0.5); 816 | } 817 | input[type="text"]:-ms-input-placeholder, 818 | input[type="password"]:-ms-input-placeholder, 819 | input[type="email"]:-ms-input-placeholder, 820 | textarea:-ms-input-placeholder, 821 | select:-ms-input-placeholder { 822 | font-weight: 400; 823 | color: rgba(130, 132, 143, 0.5); 824 | } 825 | input[type="text"]:focus, 826 | input[type="password"]:focus, 827 | input[type="email"]:focus, 828 | textarea:focus, 829 | select:focus { 830 | box-shadow: none !important; 831 | border: 2px solid #ddd; 832 | } 833 | @media (max-width: 320px) { 834 | #dvcard-body .vcard-body .vcard-row { 835 | padding: 20px 50px 20px 65px; 836 | } 837 | #dvcard-body .vcard-body .vcard-row h4 { 838 | font-size: 16px; 839 | font-size: 0.9rem !important; 840 | } 841 | #dvcard-body .add-contact-btn { 842 | width: 50px; 843 | height: 50px; 844 | } 845 | #dvcard-body .add-contact-btn i { 846 | font-size: 30px; 847 | font-size: 1.5rem !important; 848 | } 849 | } 850 | .darkTheme .dynamicTextColor { 851 | color: #000 !important; 852 | } 853 | .whiteTheme .dynamicTextColor { 854 | color: #fffefe !important; 855 | } 856 | .mt-0 { 857 | margin-top: 0 !important; 858 | } 859 | .mt-10 { 860 | margin-top: 10px; 861 | } 862 | .mt-20 { 863 | margin-top: 20px; 864 | } 865 | .mt-40 { 866 | margin-top: 40px; 867 | } 868 | .socialMedia-container label { 869 | font-size: 16px; 870 | margin-bottom: 40px !important; 871 | float: left; 872 | width: 100%; 873 | padding-left: 45px; 874 | } 875 | .socialMedia-container label + i { 876 | font-size: 28px; 877 | left: 0 !important; 878 | top: 19px !important; 879 | } 880 | @media (max-width: 768px) { 881 | .socialMedia-container label + i { 882 | left: 13px !important; 883 | } 884 | } 885 | /* .socialMedia-container .channels-padding { 886 | margin-left: -20px; 887 | } */ 888 | .channel-container { 889 | cursor: pointer; 890 | display: block !important; 891 | position: relative; 892 | float: left; 893 | width: 40px; 894 | height: 40px; 895 | margin-right: 25px !important; 896 | padding: 0; 897 | margin-bottom: 20px; 898 | } 899 | .dialog-body { 900 | text-align: justify; 901 | line-height: 1.6; 902 | } 903 | .event-gotIt-button { 904 | width: 100%; 905 | text-align: center; 906 | float: left; 907 | } 908 | .event-gotIt-button a { 909 | float: none !important; 910 | margin: 20px auto !important; 911 | display: inline-block !important; 912 | } 913 | .event-gotIt-button .addContactAction { 914 | list-style: none; 915 | font-size: 16px; 916 | font-weight: 400; 917 | color: rgba(0, 0, 0, 0.87); 918 | width: 100%; 919 | float: left; 920 | display: table; 921 | margin-bottom: 20px; 922 | } 923 | .event-gotIt-button .addContactAction i { 924 | font-size: 33px; 925 | float: left; 926 | color: rgba(0, 0, 0, 0.87); 927 | } 928 | .event-gotIt-button .addContactAction a { 929 | margin: 0 !important; 930 | padding-left: 38px; 931 | text-align: left; 932 | float: left; 933 | padding-top: 7px; 934 | width: calc(100% - 38px); 935 | display: table-cell; 936 | vertical-align: middle; 937 | } 938 | .text-regular-blue { 939 | font-size: 15px; 940 | font-weight: 400; 941 | color: #47bdef; 942 | text-align: center; 943 | float: left; 944 | width: 100%; 945 | } 946 | .text-regular-blue:hover { 947 | cursor: pointer; 948 | color: #25acdd; 949 | } 950 | .event-slim-button { 951 | font-size: 14px; 952 | font-weight: 500; 953 | cursor: pointer; 954 | text-transform: uppercase; 955 | padding: 11px 20px; 956 | line-height: 1.2; 957 | background: transparent !important; 958 | border-radius: 2px; 959 | color: #ea4b88; 960 | } 961 | @media (max-width: 320px) { 962 | .event-slim-button { 963 | font-size: 14px; 964 | font-size: 0.7rem !important; 965 | } 966 | } 967 | .event-slim-button:hover { 968 | background: rgba(0, 0, 0, 0.08) !important; 969 | box-shadow: none !important; 970 | } 971 | .event-simple-button { 972 | font-size: 14px; 973 | font-weight: 500; 974 | } 975 | .left_20 { 976 | margin-left: -20px !important; 977 | } 978 | .left_15 { 979 | margin-left: -15px !important; 980 | } 981 | .ripplelink { 982 | display: block; 983 | float: left; 984 | text-align: center; 985 | color: #fff; 986 | text-decoration: none; 987 | position: relative; 988 | overflow: hidden; 989 | -webkit-transition: all 0.2s ease; 990 | -moz-transition: all 0.2s ease; 991 | -o-transition: all 0.2s ease; 992 | transition: all 0.2s ease; 993 | z-index: 0; 994 | padding: 10px 15px; 995 | } 996 | .ripplelink:hover { 997 | z-index: 997; 998 | box-shadow: 0px 13px 18.8px 1.2px rgba(0, 0, 0, 0.24), 0px 5px 26.46px 0.54px rgba(0, 0, 0, 0.16); 999 | -webkit-box-shadow: 0px 13px 18.8px 1.2px rgba(0, 0, 0, 0.24), 0px 5px 26.46px 0.54px rgba(0, 0, 0, 0.16); 1000 | -moz-box-shadow: 0px 13px 18.8px 1.2px rgba(0, 0, 0, 0.24), 0px 5px 26.46px 0.54px rgba(0, 0, 0, 0.16); 1001 | } 1002 | .ink { 1003 | display: block; 1004 | position: absolute; 1005 | background: rgba(0, 0, 0, 0.1); 1006 | border-radius: 100%; 1007 | -webkit-transform: scale(0); 1008 | -moz-transform: scale(0); 1009 | -o-transform: scale(0); 1010 | transform: scale(0); 1011 | } 1012 | .animate { 1013 | -webkit-animation: ripple 0.65s linear; 1014 | -moz-animation: ripple 0.65s linear; 1015 | -ms-animation: ripple 0.65s linear; 1016 | -o-animation: ripple 0.65s linear; 1017 | animation: ripple 0.65s linear; 1018 | } 1019 | @-webkit-keyframes ripple { 1020 | 100% { 1021 | opacity: 0; 1022 | -webkit-transform: scale(2.5); 1023 | } 1024 | } 1025 | @-moz-keyframes ripple { 1026 | 100% { 1027 | opacity: 0; 1028 | -moz-transform: scale(2.5); 1029 | } 1030 | } 1031 | @-o-keyframes ripple { 1032 | 100% { 1033 | opacity: 0; 1034 | -o-transform: scale(2.5); 1035 | } 1036 | } 1037 | @keyframes ripple { 1038 | 100% { 1039 | opacity: 0; 1040 | transform: scale(2.5); 1041 | } 1042 | } 1043 | .event-body, 1044 | .floated-container { 1045 | float: left; 1046 | width: 100%; 1047 | position: relative; 1048 | } 1049 | .event-section-title { 1050 | float: left; 1051 | width: 100%; 1052 | } 1053 | .event-content-container { 1054 | max-width: 442px; 1055 | margin: 0 auto; 1056 | text-align: left; 1057 | } 1058 | .event-title { 1059 | font-size: 24px; 1060 | color: #fffefe; 1061 | font-weight: 400; 1062 | text-align: left; 1063 | } 1064 | @media (max-width: 320px) { 1065 | .event-title { 1066 | font-size: 24px; 1067 | font-size: 1.2rem !important; 1068 | } 1069 | } 1070 | .pull-right { 1071 | float: right !important; 1072 | } 1073 | .pull-left { 1074 | float: left !important; 1075 | } 1076 | .page.ng-leave { 1077 | z-index: 9999; 1078 | } 1079 | .page.ng-enter { 1080 | z-index: 8888; 1081 | } 1082 | .hidden { 1083 | display: none; 1084 | } 1085 | .share-container, 1086 | .contactData-container { 1087 | padding-left: 0; 1088 | } 1089 | @media (max-width: 690px) { 1090 | .share-container, 1091 | .contactData-container { 1092 | z-index: 999; 1093 | } 1094 | } 1095 | #dvcard-details, 1096 | #dvcard-maps, 1097 | .devent-map-header { 1098 | display: none; 1099 | } 1100 | .page-home #dvcard-details { 1101 | display: block; 1102 | } 1103 | @media (max-width: 666px) { 1104 | .vcard-details--share { 1105 | padding-bottom: 80px !important; 1106 | overflow: hidden; 1107 | } 1108 | } 1109 | .reset-map { 1110 | margin: 20px 10px -35px; 1111 | float: right; 1112 | font-size: 15px; 1113 | cursor: pointer; 1114 | color: #47bdef; 1115 | position: absolute; 1116 | right: 0; 1117 | z-index: 9999; 1118 | } 1119 | .reset-map:hover { 1120 | color: #25acdd; 1121 | } 1122 | .page-maps { 1123 | float: left; 1124 | width: 100%; 1125 | opacity: 0; 1126 | } 1127 | .page-maps #dvcard-maps, 1128 | .page-maps .devent-map-header { 1129 | display: block; 1130 | overflow: hidden; 1131 | } 1132 | @media (min-width: 667px) { 1133 | .page-maps #dvcard-maps, 1134 | .page-maps .devent-map-header { 1135 | overflow: visible; 1136 | } 1137 | } 1138 | .page-maps label { 1139 | font-size: 14px; 1140 | color: #000; 1141 | opacity: 0.54; 1142 | font-weight: 500; 1143 | display: inline-block; 1144 | margin-bottom: 10px !important; 1145 | } 1146 | @media (max-width: 320px) { 1147 | .page-maps label { 1148 | font-size: 14px; 1149 | font-size: 0.7875rem !important; 1150 | } 1151 | } 1152 | @media (min-width: 667px) { 1153 | .page-maps .event-content-container { 1154 | max-width: 100% !important; 1155 | } 1156 | } 1157 | .page-maps .event-body { 1158 | padding-top: 56px; 1159 | } 1160 | .page-maps .event-body .vcard-body { 1161 | max-width: 570px; 1162 | margin: 0 auto 0 auto; 1163 | padding-bottom: 20px; 1164 | z-index: 50; 1165 | padding-top: 0 !important; 1166 | position: initial; 1167 | } 1168 | @media (min-width: 667px) { 1169 | .page-maps .event-body { 1170 | padding-top: 60px !important; 1171 | } 1172 | .page-maps .event-body #dvcard-maps img { 1173 | margin-left: -45px; 1174 | } 1175 | } 1176 | .page-maps .devent-map-header .event-section-title { 1177 | box-shadow: 0px 2px 2.82px 0.18px rgba(0, 0, 0, 0.24), 0px 1px 3.92px 0.08px rgba(0, 0, 0, 0.16); 1178 | padding: 0px 20px !important; 1179 | line-height: 56px; 1180 | min-height: 56px !important; 1181 | position: fixed; 1182 | top: 0; 1183 | z-index: 999; 1184 | } 1185 | @media (min-width: 690px) { 1186 | .page-maps .devent-map-header .event-section-title { 1187 | position: relative !important; 1188 | width: 640px !important; 1189 | float: initial !important; 1190 | margin: 0 auto !important; 1191 | box-shadow: none; 1192 | } 1193 | } 1194 | .page-maps .devent-map-header .event-section-title i { 1195 | font-size: 33px; 1196 | color: #fff; 1197 | position: absolute; 1198 | line-height: 67px; 1199 | left: 10px; 1200 | cursor: pointer; 1201 | } 1202 | .page-maps .devent-map-header .event-section-title .event-title { 1203 | padding-left: 51px; 1204 | font-size: 20px; 1205 | } 1206 | .page-maps .vcard-header, 1207 | .page-maps .event-organizer { 1208 | display: none; 1209 | } 1210 | .page-home.ng-enter { 1211 | animation: from-100to0 0.5s both ease-in-out; 1212 | } 1213 | .page-home.ng-leave { 1214 | animation: from0to-100 0.5s both ease-in-out; 1215 | } 1216 | .page-maps.ng-leave { 1217 | animation: from0to100 0.5s both ease-in-out; 1218 | } 1219 | .page-maps.ng-enter { 1220 | animation: from100to0 0.5s both ease-in-out; 1221 | } 1222 | @keyframes from0to-100 { 1223 | from { 1224 | transform: translateX(0); 1225 | } 1226 | to { 1227 | transform: translateX(-100%); 1228 | } 1229 | } 1230 | @keyframes from100to0 { 1231 | from { 1232 | transform: translateX(100%); 1233 | } 1234 | to { 1235 | transform: translateX(0%); 1236 | } 1237 | } 1238 | @keyframes from0to100 { 1239 | from { 1240 | transform: translateX(0%); 1241 | } 1242 | to { 1243 | transform: translateX(100%); 1244 | } 1245 | } 1246 | @keyframes from-100to0 { 1247 | from { 1248 | transform: translateX(-100%); 1249 | } 1250 | to { 1251 | transform: translateX(0%); 1252 | } 1253 | } 1254 | 1255 | .fabs { 1256 | bottom: 0; 1257 | position: absolute; 1258 | margin: 1em; 1259 | right: 0; 1260 | z-index: 998; 1261 | } 1262 | @media (min-width: 667px) { 1263 | .fabs { 1264 | position: relative; 1265 | margin: 0 auto; 1266 | max-width: 438px; 1267 | } 1268 | } 1269 | @media (max-width: 768px) { 1270 | .hidden-xs { 1271 | display: none; 1272 | } 1273 | } 1274 | .fixed-blur-bgd { 1275 | opacity: 1; 1276 | background: rgba(0, 0, 0, 0.3); 1277 | position: fixed; 1278 | width: 100%; 1279 | height: 100%; 1280 | top: 0; 1281 | left: 0; 1282 | z-index: 999999; 1283 | display: none; 1284 | } 1285 | .fab { 1286 | display: block; 1287 | width: 56px; 1288 | height: 56px; 1289 | border-radius: 50%; 1290 | text-align: center; 1291 | color: #fff; 1292 | margin: 25px auto 0; 1293 | box-shadow: 0px 10px 14.1px 0.9px rgba(0, 0, 0, 0.24), 0px 4px 19.6px 0.4px rgba(0, 0, 0, 0.16); 1294 | cursor: pointer; 1295 | -webkit-transition: all 0.1s ease-out; 1296 | -moz-transition: all 0.1s ease-out; 1297 | -o-transition: all 0.1s ease-out; 1298 | transition: all 0.1s ease-out; 1299 | position: relative; 1300 | z-index: 998; 1301 | overflow: hidden; 1302 | } 1303 | .fab:hover { 1304 | box-shadow: 0px 20px 28.2px 0.9px rgba(0, 0, 0, 0.24), 0px 8px 40.18px 0.82px rgba(0, 0, 0, 0.16); 1305 | color: #fff; 1306 | } 1307 | .fab.white-bgd { 1308 | background: #fff; 1309 | color: rgba(0, 0, 0, 0.87); 1310 | } 1311 | .fab.white-bgd i { 1312 | color: rgba(0, 0, 0, 0.6); 1313 | } 1314 | @media (min-width: 667px) { 1315 | .fab { 1316 | display: block; 1317 | width: 100%; 1318 | height: 56px; 1319 | border-radius: 2px; 1320 | margin-top: 0 !important; 1321 | } 1322 | .fab .prime.visible-xs { 1323 | display: none; 1324 | } 1325 | .fab span { 1326 | font-size: 14px; 1327 | font-weight: 500; 1328 | text-transform: uppercase; 1329 | display: inline-block; 1330 | line-height: 56px; 1331 | position: relative; 1332 | padding-left: 45px; 1333 | } 1334 | .fab span i { 1335 | font-size: 34px; 1336 | display: inline-block; 1337 | position: absolute; 1338 | left: 0; 1339 | top: 5px; 1340 | } 1341 | } 1342 | .fab > i { 1343 | font-size: 34px; 1344 | line-height: 67px; 1345 | -webkit-transition: all 0.2s ease-out; 1346 | -moz-transition: all 0.2s ease-out; 1347 | -o-transition: all 0.2s ease-out; 1348 | transition: all 0.2s ease-in-out; 1349 | } 1350 | .fab:not(:last-child) { 1351 | width: 0; 1352 | height: 0; 1353 | margin: 20px auto 0; 1354 | opacity: 0; 1355 | visibility: hidden; 1356 | } 1357 | .fab:not(:last-child) > i { 1358 | font-size: 1.4em; 1359 | line-height: 40px; 1360 | } 1361 | .fab:not(:last-child).is-visible { 1362 | width: 40px; 1363 | height: 40px; 1364 | margin: 15px auto 10px; 1365 | opacity: 1; 1366 | visibility: visible; 1367 | } 1368 | .fab:nth-last-child(1) { 1369 | -webkit-transition-delay: 25ms; 1370 | -moz-transition-delay: 25ms; 1371 | -o-transition-delay: 25ms; 1372 | transition-delay: 25ms; 1373 | } 1374 | .fab:not(:last-child):nth-last-child(2) { 1375 | -webkit-transition-delay: 20ms; 1376 | -moz-transition-delay: 20ms; 1377 | -o-transition-delay: 20ms; 1378 | transition-delay: 20ms; 1379 | } 1380 | .fab:not(:last-child):nth-last-child(3) { 1381 | -webkit-transition-delay: 40ms; 1382 | -moz-transition-delay: 40ms; 1383 | -o-transition-delay: 40ms; 1384 | transition-delay: 40ms; 1385 | } 1386 | .fab:not(:last-child):nth-last-child(4) { 1387 | -webkit-transition-delay: 60ms; 1388 | -moz-transition-delay: 60ms; 1389 | -o-transition-delay: 60ms; 1390 | transition-delay: 60ms; 1391 | } 1392 | .fab:not(:last-child):nth-last-child(5) { 1393 | -webkit-transition-delay: 80ms; 1394 | -moz-transition-delay: 80ms; 1395 | -o-transition-delay: 80ms; 1396 | transition-delay: 80ms; 1397 | } 1398 | .fab:not(:last-child):active, 1399 | .fab:not(:last-child):focus, 1400 | .fab:not(:last-child):hover { 1401 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); 1402 | } 1403 | @media (max-width: 767px) { 1404 | #gotIt .dialog-container { 1405 | top: 100px !important; 1406 | } 1407 | } 1408 | .dialog-container { 1409 | position: absolute; 1410 | opacity: 0; 1411 | visibility: hidden; 1412 | box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 1413 | border-radius: 3px; 1414 | -webkit-transition: all 0.2s ease-out; 1415 | -moz-transition: all 0.2s ease-in-out; 1416 | -o-transition: all 0.2s ease-in-out; 1417 | transition: all 0.2s ease-in-out; 1418 | top: 0; 1419 | } 1420 | .dialog-container .event-title { 1421 | color: rgba(0, 0, 0, 0.87) !important; 1422 | font-weight: 500 !important; 1423 | margin-bottom: 20px; 1424 | } 1425 | @media (min-width: 768px) { 1426 | .dialog-container { 1427 | -webkit-transition: all 0s ease-out; 1428 | -moz-transition: all 0s ease-in-out; 1429 | -o-transition: all 0s ease-in-out; 1430 | transition: all 0ms ease-in-out 0ms; 1431 | } 1432 | } 1433 | @media (max-width: 767px) { 1434 | .dialog-container { 1435 | top: 150px !important; 1436 | z-index: 9999 !important; 1437 | right: calc((100% - 312px) / 2) !important; 1438 | } 1439 | } 1440 | .chat { 1441 | position: absolute; 1442 | right: 85px; 1443 | bottom: 0; 1444 | width: 400px; 1445 | font-size: 12px; 1446 | line-height: 22px; 1447 | font-weight: 500; 1448 | opacity: 0; 1449 | visibility: hidden; 1450 | box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12); 1451 | border-radius: 3px; 1452 | -webkit-transition: all 0.2s ease-out; 1453 | -moz-transition: all 0.2s ease-in-out; 1454 | -o-transition: all 0.2s ease-in-out; 1455 | transition: all 0.2s ease-in-out; 1456 | } 1457 | @media (min-width: 768px) { 1458 | .chat { 1459 | -webkit-transition: all 0s ease-out; 1460 | -moz-transition: all 0s ease-in-out; 1461 | -o-transition: all 0s ease-in-out; 1462 | transition: all 0ms ease-in-out 0ms; 1463 | } 1464 | } 1465 | .chat_loader { 1466 | display: none; 1467 | float: right; 1468 | background: transparent; 1469 | height: 8px; 1470 | width: 8px; 1471 | margin: 5px 10px 0 0; 1472 | border-radius: 50%; 1473 | border: solid 2px #263238; 1474 | } 1475 | .dialog-container.is-visible, 1476 | .chat.is-visible { 1477 | opacity: 1; 1478 | visibility: visible; 1479 | -webkit-animation: zoomIn 0.2s cubic-bezier(0.42, 0, 0.58, 1); 1480 | -moz-animation: zoomIn 0.2s cubic-bezier(0.42, 0, 0.58, 1); 1481 | -o-animation: zoomIn 0.2s cubic-bezier(0.42, 0, 0.58, 1); 1482 | animation: zoomIn 0.2s cubic-bezier(0.42, 0, 0.58, 1); 1483 | z-index: 999; 1484 | } 1485 | @media (min-width: 768px) { 1486 | .dialog-container.is-visible, 1487 | .chat.is-visible { 1488 | position: fixed; 1489 | left: calc(50% - 156px); 1490 | top: 60px; 1491 | height: 0; 1492 | } 1493 | } 1494 | .chat_option ul { 1495 | display: none; 1496 | position: absolute; 1497 | list-style: none; 1498 | top: 100%; 1499 | left: 0; 1500 | background: #eceff1; 1501 | border-radius: 5px; 1502 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); 1503 | padding: 0; 1504 | z-index: 1000; 1505 | width: 150px; 1506 | } 1507 | .chat_option ul li { 1508 | float: none; 1509 | position: relative; 1510 | } 1511 | .chat_color { 1512 | display: block; 1513 | width: 20px; 1514 | height: 20px; 1515 | border-radius: 50%; 1516 | margin: 10px; 1517 | float: left; 1518 | } 1519 | .chat_option.is-dropped > ul { 1520 | display: block; 1521 | } 1522 | #shareFab .fab-body ul li a, 1523 | #saveContact .fab-body ul li a { 1524 | padding-left: 38px; 1525 | text-align: left; 1526 | float: left; 1527 | padding-top: 7px; 1528 | width: calc(100% - 38px); 1529 | } 1530 | #shareFab .fab-body ul li i, 1531 | #saveContact .fab-body ul li i { 1532 | font-size: 33px; 1533 | float: left; 1534 | } 1535 | .emailText2 { 1536 | display: none; 1537 | } 1538 | .disabledClick { 1539 | pointer-events: none; 1540 | } 1541 | .fab-body { 1542 | width: 100%; 1543 | display: inline-block; 1544 | text-align: left; 1545 | padding: 25px; 1546 | background: #fff; 1547 | box-shadow: 0px 4px 7.36px 0.64px rgba(0, 0, 0, 0.24), 0px 1px 7.68px 0.32px rgba(0, 0, 0, 0.16); 1548 | z-index: 999; 1549 | } 1550 | .fab-body .channel-label { 1551 | text-align: left; 1552 | max-height: 50px; 1553 | text-overflow: ellipsis; 1554 | white-space: nowrap; 1555 | overflow: hidden; 1556 | } 1557 | .fab-body .channel-name { 1558 | max-width: 100%; 1559 | text-align: left; 1560 | line-height: 1.2; 1561 | } 1562 | .fab-body .channel-prop-container { 1563 | width: calc(100%); 1564 | } 1565 | .fab-body .channel-container { 1566 | overflow: hidden; 1567 | } 1568 | .fab-body .icon-fab-close { 1569 | cursor: pointer; 1570 | position: absolute; 1571 | right: 3px; 1572 | font-size: 35px; 1573 | top: 3px; 1574 | color: rgba(0, 0, 0, 0.37); 1575 | } 1576 | .fab-body .icon-fab-close:hover { 1577 | color: rgba(0, 0, 0, 0.54); 1578 | } 1579 | .fab-body ul { 1580 | margin-top: 30px; 1581 | } 1582 | .fab-body ul li { 1583 | font-size: 16px; 1584 | font-weight: 400; 1585 | color: rgba(0, 0, 0, 0.87); 1586 | width: 100%; 1587 | float: left; 1588 | display: table; 1589 | margin-bottom: 20px; 1590 | } 1591 | .fab-body ul li img, 1592 | .fab-body ul li a { 1593 | display: table-cell; 1594 | vertical-align: middle; 1595 | } 1596 | .fab-body ul li a { 1597 | padding-left: 15px; 1598 | } 1599 | .fab-body ul li i[class^="icon-fab-share-"] { 1600 | color: rgba(0, 0, 0, 0.6); 1601 | } 1602 | .fab-body ul li i.icon-fab-share-facebook { 1603 | color: #3a5897; 1604 | } 1605 | .fab-body ul li i.icon-fab-share-twitter { 1606 | color: #1da1f2; 1607 | } 1608 | .fab-body ul li i.icon-fab-share-googleplus { 1609 | color: #ea4335; 1610 | } 1611 | .fab-body ul li i.icon-fab-share-whatsapp { 1612 | color: #25d366; 1613 | } 1614 | .fab-body ul li:last-child { 1615 | margin-bottom: 0 !important; 1616 | } 1617 | .fab-body ul li:hover { 1618 | cursor: pointer; 1619 | color: #000000; 1620 | } 1621 | .fab-body .fab-header { 1622 | margin-bottom: 5px; 1623 | font-size: 14px; 1624 | color: rgba(0, 0, 0, 0.87); 1625 | font-weight: 500; 1626 | } 1627 | .fab-body input { 1628 | width: 65%; 1629 | margin-left: 35px; 1630 | box-shadow: none; 1631 | border: 2px #d4d4d4 solid; 1632 | background: #fff; 1633 | position: relative; 1634 | font-size: 12px; 1635 | line-height: 30px; 1636 | font-weight: 500; 1637 | color: #4b4b4b; 1638 | -webkit-font-smoothing: antialiased; 1639 | outline: none; 1640 | display: inline-block; 1641 | height: 30px; 1642 | resize: none; 1643 | padding: 5px; 1644 | border-radius: 2px; 1645 | } 1646 | .fab-body .chat_login_alert { 1647 | margin-top: 10px; 1648 | font-size: 12px; 1649 | font-family: "Roboto"; 1650 | font-weight: 500; 1651 | } 1652 | .chat_field { 1653 | position: relative; 1654 | margin: 5px 0 5px 0; 1655 | width: 50%; 1656 | font-family: "Roboto"; 1657 | font-size: 12px; 1658 | line-height: 30px; 1659 | font-weight: 500; 1660 | color: #4b4b4b; 1661 | -webkit-font-smoothing: antialiased; 1662 | border: none; 1663 | outline: none; 1664 | background: #eceff1; 1665 | display: inline-block; 1666 | } 1667 | .chat_field.chat_message { 1668 | height: 30px; 1669 | resize: none; 1670 | } 1671 | .fab_field { 1672 | width: 100%; 1673 | display: inline-block; 1674 | text-align: center; 1675 | background: #eceff1; 1676 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); 1677 | } 1678 | .fab_field a { 1679 | display: inline-block; 1680 | text-align: center; 1681 | } 1682 | #fab_listen { 1683 | float: left; 1684 | background: transparent; 1685 | } 1686 | #fab_send { 1687 | float: right; 1688 | background: transparent; 1689 | } 1690 | .fab_field .fab { 1691 | width: 35px; 1692 | height: 35px; 1693 | box-shadow: none; 1694 | margin: 5px; 1695 | } 1696 | .fab_field .fab > i { 1697 | font-size: 1.6em; 1698 | line-height: 35px; 1699 | color: #263238; 1700 | } 1701 | .chat_converse { 1702 | position: relative; 1703 | background: inherit; 1704 | margin: 6px 0 0 0; 1705 | max-height: 256px; 1706 | min-height: 0; 1707 | font-size: 12px; 1708 | line-height: 18px; 1709 | overflow-y: auto; 1710 | width: 100%; 1711 | float: right; 1712 | } 1713 | .chat_list { 1714 | opacity: 0; 1715 | visibility: hidden; 1716 | height: 0; 1717 | } 1718 | .chat_list .chat_list_item { 1719 | opacity: 0; 1720 | visibility: hidden; 1721 | } 1722 | .chat .chat_converse .chat_msg_item { 1723 | position: relative; 1724 | margin: 8px 0 15px 0; 1725 | padding: 8px 10px; 1726 | max-width: 40%; 1727 | display: block; 1728 | word-wrap: break-word; 1729 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28); 1730 | border-radius: 3px; 1731 | -webkit-animation: zoomIn 0.5s cubic-bezier(0.42, 0, 0.58, 1); 1732 | -moz-animation: zoomIn 0.5s cubic-bezier(0.42, 0, 0.58, 1); 1733 | -o-animation: zoomIn 0.5s cubic-bezier(0.42, 0, 0.58, 1); 1734 | animation: zoomIn 0.5s cubic-bezier(0.42, 0, 0.58, 1); 1735 | clear: both; 1736 | z-index: 999; 1737 | } 1738 | .chat .chat_converse .chat_msg_item .chat_avatar { 1739 | position: absolute; 1740 | top: 0; 1741 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); 1742 | } 1743 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin .chat_avatar { 1744 | left: -52px; 1745 | background: rgba(255, 255, 255, 0.6); 1746 | } 1747 | .chat .chat_converse .chat_msg_item.chat_msg_item_user .chat_avatar { 1748 | right: -52px; 1749 | background: rgba(0, 0, 0, 0.6); 1750 | } 1751 | .chat .chat_converse .chat_msg_item .chat_avatar { 1752 | width: 40px; 1753 | height: 40px; 1754 | text-align: center; 1755 | border-radius: 50%; 1756 | } 1757 | .chat .chat_converse .chat_msg_item .chat_avatar > i { 1758 | font-size: 22px; 1759 | line-height: 40px; 1760 | -webkit-transition: all 0.3s ease-in-out; 1761 | -moz-transition: all 0.3s ease-in-out; 1762 | -o-transition: all 0.3s ease-in-out; 1763 | transition: all 0.3s ease-in-out; 1764 | } 1765 | .chat .chat_converse .chat_msg_item_user .chat_avatar > img { 1766 | width: inherit; 1767 | height: inherit; 1768 | border-radius: 50%; 1769 | } 1770 | .chat .chat_converse .chat_msg_item_user .chat_avatar > img { 1771 | width: inherit; 1772 | height: inherit; 1773 | border-radius: 50%; 1774 | } 1775 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin { 1776 | margin-left: 60px; 1777 | float: left; 1778 | background: rgba(255, 255, 255, 0.4); 1779 | color: #263238; 1780 | } 1781 | .chat .chat_converse .chat_msg_item.chat_msg_item_user { 1782 | margin-right: 60px; 1783 | float: right; 1784 | background: rgba(0, 0, 0, 0.4); 1785 | color: #eceff1; 1786 | } 1787 | .chat .chat_converse .chat_msg_item.chat_msg_item_admin:before { 1788 | content: ""; 1789 | position: absolute; 1790 | top: 15px; 1791 | left: -12px; 1792 | z-index: 998; 1793 | border: 6px solid transparent; 1794 | border-right-color: rgba(255, 255, 255, 0.4); 1795 | } 1796 | .chat_msg_item.chat_msg_item_user:before { 1797 | content: ""; 1798 | position: absolute; 1799 | top: 15px; 1800 | right: -12px; 1801 | z-index: 998; 1802 | border: 6px solid transparent; 1803 | border-left-color: rgba(0, 0, 0, 0.4); 1804 | } 1805 | strong.chat_time { 1806 | padding: 0 1px 1px 0; 1807 | font-weight: 500; 1808 | font-size: 8px; 1809 | display: block; 1810 | } 1811 | .is-active { 1812 | -o-transition: all 1s ease-in-out; 1813 | -moz-transition: all 1s ease-in-out; 1814 | transition: all 1s ease-in-out; 1815 | } 1816 | .fabOnTop { 1817 | z-index: 9999; 1818 | } 1819 | .is-float { 1820 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32); 1821 | } 1822 | .is-max { 1823 | box-shadow: inset 0 -12px 10px -10px rgba(0, 0, 0, 0.18), inset 0 12px 10px -10px rgba(0, 0, 0, 0.1); 1824 | } 1825 | .is-loading { 1826 | display: block; 1827 | -webkit-animation: load 1s cubic-bezier(0, 0.99, 1, 0.6) infinite; 1828 | -moz-animation: load 1s cubic-bezier(0, 0.99, 1, 0.6) infinite; 1829 | -o-animation: load 1s cubic-bezier(0, 0.99, 1, 0.6) infinite; 1830 | animation: load 1s cubic-bezier(0, 0.99, 1, 0.6) infinite; 1831 | } 1832 | @keyframes zoomIn { 1833 | 0% { 1834 | -moz-transform: scale(0); 1835 | -ms-transform: scale(0); 1836 | -webkit-transform: scale(0); 1837 | transform: scale(0); 1838 | opacity: 0; 1839 | } 1840 | 100% { 1841 | -moz-transform: scale(1); 1842 | -ms-transform: scale(1); 1843 | -webkit-transform: scale(1); 1844 | transform: scale(1); 1845 | opacity: 1; 1846 | } 1847 | } 1848 | @keyframes load { 1849 | 0% { 1850 | -moz-transform: scale(0); 1851 | -ms-transform: scale(0); 1852 | -webkit-transform: scale(0); 1853 | transform: scale(0); 1854 | opacity: 0; 1855 | } 1856 | 50% { 1857 | -moz-transform: scale(1.5); 1858 | -ms-transform: scale(1.5); 1859 | -webkit-transform: scale(1.5); 1860 | transform: scale(1.5); 1861 | opacity: 1; 1862 | } 1863 | 100% { 1864 | -moz-transform: scale(1); 1865 | -ms-transform: scale(1); 1866 | -webkit-transform: scale(1); 1867 | transform: scale(1); 1868 | opacity: 0; 1869 | } 1870 | } 1871 | @media only screen and (max-width: 320px) { 1872 | .chat, 1873 | .dialog-container { 1874 | width: 290px; 1875 | right: 0px; 1876 | } 1877 | } 1878 | @media only screen and (min-width: 300px) and (max-width: 320px) { 1879 | .chat { 1880 | width: 280px !important; 1881 | right: 0 !important; 1882 | } 1883 | .dialog-container { 1884 | width: 280px !important; 1885 | right: 12px !important; 1886 | } 1887 | } 1888 | @media only screen and (min-width: 320px) { 1889 | .chat { 1890 | right: 20px !important; 1891 | bottom: 20px; 1892 | } 1893 | .chat, 1894 | .dialog-container { 1895 | width: 312px; 1896 | right: 0px; 1897 | } 1898 | } 1899 | @media only screen and (min-width: 480px) { 1900 | .chat, 1901 | .dialog-container { 1902 | width: 300px; 1903 | } 1904 | .chat_field { 1905 | width: 65%; 1906 | } 1907 | } 1908 | @media (max-width: 666px) { 1909 | .fabs { 1910 | float: right; 1911 | position: relative; 1912 | margin: 0; 1913 | right: 15px; 1914 | } 1915 | .fab { 1916 | margin: 0; 1917 | } 1918 | } 1919 | @media only screen and (min-width: 768px) { 1920 | .chat, 1921 | .dialog-container { 1922 | width: 300px; 1923 | } 1924 | .chat_field { 1925 | width: 65%; 1926 | } 1927 | } 1928 | @media only screen and (min-width: 1024px) { 1929 | .chat, 1930 | .dialog-container { 1931 | width: 312px; 1932 | } 1933 | .chat_field { 1934 | width: 65%; 1935 | } 1936 | } 1937 | #copyButton { 1938 | height: 30px; 1939 | float: right; 1940 | top: 0; 1941 | background: #fff; 1942 | border: 1px #ccc solid; 1943 | padding: 5px 10px !important; 1944 | cursor: pointer; 1945 | text-align: center; 1946 | } 1947 | #copyButton:hover { 1948 | background: #f7f7f7; 1949 | } 1950 | #copyButton:focus { 1951 | outline: 0; 1952 | } 1953 | #shortUrl { 1954 | width: 50% !important; 1955 | pointer-events: none; 1956 | } 1957 | .ifCopySucceed { 1958 | font-size: 15px; 1959 | color: #000; 1960 | opacity: 0.82; 1961 | font-weight: 400; 1962 | float: right; 1963 | text-align: right; 1964 | } 1965 | .fab-email-input { 1966 | float: left !important; 1967 | width: 100% !important; 1968 | margin-left: 0 !important; 1969 | } 1970 | .fab-step2 .icon-event-back { 1971 | cursor: pointer; 1972 | position: absolute; 1973 | left: 3px; 1974 | font-size: 35px; 1975 | top: 3px; 1976 | color: rgba(0, 0, 0, 0.37); 1977 | } 1978 | .icon-fab-share-add { 1979 | font-size: 22px !important; 1980 | } 1981 | @media (max-width: 320px) { 1982 | #dvcard-details .fabs { 1983 | right: 20px; 1984 | } 1985 | #dvcard-details .fab { 1986 | width: 50px; 1987 | height: 50px; 1988 | } 1989 | #dvcard-details .fab > i { 1990 | font-size: 30px; 1991 | line-height: 60px; 1992 | } 1993 | } 1994 | #gotIt .event-gotIt-button .img { 1995 | height: 95px; 1996 | width: 95px; 1997 | border-radius: 50%; 1998 | background-position: center center !important; 1999 | background-size: cover !important; 2000 | margin: 10px auto 20px auto; 2001 | } 2002 | #gotIt .event-gotIt-button .header-button { 2003 | display: block; 2004 | color: #ffffff; 2005 | padding: 10px 0; 2006 | min-width: 100px; 2007 | height: 60px; 2008 | } 2009 | #gotIt .event-gotIt-button .header-button i { 2010 | display: inline-block; 2011 | font-size: 18px; 2012 | margin-bottom: 8px; 2013 | } 2014 | #gotIt .event-gotIt-button .header-button small { 2015 | display: block; 2016 | text-transform: uppercase; 2017 | font-size: 10px; 2018 | } 2019 | 2020 | .welcome-screen .helper { 2021 | display: inline-block; 2022 | height: 100%; 2023 | vertical-align: middle; 2024 | } 2025 | .welcome-screen img { 2026 | display: inline-block; 2027 | vertical-align: middle; 2028 | max-height: 100px; 2029 | max-width: 100px; 2030 | margin: 0 auto; 2031 | animation-name: pulse_animation; 2032 | animation-duration: 2500ms; 2033 | transform-origin: 50% 50%; 2034 | animation-timing-function: ease-in-out; 2035 | } 2036 | @media (min-width: 375px) { 2037 | .welcome-screen img { 2038 | max-width: 180px !important; 2039 | max-height: 180px !important; 2040 | } 2041 | } 2042 | @keyframes pulse_animation { 2043 | 0% { 2044 | transform: scale(0.8); 2045 | } 2046 | 100% { 2047 | transform: scale(1); 2048 | } 2049 | } 2050 | .loading-welcome { 2051 | position: fixed; 2052 | top: 0; 2053 | bottom: 0; 2054 | left: 0; 2055 | right: 0; 2056 | width: 100%; 2057 | height: 100%; 2058 | background-color: #fff; 2059 | display: none; 2060 | z-index: 9999998; 2061 | opacity: 1; 2062 | } 2063 | .loading-welcome.active { 2064 | white-space: nowrap; 2065 | text-align: center; 2066 | display: inline-block; 2067 | } 2068 | .loading-welcome #welcomeImg { 2069 | display: none; 2070 | } 2071 | .progress { 2072 | position: relative; 2073 | height: 4px; 2074 | display: block; 2075 | width: 100%; 2076 | background-color: #f4f4f4; 2077 | border-radius: 2px; 2078 | background-clip: padding-box; 2079 | margin: 0 auto; 2080 | overflow: hidden; 2081 | } 2082 | .progress .loading-bar { 2083 | background-color: #797d80; 2084 | } 2085 | .progress .indeterminate:before { 2086 | content: ""; 2087 | position: absolute; 2088 | background-color: inherit; 2089 | top: 0; 2090 | left: 0; 2091 | bottom: 0; 2092 | will-change: left, right; 2093 | -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 2094 | animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; 2095 | } 2096 | .progress .indeterminate:after { 2097 | content: ""; 2098 | position: absolute; 2099 | background-color: inherit; 2100 | top: 0; 2101 | left: 0; 2102 | bottom: 0; 2103 | will-change: left, right; 2104 | -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; 2105 | animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; 2106 | -webkit-animation-delay: 1.15s; 2107 | animation-delay: 1.15s; 2108 | } 2109 | @-webkit-keyframes indeterminate { 2110 | 0% { 2111 | left: -35%; 2112 | right: 100%; 2113 | } 2114 | 60% { 2115 | left: 100%; 2116 | right: -90%; 2117 | } 2118 | 100% { 2119 | left: 100%; 2120 | right: -90%; 2121 | } 2122 | } 2123 | @keyframes indeterminate { 2124 | 0% { 2125 | left: -35%; 2126 | right: 100%; 2127 | } 2128 | 60% { 2129 | left: 100%; 2130 | right: -90%; 2131 | } 2132 | 100% { 2133 | left: 100%; 2134 | right: -90%; 2135 | } 2136 | } 2137 | @-webkit-keyframes indeterminate-short { 2138 | 0% { 2139 | left: -200%; 2140 | right: 100%; 2141 | } 2142 | 60% { 2143 | left: 107%; 2144 | right: -8%; 2145 | } 2146 | 100% { 2147 | left: 107%; 2148 | right: -8%; 2149 | } 2150 | } 2151 | @keyframes indeterminate-short { 2152 | 0% { 2153 | left: -200%; 2154 | right: 100%; 2155 | } 2156 | 60% { 2157 | left: 107%; 2158 | right: -8%; 2159 | } 2160 | 100% { 2161 | left: 107%; 2162 | right: -8%; 2163 | } 2164 | } 2165 | 2166 | div[class^="channel-bgd-"] { 2167 | border-radius: 50%; 2168 | width: 40px; 2169 | height: 40px; 2170 | float: left; 2171 | text-align: center; 2172 | position: absolute; 2173 | margin-right: 15px; 2174 | left: 0; 2175 | } 2176 | div[class^="channel-bgd-"] i { 2177 | position: absolute !important; 2178 | font-size: 36px !important; 2179 | color: #fff !important; 2180 | line-height: 50px !important; 2181 | left: 2px !important; 2182 | top: 1px !important; 2183 | } 2184 | .channel-bgd-website { 2185 | background: #616568; 2186 | } 2187 | .channel-bgd-facebook { 2188 | background: #3b5998; 2189 | } 2190 | .channel-bgd-twitter { 2191 | background: #1da1f2; 2192 | } 2193 | .channel-bgd-instagram { 2194 | background: #e1306c; 2195 | } 2196 | .channel-bgd-snapchat { 2197 | background: #fffc00; 2198 | } 2199 | .channel-bgd-youtube { 2200 | background: #cd201f; 2201 | } 2202 | .channel-bgd-pinterest { 2203 | background: #bd081c; 2204 | } 2205 | .channel-bgd-googleplus { 2206 | background: #dd4b39; 2207 | } 2208 | .channel-bgd-linkedin { 2209 | background: #0077b5; 2210 | } 2211 | .channel-bgd-xing { 2212 | background: #026466; 2213 | } 2214 | .channel-bgd-flickr { 2215 | background: #ff0084; 2216 | } 2217 | .channel-bgd-vimeo { 2218 | background: #1ab7ea; 2219 | } 2220 | .channel-bgd-dribbble { 2221 | background: #ea4c89; 2222 | } 2223 | .channel-bgd-vkontakte { 2224 | background: #45668e; 2225 | } 2226 | .channel-bgd-tripadvisor { 2227 | background: #589442; 2228 | } 2229 | .channel-bgd-wechat { 2230 | background: #7bb32e; 2231 | } 2232 | .channel-bgd-line { 2233 | background: #00c300; 2234 | } 2235 | .channel-bgd-reddit { 2236 | background: #ff4500; 2237 | } 2238 | .channel-bgd-tumblr { 2239 | background: #35465c; 2240 | } 2241 | .channel-bgd-github { 2242 | background: #191717; 2243 | } 2244 | .channel-bgd-whatsapp { 2245 | background: #25d366; 2246 | } 2247 | .channel-bgd-skype { 2248 | background: #00aff0; 2249 | } 2250 | .channel-bgd-doordash { 2251 | background: #ff3008; 2252 | } 2253 | .channel-bgd-grubhub { 2254 | background: #f6343f; 2255 | } 2256 | .channel-bgd-ubereats { 2257 | background: #00151d; 2258 | } 2259 | .channel-bgd-postmates { 2260 | background: #ffff11; 2261 | } 2262 | .channel-bgd-postmates > i[class$="postmates"] { 2263 | color: #000 !important; 2264 | } 2265 | .channel-bgd-opentable { 2266 | background: #da3743; 2267 | } 2268 | .channel-bgd-tiktok { 2269 | background: #000; 2270 | } 2271 | .channel-bgd-messenger { 2272 | background: radial-gradient(108.96% 108.96% at 19.25% 99.47%, #002fff 0%, #a033ff 60.98%, #ff5280 93.48%, #ff7061 100%); 2273 | } 2274 | .channel-bgd-telegram { 2275 | background: linear-gradient(180deg, #2aabee 0%, #229ed9 99.26%); 2276 | } 2277 | .channel-bgd-telegram > i[class$="telegram"] { 2278 | left: 1px !important; 2279 | top: 2px !important; 2280 | } 2281 | .channel-bgd-yelp { 2282 | background: #f43939; 2283 | } 2284 | .channel-bgd-googlereview { 2285 | background: #ffffff; 2286 | border: 1px solid #eaeaea; 2287 | } 2288 | .channel-bgd-googlereview > i[class$="googlereview"] { 2289 | position: relative; 2290 | border-top: 4px solid #ea4335; 2291 | border-right: 4px solid #4285f4; 2292 | border-bottom: 4px solid #34a853; 2293 | border-left: 4px solid #fbbc05; 2294 | border-radius: 50%; 2295 | background-color: #ffffff; 2296 | width: 20px; 2297 | height: 20px; 2298 | margin: 8px 0 0 7px; 2299 | display: block; 2300 | } 2301 | .channel-bgd-googlereview > i[class$="googlereview"]:before { 2302 | content: ""; 2303 | z-index: 100; 2304 | position: absolute; 2305 | top: 50%; 2306 | right: -4px; 2307 | transform: translateY(-50%); 2308 | width: 9px; 2309 | height: 4px; 2310 | background: #4285f4; 2311 | border-bottom-right-radius: 2px; 2312 | } 2313 | .channel-bgd-googlereview > i[class$="googlereview"]:after { 2314 | content: ""; 2315 | z-index: 99; 2316 | position: absolute; 2317 | border-top: 10px solid transparent; 2318 | border-right: 10px solid #ffffff; 2319 | top: -4px; 2320 | right: -4px; 2321 | width: 10px; 2322 | height: 10px; 2323 | } 2324 | .channel-bgd-spotify { 2325 | background: #1ed760; 2326 | } 2327 | .channel-bgd-spotify > i[class="icon-social-spotify"]:before { 2328 | content: "\5f"; 2329 | } 2330 | .channel-bgd-soundcloud { 2331 | background: linear-gradient(180deg, #f79810 0%, #f8310e 100%); 2332 | } 2333 | .channel-bgd-applemusic { 2334 | background: linear-gradient(0deg, #fa233b 0.39%, #fb5c74 97.84%); 2335 | } 2336 | .channel-bgd-applemusic > i[class="icon-social-applemusic"] { 2337 | font-size: 28px !important; 2338 | line-height: 49px !important; 2339 | left: 5px !important; 2340 | } 2341 | .channel-bgd-applemusic > i[class="icon-social-applemusic"]:before { 2342 | content: "\5b"; 2343 | } 2344 | 2345 | @font-face { 2346 | font-family: "solution-vcard-icons"; 2347 | src:url("fonts/solution-vcard-icons.eot"); 2348 | src:url("fonts/solution-vcard-icons%EF%B9%96.eot#iefix") format("embedded-opentype"), 2349 | url("fonts/solution-vcard-icons.woff") format("woff"), 2350 | url("fonts/solution-vcard-icons.ttf") format("truetype"), 2351 | url("fonts/solution-vcard-icons.svg#solution-vcard-icons") format("svg"); 2352 | font-weight: normal; 2353 | font-style: normal; 2354 | 2355 | } 2356 | 2357 | [data-icon]:before { 2358 | font-family: "solution-vcard-icons" !important; 2359 | content: attr(data-icon); 2360 | font-style: normal !important; 2361 | font-weight: normal !important; 2362 | font-variant: normal !important; 2363 | text-transform: none !important; 2364 | line-height: 1; 2365 | -webkit-font-smoothing: antialiased; 2366 | -moz-osx-font-smoothing: grayscale; 2367 | } 2368 | 2369 | [class^="icon-"]:before, 2370 | [class*=" icon-"]:before { 2371 | font-family: "solution-vcard-icons" !important; 2372 | font-style: normal !important; 2373 | font-weight: normal !important; 2374 | font-variant: normal !important; 2375 | text-transform: none !important; 2376 | line-height: 1; 2377 | -webkit-font-smoothing: antialiased; 2378 | -moz-osx-font-smoothing: grayscale; 2379 | } 2380 | 2381 | .icon-dribbble:before { 2382 | content: "\61"; 2383 | } 2384 | .icon-vkontakte:before { 2385 | content: "\62"; 2386 | } 2387 | .icon-tumblr:before { 2388 | content: "\63"; 2389 | } 2390 | .icon-xing:before { 2391 | content: "\64"; 2392 | } 2393 | .icon-vine:before { 2394 | content: "\65"; 2395 | } 2396 | .icon-pinterest:before { 2397 | content: "\66"; 2398 | } 2399 | .icon-flickr:before { 2400 | content: "\67"; 2401 | } 2402 | .icon-facebook:before { 2403 | content: "\68"; 2404 | } 2405 | .icon-instagram:before { 2406 | content: "\69"; 2407 | } 2408 | .icon-skype:before { 2409 | content: "\6a"; 2410 | } 2411 | .icon-googleplus:before { 2412 | content: "\6b"; 2413 | } 2414 | .icon-linkedin:before { 2415 | content: "\6c"; 2416 | } 2417 | .icon-birthday:before { 2418 | content: "\6e"; 2419 | } 2420 | .icon-underline:before { 2421 | content: "\6f"; 2422 | } 2423 | .icon-phone:before { 2424 | content: "\70"; 2425 | } 2426 | .icon-mail:before { 2427 | content: "\71"; 2428 | } 2429 | .icon-work:before { 2430 | content: "\72"; 2431 | } 2432 | .icon-map-pin:before { 2433 | content: "\73"; 2434 | } 2435 | .icon-earth:before { 2436 | content: "\74"; 2437 | } 2438 | .icon-send:before { 2439 | content: "\75"; 2440 | } 2441 | .icon-add-user:before { 2442 | content: "\76"; 2443 | } 2444 | .icon-close:before { 2445 | content: "\77"; 2446 | } 2447 | .icon-paperfly:before { 2448 | content: "\6d"; 2449 | } 2450 | .icon-download-inbox:before { 2451 | content: "\78"; 2452 | } 2453 | .icon-fax:before { 2454 | content: "\79"; 2455 | } 2456 | .icon-youtube:before { 2457 | content: "\42"; 2458 | } 2459 | .icon-vimeo:before { 2460 | content: "\43"; 2461 | } 2462 | .icon-tripadvisor:before { 2463 | content: "\44"; 2464 | } 2465 | .icon-snapchat:before { 2466 | content: "\41"; 2467 | } 2468 | .icon-share:before { 2469 | content: "\46"; 2470 | } 2471 | .icon-twitter:before { 2472 | content: "\45"; 2473 | } 2474 | .icon-social-dribbble:before { 2475 | content: "\4e"; 2476 | } 2477 | .icon-social-facebook:before { 2478 | content: "\4f"; 2479 | } 2480 | .icon-social-flickr:before { 2481 | content: "\50"; 2482 | } 2483 | .icon-social-googleplus:before { 2484 | content: "\51"; 2485 | } 2486 | .icon-social-github:before { 2487 | content: "\52"; 2488 | } 2489 | .icon-social-instagram:before { 2490 | content: "\53"; 2491 | } 2492 | .icon-social-line:before { 2493 | content: "\54"; 2494 | } 2495 | .icon-social-linkedin:before { 2496 | content: "\55"; 2497 | } 2498 | .icon-social-pinterest:before { 2499 | content: "\56"; 2500 | } 2501 | .icon-social-reddit:before { 2502 | content: "\57"; 2503 | } 2504 | .icon-social-skype:before { 2505 | content: "\58"; 2506 | } 2507 | .icon-social-snapchat:before { 2508 | content: "\59"; 2509 | } 2510 | .icon-social-tripadvisor:before { 2511 | content: "\5a"; 2512 | } 2513 | .icon-social-tumblr:before { 2514 | content: "\30"; 2515 | } 2516 | .icon-social-twitter:before { 2517 | content: "\31"; 2518 | } 2519 | .icon-social-youtube:before { 2520 | content: "\32"; 2521 | } 2522 | .icon-social-vimeo:before { 2523 | content: "\33"; 2524 | } 2525 | .icon-social-vkontakte:before { 2526 | content: "\34"; 2527 | } 2528 | .icon-social-website:before { 2529 | content: "\35"; 2530 | } 2531 | .icon-social-wechat:before { 2532 | content: "\36"; 2533 | } 2534 | .icon-social-whatsapp:before { 2535 | content: "\37"; 2536 | } 2537 | .icon-social-xing:before { 2538 | content: "\38"; 2539 | } 2540 | .icon-fab-share:before { 2541 | content: "\7a"; 2542 | } 2543 | .icon-fab-share-email:before { 2544 | content: "\47"; 2545 | } 2546 | .icon-fab-share-facebook:before { 2547 | content: "\48"; 2548 | } 2549 | .icon-fab-share-googleplus:before { 2550 | content: "\49"; 2551 | } 2552 | .icon-fab-share-message:before { 2553 | content: "\4a"; 2554 | } 2555 | .icon-fab-share-twitter:before { 2556 | content: "\4b"; 2557 | } 2558 | .icon-fab-close:before { 2559 | content: "\4c"; 2560 | } 2561 | .icon-social-minus:before { 2562 | content: "\4d"; 2563 | } 2564 | .icon-social-image-change:before { 2565 | content: "\39"; 2566 | } 2567 | .icon-icon-addimage:before { 2568 | content: "\21"; 2569 | } 2570 | .icon-social-sec-basic-1:before { 2571 | content: "\22"; 2572 | } 2573 | .icon-social-sec-basic:before { 2574 | content: "\23"; 2575 | } 2576 | .icon-social-sec-soccha:before { 2577 | content: "\24"; 2578 | } 2579 | .icon-event-location:before { 2580 | content: "\25"; 2581 | } 2582 | .icon-event-back:before { 2583 | content: "\26"; 2584 | } 2585 | .icon-fab-share-add:before { 2586 | content: "\27"; 2587 | } 2588 | .icon-fab-share-send-email:before { 2589 | content: "\28"; 2590 | } 2591 | .icon-fab-share-phone:before { 2592 | content: "\29"; 2593 | } 2594 | .icon-fab-share-savecontact:before { 2595 | content: "\2a"; 2596 | } 2597 | .icon-fab-share-whatsapp:before { 2598 | content: "\2b"; 2599 | } 2600 | .icon-social-doordash:before { 2601 | content: "\2c"; 2602 | } 2603 | .icon-social-opentable:before { 2604 | content: "\2d"; 2605 | } 2606 | .icon-social-postmates:before { 2607 | content: "\2e"; 2608 | } 2609 | .icon-social-grubhub:before { 2610 | content: "\2f"; 2611 | } 2612 | .icon-social-ubereats:before { 2613 | content: "\3a"; 2614 | } 2615 | .icon-social-messenger:before { 2616 | content: "\3b"; 2617 | } 2618 | .icon-social-telegram:before { 2619 | content: "\3c"; 2620 | } 2621 | .icon-social-tiktok:before { 2622 | content: "\3d"; 2623 | } 2624 | .icon-social-google-review:before { 2625 | content: "\3e"; 2626 | } 2627 | .icon-social-yelp:before { 2628 | content: "\3f"; 2629 | } 2630 | .icon-social-applemusic:before { 2631 | content: "\40"; 2632 | } 2633 | .icon-social-applemusicsign:before { 2634 | content: "\5b"; 2635 | } 2636 | .icon-social-soundcloud:before { 2637 | content: "\5d"; 2638 | } 2639 | .icon-social-spotify:before { 2640 | content: "\5e"; 2641 | } 2642 | .icon-social-spotifysign:before { 2643 | content: "\5f"; 2644 | } 2645 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/demo.gif -------------------------------------------------------------------------------- /img/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/img/ajax-loader.gif -------------------------------------------------------------------------------- /img/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/img/favicon/favicon.ico -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PAPAMICA/web-card/cbb84813b509bcb533dfe99d380f246ebe752256/img/logo.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | Web Card 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 37 | 38 | 39 |
42 |
43 |
44 |
45 |
46 |
47 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |

61 | 62 |
65 |
67 |

{{view.firstname}} 68 | {{view.lastname}}

69 | 70 |

{{view.company}} 71 |

72 |
{{view.job}}
73 |
74 |
76 |
77 | 80 | 81 | Appeler 82 | 83 | 84 | 87 | 88 | Email 89 | 90 | 91 | 93 | 94 | Appeler 95 | 96 | 97 | 99 | 100 | Email 101 | 102 | 103 | 105 | 106 | Directions 107 | 108 | 109 | 110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 |
119 |
120 | 121 |

Waiting for you to enter data

122 | 123 |
124 |
125 |
126 |
127 |
128 |
129 | 130 |
131 |
132 |
133 | {{ view.sharing }} 134 | 135 |

{{view.birthday}}

136 | Birthday 137 |
138 |
139 | 164 |
165 |
166 | 167 |

168 |
169 |
170 |
171 | 172 |

{{view.numbers_mobile}}

173 | Mobile 174 |
175 |
176 | 177 |

{{view.numbers_phone}}

178 | Telephone 179 |
180 |
181 | 182 |

{{view.numbers_fax}}

183 | Fax 184 |
185 |
186 |
187 | 188 |

{{view.email}}

189 | Email 190 |
191 |
193 |
194 | 195 |

{{view.company}}

196 | {{view.job}} 197 |
198 |
200 |
201 |
203 | 204 | 205 |

{{view.venue}}

206 |

{{view.street}} {{view.street_number}}

207 |

{{view.city}}, 208 | {{view.state}} {{view.zip}} 209 |

210 |

{{view.country}}

211 | 212 |
214 | 217 | Show on map 218 |
219 |
220 |
222 |
223 | 224 |
225 | 226 |

{{view.website|removeParameterFromURL}} 227 |

228 | Website 229 |
230 | 231 | 232 | 245 | 302 | 303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 | {{gotItText}} 311 |
312 | 313 | Got it 314 |
315 |
316 |
317 |
318 |
319 | 320 |
321 |
322 | 323 | 386 | 387 |
388 | 389 | 390 | 391 | 1441 | 1442 | 1443 | 1444 | -------------------------------------------------------------------------------- /json_data.js: -------------------------------------------------------------------------------- 1 | json_data = { 2 | show_directions: false, 3 | showPreview: 1, 4 | form: [{ section_design: { fold: false } }, { section_information: { fold: false } }, { section_social: { fold: true } }, { section_welcome_screen: [] }, { section_advance_options: { fold: false } }], 5 | url: "", 6 | color1: "#0288d1", 7 | color2: "#64b5f6", 8 | avatar: "img/logo.png", 9 | avatar_extra: { zoom: 100, background: "#ffffff" }, 10 | address: { autocomplete: "disabled" }, 11 | welcome_screen: "img/logo.png", 12 | welcome_extra: { zoom: 50, background: "#ffffff" }, 13 | sharing: true, 14 | code: { 15 | channels: [ 16 | { input_prefix_label: "URL", link: "", label: "", name: "Facebook" }, 17 | { input_prefix_label: "@", link: "", label: "", name: "Twitter" }, 18 | // { input_prefix_label: "@", link: "", label: "", name: "Instagram" }, 19 | // { input_prefix_label: "URL", link: "", label: "Find us on TikTok", name: "TikTok" }, 20 | // { input_prefix_label: "Phone", link: "", label: "Message us", name: "WhatsApp" }, 21 | // { input_prefix_label: "URL", link: "", label: "", name: "YouTube" }, 22 | // { input_prefix_label: "URL", link: "", label: "Get in touch", name: "Telegram" }, 23 | // { input_prefix_label: "URL", link: "", label: "Get in touch", name: "Messenger" }, 24 | // { input_prefix_label: "URL", link: "", label: "Review us on Google", name: "Google Review" }, 25 | // { input_prefix_label: "URL", link: "", label: "", name: "Tripadvisor" }, 26 | // { input_prefix_label: "URL", link: "", label: "", name: "LinkedIn" }, 27 | // { input_prefix_label: "URL", link: "", label: "Order with Uber Eats", name: "Uber Eats" }, 28 | // { input_prefix_label: "URL", link: "", label: "", name: "Dribbble" }, 29 | // { input_prefix_label: "URL", link: "", label: "", name: "VKontakte" }, 30 | // { input_prefix_label: "URL", link: "", label: "Listen to us on Spotify", name: "Spotify" }, 31 | // { input_prefix_label: "URL", link: "", label: "Make a reservation", name: "OpenTable" }, 32 | // { input_prefix_label: "URL", link: "", label: "", name: "Pinterest" }, 33 | ], 34 | }, 35 | firstname: "", 36 | lastname: "", 37 | numbers_mobile: "", 38 | numbers_phone: "", 39 | numbers_fax: "", 40 | email: "", 41 | company: "", 42 | job: "", 43 | venue: "", 44 | street: "", 45 | street_number: "", 46 | state: "", 47 | city: "", 48 | zip: "", 49 | country: "", 50 | website: "", 51 | bio: "", 52 | }; -------------------------------------------------------------------------------- /vcard.vcf: -------------------------------------------------------------------------------- 1 | BEGIN:VCARD 2 | VERSION:3.0 3 | PRODID: 4 | N: 5 | FN: 6 | ORG: 7 | TITLE: 8 | EMAIL;TYPE=PREF,INTERNET: 9 | TEL;TYPE=CELL,voice: 10 | TEL;TYPE=WORK,voice: 11 | TEL;TYPE=WORK,fax: 12 | ADR;TYPE= 13 | URL: 14 | 15 | PHOTO;TYPE=JPG;ENCODING= 16 | 17 | NOTE: 18 | 19 | REV:2008-04-24T19:52:43Z 20 | END:VCARD 21 | --------------------------------------------------------------------------------