Property Listings

<% properties.forEach(property => { %>

<% if (property.images && property.images[0]) { %>

<% } else { %>

<% } %>

<%= property.title %>

<%= property.description.substring(0, 100) %>...

Price: $<%= property.price %>

<%= property.status.charAt(0).toUpperCase() + property.status.slice(1) %>

View Details

<% }) %>

<%= property.title %>

<% if (property.images && property.images.length > 0) { %> <% property.images.forEach(image => { %> <%= property.title %>

<% }) %> <% } else { %>

<% } %>

<%= property.title %>

Price: $<%= property.price %>

Status: <%= property.status.charAt(0).toUpperCase() + property.status.slice(1) %>

Description: <%= property.description %>

<% if (property.amenities && property.amenities.length > 0) { %>

Amenities: <%= property.amenities.join(', ') %>

<% } %>

Admin Dashboard

Add New Property

Existing Properties

<% properties.forEach(property => { %>

<%= property.title %> View

<% }) %>

:root { --available: #4CAF50; --occupied: #F44336; --primary-color: #007bff; --secondary-color: #6c757d; --light-color: #f8f9fa; --dark-color: #343a40; } body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: var(--light-color); color: var(--dark-color); } .container { max-width: 1200px; margin: 20px auto; padding: 0 20px; } header { background-color: var(--dark-color); color: var(--light-color); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; } header h1 { margin: 0; font-size: 1.8em; } header nav a { color: var(--light-color); text-decoration: none; margin-left: 15px; } header nav a:hover { text-decoration: underline; } .property-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .property-card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; } .property-card.available { border-left: 5px solid var(--available); } .property-card.occupied { border-left: 5px solid var(--occupied); } .property-card img { width: 100%; height: 200px; object-fit: cover; } .property-info { padding: 15px; flex-grow: 1; } .property-info h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.3em; } .property-info p { margin-bottom: 10px; line-height: 1.5; } .status-badge { display: inline-block; padding: 5px 10px; border-radius: 4px; color: white; font-size: 0.9em; font-weight: bold; margin-bottom: 10px; } .available .status-badge, .status-badge.available { background-color: var(--available); } .occupied .status-badge, .status-badge.occupied { background-color: var(--occupied); } .button { display: inline-block; background-color: var(--primary-color); color: white; padding: 8px 15px; border-radius: 5px; text-decoration: none; margin-top: 10px; transition: background-color 0.3s ease; } .button:hover { background-color: #0056b3; } /* Property Detail Page */ .property-detail { display: flex; flex-wrap: wrap; gap: 30px; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .property-images { flex: 1 1 400px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .property-images img { width: 100%; height: auto; object-fit: cover; border-radius: 4px; } .property-detail .property-info { flex: 1 1 300px; padding: 0; /* Remove padding from card */ } .property-detail .property-info h2 { margin-top: 0; font-size: 2em; } /* Admin Styles */ .login-container, .admin-actions { max-width: 500px; margin: 40px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .login-container h1, .admin-actions h2 { text-align: center; margin-bottom: 20px; } .login-container form, .admin-actions form { display: grid; gap: 15px; } .login-container input[type="text"], .login-container input[type="password"], .admin-actions input[type="text"], .admin-actions input[type="number"], .admin-actions textarea, .admin-actions select, .admin-actions input[type="file"] { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Include padding and border in element's total width */ } .login-container button, .admin-actions button { background-color: var(--primary-color); color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; transition: background-color 0.3s ease; } .login-container button:hover, .admin-actions button:hover { background-color: #0056b3; } .error { color: var(--occupied); text-align: center; margin-bottom: 15px; } .property-list { margin-top: 30px; border-top: 1px solid #eee; padding-top: 20px; } .property-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; } .property-item:last-child { border-bottom: none; } .property-item span { flex-grow: 1; margin-right: 10px; font-weight: bold; } .property-item .status-form { display: flex; gap: 5px; align-items: center; margin: 0; } .property-item .status-form select { width: auto; padding: 5px; font-size: 0.9em; } .property-item .status-form button { padding: 5px 10px; font-size: 0.9em; } .property-item .button { margin-left: 10px; padding: 5px 10px; font-size: 0.9em; } /* Placeholder image style */ img[alt="No Image Available"] { background-color: #e9ecef; display: flex; justify-content: center; align-items: center; color: #6c757d; font-size: 1.2em; text-align: center; } Admin Login

Admin Login

[] { "name": "real-estate-booking", "version": "1.0.0", "main": "index.js", "scripts": { "start": "node index.js" }, "dependencies": { "bcryptjs": "^2.4.3", "ejs": "^3.1.9", "express": "^4.18.2", "express-session": "^1.17.3", "multer": "^1.4.5-lts.1" } } Install dependencies and start the server: bash npm install && npm start The system will be available at http://localhost:3000. Admin credentials: username: `admin` / password: `admin123`. You can manage properties through the admin dashboard after logging in at http://localhost:3000/admin/login.