1 <!DOCTYPE html>2 <html lang="es">3 <head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>SecureStore Pro - Gestión de Usuarios</title>7 <style>8 * {9 box-sizing: border-box;10 margin: 0;11 padding: 0;12 font-family: Arial, sans-serif;13 }14 15 body {16 display: flex;17 height: 100vh;18 background-color: #f4f6f8;19 }20 21 /* Sidebar */22 .sidebar {23 width: 250px;24 background-color: #2c3e50;25 color: #ecf0f1;26 padding: 20px;27 }28 29 .sidebar h2 {30 margin-bottom: 20px;31 font-size: 1.5em;32 }33 34 .sidebar ul {35 list-style: none;36 }37 38 .sidebar ul li {39 padding: 10px;40 cursor: pointer;41 border-radius: 4px;42 transition: background-color 0.3s;43 }44 45 .sidebar ul li:hover, .sidebar ul li.active {46 background-color: #34495e;47 }48 49 /* Main Content */50 .main-content {51 flex: 1;52 padding: 20px;53 overflow-y: auto;54 }55 56 .main-content h2 {57 margin-bottom: 20px;58 color: #2c3e50;59 }60 61 .actions {62 margin-bottom: 20px;63 display: flex;64 justify-content: space-between;65 flex-wrap: wrap;66 }67 68 .actions .search-filter {69 display: flex;70 gap: 10px;71 margin-bottom: 10px;72 }73 74 .actions input, .actions select {75 padding: 8px 12px;76 border: 1px solid #bdc3c7;77 border-radius: 4px;78 }79 80 .actions button {81 padding: 10px 15px;82 background-color: #2980b9;83 border: none;84 color: #fff;85 cursor: pointer;86 border-radius: 4px;87 transition: background-color 0.3s;88 margin-bottom: 10px;89 }90 91 .actions button:hover {92 background-color: #3498db;93 }94 95 /* Users Table */96 table {97 width: 100%;98 border-collapse: collapse;99 background-color: #fff;100 border-radius: 8px;101 overflow: hidden;102 box-shadow: 0px 2px 4px rgba(0,0,0,0.1);103 }104 105 th, td {106 padding: 12px 15px;107 text-align: left;108 }109 110 th {111 background-color: #2c3e50;112 color: #ecf0f1;113 }114 115 tr:nth-child(even) {116 background-color: #f9f9f9;117 }118 119 tr:hover {120 background-color: #f1f1f1;121 }122 123 /* Action Buttons */124 .action-buttons button {125 background: none;126 border: none;127 cursor: pointer;128 margin-right: 5px;129 font-size: 1em;130 }131 132 .action-buttons button.edit {133 color: #27ae60;134 }135 136 .action-buttons button.delete {137 color: #e74c3c;138 }139 140 /* Modal */141 .modal {142 display: none; 143 position: fixed; 144 z-index: 10; 145 left: 0;146 top: 0;147 width: 100%; 148 height: 100%; 149 overflow: auto; 150 background-color: rgba(0,0,0,0.4); 151 }152 153 .modal-content {154 background-color: #fefefe;155 margin: 5% auto; 156 padding: 20px;157 border: 1px solid #888;158 width: 400px; 159 border-radius: 8px;160 }161 162 .modal-content h3 {163 margin-bottom: 15px;164 color: #2c3e50;165 }166 167 .modal-content input, .modal-content select {168 width: 100%;169 padding: 10px;170 margin-bottom: 15px;171 border: 1px solid #bdc3c7;172 border-radius: 4px;173 }174 175 .modal-content .modal-actions {176 text-align: right;177 }178 179 .modal-content .modal-actions button {180 padding: 8px 12px;181 margin-left: 10px;182 border: none;183 border-radius: 4px;184 cursor: pointer;185 }186 187 .modal-content .modal-actions .cancel-btn {188 background-color: #e74c3c;189 color: #fff;190 }191 192 .modal-content .modal-actions .save-btn {193 background-color: #27ae60;194 color: #fff;195 }196 197 /* Responsive */198 @media (max-width: 768px) {199 body {200 flex-direction: column;201 }202 203 .sidebar {204 width: 100%;205 }206 207 .main-content {208 padding: 10px;209 }210 211 .files-grid, .users-table {212 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));213 gap: 15px;214 }215 216 .modal-content {217 width: 90%;218 }219 }220 </style>221 </head>222 <body>223 224 <!-- Sidebar -->225 <div class="sidebar">226 <h2>SecureStore Pro</h2>227 <ul id="sidebar-menu">228 <li class="active" data-section="dashboard">Dashboard</li>229 <li data-section="archivos">Archivos</li>230 <li data-section="usuarios">Usuarios</li>231 <li data-section="configuracion">Configuración</li>232 <li data-section="soporte">Soporte</li>233 </ul>234 </div>235 236 <!-- Main Content -->237 <div class="main-content" id="main-content">238 <!-- Dashboard Section (Default) -->239 <div id="dashboard-section">240 <h2>Dashboard</h2>241 <p>Bienvenido a SecureStore Pro. Selecciona una sección desde la barra lateral para comenzar.</p>242 </div>243 244 <!-- Users Section -->245 <div id="usuarios-section" style="display: none;">246 <h2>Gestión de Usuarios</h2>247 <div class="actions">248 <div class="search-filter">249 <input type="text" id="search-input" placeholder="Buscar por nombre o email">250 <select id="role-filter">251 <option value="">Todos los Roles</option>252 <option value="Administrador">Administrador</option>253 <option value="Usuario">Usuario</option>254 </select>255 <select id="status-filter">256 <option value="">Todos los Estados</option>257 <option value="Activo">Activo</option>258 <option value="Inactivo">Inactivo</option>259 </select>260 </div>261 <button id="add-user-btn">+ Agregar Usuario</button>262 </div>263 <table id="users-table">264 <thead>265 <tr>266 <th>Nombre</th>267 <th>Email</th>268 <th>Rol</th>269 <th>Estado</th>270 <th>Acciones</th>271 </tr>272 </thead>273 <tbody>274 <!-- Filas de usuarios se agregarán dinámicamente -->275 </tbody>276 </table>277 </div>278 </div>279 280 <!-- Add/Edit User Modal -->281 <div id="user-modal" class="modal">282 <div class="modal-content">283 <h3 id="modal-title">Agregar Usuario</h3>284 <input type="text" id="user-name" placeholder="Nombre Completo">285 <input type="email" id="user-email" placeholder="Correo Electrónico">286 <input type="password" id="user-password" placeholder="Contraseña">287 <input type="password" id="user-confirm-password" placeholder="Confirmar Contraseña">288 <select id="user-role">289 <option value="">Seleccionar Rol</option>290 <option value="Administrador">Administrador</option>291 <option value="Usuario">Usuario</option>292 </select>293 <select id="user-status">294 <option value="">Seleccionar Estado</option>295 <option value="Activo">Activo</option>296 <option value="Inactivo">Inactivo</option>297 </select>298 <div class="modal-actions">299 <button class="cancel-btn" id="cancel-user-btn">Cancelar</button>300 <button class="save-btn" id="save-user-btn">Guardar</button>301 </div>302 </div>303 </div>304 305 <script>306 // Datos de ejemplo (simulación de base de datos)307 let users = [308 { id: 1, name: 'Juan Pérez', email: 'juan.perez@example.com', role: 'Administrador', status: 'Activo' },309 { id: 2, name: 'María Gómez', email: 'maria.gomez@example.com', role: 'Usuario', status: 'Activo' },310 { id: 3, name: 'Carlos López', email: 'carlos.lopez@example.com', role: 'Usuario', status: 'Inactivo' }311 ];312 313 let editingUserId = null;314 315 // Elementos del DOM316 const sidebarMenu = document.getElementById('sidebar-menu');317 const mainContent = document.getElementById('main-content');318 const usuariosSection = document.getElementById('usuarios-section');319 const dashboardSection = document.getElementById('dashboard-section');320 const addUserBtn = document.getElementById('add-user-btn');321 const userModal = document.getElementById('user-modal');322 const modalTitle = document.getElementById('modal-title');323 const cancelUserBtn = document.getElementById('cancel-user-btn');324 const saveUserBtn = document.getElementById('save-user-btn');325 const usersTableBody = document.querySelector('#users-table tbody');326 const searchInput = document.getElementById('search-input');327 const roleFilter = document.getElementById('role-filter');328 const statusFilter = document.getElementById('status-filter');329 330 // Función para renderizar la tabla de usuarios331 function renderUsers() {332 const searchTerm = searchInput.value.toLowerCase();333 const selectedRole = roleFilter.value;334 const selectedStatus = statusFilter.value;335 336 usersTableBody.innerHTML = '';337 338 users.filter(user => {339 const matchesSearch = user.name.toLowerCase().includes(searchTerm) || user.email.toLowerCase().includes(searchTerm);340 const matchesRole = selectedRole ? user.role === selectedRole : true;341 const matchesStatus = selectedStatus ? user.status === selectedStatus : true;342 return matchesSearch && matchesRole && matchesStatus;343 }).forEach(user => {344 const tr = document.createElement('tr');345 346 const nameTd = document.createElement('td');347 nameTd.textContent = user.name;348 tr.appendChild(nameTd);349 350 const emailTd = document.createElement('td');351 emailTd.textContent = user.email;352 tr.appendChild(emailTd);353 354 const roleTd = document.createElement('td');355 roleTd.textContent = user.role;356 tr.appendChild(roleTd);357 358 const statusTd = document.createElement('td');359 statusTd.textContent = user.status;360 tr.appendChild(statusTd);361 362 const actionsTd = document.createElement('td');363 actionsTd.classList.add('action-buttons');364 365 const editBtn = document.createElement('button');366 editBtn.classList.add('edit');367 editBtn.innerHTML = '✏️';368 editBtn.title = 'Editar Usuario';369 editBtn.onclick = () => openEditUserModal(user.id);370 actionsTd.appendChild(editBtn);371 372 const deleteBtn = document.createElement('button');373 deleteBtn.classList.add('delete');374 deleteBtn.innerHTML = '🗑️';375 deleteBtn.title = 'Eliminar Usuario';376 deleteBtn.onclick = () => deleteUser(user.id);377 actionsTd.appendChild(deleteBtn);378 379 tr.appendChild(actionsTd);380 381 usersTableBody.appendChild(tr);382 });383 }384 385 // Función para abrir el modal de agregar usuario386 function openAddUserModal() {387 editingUserId = null;388 modalTitle.textContent = 'Agregar Usuario';389 document.getElementById('user-name').value = '';390 document.getElementById('user-email').value = '';391 document.getElementById('user-password').value = '';392 document.getElementById('user-confirm-password').value = '';393 document.getElementById('user-role').value = '';394 document.getElementById('user-status').value = '';395 userModal.style.display = 'block';396 }397 398 // Función para abrir el modal de editar usuario399 function openEditUserModal(userId) {400 const user = users.find(u => u.id === userId);401 if (user) {402 editingUserId = userId;403 modalTitle.textContent = 'Editar Usuario';404 document.getElementById('user-name').value = user.name;405 document.getElementById('user-email').value = user.email;406 document.getElementById('user-password').value = '';407 document.getElementById('user-confirm-password').value = '';408 document.getElementById('user-role').value = user.role;409 document.getElementById('user-status').value = user.status;410 userModal.style.display = 'block';411 }412 }413 414 // Función para cerrar el modal415 function closeUserModal() {416 userModal.style.display = 'none';417 }418 419 // Función para guardar (agregar o editar) usuario420 function saveUser() {421 const name = document.getElementById('user-name').value.trim();422 const email = document.getElementById('user-email').value.trim().toLowerCase();423 const password = document.getElementById('user-password').value;424 const confirmPassword = document.getElementById('user-confirm-password').value;425 const role = document.getElementById('user-role').value;426 const status = document.getElementById('user-status').value;427 428 if (!name || !email || !role || !status) {429 alert('Por favor, completa todos los campos requeridos.');430 return;431 }432 433 if (editingUserId === null && (!password || !confirmPassword)) {434 alert('Por favor, establece una contraseña.');435 return;436 }437 438 if (password !== confirmPassword) {439 alert('Las contraseñas no coinciden.');440 return;441 }442 443 if (editingUserId === null) {444 // Agregar nuevo usuario445 const newUser = {446 id: Date.now(),447 name,448 email,449 role,450 status451 };452 users.push(newUser);453 } else {454 // Editar usuario existente455 const user = users.find(u => u.id === editingUserId);456 if (user) {457 user.name = name;458 user.email = email;459 user.role = role;460 user.status = status;461 // Si se establecen contraseñas, se podrían manejar aquí462 }463 }464 465 renderUsers();466 closeUserModal();467 }468 469 // Función para eliminar usuario470 function deleteUser(userId) {471 if (confirm('¿Estás seguro de que deseas eliminar este usuario?')) {472 users = users.filter(u => u.id !== userId);473 renderUsers();474 }475 }476 477 // Función para cambiar de sección en el sidebar478 function switchSection(section) {479 // Ocultar todas las secciones480 dashboardSection.style.display = 'none';481 usuariosSection.style.display = 'none';482 // Mostrar la sección seleccionada483 if (section === 'dashboard') {484 dashboardSection.style.display = 'block';485 } else if (section === 'usuarios') {486 usuariosSection.style.display = 'block';487 renderUsers();488 }489 // Actualizar la clase 'active' en el sidebar490 Array.from(sidebarMenu.children).forEach(li => {491 li.classList.toggle('active', li.dataset.section === section);492 });493 }494 495 // Event Listeners496 sidebarMenu.addEventListener('click', (e) => {497 if (e.target.tagName === 'LI') {498 const section = e.target.dataset.section;499 switchSection(section);500 }501 });502 503 addUserBtn.addEventListener('click', openAddUserModal);504 cancelUserBtn.addEventListener('click', closeUserModal);505 saveUserBtn.addEventListener('click', saveUser);506 507 // Cerrar el modal al hacer clic fuera de él508 window.onclick = function(event) {509 if (event.target == userModal) {510 userModal.style.display = 'none';511 }512 }513 514 // Filtros y búsqueda515 searchInput.addEventListener('input', renderUsers);516 roleFilter.addEventListener('change', renderUsers);517 statusFilter.addEventListener('change', renderUsers);518 519 // Inicializar la vista520 renderUsers();521 </script>522 </body>523 </html>524 Enlace
El enlace para compartir es: