Certainly! I can help you set up the basic structure for a real estate booking website with property listings and a simulated admin panel for managing properties and their status. Keep in mind that this implementation will be client-side only due to the WebContainer environment constraints (no real backend, database, or file uploads). The data will be stored in memory and will reset on page refresh. A real application would require a server-side backend and database. Here is the setup: Real Estate Listings

Real Estate Listings

Admin Panel

body { font-family: sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #333; color: #fff; padding: 10px 20px; text-align: center; } header h1 { margin: 0; } header nav a { color: #fff; margin: 0 10px; text-decoration: none; } main { padding: 20px; max-width: 900px; margin: 20px auto; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } #property-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; } .property-item { border: 1px solid #ddd; padding: 15px; border-radius: 5px; background-color: #fff; } .property-item img { max-width: 100%; height: 150px; object-fit: cover; display: block; margin-bottom: 10px; border-radius: 4px; } .property-item h3 { margin-top: 0; margin-bottom: 5px; font-size: 1.2em; } .property-item p { margin-bottom: 10px; font-size: 0.9em; color: #555; } .property-item .status { font-weight: bold; padding: 3px 8px; border-radius: 3px; display: inline-block; font-size: 0.8em; } .status.available { background-color: #d4edda; color: #155724; } .status.occupied { background-color: #f8d7da; color: #721c24; } /* Admin Styles */ #admin-login, #admin-dashboard { margin-bottom: 30px; } #login-form, #add-property-form { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; padding: 20px; border: 1px solid #eee; border-radius: 5px; } #login-form div, #add-property-form div { display: flex; flex-direction: column; } #login-form label, #add-property-form label { margin-bottom: 5px; font-weight: bold; } #login-form input, #add-property-form input, #add-property-form textarea, #add-property-form select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 1em; } #add-property-form textarea { min-height: 80px; resize: vertical; } button { padding: 10px 15px; background-color: #5cb85c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; } button:hover { background-color: #4cae4c; } #login-message { color: red; text-align: center; } #property-admin-list { list-style: none; padding: 0; } #property-admin-list li { border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } #property-admin-list li .property-info { flex-grow: 1; margin-right: 15px; } #property-admin-list li .property-info h4 { margin: 0 0 5px 0; } #property-admin-list li .property-actions { display: flex; gap: 10px; flex-shrink: 0; } #property-admin-list li .property-actions button { padding: 5px 10px; font-size: 0.9em; } .edit-btn { background-color: #f0ad4e; } .edit-btn:hover { background-color: #ec971f; } .delete-btn { background-color: #d9534f; } .delete-btn:hover { background-color: #c9302c; } .status-toggle-btn { background-color: #0275d8; } .status-toggle-btn:hover { background-color: #025aa5; } // Simulate fetching properties (in a real app, this would be an API call) // Accessing the global properties array managed by admin.js // This is a simplification for the WebContainer environment const properties = window.realEstateProperties || []; function displayProperties() { const propertyList = document.getElementById('property-list'); propertyList.innerHTML = ''; // Clear current list if (properties.length === 0) { propertyList.innerHTML = '

No properties available yet.

'; return; } properties.forEach(property => { const propertyItem = document.createElement('div'); propertyItem.classList.add('property-item'); const statusClass = property.status === 'available' ? 'available' : 'occupied'; propertyItem.innerHTML = `

${property.title}

${property.description}

${property.status.charAt(0).toUpperCase() + property.status.slice(1)} `; propertyList.appendChild(propertyItem); }); } // Initial display displayProperties(); // In a real app, you might fetch data after the page loads // window.onload = displayProperties; // Simulate data storage (in a real app, this would be a database) // This array is global so script.js can access it window.realEstateProperties = window.realEstateProperties || [ { id: 1, title: 'Beautiful Family Home', description: 'Spacious house with a large garden.', imageUrl: 'https://via.placeholder.com/300x150?text=House+1', status: 'available' }, { id: 2, title: 'Modern Apartment', description: 'City center apartment with great views.', imageUrl: 'https://via.placeholder.com/300x150?text=Apartment+2', status: 'occupied' }, { id: 3, title: 'Cozy Cottage', description: 'Small cottage near the lake.', imageUrl: 'https://via.placeholder.com/300x150?text=Cottage+3', status: 'available' }, ]; let properties = window.realEstateProperties; let nextId = properties.length > 0 ? Math.max(...properties.map(p => p.id)) + 1 : 1; const adminPassword = 'admin'; // Simulated password (client-side, NOT secure) const loginForm = document.getElementById('login-form'); const adminLoginDiv = document.getElementById('admin-login'); const adminDashboardDiv = document.getElementById('admin-dashboard'); const loginMessage = document.getElementById('login-message'); const addPropertyForm = document.getElementById('add-property-form'); const propertyAdminList = document.getElementById('property-admin-list'); // --- Login Logic --- loginForm.addEventListener('submit', (e) => { e.preventDefault(); const passwordInput = document.getElementById('password'); if (passwordInput.value === adminPassword) { adminLoginDiv.style.display = 'none'; adminDashboardDiv.style.display = 'block'; loginMessage.textContent = ''; renderAdminProperties(); // Load properties in admin view } else { loginMessage.textContent = 'Incorrect password.'; } passwordInput.value = ''; // Clear password field }); // --- Render Admin Property List --- function renderAdminProperties() { propertyAdminList.innerHTML = ''; // Clear current list if (properties.length === 0) { propertyAdminList.innerHTML = '

No properties added yet.

'; return; } properties.forEach(property => { const listItem = document.createElement('li'); listItem.setAttribute('data-id', property.id); const statusText = property.status.charAt(0).toUpperCase() + property.status.slice(1); const toggleStatusText = property.status === 'available' ? 'Mark Occupied' : 'Mark Available'; listItem.innerHTML = `

${property.title}

${property.description.substring(0, 100)}...

Status: ${statusText}

`; propertyAdminList.appendChild(listItem); }); } // --- Add Property Logic --- addPropertyForm.addEventListener('submit', (e) => { e.preventDefault(); const title = document.getElementById('title').value; const description = document.getElementById('description').value; const imageUrl = document.getElementById('image-url').value; const status = document.getElementById('status').value; const newProperty = { id: nextId++, title, description, imageUrl, status }; properties.push(newProperty); window.realEstateProperties = properties; // Update global array renderAdminProperties(); // Re-render list addPropertyForm.reset(); // Clear form alert('Property added!'); // Simple feedback }); // --- Edit/Delete/Status Toggle Logic (Event Delegation) --- propertyAdminList.addEventListener('click', (e) => { const target = e.target; const listItem = target.closest('li'); if (!listItem) return; const propertyId = parseInt(listItem.getAttribute('data-id')); const propertyIndex = properties.findIndex(p => p.id === propertyId); if (propertyIndex === -1) return; // Should not happen if (target.classList.contains('delete-btn')) { // --- Delete Property --- if (confirm(`Are you sure you want to delete "${properties[propertyIndex].title}"?`)) { properties.splice(propertyIndex, 1); window.realEstateProperties = properties; // Update global array renderAdminProperties(); // Re-render list alert('Property deleted.'); } } else if (target.classList.contains('status-toggle-btn')) { // --- Toggle Status --- const currentStatus = properties[propertyIndex].status; properties[propertyIndex].status = currentStatus === 'available' ? 'occupied' : 'available'; window.realEstateProperties = properties; // Update global array renderAdminProperties(); // Re-render list alert('Status updated.'); } else if (target.classList.contains('edit-btn')) { // --- Edit Property (Basic Simulation) --- // In a real app, this would open a modal or a new page with a form // For this simulation, we'll use prompts const property = properties[propertyIndex]; const newTitle = prompt('Edit Title:', property.title); const newDescription = prompt('Edit Description:', property.description); const newImageUrl = prompt('Edit Image URL:', property.imageUrl); const newStatus = prompt('Edit Status (available/occupied):', property.status); if (newTitle !== null && newDescription !== null && newImageUrl !== null && newStatus !== null) { // Basic validation for status const validStatus = ['available', 'occupied']; if (validStatus.includes(newStatus.toLowerCase())) { property.title = newTitle; property.description = newDescription; property.imageUrl = newImageUrl; property.status = newStatus.toLowerCase(); window.realEstateProperties = properties; // Update global array renderAdminProperties(); // Re-render list alert('Property updated.'); } else { alert('Invalid status entered. Please use "available" or "occupied".'); } } else { alert('Edit cancelled.'); } } }); // Initial render of admin list if already logged in (not applicable in this simple model) // renderAdminProperties(); // This would run if the dashboard was initially visible To use this: 1. Open `index.html` to see the property listings. 2. Click "Admin Login" to go to `admin.html`. 3. Enter the password `admin` to access the admin dashboard. 4. From the admin dashboard, you can: * Add new properties using the form. * See the list of existing properties. * Use the buttons next to each property to toggle its status, edit its details (via prompts), or delete it. Remember, this is a client-side simulation. Data is not persistent and resets when the page is reloaded. For a real application, you would need a backend server, a database, and secure authentication.

Real Estate Listings

Admin Panel

Manage Properties

Add New Property

Existing Properties

${property.title}

${property.title}