diff --git a/templates/base.html b/templates/base.html index f557ebb..3c97596 100644 --- a/templates/base.html +++ b/templates/base.html @@ -185,6 +185,84 @@ margin-bottom: 5px; } + /* Hamburger button styling */ + #hamburger-button { + display: none; /* Hidden by default */ + position: fixed; + top: 20px; + left: 20px; + background-color: #333; + color: white; + border: none; + border-radius: 5px; + padding: 10px; + cursor: pointer; + z-index: 1001; + } + + /* Modal styling */ + #room-list-modal { + display: none; /* Hidden by default */ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 1002; + justify-content: center; + align-items: center; + } + + #room-list-modal-content { + display: none; /* Hidden by default */ + background-color: white; + padding: 20px; + border-radius: 5px; + width: 80%; + max-width: 400px; + max-height: 80vh; + overflow-y: auto; /* Make the room list scrollable */ + position: relative; + } + + /* Close button styling */ + #close-modal-button { + display: none; /* Hidden by default */ + position: fixed; + top: 10px; + right: 10px; + background-color: #333; + color: white; + border: none; + border-radius: 5px; + font-size: 20px; + cursor: pointer; + z-index: 1003; /* Ensure it is above the modal content */ + padding: 5px 10px; /* Add padding for a button-like appearance */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */ + transition: background-color 0.3s; /* Smooth transition for hover effect */ + } + + #close-modal-button:hover { + background-color: #555; /* Darken on hover */ + } + + /* Media query for mobile devices */ + @media (max-width: 768px) { + .main-container { + grid-template-columns: 1fr; /* Single column layout */ + } + + #rooms-list { + display: none; /* Hide the room list on mobile */ + } + + #hamburger-button { + display: block; /* Show the hamburger button on mobile */ + } + } + @@ -197,6 +275,19 @@ + + + + +
+
+ +
+ +
+
+
+
@@ -237,6 +328,32 @@ performSearch(); } }); + + // Function to open the modal + function openModal() { + const modal = document.getElementById("room-list-modal"); + const modalContent = document.getElementById("room-list-modal-content"); + const closeButton = document.getElementById("close-modal-button"); + const roomsList = document.getElementById("rooms-list-ul").cloneNode(true); + document.getElementById("rooms-list-modal-content").innerHTML = ''; // Clear previous content + document.getElementById("rooms-list-modal-content").appendChild(roomsList); + modal.style.display = "flex"; + modalContent.style.display = "block"; + closeButton.style.display = "block"; + } + + // Function to close the modal + function closeModal() { + const modal = document.getElementById("room-list-modal"); + const modalContent = document.getElementById("room-list-modal-content"); + const closeButton = document.getElementById("close-modal-button"); + modal.style.display = "none"; + modalContent.style.display = "none"; + closeButton.style.display = "none"; + } + + // Add event listener to the hamburger button + document.getElementById("hamburger-button").addEventListener("click", openModal);