Avalie se é possível preparar um aplicativo web com base na planilha a anexar, onde somente serão imputados os valores que não contém fórmulas, e os demais, devem ser calculados, gerados relatórios etc. Os valores a serem imputados que constam em guias do tipo "lista", devem ser imputados em um campo txt, um do lado do outro e um abaixo do outro, ou mesmo em CSV separado por |
617a965
verified
| class CustomSidebar extends HTMLElement { | |
| connectedCallback() { | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .sidebar { | |
| width: 250px; | |
| transition: all 0.3s ease; | |
| position: sticky; | |
| top: 0; | |
| height: calc(100vh - 4rem); | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| width: 0; | |
| overflow: hidden; | |
| } | |
| .sidebar.open { | |
| width: 250px; | |
| } | |
| } | |
| .sidebar-link { | |
| transition: all 0.2s ease; | |
| } | |
| .sidebar-link:hover { | |
| background-color: #e2e8f0; | |
| transform: translateX(4px); | |
| } | |
| .sidebar-link.active { | |
| background-color: #e2e8f0; | |
| border-left: 4px solid #4f46e5; | |
| } | |
| .mobile-sidebar-toggle { | |
| display: none; | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-sidebar-toggle { | |
| display: block; | |
| position: fixed; | |
| bottom: 20px; | |
| left: 20px; | |
| z-index: 40; | |
| } | |
| } | |
| </style> | |
| <div class="sidebar bg-white border-r border-gray-200 p-4 hidden md:block"> | |
| <div class="space-y-4"> | |
| <div class="px-3 py-2"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider"> | |
| Menu Principal | |
| </h3> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 active"> | |
| <i data-feather="home" class="mr-3 text-gray-500"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700"> | |
| <i data-feather="upload" class="mr-3 text-gray-500"></i> | |
| Importar Dados | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700"> | |
| <i data-feather="bar-chart-2" class="mr-3 text-gray-500"></i> | |
| Relatórios | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700"> | |
| <i data-feather="settings" class="mr-3 text-gray-500"></i> | |
| Configurações | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700"> | |
| <i data-feather="help-circle" class="mr-3 text-gray-500"></i> | |
| Ajuda | |
| </a> | |
| </nav> | |
| <div class="px-3 py-2 mt-8"> | |
| <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider"> | |
| Ferramentas | |
| </h3> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700"> | |
| <i data-feather="calculator" class="mr-3 text-gray-500"></i> | |
| Calculadora | |
| </a> | |
| <a href="#" class="sidebar-link flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700"> | |
| <i data-feather="columns" class="mr-3 text-gray-500"></i> | |
| Conversor | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Mobile sidebar toggle (only visible on mobile) --> | |
| <button class="mobile-sidebar-toggle md:hidden bg-indigo-600 text-white p-3 rounded-full shadow-lg focus:outline-none"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <script> | |
| feather.replace(); | |
| // Mobile sidebar toggle | |
| const mobileToggle = this.shadowRoot.querySelector('.mobile-sidebar-toggle'); | |
| const sidebar = this.shadowRoot.querySelector('.sidebar'); | |
| mobileToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('open'); | |
| }); | |
| </script> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-sidebar', CustomSidebar); |