API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Sep 21st, 2017
693
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 51.73 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. session_start();
  3.  
  4. require_once('php/simple-php-captcha/simple-php-captcha.php');
  5. require_once('php/php-mailer/PHPMailerAutoload.php');
  6.  
  7. // Step 1 - Enter your email address below.
  8. $email = 'emejia@trilce.edu.pe';
  9.  
  10. // If the e-mail is not working, change the debug option to 2 | $debug = 2;
  11. $debug = 0;
  12.  
  13. if(isset($_POST['emailSent'])) {
  14.  
  15. $subject = $_POST['subject'];
  16.  
  17. // Step 2 - If you don't want a "captcha" verification, remove that IF.
  18. if (strtolower($_POST['captcha']) == strtolower($_SESSION['captcha']['code'])) {
  19.  
  20. // Step 3 - Configure the fields list that you want to receive on the email.
  21. $fields = array(
  22. 0 => array(
  23. 'text' => 'Name',
  24. 'val' => $_POST['name']
  25. ),
  26. 1 => array(
  27. 'text' => 'Email address',
  28. 'val' => $_POST['email']
  29. ),
  30. 2 => array(
  31. 'text' => 'Message',
  32. 'val' => $_POST['message']
  33. ),
  34. 3 => array(
  35. 'text' => 'Checkboxes',
  36. 'val' => implode($_POST['checkboxes'], ", ")
  37. ),
  38. 4 => array(
  39. 'text' => 'Radios',
  40. 'val' => $_POST['radios']
  41. )
  42. );
  43.  
  44. $message = '';
  45.  
  46. foreach($fields as $field) {
  47. $message .= $field['text'].": " . htmlspecialchars($field['val'], ENT_QUOTES) . "<br>\n";
  48. }
  49.  
  50. $mail = new PHPMailer(true);
  51.  
  52. try {
  53.  
  54. $mail->SMTPDebug = $debug; // Debug Mode
  55.  
  56. // Step 3 (Optional) - If you don't receive the email, try to configure the parameters below:
  57.  
  58. //$mail->IsSMTP(); // Set mailer to use SMTP
  59. //$mail->Host = 'mail.yourserver.com'; // Specify main and backup server
  60. //$mail->SMTPAuth = true; // Enable SMTP authentication
  61. //$mail->Username = 'user@example.com'; // SMTP username
  62. //$mail->Password = 'secret'; // SMTP password
  63. //$mail->SMTPSecure = 'tls'; // Enable encryption, 'ssl' also accepted
  64. //$mail->Port = 587; // TCP port to connect to
  65.  
  66. $mail->AddAddress($email); // Add a recipient
  67.  
  68. //$mail->AddAddress('person2@domain.com', 'Person 2'); // Add another recipient
  69. //$mail->AddCC('person3@domain.com', 'Person 3'); // Add a "Cc" address.
  70. //$mail->AddBCC('person4@domain.com', 'Person 4'); // Add a "Bcc" address.
  71.  
  72. $mail->SetFrom($email, $_POST['name']);
  73. $mail->AddReplyTo($_POST['email'], $_POST['name']);
  74.  
  75. $mail->IsHTML(true); // Set email format to HTML
  76.  
  77. $mail->CharSet = 'UTF-8';
  78.  
  79. $mail->Subject = $subject;
  80. $mail->Body = $message;
  81.  
  82. // Step 4 - If you don't want to attach any files, remove that code below
  83. if (isset($_FILES['attachment']) && $_FILES['attachment']['error'] == UPLOAD_ERR_OK) {
  84. $mail->AddAttachment($_FILES['attachment']['tmp_name'], $_FILES['attachment']['name']);
  85. }
  86.  
  87. $mail->Send();
  88.  
  89. $arrResult = array ('response'=>'success');
  90.  
  91. } catch (phpmailerException $e) {
  92. $arrResult = array ('response'=>'error','errorMessage'=>$e->errorMessage());
  93. } catch (Exception $e) {
  94. $arrResult = array ('response'=>'error','errorMessage'=>$e->getMessage());
  95. }
  96.  
  97. } else {
  98.  
  99. $arrResult = array ('response'=>'captchaError');
  100.  
  101. }
  102.  
  103. }
  104. ?>
  105. <!DOCTYPE html>
  106. <!-- devcode: !production -->
  107. <html>
  108. <!-- endcode -->
  109. <!-- devcode: production -->
  110. <html>
  111. <!-- endcode -->
  112. <head>
  113.  
  114. <!-- Basic -->
  115. <meta charset="utf-8">
  116. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  117.  
  118. <title>Contact Us Advanced | Porto - Responsive HTML5 Template 5.7.2</title>
  119.  
  120. <meta name="keywords" content="HTML5 Template" />
  121. <meta name="description" content="Porto - Responsive HTML5 Template">
  122. <meta name="author" content="okler.net">
  123.  
  124. <!-- Favicon -->
  125. <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
  126. <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
  127.  
  128. <!-- Mobile Metas -->
  129. <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  130.  
  131. <!-- Web Fonts -->
  132. <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800%7CShadows+Into+Light" rel="stylesheet" type="text/css">
  133.  
  134. <!-- Vendor CSS -->
  135. <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  136. <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  137. <link rel="stylesheet" href="vendor/animate/animate.min.css">
  138. <link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.min.css">
  139. <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.min.css">
  140. <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.min.css">
  141. <link rel="stylesheet" href="vendor/magnific-popup/magnific-popup.min.css">
  142.  
  143. <!-- Theme CSS -->
  144. <link rel="stylesheet" href="css/theme.css">
  145. <link rel="stylesheet" href="css/theme-elements.css">
  146. <link rel="stylesheet" href="css/theme-blog.css">
  147. <link rel="stylesheet" href="css/theme-shop.css">
  148.  
  149. <!-- Skin CSS -->
  150. <link rel="stylesheet" href="css/skins/default.css">
  151.  
  152. <!-- Theme Custom CSS -->
  153. <link rel="stylesheet" href="css/custom.css">
  154.  
  155. <!-- Head Libs -->
  156. <script src="vendor/modernizr/modernizr.min.js"></script>
  157.  
  158. </head>
  159. <body>
  160.  
  161. <div class="body">
  162. <header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyStartAt': 57, 'stickySetTop': '-57px', 'stickyChangeLogo': true}">
  163. <div class="header-body">
  164. <div class="header-container container">
  165. <div class="header-row">
  166. <div class="header-column">
  167. <div class="header-logo">
  168. <a href="index.html">
  169. <img alt="Porto" width="111" height="54" data-sticky-width="82" data-sticky-height="40" data-sticky-top="33" src="img/logo.png">
  170. </a>
  171. </div>
  172. </div>
  173. <div class="header-column">
  174. <div class="header-row">
  175. <div class="header-search hidden-xs">
  176. <form id="searchForm" action="page-search-results.html" method="get">
  177. <div class="input-group">
  178. <input type="text" class="form-control" name="q" id="q" placeholder="Search..." required>
  179. <span class="input-group-btn">
  180. <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
  181. </span>
  182. </div>
  183. </form>
  184. </div>
  185. <nav class="header-nav-top">
  186. <ul class="nav nav-pills">
  187. <li class="hidden-xs">
  188. <a href="about-us.html"><i class="fa fa-angle-right"></i> About Us</a>
  189. </li>
  190. <li class="hidden-xs">
  191. <a href="contact-us.html"><i class="fa fa-angle-right"></i> Contact Us</a>
  192. </li>
  193. <li>
  194. <span class="ws-nowrap"><i class="fa fa-phone"></i> (123) 456-789</span>
  195. </li>
  196. </ul>
  197. </nav>
  198. </div>
  199. <div class="header-row">
  200. <div class="header-nav">
  201. <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main">
  202. <i class="fa fa-bars"></i>
  203. </button>
  204. <ul class="header-social-icons social-icons hidden-xs">
  205. <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
  206. <li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
  207. <li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
  208. </ul>
  209. <div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
  210. <nav>
  211. <ul class="nav nav-pills" id="mainNav">
  212. <li class="dropdown">
  213. <a class="dropdown-toggle" href="index.html">
  214. Home
  215. </a>
  216. <ul class="dropdown-menu">
  217. <li>
  218. <a href="index.html">
  219. Landing Page
  220. </a>
  221. </li>
  222. <li class="dropdown-submenu">
  223. <a href="index-classic.html">Classic</a>
  224. <ul class="dropdown-menu">
  225. <li><a href="index-classic.html" data-thumb-preview="img/previews/preview-classic.jpg">Classic - Original</a></li>
  226. <li><a href="index-classic-color.html" data-thumb-preview="img/previews/preview-classic-color.jpg">Classic - Color</a></li>
  227. <li><a href="index-classic-light.html" data-thumb-preview="img/previews/preview-classic-light.jpg">Classic - Light</a></li>
  228. <li><a href="index-classic-video.html" data-thumb-preview="img/previews/preview-classic-video.jpg">Classic - Video</a></li>
  229. <li><a href="index-classic-video-light.html" data-thumb-preview="img/previews/preview-classic-video-light.jpg">Classic - Video - Light</a></li>
  230. </ul>
  231. </li>
  232. <li class="dropdown-submenu">
  233. <a href="index-corporate.html">Corporate <span class="tip tip-dark">hot</span></a>
  234. <ul class="dropdown-menu">
  235. <li><a href="index-corporate.html" data-thumb-preview="img/previews/preview-corporate.jpg">Corporate - Version 1</a></li>
  236. <li><a href="index-corporate-2.html" data-thumb-preview="img/previews/preview-corporate-version2.jpg">Corporate - Version 2</a></li>
  237. <li><a href="index-corporate-3.html" data-thumb-preview="img/previews/preview-corporate-version3.jpg">Corporate - Version 3</a></li>
  238. <li><a href="index-corporate-4.html" data-thumb-preview="img/previews/preview-corporate-version4.jpg">Corporate - Version 4</a></li>
  239. <li><a href="index-corporate-5.html" data-thumb-preview="img/previews/preview-corporate-version5.jpg">Corporate - Version 5</a></li>
  240. <li><a href="index-corporate-6.html" data-thumb-preview="img/previews/preview-corporate-version6.jpg">Corporate - Version 6</a></li>
  241. <li><a href="index-corporate-7.html" data-thumb-preview="img/previews/preview-corporate-version7.jpg">Corporate - Version 7</a></li>
  242. <li><a href="index-corporate-8.html" data-thumb-preview="img/previews/preview-corporate-version8.jpg">Corporate - Version 8</a></li>
  243. <li><a href="index-corporate-hosting.html" data-thumb-preview="img/previews/preview-corporate-hosting.jpg">Corporate - Hosting</a></li>
  244. </ul>
  245. </li>
  246. <li class="dropdown-submenu">
  247. <a href="#">One Page</a>
  248. <ul class="dropdown-menu">
  249. <li><a href="index-one-page.html" data-thumb-preview="img/previews/preview-one-page.jpg">One Page Original</a></li>
  250. </ul>
  251. </li>
  252. </ul>
  253. </li>
  254. <li class="">
  255. <a href="demos.html">
  256. Demos
  257. </a>
  258. </li>
  259. <li class="dropdown dropdown-mega">
  260. <a class="dropdown-toggle" href="#">
  261. Shortcodes
  262. </a>
  263. <ul class="dropdown-menu">
  264. <li>
  265. <div class="dropdown-mega-content">
  266. <div class="row">
  267. <div class="col-md-3">
  268. <span class="dropdown-mega-sub-title">Shortcodes 1</span>
  269. <ul class="dropdown-mega-sub-nav">
  270. <li><a href="shortcodes-accordions.html">Accordions</a></li>
  271. <li><a href="shortcodes-toggles.html">Toggles</a></li>
  272. <li><a href="shortcodes-tabs.html">Tabs</a></li>
  273. <li><a href="shortcodes-icons.html">Icons</a></li>
  274. <li><a href="shortcodes-icon-boxes.html">Icon Boxes</a></li>
  275. <li><a href="shortcodes-carousels.html">Carousels</a></li>
  276. <li><a href="shortcodes-modals.html">Modals</a></li>
  277. <li><a href="shortcodes-lightboxes.html">Lightboxes</a></li>
  278. </ul>
  279. </div>
  280. <div class="col-md-3">
  281. <span class="dropdown-mega-sub-title">Shortcodes 2</span>
  282. <ul class="dropdown-mega-sub-nav">
  283. <li><a href="shortcodes-buttons.html">Buttons</a></li>
  284. <li><a href="shortcodes-labels.html">Labels</a></li>
  285. <li><a href="shortcodes-lists.html">Lists</a></li>
  286. <li><a href="shortcodes-image-gallery.html">Image Gallery</a></li>
  287. <li><a href="shortcodes-image-frames.html">Image Frames</a></li>
  288. <li><a href="shortcodes-testimonials.html">Testimonials</a></li>
  289. <li><a href="shortcodes-blockquotes.html">Blockquotes</a></li>
  290. <li><a href="shortcodes-word-rotator.html">Word Rotator</a></li>
  291. </ul>
  292. </div>
  293. <div class="col-md-3">
  294. <span class="dropdown-mega-sub-title">Shortcodes 3</span>
  295. <ul class="dropdown-mega-sub-nav">
  296. <li><a href="shortcodes-call-to-action.html">Call to Action</a></li>
  297. <li><a href="shortcodes-pricing-tables.html">Pricing Tables</a></li>
  298. <li><a href="shortcodes-tables.html">Tables</a></li>
  299. <li><a href="shortcodes-progressbars.html">Progress Bars</a></li>
  300. <li><a href="shortcodes-counters.html">Counters</a></li>
  301. <li><a href="shortcodes-sections-parallax.html">Sections &amp; Parallax</a></li>
  302. <li><a href="shortcodes-tooltips-popovers.html">Tooltips &amp; Popovers</a></li>
  303. <li><a href="shortcodes-sticky-elements.html">Sticky Elements</a></li>
  304. </ul>
  305. </div>
  306. <div class="col-md-3">
  307. <span class="dropdown-mega-sub-title">Shortcodes 4</span>
  308. <ul class="dropdown-mega-sub-nav">
  309. <li><a href="shortcodes-headings.html">Headings</a></li>
  310. <li><a href="shortcodes-dividers.html">Dividers</a></li>
  311. <li><a href="shortcodes-animations.html">Animations</a></li>
  312. <li><a href="shortcodes-medias.html">Medias</a></li>
  313. <li><a href="shortcodes-maps.html">Maps</a></li>
  314. <li><a href="shortcodes-arrows.html">Arrows</a></li>
  315. <li><a href="shortcodes-alerts.html">Alerts</a></li>
  316. <li><a href="shortcodes-posts.html">Posts</a></li>
  317. </ul>
  318. </div>
  319. </div>
  320. </div>
  321. </li>
  322. </ul>
  323. </li>
  324. <li class="dropdown">
  325. <a class="dropdown-toggle" href="#">
  326. Features
  327. </a>
  328.  
  329. <ul class="dropdown-menu">
  330. <li class="dropdown-submenu">
  331. <a href="#">Headers</a>
  332. <ul class="dropdown-menu">
  333. <li class="dropdown-submenu">
  334. <a href="#">Default</a>
  335. <ul class="dropdown-menu">
  336. <li><a href="index-classic.html">Default</a></li>
  337. <li><a href="index-header-language-dropdown.html">Default + Language Dropdown</a></li>
  338. <li><a href="index-header-big-logo.html">Default + Big Logo</a></li>
  339. </ul>
  340. </li>
  341. <li class="dropdown-submenu">
  342. <a href="#">Flat</a>
  343. <ul class="dropdown-menu">
  344. <li><a href="index-header-flat.html">Flat</a></li>
  345. <li><a href="index-header-flat-top-bar.html">Flat + Top Bar</a></li>
  346. <li><a href="index-header-flat-colored-top-bar.html">Flat + Colored Top Bar</a></li>
  347. <li><a href="index-header-flat-top-bar-search.html">Flat + Top Bar with Search</a></li>
  348. </ul>
  349. </li>
  350. <li><a href="index-header-center.html">Center</a></li>
  351. <li><a href="index-header-below-slider.html">Below Slider</a></li>
  352. <li><a href="index-header-full-video.html">Full Video</a></li>
  353. <li><a href="index-header-narrow.html">Narrow</a></li>
  354. <li><a href="index-header-always-sticky.html">Always Sticky</a></li>
  355. <li class="dropdown-submenu">
  356. <a href="#">Transparent</a>
  357. <ul class="dropdown-menu">
  358. <li><a href="index-header-transparent.html">Transparent</a></li>
  359. <li><a href="index-header-transparent-bottom-border.html">Transparent - Bottom Border</a></li>
  360. <li><a href="index-header-semi-transparent.html">Semi Transparent</a></li>
  361. <li><a href="index-header-semi-transparent-light.html">Semi Transparent - Light</a></li>
  362. </ul>
  363. </li>
  364. <li><a href="index-header-full-width.html">Full-Width</a></li>
  365. <li class="dropdown-submenu">
  366. <a href="#">Navbar</a>
  367. <ul class="dropdown-menu">
  368. <li><a href="index-header-navbar.html">Navbar</a></li>
  369. <li><a href="index-header-navbar-extra-info.html">Navbar + Extra Info</a></li>
  370. </ul>
  371. </li>
  372. <li class="dropdown-submenu">
  373. <a href="#">Side Header</a>
  374. <ul class="dropdown-menu">
  375. <li><a href="index-header-side-header-left.html">Side Header Left</a></li>
  376. <li><a href="index-header-side-header-right.html">Side Header Right</a></li>
  377. <li><a href="index-header-side-header-semi-transparent.html">Side Header Semi Transparent</a></li>
  378. </ul>
  379. </li>
  380. <li><a href="index-header-signin.html">Sign In / Sign Up</a></li>
  381. <li><a href="index-header-logged.html">Logged</a></li>
  382. </ul>
  383. </li>
  384. <li class="dropdown-submenu">
  385. <a href="#">Navigations</a>
  386. <ul class="dropdown-menu">
  387. <li><a href="index-classic.html">Default</a></li>
  388. <li><a href="index-navigation-stripe.html">Stripe</a></li>
  389. <li><a href="index-navigation-top-line.html">Top Line</a></li>
  390. <li><a href="index-navigation-dark-dropdown.html">Dark Dropdown</a></li>
  391. <li><a href="index-navigation-colors.html">Colors</a></li>
  392. </ul>
  393. </li>
  394. <li class="dropdown-submenu">
  395. <a href="#">Footers</a>
  396. <ul class="dropdown-menu">
  397. <li><a href="index-classic.html#footer">Default</a></li>
  398. <li><a href="index-footer-advanced.html#footer">Advanced</a></li>
  399. <li><a href="index-footer-simple.html#footer">Simple</a></li>
  400. <li><a href="index-footer-light.html#footer">Light</a></li>
  401. <li><a href="index-footer-light-narrow.html#footer">Light Narrow</a></li>
  402. <li class="dropdown-submenu">
  403. <a href="#">Colors</a>
  404. <ul class="dropdown-menu">
  405. <li><a href="index-footer-color-primary.html#footer">Primary Color</a></li>
  406. <li><a href="index-footer-color-secondary.html#footer">Secondary Color</a></li>
  407. <li><a href="index-footer-color-tertiary.html#footer">Tertiary Color</a></li>
  408. <li><a href="index-footer-color-quaternary.html#footer">Quaternary Color</a></li>
  409. </ul>
  410. </li>
  411. <li><a href="index-footer-latest-work.html#footer">Latest Work</a></li>
  412. <li><a href="index-footer-contact-form.html#footer">Contact Form</a></li>
  413. </ul>
  414. </li>
  415. <li class="dropdown-submenu">
  416. <a href="#">Page Headers</a>
  417. <ul class="dropdown-menu">
  418. <li><a href="index-page-header-default.html">Default</a></li>
  419. <li class="dropdown-submenu">
  420. <a href="#">Colors</a>
  421. <ul class="dropdown-menu">
  422. <li><a href="index-page-header-color-primary.html">Primary Color</a></li>
  423. <li><a href="index-page-header-color-secondary.html">Secondary Color</a></li>
  424. <li><a href="index-page-header-color-tertiary.html">Tertiary Color</a></li>
  425. <li><a href="index-page-header-color-quaternary.html">Quaternary Color</a></li>
  426. </ul>
  427. </li>
  428. <li><a href="index-page-header-light.html">Light</a></li>
  429. <li><a href="index-page-header-light-reverse.html">Light - Reverse</a></li>
  430. <li><a href="index-page-header-custom-background.html">Custom Background</a></li>
  431. <li><a href="index-page-header-parallax.html">Parallax</a></li>
  432. <li><a href="index-page-header-center.html">Center</a></li>
  433. </ul>
  434. </li>
  435. <li class="dropdown-submenu">
  436. <a href="#">Admin Extension <span class="tip tip-dark">hot</span> <em class="not-included">(Not Included)</em></a>
  437. <ul class="dropdown-menu">
  438. <li><a href="feature-admin-forms-basic.html">Forms Basic</a></li>
  439. <li><a href="feature-admin-forms-advanced.html">Forms Advanced</a></li>
  440. <li><a href="feature-admin-forms-wizard.html">Forms Wizard</a></li>
  441. <li><a href="feature-admin-forms-code-editor.html">Code Editor</a></li>
  442. <li><a href="feature-admin-tables-advanced.html">Tables Advanced</a></li>
  443. <li><a href="feature-admin-tables-responsive.html">Tables Responsive</a></li>
  444. <li><a href="feature-admin-tables-editable.html">Tables Editable</a></li>
  445. <li><a href="feature-admin-tables-ajax.html">Tables Ajax</a></li>
  446. <li><a href="feature-admin-charts.html">Charts</a></li>
  447. </ul>
  448. </li>
  449. <li class="dropdown-submenu">
  450. <a href="#">Sliders</a>
  451. <ul class="dropdown-menu">
  452. <li><a href="index-classic.html">Revolution Slider</a></li>
  453. <li><a href="index-slider-nivo.html">Nivo Slider</a></li>
  454. </ul>
  455. </li>
  456. <li class="dropdown-submenu">
  457. <a href="#">Layout Options</a>
  458. <ul class="dropdown-menu">
  459. <li><a href="feature-layout-boxed.html">Boxed</a></li>
  460. <li><a href="feature-layout-dark.html">Dark</a></li>
  461. <li><a href="feature-layout-rtl.html">RTL</a></li>
  462. </ul>
  463. </li>
  464. <li class="dropdown-submenu">
  465. <a href="#">Extra</a>
  466. <ul class="dropdown-menu">
  467. <li><a href="feature-typography.html">Typography</a></li>
  468. <li><a href="feature-grid-system.html">Grid System</a></li>
  469. <li><a href="feature-page-loading.html">Page Loading</a></li>
  470. <li><a href="feature-lazy-load.html">Lazy Load</a></li>
  471. </ul>
  472. </li>
  473. </ul>
  474. </li>
  475. <li class="dropdown">
  476. <a class="dropdown-toggle" href="#">
  477. Pages
  478. </a>
  479. <ul class="dropdown-menu">
  480. <li class="dropdown-submenu">
  481. <a href="#">About Us</a>
  482. <ul class="dropdown-menu">
  483. <li><a href="about-us.html">About Us</a></li>
  484. <li><a href="about-us-basic.html">About Us - Basic</a></li>
  485. <li><a href="about-me.html">About Me</a></li>
  486. </ul>
  487. </li>
  488. <li class="dropdown-submenu">
  489. <a href="#">Shop</a>
  490. <ul class="dropdown-menu">
  491. <li><a href="shop-full-width.html">Shop - Full Width</a></li>
  492. <li><a href="shop-sidebar.html">Shop - Sidebar</a></li>
  493. <li><a href="shop-product-full-width.html">Shop - Product Full Width</a></li>
  494. <li><a href="shop-product-sidebar.html">Shop - Product Sidebar</a></li>
  495. <li><a href="shop-cart.html">Shop - Cart</a></li>
  496. <li><a href="shop-login.html">Shop - Login</a></li>
  497. <li><a href="shop-checkout.html">Shop - Checkout</a></li>
  498. </ul>
  499. </li>
  500. <li class="dropdown-submenu">
  501. <a href="#">Blog</a>
  502. <ul class="dropdown-menu">
  503. <li><a href="blog-full-width.html">Blog Full Width</a></li>
  504. <li><a href="blog-large-image.html">Blog Large Image</a></li>
  505. <li><a href="blog-medium-image.html">Blog Medium Image</a></li>
  506. <li><a href="blog-timeline.html">Blog Timeline</a></li>
  507. <li><a href="blog-post.html">Single Post</a></li>
  508. </ul>
  509. </li>
  510. <li class="dropdown-submenu">
  511. <a href="#">Layouts</a>
  512. <ul class="dropdown-menu">
  513. <li><a href="page-full-width.html">Full Width</a></li>
  514. <li><a href="page-left-sidebar.html">Left Sidebar</a></li>
  515. <li><a href="page-right-sidebar.html">Right Sidebar</a></li>
  516. <li><a href="page-left-and-right-sidebars.html">Left and Right Sidebars</a></li>
  517. <li><a href="page-sticky-sidebar.html">Sticky Sidebar</a></li>
  518. <li><a href="page-secondary-navbar.html">Secondary Navbar</a></li>
  519. </ul>
  520. </li>
  521. <li class="dropdown-submenu">
  522. <a href="#">Extra</a>
  523. <ul class="dropdown-menu">
  524. <li><a href="page-404.html">404 Error</a></li>
  525. <li><a href="page-coming-soon.html">Coming Soon</a></li>
  526. <li><a href="page-maintenance-mode.html">Maintenance Mode</a></li>
  527. <li><a href="sitemap.html">Sitemap</a></li>
  528. </ul>
  529. </li>
  530. <li><a href="page-custom-header.html">Custom Header</a></li>
  531. <li><a href="page-team.html">Team</a></li>
  532. <li><a href="page-services.html">Services</a></li>
  533. <li><a href="page-careers.html">Careers</a></li>
  534. <li><a href="page-our-office.html">Our Office</a></li>
  535. <li><a href="page-faq.html">FAQ</a></li>
  536. <li><a href="page-login.html">Login / Register</a></li>
  537. </ul>
  538. </li>
  539. <li class="dropdown">
  540. <a class="dropdown-toggle" href="#">
  541. Portfolio
  542. </a>
  543. <ul class="dropdown-menu">
  544. <li class="dropdown-submenu">
  545. <a href="#">Single Project</a>
  546. <ul class="dropdown-menu">
  547. <li><a href="portfolio-single-small-slider.html">Small Slider</a></li>
  548. <li><a href="portfolio-single-wide-slider.html">Wide Slider</a></li>
  549. <li><a href="portfolio-single-full-width-slider.html">Full Width Slider</a></li>
  550. <li><a href="portfolio-single-gallery.html">Gallery</a></li>
  551. <li><a href="portfolio-single-carousel.html">Carousel</a></li>
  552. <li><a href="portfolio-single-medias.html">Medias</a></li>
  553. <li><a href="portfolio-single-full-width-video.html">Full Width Video</a></li>
  554. <li><a href="portfolio-single-masonry-images.html">Masonry Images</a></li>
  555. <li><a href="portfolio-single-left-sidebar.html">Left Sidebar</a></li>
  556. <li><a href="portfolio-single-right-sidebar.html">Right Sidebar</a></li>
  557. <li><a href="portfolio-single-left-and-right-sidebars.html">Left and Right Sidebars</a></li>
  558. <li><a href="portfolio-single-sticky-sidebar.html">Sticky Sidebar</a></li>
  559. <li><a href="portfolio-single-extended.html">Extended</a></li>
  560. </ul>
  561. </li>
  562. <li class="dropdown-submenu">
  563. <a href="#">Grid Layouts</a>
  564. <ul class="dropdown-menu">
  565. <li><a href="portfolio-grid-1-column.html">1 Column</a></li>
  566. <li><a href="portfolio-grid-2-columns.html">2 Columns</a></li>
  567. <li><a href="portfolio-grid-3-columns.html">3 Columns</a></li>
  568. <li><a href="portfolio-grid-4-columns.html">4 Columns</a></li>
  569. <li><a href="portfolio-grid-5-columns.html">5 Columns</a></li>
  570. <li><a href="portfolio-grid-6-columns.html">6 Columns</a></li>
  571. <li><a href="portfolio-grid-no-margins.html">No Margins</a></li>
  572. <li><a href="portfolio-grid-full-width.html">Full Width</a></li>
  573. <li><a href="portfolio-grid-full-width-no-margins.html">Full Width No Margins</a></li>
  574. <li><a href="portfolio-grid-1-column-title-and-description.html">Title and Description</a></li>
  575. </ul>
  576. </li>
  577. <li class="dropdown-submenu">
  578. <a href="#">Masonry Layouts</a>
  579. <ul class="dropdown-menu">
  580. <li><a href="portfolio-masonry-2-columns.html">2 Columns</a></li>
  581. <li><a href="portfolio-masonry-3-columns.html">3 Columns</a></li>
  582. <li><a href="portfolio-masonry-4-columns.html">4 Columns</a></li>
  583. <li><a href="portfolio-masonry-5-columns.html">5 Columns</a></li>
  584. <li><a href="portfolio-masonry-6-columns.html">6 Columns</a></li>
  585. <li><a href="portfolio-masonry-no-margins.html">No Margins</a></li>
  586. <li><a href="portfolio-masonry-full-width.html">Full Width</a></li>
  587. </ul>
  588. </li>
  589. <li class="dropdown-submenu">
  590. <a href="#">Sidebar Layouts</a>
  591. <ul class="dropdown-menu">
  592. <li><a href="portfolio-sidebar-left.html">Left Sidebar</a></li>
  593. <li><a href="portfolio-sidebar-right.html">Right Sidebar</a></li>
  594. <li><a href="portfolio-sidebar-left-and-right.html">Left and Right Sidebars</a></li>
  595. <li><a href="portfolio-sidebar-sticky.html">Sticky Sidebar</a></li>
  596. </ul>
  597. </li>
  598. <li class="dropdown-submenu">
  599. <a href="#">Ajax</a>
  600. <ul class="dropdown-menu">
  601. <li><a href="portfolio-ajax-page.html">Ajax on Page</a></li>
  602. <li><a href="portfolio-ajax-modal.html">Ajax on Modal</a></li>
  603. </ul>
  604. </li>
  605. <li class="dropdown-submenu">
  606. <a href="#">Extra</a>
  607. <ul class="dropdown-menu">
  608. <li><a href="portfolio-extra-timeline.html">Timeline</a></li>
  609. <li><a href="portfolio-extra-lightbox.html">Lightbox</a></li>
  610. <li><a href="portfolio-extra-load-more.html">Load More</a></li>
  611. <li><a href="portfolio-extra-infinite-scroll.html">Infinite Scroll</a></li>
  612. <li><a href="portfolio-extra-pagination.html">Pagination</a></li>
  613. <li><a href="portfolio-extra-combination-filters.html">Combination Filters</a></li>
  614. </ul>
  615. </li>
  616. </ul>
  617. </li>
  618. <li class="dropdown active">
  619. <a class="dropdown-toggle" href="#">
  620. Contact Us
  621. </a>
  622. <ul class="dropdown-menu">
  623. <li><a href="contact-us.html">Contact Us - Basic</a></li>
  624. <li><a href="contact-us-advanced.php">Contact Us - Advanced</a></li>
  625. </ul>
  626. </li>
  627. </ul>
  628. </nav>
  629. </div>
  630. </div>
  631. </div>
  632. </div>
  633. </div>
  634. </div>
  635. </div>
  636. </header>
  637.  
  638. <div role="main" class="main">
  639.  
  640. <section class="page-header">
  641. <div class="container">
  642. <div class="row">
  643. <div class="col-md-12">
  644. <ul class="breadcrumb">
  645. <li><a href="#">Home</a></li>
  646. <li class="active">Contact Us</li>
  647. </ul>
  648. </div>
  649. </div>
  650. <div class="row">
  651. <div class="col-md-12">
  652. <h1>Contact Us Advanced</h1>
  653. </div>
  654. </div>
  655. </div>
  656. </section>
  657.  
  658. <!-- Google Maps - Go to the bottom of the page to change settings and map location. -->
  659. <div id="googlemaps" class="google-map"></div>
  660.  
  661. <div class="container">
  662.  
  663. <div class="row">
  664. <div class="col-md-6">
  665.  
  666. <div class="offset-anchor" id="contact-sent"></div>
  667.  
  668. <?php
  669. if (isset($arrResult)) {
  670. if($arrResult['response'] == 'success') {
  671. ?>
  672. <div class="alert alert-success" id="contactSuccess">
  673. <strong>Éxito!</strong> tu mensaje se envió con éxito, en breve te responderemos.
  674. </div>
  675. <?php
  676. } else if($arrResult['response'] == 'error') {
  677. ?>
  678. <div class="alert alert-danger" id="contactError">
  679. <strong>Error!</strong> There was an error sending your message.
  680. <span class="font-size-xs mt-sm display-block" id="mailErrorMessage"><?php echo $arrResult['errorMessage'];?></span>
  681. </div>
  682. <?php
  683. } else if($arrResult['response'] == 'captchaError') {
  684. ?>
  685. <div class="alert alert-danger" id="contactError">
  686. <strong>Error!</strong> Verification failed.
  687. </div>
  688. <?php
  689. }
  690. }
  691. ?>
  692.  
  693. <h2 class="mb-sm mt-sm"><strong>Contact</strong> Us</h2>
  694. <form id="contactFormAdvanced" action="<?php echo basename($_SERVER['PHP_SELF']); ?>#contact-sent" method="POST" enctype="multipart/form-data">
  695. <input type="hidden" value="true" name="emailSent" id="emailSent">
  696. <div class="row">
  697. <div class="form-group">
  698. <div class="col-md-6">
  699. <label>Your name *</label>
  700. <input type="text" value="" data-msg-required="Please enter your name." maxlength="100" class="form-control" name="name" id="name" required>
  701. </div>
  702. <div class="col-md-6">
  703. <label>Your email address *</label>
  704. <input type="email" value="" data-msg-required="Please enter your email address." data-msg-email="Please enter a valid email address." maxlength="100" class="form-control" name="email" id="email" required>
  705. </div>
  706. </div>
  707. </div>
  708. <div class="row">
  709. <div class="form-group">
  710. <div class="col-md-12">
  711. <label>Subject</label>
  712. <select data-msg-required="Please enter the subject." class="form-control" name="subject" id="subject" required>
  713. <option value="">...</option>
  714. <option value="Option 1">Option 1</option>
  715. <option value="Option 2">Option 2</option>
  716. <option value="Option 3">Option 3</option>
  717. <option value="Option 4">Option 4</option>
  718. </select>
  719. </div>
  720. </div>
  721. </div>
  722. <div class="row">
  723. <div class="form-group">
  724. <div class="col-md-6">
  725. <div class="row">
  726. <div class="col-md-12">
  727. <label>Checkboxes</label>
  728. </div>
  729. </div>
  730. <div class="row">
  731. <div class="col-md-12">
  732. <div class="checkbox-group" data-msg-required="Please select at least one option.">
  733. <label class="checkbox-inline">
  734. <input type="checkbox" name="checkboxes[]" id="inlineCheckbox1" value="option1"> 1
  735. </label>
  736. <label class="checkbox-inline">
  737. <input type="checkbox" name="checkboxes[]" id="inlineCheckbox2" value="option2"> 2
  738. </label>
  739. <label class="checkbox-inline">
  740. <input type="checkbox" name="checkboxes[]" id="inlineCheckbox3" value="option3"> 3
  741. </label>
  742. <label class="checkbox-inline">
  743. <input type="checkbox" name="checkboxes[]" id="inlineCheckbox4" value="option4"> 4
  744. </label>
  745. <label class="checkbox-inline">
  746. <input type="checkbox" name="checkboxes[]" id="inlineCheckbox5" value="option5"> 5
  747. </label>
  748. </div>
  749. </div>
  750. </div>
  751. </div>
  752. <div class="col-md-6">
  753. <div class="row">
  754. <div class="col-md-12">
  755. <label>Radios</label>
  756. </div>
  757. </div>
  758. <div class="row">
  759. <div class="col-md-12">
  760. <div class="radio-group" data-msg-required="Please select one option.">
  761. <label class="radio-inline">
  762. <input type="radio" name="radios" id="inlineRadio1" value="option1"> 1
  763. </label>
  764. <label class="radio-inline">
  765. <input type="radio" name="radios" id="inlineRadio2" value="option2"> 2
  766. </label>
  767. <label class="radio-inline">
  768. <input type="radio" name="radios" id="inlineRadio3" value="option3"> 3
  769. </label>
  770. <label class="radio-inline">
  771. <input type="radio" name="radios" id="inlineRadio4" value="option4"> 4
  772. </label>
  773. <label class="radio-inline">
  774. <input type="radio" name="radios" id="inlineRadio5" value="option5"> 5
  775. </label>
  776. </div>
  777. </div>
  778. </div>
  779. </div>
  780. </div>
  781. </div>
  782. <div class="row">
  783. <div class="form-group">
  784. <div class="col-md-12">
  785. <label>Attachment</label>
  786. <input type="file" name="attachment" id="attachment">
  787. </div>
  788. </div>
  789. </div>
  790. <div class="row">
  791. <div class="form-group">
  792. <div class="col-md-12">
  793. <label>Message *</label>
  794. <textarea maxlength="5000" data-msg-required="Please enter your message." rows="6" class="form-control" name="message" id="message" required></textarea>
  795. </div>
  796. </div>
  797. </div>
  798. <div class="row">
  799. <div class="col-md-12">
  800. <label>Human Verification *</label>
  801. </div>
  802. </div>
  803. <div class="row">
  804. <div class="form-group">
  805. <div class="col-md-4">
  806. <div class="captcha form-control">
  807. <div class="captcha-image">
  808. <?php
  809. $_SESSION['captcha'] = simple_php_captcha(array(
  810. 'min_length' => 6,
  811. 'max_length' => 6,
  812. 'min_font_size' => 22,
  813. 'max_font_size' => 22,
  814. 'angle_max' => 3
  815. ));
  816.  
  817. $_SESSION['captchaCode'] = $_SESSION['captcha']['code'];
  818.  
  819. echo '<img id="captcha-image" src="' . "php/simple-php-captcha/simple-php-captcha.php/" . $_SESSION['captcha']['image_src'] . '" alt="CAPTCHA code">';
  820. ?>
  821. </div>
  822. <div class="captcha-refresh">
  823. <a href="#" id="refreshCaptcha"><i class="fa fa-refresh"></i></a>
  824. </div>
  825. </div>
  826. </div>
  827. <div class="col-md-8">
  828. <input type="text" value="" maxlength="6" data-msg-captcha="Wrong verification code." data-msg-required="Please enter the verification code." placeholder="Type the verification code." class="form-control input-lg captcha-input" name="captcha" id="captcha" required>
  829. </div>
  830. </div>
  831. </div>
  832. <div class="row">
  833. <div class="col-md-12">
  834. <hr>
  835. </div>
  836. </div>
  837. <div class="row">
  838. <div class="col-md-12">
  839. <input type="submit" id="contactFormSubmit" value="Send Message" class="btn btn-primary btn-lg pull-right" data-loading-text="Loading...">
  840. </div>
  841. </div>
  842. </form>
  843. </div>
  844. <div class="col-md-6">
  845.  
  846. <h4 class="heading-primary mt-lg">Get in <strong>Touch</strong></h4>
  847. <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat urna arcu, vel molestie nunc commodo non. Nullam vestibulum odio vitae fermentum rutrum.</p>
  848.  
  849. <p>Mauris lobortis nulla ut aliquet interdum. Donec commodo ac elit sed placerat. Mauris rhoncus est ac sodales gravida. In eros felis, elementum aliquam nisi vel, pellentesque faucibus nulla.</p>
  850.  
  851. <hr>
  852.  
  853. <h4 class="heading-primary">The <strong>Office</strong></h4>
  854. <ul class="list list-icons list-icons-style-3 mt-xlg">
  855. <li><i class="fa fa-map-marker"></i> <strong>Address:</strong> 1234 Street Name, City Name, United States</li>
  856. <li><i class="fa fa-phone"></i> <strong>Phone:</strong> (123) 456-789</li>
  857. <li><i class="fa fa-envelope"></i> <strong>Email:</strong> <a href="mailto:mail@example.com">mail@example.com</a></li>
  858. </ul>
  859.  
  860. <div class="row lightbox mt-xl" data-plugin-options="{'delegate': 'a', 'type': 'image', 'gallery': {'enabled': true}}">
  861. <div class="col-md-4">
  862. <a class="img-thumbnail" href="img/office/our-office-1.jpg" data-plugin-options="{'type':'image'}">
  863. <img class="img-responsive" src="img/office/our-office-1.jpg" alt="Office">
  864. <span class="zoom">
  865. <i class="fa fa-search"></i>
  866. </span>
  867. </a>
  868. </div>
  869. <div class="col-md-4">
  870. <a class="img-thumbnail" href="img/office/our-office-2.jpg" data-plugin-options="{'type':'image'}">
  871. <img class="img-responsive" src="img/office/our-office-2.jpg" alt="Office">
  872. <span class="zoom">
  873. <i class="fa fa-search"></i>
  874. </span>
  875. </a>
  876. </div>
  877. <div class="col-md-4">
  878. <a class="img-thumbnail" href="img/office/our-office-3.jpg" data-plugin-options="{'type':'image'}">
  879. <img class="img-responsive" src="img/office/our-office-3.jpg" alt="Office">
  880. <span class="zoom">
  881. <i class="fa fa-search"></i>
  882. </span>
  883. </a>
  884. </div>
  885. </div>
  886.  
  887. <hr>
  888.  
  889. <h4 class="heading-primary">Business <strong>Hours</strong></h4>
  890. <ul class="list list-icons list-dark mt-xlg">
  891. <li><i class="fa fa-clock-o"></i> Monday - Friday - 9am to 5pm</li>
  892. <li><i class="fa fa-clock-o"></i> Saturday - 9am to 2pm</li>
  893. <li><i class="fa fa-clock-o"></i> Sunday - Closed</li>
  894. </ul>
  895.  
  896. </div>
  897. </div>
  898.  
  899. </div>
  900.  
  901. </div>
  902.  
  903. <footer id="footer">
  904. <div class="container">
  905. <div class="row">
  906. <div class="footer-ribbon">
  907. <span>Get in Touch</span>
  908. </div>
  909. <div class="col-md-3">
  910. <div class="newsletter">
  911. <h4>Newsletter</h4>
  912. <p>Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.</p>
  913.  
  914. <div class="alert alert-success hidden" id="newsletterSuccess">
  915. <strong>Success!</strong> You've been added to our email list.
  916. </div>
  917.  
  918. <div class="alert alert-danger hidden" id="newsletterError"></div>
  919.  
  920. <form id="newsletterForm" action="php/newsletter-subscribe.php" method="POST">
  921. <div class="input-group">
  922. <input class="form-control" placeholder="Email Address" name="newsletterEmail" id="newsletterEmail" type="text">
  923. <span class="input-group-btn">
  924. <button class="btn btn-default" type="submit">Go!</button>
  925. </span>
  926. </div>
  927. </form>
  928. </div>
  929. </div>
  930. <div class="col-md-3">
  931. <h4>Latest Tweets</h4>
  932. <div id="tweet" class="twitter" data-plugin-tweets data-plugin-options="{'username': '', 'count': 2}">
  933. <p>Please wait...</p>
  934. </div>
  935. </div>
  936. <div class="col-md-4">
  937. <div class="contact-details">
  938. <h4>Contact Us</h4>
  939. <ul class="contact">
  940. <li><p><i class="fa fa-map-marker"></i> <strong>Address:</strong> 1234 Street Name, City Name, United States</p></li>
  941. <li><p><i class="fa fa-phone"></i> <strong>Phone:</strong> (123) 456-789</p></li>
  942. <li><p><i class="fa fa-envelope"></i> <strong>Email:</strong> <a href="mailto:mail@example.com">mail@example.com</a></p></li>
  943. </ul>
  944. </div>
  945. </div>
  946. <div class="col-md-2">
  947. <h4>Follow Us</h4>
  948. <ul class="social-icons">
  949. <li class="social-icons-facebook"><a href="http://www.facebook.com/" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>
  950. <li class="social-icons-twitter"><a href="http://www.twitter.com/" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>
  951. <li class="social-icons-linkedin"><a href="http://www.linkedin.com/" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
  952. </ul>
  953. </div>
  954. </div>
  955. </div>
  956. <div class="footer-copyright">
  957. <div class="container">
  958. <div class="row">
  959. <div class="col-md-1">
  960. <a href="index.html" class="logo">
  961. <img alt="Porto Website Template" class="img-responsive" src="img/logo-footer.png">
  962. </a>
  963. </div>
  964. <div class="col-md-7">
  965. <p>© Copyright 2017. All Rights Reserved.</p>
  966. </div>
  967. <div class="col-md-4">
  968. <nav id="sub-menu">
  969. <ul>
  970. <li><a href="page-faq.html">FAQ's</a></li>
  971. <li><a href="sitemap.html">Sitemap</a></li>
  972. <li><a href="contact-us.html">Contact</a></li>
  973. </ul>
  974. </nav>
  975. </div>
  976. </div>
  977. </div>
  978. </div>
  979. </footer>
  980. </div>
  981.  
  982. <!-- Vendor -->
  983. <script src="vendor/jquery/jquery.min.js"></script>
  984. <script src="vendor/jquery.appear/jquery.appear.min.js"></script>
  985. <script src="vendor/jquery.easing/jquery.easing.min.js"></script>
  986. <script src="vendor/jquery-cookie/jquery-cookie.min.js"></script>
  987. <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  988. <script src="vendor/common/common.min.js"></script>
  989. <script src="vendor/jquery.validation/jquery.validation.min.js"></script>
  990. <script src="vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.min.js"></script>
  991. <script src="vendor/jquery.gmap/jquery.gmap.min.js"></script>
  992. <script src="vendor/jquery.lazyload/jquery.lazyload.min.js"></script>
  993. <script src="vendor/isotope/jquery.isotope.min.js"></script>
  994. <script src="vendor/owl.carousel/owl.carousel.min.js"></script>
  995. <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
  996. <script src="vendor/vide/vide.min.js"></script>
  997.  
  998. <!-- Theme Base, Components and Settings -->
  999. <script src="js/theme.js"></script>
  1000.  
  1001. <!-- Current Page Vendor and Views -->
  1002. <script src="js/views/view.contact.js"></script>
  1003.  
  1004. <!-- Theme Custom -->
  1005. <script src="js/custom.js"></script>
  1006.  
  1007. <!-- Theme Initialization Files -->
  1008. <script src="js/theme.init.js"></script>
  1009.  
  1010. <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  1011. <script>
  1012.  
  1013. /*
  1014. Map Settings
  1015.  
  1016. Find the Latitude and Longitude of your address:
  1017. - http://universimmedia.pagesperso-orange.fr/geo/loc.htm
  1018. - http://www.findlatitudeandlongitude.com/find-address-from-latitude-and-longitude/
  1019.  
  1020. */
  1021.  
  1022. // Map Markers
  1023. var mapMarkers = [{
  1024. address: "217 Summit Boulevard, Birmingham, AL 35243",
  1025. html: "<strong>Alabama Office</strong><br>217 Summit Boulevard, Birmingham, AL 35243<br><br><a href='#' onclick='mapCenterAt({latitude: 33.44792, longitude: -86.72963, zoom: 16}, event)'>[+] zoom here</a>",
  1026. icon: {
  1027. image: "img/pin.png",
  1028. iconsize: [26, 46],
  1029. iconanchor: [12, 46]
  1030. }
  1031. },{
  1032. address: "645 E. Shaw Avenue, Fresno, CA 93710",
  1033. html: "<strong>California Office</strong><br>645 E. Shaw Avenue, Fresno, CA 93710<br><br><a href='#' onclick='mapCenterAt({latitude: 36.80948, longitude: -119.77598, zoom: 16}, event)'>[+] zoom here</a>",
  1034. icon: {
  1035. image: "img/pin.png",
  1036. iconsize: [26, 46],
  1037. iconanchor: [12, 46]
  1038. }
  1039. },{
  1040. address: "New York, NY 10017",
  1041. html: "<strong>New York Office</strong><br>New York, NY 10017<br><br><a href='#' onclick='mapCenterAt({latitude: 40.75198, longitude: -73.96978, zoom: 16}, event)'>[+] zoom here</a>",
  1042. icon: {
  1043. image: "img/pin.png",
  1044. iconsize: [26, 46],
  1045. iconanchor: [12, 46]
  1046. }
  1047. }];
  1048.  
  1049. // Map Initial Location
  1050. var initLatitude = 37.09024;
  1051. var initLongitude = -95.71289;
  1052.  
  1053. // Map Extended Settings
  1054. var mapSettings = {
  1055. controls: {
  1056. panControl: true,
  1057. zoomControl: true,
  1058. mapTypeControl: true,
  1059. scaleControl: true,
  1060. streetViewControl: true,
  1061. overviewMapControl: true
  1062. },
  1063. scrollwheel: false,
  1064. markers: mapMarkers,
  1065. latitude: initLatitude,
  1066. longitude: initLongitude,
  1067. zoom: 5
  1068. };
  1069.  
  1070. var map = $('#googlemaps').gMap(mapSettings),
  1071. mapRef = $('#googlemaps').data('gMap.reference');
  1072.  
  1073. // Map Center At
  1074. var mapCenterAt = function(options, e) {
  1075. e.preventDefault();
  1076. $('#googlemaps').gMap("centerAt", options);
  1077. }
  1078.  
  1079. // Styles from https://snazzymaps.com/
  1080. var styles = [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}];
  1081.  
  1082. var styledMap = new google.maps.StyledMapType(styles, {
  1083. name: 'Styled Map'
  1084. });
  1085.  
  1086. mapRef.mapTypes.set('map_style', styledMap);
  1087. mapRef.setMapTypeId('map_style');
  1088.  
  1089. </script>
  1090.  
  1091. <!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information.
  1092. <script>
  1093. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  1094. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  1095. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  1096. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  1097.  
  1098. ga('create', 'UA-12345678-1', 'auto');
  1099. ga('send', 'pageview');
  1100. </script>
  1101. -->
  1102.  
  1103. </body>
  1104. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!