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>Cloud Platform Interface</title>7 <style>8 body, html {9 height: 100%;10 margin: 0;11 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;12 background-color: #1e1e1e;13 color: #d4d4d4;14 }15 .tab {16 background-color: #252526;17 color: #d4d4d4;18 float: left;19 border: none;20 outline: none;21 cursor: pointer;22 padding: 14px 16px;23 transition: 0.3s;24 font-size: 17px;25 }26 .tab:hover {27 background-color: #3e3e3e;28 }29 .tab.active {30 background-color: #333;31 }32 .tab-content {33 display: none;34 padding: 6px 12px;35 border-top: none;36 }37 .tab-content.active {38 display: block;39 }40 .content-area {41 display: flex;42 flex-wrap: nowrap;43 height: calc(100% - 40px);44 }45 .content-panel {46 flex-grow: 1;47 overflow: auto;48 background-color: #1e1e1e;49 color: #d4d4d4;50 border-left: 1px solid #333;51 padding: 10px;52 }53 .content-panel:first-child {54 border-left: none;55 }56 </style>57 </head>58 <body>59 60 <div class="tab-area">61 <button class="tab active" onclick="changeTab(event, 'logs')">Logs</button>62 <button class="tab" onclick="changeTab(event, 'database')">Database</button>63 <!-- Más pestañas según sea necesario -->64 </div>65 66 <div class="content-area">67 <div id="logs" class="tab-content active content-panel">68 <!-- Contenido de Logs aquí -->69 </div>70 <div id="database" class="tab-content content-panel">71 <!-- Contenido de Database aquí -->72 </div>73 <!-- Más paneles de contenido según sea necesario -->74 </div>75 76 <script>77 function changeTab(evt, serviceName) {78 // Declarar todas las variables79 var i, tabcontent, tablinks;80 81 // Obtener todos los elementos con la clase "tab-content" y ocultarlos82 tabcontent = document.getElementsByClassName("tab-content");83 for (i = 0; i < tabcontent.length; i++) {84 tabcontent[i].style.display = "none";85 tabcontent[i].classList.remove("active");86 }87 88 // Obtener todos los elementos con la clase "tab" y eliminar la clase "active"89 tablinks = document.getElementsByClassName("tab");90 for (i = 0; i < tablinks.length; i++) {91 tablinks[i].classList.remove("active");92 }93 94 // Mostrar el contenido actual de la pestaña y añadir una clase "active" al botón que abrió la pestaña95 document.getElementById(serviceName).style.display = "block";96 document.getElementById(serviceName).classList.add("active");97 evt.currentTarget.classList.add("active");98 }99 </script>100 101 </body>102 </html>103 Enlace
El enlace para compartir es: