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 {9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;10 margin: 0;11 background-color: #333;12 color: white;13 }14 #header {15 background-color: #222;16 padding: 10px 20px;17 display: flex;18 justify-content: space-between;19 align-items: center;20 }21 #projectSelector {22 background: #333;23 color: white;24 border: 1px solid #555;25 padding: 5px 10px;26 border-radius: 5px;27 }28 #tabs, #horizontal-tabs {29 background-color: #1a1a1a;30 overflow-x: auto;31 white-space: nowrap;32 border-bottom: 1px solid #555;33 }34 .tab-link {35 display: inline-block;36 padding: 10px 15px;37 cursor: pointer;38 color: #aaa;39 border-right: 1px solid #555;40 }41 .tab-link.active {42 background-color: #333;43 color: #ddd;44 }45 .tab-content {46 display: none;47 padding: 20px;48 background-color: #333;49 min-height: 300px; /* Adjust as needed */50 }51 .tab-content.active {52 display: block;53 }54 #resizer {55 width: 5px;56 height: 100%;57 background-color: #555;58 cursor: ew-resize;59 position: absolute;60 top: 0;61 right: 0;62 }63 #sidebar {64 width: 200px;65 min-width: 150px;66 height: 100vh;67 background-color: #f5f5f5;68 position: fixed;69 color: black;70 padding: 10px;71 resize: horizontal;72 overflow: auto;73 }74 #main-content {75 margin-left: 200px;76 padding: 20px;77 }78 </style>79 </head>80 <body>81 82 <div id="header">83 <select id="projectSelector" onchange="changeProject()">84 <option value="project1">Proyecto 1</option>85 <option value="project2">Proyecto 2</option>86 <!-- Más proyectos aquí -->87 </select>88 <button onclick="addServiceTab('newService')">+ Nuevo Servicio</button>89 </div>90 91 <div id="horizontal-tabs">92 <!-- Las pestañas horizontales se añadirán aquí dinámicamente -->93 </div>94 95 <div id="sidebar">96 <div id="tabs">97 <!-- Las pestañas se añadirán aquí dinámicamente -->98 </div>99 <div id="resizer"></div>100 </div>101 102 <div id="main-content">103 <div id="tab-contents">104 <!-- El contenido de las pestañas se añadirá aquí dinámicamente -->105 </div>106 </div>107 108 <script>109 // Aquí se añade el código para manejar las pestañas y el cambio de tamaño del panel110 // ...111 let tabCounter = 1;112 let startX, startWidth;113 114 function addServiceTab(serviceName) {115 let newTabId = 'tab-' + tabCounter;116 let newTabContentId = 'tab-content-' + tabCounter;117 118 // Añadir nueva pestaña119 let tabs = document.getElementById('tabs');120 let newTab = document.createElement('div');121 newTab.className = 'tab-link';122 newTab.textContent = serviceName + ' ' + tabCounter;123 newTab.setAttribute('onclick', `changeTab('${newTabId}', '${newTabContentId}')`);124 tabs.appendChild(newTab);125 126 // Añadir nuevo contenido de pestaña127 let tabContents = document.getElementById('tab-contents');128 let newTabContent = document.createElement('div');129 newTabContent.id = newTabContentId;130 newTabContent.className = 'tab-content';131 newTabContent.textContent = 'Contenido de ' + serviceName + ' ' + tabCounter;132 tabContents.appendChild(newTabContent);133 134 // Incrementar contador135 tabCounter++;136 137 // Cambiar a la nueva pestaña138 changeTab(newTabId, newTabContentId);139 }140 141 function changeTab(tabId, tabContentId) {142 // Desactivar todas las pestañas y contenidos143 let tabs = document.querySelectorAll('.tab-link');144 tabs.forEach(tab => tab.classList.remove('active'));145 146 let tabContents = document.querySelectorAll('.tab-content');147 tabContents.forEach(content => content.classList.remove('active'));148 149 // Activar la pestaña y contenido seleccionado150 let activeTab = document.getElementById(tabId);151 let activeTabContent = document.getElementById(tabContentId);152 activeTab.classList.add('active');153 activeTabContent.classList.add('active');154 }155 156 function changeProject() {157 // Lógica para cambiar de proyecto158 let project = document.getElementById('projectSelector').value;159 console.log('Proyecto seleccionado:', project);160 // Aquí iría la lógica para cargar o actualizar los servicios del proyecto seleccionado161 }162 163 function initResizableSidebar() {164 const resizer = document.getElementById('resizer');165 const sidebar = document.getElementById('sidebar');166 const mainContent = document.getElementById('main-content');167 168 resizer.addEventListener('mousedown', initDrag);169 170 function initDrag(e) {171 startX = e.clientX;172 startWidth = parseInt(document.defaultView.getComputedStyle(sidebar).width, 10);173 document.documentElement.addEventListener('mousemove', doDrag, false);174 document.documentElement.addEventListener('mouseup', stopDrag, false);175 }176 177 function doDrag(e) {178 sidebar.style.width = (startWidth + e.clientX - startX) + 'px';179 mainContent.style.marginLeft = (startWidth + e.clientX - startX) + 'px';180 }181 182 function stopDrag() {183 document.documentElement.removeEventListener('mousemove', doDrag, false); 184 document.documentElement.removeEventListener('mouseup', stopDrag, false);185 }186 }187 188 // Iniciar la funcionalidad de redimensionamiento189 initResizableSidebar();190 191 // Añadir servicios de inicio192 addServiceTab('Base de Datos');193 addServiceTab('Logs');194 addServiceTab('Lambdas');195 addServiceTab('Colas');196 197 </script>198 199 </body>200 </html>201 Enlace
El enlace para compartir es: