Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test #4

Merged
merged 4 commits into from
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/workflows/docker-build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ name: Build and Push Docker Image
on:
push:
branches:
- test
- main
pull_request:
branches:
- test
- main
workflow_dispatch:

jobs:
Expand Down Expand Up @@ -45,7 +45,7 @@ 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,linux/arm64
Expand Down
51 changes: 33 additions & 18 deletions templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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"],
Expand All @@ -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 {
Expand Down Expand Up @@ -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>
Expand Down
161 changes: 78 additions & 83 deletions templates/resize.html
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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);
Expand All @@ -100,6 +99,7 @@
cursor: pointer;
font-size: 1rem;
width: var(--input-width);
transition: background-color 0.3s ease;
}

button:hover {
Expand All @@ -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 {
Expand All @@ -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>
Expand Down
Loading
Loading