Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Repo Diagram - Interactive Repository Visualizer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body class="bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 min-h-screen"> | |
| <div class="max-w-7xl mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-10"> | |
| <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent mb-4"> | |
| Repository Diagram | |
| </h1> | |
| <p class="text-slate-600 text-lg">Interactive visualization of any GitHub repository</p> | |
| </header> | |
| <!-- Controls --> | |
| <div class="bg-white rounded-2xl shadow-lg p-6 mb-8 transition-colors" id="controlsBg"> | |
| <div class="flex flex-col gap-4"> | |
| <!-- Main Input Row --> | |
| <div class="flex flex-col md:flex-row gap-4 items-end"> | |
| <div class="flex-1 w-full md:w-auto"> | |
| <label class="block text-sm font-medium text-slate-700 mb-2">Repository</label> | |
| <div class="flex gap-2"> | |
| <input type="text" id="repoInput" placeholder="e.g., sipeed/picoclaw" | |
| class="flex-1 px-4 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm"> | |
| <button id="loadBtn" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium flex items-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/> | |
| </svg> | |
| Load | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex gap-2 items-center flex-wrap"> | |
| <div class="flex items-center gap-2"> | |
| <label class="text-sm text-slate-600 whitespace-nowrap">Branch:</label> | |
| <select id="branchSelect" class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-mono w-32"> | |
| <option value="load">Load...</option> | |
| </select> | |
| <input type="text" id="branchInput" placeholder="main" value="main" | |
| class="px-3 py-2 border border-slate-300 rounded-lg font-mono text-sm w-24"> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <label class="text-sm text-slate-600 whitespace-nowrap">Depth:</label> | |
| <select id="depthSelect" class="px-3 py-2 border border-slate-300 rounded-lg text-sm"> | |
| <option value="1">1</option> | |
| <option value="2" selected>2</option> | |
| <option value="3">3</option> | |
| <option value="4">4</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons Row --> | |
| <div class="flex flex-wrap gap-2 items-center justify-between"> | |
| <div class="flex gap-2"> | |
| <button id="expandAllBtn" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition text-sm font-medium flex items-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/> | |
| </svg> | |
| Expand All | |
| </button> | |
| <button id="collapseAllBtn" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition text-sm font-medium flex items-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/> | |
| </svg> | |
| Collapse All | |
| </button> | |
| <button id="clearCacheBtn" class="px-4 py-2 bg-orange-100 text-orange-700 rounded-lg hover:bg-orange-200 transition text-sm font-medium flex items-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/> | |
| </svg> | |
| Clear Cache | |
| </button> | |
| </div> | |
| <div class="flex gap-2"> | |
| <button id="darkModeBtn" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition text-sm font-medium flex items-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/> | |
| </svg> | |
| Dark Mode | |
| </button> | |
| <button id="exportSVGBtn" class="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition text-sm font-medium flex items-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/> | |
| </svg> | |
| Export SVG | |
| </button> | |
| <button id="exportPNGBtn" class="px-4 py-2 bg-purple-100 text-purple-700 rounded-lg hover:bg-purple-200 transition text-sm font-medium flex items-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/> | |
| </svg> | |
| Export PNG | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Search Row --> | |
| <div class="relative"> | |
| <input type="text" id="searchInput" placeholder="Search files and folders..." | |
| class="w-full px-4 py-2 pl-10 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 text-sm"> | |
| <svg class="absolute left-3 top-2.5 w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status --> | |
| <div id="status" class="hidden mb-6 p-4 rounded-lg"></div> | |
| <!-- Diagram Container --> | |
| <div class="bg-white rounded-2xl shadow-xl p-8 relative overflow-hidden"> | |
| <div id="loading" class="hidden absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center z-20"> | |
| <div class="text-center"> | |
| <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent mb-4"></div> | |
| <p class="text-slate-600">Loading repository structure...</p> | |
| </div> | |
| </div> | |
| <div id="diagram" class="relative min-h-[500px]"> | |
| <svg id="connections" class="absolute inset-0 w-full h-full pointer-events-none" style="z-index: 0;"></svg> | |
| <div id="nodes" class="relative z-10"></div> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="text-center py-20"> | |
| <div class="text-6xl mb-4">📦</div> | |
| <h3 class="text-xl font-semibold text-slate-700 mb-2">No repository loaded</h3> | |
| <p class="text-slate-500">Enter a GitHub repository URL above to visualize its structure</p> | |
| </div> | |
| </div> | |
| <!-- Stats Bar --> | |
| <div id="statsBar" class="hidden mt-8 grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-white rounded-xl p-4 shadow-md text-center"> | |
| <div id="totalFiles" class="text-2xl font-bold text-blue-600">0</div> | |
| <div class="text-xs text-slate-600 uppercase tracking-wide">Total Files</div> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 shadow-md text-center"> | |
| <div id="totalDirs" class="text-2xl font-bold text-green-600">0</div> | |
| <div class="text-xs text-slate-600 uppercase tracking-wide">Directories</div> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 shadow-md text-center"> | |
| <div id="totalLines" class="text-2xl font-bold text-purple-600">0</div> | |
| <div class="text-xs text-slate-600 uppercase tracking-wide">Lines of Code</div> | |
| </div> | |
| <div class="bg-white rounded-xl p-4 shadow-md text-center"> | |
| <div id="repoSize" class="text-2xl font-bold text-pink-600">0 KB</div> | |
| <div class="text-xs text-slate-600 uppercase tracking-wide">Repository Size</div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-slate-500 text-sm"> | |
| <p>Built with Tailwind CSS • GitHub Pages Ready</p> | |
| </footer> | |
| </div> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |