Skip to content

Modernize UI with VS Code theme and add development server #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
erickweil wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Modernize UI with VS Code theme and add development server #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b46141
feat: add development server with webpack-dev-server
v0[bot] Mar 17, 2026
6f1acbc
feat: simplify dev script with reliable HTTP server
v0[bot] Mar 17, 2026
ac449f9
feat: add serve to devDependencies for better v0.app recognition
v0[bot] Mar 17, 2026
217e528
style: modernize UI inspired by VS Code theme
v0[bot] Mar 17, 2026
4599d89
feat: update UI to mimic VS Code style
v0[bot] Mar 17, 2026
7c1195f
feat: update UI with modern design
v0[bot] Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
166 changes: 113 additions & 53 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta charset="utf-8">
<meta lang="pt-br">
<meta name="author" content="Erick L. Weil">
<meta name="theme-color" content="#08ecbc">
<meta name="theme-color" content="#007acc">
<meta name="description" content="Utilize o portugol diretamente do seu navegador!">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Expand Down Expand Up @@ -44,8 +44,8 @@
<div id="myCanvasMiddle">
<div id="myCanvasWindow">
<div style="white-space: nowrap;">
<input type="button" value="Janela Sem Titulo" style="float:left;background: #1E2324;" id="myCanvasWindowTitle"/>
<input type="button" value="X" style="float:right;background: #1E2324;" onclick="index.executar(document.getElementById('btn-run'));"/>
<input type="button" value="Janela Sem Titulo" style="float:left;background: #252526;" id="myCanvasWindowTitle"/>
<input type="button" value="X" style="float:right;background: #252526;" onclick="index.executar(document.getElementById('btn-run'));"/>
</div>
<canvas tabindex="1" id="myCanvas" width="100" height="100"></canvas>
<div id="myCanvasKeys">
Expand All @@ -59,62 +59,111 @@
<!-- Modal Exemplos -->
<div class="ModalFull" id="modalExemplos">
<div class="ModalInside">
<div class="ModalContent">
<div>
<input type="button" value="" style="float:left;background: #1E2324;" class="ModalTitle"/>
<input type="button" value="X" style="float:right;background: #1E2324;" onclick="document.getElementById('modalExemplos').style.display = 'none';"/>
</div>
<br/>
<div class="listaExemplos">
<h2 onclick="index.exemplo('branco');">Novo Programa em Branco</h2>
<hr style="border: 1px solid #01EABC;"/>
<details><summary><h2>Básico</h2></summary>
<h2 onclick="index.exemplo('variaveis');">Variáveis</h2>
<h2 onclick="index.exemplo('entrada');">Entrada de dados</h2>
<h2 onclick="index.exemplo('velocidade');">Tempo gasto</h2>
</details><details><summary><h2>Desvios Condicionais</h2></summary>
<h2 onclick="index.exemplo('condicoes');">Condições</h2>
<h2 onclick="index.exemplo('repeticao');">Repetição</h2>
<h2 onclick="index.exemplo('bolachaoumaca');">Bolacha Ou Maçã</h2>
</details><details><summary><h2>Outros</h2></summary>
<h2 onclick="index.exemplo('vetores');">Vetores</h2>
<h2 onclick="index.exemplo('funcoes');">Funções</h2>
<h2 onclick="index.exemplo('bibliotecas');">Bibliotecas</h2>
<h2 onclick="index.exemplo('internet');">Internet</h2>
</details><details><summary><h2>Gráficos</h2></summary>
<h2 onclick="index.exemplo('graficos');">Graficos</h2>
<h2 onclick="index.exemplo('jogodavida');">Jogo da Vida</h2>
<h2 onclick="index.exemplo('slide_puzzle');">Slide Puzzle</h2>
<h2 onclick="index.exemplo('aleatorio0');">O Cubo Verde</h2>
<h2 onclick="index.exemplo('aleatorio1');">Coelho 3D</h2>
<h2 onclick="index.exemplo('aleatorio2');">Paramétrico</h2>
<h2 onclick="index.exemplo('aleatorio3');">Seno e Cosseno</h2>
<h2 onclick="index.exemplo('aleatorio5');">A*</h2>
</details>

<hr style="border: 1px solid #01EABC;"/>
<span style="white-space:nowrap"><input id="check-mostrar-hotbar" style="height: 20px;" name="mostrar-hotbar" type="checkbox" onchange="index.toggleHotbar(this.checked);"/><label for="mostrar-hotbar">Mostrar Hotbar</label></span>
<span style="white-space:nowrap"><input id="check-modo-turbo" style="height: 20px;" name="modo-turbo" type="checkbox" onchange="index.setModoTurbo(this);" title="Compila o código para Javascript, executa muito mais rápido. Só vai acelerar se não utilizar nenhuma função que pausa o código, como o leia ou o aguarde da biblioteca Util"/><label for="modo-turbo">Modo Turbo</label></span>
<span style="white-space:nowrap"><input id="check-auto-completar" style="height: 20px;" name="auto-completar" type="checkbox" checked="true" onchange="index.setAutoCompleterState(this.checked);"/><label for="auto-completar">Auto-Completar</label></span>
<!--
<hr class="mobileHidden" style="border: 1px solid #01EABC;"/>
<button class="mobileHidden" title="A TogetherJS possibilita a utilização em grupo de um site. Permitindo editar em conjunto, chat e muito mais" onclick="TogetherJS(this);return false;">Ativar TogetherJS</button>
-->

<hr style="border: 1px solid #01EABC;"/>

<div style="white-space:nowrap;">
<a style="color: #01EABC; text-decoration: none; text-align: center;display: flex;align-items:center;justify-content: center;" href="#" onclick="index.abrirPagina('https://github.com/erickweil/portugolweb')">
<svg style="fill: #01EABC" height="24" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github v-align-middle color-fg-default">
<path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"></path>
<div class="ModalContent examples-modal">
<div class="examples-header">
<span class="examples-title">Portugol Web</span>
<button class="examples-close" onclick="document.getElementById('modalExemplos').style.display = 'none';">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z"/></svg>
</button>
</div>

<div class="examples-content">
<!-- Novo Programa -->
<button class="example-card example-new" onclick="index.exemplo('branco');">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
<span>Novo Programa</span>
</button>

<!-- Categoria: Básico -->
<div class="example-category">
<div class="category-header">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M4 4l4-3 4 3v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4z"/></svg>
<span>Básico</span>
</div>
<div class="category-items">
<button class="example-item" onclick="index.exemplo('variaveis');">Variáveis</button>
<button class="example-item" onclick="index.exemplo('entrada');">Entrada de dados</button>
<button class="example-item" onclick="index.exemplo('velocidade');">Tempo gasto</button>
</div>
</div>

<!-- Categoria: Desvios Condicionais -->
<div class="example-category">
<div class="category-header">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M5 3l6 5-6 5V3z"/></svg>
<span>Desvios Condicionais</span>
</div>
<div class="category-items">
<button class="example-item" onclick="index.exemplo('condicoes');">Condições</button>
<button class="example-item" onclick="index.exemplo('repeticao');">Repetição</button>
<button class="example-item" onclick="index.exemplo('bolachaoumaca');">Bolacha ou Maçã</button>
</div>
</div>

<!-- Categoria: Outros -->
<div class="example-category">
<div class="category-header">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M2 2h4v4H2V2zm8 0h4v4h-4V2zM2 10h4v4H2v-4zm8 0h4v4h-4v-4z"/></svg>
<span>Outros</span>
</div>
<div class="category-items">
<button class="example-item" onclick="index.exemplo('vetores');">Vetores</button>
<button class="example-item" onclick="index.exemplo('funcoes');">Funções</button>
<button class="example-item" onclick="index.exemplo('bibliotecas');">Bibliotecas</button>
<button class="example-item" onclick="index.exemplo('internet');">Internet</button>
</div>
</div>

<!-- Categoria: Gráficos -->
<div class="example-category">
<div class="category-header">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M0 2v12h16V2H0zm15 11H1V3h14v10zM3 10h2v2H3v-2zm3-3h2v5H6V7zm3-2h2v7H9V5zm3 4h2v3h-2V9z"/></svg>
<span>Gráficos</span>
</div>
<div class="category-items">
<button class="example-item" onclick="index.exemplo('graficos');">Graficos</button>
<button class="example-item" onclick="index.exemplo('jogodavida');">Jogo da Vida</button>
<button class="example-item" onclick="index.exemplo('slide_puzzle');">Slide Puzzle</button>
<button class="example-item" onclick="index.exemplo('aleatorio0');">O Cubo Verde</button>
<button class="example-item" onclick="index.exemplo('aleatorio1');">Coelho 3D</button>
<button class="example-item" onclick="index.exemplo('aleatorio2');">Paramétrico</button>
<button class="example-item" onclick="index.exemplo('aleatorio3');">Seno e Cosseno</button>
<button class="example-item" onclick="index.exemplo('aleatorio5');">A*</button>
</div>
</div>
</div>

