lucasacchi/llm-monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show model details in modal with close controls

Browse Source 
- Replace inline details panel with centered modal overlay
- Add close button (X) in top-right of modal
- Add close on backdrop click
- Add close on Escape key
- Lock body scroll while modal is open
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-24 20:10:37 +02:00
parent f19c03b7bd
commit e05df7ce2b
2 changed files with 48 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/web/templates/index.html
+17 -9
View File
@@ -75,15 +75,6 @@
</div>
</div>
<!-- Model Show Details -->
<div id="model-details-section" class="mt-8 bg-gray-800 rounded-lg border border-gray-700 p-6 hidden">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-bold">Dettagli Modello</h3>
<span id="model-details-name" class="text-sm text-purple-300 font-medium"></span>
</div>
<pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg overflow-auto max-h-96 whitespace-pre-wrap"></pre>
</div>
<!-- API Documentation Section -->
<div class="mt-8 bg-blue-900 bg-opacity-20 border border-blue-700 rounded-lg p-6">
<h3 class="text-lg font-bold mb-4">📚 Documentazione API</h3>
@@ -108,6 +99,23 @@
</footer>
</div>
<!-- Model Show Details Modal -->
<div id="model-details-modal" class="hidden fixed inset-0 z-50">
<div id="model-details-backdrop" class="absolute inset-0 bg-black/70"></div>
<div class="relative min-h-screen flex items-center justify-center p-4">
<div id="model-details-section" class="w-full max-w-4xl bg-gray-800 rounded-lg border border-gray-700 p-6 shadow-xl">
<div class="flex items-center justify-between mb-4">
<div>
<h3 class="text-lg font-bold">Dettagli Modello</h3>
<span id="model-details-name" class="text-sm text-purple-300 font-medium"></span>
</div>
<button id="model-details-close" type="button" class="text-gray-300 hover:text-white text-2xl leading-none px-2" aria-label="Chiudi modal">×</button>
</div>
<pre id="model-details-content" class="bg-gray-900 text-gray-200 text-xs p-4 rounded-lg overflow-auto max-h-[70vh] whitespace-pre-wrap"></pre>
</div>
</div>
</div>
<!-- LLM Monitor Application -->
<!-- Web Worker for background data sync -->
<!-- localStorage for client-side persistence -->