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 {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 </style>55 </head>56 <body>57 58 <div id="header">59 <select id="projectSelector" onchange="changeProject()">60 <option value="project1">Proyecto 1</option>61 <option value="project2">Proyecto 2</option>62 <!-- Más proyectos aquí -->63 </select>64 <button onclick="addServiceTab('newService')">+ Nuevo Servicio</button>65 </div>66 67 <div id="tabs">68 <!-- Las pestañas se añadirán aquí dinámicamente -->69 </div>70 71 <div id="tab-contents">72 <!-- El contenido de las pestañas se añadirá aquí dinámicamente -->73 </div>74 75 <script>76 let tabCounter = 1;77 78 function addServiceTab(serviceName) {79 let newTabId = 'tab-' + tabCounter;80 let newTabContentId = 'tab-content-' + tabCounter;81 82 // Añadir nueva pestaña83 let tabs = document.getElementById('tabs');84 let newTab = document.createElement('div');85 newTab.className = 'tab-link';86 newTab.textContent = serviceName + ' ' + tabCounter;87 newTab.setAttribute('onclick', `changeTab('${newTabId}', '${newTabContentId}')`);88 tabs.appendChild(newTab);89 90 // Añadir nuevo contenido de pestaña91 let tabContents = document.getElementById('tab-contents');92 let newTabContent = document.createElement('div');93 newTabContent.id = newTabContentId;94 newTabContent.className = 'tab-content';95 newTabContent.textContent = 'Contenido de ' + serviceName + ' ' + tabCounter;96 tabContents.appendChild(newTabContent);97 98 // Incrementar contador99 tabCounter++;100 101 // Cambiar a la nueva pestaña102 changeTab(newTabId, newTabContentId);103 }104 105 function changeTab(tabId, tabContentId) {106 // Desactivar todas las pestañas y contenidos107 let tabs = document.querySelectorAll('.tab-link');108 tabs.forEach(tab => tab.classList.remove('active'));109 110 let tabContents = document.querySelectorAll('.tab-content');111 tabContents.forEach(content => content.classList.remove('active'));112 113 // Activar la pestaña y contenido seleccionado114 let activeTab = document.getElementById(tabId);115 let activeTabContent = document.getElementById(tabContentId);116 activeTab.classList.add('active');117 activeTabContent.classList.add('active');118 }119 120 function changeProject() {121 // Lógica para cambiar de proyecto122 let project = document.getElementById('projectSelector').value;123 console.log('Proyecto seleccionado:', project);124 // Aquí iría la lógica para cargar o actualizar los servicios del proyecto seleccionado125 }126 127 // Añadir servicios de inicio128 addServiceTab('Base de Datos');129 addServiceTab('Logs');130 addServiceTab('Lambdas');131 addServiceTab('Colas');132 </script>133 134 </body>135 </html>136 Enlace
El enlace para compartir es: