Update data_gc_tab.html

data_gc_tab.html

@@ -33,116 +33,41 @@
   
 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>  
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            text-align: center;
-            background-color: #f0f0f0;
-            margin: 0;
-            padding: 0;
-        }
-        h1 {
-            background-color: #4CAF50;
-            color: white;
-            padding: 20px;
-            margin: 0;
-            border-bottom: 2px solid #388E3C;
-            font-size: 28px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-        }
-        button[type="submit"] {
-            color: white;
-            background-color: #4CAF50;
-            border: none;
-            cursor: pointer;
-            padding: 10px 20px;
-            font-size: 16px;
-            border-radius: 5px;
-            margin-top: 20px;
-            transition: background-color 0.3s ease;
-        }
-        button[type="submit"]:hover {
-            background-color: #388E3C;
-        }
-        #mediaContainer {
-            margin-top: 20px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            flex-direction: column;
-            max-width: 100%;
-            height: auto;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            border-radius: 10px;
-            padding: 20px;
-            background-color: white;
-        }
-        #mediaContainer img, #mediaContainer video {
-            max-width: 100%;
-            height: auto;
-            object-fit: contain;
-            border-radius: 10px;
-        }
-        #imageUrl {
-            margin-top: 20px;
-            font-size: 16px;
-            color: #333;
-            cursor: pointer;
-            text-decoration: underline;
-            transition: color 0.3s ease;
-        }
-        #imageUrl:hover {
-            color: #4CAF50;
-        }
-        #progressBarContainer {
-            width: 80%;
-            margin: 20px auto;
-            background-color: #ddd;
-            border-radius: 13px;
-            padding: 3px;
-            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-        }
-        #progressBar {
-            width: 0%;
-            height: 20px;
-            background-color: #4CAF50;
-            border-radius: 10px;
-            text-align: center;
-            line-height: 20px;
-            color: white;
-            transition: width 0.3s ease;
-        }
-        #filter-field, #filter-type, #filter-value, #filter-clear , #download-json{
-            padding: 10px;
-            font-size: 16px;
-            margin: 5px;
-        }
-        #filter-value {
-            width: 200px;
-        }
-        #filter-clear {
-            padding: 10px 20px;
-        }
-         #filter-field, #filter-type, #filter-value, #filter-clear, #download-json {
-         padding: 10px;
-         font-size: 16px;
-         margin: 5px;
-         border-radius: 5px;
-         border: 1px solid #ccc;
-        }
-         #filter-value {
-           width: 200px;
-          background-color: #f0f0f0;
-        }
-         #filter-clear {
-          padding: 10px 20px;
-          background-color: #4CAF50;
-          color: white;
-          border: none;
-          cursor: pointer;
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          transition: background-color 0.3s ease;
-         }
-#filter-field2, #filter-value2 {
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    background-color: #4CAF50;
+    color: white;
+    padding: 20px;
+    margin: 0;
+    border-bottom: 2px solid #388E3C;
+    font-size: 28px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+button, #filter-clear, #download-json, #take-for-yourself {
+    color: white;
+    background-color: #4CAF50;
+    border: none;
+    cursor: pointer;
+    padding: 10px 20px;
+    font-size: 16px;
+    border-radius: 5px;
+    margin: 5px;
+    transition: background-color 0.3s ease;
+}
+
+button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover {
+    background-color: #388E3C;
+}
+
+#filter-field, #filter-type, #filter-value, #filter-field2, #filter-value2 {
     padding: 10px;
     font-size: 16px;
     margin: 5px;
@@ -152,56 +77,88 @@
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
-#filter-field2:focus, #filter-value2:focus {
+#filter-field:focus, #filter-type:focus, #filter-value:focus, #filter-field2:focus, #filter-value2:focus {
     border-color: #4CAF50;
     box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
 }
 
-#filter-field2 option {
+#filter-field option, #filter-type option, #filter-field2 option {
     background-color: #f0f0f0;
     color: #333;
 }
 
-#filter-field2:hover, #filter-value2:hover {
+#filter-field:hover, #filter-type:hover, #filter-value:hover, #filter-field2:hover, #filter-value2:hover {
     border-color: #4CAF50;
-}  </style>
+}
 
-<style>
-    .swal-button-custom {
-        background-color: #4CAF50;
-        font-size: 16px;
-        padding: 10px 20px;
-    }
-    .swal-title-custom {
-        font-size: 24px;
-        color: #333;
-    }
-    .swal-content-custom {
-        font-size: 16px;
-        color: #666;
-    }
-#filter-field, #filter-type, #filter-value {
-    padding: 10px;
+#mediaContainer {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    max-width: 100%;
+    height: auto;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    background-color: white;
+}
+
+#mediaContainer img, #mediaContainer video {
+    max-width: 100%;
+    height: auto;
+    object-fit: contain;
+    border-radius: 10px;
+}
+
+#imageUrl {
+    margin-top: 20px;
     font-size: 16px;
-    margin: 5px;
-    border-radius: 5px;
-    border: 1px solid #ccc;
-    background-color: #f0f0f0;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    color: #333;
+    cursor: pointer;
+    text-decoration: underline;
+    transition: color 0.3s ease;
 }
 
-#filter-field:focus, #filter-type:focus, #filter-value:focus {
-    border-color: #4CAF50;
-    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
+#imageUrl:hover {
+    color: #4CAF50;
 }
 
-#filter-field option, #filter-type option {
-    background-color: #f0f0f0;
+#progressBarContainer {
+    width: 80%;
+    margin: 20px auto;
+    background-color: #ddd;
+    border-radius: 13px;
+    padding: 3px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+#progressBar {
+    width: 0%;
+    height: 20px;
+    background-color: #4CAF50;
+    border-radius: 10px;
+    text-align: center;
+    line-height: 20px;
+    color: white;
+    transition: width 0.3s ease;
+}
+
+.swal-button-custom {
+    background-color: #4CAF50;
+    font-size: 16px;
+    padding: 10px 20px;
+}
+
+.swal-title-custom {
+    font-size: 24px;
     color: #333;
 }
 
-#filter-field:hover, #filter-type:hover, #filter-value:hover {
-    border-color: #4CAF50;
+.swal-content-custom {
+    font-size: 16px;
+    color: #666;
 }
   
 </style>