Skip to content

Commit 68323fe

Browse files
MizaelSMizaelS
committed
UI redesign, Added image background removal, Added discord webhook
1 parent 6f9cb2a commit 68323fe

File tree

4 files changed

+88
-79
lines changed

4 files changed

+88
-79
lines changed

Diff for: ‎backgroundremover.py

-43
This file was deleted.

Diff for: ‎static/css/styles.css

+32-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
.active {
2-
background-color: #3498db !important;
3-
color: white;
4-
}
5-
1+
/* General Styles */
62
body {
73
font-family: 'Arial', sans-serif;
84
background-color: #ecf0f1;
@@ -12,12 +8,14 @@ h1 {
128
color: #2c3e50;
139
}
1410

11+
/* Card Styles */
1512
.card {
1613
border: none;
1714
border-radius: 10px;
1815
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
1916
}
2017

18+
/* Button Styles */
2119
.btn {
2220
border-radius: 5px;
2321
transition: background-color 0.3s, color 0.3s;
@@ -46,6 +44,7 @@ h1 {
4644
background-color: #2980b9;
4745
}
4846

47+
/* Form Styles */
4948
.form-label {
5049
color: #2c3e50;
5150
}
@@ -60,17 +59,26 @@ h1 {
6059
border: 1px solid #ced4da;
6160
}
6261

62+
.input-group-text {
63+
background-color: #f8f9fa;
64+
border: 1px solid #ced4da;
65+
border-radius: 5px 0 0 5px;
66+
color: #343a40;
67+
}
68+
69+
/* Loading Spinner Styles */
6370
#loading {
6471
position: fixed;
6572
top: 50%;
6673
left: 50%;
6774
transform: translate(-50%, -50%);
6875
display: none;
76+
z-index: 1000;
6977
}
7078

7179
.spinner-border {
72-
width: 100px;
73-
height: 100px;
80+
width: 120px;
81+
height: 120px;
7482
}
7583

7684
.progress-text {
@@ -81,7 +89,7 @@ h1 {
8189
color: black;
8290
}
8391

84-
92+
/* Footer Styles */
8593
.footer {
8694
background-color: #f8f9fa;
8795
border-top: 1px solid #e7e7e7;
@@ -100,5 +108,21 @@ h1 {
100108
margin-left: auto;
101109
}
102110

111+
/* Misc Styles */
112+
.active {
113+
background-color: #3498db !important;
114+
color: white;
115+
}
103116

117+
.form-control {
118+
border-radius: 0 5px 5px 0;
119+
}
120+
121+
@keyframes fadeIn {
122+
from { opacity: 0; }
123+
to { opacity: 1; }
124+
}
104125

126+
.fade-in {
127+
animation: fadeIn 0.5s;
128+
}

Diff for: ‎static/js/scripts.js

+10-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
// Función para enviar el formulario
12
function submitForm(formId) {
23
var form = document.getElementById(formId);
4+
// Verificar la validez del formulario
35
if (form.checkValidity() === false) {
46
event.preventDefault();
57
event.stopPropagation();
@@ -12,13 +14,14 @@ function submitForm(formId) {
1214
xhr.upload.onprogress = function(event) {
1315
if (event.lengthComputable) {
1416
var percentage = (event.loaded / event.total) * 100;
15-
document.getElementById('progress').innerText = 'Cargando imagen: ' + percentage.toFixed(2) + '%';
17+
document.getElementById('progress').innerHTML = '<i class="fas fa-upload"></i> Cargando imagen: ' + percentage.toFixed(2) + '%';
1618
if (percentage === 100) {
17-
document.getElementById('progress').innerText = 'Procesando imagen...';
19+
document.getElementById('progress').innerHTML = '<i class="fas fa-cog fa-spin"></i> Procesando archivo...';
1820
}
1921
}
2022
};
2123

24+
// Manejar el cambio de estado de la solicitud
2225
xhr.onreadystatechange = function() {
2326
if (xhr.readyState == 4 && xhr.status == 200) {
2427
var blob;
@@ -49,9 +52,7 @@ function submitForm(formId) {
4952
}
5053

5154

52-
53-
54-
55+
// Manejar el clic en el botón de redimensionamiento
5556
document.getElementById('resizeButton').addEventListener('click', function () {
5657
document.getElementById('resizeDiv').style.display = 'block';
5758
document.getElementById('convertDiv').style.display = 'none';
@@ -61,6 +62,7 @@ document.getElementById('resizeButton').addEventListener('click', function () {
6162
document.getElementById('removeBackgroundButton').classList.remove('active');
6263
});
6364

65+
// Manejar el clic en el botón de conversión
6466
document.getElementById('convertButton').addEventListener('click', function () {
6567
document.getElementById('convertDiv').style.display = 'block';
6668
document.getElementById('resizeDiv').style.display = 'none';
@@ -70,6 +72,7 @@ document.getElementById('convertButton').addEventListener('click', function () {
7072
document.getElementById('removeBackgroundButton').classList.remove('active');
7173
});
7274

75+
// Manejar el clic en el botón de eliminación de fondo
7376
document.getElementById('removeBackgroundButton').addEventListener('click', function () {
7477
document.getElementById('removeBackgroundDiv').style.display = 'block';
7578
document.getElementById('resizeDiv').style.display = 'none';
@@ -79,12 +82,13 @@ document.getElementById('removeBackgroundButton').addEventListener('click', func
7982
document.getElementById('convertButton').classList.remove('active');
8083
});
8184

85+
// Manejar el paso del ratón sobre el logo de Teramont
8286
document.getElementById('teramont-logo').addEventListener('mouseover', function () {
8387
this.style.filter = 'grayscale(0%)';
8488
});
8589

90+
// Manejar la salida del ratón del logo de Teramont
8691
document.getElementById('teramont-logo').addEventListener('mouseout', function () {
8792
this.style.filter = 'grayscale(100%)';
8893
});
8994

90-

Diff for: ‎templates/index.html

+46-22
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
</head>
1212

1313
<body class="container mt-5">
14+
1415
<h1 class="text-center">Redimensionador y Convertidor de Imágenes</h1>
1516

1617
<div class="d-flex justify-content-center my-4">
@@ -24,24 +25,36 @@ <h2>Redimensionar Imagen</h2>
2425
<form id="resizeForm" action="/resize" method="POST" enctype="multipart/form-data" onsubmit="return submitForm('resizeForm', event)" class="mb-4 needs-validation" novalidate>
2526
<div class="mb-3">
2627
<label for="file" class="form-label">Selecciona una imagen:</label>
27-
<input type="file" class="form-control" id="file" name="file" required>
28+
<div class="input-group">
29+
<span class="input-group-text"><i class="fas fa-file-image"></i></span>
30+
<input type="file" class="form-control" id="file" name="file" required>
31+
</div>
2832
</div>
2933
<div class="mb-3">
3034
<label for="width" class="form-label">Ancho:</label>
31-
<input type="text" class="form-control" id="width" name="width" required>
35+
<div class="input-group">
36+
<span class="input-group-text"><i class="fas fa-arrows-alt-h"></i></span>
37+
<input type="text" class="form-control" id="width" name="width" required>
38+
</div>
3239
</div>
3340
<div class="mb-3">
3441
<label for="height" class="form-label">Alto:</label>
35-
<input type="text" class="form-control" id="height" name="height" required>
42+
<div class="input-group">
43+
<span class="input-group-text"><i class="fas fa-arrows-alt-v"></i></span>
44+
<input type="text" class="form-control" id="height" name="height" required>
45+
</div>
3646
</div>
3747
<div class="mb-3">
3848
<label for="resizeFormat" class="form-label">Formato:</label>
39-
<select class="form-select" id="resizeFormat" name="format" required>
40-
<option value="JPEG">JPEG</option>
41-
<option value="PNG">PNG</option>
42-
<option value="WEBP">WEBP</option>
43-
</select>
44-
</div>
49+
<div class="input-group">
50+
<span class="input-group-text"><i class="fas fa-file-export"></i></span>
51+
<select class="form-select" id="resizeFormat" name="format" required>
52+
<option value="JPEG">JPEG</option>
53+
<option value="PNG">PNG</option>
54+
<option value="WEBP">WEBP</option>
55+
</select>
56+
</div>
57+
</div>
4558
<button type="submit" class="btn btn-primary"><i class="fas fa-expand-arrows-alt"></i> Redimensionar</button>
4659
</form>
4760
</div>
@@ -51,17 +64,23 @@ <h2>Convertir Formato de Imagen</h2>
5164
<form id="convertForm" action="/convert" method="POST" enctype="multipart/form-data" onsubmit="return submitForm('convertForm', event)" class="mb-4 needs-validation" novalidate>
5265
<div class="mb-3">
5366
<label for="convertFile" class="form-label">Selecciona una imagen:</label>
54-
<input type="file" class="form-control" id="convertFile" name="file" required>
67+
<div class="input-group">
68+
<span class="input-group-text"><i class="fas fa-file-image"></i></span>
69+
<input type="file" class="form-control" id="convertFile" name="file" required>
70+
</div>
5571
</div>
5672
<div class="mb-3">
5773
<label for="convertFormat" class="form-label">Formato:</label>
58-
<select class="form-select" id="convertFormat" name="format" required>
59-
<option value="JPEG">JPEG</option>
60-
<option value="PNG">PNG</option>
61-
<option value="WEBP">WEBP</option>
62-
</select>
63-
</div>
64-
<button type="submit" class="btn btn-primary">Convertir</button>
74+
<div class="input-group">
75+
<span class="input-group-text"><i class="fas fa-file-export"></i></span>
76+
<select class="form-select" id="convertFormat" name="format" required>
77+
<option value="JPEG">JPEG</option>
78+
<option value="PNG">PNG</option>
79+
<option value="WEBP">WEBP</option>
80+
</select>
81+
</div>
82+
</div>
83+
<button type="submit" class="btn btn-primary"><i class="fas fa-exchange-alt"></i> Convertir</button>
6584
</form>
6685
</div>
6786

@@ -70,17 +89,22 @@ <h2>Remover Fondo de Imagen</h2>
7089
<form id="removeBackgroundForm" action="/remove_background" method="POST" enctype="multipart/form-data" onsubmit="return submitForm('removeBackgroundForm')" class="mb-4 needs-validation" novalidate>
7190
<div class="mb-3">
7291
<label for="removeBackgroundFile" class="form-label">Selecciona una imagen:</label>
73-
<input type="file" class="form-control" id="removeBackgroundFile" name="file" required>
74-
</div>
75-
<button type="submit" class="btn btn-primary">Remover Fondo</button>
92+
<div class="input-group">
93+
<span class="input-group-text"><i class="fas fa-file-image"></i></span>
94+
<input type="file" class="form-control" id="removeBackgroundFile" name="file" required>
95+
</div>
96+
</div>
97+
<button type="submit" class="btn btn-primary"><i class="fas fa-cut"></i> Remover Fondo</button>
7698
</form>
7799
</div>
78100

79101
<div id="loading" class="text-center">
80102
<div class="spinner-border text-primary" role="status">
81103
<span class="sr-only"></span>
82104
</div>
83-
<div id="progress" class="progress-text"></div>
105+
<div id="progress" class="progress-text">
106+
<i class="fas fa-upload"></i> Subiendo archivo...
107+
</div>
84108
</div>
85109

86110
<footer class="footer mt-auto py-3">
@@ -95,7 +119,7 @@ <h2>Remover Fondo de Imagen</h2>
95119
<div class="col-md-6 text-right">
96120
<span>Powered by</span>
97121
<a href="https://www.teramont.net/" target="_blank">
98-
<img src="https://www.teramont.net/assets/images/theme/logo/teramont-logo.png" alt="Teramont Logo" width="100">
122+
<img src="https://www.teramont.net/assets/images/theme/logo/teramont-logo.png" alt="Teramont Logo" width="100" id="teramont-logo">
99123
</a>
100124
</div>
101125
</div>

0 commit comments

Comments
 (0)