API tools faq
paste
Advertisement
Brianfantana1992

Quote.html

Brianfantana1992
Jul 8th, 2024
102
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Quote</title>
  7. <meta content="width=device-width, initial-scale=1.0" name="viewport">
  8. <meta content="" name="keywords">
  9. <meta content="" name="description">
  10.  
  11. <!-- Favicon -->
  12. <link href="img/favicon.ico" rel="icon">
  13.  
  14. <!-- Google Web Fonts -->
  15. <link rel="preconnect" href="https://fonts.googleapis.com">
  16. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  17. <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&family=Roboto:wght@500;700;900&display=swap" rel="stylesheet">
  18.  
  19. <!-- Icon Font Stylesheet -->
  20. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
  21. <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
  22.  
  23. <!-- Libraries Stylesheet -->
  24. <link href="lib/animate/animate.min.css" rel="stylesheet">
  25. <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  26. <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
  27.  
  28. <!-- Customized Bootstrap Stylesheet -->
  29. <link href="css/bootstrap.min.css" rel="stylesheet">
  30.  
  31. <!-- Template Stylesheet -->
  32. <link href="css/style.css" rel="stylesheet">
  33.  
  34. <!-- jQuery (included in the head for the purpose of this example) -->
  35. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  36. <!-- Bootstrap Bundle (includes Popper) -->
  37. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  38. </head>
  39.  
  40. <body>
  41. <div class="container-fluid bg-light overflow-hidden px-lg-0" style="margin: 6rem 0;">
  42. <div class="container quote px-lg-0">
  43. <div class="row g-0 mx-lg-0">
  44. <div class="col-lg-6 ps-lg-0" style="min-height: 600px;">
  45. <div class="position-relative h-100">
  46. <img class="position-absolute img-fluid w-70 h-50" src="img/solar.jpg" style="object-fit: auto;" alt="">
  47. </div>
  48. </div>
  49. <div class="col-lg-6 quote-text py-5 wow fadeIn" data-wow-delay="0.5s">
  50. <div class="p-lg-5 pe-lg-0">
  51. <div class="section-title text-start">
  52. <h1 class="display-5 mb-4">No Obligation Quote</h1>
  53. </div>
  54. <form id="contactForm" method="POST" enctype="multipart/form-data" action="https://formsubmit.co/[email protected]">
  55. <input type="hidden" name="_captcha" value="false">
  56. <input type="file" id="kmlFile" name="attachment" accept=".kml,.kmz" onchange="handleFile(this)">
  57. <input type="hidden" id="kml-output" name="kml-output">
  58. <div class="row g-3">
  59. <div class="col-12 col-sm-6">
  60. <input type="text" name="name" class="form-control border-0" placeholder="Your Name" style="height: 55px;">
  61. </div>
  62. <div class="col-12 col-sm-6">
  63. <input type="email" name="email" class="form-control border-0" placeholder="Your Email" style="height: 55px;">
  64. </div>
  65. <div class="col-12 col-sm-6">
  66. <input type="tel" name="number" class="form-control border-0" placeholder="Your Mobile" style="height: 55px;">
  67. </div>
  68. <div class="col-12 col-sm-6">
  69. <select class="form-select border-0" name="enquiry_type" style="height: 55px;">
  70. <option value="1">General Enquiry</option>
  71. <option value="2">Desktop CAD Drawings</option>
  72. </select>
  73. </div>
  74. <div class="col-12">
  75. <textarea name="text" class="form-control border-0" placeholder="Text"></textarea>
  76. </div>
  77. </div>
  78. <button type="submit">Submit</button>
  79. </form>
  80. <div id="successModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
  81. <div class="modal-dialog" role="document">
  82. <div class="modal-content">
  83. <div class="modal-header">
  84. <h5 class="modal-title" id="successModalLabel">Submission Successful</h5>
  85. <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
  86. <span aria-hidden="true">&times;</span>
  87. </button>
  88. </div>
  89. <div class="modal-body">
  90. Your message has been sent successfully!
  91. </div>
  92. <div class="modal-footer">
  93. <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. <div id="loading" style="display:none;">Loading...</div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104.  
  105. <!-- Google Map -->
  106. <div id="map" style="height: 400px; width: 100%;"></div>
  107. <div>
  108. <input id="search-input" type="text" placeholder="Search location">
  109. <button onclick="search()">Search</button>
  110. </div>
  111.  
  112. <script>
  113. document.addEventListener('DOMContentLoaded', function () {
  114. var loading = document.getElementById('loading');
  115. var contactForm = document.getElementById('contactForm');
  116. var successModal = new bootstrap.Modal(document.getElementById('successModal'));
  117.  
  118. contactForm.addEventListener('submit', function (event) {
  119. event.preventDefault();
  120.  
  121. // Extract and append KML data to the form
  122. let kmlData = generateKML(allShapes);
  123. let kmlBlob = new Blob([kmlData], { type: 'application/vnd.google-earth.kml+xml' });
  124. let kmlFile = new File([kmlBlob], "shapes.kml");
  125. let formData = new FormData(contactForm);
  126. formData.append('attachment', kmlFile);
  127.  
  128. loading.style.display = 'block';
  129.  
  130. fetch(contactForm.action, {
  131. method: 'POST',
  132. body: formData,
  133. })
  134. .then(response => {
  135. if (!response.ok) {
  136. throw new Error('Network response was not ok');
  137. }
  138. return response.json();
  139. })
  140. .then(data => {
  141. console.log('Success:', data);
  142. loading.style.display = 'none';
  143. successModal.show();
  144. })
  145. .catch(error => {
  146. console.error('Error:', error);
  147. loading.style.display = 'none';
  148. alert('Submission failed. Please try again.');
  149. });
  150. });
  151. });
  152.  
  153. // Function to handle KML file
  154. function handleFile(input) {
  155. var file = input.files[0];
  156. var reader = new FileReader();
  157. reader.onload = function (e) {
  158. document.getElementById('kml-output').value = e.target.result;
  159. };
  160. reader.readAsText(file);
  161. }
  162.  
  163. let map, drawingManager, allShapes = [];
  164.  
  165. function initMap() {
  166. map = new google.maps.Map(document.getElementById('map'), {
  167. center: { lat: 51.505, lng: -0.09 },
  168. zoom: 13
  169. });
  170.  
  171. drawingManager = new google.maps.drawing.DrawingManager({
  172. drawingMode: null,
  173. drawingControl: true,
  174. drawingControlOptions: {
  175. position: google.maps.ControlPosition.TOP_CENTER,
  176. drawingModes: ['marker', 'polyline', 'polygon']
  177. },
  178. markerOptions: {
  179. editable: true,
  180. draggable: true
  181. },
  182. polylineOptions: {
  183. editable: true,
  184. draggable: true
  185. },
  186. polygonOptions: {
  187. editable: true,
  188. draggable: true
  189. }
  190. });
  191. drawingManager.setMap(map);
  192.  
  193. google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
  194. allShapes.push(event.overlay);
  195. });
  196. }
  197.  
  198. function search() {
  199. var input = document.getElementById('search-input').value;
  200. var coordinates = input.split(',');
  201. if (coordinates.length === 2) {
  202. var easting = parseFloat(coordinates[0]);
  203. var northing = parseFloat(coordinates[1]);
  204. if (!isNaN(easting) && !isNaN(northing)) {
  205. var location = OSGridToLatLng(easting, northing);
  206. map.setCenter(location);
  207. map.setZoom(13);
  208. } else {
  209. alert('Invalid eastings and northings. Please enter valid numbers.');
  210. }
  211. } else {
  212. alert('Invalid input. Please enter coordinates as "easting,northing".');
  213. }
  214. }
  215.  
  216. function OSGridToLatLng(easting, northing) {
  217. var latLng = OsGridRef.osGridToLatLng(new OsGridRef(easting, northing));
  218. return new google.maps.LatLng(latLng.lat, latLng.lng);
  219. }
  220.  
  221. function generateKML(shapes) {
  222. var kml = '<?xml version="1.0" encoding="UTF-8"?>\n' +
  223. '<kml xmlns="http://www.opengis.net/kml/2.2">\n' +
  224. '<Document>\n';
  225. shapes.forEach(function (shape, index) {
  226. if (shape.type === 'marker') {
  227. var position = shape.getPosition();
  228. kml += '<Placemark>\n' +
  229. '<name>Marker ' + (index + 1) + '</name>\n' +
  230. '<Point>\n' +
  231. '<coordinates>' + position.lng() + ',' + position.lat() + ',0</coordinates>\n' +
  232. '</Point>\n' +
  233. '</Placemark>\n';
  234. } else if (shape.type === 'polyline') {
  235. var path = shape.getPath();
  236. kml += '<Placemark>\n' +
  237. '<name>Polyline ' + (index + 1) + '</name>\n' +
  238. '<LineString>\n' +
  239. '<tessellate>1</tessellate>\n' +
  240. '<coordinates>\n';
  241. path.forEach(function (latLng) {
  242. kml += latLng.lng() + ',' + latLng.lat() + ',0\n';
  243. });
  244. kml += '</coordinates>\n' +
  245. '</LineString>\n' +
  246. '</Placemark>\n';
  247. } else if (shape.type === 'polygon') {
  248. var paths = shape.getPaths();
  249. kml += '<Placemark>\n' +
  250. '<name>Polygon ' + (index + 1) + '</name>\n' +
  251. '<Polygon>\n' +
  252. '<outerBoundaryIs>\n' +
  253. '<LinearRing>\n' +
  254. '<coordinates>\n';
  255. paths.getAt(0).forEach(function (latLng) {
  256. kml += latLng.lng() + ',' + latLng.lat() + ',0\n';
  257. });
  258. kml += '</coordinates>\n' +
  259. '</LinearRing>\n' +
  260. '</outerBoundaryIs>\n' +
  261. '</Polygon>\n' +
  262. '</Placemark>\n';
  263. }
  264. });
  265. kml += '</Document>\n' +
  266. '</kml>';
  267. return kml;
  268. }
  269. function handleFile(input) {
  270. const file = input.files[0];
  271. const reader = new FileReader();
  272.  
  273. reader.onload = function(event) {
  274. const fileContent = event.target.result;
  275. displayKml(fileContent);
  276. };
  277.  
  278. reader.readAsText(file);
  279. }
  280.  
  281. function displayKml(kmlContent) {
  282. const parser = new DOMParser();
  283. const kmlDocument = parser.parseFromString(kmlContent, 'text/xml');
  284.  
  285. const kmlLayer = new google.maps.KmlLayer({
  286. url: URL.createObjectURL(new Blob([kmlContent], { type: 'application/vnd.google-earth.kml+xml' })),
  287. map: map
  288. });
  289.  
  290. kmlLayer.addListener('click', function(event) {
  291. const feature = event.featureData;
  292. if (feature) {
  293. console.log('Clicked on feature:', feature);
  294. alert('Clicked on feature: ' + feature.name);
  295. }
  296. });
  297.  
  298. const bounds = new google.maps.LatLngBounds();
  299. const markers = [];
  300. const placemarks = kmlDocument.getElementsByTagName('Placemark');
  301. for (let i = 0; i < placemarks.length; i++) {
  302. const placemark = placemarks[i];
  303. const pointElement = placemark.getElementsByTagName('Point')[0];
  304. if (pointElement) {
  305. const coordinates = pointElement.getElementsByTagName('coordinates')[0].textContent;
  306. const [lng, lat] = coordinates.split(',');
  307. const marker = new google.maps.Marker({
  308. position: { lat: parseFloat(lat), lng: parseFloat(lng) },
  309. map: map,
  310. title: placemark.getElementsByTagName('name')[0].textContent
  311. });
  312. markers.push(marker);
  313. bounds.extend(marker.getPosition());
  314. }
  315. }
  316.  
  317. if (markers.length > 0) {
  318. map.fitBounds(bounds);
  319. }
  320. }
  321.  
  322. function exportShapes() {
  323. let kml = '<?xml version="1.0" encoding="UTF-8"?>';
  324. kml += '<kml xmlns="http://www.opengis.net/kml/2.2"><Document>';
  325.  
  326. allShapes.forEach(shape => {
  327. if (shape instanceof google.maps.Marker) {
  328. const position = shape.getPosition();
  329. kml += `<Placemark><Point><coordinates>${position.lng()},${position.lat()}</coordinates></Point></Placemark>`;
  330. } else if (shape instanceof google.maps.Polygon) {
  331. kml += '<Placemark><Polygon><outerBoundaryIs><LinearRing><coordinates>';
  332. const path = shape.getPath();
  333. path.forEach(coord => {
  334. kml += `${coord.lng()},${coord.lat()},0 `;
  335. });
  336. kml += '</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark>';
  337. }
  338. // Add handling for other shape types (circle, polyline, etc.)
  339. });
  340.  
  341. kml += '</Document></kml>';
  342.  
  343. return new Blob([kml], { type: 'application/vnd.google-earth.kml+xml' });
  344. }
  345.  
  346. addEventListener('submit', function(event) {
  347. event.preventDefault();
  348.  
  349. const kmlBlob = exportShapes();
  350. const formData = new FormData(event.target);
  351. formData.append('attachment', kmlBlob, 'shapes.kml');
  352.  
  353. fetch(event.target.action, {
  354. method: 'POST',
  355. body: formData,
  356. })
  357. .then(response => {
  358. if (!response.ok) {
  359. throw new Error('Network response was not ok');
  360. }
  361. return response.json();
  362. })
  363.  
  364.  
  365. document.getElementById('loading').style.display = 'block'; // Show loading indicator
  366. });
  367.  
  368.  
  369.  
  370. ;
  371. </script>
  372.  
  373. <!-- Google Maps API -->
  374. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBt8ik-Jg8bTJCC-CaeHXrOfMPcRrdqEjk&libraries=drawing&callback=initMap" async defer></script>
  375.  
  376. <!-- Additional script files -->
  377. <script src="lib/wow/wow.min.js"></script>
  378. <script src="lib/easing/easing.min.js"></script>
  379. <script src="lib/waypoints/waypoints.min.js"></script>
  380. <script src="lib/owlcarousel/owl.carousel.min.js"></script>
  381. <script src="lib/counterup/counterup.min.js"></script>
  382. <script src="lib/parallax/parallax.min.js"></script>
  383. <script src="lib/isotope/isotope.pkgd.min.js"></script>
  384. <script src="lib/lightbox/js/lightbox.min.js"></script>
  385. <script src="js/main.js"></script>
  386. </body>
  387.  
  388. </html>
  389.  
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!