aristide.manyesse/ImageReducer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout de la prise en charge des fichiers TIFF, amélioration de la gestion de la progression et mise à jour du Dockerfile pour inclure exiftool

Browse Source
This commit is contained in:
Aristide Manyessé
2025-07-17 14:20:00 +00:00
parent d873dd118a
commit 4d1361057a
6 changed files with 241 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
views/index.tpl
View File

@@ -1,13 +1,12 @@
<!-- views/index.tpl -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Réduction d'images</title>
<title>Réduction d’images</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #f0f4f8;
background: #f8f9fa;
padding: 40px;
}
@@ -52,29 +51,25 @@
cursor: pointer;
}
button:hover {
background-color: #1d4ed8;
}
.loader {
display: none;
text-align: center;
margin-top: 40px;
}
.loader div {
border: 8px solid #f3f3f3;
border-top: 8px solid #2563eb;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: auto;
.progress-bar-container {
width: 100%;
background-color: #e0e0e0;
border-radius: 6px;
height: 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
.progress-bar {
height: 100%;
background-color: #2563eb;
width: 0%;
border-radius: 6px;
transition: width 0.3s ease;
}
</style>
</head>
@@ -88,28 +83,47 @@
<label>Ratio de réduction :</label>
<select name="ratio" required>
<option value="1">1 (original)</option>
<option value="1.5">1.5 (réduction légère)</option>
<option value="1.5">1.5 (léger)</option>
<option value="2" selected>2 (moitié)</option>
<option value="3">3 (forte)</option>
<option value="4">4 (très forte)</option>
<option value="3">3 (fort)</option>
<option value="4">4 (très fort)</option>
</select>
<button type="submit">📥 Réduire et télécharger</button>
</form>
<div class="loader" id="loader">
<p>Traitement des images en cours... Patientez ⏳</p>
<div></div>
<p id="progressText">Traitement des images en cours...</p>
<div class="progress-bar-container">
<div class="progress-bar" id="progressBar"></div>
</div>
</div>
</div>
<script>
const form = document.getElementById("uploadForm");
const loader = document.getElementById("loader");
const progressBar = document.getElementById("progressBar");
const progressText = document.getElementById("progressText");
form.addEventListener("submit", function() {
form.style.display = "none";
loader.style.display = "block";
const interval = setInterval(async () => {
const res = await fetch('/progress');
const data = await res.json();
if (data.total === 0) return;
const percent = Math.floor((data.current / data.total) * 100);
progressBar.style.width = percent + '%';
progressText.textContent = `Traitement des images... ${data.current} / ${data.total}`;
if (data.current >= data.total) {
clearInterval(interval);
}
}, 500);
});
</script>
</body>

37
views/result.tpl
View File

@@ -1,13 +1,9 @@
<!-- views/result.tpl -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Téléchargement prêt</title>
<!-- Lightbox CSS -->
<title>Vos images sont prêtes</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">
<style>
body {
font-family: 'Segoe UI', sans-serif;
@@ -24,16 +20,7 @@
text-align: center;
}
h1 {
color: #1e3a8a;
}
.info {
background-color: #f1f5f9;
padding: 15px;
border-radius: 8px;
margin-bottom: 30px;
}
h1 { color: #1e3a8a; }
.gallery {
display: flex;
@@ -47,11 +34,6 @@
width: 80px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}
.gallery a img:hover {
transform: scale(1.05);
}
a.download-btn {
@@ -65,32 +47,31 @@
font-weight: bold;
}
a.download-btn:hover {
background-color: #1d4ed8;
.info {
margin-bottom: 25px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>📦 Vos images sont prêtes !</h1>
<div class="info">
<p><strong>{{ count }}</strong> images ont été redimensionnées</p>
<p>Ratio appliqué : <strong>{{ ratio }}</strong></p>
<p>{{ count }} images redimensionnées</p>
<p>Ratio utilisé : {{ ratio }}</p>
</div>
<div class="gallery">
% for img in images:
<a href="/resized/{{ img }}" data-lightbox="gallery" data-title="{{ img }}">
<img src="/resized/{{ img }}" alt="{{ img }}">
<img src="/resized/{{ img }}">
</a>
% end
</div>
<a class="download-btn" href="/download">⬇️ Télécharger les images réduites</a>
<a class="download-btn" href="/download">⬇️ Télécharger toutes les images</a>
</div>
<!-- Lightbox JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
</body>
</html>