Primer Commit
This commit is contained in:
LuisAngelSalinasl
454
pasarela.php
Normal file
454
pasarela.php
Normal file
@@ -0,0 +1,454 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard - Registro de Usuario</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #4c51bf;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
text-decoration: none;
|
||||
color: #4a5568;
|
||||
font-weight: 500;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-menu a:hover, .nav-menu a.active {
|
||||
color: #4c51bf;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 20px;
|
||||
padding: 3rem;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.form-title {
|
||||
text-align: center;
|
||||
color: #2d3748;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-subtitle {
|
||||
text-align: center;
|
||||
color: #718096;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #4a5568;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #4c51bf;
|
||||
box-shadow: 0 0 0 3px rgba(76, 81, 191, 0.1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.file-input-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
|
||||
.file-input-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 2px dashed #cbd5e0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(247, 250, 252, 0.8);
|
||||
color: #718096;
|
||||
}
|
||||
|
||||
.file-input-label:hover {
|
||||
border-color: #4c51bf;
|
||||
background: rgba(76, 81, 191, 0.05);
|
||||
color: #4c51bf;
|
||||
}
|
||||
|
||||
.file-input-label.has-file {
|
||||
border-color: #48bb78;
|
||||
background: rgba(72, 187, 120, 0.1);
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(135deg, #4c51bf 0%, #667eea 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 25px rgba(76, 81, 191, 0.3);
|
||||
}
|
||||
|
||||
.submit-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
background: rgba(45, 55, 72, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
color: #cbd5e0;
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
margin: 1rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Success Message */
|
||||
.success-message {
|
||||
background: rgba(72, 187, 120, 0.1);
|
||||
border: 1px solid #48bb78;
|
||||
color: #2f855a;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(245, 101, 101, 0.1);
|
||||
border: 1px solid #f56565;
|
||||
color: #c53030;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1rem;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-content">
|
||||
<a href="#" class="logo">🚀 Dashboard</a>
|
||||
<nav>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#">Inicio</a></li>
|
||||
<li><a href="#" class="active">Usuarios</a></li>
|
||||
<li><a href="#">Configuración</a></li>
|
||||
<li><a href="#">Ayuda</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="form-container">
|
||||
<h1 class="form-title">Registrar Usuario</h1>
|
||||
<p class="form-subtitle">Complete los datos para crear un nuevo usuario en el sistema</p>
|
||||
|
||||
<div class="success-message" id="successMessage">
|
||||
✅ Usuario registrado exitosamente
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage">
|
||||
❌ Error al registrar usuario. Verifique los datos ingresados.
|
||||
</div>
|
||||
|
||||
<form id="userForm">
|
||||
<div class="form-group">
|
||||
<label for="empresa" class="form-label">Nombre de la Empresa *</label>
|
||||
<input type="text" id="empresa" name="empresa" class="form-input" required
|
||||
placeholder="Ej: Mi Empresa S.A.">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="usuario" class="form-label">Nombre de Usuario *</label>
|
||||
<input type="text" id="usuario" name="usuario" class="form-input" required
|
||||
placeholder="Ej: admin_empresa">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">Correo Electrónico *</label>
|
||||
<input type="email" id="email" name="email" class="form-input" required
|
||||
placeholder="usuario@empresa.com">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="logo" class="form-label">Logo de la Empresa</label>
|
||||
<div class="file-input-wrapper">
|
||||
<input type="file" id="logo" name="logo" class="file-input"
|
||||
accept="image/*" onchange="updateFileLabel(this, 'logoLabel')">
|
||||
<label for="logo" class="file-input-label" id="logoLabel">
|
||||
📁 Seleccionar logo (JPG, PNG, SVG)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="clavePublica" class="form-label">Clave Pública *</label>
|
||||
<textarea id="clavePublica" name="clavePublica" class="form-input form-textarea" required
|
||||
placeholder="-----BEGIN PUBLIC KEY----- MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA... -----END PUBLIC KEY-----"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="clavePrivada" class="form-label">Clave Privada *</label>
|
||||
<textarea id="clavePrivada" name="clavePrivada" class="form-input form-textarea" required
|
||||
placeholder="-----BEGIN PRIVATE KEY----- MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQC... -----END PRIVATE KEY-----"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">
|
||||
✨ Registrar Usuario
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="footer-content">
|
||||
<p>© 2025 Dashboard. Todos los derechos reservados. | Versión 1.0</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Actualizar etiqueta del archivo seleccionado
|
||||
function updateFileLabel(input, labelId) {
|
||||
const label = document.getElementById(labelId);
|
||||
if (input.files && input.files[0]) {
|
||||
const fileName = input.files[0].name;
|
||||
label.textContent = `✅ ${fileName}`;
|
||||
label.classList.add('has-file');
|
||||
} else {
|
||||
label.textContent = '📁 Seleccionar logo (JPG, PNG, SVG)';
|
||||
label.classList.remove('has-file');
|
||||
}
|
||||
}
|
||||
|
||||
// Manejar envío del formulario
|
||||
document.getElementById('userForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Simulación de procesamiento
|
||||
const submitBtn = e.target.querySelector('.submit-btn');
|
||||
const originalText = submitBtn.textContent;
|
||||
|
||||
submitBtn.textContent = '⏳ Procesando...';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Simular llamada al servidor
|
||||
setTimeout(() => {
|
||||
// Aquí iría la lógica real de envío al servidor
|
||||
const formData = new FormData(e.target);
|
||||
|
||||
// Validación básica
|
||||
const empresa = formData.get('empresa');
|
||||
const usuario = formData.get('usuario');
|
||||
const email = formData.get('email');
|
||||
const clavePublica = formData.get('clavePublica');
|
||||
const clavePrivada = formData.get('clavePrivada');
|
||||
|
||||
if (!empresa || !usuario || !email || !clavePublica || !clavePrivada) {
|
||||
showMessage('error', 'Todos los campos obligatorios deben estar completos');
|
||||
} else if (!validateEmail(email)) {
|
||||
showMessage('error', 'El formato del correo electrónico no es válido');
|
||||
} else if (!validateKeys(clavePublica, clavePrivada)) {
|
||||
showMessage('error', 'Las claves deben tener el formato correcto');
|
||||
} else {
|
||||
// Éxito simulado
|
||||
showMessage('success', `Usuario "${usuario}" registrado exitosamente para "${empresa}"`);
|
||||
e.target.reset();
|
||||
updateFileLabel(document.getElementById('logo'), 'logoLabel');
|
||||
}
|
||||
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
// Mostrar mensajes
|
||||
function showMessage(type, message) {
|
||||
const successMsg = document.getElementById('successMessage');
|
||||
const errorMsg = document.getElementById('errorMessage');
|
||||
|
||||
if (type === 'success') {
|
||||
successMsg.textContent = '✅ ' + message;
|
||||
successMsg.style.display = 'block';
|
||||
errorMsg.style.display = 'none';
|
||||
setTimeout(() => { successMsg.style.display = 'none'; }, 5000);
|
||||
} else {
|
||||
errorMsg.textContent = '❌ ' + message;
|
||||
errorMsg.style.display = 'block';
|
||||
successMsg.style.display = 'none';
|
||||
setTimeout(() => { errorMsg.style.display = 'none'; }, 5000);
|
||||
}
|
||||
}
|
||||
|
||||
// Validar email
|
||||
function validateEmail(email) {
|
||||
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
// Validar formato de claves
|
||||
function validateKeys(publicKey, privateKey) {
|
||||
const publicKeyPattern = /-----BEGIN [\w\s]+PUBLIC KEY-----/;
|
||||
const privateKeyPattern = /-----BEGIN [\w\s]+PRIVATE KEY-----/;
|
||||
|
||||
return publicKeyPattern.test(publicKey) && privateKeyPattern.test(privateKey);
|
||||
}
|
||||
|
||||
// Animaciones suaves al cargar
|
||||
window.addEventListener('load', function() {
|
||||
const formContainer = document.querySelector('.form-container');
|
||||
formContainer.style.opacity = '0';
|
||||
formContainer.style.transform = 'translateY(30px)';
|
||||
|
||||
setTimeout(() => {
|
||||
formContainer.style.transition = 'all 0.6s ease';
|
||||
formContainer.style.opacity = '1';
|
||||
formContainer.style.transform = 'translateY(0)';
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user