Spaces:
Running
Running
| <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Dashboard Preview - Interactive software architecture visualization"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><title>Dashboard Preview</title><link rel="stylesheet" href="/_astro/index.iavkxzn9.css"></head> <body class="min-h-screen bg-gray-50 text-gray-900 antialiased"> <main class="mx-auto max-w-screen-2xl p-4 sm:p-6 lg:p-8"> <header class="mb-6"> <h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Dashboard Preview</h1> <p class="mt-1 text-sm text-gray-500">Interactive software architecture visualization</p> </header> <!-- Dashboard Selector Section --> <section id="selector-section" class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm"> <h2 class="mb-3 text-lg font-semibold text-gray-700">Select Dashboard</h2> <div id="dashboard-selector" class="flex flex-col gap-3 sm:flex-row sm:items-center"> <!-- DashboardSelector component will mount here --> </div> </section> <!-- Upload Section --> <section id="upload-section" class="mb-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm"> <h2 class="mb-3 text-lg font-semibold text-gray-700">Upload Dashboard</h2> <div id="upload-handler"> <!-- UploadHandler component will mount here --> </div> </section> <!-- Content Area: Metadata + Graph --> <div class="flex flex-col gap-6 lg:flex-row"> <!-- Metadata Panel --> <section id="metadata-section" class="w-full overflow-y-auto rounded-lg border border-gray-200 bg-white p-4 shadow-sm lg:max-h-[660px] lg:w-80 lg:shrink-0"> <h2 class="mb-3 text-lg font-semibold text-gray-700">Project Metadata</h2> <div id="metadata-panel"> <p class="text-sm text-gray-400">Select or upload a dashboard to view metadata.</p> </div> <!-- Search Panel --> <div class="mt-4 border-t border-gray-200 pt-4"> <h3 class="mb-2 text-sm font-semibold text-gray-700">Search Nodes & Edges</h3> <div id="search-panel"> <p class="text-sm text-gray-400">Load a dashboard to search.</p> </div> </div> </section> <!-- Graph Canvas --> <section id="graph-section" class="min-w-0 flex-1 rounded-lg border border-gray-200 bg-white p-4 shadow-sm"> <h2 class="mb-3 text-lg font-semibold text-gray-700">Architecture Graph</h2> <div id="graph-container" class="relative h-[400px] w-full rounded border border-gray-100 bg-gray-50 lg:h-[600px]"> <p class="absolute inset-0 flex items-center justify-center text-sm text-gray-400"> | |
| Select or upload a dashboard to view the graph. | |
| </p> </div> </section> </div> <!-- Tour Section --> <section id="tour-section" class="mt-6 rounded-lg border border-gray-200 bg-white p-4 shadow-sm"> <h2 class="mb-3 text-lg font-semibold text-gray-700">Guided Tour</h2> <div id="tour-controls"> <p class="text-sm text-gray-400">Load a dashboard with tour steps to start a guided tour.</p> </div> </section> </main> </body></html> <script type="module" src="/_astro/index.astro_astro_type_script_index_0_lang.CS1L8z5P.js"></script> |