{"id":2,"date":"2025-01-23T20:53:15","date_gmt":"2025-01-23T20:53:15","guid":{"rendered":"http:\/\/_\/?page_id=2"},"modified":"2025-06-04T00:13:51","modified_gmt":"2025-06-04T00:13:51","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/leticawp.rossperalta.com\/?page_id=2","title":{"rendered":"Sample Page"},"content":{"rendered":"\n<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n\n\n\n<div class=\"map-wrapper\" style=\"position: relative; max-width: 600px; margin: 20px auto; font-family: Arial, sans-serif;\">\n    <!-- Desktop iframe -->\n    <div id=\"desktopMapContainer\" style=\"position: relative;\">\n        <iframe \n            id=\"mapFrame\"\n            src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3500.302157034283!2d-81.39248768834105!3d28.680606681793346!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88e773d671102d61%3A0x3f7222049fd9a234!2s901%20Douglas%20Ave%20%23213%2C%20Altamonte%20Springs%2C%20FL%2032714!5e0!3m2!1sen!2sus!4v1748564698512!5m2!1sen!2sus\" \n            width=\"600\" \n            height=\"450\" \n            style=\"border:0; width: 100%; border-radius: 8px;\" \n            allowfullscreen=\"\" \n            loading=\"lazy\" \n            referrerpolicy=\"no-referrer-when-downgrade\">\n        <\/iframe>\n        <!-- Click overlay for desktop -->\n        <div id=\"desktopOverlay\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; cursor: pointer; z-index: 5; border-radius: 8px;\"><\/div>\n    <\/div>\n    \n    <!-- Mobile map display -->\n    <div id=\"mobileMapContainer\" style=\"display: none;\">\n        <div style=\"width: 100%; height: 450px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; position: relative; cursor: pointer; overflow: hidden;\">\n            <!-- Map background pattern -->\n            <div style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22><g fill-rule=%22evenodd%22><g fill=%22%23ffffff%22 fill-opacity=%220.1%22><circle cx=%2230%22 cy=%2230%22 r=%222%22\/><\/g><\/g><\/svg>&#8216;); opacity: 0.3;&#8221;><\/div>\n            \n            <!-- Center content -->\n            <div style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; z-index: 2;\">\n                <div style=\"background: rgba(0,0,0,0.7); padding: 25px; border-radius: 12px; backdrop-filter: blur(10px);\">\n                    <div style=\"font-size: 40px; margin-bottom: 15px;\">\ud83d\udccd<\/div>\n                    <div style=\"font-size: 18px; font-weight: bold; margin-bottom: 8px;\">Our Location<\/div>\n                    <div style=\"font-size: 14px; margin-bottom: 15px; opacity: 0.9;\">\n                        901 Douglas Ave #213<br>\n                        Altamonte Springs, FL 32714\n                    <\/div>\n                    <div style=\"background: rgba(255,255,255,0.2); padding: 12px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;\">\n                        Tap to Open in Maps\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <!-- Modal popup -->\n    <div id=\"mapModal\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000;\">\n        <div style=\"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 12px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3);\">\n            <h3 style=\"margin: 0 0 15px 0; color: #333; font-size: 20px;\">\ud83d\udccd Open Location<\/h3>\n            <p style=\"margin: 0 0 25px 0; color: #666; font-size: 14px;\">\n                901 Douglas Ave #213<br>\n                Altamonte Springs, FL 32714\n            <\/p>\n            <p style=\"margin: 0 0 25px 0; color: #888; font-size: 13px;\">Choose your preferred maps app:<\/p>\n            \n            <div style=\"display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px;\">\n                <a id=\"googleMapsLink\" \n                   href=\"https:\/\/www.google.com\/maps\/search\/?api=1&#038;query=901%20Douglas%20Ave%20%23213%2C%20Altamonte%20Springs%2C%20FL%2032714\" \n                   target=\"_blank\" \n                   rel=\"noopener\"\n                   style=\"display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; text-decoration: none; border-radius: 8px; font-weight: 500; background: #4285f4; color: white; min-width: 140px; justify-content: center; transition: all 0.2s ease;\">\n                    <svg style=\"width: 18px; height: 18px;\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/>\n                    <\/svg>\n                    Google Maps\n                <\/a>\n                \n                <a id=\"appleMapsLink\" \n                   href=\"https:\/\/maps.apple.com\/?daddr=901%20Douglas%20Ave%20%23213%2C%20Altamonte%20Springs%2C%20FL%2032714\" \n                   target=\"_blank\" \n                   rel=\"noopener\"\n                   style=\"display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; text-decoration: none; border-radius: 8px; font-weight: 500; background: #007aff; color: white; min-width: 140px; justify-content: center; transition: all 0.2s ease;\">\n                    <svg style=\"width: 18px; height: 18px;\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                        <path d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\"\/>\n                    <\/svg>\n                    Apple Maps\n                <\/a>\n            <\/div>\n            \n            <button id=\"closeModalBtn\" style=\"background: #f0f0f0; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; color: #666; font-size: 14px;\">Cancel<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ Wait for DOM to be fully loaded\ndocument.addEventListener('DOMContentLoaded', function() {\n    var desktopContainer = document.getElementById('desktopMapContainer');\n    var mobileContainer = document.getElementById('mobileMapContainer');\n    var desktopOverlay = document.getElementById('desktopOverlay');\n    var modal = document.getElementById('mapModal');\n    var closeBtn = document.getElementById('closeModalBtn');\n    var googleLink = document.getElementById('googleMapsLink');\n    var appleLink = document.getElementById('appleMapsLink');\n    \n    \/\/ More reliable mobile detection\n    function isMobileDevice() {\n        var userAgent = navigator.userAgent || navigator.vendor || window.opera;\n        var isMobileUA = \/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino\/i.test(userAgent);\n        var isSmallScreen = window.innerWidth <= 768;\n        return isMobileUA || isSmallScreen;\n    }\n    \n    \/\/ Show appropriate map version\n    function setupDisplay() {\n        if (isMobileDevice()) {\n            desktopContainer.style.display = 'none';\n            mobileContainer.style.display = 'block';\n        } else {\n            desktopContainer.style.display = 'block';\n            mobileContainer.style.display = 'none';\n        }\n    }\n    \n    function showModal() {\n        modal.style.display = 'block';\n        document.body.style.overflow = 'hidden';\n    }\n    \n    function hideModal() {\n        modal.style.display = 'none';\n        document.body.style.overflow = '';\n    }\n    \n    \/\/ Event listeners\n    if (desktopOverlay) {\n        desktopOverlay.addEventListener('click', function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            showModal();\n        });\n    }\n    \n    if (mobileContainer) {\n        mobileContainer.addEventListener('click', function(e) {\n            e.preventDefault();\n            e.stopPropagation();\n            showModal();\n        });\n    }\n    \n    if (closeBtn) {\n        closeBtn.addEventListener('click', hideModal);\n    }\n    \n    \/\/ Close modal when clicking outside\n    if (modal) {\n        modal.addEventListener('click', function(e) {\n            if (e.target === modal) {\n                hideModal();\n            }\n        });\n    }\n    \n    \/\/ Close with escape key\n    document.addEventListener('keydown', function(e) {\n        if (e.key === 'Escape' || e.keyCode === 27) {\n            hideModal();\n        }\n    });\n    \n    \/\/ Add click handlers to map links to close modal\n    if (googleLink) {\n        googleLink.addEventListener('click', function() {\n            setTimeout(hideModal, 100);\n        });\n    }\n    \n    if (appleLink) {\n        appleLink.addEventListener('click', function() {\n            setTimeout(hideModal, 100);\n        });\n    }\n    \n    \/\/ Initialize display\n    setupDisplay();\n    \n    \/\/ Handle window resize\n    window.addEventListener('resize', function() {\n        setTimeout(setupDisplay, 100);\n    });\n});\n<\/script>\n\n<style>\n.map-wrapper a:hover {\n    transform: translateY(-1px) !important;\n    opacity: 0.9 !important;\n}\n\n@media (max-width: 768px) {\n    #desktopMapContainer {\n        display: none !important;\n    }\n    \n    #mobileMapContainer {\n        display: block !important;\n    }\n    \n    #mapModal > div {\n        margin: 20px !important;\n        padding: 25px 20px !important;\n    }\n    \n    #mapModal > div > div:nth-child(4) {\n        flex-direction: column !important;\n        align-items: center !important;\n    }\n    \n    #mapModal a {\n        width: 180px !important;\n        margin-bottom: 10px !important;\n    }\n}\n<\/style>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Hi there! I'm a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like pi\u00f1a coladas. (And gettin' caught in the rain.)<\/p>\n<\/blockquote>\n\n\n\n<p>...or something like this:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.<\/p>\n<\/blockquote>\n\n\n\n<p>As a new WordPress user, you should go to <a href=\"http:\/\/_\/wp-admin\/\">your dashboard<\/a> to delete this page and create new pages for your content. Have fun!  <\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\"><\/div>\n\n\n<p>[daypilot_reservations]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":64,"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/leticawp.rossperalta.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}