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: