Skip to content

Commit 80af5fb

Browse files
manghidevmanghidev
authored
Merge pull request #3 from manghidev/minor-changes
feat: update language support and UI elements for improved user experience
2 parents 07c633b + 88d8650 commit 80af5fb

File tree

3 files changed

+66
-40
lines changed

3 files changed

+66
-40
lines changed

‎css/styles.css‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,38 @@ body {
2525

2626
/* Selector de idioma */
2727
.language-selector {
28-
position: absolute;
29-
top: 15px;
30-
right: 20px;
28+
margin-top: 50px;
29+
padding-top: 30px;
30+
border-top: 2px solid #0f3460;
31+
text-align: center;
32+
clear: both;
33+
}
34+
35+
.language-label {
36+
color: #a0a0a0;
37+
font-size: 0.85em;
38+
margin-bottom: 15px;
39+
font-weight: 500;
40+
}
41+
42+
.language-buttons {
3143
display: flex;
32-
gap: 8px;
33-
z-index: 10;
44+
justify-content: center;
45+
gap: 15px;
3446
}
3547

3648
.lang-btn {
3749
background-color: #0f3460;
3850
color: #e0e0e0;
3951
border: none;
40-
padding: 6px 10px;
41-
border-radius: 15px;
52+
padding: 8px 16px;
53+
border-radius: 20px;
4254
cursor: pointer;
43-
font-size: 0.8em;
55+
font-size: 0.9em;
4456
font-weight: 500;
4557
transition: all 0.3s ease;
4658
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
59+
min-width: 50px;
4760
}
4861

4962
.lang-btn:hover {
@@ -62,7 +75,6 @@ body {
6275
.header {
6376
text-align: center;
6477
margin-bottom: 30px;
65-
margin-top: 10px;
6678
}
6779

6880
h1 {

‎index.html‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,81 @@
11
<!DOCTYPE html>
2-
<html lang="es">
2+
<html lang="en-US">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Generador de Seriales</title>
6+
<title>Ultra Unique Serial Generator</title>
77
<link rel="stylesheet" href="css/styles.css">
88
</head>
99
<body>
1010
<div class="container">
11-
<div class="language-selector">
12-
<button class="lang-btn active" data-lang="es">ES</button>
13-
<button class="lang-btn" data-lang="en">EN</button>
14-
</div>
15-
1611
<div class="header">
17-
<h1 id="title">Generador de Seriales Ultra Únicos</h1>
12+
<h1 id="title">Ultra Unique Serial Generator</h1>
1813
</div>
1914

2015
<!-- Navegación por pestañas -->
2116
<div class="tab-navigation">
2217
<button class="tab-btn active" data-tab="generator" id="generatorTab">
2318
<span class="tab-icon">🔢</span>
24-
<span id="generatorTabText">Generar Serial</span>
19+
<span id="generatorTabText">Generate Serial</span>
2520
</button>
2621
<button class="tab-btn" data-tab="decoder" id="decoderTab">
2722
<span class="tab-icon">📅</span>
28-
<span id="decoderTabText">Decodificar Fecha</span>
23+
<span id="decoderTabText">Decode Date</span>
2924
</button>
3025
</div>
3126

3227
<!-- Sección de Generador -->
3328
<div id="generator-section" class="tab-content active">
3429
<div class="form-group">
35-
<label for="segmentLength">Tamaño de Segmentos:</label>
30+
<label for="segmentLength">Segment Size:</label>
3631
<input type="number" id="segmentLength" value="6" min="1" max="12">
3732
</div>
3833

3934
<div class="form-group">
40-
<label for="totalRandomLength">Caracteres Aleatorios:</label>
35+
<label for="totalRandomLength">Random Characters:</label>
4136
<input type="number" id="totalRandomLength" value="24" min="6" max="50">
4237
</div>
4338

4439
<div class="form-group">
45-
<label for="prefix">Prefijo (Opcional):</label>
40+
<label for="prefix">Prefix (Optional):</label>
4641
<input type="text" id="prefix" value="PRODKEY" maxlength="10">
4742
</div>
4843

49-
<button id="generateButton">Generar Serial</button>
44+
<button id="generateButton">Generate Serial</button>
5045

5146
<div id="serialOutput">
52-
Haz clic en "Generar Serial"
47+
Click "Generate Serial"
5348
</div>
5449

5550
<div class="copy-button-container">
56-
<button id="copyButton">Copiar Serial</button>
51+
<button id="copyButton">Copy Serial</button>
5752
</div>
5853
</div>
5954

6055
<!-- Sección de Decodificador -->
6156
<div id="decoder-section" class="tab-content">
6257
<div class="decoder-info">
63-
<p id="decoderDescription">Pega un serial generado anteriormente para ver cuándo fue creado</p>
58+
<p id="decoderDescription">Paste a previously generated serial to see when it was created</p>
6459
</div>
6560

6661
<div class="form-group">
67-
<label for="serialInput">Serial a Decodificar:</label>
68-
<input type="text" id="serialInput" placeholder="Ejemplo: PRODKEY-1ABCD23-EF45-GH67">
62+
<label for="serialInput">Serial to Decode:</label>
63+
<input type="text" id="serialInput" placeholder="Example: PRODKEY-1ABCD23-EF45-GH67">
6964
</div>
7065

71-
<button id="decodeButton">Decodificar Fecha</button>
66+
<button id="decodeButton">Decode Date</button>
7267

7368
<div id="dateOutput">
74-
Ingresa un serial para ver su fecha de creación
69+
Enter a serial to see its creation date
70+
</div>
71+
</div>
72+
73+
<!-- Selector de idioma al final -->
74+
<div class="language-selector">
75+
<div class="language-label">Language / Idioma:</div>
76+
<div class="language-buttons">
77+
<button class="lang-btn" data-lang="es-MX">ES</button>
78+
<button class="lang-btn active" data-lang="en-US">EN</button>
7579
</div>
7680
</div>
7781
</div>

‎js/app.js‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
// Configuración de idiomas
22
const translations = {
3-
es: {
3+
'es-MX': {
44
title: "Generador de Seriales Ultra Únicos",
5+
pageTitle: "Generador de Seriales Ultra Únicos",
56
segmentLength: "Tamaño de Segmentos:",
67
totalRandomLength: "Caracteres Aleatorios:",
78
prefix: "Prefijo (Opcional):",
@@ -23,8 +24,9 @@ const translations = {
2324
createdOn: "Serial creado el:",
2425
at: "a las"
2526
},
26-
en: {
27+
'en-US': {
2728
title: "Ultra Unique Serial Generator",
29+
pageTitle: "Ultra Unique Serial Generator",
2830
segmentLength: "Segment Size:",
2931
totalRandomLength: "Random Characters:",
3032
prefix: "Prefix (Optional):",
@@ -49,7 +51,7 @@ const translations = {
4951
};
5052

5153
// Estado global de la aplicación
52-
let currentLanguage = 'es';
54+
let currentLanguage = 'en-US';
5355
let currentSerial = '';
5456
let currentTab = 'generator';
5557

@@ -195,7 +197,7 @@ function formatDecodedDate(date, language = 'es') {
195197
timeZoneName: 'short'
196198
};
197199

198-
const locale = language === 'es' ? 'es-ES' : 'en-US';
200+
const locale = language === 'es-MX' ? 'es-MX' : 'en-US';
199201
return date.toLocaleDateString(locale, options);
200202
}
201203

@@ -228,6 +230,14 @@ function handleDecodeSerial() {
228230
// Función para cambiar el idioma
229231
function changeLanguage(lang) {
230232
currentLanguage = lang;
233+
const t = translations[currentLanguage];
234+
235+
// Actualizar título de la página
236+
document.title = t.pageTitle;
237+
238+
// Actualizar atributo lang del HTML para SEO
239+
document.documentElement.lang = lang;
240+
231241
updateUI();
232242

233243
// Actualizar botones de idioma
@@ -261,7 +271,7 @@ function updateUI() {
261271
document.getElementById('decodeButton').textContent = t.decodeButton;
262272

263273
// Actualizar placeholder del input de serial
264-
document.getElementById('serialInput').placeholder = currentLanguage === 'es' ?
274+
document.getElementById('serialInput').placeholder = currentLanguage === 'es-MX' ?
265275
'Ejemplo: PRODKEY-1ABCD23-EF45-GH67' :
266276
'Example: PRODKEY-1ABCD23-EF45-GH67';
267277

@@ -273,15 +283,15 @@ function updateUI() {
273283

274284
// Actualizar mensaje inicial si es necesario
275285
const serialOutput = document.getElementById('serialOutput');
276-
if (serialOutput.textContent === translations.es.initialMessage ||
277-
serialOutput.textContent === translations.en.initialMessage) {
286+
if (serialOutput.textContent === translations['es-MX'].initialMessage ||
287+
serialOutput.textContent === translations['en-US'].initialMessage) {
278288
serialOutput.textContent = t.initialMessage;
279289
}
280290

281291
// Actualizar mensaje inicial del decodificador si es necesario
282292
const dateOutput = document.getElementById('dateOutput');
283-
if (dateOutput.textContent === translations.es.dateOutputInitial ||
284-
dateOutput.textContent === translations.en.dateOutputInitial) {
293+
if (dateOutput.textContent === translations['es-MX'].dateOutputInitial ||
294+
dateOutput.textContent === translations['en-US'].dateOutputInitial) {
285295
dateOutput.textContent = t.dateOutputInitial;
286296
}
287297
}
@@ -342,7 +352,7 @@ function copyToClipboard() {
342352
// Inicialización cuando el DOM esté listo
343353
document.addEventListener('DOMContentLoaded', () => {
344354
// Cargar preferencias del localStorage
345-
const savedLanguage = localStorage.getItem('preferredLanguage') || 'es';
355+
const savedLanguage = localStorage.getItem('preferredLanguage') || 'en-US';
346356
const savedTab = localStorage.getItem('preferredTab') || 'generator';
347357
currentLanguage = savedLanguage;
348358
currentTab = savedTab;

0 commit comments

Comments
 (0)