Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ABAP Playground Pro - Ambiente Principal</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#0f766e', | |
| secondary: '#f59e0b' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sap-bg { | |
| background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%); | |
| } | |
| .sap-window { | |
| border: 2px solid #2d3748; | |
| border-radius: 4px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); | |
| } | |
| .sap-header { | |
| background: linear-gradient(to bottom, #4a5568, #2d3748); | |
| border-bottom: 1px solid #4a5568; | |
| } | |
| .code-editor { | |
| font-family: 'Courier New', monospace; | |
| font-size: 14px; | |
| tab-size: 2; | |
| } | |
| .hljs-keyword { color: #f59e0b; font-weight: bold; } | |
| .hljs-string { color: #10b981; } | |
| .hljs-comment { color: #6b7280; font-style: italic; } | |
| .hljs-number { color: #8b5cf6; } | |
| .hljs-built_in { color: #60a5fa; } | |
| .resize-handle { | |
| background-color: #4a5568; | |
| cursor: ns-resize; | |
| height: 4px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 min-h-screen sap-bg"> | |
| <!-- Barra Superior --> | |
| <div class="sap-header text-white p-2 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i data-feather="cpu" class="w-6 h-6 mr-2 text-primary"></i> | |
| <span class="font-bold">ABAP Playground Pro</span> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm">Usuário: DEVELOPER</span> | |
| <span class="text-sm">Sistema: DEV</span> | |
| <button class="text-sm hover:text-primary transition duration-200">Sair</button> | |
| </div> | |
| </div> | |
| <div class="flex h-screen"> | |
| <!-- Menu Lateral --> | |
| <div class="w-64 bg-gray-800 text-white sap-window"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h3 class="font-bold text-primary">Menu de Navegação</h3> | |
| </div> | |
| <nav class="p-2"> | |
| <div class="mb-2"> | |
| <button class="menu-item w-full text-left p-2 hover:bg-gray-700 rounded flex items-center justify-between"> | |
| <span>Editor ABAP</span> | |
| <i data-feather="chevron-down" class="w-4 h-4"></i> | |
| </button> | |
| <div class="ml-4 mt-1 hidden"> | |
| <button class="submenu-item w-full text-left p-1 hover:bg-gray-700 rounded text-sm">Novo Programa</button> | |
| <button class="submenu-item w-full text-left p-1 hover:bg-gray-700 rounded text-sm">Abrir Programa</button> | |
| </div> | |
| </div> | |
| <button class="menu-item w-full text-left p-2 hover:bg-gray-700 rounded flex items-center justify-between mb-2"> | |
| <span>Tabelas Internas</span> | |
| <i data-feather="chevron-right" class="w-4 h-4"></i> | |
| </button> | |
| <button class="menu-item w-full text-left p-2 hover:bg-gray-700 rounded flex items-center justify-between mb-2"> | |
| <span>Funções</span> | |
| <i data-feather="chevron-right" class="w-4 h-4"></i> | |
| </button> | |
| <button class="menu-item w-full text-left p-2 hover:bg-gray-700 rounded flex items-center justify-between mb-2"> | |
| <span>Relatórios</span> | |
| <i data-feather="chevron-right" class="w-4 h-4"></i> | |
| </button> | |
| <button class="menu-item w-full text-left p-2 hover:bg-gray-700 rounded flex items-center justify-between"> | |
| <span>Transações</span> | |
| <i data-feather="chevron-right" class="w-4 h-4"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Área Principal --> | |
| <div class="flex-1 flex flex-col sap-window mx-2 my-2 bg-gray-800"> | |
| <!-- Barra de Ferramentas --> | |
| <div class="bg-gray-700 p-2 flex space-x-2 border-b border-gray-600"> | |
| <button class="px-3 py-1 bg-primary hover:bg-teal-700 rounded text-white text-sm flex items-center"> | |
| <i data-feather="play" class="w-4 h-4 mr-1"></i> Executar | |
| </button> | |
| <button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-white text-sm flex items-center"> | |
| <i data-feather="save" class="w-4 h-4 mr-1"></i> Salvar | |
| </button> | |
| <button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-white text-sm flex items-center"> | |
| <i data-feather="file-plus" class="w-4 h-4 mr-1"></i> Novo | |
| </button> | |
| <button class="px-3 py-1 bg-gray-600 hover:bg-gray-500 rounded text-white text-sm flex items-center"> | |
| <i data-feather="help-circle" class="w-4 h-4 mr-1"></i> Ajuda | |
| </button> | |
| </div> | |
| <!-- Editor e Saída --> | |
| <div class="flex-1 flex flex-col min-h-0"> | |
| <!-- Editor de Código --> | |
| <div class="flex-1 p-4"> | |
| <div class="sap-window h-full"> | |
| <div class="sap-header p-2 text-white flex justify-between items-center"> | |
| <span class="font-medium">Editor ABAP - ZTEST_PROGRAM</span> | |
| <div class="flex space-x-2"> | |
| <span class="text-xs bg-primary px-2 py-1 rounded">ABAP</span> | |
| </div> | |
| </div> | |
| <textarea id="abapEditor" class="w-full h-full code-editor bg-gray-900 text-white p-4 resize-none focus:outline-none" spellcheck="false"> | |
| *&---------------------------------------------------------------------* | |
| *& Relatório de Teste ABAP | |
| *&---------------------------------------------------------------------* | |
| REPORT ZTEST_PROGRAM. | |
| DATA: lv_texto TYPE string VALUE 'Olá Mundo ABAP!', | |
| lv_numero TYPE i VALUE 100. | |
| START-OF-SELECTION. | |
| WRITE: / 'Iniciando execução do programa...', | |
| / lv_texto, | |
| / 'Número:', lv_numero. | |
| DATA: lt_alunos TYPE TABLE OF string, | |
| lv_aluno TYPE string. | |
| APPEND 'João' TO lt_alunos. | |
| APPEND 'Maria' TO lt_alunos. | |
| APPEND 'Pedro' TO lt_alunos. | |
| WRITE: /, 'Lista de Alunos:'. | |
| LOOP AT lt_alunos INTO lv_aluno. | |
| WRITE: / '- ', lv_aluno. | |
| ENDLOOP.</textarea> | |
| </div> | |
| </div> | |
| <!-- Divisor --> | |
| <div class="resize-handle"></div> | |
| <!-- Área de Saída --> | |
| <div class="flex-1 p-4"> | |
| <div class="sap-window h-full flex flex-col"> | |
| <div class="sap-header p-2 text-white flex justify-between items-center"> | |
| <span class="font-medium">Saída do Programa</span> | |
| <button class="text-xs bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded">Limpar</button> | |
| </div> | |
| <div id="outputArea" class="flex-1 bg-gray-900 text-white p-4 overflow-auto font-mono text-sm"> | |
| <div class="text-green-400">>> Programa compilado com sucesso</div> | |
| <div class="text-green-400">>> Executando programa ZTEST_PROGRAM...</div> | |
| <br> | |
| <div>Iniciando execução do programa...</div> | |
| <div>Olá Mundo ABAP!</div> | |
| <div>Número: 100</div> | |
| <br> | |
| <div>Lista de Alunos:</div> | |
| <div>- João</div> | |
| <div>- Maria</div> | |
| <div>- Pedro</div> | |
| <br> | |
| <div class="text-green-400">>> Programa executado com sucesso</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Janela de Mensagens --> | |
| <div class="w-80 sap-window mx-2 my-2 bg-gray-800"> | |
| <div class="sap-header p-2 text-white"> | |
| <span class="font-medium">Mensagens e Logs</span> | |
| </div> | |
| <div class="p-3 text-white text-sm space-y-2 max-h-full overflow-auto"> | |
| <div class="bg-green-900 p-2 rounded">Info: Programa carregado com sucesso</div> | |
| <div class="bg-blue-900 p-2 rounded">Debug: Variável lv_texto inicializada</div> | |
| <div class="bg-yellow-900 p-2 rounded">Aviso: Nenhuma tabela de dados selecionada</div> | |
| <div class="bg-green-900 p-2 rounded">Sucesso: Execução concluída</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| hljs.configure({languages: ['abap']}); | |
| // Simulação de highlight ABAP | |
| hljs.registerLanguage('abap', function(hljs) { | |
| const KEYWORDS = { | |
| keyword: 'data types constants write skip new-line loop at endloop read table modify delete append clear if else endif case when endcase select insert update delete form perform call function call method start-of-selection end-of-selection initialization at selection-screen class methods endclass endmethod try catch endtry report type table of string i', | |
| built_in: 'write skip append loop at endloop' | |
| }; | |
| return { | |
| case_insensitive: true, | |
| keywords: KEYWORDS, | |
| contains: [ | |
| hljs.QUOTE_STRING_MODE, | |
| hljs.COMMENT('^*', '$'), | |
| hljs.C_LINE_COMMENT_MODE, | |
| hljs.C_BLOCK_COMMENT_MODE, | |
| hljs.NUMBER_MODE | |
| ] | |
| }; | |
| }); | |
| // Editor de código com highlight | |
| const editor = document.getElementById('abapEditor'); | |
| editor.addEventListener('input', function() { | |
| const code = this.value; | |
| const highlighted = hljs.highlight(code, {language: 'abap'}).value; | |
| this.innerHTML = highlighted; | |
| }); | |
| // Menu interativo | |
| document.querySelectorAll('.menu-item').forEach(item => { | |
| item.addEventListener('click', function() { | |
| const submenu = this.nextElementSibling; | |
| if (submenu && submenu.classList.contains('hidden')) { | |
| submenu.classList.remove('hidden'); | |
| this.querySelector('i').setAttribute('data-feather', 'chevron-down'); | |
| } else if (submenu) { | |
| submenu.classList.add('hidden'); | |
| this.querySelector('i').setAttribute('data-feather', 'chevron-right'); | |
| } | |
| feather.replace(); | |
| }); | |
| }); | |
| // Sistema de execução simulada | |
| document.querySelector('button:first-child').addEventListener('click', function() { | |
| const output = document.getElementById('outputArea'); | |
| output.innerHTML = ` | |
| <div class="text-green-400">>> Programa compilado com sucesso</div> | |
| <div class="text-green-400">>> Executando programa ZTEST_PROGRAM...</div> | |
| <br> | |
| <div>Iniciando execução do programa...</div> | |
| <div>Olá Mundo ABAP!</div> | |
| <div>Número: 100</div> | |
| <br> | |
| <div>Lista de Alunos:</div> | |
| <div>- João</div> | |
| <div>- Maria</div> | |
| <div>- Pedro</div> | |
| <br> | |
| <div class="text-green-400">>> Programa executado com sucesso</div> | |
| `; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |