improved Modal with zoom and pagination. also implementing thumbnail generation

app/static/style.css

@@ -43,22 +43,39 @@ body {
   transform: translateY(1px);
 }
 
+.flash-container {
+  max-width: 800px;
+  margin: 1rem auto;
+  padding: 0 1rem;
+}
+
 .flash {
-  padding: 0.5rem 1rem;
-  margin: 1rem 0;
-  border-radius: 4px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 6px;
+  font-weight: 500;
+  color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
 
-.flash.success {
-  background-color: #d4edda;
-  color: #155724;
+.flash-info {
+  background-color: #3182ce; /* blue */
 }
 
-.flash.danger {
-  background-color: #f8d7da;
-  color: #721c24;
+.flash-message, .flash-success {
+  background-color: #38a169; /* green */
 }
 
+.flash-warning {
+  background-color: #dd6b20; /* orange */
+}
+
+.flash-danger,
+.flash-error {
+  background-color: #e53e3e; /* red */
+}
+
+
 .content {
     padding: 8px;
 }
@@ -84,7 +101,7 @@ body {
   flex-direction: column;
   align-items: center;
   height: 450px;
-  background-color: rgba(1,1,1,.1);
+  background-color: #1c1c1c;
   box-shadow: 0 3px 4px rgba(0,0,0,0.7);
   padding: 8px;
   border-radius: 8px;
@@ -140,6 +157,11 @@ body {
   border-color: #007BFF;
 }
 
+.pagination-ellipsis {
+  padding: 0 0.5rem;
+  color: #999;
+}
+
 /* MODAL STYLES */
 .modal {
   display: none;
@@ -157,72 +179,94 @@ body {
 
 .modal-content {
   position: relative;
-  max-width: 95vw;
+  width: 100%;
+  max-width: 1600px;
   max-height: 95vh;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
+
+/* Modal body */
 .modal-body {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.75rem;
+  width: 100%;
 }
 
-.modal-body img {
-  max-width: 90vw;
+/* Image wrapper for tall image logic */
+.modal-image-wrapper {
+  max-width: 100%;
+  max-height: 80vh;
+  overflow: hidden;
+  cursor: default;
+}
+
+.modal-image-wrapper.zoomed {
+  overflow: auto;
+  cursor: grab;
+}
+
+.modal-image-wrapper.zoomed img {
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
+}
+
+
+.modal-image-wrapper img {
+  max-width: 100%;
   max-height: 80vh;
   object-fit: contain;
   border-radius: 6px;
   box-shadow: 0 0 10px rgba(0,0,0,0.6);
 }
 
-.modal-filename {
-  color: #fff;
-  background: rgba(0, 0, 0, 0.6);
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  font-size: 0.9rem;
-  text-align: center;
-  word-break: break-word;
+/* Adjust for very tall images */
+.modal-image-wrapper.too-tall {
+  overflow-y: auto;
 }
 
-/* Modal arrows and close */
+.modal-image-wrapper.too-tall img {
+  width: 90vw;
+  height: auto;
+  max-height: none;
+}
+
+/* Modal buttons */
 .modal-button {
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: rgba(0, 0, 0, 0.4);
+  top: 10%;
+  bottom: 10%;
+  width: 60px;
+  background: rgba(0, 0, 0, 0.3);
   border: none;
   color: white;
-  font-size: 2rem;
-  padding: 0.5rem 1rem;
+  font-size: 2.5rem;
   cursor: pointer;
   z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   opacity: 0;
   transition: opacity 0.2s;
+  border-radius: 4px;
 }
 
-.modal:hover .modal-button {
+.modal-content:hover .modal-button {
   opacity: 1;
 }
 
 .modal-prev {
-  left: -60px;
+  left: 0;
 }
 
 .modal-next {
-  right: -60px;
-}
-
-.modal-close {
-  top: 10px;
-  right: 10px;
-  transform: none;
-  font-size: 1.5rem;
-  opacity: 1;
+  right: 0;
 }
 
 /* Artist Styling */