From b202b3f686116476823e9eb65a4c148190370bd1 Mon Sep 17 00:00:00 2001
From: tiritibambix <tiritibambix@free.fr>
Date: Fri, 20 Dec 2024 15:08:17 +0100
Subject: [PATCH 1/4] Html and CSS refactor

---
 templates/resize.html       | 161 +++++++++++++++++-------------------
 templates/resize_batch.html | 116 +++++++++++++-------------
 2 files changed, 138 insertions(+), 139 deletions(-)

diff --git a/templates/resize.html b/templates/resize.html
index f733c75..d512344 100644
--- a/templates/resize.html
+++ b/templates/resize.html
@@ -6,32 +6,25 @@
     <title>Resize Options</title>
     <style>
         :root {
-            /** Dark theme primary colors */
             --clr-primary-a0: #808080;
             --clr-primary-a10: #8d8d8d;
             --clr-primary-a20: #9b9b9b;
             --clr-primary-a30: #a9a9a9;
             --clr-primary-a40: #b6b6b6;
-            --clr-primary-a50: #c5c5c5;
+            --clr-primary-a50: #ffffff;
 
-            /** Dark theme surface colors */
             --clr-surface-a0: #121212;
             --clr-surface-a10: #282828;
             --clr-surface-a20: #3f3f3f;
             --clr-surface-a30: #575757;
-            --clr-surface-a40: #717171;
-            --clr-surface-a50: #8b8b8b;
 
-            /** Spacing and size variables */
             --spacing-small: 10px;
             --spacing-medium: 20px;
             --spacing-large: 40px;
 
-            /** Input field sizes */
             --input-width: 100%;
             --input-max-width: 300px;
 
-            /** Header font size */
             --header-font-size: 1.5rem;
         }
 
@@ -57,27 +50,33 @@
             text-align: center;
         }
 
-        h1 {
+        h4 {
             color: var(--clr-primary-a30);
-            font-size: var(--header-font-size); /* Smaller font size */
-            margin: var(--spacing-small) 0; /* Reduce margin */
+            font-size: var(--header-font-size);
+            margin-bottom: var(--spacing-small);
         }
 
-        h2 {
+        form fieldset {
+            margin-bottom: var(--spacing-medium);
+            border: none;
+            padding: 0;
+        }
+
+        legend {
+            text-align: center;
+            font-weight: bold;
             color: var(--clr-primary-a40);
-            font-size: 1.2rem;
-            margin-top: var(--spacing-medium);
+            margin-bottom: var(--spacing-small);
         }
 
-        form {
-            margin-bottom: var(--spacing-medium);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
+        form label {
+            display: block;
+            margin-top: var(--spacing-small);
+            color: var(--clr-primary-a40);
+            font-size: 0.9rem;
         }
 
         input[type="text"],
-        input[type="checkbox"],
         select {
             padding: var(--spacing-small);
             margin-top: var(--spacing-small);
@@ -100,6 +99,7 @@
             cursor: pointer;
             font-size: 1rem;
             width: var(--input-width);
+            transition: background-color 0.3s ease;
         }
 
         button:hover {
@@ -117,12 +117,8 @@
                 max-width: 600px;
             }
 
-            h1 {
-                font-size: 1.8rem; /* Slightly larger on larger screens */
-            }
-
-            h2 {
-                font-size: 1.5rem;
+            h4 {
+                font-size: 1.8rem;
             }
 
             button {
@@ -136,76 +132,75 @@
     <div class="container">
         <h4>Resize Image: {{ filename }}</h4>
         <form action="/resize/{{ filename }}" method="post">
-            <h2>Resize by Pixels</h2>
-            <label>
-                Width:
-                <input type="text" name="width" placeholder="Enter width" id="width" data-original-width="{{ width }}" data-original-height="{{ height }}">
-            </label>
-            <label>
-                Height:
-                <input type="text" name="height" placeholder="Enter height" id="height" data-original-width="{{ width }}" data-original-height="{{ height }}">
-            </label>
-            <label>
-                <input type="checkbox" name="keep_ratio" id="keep_ratio"> Keep Aspect Ratio
-            </label>
-            <small>Original dimensions: {{ width }} x {{ height }} pixels</small>
-
-            <h2>Resize by Percentage</h2>
-            <input type="text" name="percentage" placeholder="Enter percentage (1-100)">
-
-            <h2>Additional Options</h2>
-            <label>
-                Quality (1-100):
-                <input type="text" name="quality" value="100">
-            </label>
-            <label>
-                Convert to format:
-                <select name="format">
+            <fieldset>
+                <legend>Resize by Pixels</legend>
+                <label for="width">Width:</label>
+                <input type="text" name="width" id="width" placeholder="Enter width" data-original-width="{{ width }}" data-original-height="{{ height }}">
+
+                <label for="height">Height:</label>
+                <input type="text" name="height" id="height" placeholder="Enter height" data-original-width="{{ width }}" data-original-height="{{ height }}">
+
+                <label>
+                    <input type="checkbox" name="keep_ratio" id="keep_ratio"> Keep Aspect Ratio
+                </label>
+                <small>Original dimensions: {{ width }} x {{ height }} pixels</small>
+            </fieldset>
+
+            <fieldset>
+                <legend>Resize by Percentage</legend>
+                <label for="percentage">Percentage:</label>
+                <input type="text" name="percentage" id="percentage" placeholder="Enter percentage (1-100)">
+            </fieldset>
+
+            <fieldset>
+                <legend>Additional Options</legend>
+                <label for="quality">Quality (1-100):</label>
+                <input type="text" name="quality" id="quality" value="100">
+
+                <label for="format">Convert to format:</label>
+                <select name="format" id="format">
                     <option value="">Keep Original</option>
                     {% for fmt in formats %}
                         <option value="{{ fmt|lower }}">{{ fmt }}</option>
                     {% endfor %}
                 </select>
-            </label>
+            </fieldset>
 
             <button type="submit">Resize</button>
         </form>
     </div>
     <script>
-        const widthInput = document.getElementById('width');
-        const heightInput = document.getElementById('height');
-        const keepRatioCheckbox = document.getElementById('keep_ratio');
-
-        function calculateOtherDimension(changedInput, otherInput, originalWidth, originalHeight) {
-            if (!keepRatioCheckbox.checked) return;
-
-            const value = parseInt(changedInput.value, 10);
-            if (!isNaN(value)) {
-                if (changedInput.id === 'width') {
-                    otherInput.value = Math.round((value / originalWidth) * originalHeight);
-                } else if (changedInput.id === 'height') {
-                    otherInput.value = Math.round((value / originalHeight) * originalWidth);
+        document.addEventListener('DOMContentLoaded', () => {
+            const widthInput = document.getElementById('width');
+            const heightInput = document.getElementById('height');
+            const keepRatioCheckbox = document.getElementById('keep_ratio');
+
+            function syncDimensions(changedInput, otherInput, originalWidth, originalHeight) {
+                if (!keepRatioCheckbox.checked) return;
+
+                const value = parseInt(changedInput.value, 10);
+                if (!isNaN(value)) {
+                    const ratio = (changedInput.id === 'width')
+                        ? originalHeight / originalWidth
+                        : originalWidth / originalHeight;
+                    otherInput.value = Math.round(value * ratio);
                 }
             }
-        }
-
-        widthInput.addEventListener('input', () => {
-            const originalWidth = parseInt(widthInput.dataset.originalWidth, 10);
-            const originalHeight = parseInt(widthInput.dataset.originalHeight, 10);
-            calculateOtherDimension(widthInput, heightInput, originalWidth, originalHeight);
-        });
-
-        heightInput.addEventListener('input', () => {
-            const originalWidth = parseInt(heightInput.dataset.originalWidth, 10);
-            const originalHeight = parseInt(heightInput.dataset.originalHeight, 10);
-            calculateOtherDimension(heightInput, widthInput, originalWidth, originalHeight);
-        });
 
-        keepRatioCheckbox.addEventListener('change', () => {
-            if (!keepRatioCheckbox.checked) {
-                widthInput.value = '';
-                heightInput.value = '';
-            }
+            [widthInput, heightInput].forEach(input => {
+                input.addEventListener('input', () => {
+                    const originalWidth = parseInt(widthInput.dataset.originalWidth, 10);
+                    const originalHeight = parseInt(heightInput.dataset.originalHeight, 10);
+                    syncDimensions(input, input === widthInput ? heightInput : widthInput, originalWidth, originalHeight);
+                });
+            });
+
+            keepRatioCheckbox.addEventListener('change', () => {
+                if (!keepRatioCheckbox.checked) {
+                    widthInput.value = '';
+                    heightInput.value = '';
+                }
+            });
         });
     </script>
 </body>
diff --git a/templates/resize_batch.html b/templates/resize_batch.html
index 458c429..81967f8 100644
--- a/templates/resize_batch.html
+++ b/templates/resize_batch.html
@@ -6,30 +6,26 @@
     <title>Resize Batch</title>
     <style>
         :root {
-            /** Dark theme primary colors */
             --clr-primary-a0: #808080;
             --clr-primary-a10: #8d8d8d;
             --clr-primary-a20: #9b9b9b;
             --clr-primary-a30: #a9a9a9;
             --clr-primary-a40: #b6b6b6;
-            --clr-primary-a50: #c5c5c5;
+            --clr-primary-a50: #ffffff;
 
-            /** Dark theme surface colors */
             --clr-surface-a0: #121212;
             --clr-surface-a10: #282828;
             --clr-surface-a20: #3f3f3f;
             --clr-surface-a30: #575757;
-            --clr-surface-a40: #717171;
-            --clr-surface-a50: #8b8b8b;
 
-            /** Spacing and size variables */
             --spacing-small: 10px;
             --spacing-medium: 20px;
             --spacing-large: 40px;
 
-            /** Input field sizes */
             --input-width: 100%;
             --input-max-width: 300px;
+
+            --header-font-size: 1.8rem;
         }
 
         body {
@@ -56,24 +52,31 @@
 
         h1 {
             color: var(--clr-primary-a30);
-            font-size: 1.8rem;
+            font-size: var(--header-font-size);
+            margin-bottom: var(--spacing-medium);
         }
 
-        h2 {
+        form fieldset {
+            margin-bottom: var(--spacing-medium);
+            border: none;
+            padding: 0;
+        }
+
+        legend {
+            text-align: center;
+            font-weight: bold;
             color: var(--clr-primary-a40);
-            font-size: 1.2rem;
-            margin-top: var(--spacing-medium);
+            margin-bottom: var(--spacing-small);
         }
 
-        form {
-            margin-bottom: var(--spacing-medium);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
+        form label {
+            display: block;
+            margin-top: var(--spacing-small);
+            color: var(--clr-primary-a40);
+            font-size: 0.9rem;
         }
 
         input[type="text"],
-        input[type="checkbox"],
         select {
             padding: var(--spacing-small);
             margin-top: var(--spacing-small);
@@ -96,6 +99,7 @@
             cursor: pointer;
             font-size: 1rem;
             width: var(--input-width);
+            transition: background-color 0.3s ease;
         }
 
         button:hover {
@@ -117,10 +121,6 @@
                 font-size: 2.4rem;
             }
 
-            h2 {
-                font-size: 1.5rem;
-            }
-
             button {
                 font-size: 1.1rem;
                 width: auto;
@@ -133,53 +133,57 @@
         <h1>Resize Batch</h1>
         <form action="/resize_batch" method="post">
             <input type="hidden" name="filenames" value="{{ ','.join(files) }}">
-            <h2>Resize Options</h2>
-            <label>
-                Width:
-                <input type="text" name="width" placeholder="Enter width" id="batch_width">
-            </label>
-            <label>
-                Height:
-                <input type="text" name="height" placeholder="Enter height" id="batch_height">
-            </label>
-            <label>
-                <input type="checkbox" name="keep_ratio" id="batch_keep_ratio"> Keep Aspect Ratio
-            </label>
-
-            <h2>Resize by Percentage</h2>
-            <input type="text" name="percentage" placeholder="Enter percentage (1-100)">
-
-            <h2>Additional Options</h2>
-            <label>
-                Quality (1-100):
-                <input type="text" name="quality" value="100">
-            </label>
-            <label>
-                Format:
-                <select name="format">
+            <fieldset>
+                <legend>Resize Options</legend>
+                <label for="batch_width">Width:</label>
+                <input type="text" name="width" id="batch_width" placeholder="Enter width">
+
+                <label for="batch_height">Height:</label>
+                <input type="text" name="height" id="batch_height" placeholder="Enter height">
+
+                <label>
+                    <input type="checkbox" name="keep_ratio" id="batch_keep_ratio"> Keep Aspect Ratio
+                </label>
+            </fieldset>
+
+            <fieldset>
+                <legend>Resize by Percentage</legend>
+                <label for="batch_percentage">Percentage:</label>
+                <input type="text" name="percentage" id="batch_percentage" placeholder="Enter percentage (1-100)">
+            </fieldset>
+
+            <fieldset>
+                <legend>Additional Options</legend>
+                <label for="batch_quality">Quality (1-100):</label>
+                <input type="text" name="quality" id="batch_quality" value="100">
+
+                <label for="batch_format">Format:</label>
+                <select name="format" id="batch_format">
                     <option value="">Keep Original</option>
                     {% for fmt in formats %}
                         <option value="{{ fmt|lower }}">{{ fmt }}</option>
                     {% endfor %}
                 </select>
-            </label>
+            </fieldset>
 
             <button type="submit">Resize Batch</button>
         </form>
     </div>
     <script>
-        const batchWidthInput = document.getElementById('batch_width');
-        const batchHeightInput = document.getElementById('batch_height');
-        const batchKeepRatioCheckbox = document.getElementById('batch_keep_ratio');
-
-        function resetDimensionsIfRatioNotKept() {
-            if (!batchKeepRatioCheckbox.checked) {
-                batchWidthInput.value = '';
-                batchHeightInput.value = '';
+        document.addEventListener('DOMContentLoaded', () => {
+            const batchWidthInput = document.getElementById('batch_width');
+            const batchHeightInput = document.getElementById('batch_height');
+            const batchKeepRatioCheckbox = document.getElementById('batch_keep_ratio');
+
+            function resetDimensionsIfRatioNotKept() {
+                if (!batchKeepRatioCheckbox.checked) {
+                    batchWidthInput.value = '';
+                    batchHeightInput.value = '';
+                }
             }
-        }
 
-        batchKeepRatioCheckbox.addEventListener('change', resetDimensionsIfRatioNotKept);
+            batchKeepRatioCheckbox.addEventListener('change', resetDimensionsIfRatioNotKept);
+        });
     </script>
 </body>
 </html>
\ No newline at end of file

From 35b3e7775a00e30f8acc4e2623405052c7e69b91 Mon Sep 17 00:00:00 2001
From: tiritibambix <tiritibambix@free.fr>
Date: Fri, 20 Dec 2024 15:09:20 +0100
Subject: [PATCH 2/4] html + css refactor workflow

---
 .github/workflows/{docker-build.yml => docker-build-test.yml} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename .github/workflows/{docker-build.yml => docker-build-test.yml} (96%)

diff --git a/.github/workflows/docker-build.yml b/.github/workflows/docker-build-test.yml
similarity index 96%
rename from .github/workflows/docker-build.yml
rename to .github/workflows/docker-build-test.yml
index d48ee21..957ef4e 100644
--- a/.github/workflows/docker-build.yml
+++ b/.github/workflows/docker-build-test.yml
@@ -48,7 +48,7 @@ jobs:
         tags: tiritibambix/imaguick:test
         cache-from: type=local,src=/tmp/.buildx-cache
         cache-to: type=local,dest=/tmp/.buildx-cache
-        platforms: linux/amd64,linux/arm64
+        platforms: linux/amd64
 
     # Logout from Docker Hub
     - name: Logout from Docker Hub

From f6dd9c7b853858884063d0350e155742baa8affb Mon Sep 17 00:00:00 2001
From: tiritibambix <tiritibambix@free.fr>
Date: Fri, 20 Dec 2024 15:16:03 +0100
Subject: [PATCH 3/4] Update index.html

---
 templates/index.html | 51 ++++++++++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 18 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 89d6cc8..3000ac6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,30 +6,26 @@
     <title>Image Upload</title>
     <style>
         :root {
-            /** Dark theme primary colors */
             --clr-primary-a0: #808080;
             --clr-primary-a10: #8d8d8d;
             --clr-primary-a20: #9b9b9b;
             --clr-primary-a30: #a9a9a9;
             --clr-primary-a40: #b6b6b6;
-            --clr-primary-a50: #c5c5c5;
+            --clr-primary-a50: #ffffff;
 
-            /** Dark theme surface colors */
             --clr-surface-a0: #121212;
             --clr-surface-a10: #282828;
             --clr-surface-a20: #3f3f3f;
             --clr-surface-a30: #575757;
-            --clr-surface-a40: #717171;
-            --clr-surface-a50: #8b8b8b;
 
-            /** Spacing and size variables */
             --spacing-small: 10px;
             --spacing-medium: 20px;
             --spacing-large: 40px;
 
-            /** Input field sizes */
             --input-width: 100%;
             --input-max-width: 300px;
+
+            --header-font-size: 1.8rem;
         }
 
         body {
@@ -56,15 +52,28 @@
 
         h1 {
             color: var(--clr-primary-a30);
-            font-size: 1.8rem;
+            font-size: var(--header-font-size);
             margin-bottom: var(--spacing-medium);
         }
 
-        form {
+        form fieldset {
             margin-bottom: var(--spacing-medium);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
+            border: none;
+            padding: 0;
+        }
+
+        legend {
+            text-align: center;
+            font-weight: bold;
+            color: var(--clr-primary-a40);
+            margin-bottom: var(--spacing-small);
+        }
+
+        form label {
+            display: block;
+            margin-top: var(--spacing-small);
+            color: var(--clr-primary-a40);
+            font-size: 0.9rem;
         }
 
         input[type="file"],
@@ -87,6 +96,8 @@
             color: var(--clr-surface-a0);
             cursor: pointer;
             font-size: 1rem;
+            width: var(--input-width);
+            transition: background-color 0.3s ease;
         }
 
         button:hover {
@@ -117,15 +128,19 @@
 </head>
 <body>
     <div class="container">
-        <h1>Upload Images</h1>
         <form action="/upload" method="post" enctype="multipart/form-data">
-            <input type="file" name="file" multiple>
-            <button type="submit">Upload</button>
+            <fieldset>
+                <legend>Upload Images</legend>
+                <input type="file" name="file" multiple>
+                <button type="submit">Upload</button>
+            </fieldset>
         </form>
-        <h1>Upload Image by URL</h1>
         <form action="/upload_url" method="post">
-            <input type="text" name="url" placeholder="Enter image URL" required>
-            <button type="submit">Download and Upload</button>
+            <fieldset>
+                <legend>Upload Image by URL</legend>
+                <input type="text" name="url" placeholder="Enter image URL" required>
+                <button type="submit">Download and Upload</button>
+            </fieldset>
         </form>
     </div>
 </body>

From 1ea5cb4bf6c03c71f61c81ac7938c4650a1dbd35 Mon Sep 17 00:00:00 2001
From: tiritibambix <tiritibambix@free.fr>
Date: Fri, 20 Dec 2024 15:20:01 +0100
Subject: [PATCH 4/4] workflow

---
 .../workflows/{docker-build-test.yml => docker-build.yml} | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
 rename .github/workflows/{docker-build-test.yml => docker-build.yml} (91%)

diff --git a/.github/workflows/docker-build-test.yml b/.github/workflows/docker-build.yml
similarity index 91%
rename from .github/workflows/docker-build-test.yml
rename to .github/workflows/docker-build.yml
index 957ef4e..58ba323 100644
--- a/.github/workflows/docker-build-test.yml
+++ b/.github/workflows/docker-build.yml
@@ -3,10 +3,10 @@ name: Build and Push Docker Image
 on:
   push:
     branches:
-      - test
+      - main
   pull_request:
     branches:
-      - test
+      - main
   workflow_dispatch:
 
 jobs:
@@ -45,10 +45,10 @@ jobs:
         context: .
         file: Dockerfile
         push: true
-        tags: tiritibambix/imaguick:test
+        tags: tiritibambix/imaguick:latest
         cache-from: type=local,src=/tmp/.buildx-cache
         cache-to: type=local,dest=/tmp/.buildx-cache
-        platforms: linux/amd64
+        platforms: linux/amd64,linux/arm64
 
     # Logout from Docker Hub
     - name: Logout from Docker Hub