Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DeepMind Style - Documentation Hub</title> | |
| <!-- Google Symbols --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --header-height: 64px; | |
| --bg-color: #ffffff; | |
| --text-color: #202124; | |
| --border-color: #dadce0; | |
| --hover-bg: #f8f9fa; | |
| --accent-color: #1a73e8; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| overflow: hidden; /* Evita scroll duplo na página principal */ | |
| } | |
| /* Header Estilo DeepMind */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: var(--header-height); | |
| background: #fff; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| align-items: center; | |
| padding: 0 24px; | |
| z-index: 1000; | |
| justify-content:间-between; | |
| } | |
| .logo { | |
| font-weight: 500; | |
| font-size: 20px; | |
| letter-spacing: -0.5px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: #000; | |
| text-decoration: none; | |
| } | |
| /* Menu de Navegação */ | |
| nav { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .nav-item { | |
| position: relative; | |
| list-style: none; | |
| } | |
| .menu-trigger { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| text-decoration: none; | |
| color: var(--text-color); | |
| font-weight: 500; | |
| } | |
| .menu-trigger:hover { | |
| background-color: var(--hover-bg); | |
| } | |
| /* Dropdown Estilizado */ | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background: white; | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| min-width: 280px; | |
| display: none; /* Escondido por padrão */ | |
| padding: 8px 0; | |
| margin-top: 8px; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| } | |
| .nav-item:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .dropdown-menu a { | |
| display: flex; | |
| align-items: center; | |
| padding: 10px 20px; | |
| text-decoration: none; | |
| color: var(--text-color); | |
| font-size: 14px; | |
| transition: background 0.2s; | |
| gap: 12px; | |
| } | |
| .dropdown-menu a:hover { | |
| background-color: var(--hover-bg); | |
| color: var(--accent-color); | |
| } | |
| .dropdown-menu a span.material-symbols-outlined { | |
| font-size: 20px; | |
| color: #5f6368; | |
| } | |
| /* Área Principal */ | |
| main { | |
| margin-top: var(--header-height); | |
| width: 100%; | |
| height: calc(100vh - var(--header-height)); | |
| background: #f1f3f4; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| display: block; | |
| } | |
| /* Estilo da barra de rolagem do menu */ | |
| .dropdown-menu::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .dropdown-menu::-webkit-scrollbar-thumb { | |
| background: #dadce0; | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="#" class="logo"> | |
| <span class="material-symbols-outlined" style="color: var(--accent-color);">hub</span> | |
| <span>Research Docs</span> | |
| </a> | |
| <nav> | |
| <li class="nav-item"> | |
| <a class="menu-trigger"> | |
| <span class="material-symbols-outlined">functions</span> | |
| Explore Projetos | |
| <span class="material-symbols-outlined" style="font-size: 18px;">expand_more</span> | |
| </a> | |
| <div class="dropdown-menu" id="menu-links"> | |
| <a href="mini-bob-yuki-aoi.html"><span class="material-symbols-outlined">robot_2</span>reachy_mini</a> | |
| <a href="xcake_cli.html"><span class="material-symbols-outlined">terminal</span>xcake_cli</a> | |
| <a href="doc-sentinela.html"><span class="material-symbols-outlined">match_case</span>agente sdk</a> | |
| <a href="star_trek.html"><span class="material-symbols-outlined">passport_spark</span>Star Trek I.A</a> | |
| <a href="enigma_research_doc.htm"><span class="material-symbols-outlined">guardian</span>Enigma I.A</a> | |
| <a href="ibm_krylov.html"><span class="material-symbols-outlined">tactic</span>Matrix Quantum Prime Mesh</a> | |
| <a href="documentacao.htm"><span class="material-symbols-outlined">superscript</span>Fisica Quantica</a> | |
| <a href="java.html"><span class="material-symbols-outlined">conveyor_belt</span>IBM BOB</a> | |
| <a href="clifford.html"><span class="material-symbols-outlined">gavel</span> CLIFFORD-BOURDIEU</a> | |
| <a href="opensearch_web3_docs.html"><span class="material-symbols-outlined">flutter_dash</span>google search</a> | |
| <a href="IQ-9.html"><span class="material-symbols-outlined">developer_board</span>IBM/INTEL IQ-9</a> | |
| <a href="covid.html"><span class="material-symbols-outlined">coronavirus</span> Covid-19</a> | |
| <a href="docs-btc.html"><span class="material-symbols-outlined">currency_exchange</span> docs-BTC</a> | |
| <a href="anee.html"><span class="material-symbols-outlined">water_lux</span> Dobra</a> | |
| <a href="genai.html"><span class="material-symbols-outlined">network_intel_node</span> Gemini</a> | |
| <a href="HsjksuiLopskSJm.html"><span class="material-symbols-outlined">currency_yen</span> IPFP</a> | |
| <a href="logica_aoi.html"><span class="material-symbols-outlined">ophthalmology</span> Logica AOI</a> | |
| <a href="api_aoi_docs.html"><span class="material-symbols-outlined">hub</span> Nexus</a> | |
| <a href="txgemma.html"><span class="material-symbols-outlined">digital_wellbeing</span> TxGEMMA</a> | |
| <a href="termos_uso.html"><span class="material-symbols-outlined">gavel</span> Termo & Uso</a> | |
| </div> | |
| </li> | |
| </nav> | |
| </header> | |
| <main> | |
| <!-- O iframe começa com uma página inicial ou vazio --> | |
| <iframe name="content-frame" id="main-frame" src="about:blank"></iframe> | |
| </main> | |
| <script> | |
| // Script para carregar os links no iframe e fechar o menu ao clicar | |
| document.querySelectorAll('#menu-links a').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| // Impede que o navegador saia da página | |
| e.preventDefault(); | |
| const url = this.getAttribute('href'); | |
| const iframe = document.getElementById('main-frame'); | |
| // Define o src do iframe para o link clicado | |
| iframe.src = url; | |
| // Opcional: Atualiza o título da aba ou destaca o link ativo | |
| console.log('Carregando: ' + url); | |
| }); | |
| }); | |
| // Carregar o primeiro link por padrão (opcional) | |
| window.onload = () => { | |
| const primeiroLink = document.querySelector('#menu-links a').getAttribute('href'); | |
| document.getElementById('main-frame').src = primeiroLink; | |
| }; | |
| </script> | |
| </body> | |
| </html> | |