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>Mi Mundo - Menú de Autenticación</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 margin: 0;11 padding: 0;12 background-color: #f4f8fc;13 color: #333;14 }15 .container {16 max-width: 400px;17 margin: 0 auto;18 padding: 20px;19 text-align: center;20 }21 .header {22 font-size: 24px;23 margin-bottom: 20px;24 }25 .user-list {26 display: flex;27 flex-direction: column;28 gap: 15px;29 }30 .user {31 display: flex;32 align-items: center;33 justify-content: space-between;34 background-color: #fff;35 padding: 10px 15px;36 border-radius: 8px;37 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);38 }39 .user img {40 width: 40px;41 height: 40px;42 border-radius: 50%;43 margin-right: 10px;44 }45 .user .name {46 flex-grow: 1;47 text-align: left;48 }49 .settings {50 cursor: pointer;51 color: #007bff;52 font-size: 16px;53 }54 .add-user {55 margin-top: 20px;56 padding: 10px 15px;57 font-size: 16px;58 background-color: #007bff;59 color: white;60 border: none;61 border-radius: 8px;62 cursor: pointer;63 transition: background-color 0.3s;64 }65 .add-user:hover {66 background-color: #0056b3;67 }68 .time-settings {69 margin-top: 15px;70 text-align: left;71 }72 .time-settings label {73 font-size: 14px;74 margin-right: 10px;75 }76 .time-settings select {77 padding: 5px;78 font-size: 14px;79 border-radius: 5px;80 border: 1px solid #ccc;81 }82 .add-user-form {83 display: none;84 margin-top: 20px;85 background-color: #fff;86 padding: 15px;87 border-radius: 8px;88 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);89 text-align: left;90 }91 .add-user-form label {92 display: block;93 margin-bottom: 10px;94 font-size: 14px;95 }96 .add-user-form input {97 width: 100%;98 padding: 8px;99 margin-bottom: 10px;100 border: 1px solid #ccc;101 border-radius: 5px;102 font-size: 14px;103 }104 .add-user-form button {105 padding: 10px 15px;106 font-size: 16px;107 background-color: #007bff;108 color: white;109 border: none;110 border-radius: 8px;111 cursor: pointer;112 transition: background-color 0.3s;113 }114 .add-user-form button:hover {115 background-color: #0056b3;116 }117 </style>118 <script>119 function toggleAddUserForm() {120 const form = document.querySelector('.add-user-form');121 form.style.display = form.style.display === 'block' ? 'none' : 'block';122 }123 </script>124 </head>125 <body>126 <div class="container">127 <div class="header">Selecciona un usuario</div>128 <div class="user-list">129 <div class="user">130 <div class="name">Pablo</div>131 <div class="settings">⚙️ Configurar</div>132 </div>133 <div class="user">134 <div class="name">Sara</div>135 <div class="settings">⚙️ Configurar</div>136 </div>137 </div>138 <button class="add-user" onclick="toggleAddUserForm()">Agregar usuario</button>139 <div class="add-user-form">140 <label for="new-user-name">Nombre del usuario:</label>141 <input type="text" id="new-user-name" placeholder="Escribe el nombre">142 <label for="new-user-avatar">Avatar URL (opcional):</label>143 <input type="text" id="new-user-avatar" placeholder="URL de la imagen">144 <button onclick="alert('Usuario agregado')">Guardar</button>145 </div>146 <div class="time-settings">147 <label for="session-time">Duración de la sesión:</label>148 <select id="session-time">149 <option value="15">15 minutos</option>150 <option value="30">30 minutos</option>151 <option value="60">1 hora</option>152 <option value="permanent">Permanente</option>153 </select>154 </div>155 </div>156 </body>157 </html>158 Enlace
El enlace para compartir es: