Better UI

src/webui/index.html

@@ -12,11 +12,23 @@
   <div id="toast-container"></div>
   <h1>Photo WebUI</h1>
   <!-- Toolbar with refresh and save buttons -->
+  <!--
   <div class="toolbar">
     <button onclick="refreshGallery()">🔄 Refresh Gallery</button>
     <button onclick="refreshHero()">🔄 Refresh Hero</button>
     <button onclick="saveChanges()">💾 Save Changes</button>
   </div>
+  -->
+
+  <!-- Hero Upload Section -->
+  <div class="upload-section">
+    <h2>Hero</h2>
+    <label>
+      Upload Image:
+      <input type="file" id="upload-hero" accept=".png,.jpg,.jpeg,.webp" multiple>
+    </label>
+    <div id="hero"></div>
+  </div>
   
   <!-- Gallery Upload Section -->
   <div class="upload-section">
@@ -28,16 +40,6 @@
     <div id="gallery"></div>
   </div>
 
-  <!-- Hero Upload Section -->
-  <div class="upload-section">
-    <h2>Hero</h2>
-    <label>
-      Upload Image:
-      <input type="file" id="upload-hero" accept=".png,.jpg,.jpeg,.webp" multiple>
-    </label>
-    <div id="hero"></div>
-  </div>
-
   <!-- JS files for rendering, uploading, and actions -->
   <script src="{{ url_for('static', filename='js/main.js') }}"></script>
   <script src="{{ url_for('static', filename='js/upload.js') }}"></script>

src/webui/js/main.js

@@ -36,11 +36,16 @@ function renderGallery() {
   container.innerHTML = '';
   galleryImages.forEach((img, i) => {
     const div = document.createElement('div');
-    div.className = 'photo';
+    div.className = 'photo flex-item flex-column';
     div.innerHTML = `
+      <div class="flex-item">
         <img src="/photos/${img.src}">
+      </div>
       <div class="tag-input" data-index="${i}"></div>
+      <div class="flex-item flex-full">
+        <div class="flex-item flex-end">
         <button onclick="deleteGalleryImage(${i})">🗑 Delete</button>
+      </div>
     `;
     container.appendChild(div);
 
@@ -192,10 +197,15 @@ function renderHero() {
   container.innerHTML = '';
   heroImages.forEach((img, i) => {
     const div = document.createElement('div');
-    div.className = 'photo';
+    div.className = 'photo flex-item flex-column';
     div.innerHTML = `
+      <div class="flex-item">
         <img src="/photos/${img.src}">
+      </div>
+      <div class="flex-item flex-full">
+        <div class="flex-item flex-end">
         <button onclick="deleteHeroImage(${i})">🗑 Delete</button>
+      </div>
     `;
     container.appendChild(div);
   });

src/webui/style/style.css

@@ -1,12 +1,13 @@
 body {
-  font-family: Arial, sans-serif;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   margin: 20px;
-  background-color: #f9f9f9;
+  background:radial-gradient(ellipse at bottom center, #002a30, #000000bd), radial-gradient(ellipse at top center, #0558a8, #000000fa);
-  color: #333;
+  color: #FBFBFB;
+  min-height: 100vh;
 }
 
 h1, h2 {
-  color: #222;
+  color: #FBFBFB;
 }
 
 .toolbar {
@@ -43,13 +44,16 @@ h1, h2 {
   gap: 15px;
 }
 
+#gallery {
+  margin-top: 30px;
+}
+
 .photo {
-  background-color: white;
+  background-color: rgba(58, 62, 65, 0.26);
-  border: 1px solid #ddd;
   border-radius: 6px;
   padding: 10px;
   text-align: center;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .photo img {
@@ -61,19 +65,21 @@ h1, h2 {
 .photo input[type="text"] {
   width: 100%;
   padding: 4px 6px;
-  margin-bottom: 6px;
+  border-radius: 30px;
-  border: 1px solid #ccc;
+  color: rgb(221, 221, 221);
-  border-radius: 4px;
+  
 }
 
 .photo button {
-  padding: 4px 8px;
+    padding: 4px;
     border: none;
-  background-color: #f44336;
+    background-color:rgb(121 26 19);
     color: white;
-  border-radius: 4px;
+    border-radius: 30px;
     cursor: pointer;
     transition: background-color 0.2s;
+    margin-top: 10px;
+    width:100%;
 }
 
 .photo button:hover {
@@ -133,11 +139,8 @@ h1, h2 {
     display: flex;
     flex-wrap: wrap;
     gap: 4px;
-  border: 1px solid #ccc;
     padding: 4px;
-  border-radius: 4px;
+    position: relative;
-  position: relative; /* ensures dropdown positions correctly */
-  background-color: white;
     z-index: 1;
 }
 
@@ -146,12 +149,14 @@ h1, h2 {
   outline: none;
   flex: 1;
   min-width: 60px;
+  background-color: #1f2223;
+  border: 1px solid #585858;
 }
 
 .tag {
-  background-color: #eee;
+  background-color: #074053;
-  padding: 2px 6px;
+  padding: 0.2em 0.5em;
-  border-radius: 3px;
+  border-radius: 15px;
   display: flex;
   align-items: center;
 }
@@ -167,8 +172,7 @@ h1, h2 {
   top: 100%;
   left: 0;
   right: 0;
-  background: white;
+  background: #181a1b;
-  border: 1px solid #ccc;
   border-top: none;
   list-style: none;
   margin: 0;
@@ -186,14 +190,31 @@ h1, h2 {
 }
 
 .tag-input ul.suggestions li:hover {
-  background-color: #f0f0f0;
+  background-color: #007782;
 }
 
 .suggestions li.selected {
-  background-color: #007bff;
+  background-color: #007782;
   color: white;
   cursor: pointer;
 }
 .suggestions li {
   cursor: pointer;
 }
+
+.flex-item {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-full {
+  flex: 1;
+}
+
+.flex-end {
+  align-items: flex-end;
+  width: 100%
+}