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 </style>83 </head>84 <body>85 <div class="container">86 <div class="header">Selecciona un usuario</div>87 <div class="user-list">88 <div class="user">89 <div class="name">Pablo</div>90 <div class="settings">⚙️ Configurar</div>91 </div>92 <div class="user">93 <div class="name">Sara</div>94 <div class="settings">⚙️ Configurar</div>95 </div>96 </div>97 <button class="add-user">Agregar usuario</button>98 <div class="time-settings">99 <label for="session-time">Duración de la sesión:</label>100 <select id="session-time">101 <option value="15">15 minutos</option>102 <option value="30">30 minutos</option>103 <option value="60">1 hora</option>104 <option value="permanent">Permanente</option>105 </select>106 </div>107 </div>108 </body>109 </html>110 Enlace
El enlace para compartir es: