Update static/script.js

static/script.js

@@ -218,6 +218,55 @@ function fetchItemDetails(itemName) {
         });
 }
 
+function showDescriptionPopup(item) {
+    const existingPopup = document.querySelector('.description-popup');
+    if (existingPopup) existingPopup.remove();
+
+    const popup = document.createElement('div');
+    popup.className = 'description-popup';
+
+    const content = document.createElement('div');
+    content.className = 'popup-content';
+
+    const img = document.createElement('img');
+    img.src = item.image_url || 'https://via.placeholder.com/100';
+    img.alt = item.name;
+    img.className = 'popup-image';
+    content.appendChild(img);
+
+    const title = document.createElement('h3');
+    title.textContent = item.name;
+    content.appendChild(title);
+
+    const desc = document.createElement('p');
+    desc.textContent = item.description;
+    content.appendChild(desc);
+
+    const addButton = document.createElement('button');
+    addButton.textContent = 'Add';
+    addButton.className = 'popup-add-button';
+    addButton.onclick = () => {
+        const sectorItem = {
+            name: item.name,
+            image_url: item.image_url || ''
+        };
+        selectedItems.push(sectorItem);
+        addMessage('bot', `Added "${item.name}" to your selection! Check the box below.`);
+        updateSelectionBox();
+        popup.remove();
+    };
+    content.appendChild(addButton);
+
+    const closeButton = document.createElement('button');
+    closeButton.textContent = 'Close';
+    closeButton.className = 'popup-close-button';
+    closeButton.onclick = () => popup.remove();
+    content.appendChild(closeButton);
+
+    popup.appendChild(content);
+    document.body.appendChild(popup);
+}
+
 function displayItemsList(items, containerId, isSectorDetail = false) {
     const container = document.getElementById(containerId);
     if (!container) {
@@ -244,30 +293,19 @@ function displayItemsList(items, containerId, isSectorDetail = false) {
         itemDiv.appendChild(nameDiv);
 
         if (isSectorDetail && item.description) {
-            const descDiv = document.createElement('div');
-            descDiv.textContent = item.description;
-            descDiv.style.textAlign = 'center';
-            descDiv.style.fontSize = '10px';
-            descDiv.style.color = '#555';
-            itemDiv.appendChild(descDiv);
-        }
-
-        const button = document.createElement('button');
-        button.textContent = 'Add';
-        button.onclick = () => {
-            if (isSectorDetail) {
-                const sectorItem = {
-                    name: item.name,
-                    image_url: item.image_url || ''
-                };
-                selectedItems.push(sectorItem);
-                addMessage('bot', `Added "${item.name}" to your selection! Check the box below.`);
-            } else {
+            const showDescButton = document.createElement('button');
+            showDescButton.textContent = 'Show Description';
+            showDescButton.className = 'show-desc-button';
+            showDescButton.onclick = () => showDescriptionPopup(item);
+            itemDiv.appendChild(showDescButton);
+        } else {
+            const addButton = document.createElement('button');
+            addButton.textContent = 'Add';
+            addButton.onclick = () => {
                 fetchItemDetails(item.name);
-            }
-            updateSelectionBox();
-        };
-        itemDiv.appendChild(button);
+            };
+            itemDiv.appendChild(addButton);
+        }
 
         container.appendChild(itemDiv);
     });