Skip to content

Commit a4f5b07

Browse files
manghidevorvin123
manghidev
and
orvin123
committed
feat: add complete implementation of the Ultra Unique Serial Generator with multilingual support and enhanced UI
Co-authored-by: orvin123 <[email protected]>
0 parents  commit a4f5b07

File tree

4 files changed

+644
-0
lines changed

4 files changed

+644
-0
lines changed

‎README.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
# 🔑 Generador de Seriales Ultra Únicos / Ultra Unique Serial Generator
2+
3+
[English](#english) | [Español](#español)
4+
5+
---
6+
7+
## Español
8+
9+
### 🚀 ¿Qué es esto?
10+
11+
Un generador de seriales web avanzado que crea códigos únicos y seguros utilizando criptografía de alta calidad. Perfecto para generar claves de producto, licencias de software, códigos de activación y cualquier tipo de identificador único que necesites.
12+
13+
### ✨ Características Principales
14+
15+
- **🔒 Seguridad Criptográfica**: Utiliza la Web Crypto API del navegador para garantizar aleatoriedad verdadera
16+
- **🎛️ Altamente Configurable**:
17+
- Longitud mínima y máxima de segmentos
18+
- Longitud personalizable de la parte aleatoria
19+
- Prefijos opcionales para organización
20+
- **⏰ Timestamp Integrado**: Cada serial incluye una marca temporal para garantizar unicidad
21+
- **🌍 Multiidioma**: Interfaz disponible en español e inglés
22+
- **📱 Responsive**: Funciona perfectamente en dispositivos móviles y escritorio
23+
- **🎨 Diseño Moderno**: Interfaz oscura y elegante
24+
- **📋 Copia Fácil**: Un clic para copiar el serial generado
25+
26+
### 🛠️ Tecnologías Utilizadas
27+
28+
- **HTML5**: Estructura semántica y accesible
29+
- **CSS3**: Diseño moderno con variables CSS y flexbox
30+
- **JavaScript ES6+**: Lógica avanzada con async/await y Web Crypto API
31+
- **Arquitectura Modular**: Separación clara entre HTML, CSS y JavaScript
32+
33+
### 📁 Estructura del Proyecto
34+
35+
```
36+
serial-generator/
37+
├── index.html # Página principal
38+
├── css/
39+
│ └── styles.css # Estilos y diseño
40+
├── js/
41+
│ └── app.js # Lógica de la aplicación
42+
└── README.md # Esta documentación
43+
```
44+
45+
### 🚀 Cómo Usar
46+
47+
1. **Abre el proyecto**: Simplemente abre `index.html` en tu navegador
48+
2. **Configura los parámetros**:
49+
- **Longitud Mínima/Máxima de Segmento**: Define el tamaño de cada parte del serial
50+
- **Longitud de Parte Aleatoria**: Controla la cantidad de caracteres aleatorios
51+
- **Prefijo**: Añade un identificador personalizado (opcional)
52+
3. **Genera**: Haz clic en "Generar Serial"
53+
4. **Copia**: Usa el botón "Copiar Serial" para llevarlo al portapapeles
54+
55+
### 🔧 Personalización
56+
57+
#### Cambiar Idioma
58+
- Usa los botones **ES** / **EN** en la esquina superior derecha
59+
- El idioma se guarda automáticamente en tu navegador
60+
61+
#### Ejemplo de Seriales Generados
62+
```
63+
PRODKEY-LQ2XR4G-F8X2-9K4LNP3X-7WQ5M2RT
64+
TESTKEY-LQ2XS1A-H5XK-R9L3NF7B-2QT6W8YU
65+
MYAPP-LQ2XT2B-G7ZM-4J8KLN6P-9RS3V5WX
66+
```
67+
68+
### 🔐 Seguridad
69+
70+
- **Entropía Alta**: Cada serial tiene miles de millones de combinaciones posibles
71+
- **Criptografía Segura**: Usa `crypto.getRandomValues()` del navegador
72+
- **No Predecible**: Imposible de adivinar o generar duplicados
73+
- **Timestamp Único**: Garantiza que cada serial sea irrepetible
74+
75+
### 🌐 Compatibilidad
76+
77+
- ✅ Chrome 11+
78+
- ✅ Firefox 21+
79+
- ✅ Safari 6.1+
80+
- ✅ Edge 12+
81+
- ✅ Dispositivos móviles modernos
82+
83+
### 📄 Licencia
84+
85+
Este proyecto es de código abierto. Siéntete libre de usarlo, modificarlo y distribuirlo.
86+
87+
---
88+
89+
## English
90+
91+
### 🚀 What is this?
92+
93+
An advanced web serial generator that creates unique and secure codes using high-quality cryptography. Perfect for generating product keys, software licenses, activation codes, and any type of unique identifier you need.
94+
95+
### ✨ Key Features
96+
97+
- **🔒 Cryptographic Security**: Uses the browser's Web Crypto API to ensure true randomness
98+
- **🎛️ Highly Configurable**:
99+
- Minimum and maximum segment length
100+
- Customizable random part length
101+
- Optional prefixes for organization
102+
- **⏰ Integrated Timestamp**: Each serial includes a timestamp to guarantee uniqueness
103+
- **🌍 Multilingual**: Interface available in Spanish and English
104+
- **📱 Responsive**: Works perfectly on mobile and desktop devices
105+
- **🎨 Modern Design**: Dark and elegant interface
106+
- **📋 Easy Copy**: One click to copy the generated serial
107+
108+
### 🛠️ Technologies Used
109+
110+
- **HTML5**: Semantic and accessible structure
111+
- **CSS3**: Modern design with CSS variables and flexbox
112+
- **JavaScript ES6+**: Advanced logic with async/await and Web Crypto API
113+
- **Modular Architecture**: Clear separation between HTML, CSS, and JavaScript
114+
115+
### 📁 Project Structure
116+
117+
```
118+
serial-generator/
119+
├── index.html # Main page
120+
├── css/
121+
│ └── styles.css # Styles and design
122+
├── js/
123+
│ └── app.js # Application logic
124+
└── README.md # This documentation
125+
```
126+
127+
### 🚀 How to Use
128+
129+
1. **Open the project**: Simply open `index.html` in your browser
130+
2. **Configure parameters**:
131+
- **Min/Max Segment Length**: Define the size of each serial part
132+
- **Random Part Length**: Control the amount of random characters
133+
- **Prefix**: Add a custom identifier (optional)
134+
3. **Generate**: Click "Generate Serial"
135+
4. **Copy**: Use the "Copy Serial" button to take it to clipboard
136+
137+
### 🔧 Customization
138+
139+
#### Change Language
140+
- Use the **ES** / **EN** buttons in the top right corner
141+
- Language is automatically saved in your browser
142+
143+
#### Example Generated Serials
144+
```
145+
PRODKEY-LQ2XR4G-F8X2-9K4LNP3X-7WQ5M2RT
146+
TESTKEY-LQ2XS1A-H5XK-R9L3NF7B-2QT6W8YU
147+
MYAPP-LQ2XT2B-G7ZM-4J8KLN6P-9RS3V5WX
148+
```
149+
150+
### 🔐 Security
151+
152+
- **High Entropy**: Each serial has billions of possible combinations
153+
- **Secure Cryptography**: Uses browser's `crypto.getRandomValues()`
154+
- **Unpredictable**: Impossible to guess or generate duplicates
155+
- **Unique Timestamp**: Ensures each serial is unrepeatable
156+
157+
### 🌐 Compatibility
158+
159+
- ✅ Chrome 11+
160+
- ✅ Firefox 21+
161+
- ✅ Safari 6.1+
162+
- ✅ Edge 12+
163+
- ✅ Modern mobile devices
164+
165+
### 📄 License
166+
167+
This project is open source. Feel free to use, modify, and distribute it.
168+
169+
---
170+
171+
### 👨‍💻 Desarrollo / Development
172+
173+
Para contribuir al proyecto o reportar issues, el código está organizado de manera modular y bien documentado. Cada función tiene comentarios explicativos y el código sigue las mejores prácticas de JavaScript moderno.
174+
175+
*To contribute to the project or report issues, the code is organized in a modular way and well documented. Each function has explanatory comments and the code follows modern JavaScript best practices.*

‎css/styles.css‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
/* Estilos para el Generador de Seriales */
2+
body {
3+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
4+
background-color: #1a1a2e;
5+
color: #e0e0e0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
min-height: 100vh;
10+
margin: 0;
11+
padding: 20px;
12+
box-sizing: border-box;
13+
}
14+
15+
.container {
16+
background-color: #16213e;
17+
padding: 30px 40px;
18+
border-radius: 12px;
19+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
20+
max-width: 600px;
21+
width: 100%;
22+
border: 1px solid #0f3460;
23+
}
24+
25+
/* Header y selector de idioma */
26+
.header {
27+
display: flex;
28+
justify-content: space-between;
29+
align-items: center;
30+
margin-bottom: 30px;
31+
}
32+
33+
h1 {
34+
color: #e94560;
35+
text-align: center;
36+
font-size: 1.8em;
37+
letter-spacing: 0.5px;
38+
margin: 0;
39+
flex-grow: 1;
40+
}
41+
42+
.language-selector {
43+
display: flex;
44+
gap: 10px;
45+
}
46+
47+
.lang-btn {
48+
background-color: #0f3460;
49+
color: #e0e0e0;
50+
border: none;
51+
padding: 8px 12px;
52+
border-radius: 5px;
53+
cursor: pointer;
54+
font-size: 0.85em;
55+
transition: background-color 0.3s ease;
56+
}
57+
58+
.lang-btn:hover {
59+
background-color: #1a4a82;
60+
}
61+
62+
.lang-btn.active {
63+
background-color: #e94560;
64+
color: white;
65+
}
66+
67+
/* Formulario */
68+
.form-group {
69+
margin-bottom: 20px;
70+
}
71+
72+
label {
73+
display: block;
74+
margin-bottom: 8px;
75+
font-weight: bold;
76+
color: #b0b0b0;
77+
}
78+
79+
input[type="number"],
80+
input[type="text"] {
81+
width: calc(100% - 20px);
82+
padding: 12px 10px;
83+
border: 1px solid #0f3460;
84+
border-radius: 8px;
85+
background-color: #0d1629;
86+
color: #e0e0e0;
87+
font-size: 1em;
88+
box-sizing: border-box;
89+
transition: border-color 0.3s ease;
90+
}
91+
92+
input[type="number"]:focus,
93+
input[type="text"]:focus {
94+
border-color: #e94560;
95+
outline: none;
96+
}
97+
98+
/* Botones */
99+
button {
100+
display: block;
101+
width: 100%;
102+
padding: 15px;
103+
background-color: #e94560;
104+
color: white;
105+
border: none;
106+
border-radius: 8px;
107+
font-size: 1.1em;
108+
font-weight: bold;
109+
cursor: pointer;
110+
transition: background-color 0.3s ease, transform 0.2s ease;
111+
margin-top: 25px;
112+
}
113+
114+
button:hover {
115+
background-color: #ff6a80;
116+
transform: translateY(-2px);
117+
}
118+
119+
button:active {
120+
background-color: #c93a50;
121+
transform: translateY(0);
122+
}
123+
124+
/* Salida del serial */
125+
#serialOutput {
126+
background-color: #0d1629;
127+
color: #72ef72;
128+
padding: 15px;
129+
border-radius: 8px;
130+
margin-top: 30px;
131+
text-align: center;
132+
font-family: 'Courier New', Courier, monospace;
133+
font-size: 1.2em;
134+
word-wrap: break-word;
135+
border: 1px dashed #0f3460;
136+
min-height: 50px;
137+
display: flex;
138+
align-items: center;
139+
justify-content: center;
140+
}
141+
142+
.copy-button-container {
143+
margin-top: 15px;
144+
text-align: center;
145+
}
146+
147+
#copyButton {
148+
background-color: #0f3460;
149+
font-size: 0.95em;
150+
padding: 10px 15px;
151+
width: auto;
152+
display: inline-block;
153+
}
154+
155+
#copyButton:hover {
156+
background-color: #1a4a82;
157+
}
158+
159+
#copyButton.copied {
160+
background-color: #4CAF50;
161+
}
162+
163+
/* Responsive design */
164+
@media (max-width: 768px) {
165+
.header {
166+
flex-direction: column;
167+
gap: 15px;
168+
}
169+
170+
.container {
171+
padding: 20px 25px;
172+
}
173+
174+
h1 {
175+
font-size: 1.5em;
176+
}
177+
}

0 commit comments

Comments
 (0)