Gracias, Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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>Plataforma Cloud</title>7 <style>8  body { font-family: Arial, sans-serif; }9  .sidebar { width: 200px; height: 100vh; position: fixed; background-color: #f5f5f5; padding: 20px; }10  .content { margin-left: 200px; padding: 20px; }11  .tab { display: none; }12  .service { cursor: pointer; padding: 10px; border-bottom: 1px solid #ddd; }13  .service.active { background-color: #ddd; }14 </style>15 </head>16 <body>17 18 <div class="sidebar">19  <h2>Proyectos</h2>20  <select id="projectSelector" onchange="changeProject()">21  <option value="project1">Proyecto 1</option>22  <option value="project2">Proyecto 2</option>23  <!-- Añadir más proyectos aquí -->24  </select>25  26  <h2>Servicios</h2>27  <div class="service active" onclick="changeService('db')">Base de Datos</div>28  <div class="service" onclick="changeService('logs')">Logs</div>29  <div class="service" onclick="changeService('lambdas')">Lambdas</div>30  <div class="service" onclick="changeService('queues')">Colas</div>31  <!-- Añadir más servicios aquí -->32 </div>33 34 <div class="content">35  <div id="db" class="tab" style="display: block;">36  <!-- Contenido de la Base de Datos -->37  <h3>Base de Datos</h3>38  </div>39  <div id="logs" class="tab">40  <!-- Contenido de Logs -->41  <h3>Logs</h3>42  </div>43  <div id="lambdas" class="tab">44  <!-- Contenido de Lambdas -->45  <h3>Lambdas</h3>46  </div>47  <div id="queues" class="tab">48  <!-- Contenido de Colas -->49  <h3>Colas</h3>50  </div>51  <!-- Añadir más pestañas de contenido de servicios aquí -->52 </div>53 54 <script>55 function changeService(serviceId) {56  // Ocultar todas las pestañas57  var tabs = document.getElementsByClassName('tab');58  for (var i = 0; i < tabs.length; i++) {59  tabs[i].style.display = 'none';60  }61  62  // Quitar la clase 'active' de todos los servicios63  var services = document.getElementsByClassName('service');64  for (var i = 0; i < services.length; i++) {65  services[i].classList.remove('active');66  }67  68  // Mostrar la pestaña seleccionada y añadir la clase 'active'69  document.getElementById(serviceId).style.display = 'block';70  document.querySelector('.service[onclick="changeService('' + serviceId + '')"]').classList.add('active');71 }72 73 function changeProject() {74  // Aquí se podría implementar la carga o actualización de la lista de servicios75  // basada en el proyecto seleccionado.76  var project = document.getElementById('projectSelector').value;77  console.log('Proyecto seleccionado:', project);78 }79 </script>80 81 </body>82 </html>83 
Enlace
El enlace para compartir es: