| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Supabase Bucket Tree</title> |
| |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> |
| |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> |
| <style> |
| body { |
| background: #181a1b; |
| color: #ececec; |
| } |
| .treeview ul { |
| list-style: none; |
| padding-left: 1.2em; |
| border-left: 1px solid #444; |
| } |
| .treeview li { |
| margin: 0.2em 0; |
| position: relative; |
| } |
| .treeview .folder-toggle { |
| cursor: pointer; |
| color: #ffd600; |
| margin-right: 6px; |
| font-size: 1.1em; |
| } |
| .treeview .bi-folder-fill { |
| color: #ffd600; |
| margin-right: 6px; |
| } |
| .treeview .bi-file-earmark-text { |
| color: #90caf9; |
| margin-right: 6px; |
| } |
| .treeview a { |
| color: #90caf9; |
| text-decoration: none; |
| } |
| .treeview a:hover { |
| text-decoration: underline; |
| color: #42a5f5; |
| } |
| .treeview .collapsed > .bi-caret-right-fill { |
| transform: rotate(0deg); |
| } |
| .treeview .expanded > .bi-caret-right-fill { |
| transform: rotate(90deg); |
| } |
| .treeview .caret { |
| transition: transform 0.2s; |
| } |
| </style> |
| </head> |
| <body> |
| <nav class="navbar navbar-dark bg-dark"> |
| <div class="container-fluid"> |
| <a class="navbar-brand" href="/"><i class="bi bi-cloud"></i> Bucket Tree</a> |
| <div> |
| <a href="/" class="btn btn-outline-light btn-sm me-2"><i class="bi bi-house"></i> Home</a> |
| <a href="/logout" class="btn btn-outline-warning btn-sm"><i class="bi bi-box-arrow-right"></i> Logout</a> |
| </div> |
| </div> |
| </nav> |
| <div class="container mt-4"> |
| <h4 class="mb-4" style="color:#90caf9;"><i class="bi bi-cloud"></i> Supabase Bucket Tree</h4> |
| <div class="treeview" id="bucket-tree"> |
| <ul class="ps-0"> |
| {{ tree_html|safe }} |
| </ul> |
| </div> |
| </div> |
| |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| document.querySelectorAll('.folder-toggle').forEach(function(toggle) { |
| toggle.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| const li = toggle.closest('li'); |
| const childUl = li.querySelector('ul'); |
| if (childUl) { |
| if (childUl.style.display === 'none') { |
| childUl.style.display = ''; |
| li.classList.add('expanded'); |
| li.classList.remove('collapsed'); |
| } else { |
| childUl.style.display = 'none'; |
| li.classList.add('collapsed'); |
| li.classList.remove('expanded'); |
| } |
| } |
| }); |
| |
| const li = toggle.closest('li'); |
| const childUl = li.querySelector('ul'); |
| if (childUl) { |
| childUl.style.display = 'none'; |
| li.classList.add('collapsed'); |
| li.classList.remove('expanded'); |
| } |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
