Files
ImageReducer/views/result.tpl

78 lines
2.0 KiB
Smarty

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<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;
background: #f0f4f8;
padding: 40px;
}
.container {
margin: auto 10%;
background: #ffffff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
text-align: center;
}
h1 { color: #1e3a8a; }
.gallery {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 30px;
}
.gallery a img {
width: 80px;
border-radius: 6px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
a.download-btn {
display: inline-block;
background-color: #2563eb;
color: white;
text-decoration: none;
padding: 15px 25px;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
}
.info {
margin-bottom: 25px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>📦 Vos images sont prêtes !</h1>
<div class="info">
<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 }}">
</a>
% end
</div>
<a class="download-btn" href="/download">⬇️ Télécharger toutes les images</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
</body>
</html>