Image Enlarger

HKUSTBNBConstant.py

@@ -195,7 +195,7 @@ TRAFFIC_DISCOUNT_DISPLAY = """
 """
 
 TRAFFIC_POPUP_BASE = """
-<div style='min-width: 150px; padding: 10px;'>
+<div style='min-width: 600px; padding: 10px;'>
     <p style='margin: 5px 0;'><strong>Location ID:</strong> {location_id}</p>
     {discount_display}
 """
@@ -211,9 +211,23 @@ TRAFFIC_RECORD_ENTRY = """
 """
 
 TRAFFIC_IMAGE_HTML = """
-<img src='data:image/jpeg;base64,{base64_encoded}' 
-     style='max-width: 100px; max-height: 100px; margin: 5px 0;' 
-     alt='Processed Image'>
+<div style="position: relative; display: inline-block;">
+    <img src='data:image/jpeg;base64,{base64_encoded}' 
+         style='max-width: 100px; max-height: 100px; margin: 5px 0; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease;' 
+         onmouseover="this.style.transform='scale(1.05)'; this.style.borderColor='#4285f4';" 
+         onmouseout="this.style.transform='scale(1)'; this.style.borderColor='transparent';"
+         onclick="this.parentElement.querySelector('.enlarged-view').style.display='flex';"
+         alt='Traffic Image'
+         title='Click to enlarge'>
+    <div class="enlarged-view" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; justify-content: center; align-items: center; flex-direction: column;">
+        <img src='data:image/jpeg;base64,{base64_encoded}' 
+             style='max-width: 90%; max-height: 80vh; margin: 0 auto; border: 3px solid white;'>
+        <div style="color: white; margin-top: 15px; background: rgba(0,0,0,0.7); padding: 8px 16px; border-radius: 4px; cursor: pointer; font-weight: bold;"
+             onclick="this.parentElement.style.display='none';">
+            Close
+        </div>
+    </div>
+</div>
 """
 
 TRAFFIC_NO_RECORDS = "<p>No records available</p>"