Host Login Panel<\/title>\r\n <style>\r\n :root{\r\n --brand:#1e3a8a;\r\n --accent:#22c55e;\r\n --muted:#64748b;\r\n --bad:#ef4444;\r\n --ok:#10b981;\r\n\r\n \/* White theme *\/\r\n --bg:#ffffff;\r\n --surface:#ffffff;\r\n --line:rgba(15,23,42,.12);\r\n --ink:#0f172a;\r\n --input:#f8fafc;\r\n\r\n \/* TRUE edge-to-edge *\/\r\n --page-pad:0px; \/* \u2705 edge-to-edge *\/\r\n --radius:18px;\r\n --shadow:0 18px 50px rgba(15,23,42,.12);\r\n }\r\n\r\n *{box-sizing:border-box}\r\n html,body{height:100%;margin:0}\r\n\r\n body{\r\n font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;\r\n background:var(--bg);\r\n color:var(--ink);\r\n }\r\n\r\n \/* Full-width wrapper *\/\r\n .page{\r\n width:100%;\r\n padding:var(--page-pad);\r\n }\r\n\r\n \/* No max-width: truly full width *\/\r\n .container{\r\n width:100%;\r\n margin:0;\r\n }\r\n\r\n \/* HERO (full width) *\/\r\n .hero{\r\n position:relative;\r\n height:340px;\r\n overflow:hidden;\r\n border-bottom:1px solid var(--line);\r\n background:\r\n linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.55) 80%),\r\n url(\"HERO_IMAGE_URL_HERE\");\r\n background-size:cover;\r\n background-position:center;\r\n background-repeat:no-repeat;\r\n }\r\n .hero-inner{\r\n position:absolute;\r\n inset:0;\r\n display:flex;\r\n align-items:flex-end;\r\n padding:28px;\r\n }\r\n .hero-box{\r\n max-width:760px;\r\n color:#fff;\r\n padding:16px 16px;\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-box .kicker{\r\n font-size:12px;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n opacity:.85;\r\n margin:0 0 6px;\r\n }\r\n .hero-box h1{\r\n margin:0 0 6px;\r\n font-size:30px;\r\n line-height:1.15;\r\n }\r\n .hero-box p{\r\n margin:0;\r\n font-size:14px;\r\n opacity:.92;\r\n }\r\n\r\n \/* CARD (full width section) *\/\r\n .card{\r\n width:100%;\r\n background:var(--surface);\r\n border-top:1px solid var(--line);\r\n padding:32px 28px 34px;\r\n }\r\n\r\n \/* Inner content width for readability (still looks full width) *\/\r\n .card-inner{\r\n width:100%;\r\n max-width:1400px;\r\n margin:0 auto;\r\n background:var(--surface);\r\n border:1px solid var(--line);\r\n border-radius:22px;\r\n box-shadow:var(--shadow);\r\n padding:28px;\r\n }\r\n\r\n .brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}\r\n .logo{\r\n width:46px;height:46px;border-radius:14px;\r\n background:var(--brand);\r\n display:grid;place-items:center;\r\n font-weight:900;color:#fff\r\n }\r\n h2{margin:0;font-size:22px}\r\n p.muted{margin:6px 0 18px;color:var(--muted);font-size:14px}\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:14px;\r\n }\r\n\r\n label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}\r\n input[type=\"email\"],input[type=\"password\"],input[type=\"text\"],select{\r\n width:100%;\r\n padding:12px 12px;\r\n border-radius:14px;\r\n background:var(--input);\r\n border:1px solid var(--line);\r\n color:var(--ink);\r\n outline:none;\r\n transition:.2s ease;\r\n }\r\n input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"text\"]:focus,select:focus{\r\n border-color:rgba(30,58,138,.45);\r\n box-shadow:0 0 0 4px rgba(30,58,138,.14);\r\n }\r\n\r\n .btn{\r\n width:100%;\r\n padding:12px;\r\n border-radius:14px;\r\n border:none;\r\n background:var(--brand);\r\n color:#fff;\r\n font-weight:800;\r\n cursor:pointer;\r\n transition:.2s ease;\r\n margin-top:12px;\r\n }\r\n .btn:hover{filter:brightness(1.05)}\r\n .btn:disabled{opacity:.6;cursor:not-allowed}\r\n\r\n .alt{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n margin-top:10px;\r\n gap:12px;\r\n flex-wrap:wrap\r\n }\r\n .link{color:var(--brand);text-decoration:none;font-size:13px}\r\n .link:hover{text-decoration:underline}\r\n\r\n .tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}\r\n .tag{\r\n display:inline-flex;align-items:center;gap:6px;\r\n background:#f1f5f9;\r\n border:1px solid var(--line);\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\r\n .alert{margin-top:12px;padding:10px 12px;border-radius:14px;font-size:14px}\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(16,185,129,.10);border:1px solid rgba(16,185,129,.25);color:#065f46}\r\n\r\n .footer{margin-top:14px;color:var(--muted);font-size:12px;text-align:center}\r\n .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(15,23,42,.16),transparent);margin:16px 0}\r\n .checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}\r\n\r\n .pw-wrap{position:relative}\r\n .pw-toggle{\r\n position:absolute;right:12px;top:50%;transform:translateY(-50%);\r\n font-size:12px;color:var(--brand);\r\n cursor:pointer;user-select:none\r\n }\r\n\r\n @media (max-width:860px){\r\n .hero{height:260px}\r\n .grid{grid-template-columns:1fr}\r\n .card{padding:20px 14px 22px}\r\n .card-inner{padding:18px}\r\n .hero-inner{padding:18px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"page\">\r\n <div class=\"container\">\r\n\r\n <div class=\"hero\" role=\"img\" aria-label=\"Host portal hero image\">\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-box\">\r\n <div class=\"kicker\">Host Portal<\/div>\r\n <h1>Manage your listings, bookings & payouts<\/h1>\r\n <p>Secure sign-in for hosts and admins.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"card\" aria-label=\"Login section\">\r\n <main class=\"card-inner\" aria-labelledby=\"title\">\r\n <div class=\"brand\">\r\n <div class=\"logo\">H<\/div>\r\n <div>\r\n <h2 id=\"title\">Host Login<\/h2>\r\n <p class=\"muted\">Sign in to manage your hosting. Demo credentials below.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tags\">\r\n <span class=\"tag\">Admin \u2192 <strong>admin@host<\/strong> \/ <code>admin123<\/code><\/span>\r\n <span class=\"tag\">Super Admin \u2192 <strong>root@host<\/strong> \/ <code>root123<\/code><\/span>\r\n <\/div>\r\n\r\n <div class=\"grid\">\r\n <div>\r\n <label for=\"email\">Email<\/label>\r\n <input id=\"email\" type=\"email\" placeholder=\"you@host\" autocomplete=\"username\" \/>\r\n <\/div>\r\n\r\n <div>\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\" \/>\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=\"alt\">\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\" id=\"loginBtn\">Sign in<\/button>\r\n\r\n <div id=\"status\" class=\"alert bad\" role=\"status\" aria-live=\"polite\" style=\"display:none\"><\/div>\r\n\r\n <div class=\"divider\"><\/div>\r\n\r\n <div class=\"footer\">Front-end demo (localStorage). Replace with real auth for production.<\/div>\r\n <\/main>\r\n <\/section>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const $ = s => document.querySelector(s);\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 \/\/ Seed demo accounts once\r\n (function seed(){\r\n if(DB.read('seededHostLogin',false)) return;\r\n DB.write('authHostLogin', [\r\n {email:'admin@host', pw:'admin123', role:'admin'},\r\n {email:'root@host', pw:'root123', role:'super'}\r\n ]);\r\n DB.write('seededHostLogin', true);\r\n })();\r\n\r\n \/\/ Remember me\r\n (function loadRemembered(){\r\n const u = localStorage.getItem('hostLoginRemember');\r\n if(u) $('#email').value = u;\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 password (demo)\r\n $('#forgot').addEventListener('click', (e)=>{\r\n e.preventDefault();\r\n const email = $('#email').value.trim() || 'your email';\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 \/\/ Validate & login (demo only)\r\n $('#loginBtn').addEventListener('click', ()=>{\r\n const email = $('#email').value.trim();\r\n const pw = $('#password').value.trim();\r\n if(!email || !pw){ toast('Enter email and password'); return; }\r\n\r\n const table = DB.read('authHostLogin', []);\r\n const user = table.find(u=>u.email===email && u.pw===pw);\r\n\r\n if(!user){ toast('Invalid email or password'); return; }\r\n\r\n if($('#remember').checked) localStorage.setItem('hostLoginRemember', email);\r\n\r\n \/\/ Store session (demo)\r\n localStorage.setItem('hostLoginSession', JSON.stringify({email:user.email, role:user.role, ts:Date.now()}));\r\n toast('Signed in successfully', true);\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>Host Login Panel Host Portal Manage your listings, bookings & payouts Secure sign-in for hosts and admins. H Host Login Sign in to manage your hosting. Demo credentials below. Admin \u2192 admin@host \/ admin123 Super Admin \u2192 root@host \/ root123 Email Password Show Remember me Forgot password? Sign in Front-end demo (localStorage). Replace with real auth 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-154","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/154","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=154"}],"version-history":[{"count":16,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions\/255"}],"wp:attachment":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=154"}],"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 Host Login Panel<\/title>\r\n <style>\r\n :root{\r\n --brand:#1e3a8a;\r\n --accent:#22c55e;\r\n --muted:#64748b;\r\n --bad:#ef4444;\r\n --ok:#10b981;\r\n\r\n \/* White theme *\/\r\n --bg:#ffffff;\r\n --surface:#ffffff;\r\n --line:rgba(15,23,42,.12);\r\n --ink:#0f172a;\r\n --input:#f8fafc;\r\n\r\n \/* TRUE edge-to-edge *\/\r\n --page-pad:0px; \/* \u2705 edge-to-edge *\/\r\n --radius:18px;\r\n --shadow:0 18px 50px rgba(15,23,42,.12);\r\n }\r\n\r\n *{box-sizing:border-box}\r\n html,body{height:100%;margin:0}\r\n\r\n body{\r\n font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;\r\n background:var(--bg);\r\n color:var(--ink);\r\n }\r\n\r\n \/* Full-width wrapper *\/\r\n .page{\r\n width:100%;\r\n padding:var(--page-pad);\r\n }\r\n\r\n \/* No max-width: truly full width *\/\r\n .container{\r\n width:100%;\r\n margin:0;\r\n }\r\n\r\n \/* HERO (full width) *\/\r\n .hero{\r\n position:relative;\r\n height:340px;\r\n overflow:hidden;\r\n border-bottom:1px solid var(--line);\r\n background:\r\n linear-gradient(180deg, rgba(15,23,42,.10) 0%, rgba(15,23,42,.55) 80%),\r\n url(\"HERO_IMAGE_URL_HERE\");\r\n background-size:cover;\r\n background-position:center;\r\n background-repeat:no-repeat;\r\n }\r\n .hero-inner{\r\n position:absolute;\r\n inset:0;\r\n display:flex;\r\n align-items:flex-end;\r\n padding:28px;\r\n }\r\n .hero-box{\r\n max-width:760px;\r\n color:#fff;\r\n padding:16px 16px;\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-box .kicker{\r\n font-size:12px;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n opacity:.85;\r\n margin:0 0 6px;\r\n }\r\n .hero-box h1{\r\n margin:0 0 6px;\r\n font-size:30px;\r\n line-height:1.15;\r\n }\r\n .hero-box p{\r\n margin:0;\r\n font-size:14px;\r\n opacity:.92;\r\n }\r\n\r\n \/* CARD (full width section) *\/\r\n .card{\r\n width:100%;\r\n background:var(--surface);\r\n border-top:1px solid var(--line);\r\n padding:32px 28px 34px;\r\n }\r\n\r\n \/* Inner content width for readability (still looks full width) *\/\r\n .card-inner{\r\n width:100%;\r\n max-width:1400px;\r\n margin:0 auto;\r\n background:var(--surface);\r\n border:1px solid var(--line);\r\n border-radius:22px;\r\n box-shadow:var(--shadow);\r\n padding:28px;\r\n }\r\n\r\n .brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}\r\n .logo{\r\n width:46px;height:46px;border-radius:14px;\r\n background:var(--brand);\r\n display:grid;place-items:center;\r\n font-weight:900;color:#fff\r\n }\r\n h2{margin:0;font-size:22px}\r\n p.muted{margin:6px 0 18px;color:var(--muted);font-size:14px}\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:14px;\r\n }\r\n\r\n label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}\r\n input[type=\"email\"],input[type=\"password\"],input[type=\"text\"],select{\r\n width:100%;\r\n padding:12px 12px;\r\n border-radius:14px;\r\n background:var(--input);\r\n border:1px solid var(--line);\r\n color:var(--ink);\r\n outline:none;\r\n transition:.2s ease;\r\n }\r\n input[type=\"email\"]:focus,input[type=\"password\"]:focus,input[type=\"text\"]:focus,select:focus{\r\n border-color:rgba(30,58,138,.45);\r\n box-shadow:0 0 0 4px rgba(30,58,138,.14);\r\n }\r\n\r\n .btn{\r\n width:100%;\r\n padding:12px;\r\n border-radius:14px;\r\n border:none;\r\n background:var(--brand);\r\n color:#fff;\r\n font-weight:800;\r\n cursor:pointer;\r\n transition:.2s ease;\r\n margin-top:12px;\r\n }\r\n .btn:hover{filter:brightness(1.05)}\r\n .btn:disabled{opacity:.6;cursor:not-allowed}\r\n\r\n .alt{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n margin-top:10px;\r\n gap:12px;\r\n flex-wrap:wrap\r\n }\r\n .link{color:var(--brand);text-decoration:none;font-size:13px}\r\n .link:hover{text-decoration:underline}\r\n\r\n .tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}\r\n .tag{\r\n display:inline-flex;align-items:center;gap:6px;\r\n background:#f1f5f9;\r\n border:1px solid var(--line);\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\r\n .alert{margin-top:12px;padding:10px 12px;border-radius:14px;font-size:14px}\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(16,185,129,.10);border:1px solid rgba(16,185,129,.25);color:#065f46}\r\n\r\n .footer{margin-top:14px;color:var(--muted);font-size:12px;text-align:center}\r\n .divider{height:1px;background:linear-gradient(90deg,transparent,rgba(15,23,42,.16),transparent);margin:16px 0}\r\n .checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}\r\n\r\n .pw-wrap{position:relative}\r\n .pw-toggle{\r\n position:absolute;right:12px;top:50%;transform:translateY(-50%);\r\n font-size:12px;color:var(--brand);\r\n cursor:pointer;user-select:none\r\n }\r\n\r\n @media (max-width:860px){\r\n .hero{height:260px}\r\n .grid{grid-template-columns:1fr}\r\n .card{padding:20px 14px 22px}\r\n .card-inner{padding:18px}\r\n .hero-inner{padding:18px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"page\">\r\n <div class=\"container\">\r\n\r\n <div class=\"hero\" role=\"img\" aria-label=\"Host portal hero image\">\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-box\">\r\n <div class=\"kicker\">Host Portal<\/div>\r\n <h1>Manage your listings, bookings & payouts<\/h1>\r\n <p>Secure sign-in for hosts and admins.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <section class=\"card\" aria-label=\"Login section\">\r\n <main class=\"card-inner\" aria-labelledby=\"title\">\r\n <div class=\"brand\">\r\n <div class=\"logo\">H<\/div>\r\n <div>\r\n <h2 id=\"title\">Host Login<\/h2>\r\n <p class=\"muted\">Sign in to manage your hosting. Demo credentials below.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tags\">\r\n <span class=\"tag\">Admin \u2192 <strong>admin@host<\/strong> \/ <code>admin123<\/code><\/span>\r\n <span class=\"tag\">Super Admin \u2192 <strong>root@host<\/strong> \/ <code>root123<\/code><\/span>\r\n <\/div>\r\n\r\n <div class=\"grid\">\r\n <div>\r\n <label for=\"email\">Email<\/label>\r\n <input id=\"email\" type=\"email\" placeholder=\"you@host\" autocomplete=\"username\" \/>\r\n <\/div>\r\n\r\n <div>\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\" \/>\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=\"alt\">\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\" id=\"loginBtn\">Sign in<\/button>\r\n\r\n <div id=\"status\" class=\"alert bad\" role=\"status\" aria-live=\"polite\" style=\"display:none\"><\/div>\r\n\r\n <div class=\"divider\"><\/div>\r\n\r\n <div class=\"footer\">Front-end demo (localStorage). Replace with real auth for production.<\/div>\r\n <\/main>\r\n <\/section>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const $ = s => document.querySelector(s);\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 \/\/ Seed demo accounts once\r\n (function seed(){\r\n if(DB.read('seededHostLogin',false)) return;\r\n DB.write('authHostLogin', [\r\n {email:'admin@host', pw:'admin123', role:'admin'},\r\n {email:'root@host', pw:'root123', role:'super'}\r\n ]);\r\n DB.write('seededHostLogin', true);\r\n })();\r\n\r\n \/\/ Remember me\r\n (function loadRemembered(){\r\n const u = localStorage.getItem('hostLoginRemember');\r\n if(u) $('#email').value = u;\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 password (demo)\r\n $('#forgot').addEventListener('click', (e)=>{\r\n e.preventDefault();\r\n const email = $('#email').value.trim() || 'your email';\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 \/\/ Validate & login (demo only)\r\n $('#loginBtn').addEventListener('click', ()=>{\r\n const email = $('#email').value.trim();\r\n const pw = $('#password').value.trim();\r\n if(!email || !pw){ toast('Enter email and password'); return; }\r\n\r\n const table = DB.read('authHostLogin', []);\r\n const user = table.find(u=>u.email===email && u.pw===pw);\r\n\r\n if(!user){ toast('Invalid email or password'); return; }\r\n\r\n if($('#remember').checked) localStorage.setItem('hostLoginRemember', email);\r\n\r\n \/\/ Store session (demo)\r\n localStorage.setItem('hostLoginSession', JSON.stringify({email:user.email, role:user.role, ts:Date.now()}));\r\n toast('Signed in successfully', true);\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>Host Login Panel Host Portal Manage your listings, bookings & payouts Secure sign-in for hosts and admins. H Host Login Sign in to manage your hosting. Demo credentials below. Admin \u2192 admin@host \/ admin123 Super Admin \u2192 root@host \/ root123 Email Password Show Remember me Forgot password? Sign in Front-end demo (localStorage). Replace with real auth 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-154","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/154","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=154"}],"version-history":[{"count":16,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions"}],"predecessor-version":[{"id":255,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions\/255"}],"wp:attachment":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}