feat: implement better progress tracking and user feedback, run code after some idle time

This commit is contained in:
Michael Czechowski
2025-05-19 20:21:53 +02:00
parent cf650b0842
commit 7e23e5b331
3 changed files with 61 additions and 12 deletions

View File

@@ -11,7 +11,7 @@
<div class="app-container">
<header class="header">
<div class="logo">
<img src="./bar_1680535.png" width="32" alt="CODE CRISPIES Logo" />
<img src="./bowl.png" width="32" alt="CODE CRISPIES Logo" />
<h1>CODE<br /><span>CRISPIES</span></h1>
</div>
<nav class="main-nav">
@@ -50,14 +50,14 @@
<div class="code-editor">
<div class="editor-header">
<span>CSS Editor</span>
<label for="code-input">CSS Editor</label>
<div class="validation-indicators-container"></div>
<button id="run-btn" class="btn btn-secondary"><img src="./gear.svg" />Run</button>
<button id="run-btn" class="btn btn-secondary"><img src="./gear.svg" alt="" />Run</button>
</div>
<div class="editor-content">
<pre><code id="editor-prefix"></code></pre>
<!-- <pre><code id="editor-prefix"></code></pre>-->
<textarea id="code-input" class="code-input" spellcheck="false"></textarea>
<pre><code id="editor-suffix"></code></pre>
<!-- <pre><code id="editor-suffix"></code></pre>-->
</div>
</div>
</div>