Motorhomes at Home \u2013 Customer Sign In<\/title>\r\n <style>\r\n :root{\r\n --brand:#1e3a8a;\r\n --bg:#f6f7fb;\r\n --card:#ffffff;\r\n --border:#e5e7eb;\r\n --text:#0f172a;\r\n --muted:#6b7280;\r\n --danger:#ef4444;\r\n --success:#16a34a;\r\n\r\n --hero-h: 320px;\r\n\r\n \/* \u2705 Width controls *\/\r\n --card-max: 1200px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{\r\n margin:0;padding:0;\r\n font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n background:var(--bg);color:var(--text);\r\n }\r\n a{text-decoration:none;color:inherit}\r\n\r\n \/* \u2705 HERO *\/\r\n .hero{\r\n position:relative;\r\n height:var(--hero-h);\r\n width:100%;\r\n overflow:hidden;\r\n background:\r\n linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.62) 70%, rgba(15,23,42,.78) 100%),\r\n url(\"https:\/\/images.unsplash.com\/photo-1527786356703-4b100091cd2c?auto=format&fit=crop&w=2400&q=80\");\r\n background-size:cover;\r\n background-position:center;\r\n background-repeat:no-repeat;\r\n border-bottom:1px solid rgba(255,255,255,.18);\r\n }\r\n .hero-inner{\r\n position:absolute; inset:0;\r\n display:flex; align-items:flex-end;\r\n padding:28px;\r\n }\r\n .hero-box{\r\n max-width:980px;\r\n color:#fff;\r\n padding:16px 18px;\r\n border-radius:18px;\r\n background:rgba(0,0,0,.22);\r\n border:1px solid rgba(255,255,255,.22);\r\n backdrop-filter: blur(6px);\r\n -webkit-backdrop-filter: blur(6px);\r\n }\r\n .hero-kicker{\r\n display:inline-flex; align-items:center; gap:8px;\r\n font-size:12px; letter-spacing:.12em; text-transform:uppercase;\r\n opacity:.9; margin:0 0 8px;\r\n }\r\n .hero-title{margin:0 0 6px;font-size:32px;line-height:1.12;}\r\n .hero-sub{margin:0;font-size:14px;opacity:.92;max-width:80ch;}\r\n\r\n \/* PAGE *\/\r\n .page{\r\n width:100%;\r\n max-width:none;\r\n margin:0;\r\n padding:24px;\r\n margin-top:-26px;\r\n position:relative;\r\n z-index:2;\r\n }\r\n @media (max-width:700px){\r\n .page{padding:14px;margin-top:0;}\r\n .hero{height:240px;}\r\n .hero-inner{padding:16px;}\r\n .hero-title{font-size:24px;}\r\n }\r\n\r\n .card{\r\n background:var(--card);\r\n border-radius:14px;\r\n border:1px solid var(--border);\r\n padding:22px 22px 18px;\r\n box-shadow:0 10px 25px rgba(15,23,42,.04);\r\n max-width:var(--card-max);\r\n margin:0 auto;\r\n }\r\n\r\n .head{margin-bottom:12px;}\r\n .head h1{margin:0 0 4px;font-size:1.5rem;color:var(--brand);}\r\n .head p{margin:0;color:var(--muted);font-size:.95rem;}\r\n\r\n .pill{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n border-radius:999px;\r\n padding:6px 10px;\r\n background:#e0ebff;\r\n color:var(--brand);\r\n font-size:.8rem;\r\n font-weight:500;\r\n margin-top:10px;\r\n }\r\n\r\n .field{margin-bottom:10px;}\r\n label{\r\n display:block;\r\n font-size:.86rem;\r\n font-weight:600;\r\n margin-bottom:4px;\r\n color:var(--text);\r\n }\r\n input[type=\"email\"], input[type=\"password\"], input[type=\"text\"]{\r\n width:100%;\r\n padding:10px 10px;\r\n border-radius:10px;\r\n border:1px solid var(--border);\r\n font-size:.95rem;\r\n font-family:inherit;\r\n background:#f9fafb;\r\n }\r\n input:focus{\r\n outline:2px solid #bfdbfe;\r\n border-color:#60a5fa;\r\n background:#ffffff;\r\n }\r\n\r\n \/* \u2705 Two-column layout on desktop *\/\r\n .form-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:14px;\r\n margin-top:10px;\r\n }\r\n @media (max-width:820px){\r\n .form-grid{grid-template-columns:1fr;}\r\n }\r\n\r\n .pw-wrap{position:relative;}\r\n .pw-toggle{\r\n position:absolute;\r\n right:10px;\r\n top:50%;\r\n transform:translateY(-50%);\r\n font-size:.82rem;\r\n color:var(--brand);\r\n cursor:pointer;\r\n user-select:none;\r\n }\r\n\r\n .row{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:10px;\r\n flex-wrap:wrap;\r\n margin:10px 0 6px;\r\n }\r\n .checkbox{\r\n display:flex;\r\n align-items:center;\r\n gap:8px;\r\n font-size:.9rem;\r\n color:var(--muted);\r\n }\r\n .link{color:var(--brand);font-size:.9rem;}\r\n .link:hover{text-decoration:underline;}\r\n\r\n .btn{\r\n width:100%;\r\n border:none;\r\n cursor:pointer;\r\n font-family:inherit;\r\n font-size:.95rem;\r\n border-radius:999px;\r\n padding:10px 16px;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:8px;\r\n font-weight:700;\r\n background:var(--brand);\r\n color:#fff;\r\n margin-top:8px;\r\n }\r\n .btn:hover{opacity:.95}\r\n\r\n .alert{\r\n margin-top:12px;\r\n padding:10px 12px;\r\n border-radius:12px;\r\n font-size:.95rem;\r\n display:none;\r\n }\r\n .alert.bad{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.25);color:#991b1b;}\r\n .alert.ok{background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.25);color:#065f46;}\r\n\r\n .divider{\r\n height:1px;\r\n background:linear-gradient(90deg,transparent,rgba(15,23,42,.16),transparent);\r\n margin:14px 0;\r\n }\r\n .footer{\r\n color:var(--muted);\r\n font-size:.8rem;\r\n text-align:center;\r\n margin-top:8px;\r\n line-height:1.4;\r\n }\r\n\r\n .tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px;}\r\n .tag{\r\n display:inline-flex;align-items:center;gap:6px;\r\n background:#f1f5f9;border:1px solid var(--border);\r\n padding:6px 10px;border-radius:999px;\r\n color:var(--muted);font-size:12px\r\n }\r\n code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"hero\" aria-label=\"Customer sign-in hero image\">\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-box\">\r\n <div class=\"hero-kicker\">\u25cf Customer account<\/div>\r\n <h1 class=\"hero-title\">Sign in to your account<\/h1>\r\n <p class=\"hero-sub\">Manage your bookings, messages, and saved locations all in one place.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"page\">\r\n <main class=\"card\" aria-labelledby=\"title\">\r\n <div class=\"head\">\r\n <h1 id=\"title\">Customer Sign In<\/h1>\r\n <p>Use your email and password to access your account.<\/p>\r\n <div class=\"pill\">\u25cf Demo login <span style=\"font-weight:400;\">stored in this browser<\/span><\/div>\r\n\r\n <div class=\"tags\" aria-label=\"Demo credentials\">\r\n <span class=\"tag\">Customer \u2192 <strong>guest@mhah<\/strong> \/ <code>guest123<\/code><\/span>\r\n <span class=\"tag\">Customer \u2192 <strong>rob@mhah<\/strong> \/ <code>rob123<\/code><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"loginForm\">\r\n <div class=\"form-grid\">\r\n <div class=\"field\">\r\n <label for=\"email\">Email<\/label>\r\n <input id=\"email\" type=\"email\" placeholder=\"you@example.com\" autocomplete=\"username\" required \/>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"password\">Password<\/label>\r\n <div class=\"pw-wrap\">\r\n <input id=\"password\" type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" autocomplete=\"current-password\" required \/>\r\n <span id=\"togglePw\" class=\"pw-toggle\" aria-label=\"Show password\">Show<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <label class=\"checkbox\"><input id=\"remember\" type=\"checkbox\" \/> Remember me<\/label>\r\n <a class=\"link\" href=\"#\" id=\"forgot\">Forgot password?<\/a>\r\n <\/div>\r\n\r\n <button class=\"btn\" type=\"submit\" id=\"loginBtn\">\ud83d\udd11 Sign in<\/button>\r\n\r\n <div id=\"status\" class=\"alert bad\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n <div class=\"divider\"><\/div>\r\n\r\n <div class=\"footer\">\r\n Front-end prototype using <code>localStorage<\/code>. Replace with real authentication for production.\r\n <\/div>\r\n <\/form>\r\n <\/main>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n const $ = s => document.querySelector(s);\r\n\r\n const DB = {\r\n read(k,f){ try{return JSON.parse(localStorage.getItem(k)) ?? f}catch{return f} },\r\n write(k,v){ localStorage.setItem(k, JSON.stringify(v)); }\r\n };\r\n\r\n const KEY_USERS = 'mhah_customer_users_v1';\r\n const KEY_SEEDED = 'mhah_customer_seeded_v1';\r\n const KEY_SESSION = 'mhah_customer_session_v1';\r\n const KEY_REMEMBER = 'mhah_customer_remember_email_v1';\r\n\r\n \/\/ Seed demo users once\r\n (function seed(){\r\n if(DB.read(KEY_SEEDED,false)) return;\r\n DB.write(KEY_USERS, [\r\n {email:'guest@mhah', pw:'guest123', name:'Guest Customer'},\r\n {email:'rob@mhah', pw:'rob123', name:'Rob Customer'}\r\n ]);\r\n DB.write(KEY_SEEDED, true);\r\n })();\r\n\r\n \/\/ Remembered email\r\n (function loadRemember(){\r\n const saved = localStorage.getItem(KEY_REMEMBER);\r\n if(saved) $('#email').value = saved;\r\n })();\r\n\r\n \/\/ Toggle password\r\n $('#togglePw').addEventListener('click', ()=>{\r\n const input = $('#password');\r\n const isPw = input.type === 'password';\r\n input.type = isPw ? 'text' : 'password';\r\n $('#togglePw').textContent = isPw ? 'Hide' : 'Show';\r\n $('#togglePw').setAttribute('aria-label', isPw ? 'Hide password' : 'Show password');\r\n });\r\n\r\n \/\/ Forgot (demo)\r\n $('#forgot').addEventListener('click', (e)=>{\r\n e.preventDefault();\r\n const email = ($('#email').value || 'your email').trim();\r\n toast(`Password reset link sent to ${email} (demo).`, true);\r\n });\r\n\r\n function toast(msg, ok=false){\r\n const s = $('#status');\r\n s.textContent = msg;\r\n s.className = 'alert ' + (ok ? 'ok' : 'bad');\r\n s.style.display = 'block';\r\n setTimeout(()=>{ s.style.display='none'; }, 3500);\r\n }\r\n\r\n \/\/ Login\r\n $('#loginForm').addEventListener('submit', (e)=>{\r\n e.preventDefault();\r\n\r\n const email = $('#email').value.trim();\r\n const pw = $('#password').value.trim();\r\n\r\n if(!email || !pw){\r\n toast('Enter email and password');\r\n return;\r\n }\r\n\r\n const users = DB.read(KEY_USERS, []);\r\n const user = users.find(u => u.email === email && u.pw === pw);\r\n\r\n if(!user){\r\n toast('Invalid email or password');\r\n return;\r\n }\r\n\r\n if($('#remember').checked){\r\n localStorage.setItem(KEY_REMEMBER, email);\r\n }else{\r\n localStorage.removeItem(KEY_REMEMBER);\r\n }\r\n\r\n localStorage.setItem(KEY_SESSION, JSON.stringify({\r\n email: user.email,\r\n name: user.name,\r\n ts: Date.now()\r\n }));\r\n\r\n toast('Signed in successfully', true);\r\n \/\/ window.location.href = '\/customer-dashboard.html';\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Motorhomes at Home \u2013 Customer Sign In \u25cf Customer account Sign in to your account Manage your bookings, messages, and saved locations all in one place. Customer Sign In Use your email and password to access your account. \u25cf Demo login stored in this browser Customer \u2192 guest@mhah \/ guest123 Customer \u2192 rob@mhah \/ rob123 Email Password Show Remember me Forgot password? \ud83d\udd11 Sign in Front-end prototype using localStorage. Replace with real authentication for production.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-139","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":12,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Motorhomes at Home \u2013 Customer Sign In<\/title>\r\n <style>\r\n :root{\r\n --brand:#1e3a8a;\r\n --bg:#f6f7fb;\r\n --card:#ffffff;\r\n --border:#e5e7eb;\r\n --text:#0f172a;\r\n --muted:#6b7280;\r\n --danger:#ef4444;\r\n --success:#16a34a;\r\n\r\n --hero-h: 320px;\r\n\r\n \/* \u2705 Width controls *\/\r\n --card-max: 1200px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{\r\n margin:0;padding:0;\r\n font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n background:var(--bg);color:var(--text);\r\n }\r\n a{text-decoration:none;color:inherit}\r\n\r\n \/* \u2705 HERO *\/\r\n .hero{\r\n position:relative;\r\n height:var(--hero-h);\r\n width:100%;\r\n overflow:hidden;\r\n background:\r\n linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.62) 70%, rgba(15,23,42,.78) 100%),\r\n url(\"https:\/\/images.unsplash.com\/photo-1527786356703-4b100091cd2c?auto=format&fit=crop&w=2400&q=80\");\r\n background-size:cover;\r\n background-position:center;\r\n background-repeat:no-repeat;\r\n border-bottom:1px solid rgba(255,255,255,.18);\r\n }\r\n .hero-inner{\r\n position:absolute; inset:0;\r\n display:flex; align-items:flex-end;\r\n padding:28px;\r\n }\r\n .hero-box{\r\n max-width:980px;\r\n color:#fff;\r\n padding:16px 18px;\r\n border-radius:18px;\r\n background:rgba(0,0,0,.22);\r\n border:1px solid rgba(255,255,255,.22);\r\n backdrop-filter: blur(6px);\r\n -webkit-backdrop-filter: blur(6px);\r\n }\r\n .hero-kicker{\r\n display:inline-flex; align-items:center; gap:8px;\r\n font-size:12px; letter-spacing:.12em; text-transform:uppercase;\r\n opacity:.9; margin:0 0 8px;\r\n }\r\n .hero-title{margin:0 0 6px;font-size:32px;line-height:1.12;}\r\n .hero-sub{margin:0;font-size:14px;opacity:.92;max-width:80ch;}\r\n\r\n \/* PAGE *\/\r\n .page{\r\n width:100%;\r\n max-width:none;\r\n margin:0;\r\n padding:24px;\r\n margin-top:-26px;\r\n position:relative;\r\n z-index:2;\r\n }\r\n @media (max-width:700px){\r\n .page{padding:14px;margin-top:0;}\r\n .hero{height:240px;}\r\n .hero-inner{padding:16px;}\r\n .hero-title{font-size:24px;}\r\n }\r\n\r\n .card{\r\n background:var(--card);\r\n border-radius:14px;\r\n border:1px solid var(--border);\r\n padding:22px 22px 18px;\r\n box-shadow:0 10px 25px rgba(15,23,42,.04);\r\n max-width:var(--card-max);\r\n margin:0 auto;\r\n }\r\n\r\n .head{margin-bottom:12px;}\r\n .head h1{margin:0 0 4px;font-size:1.5rem;color:var(--brand);}\r\n .head p{margin:0;color:var(--muted);font-size:.95rem;}\r\n\r\n .pill{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n border-radius:999px;\r\n padding:6px 10px;\r\n background:#e0ebff;\r\n color:var(--brand);\r\n font-size:.8rem;\r\n font-weight:500;\r\n margin-top:10px;\r\n }\r\n\r\n .field{margin-bottom:10px;}\r\n label{\r\n display:block;\r\n font-size:.86rem;\r\n font-weight:600;\r\n margin-bottom:4px;\r\n color:var(--text);\r\n }\r\n input[type=\"email\"], input[type=\"password\"], input[type=\"text\"]{\r\n width:100%;\r\n padding:10px 10px;\r\n border-radius:10px;\r\n border:1px solid var(--border);\r\n font-size:.95rem;\r\n font-family:inherit;\r\n background:#f9fafb;\r\n }\r\n input:focus{\r\n outline:2px solid #bfdbfe;\r\n border-color:#60a5fa;\r\n background:#ffffff;\r\n }\r\n\r\n \/* \u2705 Two-column layout on desktop *\/\r\n .form-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:14px;\r\n margin-top:10px;\r\n }\r\n @media (max-width:820px){\r\n .form-grid{grid-template-columns:1fr;}\r\n }\r\n\r\n .pw-wrap{position:relative;}\r\n .pw-toggle{\r\n position:absolute;\r\n right:10px;\r\n top:50%;\r\n transform:translateY(-50%);\r\n font-size:.82rem;\r\n color:var(--brand);\r\n cursor:pointer;\r\n user-select:none;\r\n }\r\n\r\n .row{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:10px;\r\n flex-wrap:wrap;\r\n margin:10px 0 6px;\r\n }\r\n .checkbox{\r\n display:flex;\r\n align-items:center;\r\n gap:8px;\r\n font-size:.9rem;\r\n color:var(--muted);\r\n }\r\n .link{color:var(--brand);font-size:.9rem;}\r\n .link:hover{text-decoration:underline;}\r\n\r\n .btn{\r\n width:100%;\r\n border:none;\r\n cursor:pointer;\r\n font-family:inherit;\r\n font-size:.95rem;\r\n border-radius:999px;\r\n padding:10px 16px;\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n gap:8px;\r\n font-weight:700;\r\n background:var(--brand);\r\n color:#fff;\r\n margin-top:8px;\r\n }\r\n .btn:hover{opacity:.95}\r\n\r\n .alert{\r\n margin-top:12px;\r\n padding:10px 12px;\r\n border-radius:12px;\r\n font-size:.95rem;\r\n display:none;\r\n }\r\n .alert.bad{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.25);color:#991b1b;}\r\n .alert.ok{background:rgba(22,163,74,.10);border:1px solid rgba(22,163,74,.25);color:#065f46;}\r\n\r\n .divider{\r\n height:1px;\r\n background:linear-gradient(90deg,transparent,rgba(15,23,42,.16),transparent);\r\n margin:14px 0;\r\n }\r\n .footer{\r\n color:var(--muted);\r\n font-size:.8rem;\r\n text-align:center;\r\n margin-top:8px;\r\n line-height:1.4;\r\n }\r\n\r\n .tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px;}\r\n .tag{\r\n display:inline-flex;align-items:center;gap:6px;\r\n background:#f1f5f9;border:1px solid var(--border);\r\n padding:6px 10px;border-radius:999px;\r\n color:var(--muted);font-size:12px\r\n }\r\n code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"hero\" aria-label=\"Customer sign-in hero image\">\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-box\">\r\n <div class=\"hero-kicker\">\u25cf Customer account<\/div>\r\n <h1 class=\"hero-title\">Sign in to your account<\/h1>\r\n <p class=\"hero-sub\">Manage your bookings, messages, and saved locations all in one place.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"page\">\r\n <main class=\"card\" aria-labelledby=\"title\">\r\n <div class=\"head\">\r\n <h1 id=\"title\">Customer Sign In<\/h1>\r\n <p>Use your email and password to access your account.<\/p>\r\n <div class=\"pill\">\u25cf Demo login <span style=\"font-weight:400;\">stored in this browser<\/span><\/div>\r\n\r\n <div class=\"tags\" aria-label=\"Demo credentials\">\r\n <span class=\"tag\">Customer \u2192 <strong>guest@mhah<\/strong> \/ <code>guest123<\/code><\/span>\r\n <span class=\"tag\">Customer \u2192 <strong>rob@mhah<\/strong> \/ <code>rob123<\/code><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"loginForm\">\r\n <div class=\"form-grid\">\r\n <div class=\"field\">\r\n <label for=\"email\">Email<\/label>\r\n <input id=\"email\" type=\"email\" placeholder=\"you@example.com\" autocomplete=\"username\" required \/>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"password\">Password<\/label>\r\n <div class=\"pw-wrap\">\r\n <input id=\"password\" type=\"password\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" autocomplete=\"current-password\" required \/>\r\n <span id=\"togglePw\" class=\"pw-toggle\" aria-label=\"Show password\">Show<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"row\">\r\n <label class=\"checkbox\"><input id=\"remember\" type=\"checkbox\" \/> Remember me<\/label>\r\n <a class=\"link\" href=\"#\" id=\"forgot\">Forgot password?<\/a>\r\n <\/div>\r\n\r\n <button class=\"btn\" type=\"submit\" id=\"loginBtn\">\ud83d\udd11 Sign in<\/button>\r\n\r\n <div id=\"status\" class=\"alert bad\" role=\"status\" aria-live=\"polite\"><\/div>\r\n\r\n <div class=\"divider\"><\/div>\r\n\r\n <div class=\"footer\">\r\n Front-end prototype using <code>localStorage<\/code>. Replace with real authentication for production.\r\n <\/div>\r\n <\/form>\r\n <\/main>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n const $ = s => document.querySelector(s);\r\n\r\n const DB = {\r\n read(k,f){ try{return JSON.parse(localStorage.getItem(k)) ?? f}catch{return f} },\r\n write(k,v){ localStorage.setItem(k, JSON.stringify(v)); }\r\n };\r\n\r\n const KEY_USERS = 'mhah_customer_users_v1';\r\n const KEY_SEEDED = 'mhah_customer_seeded_v1';\r\n const KEY_SESSION = 'mhah_customer_session_v1';\r\n const KEY_REMEMBER = 'mhah_customer_remember_email_v1';\r\n\r\n \/\/ Seed demo users once\r\n (function seed(){\r\n if(DB.read(KEY_SEEDED,false)) return;\r\n DB.write(KEY_USERS, [\r\n {email:'guest@mhah', pw:'guest123', name:'Guest Customer'},\r\n {email:'rob@mhah', pw:'rob123', name:'Rob Customer'}\r\n ]);\r\n DB.write(KEY_SEEDED, true);\r\n })();\r\n\r\n \/\/ Remembered email\r\n (function loadRemember(){\r\n const saved = localStorage.getItem(KEY_REMEMBER);\r\n if(saved) $('#email').value = saved;\r\n })();\r\n\r\n \/\/ Toggle password\r\n $('#togglePw').addEventListener('click', ()=>{\r\n const input = $('#password');\r\n const isPw = input.type === 'password';\r\n input.type = isPw ? 'text' : 'password';\r\n $('#togglePw').textContent = isPw ? 'Hide' : 'Show';\r\n $('#togglePw').setAttribute('aria-label', isPw ? 'Hide password' : 'Show password');\r\n });\r\n\r\n \/\/ Forgot (demo)\r\n $('#forgot').addEventListener('click', (e)=>{\r\n e.preventDefault();\r\n const email = ($('#email').value || 'your email').trim();\r\n toast(`Password reset link sent to ${email} (demo).`, true);\r\n });\r\n\r\n function toast(msg, ok=false){\r\n const s = $('#status');\r\n s.textContent = msg;\r\n s.className = 'alert ' + (ok ? 'ok' : 'bad');\r\n s.style.display = 'block';\r\n setTimeout(()=>{ s.style.display='none'; }, 3500);\r\n }\r\n\r\n \/\/ Login\r\n $('#loginForm').addEventListener('submit', (e)=>{\r\n e.preventDefault();\r\n\r\n const email = $('#email').value.trim();\r\n const pw = $('#password').value.trim();\r\n\r\n if(!email || !pw){\r\n toast('Enter email and password');\r\n return;\r\n }\r\n\r\n const users = DB.read(KEY_USERS, []);\r\n const user = users.find(u => u.email === email && u.pw === pw);\r\n\r\n if(!user){\r\n toast('Invalid email or password');\r\n return;\r\n }\r\n\r\n if($('#remember').checked){\r\n localStorage.setItem(KEY_REMEMBER, email);\r\n }else{\r\n localStorage.removeItem(KEY_REMEMBER);\r\n }\r\n\r\n localStorage.setItem(KEY_SESSION, JSON.stringify({\r\n email: user.email,\r\n name: user.name,\r\n ts: Date.now()\r\n }));\r\n\r\n toast('Signed in successfully', true);\r\n \/\/ window.location.href = '\/customer-dashboard.html';\r\n });\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Motorhomes at Home \u2013 Customer Sign In \u25cf Customer account Sign in to your account Manage your bookings, messages, and saved locations all in one place. Customer Sign In Use your email and password to access your account. \u25cf Demo login stored in this browser Customer \u2192 guest@mhah \/ guest123 Customer \u2192 rob@mhah \/ rob123 Email Password Show Remember me Forgot password? \ud83d\udd11 Sign in Front-end prototype using localStorage. Replace with real authentication for production.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-139","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/139","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=139"}],"version-history":[{"count":12,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions"}],"predecessor-version":[{"id":276,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/139\/revisions\/276"}],"wp:attachment":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}