Motorhomes at Home \u2013 Host Admin Panel<\/title>\r\n <style>\r\n :root{\r\n --brand:#1e3a8a;\r\n --cta:#fbbf24;\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\r\n \/* Full-width control *\/\r\n --page-pad: 0px;\r\n\r\n \/* Hero *\/\r\n --hero-h: 320px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{\r\n margin:0;\r\n padding:0;\r\n font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n background:var(--bg);\r\n color:var(--text);\r\n }\r\n a{text-decoration:none;color:inherit}\r\n\r\n \/* \u2705 HERO IMAGE BANNER *\/\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,.15) 0%, rgba(15,23,42,.62) 70%, rgba(15,23,42,.75) 100%),\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 border-bottom:1px solid rgba(255,255,255,.18);\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:900px;\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;\r\n align-items:center;\r\n gap:8px;\r\n font-size:12px;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n opacity:.9;\r\n margin:0 0 8px;\r\n }\r\n .hero-title{\r\n margin:0 0 6px;\r\n font-size:32px;\r\n line-height:1.12;\r\n }\r\n .hero-sub{\r\n margin:0;\r\n font-size:14px;\r\n opacity:.92;\r\n max-width:75ch;\r\n }\r\n\r\n \/* \u2705 FULL WIDTH SHELL *\/\r\n .admin-shell{\r\n width:100%;\r\n max-width:none;\r\n margin:0;\r\n padding:var(--page-pad);\r\n }\r\n\r\n \/* Slight overlap onto hero (nice look) *\/\r\n .admin-header{\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:space-between;\r\n align-items:flex-start;\r\n gap:12px;\r\n margin:-26px 24px 16px; \/* overlaps hero *\/\r\n position:relative;\r\n z-index:2;\r\n }\r\n @media (max-width:700px){\r\n .admin-header{margin:14px 14px 16px;}\r\n }\r\n\r\n .admin-header-card{\r\n width:100%;\r\n background:rgba(255,255,255,.92);\r\n border:1px solid var(--border);\r\n border-radius:14px;\r\n padding:14px 16px;\r\n box-shadow:0 10px 25px rgba(15,23,42,.06);\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:space-between;\r\n gap:12px;\r\n align-items:flex-start;\r\n }\r\n\r\n .admin-header h1{\r\n margin:0;\r\n font-size:1.6rem;\r\n color:var(--brand);\r\n }\r\n .admin-header p{\r\n margin:0;\r\n color:var(--muted);\r\n font-size:.95rem;\r\n }\r\n\r\n .pill{\r\n background:#e0ebff;\r\n color:var(--brand);\r\n padding:6px 10px;\r\n border-radius:999px;\r\n font-size:.8rem;\r\n font-weight:500;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n height:fit-content;\r\n white-space:nowrap;\r\n }\r\n\r\n \/* \u2705 Full-width content area with padding *\/\r\n .admin-content{\r\n padding:0 24px 24px;\r\n }\r\n @media (max-width:700px){\r\n .admin-content{padding:0 14px 18px;}\r\n }\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);\r\n gap:20px;\r\n }\r\n @media (max-width:900px){\r\n .grid{grid-template-columns:minmax(0,1fr);}\r\n }\r\n\r\n .card{\r\n background:var(--card);\r\n border-radius:12px;\r\n border:1px solid var(--border);\r\n padding:16px 18px;\r\n box-shadow:0 10px 25px rgba(15,23,42,.04);\r\n }\r\n .card h2{\r\n margin:0 0 10px;\r\n font-size:1.15rem;\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:8px;\r\n }\r\n .card small{\r\n color:var(--muted);\r\n font-size:.8rem;\r\n }\r\n\r\n form .field{margin-bottom:10px;}\r\n .field 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 .field label span{\r\n font-weight:400;\r\n color:var(--muted);\r\n font-size:.8rem;\r\n }\r\n input[type=\"text\"],\r\n input[type=\"number\"],\r\n input[type=\"url\"],\r\n textarea{\r\n width:100%;\r\n padding:8px 9px;\r\n border-radius:8px;\r\n border:1px solid var(--border);\r\n font-size:.9rem;\r\n font-family:inherit;\r\n resize:vertical;\r\n min-height:36px;\r\n background:#f9fafb;\r\n }\r\n textarea{min-height:70px;}\r\n input:focus, textarea:focus{\r\n outline:2px solid #bfdbfe;\r\n border-color:#60a5fa;\r\n background:#ffffff;\r\n }\r\n .field-row{display:flex;gap:10px;}\r\n .field-row .field{flex:1;}\r\n\r\n .btn-row{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:8px;\r\n margin-top:6px;\r\n align-items:center;\r\n justify-content:space-between;\r\n }\r\n button{\r\n border:none;\r\n cursor:pointer;\r\n font-family:inherit;\r\n font-size:.9rem;\r\n border-radius:999px;\r\n padding:8px 16px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n font-weight:600;\r\n }\r\n .btn-primary{background:var(--brand);color:#fff;}\r\n .btn-primary:hover{opacity:.95;}\r\n .btn-ghost{background:transparent;color:var(--muted);padding:6px 10px;}\r\n .btn-ghost:hover{background:#f3f4f6;}\r\n .btn-danger{background:var(--danger);color:#fff;}\r\n .helper-text{font-size:.8rem;color:var(--muted);}\r\n\r\n .list-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n margin-bottom:8px;\r\n gap:8px;\r\n }\r\n .list-header input{max-width:260px;}\r\n\r\n .properties-empty{\r\n padding:14px;\r\n border-radius:10px;\r\n border:1px dashed var(--border);\r\n font-size:.9rem;\r\n color:var(--muted);\r\n background:#f9fafb;\r\n }\r\n\r\n .property-card{\r\n border-radius:12px;\r\n border:1px solid var(--border);\r\n padding:12px 12px;\r\n margin-bottom:10px;\r\n display:grid;\r\n grid-template-columns:120px minmax(0,1fr);\r\n gap:12px;\r\n background:#ffffff;\r\n }\r\n @media (max-width:600px){\r\n .property-card{grid-template-columns:minmax(0,1fr);}\r\n }\r\n .property-thumb{\r\n width:100%;\r\n height:0;\r\n padding-bottom:70%;\r\n border-radius:10px;\r\n overflow:hidden;\r\n background:#e5e7eb;\r\n position:relative;\r\n }\r\n .property-thumb img{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n }\r\n .property-main{display:flex;flex-direction:column;gap:5px;}\r\n .property-header{\r\n display:flex;\r\n justify-content:space-between;\r\n gap:6px;\r\n flex-wrap:wrap;\r\n align-items:flex-start;\r\n }\r\n .property-title{font-weight:600;font-size:.98rem;}\r\n .property-location{font-size:.85rem;color:var(--muted);}\r\n .property-price{font-weight:700;font-size:.95rem;color:var(--brand);}\r\n .property-meta{font-size:.8rem;color:var(--muted);}\r\n .property-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}\r\n .property-actions button{font-size:.78rem;padding:5px 10px;}\r\n .badge{\r\n display:inline-flex;\r\n padding:3px 8px;\r\n border-radius:999px;\r\n background:#ecfeff;\r\n color:#0369a1;\r\n font-size:.75rem;\r\n margin-right:4px;\r\n margin-top:2px;\r\n }\r\n\r\n @media (max-width:700px){\r\n .hero{height:240px}\r\n .hero-inner{padding:16px}\r\n .hero-title{font-size:24px}\r\n .admin-header{margin:12px 14px 14px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"hero\" aria-label=\"Hero image banner\">\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-box\">\r\n <div class=\"hero-kicker\">\u25cf Host admin<\/div>\r\n <h1 class=\"hero-title\">Motorhomes at Home \u2013 Host Admin Panel<\/h1>\r\n <p class=\"hero-sub\">Privately manage driveway & motorhome listings before they go live on Motorhomes at Home.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"admin-shell\">\r\n <header class=\"admin-header\">\r\n <div class=\"admin-header-card\">\r\n <div>\r\n <h1>Host Admin Panel<\/h1>\r\n <p>Privately manage driveway & motorhome listings before they go live on Motorhomes at Home.<\/p>\r\n <\/div>\r\n <div class=\"pill\">\r\n \u25cf Internal use\r\n <span style=\"font-weight:400;\">Data saved in this browser only<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"admin-content\">\r\n <div class=\"grid\">\r\n \r\n <section class=\"card\">\r\n <h2>\r\n Add \/ Edit Property\r\n <small id=\"formMode\">New listing<\/small>\r\n <\/h2>\r\n <form id=\"propertyForm\">\r\n <input type=\"hidden\" id=\"propertyId\" \/>\r\n\r\n <div class=\"field\">\r\n <label for=\"hostName\">Host name<\/label>\r\n <input id=\"hostName\" type=\"text\" placeholder=\"e.g. Jane Smith\" required \/>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"title\">Property title<\/label>\r\n <input id=\"title\" type=\"text\" placeholder=\"e.g. Quiet driveway near Brighton seafront\" required \/>\r\n <\/div>\r\n\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label for=\"location\">Location<\/label>\r\n <input id=\"location\" type=\"text\" placeholder=\"Town \/ city, county\" required \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"price\">From price per night (\u00a3)<\/label>\r\n <input id=\"price\" type=\"number\" min=\"0\" step=\"1\" placeholder=\"20\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"imageUrl\">Image URL <span>(use a hosted photo or media library URL)<\/span><\/label>\r\n <input id=\"imageUrl\" type=\"url\" placeholder=\"https:\/\/example.com\/driveway-photo.jpg\" \/>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"amenities\">Amenities <span>(comma separated \u2013 e.g. electric hook-up, water, CCTV)<\/span><\/label>\r\n <input id=\"amenities\" type=\"text\" placeholder=\"Electric hook-up, Water, CCTV\" \/>\r\n <\/div>\r\n\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label for=\"maxLength\">Max vehicle length (m)<\/label>\r\n <input id=\"maxLength\" type=\"number\" min=\"0\" step=\"0.5\" placeholder=\"7.5\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"availability\">Availability note<\/label>\r\n <input id=\"availability\" type=\"text\" placeholder=\"e.g. Year round, min 2 nights\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"notes\">Internal notes<\/label>\r\n <textarea id=\"notes\" placeholder=\"Anything you want to remember about this property. Not shown to guests.\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"btn-row\">\r\n <div>\r\n <button type=\"submit\" class=\"btn-primary\">\ud83d\udcbe Save listing<\/button>\r\n <button type=\"button\" id=\"resetFormBtn\" class=\"btn-ghost\">Reset form<\/button>\r\n <\/div>\r\n <p class=\"helper-text\">\r\n Listings are stored locally in this browser only. To make them live, copy details into your main site.\r\n <\/p>\r\n <\/div>\r\n <\/form>\r\n <\/section>\r\n\r\n \r\n <section class=\"card\">\r\n <div class=\"list-header\">\r\n <div>\r\n <h2>Saved Properties<\/h2>\r\n <small id=\"countLabel\">0 listings<\/small>\r\n <\/div>\r\n <div class=\"field\" style=\"margin-bottom:0;\">\r\n <input id=\"searchBox\" type=\"text\" placeholder=\"Search by title, location or host\u2026\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"propertiesContainer\"><\/div>\r\n\r\n <div class=\"btn-row\" style=\"margin-top:10px;\">\r\n <button type=\"button\" id=\"exportBtn\" class=\"btn-ghost\">\u2b07\ufe0f Export all to JSON<\/button>\r\n <button type=\"button\" id=\"clearAllBtn\" class=\"btn-danger\">\ud83d\uddd1 Clear all listings<\/button>\r\n <\/div>\r\n <p class=\"helper-text\" style=\"margin-top:8px;\">\r\n Export JSON and send it to your developer if you want these listings imported into WordPress or another system.\r\n <\/p>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n(function(){\r\n const STORAGE_KEY = 'mhah_host_properties_v1';\r\n let properties = [];\r\n\r\n const els = {\r\n form: document.getElementById('propertyForm'),\r\n formMode: document.getElementById('formMode'),\r\n propertyId: document.getElementById('propertyId'),\r\n hostName: document.getElementById('hostName'),\r\n title: document.getElementById('title'),\r\n location: document.getElementById('location'),\r\n price: document.getElementById('price'),\r\n imageUrl: document.getElementById('imageUrl'),\r\n amenities: document.getElementById('amenities'),\r\n maxLength: document.getElementById('maxLength'),\r\n availability: document.getElementById('availability'),\r\n notes: document.getElementById('notes'),\r\n resetFormBtn: document.getElementById('resetFormBtn'),\r\n searchBox: document.getElementById('searchBox'),\r\n exportBtn: document.getElementById('exportBtn'),\r\n clearAllBtn: document.getElementById('clearAllBtn'),\r\n listContainer: document.getElementById('propertiesContainer'),\r\n countLabel: document.getElementById('countLabel')\r\n };\r\n\r\n function loadFromStorage(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n properties = raw ? JSON.parse(raw) : [];\r\n }catch(e){\r\n console.error('Failed to read storage', e);\r\n properties = [];\r\n }\r\n renderList();\r\n }\r\n\r\n function saveToStorage(){\r\n try{\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(properties));\r\n }catch(e){\r\n console.error('Failed to save storage', e);\r\n }\r\n }\r\n\r\n function resetForm(){\r\n els.form.reset();\r\n els.propertyId.value = '';\r\n els.formMode.textContent = 'New listing';\r\n }\r\n\r\n function handleSubmit(evt){\r\n evt.preventDefault();\r\n const id = els.propertyId.value || Date.now().toString();\r\n\r\n const listing = {\r\n id,\r\n hostName: els.hostName.value.trim(),\r\n title: els.title.value.trim(),\r\n location: els.location.value.trim(),\r\n price: els.price.value ? Number(els.price.value) : null,\r\n imageUrl: els.imageUrl.value.trim(),\r\n amenities: els.amenities.value.trim(),\r\n maxLength: els.maxLength.value ? Number(els.maxLength.value) : null,\r\n availability: els.availability.value.trim(),\r\n notes: els.notes.value.trim(),\r\n updatedAt: new Date().toISOString()\r\n };\r\n\r\n const existingIndex = properties.findIndex(p => p.id === id);\r\n if(existingIndex !== -1){\r\n properties[existingIndex] = listing;\r\n }else{\r\n properties.unshift(listing);\r\n }\r\n\r\n saveToStorage();\r\n renderList();\r\n resetForm();\r\n }\r\n\r\n function renderList(){\r\n const q = els.searchBox.value.trim().toLowerCase();\r\n let filtered = properties;\r\n if(q){\r\n filtered = properties.filter(p => (\r\n (p.title || '').toLowerCase().includes(q) ||\r\n (p.location || '').toLowerCase().includes(q) ||\r\n (p.hostName || '').toLowerCase().includes(q)\r\n ));\r\n }\r\n\r\n els.countLabel.textContent = properties.length + (properties.length === 1 ? ' listing' : ' listings');\r\n\r\n if(filtered.length === 0){\r\n els.listContainer.innerHTML = '<div class=\"properties-empty\">No properties saved yet. Add your first driveway or motorhome spot using the form on the left.<\/div>';\r\n return;\r\n }\r\n\r\n els.listContainer.innerHTML = '';\r\n filtered.forEach(p => {\r\n const card = document.createElement('article');\r\n card.className = 'property-card';\r\n card.dataset.id = p.id;\r\n\r\n const thumb = document.createElement('div');\r\n thumb.className = 'property-thumb';\r\n if(p.imageUrl){\r\n const img = document.createElement('img');\r\n img.src = p.imageUrl;\r\n img.alt = p.title || 'Property image';\r\n thumb.appendChild(img);\r\n }else{\r\n thumb.textContent = 'No image';\r\n thumb.style.display = 'flex';\r\n thumb.style.alignItems = 'center';\r\n thumb.style.justifyContent = 'center';\r\n thumb.style.fontSize = '.8rem';\r\n thumb.style.color = 'var(--muted)';\r\n }\r\n\r\n const main = document.createElement('div');\r\n main.className = 'property-main';\r\n\r\n const header = document.createElement('div');\r\n header.className = 'property-header';\r\n\r\n const left = document.createElement('div');\r\n const title = document.createElement('div');\r\n title.className = 'property-title';\r\n title.textContent = p.title || '(Untitled listing)';\r\n const location = document.createElement('div');\r\n location.className = 'property-location';\r\n location.textContent = p.location || 'No location set';\r\n left.appendChild(title);\r\n left.appendChild(location);\r\n\r\n const price = document.createElement('div');\r\n price.className = 'property-price';\r\n price.textContent = p.price != null ? '\u00a3' + p.price.toFixed(0) + '+ \/ night' : 'Price TBC';\r\n\r\n header.appendChild(left);\r\n header.appendChild(price);\r\n\r\n const meta = document.createElement('div');\r\n meta.className = 'property-meta';\r\n const parts = [];\r\n if(p.hostName) parts.push('Host: ' + p.hostName);\r\n if(p.maxLength) parts.push('Max length: ' + p.maxLength + 'm');\r\n if(p.availability) parts.push('Availability: ' + p.availability);\r\n meta.textContent = parts.join(' \u2022 ');\r\n\r\n const amenitiesRow = document.createElement('div');\r\n if(p.amenities){\r\n const items = p.amenities.split(',').map(a => a.trim()).filter(Boolean);\r\n items.forEach(am => {\r\n const badge = document.createElement('span');\r\n badge.className = 'badge';\r\n badge.textContent = am;\r\n amenitiesRow.appendChild(badge);\r\n });\r\n }\r\n\r\n const notes = document.createElement('div');\r\n if(p.notes){\r\n notes.className = 'property-meta';\r\n notes.textContent = 'Notes: ' + p.notes;\r\n }\r\n\r\n const actions = document.createElement('div');\r\n actions.className = 'property-actions';\r\n\r\n const editBtn = document.createElement('button');\r\n editBtn.type = 'button';\r\n editBtn.className = 'btn-ghost';\r\n editBtn.dataset.action = 'edit';\r\n editBtn.dataset.id = p.id;\r\n editBtn.textContent = '\u270f\ufe0f Edit';\r\n\r\n const deleteBtn = document.createElement('button');\r\n deleteBtn.type = 'button';\r\n deleteBtn.className = 'btn-ghost';\r\n deleteBtn.dataset.action = 'delete';\r\n deleteBtn.dataset.id = p.id;\r\n deleteBtn.textContent = '\ud83d\uddd1 Remove';\r\n\r\n actions.appendChild(editBtn);\r\n actions.appendChild(deleteBtn);\r\n\r\n main.appendChild(header);\r\n if(meta.textContent) main.appendChild(meta);\r\n if(amenitiesRow.childNodes.length) main.appendChild(amenitiesRow);\r\n if(notes.textContent) main.appendChild(notes);\r\n main.appendChild(actions);\r\n\r\n card.appendChild(thumb);\r\n card.appendChild(main);\r\n els.listContainer.appendChild(card);\r\n });\r\n }\r\n\r\n function handleListClick(evt){\r\n const btn = evt.target.closest('button');\r\n if(!btn) return;\r\n const id = btn.dataset.id;\r\n const action = btn.dataset.action;\r\n if(!id || !action) return;\r\n\r\n if(action === 'edit'){\r\n const p = properties.find(x => x.id === id);\r\n if(!p) return;\r\n els.propertyId.value = p.id;\r\n els.hostName.value = p.hostName || '';\r\n els.title.value = p.title || '';\r\n els.location.value = p.location || '';\r\n els.price.value = p.price != null ? p.price : '';\r\n els.imageUrl.value = p.imageUrl || '';\r\n els.amenities.value = p.amenities || '';\r\n els.maxLength.value = p.maxLength != null ? p.maxLength : '';\r\n els.availability.value = p.availability || '';\r\n els.notes.value = p.notes || '';\r\n els.formMode.textContent = 'Editing listing';\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n }else if(action === 'delete'){\r\n if(!confirm('Remove this listing? This cannot be undone.')) return;\r\n properties = properties.filter(x => x.id !== id);\r\n saveToStorage();\r\n renderList();\r\n }\r\n }\r\n\r\n function handleExport(){\r\n if(properties.length === 0){\r\n alert('No listings to export yet.');\r\n return;\r\n }\r\n const dataStr = 'data:application\/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(properties, null, 2));\r\n const a = document.createElement('a');\r\n a.href = dataStr;\r\n a.download = 'motorhomes-at-home-listings.json';\r\n document.body.appendChild(a);\r\n a.click();\r\n a.remove();\r\n }\r\n\r\n function handleClearAll(){\r\n if(!confirm('Clear ALL saved listings from this browser?')) return;\r\n properties = [];\r\n saveToStorage();\r\n renderList();\r\n }\r\n\r\n function handleSearchInput(){ renderList(); }\r\n\r\n els.form.addEventListener('submit', handleSubmit);\r\n els.resetFormBtn.addEventListener('click', resetForm);\r\n els.listContainer.addEventListener('click', handleListClick);\r\n els.exportBtn.addEventListener('click', handleExport);\r\n els.clearAllBtn.addEventListener('click', handleClearAll);\r\n els.searchBox.addEventListener('input', handleSearchInput);\r\n\r\n loadFromStorage();\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 Host Admin Panel \u25cf Host admin Motorhomes at Home \u2013 Host Admin Panel Privately manage driveway & motorhome listings before they go live on Motorhomes at Home. Host Admin Panel Privately manage driveway & motorhome listings before they go live on Motorhomes at Home. \u25cf Internal use Data saved in this browser only Add \/ Edit Property New listing Host name Property title Location From price per night (\u00a3) Image URL (use a hosted photo or media library URL) Amenities (comma separated \u2013 e.g. electric hook-up, water, CCTV) Max vehicle length (m) Availability note Internal notes \ud83d\udcbe Save listing Reset form Listings are stored locally in this browser only. To make them live, copy details into your main site. Saved Properties 0 listings \u2b07\ufe0f Export all to JSON \ud83d\uddd1 Clear all listings Export JSON and send it to your developer if you want these listings imported into WordPress or another system.<\/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-204","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/204","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=204"}],"version-history":[{"count":10,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/204\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/204\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=204"}],"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 Host Admin Panel<\/title>\r\n <style>\r\n :root{\r\n --brand:#1e3a8a;\r\n --cta:#fbbf24;\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\r\n \/* Full-width control *\/\r\n --page-pad: 0px;\r\n\r\n \/* Hero *\/\r\n --hero-h: 320px;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{\r\n margin:0;\r\n padding:0;\r\n font-family:system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\r\n background:var(--bg);\r\n color:var(--text);\r\n }\r\n a{text-decoration:none;color:inherit}\r\n\r\n \/* \u2705 HERO IMAGE BANNER *\/\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,.15) 0%, rgba(15,23,42,.62) 70%, rgba(15,23,42,.75) 100%),\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 border-bottom:1px solid rgba(255,255,255,.18);\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:900px;\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;\r\n align-items:center;\r\n gap:8px;\r\n font-size:12px;\r\n letter-spacing:.12em;\r\n text-transform:uppercase;\r\n opacity:.9;\r\n margin:0 0 8px;\r\n }\r\n .hero-title{\r\n margin:0 0 6px;\r\n font-size:32px;\r\n line-height:1.12;\r\n }\r\n .hero-sub{\r\n margin:0;\r\n font-size:14px;\r\n opacity:.92;\r\n max-width:75ch;\r\n }\r\n\r\n \/* \u2705 FULL WIDTH SHELL *\/\r\n .admin-shell{\r\n width:100%;\r\n max-width:none;\r\n margin:0;\r\n padding:var(--page-pad);\r\n }\r\n\r\n \/* Slight overlap onto hero (nice look) *\/\r\n .admin-header{\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:space-between;\r\n align-items:flex-start;\r\n gap:12px;\r\n margin:-26px 24px 16px; \/* overlaps hero *\/\r\n position:relative;\r\n z-index:2;\r\n }\r\n @media (max-width:700px){\r\n .admin-header{margin:14px 14px 16px;}\r\n }\r\n\r\n .admin-header-card{\r\n width:100%;\r\n background:rgba(255,255,255,.92);\r\n border:1px solid var(--border);\r\n border-radius:14px;\r\n padding:14px 16px;\r\n box-shadow:0 10px 25px rgba(15,23,42,.06);\r\n display:flex;\r\n flex-wrap:wrap;\r\n justify-content:space-between;\r\n gap:12px;\r\n align-items:flex-start;\r\n }\r\n\r\n .admin-header h1{\r\n margin:0;\r\n font-size:1.6rem;\r\n color:var(--brand);\r\n }\r\n .admin-header p{\r\n margin:0;\r\n color:var(--muted);\r\n font-size:.95rem;\r\n }\r\n\r\n .pill{\r\n background:#e0ebff;\r\n color:var(--brand);\r\n padding:6px 10px;\r\n border-radius:999px;\r\n font-size:.8rem;\r\n font-weight:500;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n height:fit-content;\r\n white-space:nowrap;\r\n }\r\n\r\n \/* \u2705 Full-width content area with padding *\/\r\n .admin-content{\r\n padding:0 24px 24px;\r\n }\r\n @media (max-width:700px){\r\n .admin-content{padding:0 14px 18px;}\r\n }\r\n\r\n .grid{\r\n display:grid;\r\n grid-template-columns:minmax(0,1.2fr) minmax(0,1.8fr);\r\n gap:20px;\r\n }\r\n @media (max-width:900px){\r\n .grid{grid-template-columns:minmax(0,1fr);}\r\n }\r\n\r\n .card{\r\n background:var(--card);\r\n border-radius:12px;\r\n border:1px solid var(--border);\r\n padding:16px 18px;\r\n box-shadow:0 10px 25px rgba(15,23,42,.04);\r\n }\r\n .card h2{\r\n margin:0 0 10px;\r\n font-size:1.15rem;\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:8px;\r\n }\r\n .card small{\r\n color:var(--muted);\r\n font-size:.8rem;\r\n }\r\n\r\n form .field{margin-bottom:10px;}\r\n .field 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 .field label span{\r\n font-weight:400;\r\n color:var(--muted);\r\n font-size:.8rem;\r\n }\r\n input[type=\"text\"],\r\n input[type=\"number\"],\r\n input[type=\"url\"],\r\n textarea{\r\n width:100%;\r\n padding:8px 9px;\r\n border-radius:8px;\r\n border:1px solid var(--border);\r\n font-size:.9rem;\r\n font-family:inherit;\r\n resize:vertical;\r\n min-height:36px;\r\n background:#f9fafb;\r\n }\r\n textarea{min-height:70px;}\r\n input:focus, textarea:focus{\r\n outline:2px solid #bfdbfe;\r\n border-color:#60a5fa;\r\n background:#ffffff;\r\n }\r\n .field-row{display:flex;gap:10px;}\r\n .field-row .field{flex:1;}\r\n\r\n .btn-row{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:8px;\r\n margin-top:6px;\r\n align-items:center;\r\n justify-content:space-between;\r\n }\r\n button{\r\n border:none;\r\n cursor:pointer;\r\n font-family:inherit;\r\n font-size:.9rem;\r\n border-radius:999px;\r\n padding:8px 16px;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:6px;\r\n font-weight:600;\r\n }\r\n .btn-primary{background:var(--brand);color:#fff;}\r\n .btn-primary:hover{opacity:.95;}\r\n .btn-ghost{background:transparent;color:var(--muted);padding:6px 10px;}\r\n .btn-ghost:hover{background:#f3f4f6;}\r\n .btn-danger{background:var(--danger);color:#fff;}\r\n .helper-text{font-size:.8rem;color:var(--muted);}\r\n\r\n .list-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n margin-bottom:8px;\r\n gap:8px;\r\n }\r\n .list-header input{max-width:260px;}\r\n\r\n .properties-empty{\r\n padding:14px;\r\n border-radius:10px;\r\n border:1px dashed var(--border);\r\n font-size:.9rem;\r\n color:var(--muted);\r\n background:#f9fafb;\r\n }\r\n\r\n .property-card{\r\n border-radius:12px;\r\n border:1px solid var(--border);\r\n padding:12px 12px;\r\n margin-bottom:10px;\r\n display:grid;\r\n grid-template-columns:120px minmax(0,1fr);\r\n gap:12px;\r\n background:#ffffff;\r\n }\r\n @media (max-width:600px){\r\n .property-card{grid-template-columns:minmax(0,1fr);}\r\n }\r\n .property-thumb{\r\n width:100%;\r\n height:0;\r\n padding-bottom:70%;\r\n border-radius:10px;\r\n overflow:hidden;\r\n background:#e5e7eb;\r\n position:relative;\r\n }\r\n .property-thumb img{\r\n position:absolute;\r\n inset:0;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n }\r\n .property-main{display:flex;flex-direction:column;gap:5px;}\r\n .property-header{\r\n display:flex;\r\n justify-content:space-between;\r\n gap:6px;\r\n flex-wrap:wrap;\r\n align-items:flex-start;\r\n }\r\n .property-title{font-weight:600;font-size:.98rem;}\r\n .property-location{font-size:.85rem;color:var(--muted);}\r\n .property-price{font-weight:700;font-size:.95rem;color:var(--brand);}\r\n .property-meta{font-size:.8rem;color:var(--muted);}\r\n .property-actions{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}\r\n .property-actions button{font-size:.78rem;padding:5px 10px;}\r\n .badge{\r\n display:inline-flex;\r\n padding:3px 8px;\r\n border-radius:999px;\r\n background:#ecfeff;\r\n color:#0369a1;\r\n font-size:.75rem;\r\n margin-right:4px;\r\n margin-top:2px;\r\n }\r\n\r\n @media (max-width:700px){\r\n .hero{height:240px}\r\n .hero-inner{padding:16px}\r\n .hero-title{font-size:24px}\r\n .admin-header{margin:12px 14px 14px}\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"hero\" aria-label=\"Hero image banner\">\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-box\">\r\n <div class=\"hero-kicker\">\u25cf Host admin<\/div>\r\n <h1 class=\"hero-title\">Motorhomes at Home \u2013 Host Admin Panel<\/h1>\r\n <p class=\"hero-sub\">Privately manage driveway & motorhome listings before they go live on Motorhomes at Home.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"admin-shell\">\r\n <header class=\"admin-header\">\r\n <div class=\"admin-header-card\">\r\n <div>\r\n <h1>Host Admin Panel<\/h1>\r\n <p>Privately manage driveway & motorhome listings before they go live on Motorhomes at Home.<\/p>\r\n <\/div>\r\n <div class=\"pill\">\r\n \u25cf Internal use\r\n <span style=\"font-weight:400;\">Data saved in this browser only<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"admin-content\">\r\n <div class=\"grid\">\r\n \r\n <section class=\"card\">\r\n <h2>\r\n Add \/ Edit Property\r\n <small id=\"formMode\">New listing<\/small>\r\n <\/h2>\r\n <form id=\"propertyForm\">\r\n <input type=\"hidden\" id=\"propertyId\" \/>\r\n\r\n <div class=\"field\">\r\n <label for=\"hostName\">Host name<\/label>\r\n <input id=\"hostName\" type=\"text\" placeholder=\"e.g. Jane Smith\" required \/>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"title\">Property title<\/label>\r\n <input id=\"title\" type=\"text\" placeholder=\"e.g. Quiet driveway near Brighton seafront\" required \/>\r\n <\/div>\r\n\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label for=\"location\">Location<\/label>\r\n <input id=\"location\" type=\"text\" placeholder=\"Town \/ city, county\" required \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"price\">From price per night (\u00a3)<\/label>\r\n <input id=\"price\" type=\"number\" min=\"0\" step=\"1\" placeholder=\"20\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"imageUrl\">Image URL <span>(use a hosted photo or media library URL)<\/span><\/label>\r\n <input id=\"imageUrl\" type=\"url\" placeholder=\"https:\/\/example.com\/driveway-photo.jpg\" \/>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"amenities\">Amenities <span>(comma separated \u2013 e.g. electric hook-up, water, CCTV)<\/span><\/label>\r\n <input id=\"amenities\" type=\"text\" placeholder=\"Electric hook-up, Water, CCTV\" \/>\r\n <\/div>\r\n\r\n <div class=\"field-row\">\r\n <div class=\"field\">\r\n <label for=\"maxLength\">Max vehicle length (m)<\/label>\r\n <input id=\"maxLength\" type=\"number\" min=\"0\" step=\"0.5\" placeholder=\"7.5\" \/>\r\n <\/div>\r\n <div class=\"field\">\r\n <label for=\"availability\">Availability note<\/label>\r\n <input id=\"availability\" type=\"text\" placeholder=\"e.g. Year round, min 2 nights\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"notes\">Internal notes<\/label>\r\n <textarea id=\"notes\" placeholder=\"Anything you want to remember about this property. Not shown to guests.\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"btn-row\">\r\n <div>\r\n <button type=\"submit\" class=\"btn-primary\">\ud83d\udcbe Save listing<\/button>\r\n <button type=\"button\" id=\"resetFormBtn\" class=\"btn-ghost\">Reset form<\/button>\r\n <\/div>\r\n <p class=\"helper-text\">\r\n Listings are stored locally in this browser only. To make them live, copy details into your main site.\r\n <\/p>\r\n <\/div>\r\n <\/form>\r\n <\/section>\r\n\r\n \r\n <section class=\"card\">\r\n <div class=\"list-header\">\r\n <div>\r\n <h2>Saved Properties<\/h2>\r\n <small id=\"countLabel\">0 listings<\/small>\r\n <\/div>\r\n <div class=\"field\" style=\"margin-bottom:0;\">\r\n <input id=\"searchBox\" type=\"text\" placeholder=\"Search by title, location or host\u2026\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"propertiesContainer\"><\/div>\r\n\r\n <div class=\"btn-row\" style=\"margin-top:10px;\">\r\n <button type=\"button\" id=\"exportBtn\" class=\"btn-ghost\">\u2b07\ufe0f Export all to JSON<\/button>\r\n <button type=\"button\" id=\"clearAllBtn\" class=\"btn-danger\">\ud83d\uddd1 Clear all listings<\/button>\r\n <\/div>\r\n <p class=\"helper-text\" style=\"margin-top:8px;\">\r\n Export JSON and send it to your developer if you want these listings imported into WordPress or another system.\r\n <\/p>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n(function(){\r\n const STORAGE_KEY = 'mhah_host_properties_v1';\r\n let properties = [];\r\n\r\n const els = {\r\n form: document.getElementById('propertyForm'),\r\n formMode: document.getElementById('formMode'),\r\n propertyId: document.getElementById('propertyId'),\r\n hostName: document.getElementById('hostName'),\r\n title: document.getElementById('title'),\r\n location: document.getElementById('location'),\r\n price: document.getElementById('price'),\r\n imageUrl: document.getElementById('imageUrl'),\r\n amenities: document.getElementById('amenities'),\r\n maxLength: document.getElementById('maxLength'),\r\n availability: document.getElementById('availability'),\r\n notes: document.getElementById('notes'),\r\n resetFormBtn: document.getElementById('resetFormBtn'),\r\n searchBox: document.getElementById('searchBox'),\r\n exportBtn: document.getElementById('exportBtn'),\r\n clearAllBtn: document.getElementById('clearAllBtn'),\r\n listContainer: document.getElementById('propertiesContainer'),\r\n countLabel: document.getElementById('countLabel')\r\n };\r\n\r\n function loadFromStorage(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n properties = raw ? JSON.parse(raw) : [];\r\n }catch(e){\r\n console.error('Failed to read storage', e);\r\n properties = [];\r\n }\r\n renderList();\r\n }\r\n\r\n function saveToStorage(){\r\n try{\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(properties));\r\n }catch(e){\r\n console.error('Failed to save storage', e);\r\n }\r\n }\r\n\r\n function resetForm(){\r\n els.form.reset();\r\n els.propertyId.value = '';\r\n els.formMode.textContent = 'New listing';\r\n }\r\n\r\n function handleSubmit(evt){\r\n evt.preventDefault();\r\n const id = els.propertyId.value || Date.now().toString();\r\n\r\n const listing = {\r\n id,\r\n hostName: els.hostName.value.trim(),\r\n title: els.title.value.trim(),\r\n location: els.location.value.trim(),\r\n price: els.price.value ? Number(els.price.value) : null,\r\n imageUrl: els.imageUrl.value.trim(),\r\n amenities: els.amenities.value.trim(),\r\n maxLength: els.maxLength.value ? Number(els.maxLength.value) : null,\r\n availability: els.availability.value.trim(),\r\n notes: els.notes.value.trim(),\r\n updatedAt: new Date().toISOString()\r\n };\r\n\r\n const existingIndex = properties.findIndex(p => p.id === id);\r\n if(existingIndex !== -1){\r\n properties[existingIndex] = listing;\r\n }else{\r\n properties.unshift(listing);\r\n }\r\n\r\n saveToStorage();\r\n renderList();\r\n resetForm();\r\n }\r\n\r\n function renderList(){\r\n const q = els.searchBox.value.trim().toLowerCase();\r\n let filtered = properties;\r\n if(q){\r\n filtered = properties.filter(p => (\r\n (p.title || '').toLowerCase().includes(q) ||\r\n (p.location || '').toLowerCase().includes(q) ||\r\n (p.hostName || '').toLowerCase().includes(q)\r\n ));\r\n }\r\n\r\n els.countLabel.textContent = properties.length + (properties.length === 1 ? ' listing' : ' listings');\r\n\r\n if(filtered.length === 0){\r\n els.listContainer.innerHTML = '<div class=\"properties-empty\">No properties saved yet. Add your first driveway or motorhome spot using the form on the left.<\/div>';\r\n return;\r\n }\r\n\r\n els.listContainer.innerHTML = '';\r\n filtered.forEach(p => {\r\n const card = document.createElement('article');\r\n card.className = 'property-card';\r\n card.dataset.id = p.id;\r\n\r\n const thumb = document.createElement('div');\r\n thumb.className = 'property-thumb';\r\n if(p.imageUrl){\r\n const img = document.createElement('img');\r\n img.src = p.imageUrl;\r\n img.alt = p.title || 'Property image';\r\n thumb.appendChild(img);\r\n }else{\r\n thumb.textContent = 'No image';\r\n thumb.style.display = 'flex';\r\n thumb.style.alignItems = 'center';\r\n thumb.style.justifyContent = 'center';\r\n thumb.style.fontSize = '.8rem';\r\n thumb.style.color = 'var(--muted)';\r\n }\r\n\r\n const main = document.createElement('div');\r\n main.className = 'property-main';\r\n\r\n const header = document.createElement('div');\r\n header.className = 'property-header';\r\n\r\n const left = document.createElement('div');\r\n const title = document.createElement('div');\r\n title.className = 'property-title';\r\n title.textContent = p.title || '(Untitled listing)';\r\n const location = document.createElement('div');\r\n location.className = 'property-location';\r\n location.textContent = p.location || 'No location set';\r\n left.appendChild(title);\r\n left.appendChild(location);\r\n\r\n const price = document.createElement('div');\r\n price.className = 'property-price';\r\n price.textContent = p.price != null ? '\u00a3' + p.price.toFixed(0) + '+ \/ night' : 'Price TBC';\r\n\r\n header.appendChild(left);\r\n header.appendChild(price);\r\n\r\n const meta = document.createElement('div');\r\n meta.className = 'property-meta';\r\n const parts = [];\r\n if(p.hostName) parts.push('Host: ' + p.hostName);\r\n if(p.maxLength) parts.push('Max length: ' + p.maxLength + 'm');\r\n if(p.availability) parts.push('Availability: ' + p.availability);\r\n meta.textContent = parts.join(' \u2022 ');\r\n\r\n const amenitiesRow = document.createElement('div');\r\n if(p.amenities){\r\n const items = p.amenities.split(',').map(a => a.trim()).filter(Boolean);\r\n items.forEach(am => {\r\n const badge = document.createElement('span');\r\n badge.className = 'badge';\r\n badge.textContent = am;\r\n amenitiesRow.appendChild(badge);\r\n });\r\n }\r\n\r\n const notes = document.createElement('div');\r\n if(p.notes){\r\n notes.className = 'property-meta';\r\n notes.textContent = 'Notes: ' + p.notes;\r\n }\r\n\r\n const actions = document.createElement('div');\r\n actions.className = 'property-actions';\r\n\r\n const editBtn = document.createElement('button');\r\n editBtn.type = 'button';\r\n editBtn.className = 'btn-ghost';\r\n editBtn.dataset.action = 'edit';\r\n editBtn.dataset.id = p.id;\r\n editBtn.textContent = '\u270f\ufe0f Edit';\r\n\r\n const deleteBtn = document.createElement('button');\r\n deleteBtn.type = 'button';\r\n deleteBtn.className = 'btn-ghost';\r\n deleteBtn.dataset.action = 'delete';\r\n deleteBtn.dataset.id = p.id;\r\n deleteBtn.textContent = '\ud83d\uddd1 Remove';\r\n\r\n actions.appendChild(editBtn);\r\n actions.appendChild(deleteBtn);\r\n\r\n main.appendChild(header);\r\n if(meta.textContent) main.appendChild(meta);\r\n if(amenitiesRow.childNodes.length) main.appendChild(amenitiesRow);\r\n if(notes.textContent) main.appendChild(notes);\r\n main.appendChild(actions);\r\n\r\n card.appendChild(thumb);\r\n card.appendChild(main);\r\n els.listContainer.appendChild(card);\r\n });\r\n }\r\n\r\n function handleListClick(evt){\r\n const btn = evt.target.closest('button');\r\n if(!btn) return;\r\n const id = btn.dataset.id;\r\n const action = btn.dataset.action;\r\n if(!id || !action) return;\r\n\r\n if(action === 'edit'){\r\n const p = properties.find(x => x.id === id);\r\n if(!p) return;\r\n els.propertyId.value = p.id;\r\n els.hostName.value = p.hostName || '';\r\n els.title.value = p.title || '';\r\n els.location.value = p.location || '';\r\n els.price.value = p.price != null ? p.price : '';\r\n els.imageUrl.value = p.imageUrl || '';\r\n els.amenities.value = p.amenities || '';\r\n els.maxLength.value = p.maxLength != null ? p.maxLength : '';\r\n els.availability.value = p.availability || '';\r\n els.notes.value = p.notes || '';\r\n els.formMode.textContent = 'Editing listing';\r\n window.scrollTo({top:0,behavior:'smooth'});\r\n }else if(action === 'delete'){\r\n if(!confirm('Remove this listing? This cannot be undone.')) return;\r\n properties = properties.filter(x => x.id !== id);\r\n saveToStorage();\r\n renderList();\r\n }\r\n }\r\n\r\n function handleExport(){\r\n if(properties.length === 0){\r\n alert('No listings to export yet.');\r\n return;\r\n }\r\n const dataStr = 'data:application\/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(properties, null, 2));\r\n const a = document.createElement('a');\r\n a.href = dataStr;\r\n a.download = 'motorhomes-at-home-listings.json';\r\n document.body.appendChild(a);\r\n a.click();\r\n a.remove();\r\n }\r\n\r\n function handleClearAll(){\r\n if(!confirm('Clear ALL saved listings from this browser?')) return;\r\n properties = [];\r\n saveToStorage();\r\n renderList();\r\n }\r\n\r\n function handleSearchInput(){ renderList(); }\r\n\r\n els.form.addEventListener('submit', handleSubmit);\r\n els.resetFormBtn.addEventListener('click', resetForm);\r\n els.listContainer.addEventListener('click', handleListClick);\r\n els.exportBtn.addEventListener('click', handleExport);\r\n els.clearAllBtn.addEventListener('click', handleClearAll);\r\n els.searchBox.addEventListener('input', handleSearchInput);\r\n\r\n loadFromStorage();\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 Host Admin Panel \u25cf Host admin Motorhomes at Home \u2013 Host Admin Panel Privately manage driveway & motorhome listings before they go live on Motorhomes at Home. Host Admin Panel Privately manage driveway & motorhome listings before they go live on Motorhomes at Home. \u25cf Internal use Data saved in this browser only Add \/ Edit Property New listing Host name Property title Location From price per night (\u00a3) Image URL (use a hosted photo or media library URL) Amenities (comma separated \u2013 e.g. electric hook-up, water, CCTV) Max vehicle length (m) Availability note Internal notes \ud83d\udcbe Save listing Reset form Listings are stored locally in this browser only. To make them live, copy details into your main site. Saved Properties 0 listings \u2b07\ufe0f Export all to JSON \ud83d\uddd1 Clear all listings Export JSON and send it to your developer if you want these listings imported into WordPress or another system.<\/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-204","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/204","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=204"}],"version-history":[{"count":10,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/204\/revisions"}],"predecessor-version":[{"id":258,"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/pages\/204\/revisions\/258"}],"wp:attachment":[{"href":"https:\/\/motorhomeathome.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}