Loading repository data…
JoaquinCalligaro / repository
🔐 Generador de contraseñas seguras con interfaz moderna. Desarrollado con HTML, CSS, Tailwind v4 y TypeScript. Incluye sistema de fortaleza visual, modo oscuro/claro automático y animaciones fluidas.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Un generador de contraseñas moderno y seguro con interfaz elegante desarrollado con TypeScript y Tailwind CSS v4.
| Tecnología | Versión | Propósito |
|---|---|---|
| HTML5 | - | Estructura semántica |
| CSS3 | - | Estilos base y animaciones |
| Tailwind CSS | v4 | Framework de utilidades CSS |
| TypeScript | - | Tipado estático y modularidad |
@midudev/tailwind-animationstailwindcss-motiontailwindcss-animatedClona el repositorio
git clone https://github.com/JoaquinCalligaro/Password-Generator.git
cd Password-Generator
Instala las dependencias
npm install
# o
yarn install
Compila TypeScript y Tailwind
npm run build
# o
yarn build
Inicia el servidor de desarrollo
npm run dev
# o
yarn dev
Abre tu navegador
http://localhost:3000
Password-Generator/
├── 📁 assets/
│ └── 📁 icons/
│ ├── favicon.png
│ ├── eye-open.png
│ └── closed-eye.png
├── 📁 dist/
│ ├── output.css
│ ├── darkMode.js
│ └── 📁 modules/
├── 📁 src/
│ ├── input.css
│ └── 📁 modules/
│ ├── darkMode.ts
│ ├── generatePassword.ts
│ ├── strengthBar.ts
│ └── togglePassword.ts
├── index.html
├── package.json
├── tailwind.config.js
└── tsconfig.json
El sistema evalúa la fortaleza basándose en:
| Nivel | Barras | Color | Criterios |
|---|---|---|---|
| Muy Débil | 1 | 🔴 Rojo | < 8 caracteres |
| Débil | 2 | 🟠 Naranja | 8-10 caracteres |
| Media | 3 | 🟠 Naranja | 12-15 caracteres + 3 tipos |
| Fuerte | 4 | 🟢 Verde claro | 16-20 caracteres + 4 tipos |
| Muy Fuerte | 5 | 🟢 Verde oscuro | >20 caracteres + 4 tipos |
Edita las variables en src/input.css:
/* Fondo modo claro */
.area {
background: linear-gradient(274deg, #cbd04c, #fc3b76, #4f29dc, #8a35d0);
}
/* Fondo modo oscuro */
.dark .area {
background: linear-gradient(130deg, #06002b, #0b0053, #230036, #360000);
}
Modifica src/modules/strengthBar.ts:
private config: StrengthConfig = {
weak: { color: 'bg-red-500', threshold: 25 },
medium: { color: 'bg-orange-500', threshold: 50 },
strong: { color: 'bg-green-400', threshold: 75 },
veryStrong: { color: 'bg-green-600', threshold: 100 }
};
Gestiona el sistema de temas con:
Clase principal que maneja:
Evalúa y visualiza la fortaleza:
Controla la visibilidad:
¡Las contribuciones son bienvenidas! Por favor:
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)# Desarrollo
npm run dev # Inicia servidor de desarrollo
npm run watch # Observa cambios en TypeScript
# Construcción
npm run build # Compila para producción
npm run build:css # Solo compila Tailwind CSS
npm run build:ts # Solo compila TypeScript
# Calidad de código
npm run lint # Ejecuta ESLint
npm run format # Formatea código con Prettier
npm run type-check # Verifica tipos de TypeScript
Math.random() para la selección de caracterescrypto.getRandomValues()Joaquín Calligaro
⭐ ¡Si te gusta este proyecto, dale una estrella! ⭐
Selected from shared topics, language and repository description—not editorial ratings.
robertfrontend /
Generador de contraseñas de caractares y de dificil aprendizaje, creo que son mas seguras🔐🔩
51/100 healthludwingdiaz /
🔐 *En este tutorial aprenderás:* 1. Cómo configurar un proyecto en JavaScript. 2. Cómo escribir el código HTML y CSS para tu generador de contraseñas. 3. Cómo agregar la lógica en JavaScript para generar contraseñas seguras y aleatorias. 4. Consejos para personalizar tu generador de contraseñas.
27/100 healthBauty23 /
🔐 Generador de contraseñas web: Diseñé y programé una aplicación interactiva que permite crear contraseñas seguras y personalizadas, con opciones de longitud, inclusión de símbolos, números y mayúsculas. El proyecto cuenta con una interfaz moderna, medidor de fortaleza y función de copiado rápido, todo desarrollado con HTML, CSS y JavaScript.
34/100 health