{"id":523,"date":"2026-08-29T19:40:12","date_gmt":"2026-08-29T19:40:12","guid":{"rendered":"https:\/\/therattyarms.uk\/?page_id=523"},"modified":"2026-08-29T19:44:37","modified_gmt":"2026-08-29T19:44:37","slug":"install-the-app-here","status":"publish","type":"page","link":"https:\/\/therattyarms.uk\/?page_id=523","title":{"rendered":"Install the App here"},"content":{"rendered":"\n<style>\n.ratty-app-page {\n    max-width: 800px;\n    margin: auto;\n    padding: 20px;\n    text-align: center;\n    font-family: Arial, sans-serif;\n}\n\n.ratty-app-page h1 {\n    color: #c62828;\n    font-size: clamp(28px, 6vw, 42px);\n}\n\n.ratty-install-box {\n    background: #fff5f5;\n    border: 2px solid #c62828;\n    border-radius: 16px;\n    padding: 30px 20px;\n    margin: 25px 0;\n}\n\n.ratty-install-button {\n    display: inline-block;\n    background: #c62828;\n    color: white !important;\n    padding: 17px 30px;\n    border-radius: 10px;\n    text-decoration: none !important;\n    font-size: 19px;\n    font-weight: bold;\n    border: none;\n    cursor: pointer;\n    margin: 15px 0;\n}\n\n.ratty-device {\n    background: #f7f7f7;\n    border-radius: 12px;\n    padding: 20px;\n    margin: 15px 0;\n    text-align: left;\n}\n\n.ratty-device h3 {\n    margin-top: 0;\n    color: #c62828;\n}\n\n.ratty-help {\n    background: #fff;\n    border: 1px solid #ddd;\n    border-radius: 12px;\n    padding: 20px;\n    margin-top: 25px;\n}\n\n@media (max-width: 600px) {\n    .ratty-app-page {\n        padding: 15px;\n    }\n\n    .ratty-install-button {\n        display: block;\n        width: 100%;\n        padding: 18px 10px;\n    }\n}\n<\/style>\n\n<div class=\"ratty-app-page\">\n\n    <h1>\ud83d\udcf1 Ratty Arms Community Pass<\/h1>\n\n    <p style=\"font-size:20px;\">\n        <strong>Your Community Pass, always with you \u2764\ufe0f<\/strong>\n    <\/p>\n\n    <p style=\"font-size:17px;line-height:1.6;\">\n        Install the Ratty Arms Community Pass on your device\n        for quick access whenever you visit us.\n    <\/p>\n\n\n    <div class=\"ratty-install-box\">\n\n        <h2 style=\"color:#c62828;\">\n            \ud83d\udcf2 Install Your Community Pass\n        <\/h2>\n\n        <p>\n            Add the Community Pass to your device for easy access.\n        <\/p>\n\n        <!-- PWA INSTALL BUTTON -->\n        <button id=\"ratty-install\"\n                class=\"ratty-install-button\"\n                type=\"button\">\n            \ud83d\udcf2 INSTALL COMMUNITY PASS\n        <\/button>\n\n        <p id=\"ratty-install-message\"\n           style=\"font-size:14px;color:#777;\">\n        <\/p>\n\n    <\/div>\n\n\n    <div class=\"ratty-device\">\n\n        <h3>\ud83c\udf4e iPhone &#038; iPad<\/h3>\n\n        <p>\n            Open this page in <strong>Safari<\/strong>.\n        <\/p>\n\n        <p>\n            Tap the <strong>Share<\/strong> button \u2192\n            <strong>Add to Home Screen<\/strong> \u2192\n            <strong>Add<\/strong>.\n        <\/p>\n\n    <\/div>\n\n\n    <div class=\"ratty-device\">\n\n        <h3>\ud83e\udd16 Android<\/h3>\n\n        <p>\n            Open this page in <strong>Chrome<\/strong>.\n        <\/p>\n\n        <p>\n            Tap <strong>INSTALL COMMUNITY PASS<\/strong> above,\n            or select <strong>Install App<\/strong> from the Chrome menu.\n        <\/p>\n\n    <\/div>\n\n\n    <div class=\"ratty-device\">\n\n        <h3>\ud83d\udcbb Chromebook \/ Tablet<\/h3>\n\n        <p>\n            Open this page in Chrome and select\n            <strong>Install App<\/strong> when offered.\n        <\/p>\n\n    <\/div>\n\n\n    <div class=\"ratty-help\">\n\n        <h2>\u2764\ufe0f Need help?<\/h2>\n\n        <p>\n            If you&#8217;re having trouble installing your Community Pass,\n            don&#8217;t worry.\n        <\/p>\n\n        <p>\n            Just pop into <strong>The Ratty Arms<\/strong> and we&#8217;ll\n            be happy to help you set it up.\n        <\/p>\n\n    <\/div>\n\n<\/div>\n\n\n<script>\nlet deferredPrompt;\n\nconst installButton = document.getElementById(\"ratty-install\");\nconst installMessage = document.getElementById(\"ratty-install-message\");\n\ninstallButton.style.display = \"none\";\n\nwindow.addEventListener(\"beforeinstallprompt\", (event) => {\n\n    event.preventDefault();\n\n    deferredPrompt = event;\n\n    installButton.style.display = \"inline-block\";\n\n    installMessage.textContent =\n        \"Tap the button above to install the Community Pass.\";\n\n});\n\ninstallButton.addEventListener(\"click\", async () => {\n\n    if (!deferredPrompt) {\n        installMessage.textContent =\n            \"If the install option doesn't appear, open this page in Chrome and use the browser menu \u2192 Install App.\";\n        return;\n    }\n\n    deferredPrompt.prompt();\n\n    const { outcome } = await deferredPrompt.userChoice;\n\n    deferredPrompt = null;\n\n    if (outcome === \"accepted\") {\n        installButton.style.display = \"none\";\n        installMessage.textContent =\n            \"The Community Pass is being installed. \u2764\ufe0f\";\n    }\n\n});\n\nwindow.addEventListener(\"appinstalled\", () => {\n\n    installButton.style.display = \"none\";\n\n    installMessage.textContent =\n        \"Community Pass installed successfully! \u2764\ufe0f\";\n\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcf1 Ratty Arms Community Pass Your Community Pass, always with you \u2764\ufe0f Install the Ratty Arms Community Pass on your device for quick access whenever you visit us. \ud83d\udcf2 Install Your Community Pass Add the Community Pass to your device for easy access. \ud83d\udcf2 INSTALL COMMUNITY PASS \ud83c\udf4e iPhone &#038; iPad Open this page in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-523","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/therattyarms.uk\/index.php?rest_route=\/wp\/v2\/pages\/523","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/therattyarms.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/therattyarms.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/therattyarms.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/therattyarms.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=523"}],"version-history":[{"count":2,"href":"https:\/\/therattyarms.uk\/index.php?rest_route=\/wp\/v2\/pages\/523\/revisions"}],"predecessor-version":[{"id":527,"href":"https:\/\/therattyarms.uk\/index.php?rest_route=\/wp\/v2\/pages\/523\/revisions\/527"}],"wp:attachment":[{"href":"https:\/\/therattyarms.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=523"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}