Skip to content

Commit 07c633b

Browse files
manghidevmanghidev
committed
feat: enhance UI with language selector and tab navigation for serial generation and decoding
1 parent a3a27c6 commit 07c633b

File tree

3 files changed

+437
-93
lines changed

3 files changed

+437
-93
lines changed

‎css/styles.css‎

Lines changed: 169 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,50 +20,128 @@ body {
2020
max-width: 600px;
2121
width: 100%;
2222
border: 1px solid #0f3460;
23+
position: relative;
2324
}
2425

25-
/* Header y selector de idioma */
26-
.header {
26+
/* Selector de idioma */
27+
.language-selector {
28+
position: absolute;
29+
top: 15px;
30+
right: 20px;
2731
display: flex;
28-
justify-content: space-between;
29-
align-items: center;
32+
gap: 8px;
33+
z-index: 10;
34+
}
35+
36+
.lang-btn {
37+
background-color: #0f3460;
38+
color: #e0e0e0;
39+
border: none;
40+
padding: 6px 10px;
41+
border-radius: 15px;
42+
cursor: pointer;
43+
font-size: 0.8em;
44+
font-weight: 500;
45+
transition: all 0.3s ease;
46+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
47+
}
48+
49+
.lang-btn:hover {
50+
background-color: #1a4a82;
51+
transform: translateY(-1px);
52+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
53+
}
54+
55+
.lang-btn.active {
56+
background-color: #e94560;
57+
color: white;
58+
box-shadow: 0 3px 6px rgba(233, 69, 96, 0.3);
59+
}
60+
61+
/* Header */
62+
.header {
63+
text-align: center;
3064
margin-bottom: 30px;
65+
margin-top: 10px;
3166
}
3267

3368
h1 {
3469
color: #e94560;
35-
text-align: center;
3670
font-size: 1.8em;
3771
letter-spacing: 0.5px;
3872
margin: 0;
39-
flex-grow: 1;
4073
}
4174

42-
.language-selector {
75+
/* Navegación por pestañas */
76+
.tab-navigation {
4377
display: flex;
44-
gap: 10px;
78+
margin: 20px 0;
79+
border-radius: 8px;
80+
overflow: hidden;
81+
border: 1px solid #0f3460;
4582
}
4683

47-
.lang-btn {
84+
.tab-btn {
85+
flex: 1;
4886
background-color: #0f3460;
4987
color: #e0e0e0;
5088
border: none;
51-
padding: 8px 12px;
52-
border-radius: 5px;
89+
padding: 15px 20px;
5390
cursor: pointer;
54-
font-size: 0.85em;
55-
transition: background-color 0.3s ease;
91+
transition: all 0.3s ease;
92+
display: flex;
93+
align-items: center;
94+
justify-content: center;
95+
gap: 8px;
96+
font-size: 1em;
97+
font-weight: 500;
98+
border-right: 1px solid #1a4a82;
5699
}
57100

58-
.lang-btn:hover {
101+
.tab-btn:last-child {
102+
border-right: none;
103+
}
104+
105+
.tab-btn:hover {
59106
background-color: #1a4a82;
107+
transform: translateY(-1px);
60108
}
61109

62-
.lang-btn.active {
110+
.tab-btn.active {
63111
background-color: #e94560;
64112
color: white;
65113
}
66114

115+
.tab-btn.active:hover {
116+
background-color: #c93a50;
117+
transform: translateY(0);
118+
}
119+
120+
.tab-icon {
121+
font-size: 1.1em;
122+
}
123+
124+
/* Contenido de las pestañas */
125+
.tab-content {
126+
display: none;
127+
animation: fadeIn 0.3s ease-in;
128+
}
129+
130+
.tab-content.active {
131+
display: block;
132+
}
133+
134+
@keyframes fadeIn {
135+
from {
136+
opacity: 0;
137+
transform: translateY(10px);
138+
}
139+
to {
140+
opacity: 1;
141+
transform: translateY(0);
142+
}
143+
}
144+
67145
/* Formulario */
68146
.form-group {
69147
margin-bottom: 20px;
@@ -160,18 +238,92 @@ button:active {
160238
background-color: #4CAF50;
161239
}
162240

241+
/* Sección de decodificación */
242+
.decoder-info {
243+
background-color: #0d1629;
244+
padding: 15px;
245+
border-radius: 8px;
246+
margin-bottom: 20px;
247+
border-left: 4px solid #72ef72;
248+
}
249+
250+
.decoder-info p {
251+
margin: 0;
252+
color: #b0b0b0;
253+
font-size: 0.95em;
254+
line-height: 1.4;
255+
}
256+
257+
#decoder-section {
258+
padding-top: 0;
259+
margin-top: 0;
260+
border-top: none;
261+
}
262+
263+
#decodeButton {
264+
background-color: #0f3460;
265+
font-size: 0.95em;
266+
padding: 10px 15px;
267+
margin-top: 15px;
268+
width: 100%;
269+
}
270+
271+
#decodeButton:hover {
272+
background-color: #1a4a82;
273+
}
274+
275+
#dateOutput {
276+
background-color: #0d1629;
277+
color: #72ef72;
278+
padding: 15px;
279+
border-radius: 8px;
280+
margin-top: 15px;
281+
text-align: center;
282+
font-family: 'Courier New', Courier, monospace;
283+
font-size: 1.1em;
284+
word-wrap: break-word;
285+
border: 1px dashed #0f3460;
286+
min-height: 45px;
287+
display: flex;
288+
align-items: center;
289+
justify-content: center;
290+
}
291+
163292
/* Responsive design */
164293
@media (max-width: 768px) {
165294
.header {
166-
flex-direction: column;
167-
gap: 15px;
295+
margin-top: 5px;
168296
}
169297

170298
.container {
171299
padding: 20px 25px;
300+
padding-top: 45px; /* Espacio para los botones de idioma */
301+
}
302+
303+
.language-selector {
304+
top: 10px;
305+
right: 15px;
306+
}
307+
308+
.lang-btn {
309+
padding: 5px 8px;
310+
font-size: 0.75em;
172311
}
173312

174313
h1 {
175314
font-size: 1.5em;
176315
}
316+
317+
.tab-btn {
318+
padding: 12px 15px;
319+
font-size: 0.9em;
320+
}
321+
322+
.tab-icon {
323+
font-size: 1em;
324+
}
325+
326+
.tab-navigation {
327+
margin: 15px 0;
328+
}
177329
}

‎index.html‎

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -8,42 +8,71 @@
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+
1116
<div class="header">
1217
<h1 id="title">Generador de Seriales Ultra Únicos</h1>
13-
<div class="language-selector">
14-
<button class="lang-btn active" data-lang="es">ES</button>
15-
<button class="lang-btn" data-lang="en">EN</button>
16-
</div>
1718
</div>
1819

19-
<div class="form-group">
20-
<label for="minSegmentLength">Longitud Mínima de Segmento:</label>
21-
<input type="number" id="minSegmentLength" value="4" min="1">
20+
<!-- Navegación por pestañas -->
21+
<div class="tab-navigation">
22+
<button class="tab-btn active" data-tab="generator" id="generatorTab">
23+
<span class="tab-icon">🔢</span>
24+
<span id="generatorTabText">Generar Serial</span>
25+
</button>
26+
<button class="tab-btn" data-tab="decoder" id="decoderTab">
27+
<span class="tab-icon">📅</span>
28+
<span id="decoderTabText">Decodificar Fecha</span>
29+
</button>
2230
</div>
2331

24-
<div class="form-group">
25-
<label for="maxSegmentLength">Longitud Máxima de Segmento:</label>
26-
<input type="number" id="maxSegmentLength" value="8" min="1">
27-
</div>
32+
<!-- Sección de Generador -->
33+
<div id="generator-section" class="tab-content active">
34+
<div class="form-group">
35+
<label for="segmentLength">Tamaño de Segmentos:</label>
36+
<input type="number" id="segmentLength" value="6" min="1" max="12">
37+
</div>
2838

29-
<div class="form-group">
30-
<label for="randomPartLength">Longitud de Parte Aleatoria (sin guiones/timestamp):</label>
31-
<input type="number" id="randomPartLength" value="24" min="1">
32-
</div>
39+
<div class="form-group">
40+
<label for="totalRandomLength">Caracteres Aleatorios:</label>
41+
<input type="number" id="totalRandomLength" value="24" min="6" max="50">
42+
</div>
3343

34-
<div class="form-group">
35-
<label for="prefix">Prefijo (Opcional):</label>
36-
<input type="text" id="prefix" value="PRODKEY">
37-
</div>
44+
<div class="form-group">
45+
<label for="prefix">Prefijo (Opcional):</label>
46+
<input type="text" id="prefix" value="PRODKEY" maxlength="10">
47+
</div>
48+
49+
<button id="generateButton">Generar Serial</button>
3850

39-
<button id="generateButton">Generar Serial</button>
51+
<div id="serialOutput">
52+
Haz clic en "Generar Serial"
53+
</div>
4054

41-
<div id="serialOutput">
42-
Haz clic en "Generar Serial"
55+
<div class="copy-button-container">
56+
<button id="copyButton">Copiar Serial</button>
57+
</div>
4358
</div>
4459

45-
<div class="copy-button-container">
46-
<button id="copyButton">Copiar Serial</button>
60+
<!-- Sección de Decodificador -->
61+
<div id="decoder-section" class="tab-content">
62+
<div class="decoder-info">
63+
<p id="decoderDescription">Pega un serial generado anteriormente para ver cuándo fue creado</p>
64+
</div>
65+
66+
<div class="form-group">
67+
<label for="serialInput">Serial a Decodificar:</label>
68+
<input type="text" id="serialInput" placeholder="Ejemplo: PRODKEY-1ABCD23-EF45-GH67">
69+
</div>
70+
71+
<button id="decodeButton">Decodificar Fecha</button>
72+
73+
<div id="dateOutput">
74+
Ingresa un serial para ver su fecha de creación
75+
</div>
4776
</div>
4877
</div>
4978

0 commit comments

Comments
 (0)