firebase index

index.html

@@ -139,6 +139,64 @@ html, body {
     background-color: #713870; /* Change this to the desired hover background color */
 }
 
+#popup.popup-hidden {
+  display: none;
+}
+
+#popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+
+#popup-content {
+  background-color: #1F2937; /* Nighttime mode background color */
+  padding: 20px;
+  border-radius: 10px;
+  max-width: 80%;
+  max-height: 80%;
+  overflow-y: auto;
+  color: #ffffff; /* Nighttime mode text color */
+}
+#popup-content h2 {
+  font-weight: bold;
+  font-size: 16px;
+  background-color: #6B46C1;
+  border-radius: 10px;
+  padding: 5px;
+  color: #ffffff;
+  display: inline-block;
+}
+
+#prompt-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.prompt-item {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 5px 0;
+}
+
+.prompt-item span {
+  max-width: 68%;
+  word-wrap: break-word;
+}
+
+.prompt-item:nth-child(even) {
+  background-color: #2D3748; /* Nighttime mode alternate row color */
+}
+
 
 
 
@@ -150,6 +208,12 @@ html, body {
     <div id="hamburger-menu">
         <i class="fa fa-eye" aria-hidden="true"></i>
     </div>
+    <div id="popup" class="popup-hidden">
+        <div id="popup-content">
+          <h2>Prompt History</h2>
+          <ul id="prompt-list"></ul>
+        </div>
+    </div>
     <button type="button" class="control" id="export">Export</button>
     <button type="button" class="control" id="outpaint">Outpaint</button>
     <button type="button" class="control" id="undo">Undo</button>
@@ -191,10 +255,6 @@ html, body {
     <input type="file" name="state" id="upload_state" accept=".sdinf" hidden>
     <div style="position: relative;">
     <div id="toolbar" style></div>
-<!-- 
-    <div id="toolbar_container">
-        <div id="toolbar" style></div>
-      </div> -->
 
     </div>
 </div>
@@ -204,6 +264,42 @@ html, body {
 
     // alert("starting js");
 
+    function togglePopup() {
+        const popup = document.getElementById("popup");
+        const hamburgerMenu = document.getElementById("hamburger-menu");
+        if (popup.classList.contains("popup-hidden")) {
+            popup.classList.remove("popup-hidden");
+            hamburgerMenu.classList.add("open");
+            fetchPromptsFromFirebase();
+        } else {
+            popup.classList.add("popup-hidden");
+            hamburgerMenu.classList.remove("open");
+        }
+    }
+
+    function fetchPromptsFromFirebase() {
+        const promptList = document.getElementById("prompt-list");
+        const database = firebase.database();
+        const inputsRef = database.ref("inputs");
+
+        inputsRef.on("value", (snapshot) => {
+            const prompts = snapshot.val();
+            promptList.innerHTML = "";
+            const keys = Object.keys(prompts).reverse();
+            for (const key of keys) {
+            const promptItem = document.createElement("li");
+            promptItem.classList.add("prompt-item");
+            const promptText = document.createElement("span");
+            promptText.textContent = prompts[key].prompt;
+            const timestamp = document.createElement("span");
+            timestamp.textContent = new Date(prompts[key].timestamp * 1000).toLocaleString();
+            promptItem.appendChild(promptText);
+            promptItem.appendChild(timestamp);
+            promptList.appendChild(promptItem);
+            }
+        });
+        }
+
     function aws(name, x, y) {
         return `coming from javascript ${name} ${x} ${y}`;
     }
@@ -448,10 +544,16 @@ function overrideW2uiStyles() {
 
     }
 
-        // Execute style function to start checking
-        overrideW2uiStyles();
+    // Execute style function to start checking
+    overrideW2uiStyles();
+
+    document.getElementById("hamburger-menu").addEventListener("click", togglePopup);
+    document.getElementById("popup").addEventListener("click", (event) => {
+    if (event.target === event.currentTarget) {
+        togglePopup();
+    }
+    });
     
-//window.addEventListener("applyCustomStyles", overrideW2uiStyles);
   // alert("js loaded");
 </script>