Update repo images to show full-size image on click

includes/header.php

@@ -134,6 +134,34 @@ if (false && $PAGE_TYPE != "PASTE" && $PAGE_TYPE != "DONATIONS" && $PAGE_TYPE !=
         tbody > tr:first-child > td:last-child {
             font-weight: bold;
         }
+        .img_clickable:hover {
+            cursor: pointer;
+        }
+        .img_clickable:active > .img_clickable_overlay {
+            display: block;
+        }
+        .img_clickable_overlay {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            min-height: 100%;
+            background-color: black;
+            background-color: rgba(11, 11, 11, 0.75);
+            z-index: 1;
+            display: none;
+        }
+        .img_clickable_overlay:active {
+            display: none !important;
+        }
+        .img_clickable_overlay:hover {
+            cursor: initial;
+            display: block;
+        }
+        .img_clickable_overlay > img {
+            display: block;
+            margin: 0 auto;
+        }
     </style>
 <?php } ?>
 </head>

repo/generate-repo-page.sh

@@ -79,7 +79,9 @@ for PACKAGE in ${PACKAGES[@]}; do
         fi
     fi
     if [ -n "${SCREENSHOT}" ]; then
-        echo "<div><a href=\"/repo/screenshots/${SCREENSHOT}.png\"><img src=\"/repo/screenshots/${SCREENSHOT}.png\" alt=\"${PACKAGE}\" class=\"img_thumb_150\"/></a></div>"
+        echo "<div class=\"img_clickable img_thumb_150\"><img src=\"/repo/screenshots/${SCREENSHOT}.png\" alt=\"${PACKAGE}\"/>"
+        echo "<div class=\"img_clickable_overlay\"><img src=\"/repo/screenshots/${SCREENSHOT}.png\" alt=\"${PACKAGE}\"/></div>"
+        echo "</div>"
     else
         echo "<div><img src=\"/repo/screenshots/nogui.png\" alt=\"${PACKAGE}\" class=\"img_thumb_150\"/></div>"
     fi