Delivery Input Form<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0 3rem;\n line-height: 1.5;\n overflow-x: hidden;\n }\n form {\n max-width: 100%;\n width: 100%;\n margin: 0 auto;\n padding: 15px;\n box-sizing: border-box;\n }\n label {\n font-weight: bold;\n }\n input, textarea, select, button, canvas, video {\n width: 100%;\n padding: 8px;\n margin: 8px 0;\n border-radius: 4px;\n border: 1px solid #ccc;\n box-sizing: border-box;\n }\n button {\n background-color: #007BFF;\n color: white;\n font-weight: bold;\n cursor: pointer;\n border: none;\n }\n button:hover {\n background-color: #0056b3;\n }\n canvas, video {\n width: 100%;\n height: auto;\n display: block;\n margin: 0 auto;\n border: 1px solid #ccc;\n box-sizing: border-box;\n }\n #signature {\n cursor: crosshair;\n }\n h2 {\n text-align: center;\n font-size: 2rem;\n margin: 20px 0;\n }\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n form {\n padding: 15px;\n }\n button {\n padding: 10px;\n }\n }\n @media (max-width: 480px) {\n body {\n padding: 0rem;\n }\n form {\n padding: 10px;\n }\n label, input, textarea, select, button, canvas, video {\n font-size: 14px;\n }\n }\n #custom-alert, #preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s, opacity 0.2s;\n }\n #custom-alert.active, #preview-modal.active {\n visibility: visible;\n opacity: 1;\n }\n #custom-alert-content, #preview-modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n max-width: 90%;\n max-height: 90%;\n overflow: auto;\n }\n #custom-alert button, #preview-modal button {\n margin: 10px;\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n #custom-alert button {\n background-color: #007BFF;\n color: white;\n }\n #custom-alert button:hover {\n background-color: #0056b3;\n }\n #custom-alert .retry-btn {\n background-color: #28a745;\n color: white;\n }\n #custom-alert .retry-btn:hover {\n background-color: #218838;\n }\n #custom-alert .help-btn {\n background-color: #ffc107;\n color: black;\n }\n #custom-alert .help-btn:hover {\n background-color: #e0a800;\n }\n #preview-modal img {\n max-width: 100%;\n max-height: 50vh;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n #preview-modal .confirm-btn {\n background-color: #28a745;\n color: white;\n }\n #preview-modal .confirm-btn:hover {\n background-color: #218838;\n }\n #preview-modal .cancel-btn {\n background-color: #dc3545;\n color: white;\n }\n #preview-modal .cancel-btn:hover {\n background-color: #c82333;\n }\n #capture-photo.capturing {\n background-color: #28a745;\n transition: background-color 0.2s;\n }\n .button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n <\/style>\n <\/head>\n <body>\n <form method=\"POST\"> \n <label for=\"courier-name\">Courier Name:<\/label>\n <select id=\"courier-name\" name=\"courier-name\" required>\n <option value=\"\">Select..<\/option>\n <option value=\"Ronnie_224\">Ronnie_224<\/option>\n <option value=\"Keith_xxx\">Keith_xxx<\/option>\n <option value=\"Jordan\">Jordan<\/option>\n <option value=\"Custom\">Custom…<\/option>\n <\/select>\n\n <input type=\"text\" id=\"custom-name\" name=\"custom-name\" placeholder=\"Enter name (if 'Custom')\" style=\"display:none;\" oninput=\"document.getElementById('courier-name').value='Custom';\">\n\n <label for=\"location\">Select Locations:<\/label>\n <select id=\"location\" name=\"location\">\n <option value=\"\">Select..<\/option>\n <\/select>\n \n <label for=\"num-bags\"># of Bags:<\/label>\n <input type=\"number\" id=\"num-bags\" name=\"num-bags\" inputmode=\"numeric\" placeholder=\"Enter number of bags\" required>\n\n <label for=\"num-envelopes\"># of Envelopes:<\/label>\n <input type=\"number\" id=\"num-envelopes\" name=\"num-envelopes\" inputmode=\"numeric\" placeholder=\"Enter number of envelopes\" required>\n\n <label for=\"num-slides\"># of Slides:<\/label>\n <input type=\"number\" id=\"num-slides\" name=\"num-slides\" inputmode=\"numeric\" placeholder=\"Enter number of slides\">\n\n <label for=\"misc\">Misc:<\/label>\n <textarea id=\"misc\" name=\"misc\" placeholder=\"Enter additional details\"><\/textarea>\n\n <label for=\"custom-fname\">First Name:<\/label>\n <input type=\"text\" id=\"custom-fname\" name=\"custom-fname\" placeholder=\"Enter first name\">\n\n <label id=\"capture-label\">Delivery Signature:<\/label>\n <canvas id=\"signature\" style=\"display: block;\"><\/canvas>\n <video id=\"camera\" autoplay style=\"display: none;\"><\/video>\n <canvas id=\"photo\" style=\"display: none;\"><\/canvas>\n <div class=\"button-group\">\n <button type=\"button\" id=\"toggle-capture\">Switch to Camera<\/button>\n <button type=\"button\" id=\"capture-photo\" onclick=\"capturePhoto()\" style=\"display: none;\">Capture Photo<\/button>\n <button type=\"button\" id=\"retake-photo\" onclick=\"retakePhoto()\" style=\"display: none;\">Retake Photo<\/button>\n <button type=\"button\" id=\"clear-capture\" onclick=\"clearCapture()\">Clear<\/button>\n <\/div>\n\n <label for=\"datetime\">Time and Date:<\/label>\n <input type=\"datetime-local\" id=\"datetime\" name=\"datetime\" value=\"\">\n\n <button type=\"submit\" id=\"submit-btn\" style=\"position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; height: 40px;\">\n <span id=\"loading-spinner\" style=\"display: none; flex-shrink: 0;\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\" width=\"20\" height=\"20\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"#fff\" stroke-width=\"4\" fill=\"none\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\">\n <animate attributeName=\"stroke-dashoffset\" from=\"188.4\" to=\"0\" dur=\"1s\" repeatCount=\"indefinite\"\/>\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 50 50\" to=\"360 50 50\" dur=\"1s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <\/svg>\n <\/span>\n <span id=\"submit-text\">\n Submit\n <\/span>\n <\/button>\n <\/form>\n\n <div id=\"custom-alert\">\n <div id=\"custom-alert-content\">\n <p id=\"custom-alert-message\"><\/p>\n <div class=\"button-group\" id=\"custom-alert-buttons\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"preview-modal\">\n <div id=\"preview-modal-content\">\n <p id=\"preview-modal-message\"><\/p>\n <img decoding=\"async\" id=\"preview-image\" src=\"\" alt=\"Preview\">\n <div class=\"button-group\">\n <button class=\"confirm-btn\" onclick=\"confirmSubmission()\">Confirm<\/button>\n <button class=\"cancel-btn\" onclick=\"cancelSubmission()\">Cancel<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n console.log(\"DOM fully loaded, initializing script...\");\n\n const canvas = document.getElementById(\"signature\");\n const ctx = canvas.getContext(\"2d\");\n const video = document.getElementById(\"camera\");\n const photoCanvas = document.getElementById(\"photo\");\n const photoCtx = photoCanvas.getContext(\"2d\");\n let drawing = false;\n let isCameraMode = false;\n let stream = null;\n let formDataToSubmit = null;\n let retryCount = 0;\n const maxRetries = 3;\n\n function resizeCanvas() {\n const rect = canvas.getBoundingClientRect();\n canvas.width = rect.width;\n photoCanvas.width = rect.width;\n if (window.innerWidth <= 480) {\n canvas.height = 150;\n photoCanvas.height = 150;\n video.style.height = '150px';\n } else {\n canvas.height = 250;\n photoCanvas.height = 250;\n video.style.height = '250px';\n }\n }\n\n resizeCanvas();\n window.addEventListener(\"resize\", resizeCanvas);\n\n document.getElementById(\"datetime\").value = new Date().toISOString().slice(0, 16);\n\n canvas.addEventListener(\"mousedown\", (event) => {\n if (!isCameraMode) {\n drawing = true;\n ctx.beginPath();\n ctx.moveTo(getCursorPosition(event).x, getCursorPosition(event).y);\n }\n });\n\n canvas.addEventListener(\"mouseup\", () => drawing = false);\n canvas.addEventListener(\"mouseleave\", () => drawing = false);\n canvas.addEventListener(\"mousemove\", (event) => {\n if (drawing && !isCameraMode) {\n const pos = getCursorPosition(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n });\n\n canvas.addEventListener(\"touchstart\", (event) => {\n if (!isCameraMode) {\n event.preventDefault();\n drawing = true;\n const pos = getTouchPosition(event);\n ctx.beginPath();\n ctx.moveTo(pos.x, pos.y);\n }\n }, { passive: false });\n\n canvas.addEventListener(\"touchend\", (event) => {\n if (!isCameraMode) {\n event.preventDefault();\n drawing = false;\n }\n }, { passive: false });\n\n canvas.addEventListener(\"touchmove\", (event) => {\n if (drawing && !isCameraMode) {\n event.preventDefault();\n const pos = getTouchPosition(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n }, { passive: false });\n\n function getCursorPosition(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY\n };\n }\n\n function getTouchPosition(event) {\n const rect = canvas.getBoundingClientRect();\n const touch = event.touches[0];\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n return {\n x: (touch.clientX - rect.left) * scaleX,\n y: (touch.clientY - rect.top) * scaleY\n };\n }\n\n async function checkCameraAvailability() {\n console.log(\"Checking available cameras...\");\n try {\n const devices = await navigator.mediaDevices.enumerateDevices();\n const videoDevices = devices.filter(device => device.kind === \"videoinput\");\n console.log(\"Found video devices:\", videoDevices);\n return videoDevices.length > 0;\n } catch (err) {\n console.error(\"Error enumerating devices:\", err);\n return false;\n }\n }\n\n async function checkCameraPermission() {\n try {\n const permission = await navigator.permissions.query({ name: \"camera\" });\n console.log(\"Camera permission state:\", permission.state);\n return permission.state === \"granted\" || permission.state === \"prompt\";\n } catch (err) {\n console.error(\"Error checking camera permission:\", err);\n return true;\n }\n }\n\n async function initializeCamera() {\n console.log(\"Attempting to initialize camera... Retry attempt:\", retryCount + 1);\n try {\n if (location.protocol !== \"https:\" && location.hostname !== \"localhost\") {\n throw new Error(\"Camera access requires HTTPS or localhost.\");\n }\n const hasCamera = await checkCameraAvailability();\n if (!hasCamera) {\n throw new Error(\"No camera devices found. Please ensure a camera is connected and accessible.\");\n }\n const hasPermission = await checkCameraPermission();\n if (!hasPermission) {\n throw new Error(\"Camera permission is denied.\");\n }\n stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: \"environment\" } })\n .catch(() => navigator.mediaDevices.getUserMedia({ video: true }));\n video.srcObject = stream;\n console.log(\"Camera initialized successfully.\");\n retryCount = 0; \/\/ Reset retry count on success\n } catch (err) {\n console.error(\"Camera initialization failed:\", err);\n retryCount++;\n const message = `Unable to access camera: ${err.message}. Please enable camera permissions in your browser (Chrome: click the lock icon in the address bar; Safari: Preferences > Websites > Camera) or device settings (iOS: Settings > Privacy > Camera; Android: Settings > Apps > Permissions).${retryCount >= maxRetries ? \" Maximum retries reached. Please check settings or use signature mode.\" : \"\"}`;\n const buttons = [\n { text: \"Retry\", class: \"retry-btn\", action: retryCount < maxRetries ? retryCameraAccess : hideCustomAlert },\n { text: \"Switch to Signature\", action: () => { toggleCaptureMode(); hideCustomAlert(); } },\n { text: \"Help\", class: \"help-btn\", action: () => { window.open(\"https:\/\/support.google.com\/chrome\/answer\/114662?hl=en\", \"_blank\"); hideCustomAlert(); } }\n ];\n showCustomAlert(message, buttons, () => alert(message));\n }\n }\n\n function toggleCaptureMode() {\n console.log(\"Toggle capture mode button clicked.\");\n try {\n if (location.protocol !== \"https:\" && location.hostname !== \"localhost\") {\n showCustomAlert(\"This feature requires a secure connection (HTTPS or localhost). Please access the site via a secure server.\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"This feature requires HTTPS or localhost.\"));\n return;\n }\n const toggleBtn = document.getElementById(\"toggle-capture\");\n const captureBtn = document.getElementById(\"capture-photo\");\n const retakeBtn = document.getElementById(\"retake-photo\");\n const clearBtn = document.getElementById(\"clear-capture\");\n const label = document.getElementById(\"capture-label\");\n\n if (!isCameraMode) {\n console.log(\"Switching to camera mode...\");\n isCameraMode = true;\n if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {\n console.error(\"getUserMedia not supported.\");\n showCustomAlert(\"Camera not supported in this browser. Please use a modern browser (e.g., Chrome, Safari, Firefox) or switch to signature mode.\", [\n { text: \"Switch to Signature\", action: () => { isCameraMode = false; toggleCaptureMode(); hideCustomAlert(); } }\n ], () => alert(\"Camera not supported in this browser.\"));\n return;\n }\n toggleBtn.textContent = \"Switch to Signature\";\n label.textContent = \"Delivery Photo:\";\n canvas.style.display = \"none\";\n video.style.display = \"block\";\n captureBtn.style.display = \"block\";\n clearBtn.textContent = \"Clear Photo\";\n initializeCamera();\n } else {\n console.log(\"Switching to signature mode...\");\n isCameraMode = false;\n toggleBtn.textContent = \"Switch to Camera\";\n label.textContent = \"Delivery Signature:\";\n canvas.style.display = \"block\";\n video.style.display = \"none\";\n photoCanvas.style.display = \"none\";\n captureBtn.style.display = \"none\";\n retakeBtn.style.display = \"none\";\n clearBtn.textContent = \"Clear Signature\";\n if (stream) {\n stream.getTracks().forEach(track => track.stop());\n stream = null;\n }\n }\n } catch (err) {\n console.error(\"Error in toggleCaptureMode:\", err);\n showCustomAlert(`Error switching mode: ${err.message}`, [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(`Error switching mode: ${err.message}`));\n }\n }\n\n \/\/ Bind toggleCaptureMode to button\n document.getElementById(\"toggle-capture\").addEventListener(\"click\", toggleCaptureMode);\n\n function retryCameraAccess() {\n console.log(\"Retrying camera access...\");\n hideCustomAlert();\n initializeCamera();\n }\n\n function capturePhoto() {\n console.log(\"Capturing photo...\");\n photoCanvas.width = canvas.width;\n photoCanvas.height = canvas.height;\n photoCtx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, photoCanvas.width, photoCanvas.height);\n const compressedDataURL = compressImage(photoCanvas, 0.7);\n photoCtx.clearRect(0, 0, photoCanvas.width, photoCanvas.height);\n const img = new Image();\n img.onload = () => {\n photoCtx.drawImage(img, 0, 0, photoCanvas.width, photoCanvas.height);\n video.style.display = \"none\";\n photoCanvas.style.display = \"block\";\n document.getElementById(\"capture-photo\").style.display = \"none\";\n document.getElementById(\"retake-photo\").style.display = \"block\";\n const captureBtn = document.getElementById(\"capture-photo\");\n captureBtn.classList.add(\"capturing\");\n setTimeout(() => captureBtn.classList.remove(\"capturing\"), 200);\n };\n img.src = compressedDataURL;\n }\n\n function retakePhoto() {\n console.log(\"Retaking photo...\");\n photoCtx.clearRect(0, 0, photoCanvas.width, photoCanvas.height);\n photoCanvas.style.display = \"none\";\n video.style.display = \"block\";\n document.getElementById(\"capture-photo\").style.display = \"block\";\n document.getElementById(\"retake-photo\").style.display = \"none\";\n }\n\n function clearCapture() {\n console.log(\"Clearing capture...\");\n if (isCameraMode) {\n photoCtx.clearRect(0, 0, photoCanvas.width, photoCanvas.height);\n photoCanvas.style.display = \"none\";\n video.style.display = \"block\";\n document.getElementById(\"capture-photo\").style.display = \"block\";\n document.getElementById(\"retake-photo\").style.display = \"none\";\n } else {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n }\n\n function compressImage(canvas, quality) {\n return canvas.toDataURL(\"image\/jpeg\", quality);\n }\n\n function isCanvasBlank(canvas) {\n const context = canvas.getContext(\"2d\");\n const pixelBuffer = new Uint32Array(context.getImageData(0, 0, canvas.width, canvas.height).data.buffer);\n return !pixelBuffer.some(color => color !== 0);\n }\n\n document.getElementById(\"courier-name\").addEventListener(\"change\", function() {\n const customName = document.getElementById(\"custom-name\");\n customName.style.display = this.value === \"Custom\" ? \"block\" : \"none\";\n });\n\n document.querySelector(\"form\").addEventListener(\"submit\", function(e) { \n e.preventDefault();\n console.log(\"Form submitted...\");\n\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n\n submitBtn.disabled = true; \n loadingSpinner.style.display = \"inline-block\";\n\n const captureDataURL = isCameraMode ? photoCanvas.toDataURL(\"image\/jpeg\", 0.7) : canvas.toDataURL(\"image\/png\");\n if (isCanvasBlank(isCameraMode ? photoCanvas : canvas)) {\n showCustomAlert(\"Please provide a signature or photo.\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"Please provide a signature or photo.\"));\n submitBtn.disabled = false;\n loadingSpinner.style.display = \"none\";\n return;\n }\n\n let courierName = document.getElementById(\"courier-name\").value;\n if (courierName === \"Custom\") {\n courierName = courierName + ': ' + document.getElementById(\"custom-name\").value;\n } \n\n formDataToSubmit = {\n location: document.getElementById(\"location\").value, \n courierName: courierName,\n numBags: document.getElementById(\"num-bags\").value,\n numEnvelopes: document.getElementById(\"num-envelopes\").value,\n numSlides: document.getElementById(\"num-slides\").value,\n misc: document.getElementById(\"misc\").value,\n name: document.getElementById(\"custom-fname\").value,\n signature: captureDataURL,\n dateTime: document.getElementById(\"datetime\").value\n };\n\n const previewModal = document.getElementById(\"preview-modal\");\n const previewImage = document.getElementById(\"preview-image\");\n const previewMessage = document.getElementById(\"preview-modal-message\");\n previewMessage.textContent = isCameraMode ? \"Preview your captured photo:\" : \"Preview your signature:\";\n previewImage.src = captureDataURL;\n previewModal.classList.add(\"active\");\n });\n\n function confirmSubmission() {\n console.log(\"Confirming submission...\");\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n const previewModal = document.getElementById(\"preview-modal\");\n\n previewModal.classList.remove(\"active\");\n\n fetch(\"https:\/\/script.google.com\/macros\/s\/AKfycbxJXhRrzPshV3cfYppVi4bYfyToA2Ec7NYpa5Ih0a05gXP9yArFN8fbi1P3tLgEaE6oMA\/exec\", {\n method: \"POST\",\n mode: \"no-cors\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify(formDataToSubmit)\n }).then(() => {\n showCustomAlert(\"Data submitted successfully!\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"Data submitted successfully!\"));\n formDataToSubmit = null;\n }).catch(() => {\n showCustomAlert(\"Error submitting data. Please try again.\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"Error submitting data.\"));\n submitBtn.disabled = false;\n loadingSpinner.style.display = \"none\";\n });\n }\n\n function cancelSubmission() {\n console.log(\"Canceling submission...\");\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n const previewModal = document.getElementById(\"preview-modal\");\n\n previewModal.classList.remove(\"active\");\n submitBtn.disabled = false;\n loadingSpinner.style.display = \"none\";\n formDataToSubmit = null;\n }\n\n function showCustomAlert(message, buttons = [{ text: \"OK\", action: hideCustomAlert }], fallback = () => {}) {\n console.log(\"Showing custom alert:\", message);\n try {\n const alertBox = document.getElementById(\"custom-alert\");\n const alertMessage = document.getElementById(\"custom-alert-message\");\n const alertButtons = document.getElementById(\"custom-alert-buttons\");\n if (!alertBox || !alertMessage || !alertButtons) {\n throw new Error(\"Alert DOM elements not found.\");\n }\n alertMessage.textContent = message;\n alertButtons.innerHTML = \"\";\n buttons.forEach(btn => {\n const button = document.createElement(\"button\");\n button.textContent = btn.text;\n button.className = btn.class || \"\";\n button.onclick = btn.action;\n alertButtons.appendChild(button);\n });\n alertBox.classList.add(\"active\");\n } catch (err) {\n console.error(\"Custom alert failed:\", err);\n fallback();\n }\n }\n\n function hideCustomAlert() {\n console.log(\"Hiding custom alert...\");\n try {\n const alertBox = document.getElementById(\"custom-alert\");\n alertBox.classList.remove(\"active\");\n } catch (err) {\n console.error(\"Error hiding alert:\", err);\n }\n }\n\n function setDefaultOption($selectID) {\n const select = document.getElementById($selectID);\n select.options.length = 0;\n const option = document.createElement('option'); \n option.value = '';\n option.text = 'Select..';\n select.add(option);\n select.selectedIndex = 0;\n }\n\n function clearInputs() {\n console.log(\"Clearing inputs...\");\n document.getElementById(\"custom-name\").style.display = \"none\";\n document.getElementById(\"custom-name\").value = \"\";\n document.getElementById(\"location\").value = \"\";\n document.getElementById(\"courier-name\").value = \"\";\n document.getElementById(\"num-bags\").value = \"\";\n document.getElementById(\"num-envelopes\").value = \"\";\n document.getElementById(\"num-slides\").value = \"\";\n document.getElementById(\"misc\").value = \"\";\n document.getElementById(\"datetime\").value = new Date().toISOString().slice(0, 16);\n document.getElementById(\"custom-fname\").value = \"\";\n clearCapture();\n setDefaultOption('location');\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n submitBtn.disabled = false; \n loadingSpinner.style.display = \"none\";\n if (isCameraMode) {\n toggleCaptureMode();\n }\n }\n\n const locationsByCourier = {\n \"Ronnie_224\": [\n \"863 N 49th Street, Philadelphia, PA\",\n \"2221 Garrett Rd, Drexel Hill, PA\",\n \"6 Dickinson Drive, Chadds Ford, PA\",\n \"2000 Foulk Rd, Wilmington, DE\",\n \"6300 Limestone Rd, Hockessin, DE 19707\",\n \"2023 High St, Sanatoga, PA\",\n \"209 Floral Blvd, Yardley, PA\",\n \"2310 East Allegheny Ave, Philadelphia, PA\"\n ],\n \"Keith_xxx\": [\n \"2310 E. Allegheny Ave., Philadelphia, PA\",\n \"Roosevelt Blvd., Philadelphia, PA\",\n \"8001 Roosevelt Blvd.\",\n \"1950 Street Road, Suite 100, Bensalem, PA\",\n \"Yardley, PA\",\n \"King of Prussia, PA\",\n \"Roxbourogh, PA\",\n \"North Broad St\",\n \"Exton, PA\",\n \"Bryn Mawr, PA\",\n ],\n \"Jordan\": [\n \"New York, NY\",\n \"Brooklyn, NY\",\n \"Queens, NY\",\n \"Bronx, NY\",\n \"Staten Island, NY\",\n \"Long Island, NY\",\n \"Newark, NJ\",\n \"Jersey City, NJ\",\n \"Hoboken, NJ\",\n \"Yonkers, NY\",\n ],\n \"Custom\": [\n \"Custom Location 1\",\n \"Custom Location 2\",\n \"Custom Location 3\",\n \"Custom Location 4\",\n \"Custom Location 5\",\n \"Custom Location 6\",\n \"Custom Location 7\",\n \"Custom Location 8\",\n \"Custom Location 9\",\n \"Custom Location 10\",\n ],\n };\n\n document.getElementById(\"courier-name\").addEventListener(\"change\", function() {\n let selectedCourier = this.value;\n let locationDropdown = document.getElementById(\"location\");\n locationDropdown.innerHTML = \"\";\n locationsByCourier[selectedCourier].forEach(location => {\n let option = document.createElement(\"option\");\n option.value = location;\n option.textContent = location;\n locationDropdown.appendChild(option);\n });\n });\n\n document.getElementById(\"location\").addEventListener(\"change\", function() {\n let selectedOptions = Array.from(this.selectedOptions);\n if (selectedOptions.length > 10) {\n showCustomAlert(\"You can only select up to 10 locations!\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"You can only select up to 10 locations!\"));\n selectedOptions[selectedOptions.length - 1].selected = false;\n }\n });\n });\n <\/script>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Delivery Input Form Courier Name: Select..Ronnie_224Keith_xxxJordanCustom… Select Locations: Select.. # of Bags: # of Envelopes: # of Slides: Misc: First Name: Delivery Signature: Switch to Camera Capture Photo Retake Photo Clear Time and Date: Submit Confirm Cancel<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-408","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages\/408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/comments?post=408"}],"version-history":[{"count":1,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages\/408\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages\/408\/revisions\/410"}],"wp:attachment":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/media?parent=408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":408,"date":"2025-06-22T19:38:15","date_gmt":"2025-06-22T19:38:15","guid":{"rendered":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/?page_id=408"},"modified":"2025-06-22T19:38:17","modified_gmt":"2025-06-22T19:38:17","slug":"dermatology-test","status":"publish","type":"page","link":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/dermatology-test\/","title":{"rendered":"Dermatology – Test"},"content":{"rendered":"\n\n\n\n \n \n \n Delivery Input Form<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n margin: 0;\n padding: 0 3rem;\n line-height: 1.5;\n overflow-x: hidden;\n }\n form {\n max-width: 100%;\n width: 100%;\n margin: 0 auto;\n padding: 15px;\n box-sizing: border-box;\n }\n label {\n font-weight: bold;\n }\n input, textarea, select, button, canvas, video {\n width: 100%;\n padding: 8px;\n margin: 8px 0;\n border-radius: 4px;\n border: 1px solid #ccc;\n box-sizing: border-box;\n }\n button {\n background-color: #007BFF;\n color: white;\n font-weight: bold;\n cursor: pointer;\n border: none;\n }\n button:hover {\n background-color: #0056b3;\n }\n canvas, video {\n width: 100%;\n height: auto;\n display: block;\n margin: 0 auto;\n border: 1px solid #ccc;\n box-sizing: border-box;\n }\n #signature {\n cursor: crosshair;\n }\n h2 {\n text-align: center;\n font-size: 2rem;\n margin: 20px 0;\n }\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n form {\n padding: 15px;\n }\n button {\n padding: 10px;\n }\n }\n @media (max-width: 480px) {\n body {\n padding: 0rem;\n }\n form {\n padding: 10px;\n }\n label, input, textarea, select, button, canvas, video {\n font-size: 14px;\n }\n }\n #custom-alert, #preview-modal {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: flex;\n justify-content: center;\n align-items: center;\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s, opacity 0.2s;\n }\n #custom-alert.active, #preview-modal.active {\n visibility: visible;\n opacity: 1;\n }\n #custom-alert-content, #preview-modal-content {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n max-width: 90%;\n max-height: 90%;\n overflow: auto;\n }\n #custom-alert button, #preview-modal button {\n margin: 10px;\n padding: 10px 20px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n #custom-alert button {\n background-color: #007BFF;\n color: white;\n }\n #custom-alert button:hover {\n background-color: #0056b3;\n }\n #custom-alert .retry-btn {\n background-color: #28a745;\n color: white;\n }\n #custom-alert .retry-btn:hover {\n background-color: #218838;\n }\n #custom-alert .help-btn {\n background-color: #ffc107;\n color: black;\n }\n #custom-alert .help-btn:hover {\n background-color: #e0a800;\n }\n #preview-modal img {\n max-width: 100%;\n max-height: 50vh;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n #preview-modal .confirm-btn {\n background-color: #28a745;\n color: white;\n }\n #preview-modal .confirm-btn:hover {\n background-color: #218838;\n }\n #preview-modal .cancel-btn {\n background-color: #dc3545;\n color: white;\n }\n #preview-modal .cancel-btn:hover {\n background-color: #c82333;\n }\n #capture-photo.capturing {\n background-color: #28a745;\n transition: background-color 0.2s;\n }\n .button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n }\n <\/style>\n <\/head>\n <body>\n <form method=\"POST\"> \n <label for=\"courier-name\">Courier Name:<\/label>\n <select id=\"courier-name\" name=\"courier-name\" required>\n <option value=\"\">Select..<\/option>\n <option value=\"Ronnie_224\">Ronnie_224<\/option>\n <option value=\"Keith_xxx\">Keith_xxx<\/option>\n <option value=\"Jordan\">Jordan<\/option>\n <option value=\"Custom\">Custom…<\/option>\n <\/select>\n\n <input type=\"text\" id=\"custom-name\" name=\"custom-name\" placeholder=\"Enter name (if 'Custom')\" style=\"display:none;\" oninput=\"document.getElementById('courier-name').value='Custom';\">\n\n <label for=\"location\">Select Locations:<\/label>\n <select id=\"location\" name=\"location\">\n <option value=\"\">Select..<\/option>\n <\/select>\n \n <label for=\"num-bags\"># of Bags:<\/label>\n <input type=\"number\" id=\"num-bags\" name=\"num-bags\" inputmode=\"numeric\" placeholder=\"Enter number of bags\" required>\n\n <label for=\"num-envelopes\"># of Envelopes:<\/label>\n <input type=\"number\" id=\"num-envelopes\" name=\"num-envelopes\" inputmode=\"numeric\" placeholder=\"Enter number of envelopes\" required>\n\n <label for=\"num-slides\"># of Slides:<\/label>\n <input type=\"number\" id=\"num-slides\" name=\"num-slides\" inputmode=\"numeric\" placeholder=\"Enter number of slides\">\n\n <label for=\"misc\">Misc:<\/label>\n <textarea id=\"misc\" name=\"misc\" placeholder=\"Enter additional details\"><\/textarea>\n\n <label for=\"custom-fname\">First Name:<\/label>\n <input type=\"text\" id=\"custom-fname\" name=\"custom-fname\" placeholder=\"Enter first name\">\n\n <label id=\"capture-label\">Delivery Signature:<\/label>\n <canvas id=\"signature\" style=\"display: block;\"><\/canvas>\n <video id=\"camera\" autoplay style=\"display: none;\"><\/video>\n <canvas id=\"photo\" style=\"display: none;\"><\/canvas>\n <div class=\"button-group\">\n <button type=\"button\" id=\"toggle-capture\">Switch to Camera<\/button>\n <button type=\"button\" id=\"capture-photo\" onclick=\"capturePhoto()\" style=\"display: none;\">Capture Photo<\/button>\n <button type=\"button\" id=\"retake-photo\" onclick=\"retakePhoto()\" style=\"display: none;\">Retake Photo<\/button>\n <button type=\"button\" id=\"clear-capture\" onclick=\"clearCapture()\">Clear<\/button>\n <\/div>\n\n <label for=\"datetime\">Time and Date:<\/label>\n <input type=\"datetime-local\" id=\"datetime\" name=\"datetime\" value=\"\">\n\n <button type=\"submit\" id=\"submit-btn\" style=\"position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; height: 40px;\">\n <span id=\"loading-spinner\" style=\"display: none; flex-shrink: 0;\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\" width=\"20\" height=\"20\">\n <circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"#fff\" stroke-width=\"4\" fill=\"none\" stroke-dasharray=\"188.4\" stroke-dashoffset=\"188.4\">\n <animate attributeName=\"stroke-dashoffset\" from=\"188.4\" to=\"0\" dur=\"1s\" repeatCount=\"indefinite\"\/>\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 50 50\" to=\"360 50 50\" dur=\"1s\" repeatCount=\"indefinite\"\/>\n <\/circle>\n <\/svg>\n <\/span>\n <span id=\"submit-text\">\n Submit\n <\/span>\n <\/button>\n <\/form>\n\n <div id=\"custom-alert\">\n <div id=\"custom-alert-content\">\n <p id=\"custom-alert-message\"><\/p>\n <div class=\"button-group\" id=\"custom-alert-buttons\"><\/div>\n <\/div>\n <\/div>\n\n <div id=\"preview-modal\">\n <div id=\"preview-modal-content\">\n <p id=\"preview-modal-message\"><\/p>\n <img decoding=\"async\" id=\"preview-image\" src=\"\" alt=\"Preview\">\n <div class=\"button-group\">\n <button class=\"confirm-btn\" onclick=\"confirmSubmission()\">Confirm<\/button>\n <button class=\"cancel-btn\" onclick=\"cancelSubmission()\">Cancel<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n console.log(\"DOM fully loaded, initializing script...\");\n\n const canvas = document.getElementById(\"signature\");\n const ctx = canvas.getContext(\"2d\");\n const video = document.getElementById(\"camera\");\n const photoCanvas = document.getElementById(\"photo\");\n const photoCtx = photoCanvas.getContext(\"2d\");\n let drawing = false;\n let isCameraMode = false;\n let stream = null;\n let formDataToSubmit = null;\n let retryCount = 0;\n const maxRetries = 3;\n\n function resizeCanvas() {\n const rect = canvas.getBoundingClientRect();\n canvas.width = rect.width;\n photoCanvas.width = rect.width;\n if (window.innerWidth <= 480) {\n canvas.height = 150;\n photoCanvas.height = 150;\n video.style.height = '150px';\n } else {\n canvas.height = 250;\n photoCanvas.height = 250;\n video.style.height = '250px';\n }\n }\n\n resizeCanvas();\n window.addEventListener(\"resize\", resizeCanvas);\n\n document.getElementById(\"datetime\").value = new Date().toISOString().slice(0, 16);\n\n canvas.addEventListener(\"mousedown\", (event) => {\n if (!isCameraMode) {\n drawing = true;\n ctx.beginPath();\n ctx.moveTo(getCursorPosition(event).x, getCursorPosition(event).y);\n }\n });\n\n canvas.addEventListener(\"mouseup\", () => drawing = false);\n canvas.addEventListener(\"mouseleave\", () => drawing = false);\n canvas.addEventListener(\"mousemove\", (event) => {\n if (drawing && !isCameraMode) {\n const pos = getCursorPosition(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n });\n\n canvas.addEventListener(\"touchstart\", (event) => {\n if (!isCameraMode) {\n event.preventDefault();\n drawing = true;\n const pos = getTouchPosition(event);\n ctx.beginPath();\n ctx.moveTo(pos.x, pos.y);\n }\n }, { passive: false });\n\n canvas.addEventListener(\"touchend\", (event) => {\n if (!isCameraMode) {\n event.preventDefault();\n drawing = false;\n }\n }, { passive: false });\n\n canvas.addEventListener(\"touchmove\", (event) => {\n if (drawing && !isCameraMode) {\n event.preventDefault();\n const pos = getTouchPosition(event);\n ctx.lineTo(pos.x, pos.y);\n ctx.stroke();\n }\n }, { passive: false });\n\n function getCursorPosition(event) {\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n return {\n x: (event.clientX - rect.left) * scaleX,\n y: (event.clientY - rect.top) * scaleY\n };\n }\n\n function getTouchPosition(event) {\n const rect = canvas.getBoundingClientRect();\n const touch = event.touches[0];\n const scaleX = canvas.width \/ rect.width;\n const scaleY = canvas.height \/ rect.height;\n return {\n x: (touch.clientX - rect.left) * scaleX,\n y: (touch.clientY - rect.top) * scaleY\n };\n }\n\n async function checkCameraAvailability() {\n console.log(\"Checking available cameras...\");\n try {\n const devices = await navigator.mediaDevices.enumerateDevices();\n const videoDevices = devices.filter(device => device.kind === \"videoinput\");\n console.log(\"Found video devices:\", videoDevices);\n return videoDevices.length > 0;\n } catch (err) {\n console.error(\"Error enumerating devices:\", err);\n return false;\n }\n }\n\n async function checkCameraPermission() {\n try {\n const permission = await navigator.permissions.query({ name: \"camera\" });\n console.log(\"Camera permission state:\", permission.state);\n return permission.state === \"granted\" || permission.state === \"prompt\";\n } catch (err) {\n console.error(\"Error checking camera permission:\", err);\n return true;\n }\n }\n\n async function initializeCamera() {\n console.log(\"Attempting to initialize camera... Retry attempt:\", retryCount + 1);\n try {\n if (location.protocol !== \"https:\" && location.hostname !== \"localhost\") {\n throw new Error(\"Camera access requires HTTPS or localhost.\");\n }\n const hasCamera = await checkCameraAvailability();\n if (!hasCamera) {\n throw new Error(\"No camera devices found. Please ensure a camera is connected and accessible.\");\n }\n const hasPermission = await checkCameraPermission();\n if (!hasPermission) {\n throw new Error(\"Camera permission is denied.\");\n }\n stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: \"environment\" } })\n .catch(() => navigator.mediaDevices.getUserMedia({ video: true }));\n video.srcObject = stream;\n console.log(\"Camera initialized successfully.\");\n retryCount = 0; \/\/ Reset retry count on success\n } catch (err) {\n console.error(\"Camera initialization failed:\", err);\n retryCount++;\n const message = `Unable to access camera: ${err.message}. Please enable camera permissions in your browser (Chrome: click the lock icon in the address bar; Safari: Preferences > Websites > Camera) or device settings (iOS: Settings > Privacy > Camera; Android: Settings > Apps > Permissions).${retryCount >= maxRetries ? \" Maximum retries reached. Please check settings or use signature mode.\" : \"\"}`;\n const buttons = [\n { text: \"Retry\", class: \"retry-btn\", action: retryCount < maxRetries ? retryCameraAccess : hideCustomAlert },\n { text: \"Switch to Signature\", action: () => { toggleCaptureMode(); hideCustomAlert(); } },\n { text: \"Help\", class: \"help-btn\", action: () => { window.open(\"https:\/\/support.google.com\/chrome\/answer\/114662?hl=en\", \"_blank\"); hideCustomAlert(); } }\n ];\n showCustomAlert(message, buttons, () => alert(message));\n }\n }\n\n function toggleCaptureMode() {\n console.log(\"Toggle capture mode button clicked.\");\n try {\n if (location.protocol !== \"https:\" && location.hostname !== \"localhost\") {\n showCustomAlert(\"This feature requires a secure connection (HTTPS or localhost). Please access the site via a secure server.\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"This feature requires HTTPS or localhost.\"));\n return;\n }\n const toggleBtn = document.getElementById(\"toggle-capture\");\n const captureBtn = document.getElementById(\"capture-photo\");\n const retakeBtn = document.getElementById(\"retake-photo\");\n const clearBtn = document.getElementById(\"clear-capture\");\n const label = document.getElementById(\"capture-label\");\n\n if (!isCameraMode) {\n console.log(\"Switching to camera mode...\");\n isCameraMode = true;\n if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {\n console.error(\"getUserMedia not supported.\");\n showCustomAlert(\"Camera not supported in this browser. Please use a modern browser (e.g., Chrome, Safari, Firefox) or switch to signature mode.\", [\n { text: \"Switch to Signature\", action: () => { isCameraMode = false; toggleCaptureMode(); hideCustomAlert(); } }\n ], () => alert(\"Camera not supported in this browser.\"));\n return;\n }\n toggleBtn.textContent = \"Switch to Signature\";\n label.textContent = \"Delivery Photo:\";\n canvas.style.display = \"none\";\n video.style.display = \"block\";\n captureBtn.style.display = \"block\";\n clearBtn.textContent = \"Clear Photo\";\n initializeCamera();\n } else {\n console.log(\"Switching to signature mode...\");\n isCameraMode = false;\n toggleBtn.textContent = \"Switch to Camera\";\n label.textContent = \"Delivery Signature:\";\n canvas.style.display = \"block\";\n video.style.display = \"none\";\n photoCanvas.style.display = \"none\";\n captureBtn.style.display = \"none\";\n retakeBtn.style.display = \"none\";\n clearBtn.textContent = \"Clear Signature\";\n if (stream) {\n stream.getTracks().forEach(track => track.stop());\n stream = null;\n }\n }\n } catch (err) {\n console.error(\"Error in toggleCaptureMode:\", err);\n showCustomAlert(`Error switching mode: ${err.message}`, [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(`Error switching mode: ${err.message}`));\n }\n }\n\n \/\/ Bind toggleCaptureMode to button\n document.getElementById(\"toggle-capture\").addEventListener(\"click\", toggleCaptureMode);\n\n function retryCameraAccess() {\n console.log(\"Retrying camera access...\");\n hideCustomAlert();\n initializeCamera();\n }\n\n function capturePhoto() {\n console.log(\"Capturing photo...\");\n photoCanvas.width = canvas.width;\n photoCanvas.height = canvas.height;\n photoCtx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, photoCanvas.width, photoCanvas.height);\n const compressedDataURL = compressImage(photoCanvas, 0.7);\n photoCtx.clearRect(0, 0, photoCanvas.width, photoCanvas.height);\n const img = new Image();\n img.onload = () => {\n photoCtx.drawImage(img, 0, 0, photoCanvas.width, photoCanvas.height);\n video.style.display = \"none\";\n photoCanvas.style.display = \"block\";\n document.getElementById(\"capture-photo\").style.display = \"none\";\n document.getElementById(\"retake-photo\").style.display = \"block\";\n const captureBtn = document.getElementById(\"capture-photo\");\n captureBtn.classList.add(\"capturing\");\n setTimeout(() => captureBtn.classList.remove(\"capturing\"), 200);\n };\n img.src = compressedDataURL;\n }\n\n function retakePhoto() {\n console.log(\"Retaking photo...\");\n photoCtx.clearRect(0, 0, photoCanvas.width, photoCanvas.height);\n photoCanvas.style.display = \"none\";\n video.style.display = \"block\";\n document.getElementById(\"capture-photo\").style.display = \"block\";\n document.getElementById(\"retake-photo\").style.display = \"none\";\n }\n\n function clearCapture() {\n console.log(\"Clearing capture...\");\n if (isCameraMode) {\n photoCtx.clearRect(0, 0, photoCanvas.width, photoCanvas.height);\n photoCanvas.style.display = \"none\";\n video.style.display = \"block\";\n document.getElementById(\"capture-photo\").style.display = \"block\";\n document.getElementById(\"retake-photo\").style.display = \"none\";\n } else {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n }\n }\n\n function compressImage(canvas, quality) {\n return canvas.toDataURL(\"image\/jpeg\", quality);\n }\n\n function isCanvasBlank(canvas) {\n const context = canvas.getContext(\"2d\");\n const pixelBuffer = new Uint32Array(context.getImageData(0, 0, canvas.width, canvas.height).data.buffer);\n return !pixelBuffer.some(color => color !== 0);\n }\n\n document.getElementById(\"courier-name\").addEventListener(\"change\", function() {\n const customName = document.getElementById(\"custom-name\");\n customName.style.display = this.value === \"Custom\" ? \"block\" : \"none\";\n });\n\n document.querySelector(\"form\").addEventListener(\"submit\", function(e) { \n e.preventDefault();\n console.log(\"Form submitted...\");\n\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n\n submitBtn.disabled = true; \n loadingSpinner.style.display = \"inline-block\";\n\n const captureDataURL = isCameraMode ? photoCanvas.toDataURL(\"image\/jpeg\", 0.7) : canvas.toDataURL(\"image\/png\");\n if (isCanvasBlank(isCameraMode ? photoCanvas : canvas)) {\n showCustomAlert(\"Please provide a signature or photo.\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"Please provide a signature or photo.\"));\n submitBtn.disabled = false;\n loadingSpinner.style.display = \"none\";\n return;\n }\n\n let courierName = document.getElementById(\"courier-name\").value;\n if (courierName === \"Custom\") {\n courierName = courierName + ': ' + document.getElementById(\"custom-name\").value;\n } \n\n formDataToSubmit = {\n location: document.getElementById(\"location\").value, \n courierName: courierName,\n numBags: document.getElementById(\"num-bags\").value,\n numEnvelopes: document.getElementById(\"num-envelopes\").value,\n numSlides: document.getElementById(\"num-slides\").value,\n misc: document.getElementById(\"misc\").value,\n name: document.getElementById(\"custom-fname\").value,\n signature: captureDataURL,\n dateTime: document.getElementById(\"datetime\").value\n };\n\n const previewModal = document.getElementById(\"preview-modal\");\n const previewImage = document.getElementById(\"preview-image\");\n const previewMessage = document.getElementById(\"preview-modal-message\");\n previewMessage.textContent = isCameraMode ? \"Preview your captured photo:\" : \"Preview your signature:\";\n previewImage.src = captureDataURL;\n previewModal.classList.add(\"active\");\n });\n\n function confirmSubmission() {\n console.log(\"Confirming submission...\");\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n const previewModal = document.getElementById(\"preview-modal\");\n\n previewModal.classList.remove(\"active\");\n\n fetch(\"https:\/\/script.google.com\/macros\/s\/AKfycbxJXhRrzPshV3cfYppVi4bYfyToA2Ec7NYpa5Ih0a05gXP9yArFN8fbi1P3tLgEaE6oMA\/exec\", {\n method: \"POST\",\n mode: \"no-cors\",\n headers: { \"Content-Type\": \"application\/json\" },\n body: JSON.stringify(formDataToSubmit)\n }).then(() => {\n showCustomAlert(\"Data submitted successfully!\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"Data submitted successfully!\"));\n formDataToSubmit = null;\n }).catch(() => {\n showCustomAlert(\"Error submitting data. Please try again.\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"Error submitting data.\"));\n submitBtn.disabled = false;\n loadingSpinner.style.display = \"none\";\n });\n }\n\n function cancelSubmission() {\n console.log(\"Canceling submission...\");\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n const previewModal = document.getElementById(\"preview-modal\");\n\n previewModal.classList.remove(\"active\");\n submitBtn.disabled = false;\n loadingSpinner.style.display = \"none\";\n formDataToSubmit = null;\n }\n\n function showCustomAlert(message, buttons = [{ text: \"OK\", action: hideCustomAlert }], fallback = () => {}) {\n console.log(\"Showing custom alert:\", message);\n try {\n const alertBox = document.getElementById(\"custom-alert\");\n const alertMessage = document.getElementById(\"custom-alert-message\");\n const alertButtons = document.getElementById(\"custom-alert-buttons\");\n if (!alertBox || !alertMessage || !alertButtons) {\n throw new Error(\"Alert DOM elements not found.\");\n }\n alertMessage.textContent = message;\n alertButtons.innerHTML = \"\";\n buttons.forEach(btn => {\n const button = document.createElement(\"button\");\n button.textContent = btn.text;\n button.className = btn.class || \"\";\n button.onclick = btn.action;\n alertButtons.appendChild(button);\n });\n alertBox.classList.add(\"active\");\n } catch (err) {\n console.error(\"Custom alert failed:\", err);\n fallback();\n }\n }\n\n function hideCustomAlert() {\n console.log(\"Hiding custom alert...\");\n try {\n const alertBox = document.getElementById(\"custom-alert\");\n alertBox.classList.remove(\"active\");\n } catch (err) {\n console.error(\"Error hiding alert:\", err);\n }\n }\n\n function setDefaultOption($selectID) {\n const select = document.getElementById($selectID);\n select.options.length = 0;\n const option = document.createElement('option'); \n option.value = '';\n option.text = 'Select..';\n select.add(option);\n select.selectedIndex = 0;\n }\n\n function clearInputs() {\n console.log(\"Clearing inputs...\");\n document.getElementById(\"custom-name\").style.display = \"none\";\n document.getElementById(\"custom-name\").value = \"\";\n document.getElementById(\"location\").value = \"\";\n document.getElementById(\"courier-name\").value = \"\";\n document.getElementById(\"num-bags\").value = \"\";\n document.getElementById(\"num-envelopes\").value = \"\";\n document.getElementById(\"num-slides\").value = \"\";\n document.getElementById(\"misc\").value = \"\";\n document.getElementById(\"datetime\").value = new Date().toISOString().slice(0, 16);\n document.getElementById(\"custom-fname\").value = \"\";\n clearCapture();\n setDefaultOption('location');\n const submitBtn = document.getElementById(\"submit-btn\");\n const loadingSpinner = document.getElementById(\"loading-spinner\");\n submitBtn.disabled = false; \n loadingSpinner.style.display = \"none\";\n if (isCameraMode) {\n toggleCaptureMode();\n }\n }\n\n const locationsByCourier = {\n \"Ronnie_224\": [\n \"863 N 49th Street, Philadelphia, PA\",\n \"2221 Garrett Rd, Drexel Hill, PA\",\n \"6 Dickinson Drive, Chadds Ford, PA\",\n \"2000 Foulk Rd, Wilmington, DE\",\n \"6300 Limestone Rd, Hockessin, DE 19707\",\n \"2023 High St, Sanatoga, PA\",\n \"209 Floral Blvd, Yardley, PA\",\n \"2310 East Allegheny Ave, Philadelphia, PA\"\n ],\n \"Keith_xxx\": [\n \"2310 E. Allegheny Ave., Philadelphia, PA\",\n \"Roosevelt Blvd., Philadelphia, PA\",\n \"8001 Roosevelt Blvd.\",\n \"1950 Street Road, Suite 100, Bensalem, PA\",\n \"Yardley, PA\",\n \"King of Prussia, PA\",\n \"Roxbourogh, PA\",\n \"North Broad St\",\n \"Exton, PA\",\n \"Bryn Mawr, PA\",\n ],\n \"Jordan\": [\n \"New York, NY\",\n \"Brooklyn, NY\",\n \"Queens, NY\",\n \"Bronx, NY\",\n \"Staten Island, NY\",\n \"Long Island, NY\",\n \"Newark, NJ\",\n \"Jersey City, NJ\",\n \"Hoboken, NJ\",\n \"Yonkers, NY\",\n ],\n \"Custom\": [\n \"Custom Location 1\",\n \"Custom Location 2\",\n \"Custom Location 3\",\n \"Custom Location 4\",\n \"Custom Location 5\",\n \"Custom Location 6\",\n \"Custom Location 7\",\n \"Custom Location 8\",\n \"Custom Location 9\",\n \"Custom Location 10\",\n ],\n };\n\n document.getElementById(\"courier-name\").addEventListener(\"change\", function() {\n let selectedCourier = this.value;\n let locationDropdown = document.getElementById(\"location\");\n locationDropdown.innerHTML = \"\";\n locationsByCourier[selectedCourier].forEach(location => {\n let option = document.createElement(\"option\");\n option.value = location;\n option.textContent = location;\n locationDropdown.appendChild(option);\n });\n });\n\n document.getElementById(\"location\").addEventListener(\"change\", function() {\n let selectedOptions = Array.from(this.selectedOptions);\n if (selectedOptions.length > 10) {\n showCustomAlert(\"You can only select up to 10 locations!\", [\n { text: \"OK\", action: hideCustomAlert }\n ], () => alert(\"You can only select up to 10 locations!\"));\n selectedOptions[selectedOptions.length - 1].selected = false;\n }\n });\n });\n <\/script>\n <\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Delivery Input Form Courier Name: Select..Ronnie_224Keith_xxxJordanCustom… Select Locations: Select.. # of Bags: # of Envelopes: # of Slides: Misc: First Name: Delivery Signature: Switch to Camera Capture Photo Retake Photo Clear Time and Date: Submit Confirm Cancel<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-408","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages\/408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/comments?post=408"}],"version-history":[{"count":1,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages\/408\/revisions"}],"predecessor-version":[{"id":410,"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/pages\/408\/revisions\/410"}],"wp:attachment":[{"href":"https:\/\/globalneighborhoodserenade.com\/website_bcc18feb\/wp-json\/wp\/v2\/media?parent=408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}