<!-- Settings -->
<div class="examples-settings">
<label class="setting-toggle">
<input id="check-mostrar-hotbar" type="checkbox" onchange="index.toggleHotbar(this.checked);"/>
<span class="toggle-slider"></span>
<span class="toggle-label">Mostrar Hotbar</span>
</label>
<label class="setting-toggle">
<input id="check-modo-turbo" type="checkbox" onchange="index.setModoTurbo(this);" title="Compila o código para Javascript, executa muito mais rápido"/>
<span class="toggle-slider"></span>
<span class="toggle-label">Modo Turbo</span>
</label>
<label class="setting-toggle">
<input id="check-auto-completar" type="checkbox" checked="true" onchange="index.setAutoCompleterState(this.checked);"/>
<span class="toggle-slider"></span>
<span class="toggle-label">Auto-Completar</span>
</label>
</div>

<!-- Footer -->
<div class="examples-footer">
<a class="github-link" href="#" onclick="index.abrirPagina('https://github.com/erickweil/portugolweb')">
<svg height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.5.75C6.146.75 1 5.896 1 12.25c0 5.089 3.292 9.387 7.863 10.91.575.101.79-.244.79-.546 0-.273-.014-1.178-.014-2.142-2.889.532-3.636-.704-3.866-1.35-.13-.331-.69-1.352-1.18-1.625-.402-.216-.977-.748-.014-.762.906-.014 1.553.834 1.769 1.179 1.035 1.74 2.688 1.25 3.349.948.1-.747.402-1.25.733-1.538-2.559-.287-5.232-1.279-5.232-5.678 0-1.25.445-2.285 1.178-3.09-.115-.288-.517-1.467.115-3.048 0 0 .963-.302 3.163 1.179.92-.259 1.897-.388 2.875-.388.977 0 1.955.13 2.875.388 2.2-1.495 3.162-1.179 3.162-1.179.633 1.581.23 2.76.115 3.048.733.805 1.179 1.825 1.179 3.09 0 4.413-2.688 5.39-5.247 5.678.417.36.776 1.05.776 2.128 0 1.538-.014 2.774-.014 3.162 0 .302.216.662.79.547C20.709 21.637 24 17.324 24 12.25 24 5.896 18.854.75 12.5.75Z"/>
</svg>
<span style="padding: 5px;">Abrir no GitHub</span>
<span>GitHub</span>
</a>
</div>
</div>
</div>
</div>
</div>

<div id="hotbar" class="portugol-buttons" style="width:100%">
<div id="myOutput_buttons" class="portugol-buttons" style="overflow-x:auto;white-space:nowrap;width: auto;">
Expand Down Expand Up @@ -176,6 +225,10 @@ <h2 onclick="index.exemplo('aleatorio5');">A*</h2>
<input tabindex="-1" type="button" value="==" onclick='index.editorType("==")' onfocus="index.preventFocus(event)"/>
<input tabindex="-1" type="button" value="!=" onclick='index.editorType("!=")' onfocus="index.preventFocus(event)"/>

</div>
<div class="terminal-header">
<span class="terminal-tab active">TERMINAL</span>
<span class="terminal-tab">PROBLEMAS</span>
</div>
<div id="myOutput" style="position:relative;">
<div class="saida" id="saida"><div id="errorArea"></div><div class="saida" id="hidden"></div><textarea id="textAreaSaida" onclick="index.cursorToEnd(this)" onkeyup="index.cursorToEnd(this)" oninput="index.receiveInput(this)">??</textarea><div id="divariaveis" class="divariaveis"></div>
Expand Down Expand Up @@ -205,6 +258,13 @@ <h2 onclick="index.exemplo('aleatorio5');">A*</h2>

</script>

<!-- VS Code Status Bar -->
<div class="vscode-statusbar">
<span class="vscode-statusbar-item">Portugol</span>
<span class="vscode-statusbar-item">UTF-8</span>
<span class="vscode-statusbar-item" style="margin-left: auto;">Ln 1, Col 1</span>
</div>

<script src="dist/ace.js"></script>
<script src="dist/main.js"></script>
</body>
Expand Down
Loading