Spaces:
Running
Running
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>HuggingFace Drive - {{ path or 'Root' }}</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <style> | |
| /* Reset and Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; | |
| } | |
| :root { | |
| --bg: #0f172a; | |
| --bg-secondary: #1e293b; | |
| --bg-tertiary: #334155; | |
| --text: #f1f5f9; | |
| --text-muted: #94a3b8; | |
| --primary: #3b82f6; | |
| --primary-hover: #2563eb; | |
| --success: #10b981; | |
| --success-hover: #059669; | |
| --danger: #ef4444; | |
| --danger-hover: #dc2626; | |
| --border: #475569; | |
| --shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
| --radius: 8px; | |
| --transition: all 0.2s ease; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: var(--text); | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 1.5rem; | |
| } | |
| /* Header */ | |
| .header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| padding: 1.25rem; | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| margin-bottom: 2rem; | |
| backdrop-filter: blur(10px); | |
| } | |
| .title { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.75rem; | |
| font-weight: 700; | |
| color: var(--primary); | |
| } | |
| .title-icon { | |
| width: 28px; | |
| height: 28px; | |
| transition: var(--transition); | |
| } | |
| .title:hover .title-icon { | |
| transform: rotate(15deg) scale(1.15); | |
| } | |
| /* Breadcrumb */ | |
| .breadcrumb { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.95rem; | |
| } | |
| .breadcrumb-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| color: var(--text-muted); | |
| transition: var(--transition); | |
| } | |
| .breadcrumb-item:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text); | |
| transform: translateY(-2px); | |
| } | |
| .breadcrumb-item.active { | |
| color: var(--primary); | |
| background: rgba(59, 130, 246, 0.15); | |
| } | |
| .breadcrumb-separator { | |
| color: var(--text-muted); | |
| user-select: none; | |
| } | |
| /* Actions */ | |
| .actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.75rem; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: var(--radius); | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-decoration: none; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); | |
| transition: left 0.4s ease; | |
| } | |
| .btn:hover::before { | |
| left: 100%; | |
| } | |
| .btn-primary { | |
| background: var(--primary); | |
| color: #fff; | |
| } | |
| .btn-primary:hover { | |
| background: var(--primary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3); | |
| } | |
| .btn-secondary { | |
| background: var(--bg-tertiary); | |
| color: var(--text); | |
| border: 1px solid var(--border); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--bg-secondary); | |
| border-color: var(--primary); | |
| transform: translateY(-2px); | |
| } | |
| .btn-success { | |
| background: var(--success); | |
| color: #fff; | |
| } | |
| .btn-success:hover { | |
| background: var(--success-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3); | |
| } | |
| .btn-danger { | |
| background: var(--danger); | |
| color: #fff; | |
| } | |
| .btn-danger:hover { | |
| background: var(--danger-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3); | |
| } | |
| .file-input-wrapper { | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-block; | |
| } | |
| .file-input { | |
| position: absolute; | |
| left: -9999px; | |
| opacity: 0; | |
| } | |
| .icon { | |
| width: 18px; | |
| height: 18px; | |
| flex-shrink: 0; | |
| } | |
| /* File Grid */ | |
| .file-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1.25rem; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .file-item { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius); | |
| border: 1px solid var(--border); | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: visible; | |
| } | |
| .file-item:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow); | |
| border-color: var(--primary); | |
| overflow: visible; | |
| } | |
| .file-item-content { | |
| padding: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| cursor: pointer; | |
| overflow: visible; | |
| } | |
| .file-info { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| flex: 1; | |
| } | |
| .file-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 8px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .file-icon.dir { | |
| background: rgba(59, 130, 246, 0.1); | |
| color: var(--primary); | |
| } | |
| .file-icon.file { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: var(--success); | |
| } | |
| .file-item:hover .file-icon { | |
| transform: scale(1.1); | |
| } | |
| .file-details { | |
| flex: 1; | |
| } | |
| .file-name { | |
| font-weight: 500; | |
| margin-bottom: 0.25rem; | |
| word-break: break-word; | |
| font-size: 1rem; | |
| } | |
| .file-meta { | |
| font-size: 0.85rem; | |
| color: var(--text-muted); | |
| } | |
| /* Dropdown */ | |
| .dropdown { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.5rem; | |
| } | |
| .dropdown-toggle { | |
| background: none; | |
| border: none; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| padding: 0.5rem; | |
| border-radius: 6px; | |
| transition: var(--transition); | |
| } | |
| .dropdown-toggle:hover { | |
| background: var(--bg-tertiary); | |
| color: var(--text); | |
| } | |
| .dropdown-menu { | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background: var(--bg-secondary); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| min-width: 180px; | |
| z-index: 1000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translateY(-10px); | |
| transition: var(--transition); | |
| } | |
| .dropdown.active .dropdown-menu { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } | |
| .dropdown-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: none; | |
| background: none; | |
| color: var(--text); | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| text-align: left; | |
| } | |
| .dropdown-item:hover { | |
| background: var(--bg-tertiary); | |
| } | |
| .dropdown-item.danger { | |
| color: var(--danger); | |
| } | |
| .dropdown-item.danger:hover { | |
| background: rgba(239, 68, 68, 0.1); | |
| } | |
| /* Empty State */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 3rem 1rem; | |
| color: var(--text-muted); | |
| } | |
| .empty-state .icon { | |
| width: 72px; | |
| height: 72px; | |
| margin: 0 auto 1rem; | |
| opacity: 0.6; | |
| } | |
| .empty-state h3 { | |
| margin-bottom: 0.5rem; | |
| color: var(--text); | |
| font-size: 1.25rem; | |
| } | |
| /* Modals */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.75); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 2000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: var(--transition); | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .modal { | |
| background: var(--bg-secondary); | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| width: 90%; | |
| max-width: 450px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| transform: scale(0.95); | |
| transition: var(--transition); | |
| border: 1px solid var(--border); | |
| } | |
| .modal-overlay.active .modal { | |
| transform: scale(1); | |
| } | |
| .modal-title { | |
| padding: 1.5rem 1.5rem 0; | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| } | |
| .modal-body { | |
| padding: 1.5rem; | |
| } | |
| .modal-input { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius); | |
| background: var(--bg-tertiary); | |
| color: var(--text); | |
| font-size: 0.95rem; | |
| transition: var(--transition); | |
| } | |
| .modal-input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); | |
| } | |
| .modal-actions { | |
| padding: 0 1.5rem 1.5rem; | |
| display: flex; | |
| gap: 0.75rem; | |
| justify-content: flex-end; | |
| } | |
| /* Upload Overlay */ | |
| .upload-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.85); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 3000; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: var(--transition); | |
| } | |
| .upload-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .loading-spinner { | |
| width: 48px; | |
| height: 48px; | |
| border: 4px solid var(--border); | |
| border-top: 4px solid var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 1rem; | |
| } | |
| .upload-text { | |
| font-size: 1.2rem; | |
| color: var(--text); | |
| } | |
| .btn .loading-spinner { | |
| width: 20px; | |
| height: 20px; | |
| border-width: 3px; | |
| margin: 0; | |
| } | |
| /* Animations */ | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-tertiary); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--border); | |
| border-radius: 5px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| /* Responsive Design */ | |
| .container { | |
| padding: 1rem; | |
| } | |
| .header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 1.5rem; | |
| } | |
| .title { | |
| justify-content: center; | |
| width: 100%; | |
| } | |
| .breadcrumb { | |
| justify-content: center; | |
| width: 100%; | |
| } | |
| .actions { | |
| justify-content: center; | |
| width: 100%; | |
| } | |
| .file-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); | |
| gap: 1rem; | |
| } | |
| } | |
| .file-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .file-item-content { | |
| padding: 1rem; | |
| } | |
| .file-icon { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .file-name { | |
| font-size: 0.95rem; | |
| } | |
| .modal { | |
| width: 95%; | |
| margin: 1rem; | |
| } | |
| .modal-actions { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |
| .title { | |
| font-size: 1.5rem; | |
| } | |
| .breadcrumb-item { | |
| padding: 0.5rem 0.75rem; | |
| font-size: 0.9rem; | |
| } | |
| .file-icon { | |
| width: 36px; | |
| height: 36px; | |
| } | |
| .file-name { | |
| font-size: 0.9rem; | |
| } | |
| .actions { | |
| flex-direction: column; | |
| } | |
| } | |
| /* Reduced Motion */ | |
| * { | |
| animation-duration: 0.01ms !important; | |
| transition-duration: 0.01ms !important; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Upload Overlay --> | |
| <div class="upload-overlay" id="uploadOverlay"> | |
| <div class="loading-spinner"></div> | |
| <p class="upload-text">Processing...</p> | |
| </div> | |
| <div class="container"> | |
| <header class="header"> | |
| <h1 class="title"> | |
| <svg class="title-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v0a2 2 0 01-2 2H10a2 2 0 01-2-2v0z"></path> | |
| </svg> | |
| HuggingFace Drive | |
| </h1> | |
| <!-- Breadcrumb --> | |
| <nav class="breadcrumb"> | |
| <span class="breadcrumb-item {{ 'active' if not path else '' }}" onclick="nav('')"> | |
| <svg class="icon" fill="currentColor" viewBox="0 0 20 20"> | |
| <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/> | |
| </svg> | |
| Home | |
| </span> | |
| {% if path %} | |
| {% set parts = path.split('/') %} | |
| {% for i in range(parts|length) %} | |
| <span class="breadcrumb-separator">›</span> | |
| {% set current_path = parts[:i+1]|join('/') %} | |
| <span class="breadcrumb-item {{ 'active' if current_path == path else '' }}" | |
| onclick="nav('{{ current_path }}')"> | |
| <svg class="icon" fill="currentColor" viewBox="0 0 20 20"> | |
| <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/> | |
| </svg> | |
| {{ parts[i] }} | |
| </span> | |
| {% endfor %} | |
| {% endif %} | |
| </nav> | |
| <!-- Actions --> | |
| <div class="actions"> | |
| <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm"> | |
| <div class="file-input-wrapper"> | |
| <label for="fileInput" class="btn btn-primary"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/> | |
| </svg> | |
| Upload File | |
| </label> | |
| <input type="file" name="file" required class="file-input" id="fileInput"> | |
| <input type="hidden" name="path" value="{{ path }}"> | |
| </div> | |
| </form> | |
| <button class="btn btn-secondary" onclick="showFolderModal('{{ path }}')"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/> | |
| </svg> | |
| New Folder | |
| </button> | |
| <button class="btn btn-success" onclick="showUrlDownloadModal('{{ path }}')"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> | |
| </svg> | |
| Download from URL | |
| </button> | |
| </div> | |
| </header> | |
| <!-- File Grid --> | |
| <main> | |
| {% if items %} | |
| <div class="file-grid"> | |
| {% for item in items %} | |
| <div class="file-item"> | |
| <div class="file-item-content" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% else %}download('{{ item.path }}'){% endif %}"> | |
| <div class="file-info"> | |
| <div class="file-icon {{ item.type }}"> | |
| {% if item.type == 'dir' %} | |
| <svg class="icon" fill="currentColor" viewBox="0 0 20 20"> | |
| <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/> | |
| </svg> | |
| {% else %} | |
| <svg class="icon" fill="currentColor" viewBox="0 0 20 20"> | |
| <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/> | |
| </svg> | |
| {% endif %} | |
| </div> | |
| <div class="file-details"> | |
| <div class="file-name">{{ item.name }}</div> | |
| <div class="file-meta">{{ item.type|title }}</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dropdown"> | |
| <button class="dropdown-toggle" onclick="toggleDropdown(event, this)"> | |
| <svg class="icon" fill="currentColor" viewBox="0 0 20 20"> | |
| <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/> | |
| </svg> | |
| </button> | |
| <div class="dropdown-menu"> | |
| {% if item.type == 'file' %} | |
| <button class="dropdown-item" onclick="download('{{ item.path }}')"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> | |
| </svg> | |
| Download | |
| </button> | |
| {% endif %} | |
| <button class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/> | |
| </svg> | |
| Rename | |
| </button> | |
| <button class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')"> | |
| <svg class="icon" 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> | |
| Delete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| {% else %} | |
| <div class="empty-state"> | |
| <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/> | |
| </svg> | |
| <h3>No files yet</h3> | |
| <p>Upload your first file or create a folder to get started.</p> | |
| </div> | |
| {% endif %} | |
| </main> | |
| </div> | |
| <!-- Modals --> | |
| <!-- Rename Modal --> | |
| <div class="modal-overlay" id="renameModal"> | |
| <div class="modal"> | |
| <h3 class="modal-title">Rename Item</h3> | |
| <div class="modal-body"> | |
| <input type="text" class="modal-input" id="renameInput" placeholder="Enter new name"> | |
| </div> | |
| <div class="modal-actions"> | |
| <button class="btn btn-secondary" onclick="closeModal('renameModal')">Cancel</button> | |
| <button class="btn btn-primary" onclick="confirmRename()" id="renameConfirmBtn"> | |
| <span id="renameBtnText">Rename</span> | |
| <span id="renameBtnSpinner" class="loading-spinner" style="display: none;"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delete Modal --> | |
| <div class="modal-overlay" id="deleteModal"> | |
| <div class="modal"> | |
| <h3 class="modal-title">Confirm Deletion</h3> | |
| <div class="modal-body"> | |
| <p>Are you sure you want to delete <strong id="deleteItemName"></strong>? This action cannot be undone.</p> | |
| </div> | |
| <div class="modal-actions"> | |
| <button class="btn btn-secondary" onclick="closeModal('deleteModal')">Cancel</button> | |
| <button class="btn btn-danger" onclick="confirmDelete()" id="deleteConfirmBtn"> | |
| <span id="deleteBtnText">Delete</span> | |
| <span id="deleteBtnSpinner" class="loading-spinner" style="display: none;"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Folder Modal --> | |
| <div class="modal-overlay" id="folderModal"> | |
| <div class="modal"> | |
| <h3 class="modal-title">Create New Folder</h3> | |
| <div class="modal-body"> | |
| <input type="text" class="modal-input" id="folderInput" placeholder="Enter folder name"> | |
| </div> | |
| <div class="modal-actions"> | |
| <button class="btn btn-secondary" onclick="closeModal('folderModal')">Cancel</button> | |
| <button class="btn btn-primary" onclick="confirmCreateFolder()" id="folderConfirmBtn"> | |
| <span id="folderBtnText">Create</span> | |
| <span id="folderBtnSpinner" class="loading-spinner" style="display: none;"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- URL Download Modal --> | |
| <div class="modal-overlay" id="urlDownloadModal"> | |
| <div class="modal"> | |
| <h3 class="modal-title">Download from URL</h3> | |
| <div class="modal-body"> | |
| <input type="text" class="modal-input" id="urlInput" placeholder="https://example.com/file.pdf" style="margin-bottom: 1rem;"> | |
| <input type="text" class="modal-input" id="filenameInput" placeholder="Custom filename (optional)"> | |
| <p style="font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem;"> | |
| The file will be downloaded directly to your HuggingFace repository. | |
| </p> | |
| </div> | |
| <div class="modal-actions"> | |
| <button class="btn btn-secondary" onclick="closeModal('urlDownloadModal')">Cancel</button> | |
| <button class="btn btn-success" onclick="confirmUrlDownload()" id="urlDownloadConfirmBtn"> | |
| <span id="urlDownloadBtnText">Download</span> | |
| <span id="urlDownloadBtnSpinner" class="loading-spinner" style="display: none;"></span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Global state | |
| let currentRenamePath = ''; | |
| let currentDeletePath = ''; | |
| let currentFolderPath = ''; | |
| let currentUrlDownloadPath = ''; | |
| let activeDropdown = null; | |
| // Navigation | |
| function nav(path) { | |
| window.location.href = '/?path=' + encodeURIComponent(path); | |
| } | |
| function download(path) { | |
| window.open('/download?path=' + encodeURIComponent(path), '_blank'); | |
| } | |
| // Dropdown management | |
| function toggleDropdown(event, button) { | |
| event.stopPropagation(); | |
| const dropdown = button.closest('.dropdown'); | |
| if (activeDropdown && activeDropdown !== dropdown) { | |
| activeDropdown.classList.remove('active'); | |
| } | |
| dropdown.classList.toggle('active'); | |
| activeDropdown = dropdown.classList.contains('active') ? dropdown : null; | |
| } | |
| function closeAllDropdowns() { | |
| if (activeDropdown) { | |
| activeDropdown.classList.remove('active'); | |
| activeDropdown = null; | |
| } | |
| } | |
| // Loading state management | |
| function showSpinner(btnId, textId, spinnerId) { | |
| const btn = document.getElementById(btnId); | |
| const text = document.getElementById(textId); | |
| const spinner = document.getElementById(spinnerId); | |
| btn.disabled = true; | |
| text.style.display = 'none'; | |
| spinner.style.display = 'inline-block'; | |
| } | |
| function hideSpinner(btnId, textId, spinnerId) { | |
| const btn = document.getElementById(btnId); | |
| const text = document.getElementById(textId); | |
| const spinner = document.getElementById(spinnerId); | |
| btn.disabled = false; | |
| text.style.display = 'inline-block'; | |
| spinner.style.display = 'none'; | |
| } | |
| // Modal management | |
| function showModal(modalId) { | |
| const modal = document.getElementById(modalId); | |
| modal.classList.add('active'); | |
| document.body.style.overflow = 'hidden'; | |
| // Focus first input in modal | |
| const firstInput = modal.querySelector('.modal-input'); | |
| if (firstInput) { | |
| setTimeout(() => { | |
| firstInput.focus(); | |
| if (firstInput.type === 'text') { | |
| firstInput.select(); | |
| } | |
| }, 100); | |
| } | |
| } | |
| function closeModal(modalId) { | |
| const modal = document.getElementById(modalId); | |
| modal.classList.remove('active'); | |
| document.body.style.overflow = ''; | |
| } | |
| // Modal show functions | |
| function showRenameModal(path, currentName) { | |
| currentRenamePath = path; | |
| document.getElementById('renameInput').value = currentName; | |
| showModal('renameModal'); | |
| closeAllDropdowns(); | |
| } | |
| function showDeleteModal(path, name) { | |
| currentDeletePath = path; | |
| document.getElementById('deleteItemName').textContent = name; | |
| showModal('deleteModal'); | |
| closeAllDropdowns(); | |
| } | |
| function showFolderModal(path) { | |
| currentFolderPath = path; | |
| document.getElementById('folderInput').value = ''; | |
| showModal('folderModal'); | |
| } | |
| function showUrlDownloadModal(path) { | |
| currentUrlDownloadPath = path; | |
| document.getElementById('urlInput').value = ''; | |
| document.getElementById('filenameInput').value = ''; | |
| showModal('urlDownloadModal'); | |
| } | |
| // Generic action performer | |
| async function performAction(url, body, btnId, textId, spinnerId, modalToClose, successMessage) { | |
| showSpinner(btnId, textId, spinnerId); | |
| try { | |
| const response = await fetch(url, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify(body) | |
| }); | |
| const result = await response.json(); | |
| if (response.ok) { | |
| if (modalToClose) closeModal(modalToClose); | |
| if (successMessage) { | |
| // Show brief success message | |
| showUploadOverlay(successMessage); | |
| setTimeout(() => hideUploadOverlay(), 1500); | |
| } | |
| setTimeout(() => window.location.reload(), successMessage ? 1500 : 0); | |
| } else { | |
| throw new Error(result.error || 'Operation failed'); | |
| } | |
| } catch (error) { | |
| console.error('Action failed:', error); | |
| alert(`Operation failed: ${error.message}`); | |
| } finally { | |
| hideSpinner(btnId, textId, spinnerId); | |
| } | |
| } | |
| // Action confirmations | |
| function confirmRename() { | |
| const newName = document.getElementById('renameInput').value.trim(); | |
| if (!newName) { | |
| alert('Please enter a valid name'); | |
| return; | |
| } | |
| performAction( | |
| '/rename', | |
| { old_path: currentRenamePath, new_path: newName }, | |
| 'renameConfirmBtn', | |
| 'renameBtnText', | |
| 'renameBtnSpinner', | |
| 'renameModal', | |
| 'Item renamed successfully!' | |
| ); | |
| } | |
| function confirmDelete() { | |
| performAction( | |
| '/delete', | |
| { path: currentDeletePath }, | |
| 'deleteConfirmBtn', | |
| 'deleteBtnText', | |
| 'deleteBtnSpinner', | |
| 'deleteModal', | |
| 'Item deleted successfully!' | |
| ); | |
| } | |
| function confirmCreateFolder() { | |
| const folderName = document.getElementById('folderInput').value.trim(); | |
| if (!folderName) { | |
| alert('Please enter a folder name'); | |
| return; | |
| } | |
| const folderPath = currentFolderPath ? `${currentFolderPath}/${folderName}` : folderName; | |
| performAction( | |
| '/create_folder', | |
| { path: folderPath }, | |
| 'folderConfirmBtn', | |
| 'folderBtnText', | |
| 'folderBtnSpinner', | |
| 'folderModal', | |
| 'Folder created successfully!' | |
| ); | |
| } | |
| function confirmUrlDownload() { | |
| const url = document.getElementById('urlInput').value.trim(); | |
| const customFilename = document.getElementById('filenameInput').value.trim(); | |
| if (!url) { | |
| alert('Please enter a valid URL'); | |
| return; | |
| } | |
| if (!url.startsWith('http://') && !url.startsWith('https://')) { | |
| alert('Please enter a valid HTTP/HTTPS URL'); | |
| return; | |
| } | |
| performAction( | |
| '/download_url', | |
| { | |
| url: url, | |
| path: currentUrlDownloadPath, | |
| filename: customFilename || null | |
| }, | |
| 'urlDownloadConfirmBtn', | |
| 'urlDownloadBtnText', | |
| 'urlDownloadBtnSpinner', | |
| 'urlDownloadModal', | |
| 'File downloaded successfully!' | |
| ); | |
| } | |
| // Upload overlay management | |
| function showUploadOverlay(message = 'Processing...') { | |
| const overlay = document.getElementById('uploadOverlay'); | |
| const text = overlay.querySelector('.upload-text'); | |
| text.textContent = message; | |
| overlay.classList.add('active'); | |
| } | |
| function hideUploadOverlay() { | |
| document.getElementById('uploadOverlay').classList.remove('active'); | |
| } | |
| // Event listeners | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // File input change handler | |
| document.getElementById('fileInput').addEventListener('change', function(e) { | |
| if (this.files.length > 0) { | |
| showUploadOverlay('Uploading file...'); | |
| document.getElementById('uploadForm').submit(); | |
| } | |
| }); | |
| // Modal keyboard handlers | |
| const setupModalKeyListener = (inputId, confirmFunction) => { | |
| const input = document.getElementById(inputId); | |
| if (input) { | |
| input.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| e.preventDefault(); | |
| confirmFunction(); | |
| } | |
| }); | |
| } | |
| }; | |
| setupModalKeyListener('renameInput', confirmRename); | |
| setupModalKeyListener('folderInput', confirmCreateFolder); | |
| setupModalKeyListener('urlInput', confirmUrlDownload); | |
| setupModalKeyListener('filenameInput', confirmUrlDownload); | |
| // Global click handler | |
| document.addEventListener('click', (e) => { | |
| // Close dropdowns when clicking outside | |
| if (!e.target.closest('.dropdown')) { | |
| closeAllDropdowns(); | |
| } | |
| // Close modal when clicking overlay | |
| if (e.target.classList.contains('modal-overlay')) { | |
| closeModal(e.target.id); | |
| } | |
| }); | |
| // Global keyboard handler | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') { | |
| const openModal = document.querySelector('.modal-overlay.active'); | |
| if (openModal) { | |
| closeModal(openModal.id); | |
| } else { | |
| closeAllDropdowns(); | |
| } | |
| } | |
| }); | |
| }); | |
| // Prevent form submission on enter in modals (except for specific inputs) | |
| document.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && e.target.closest('.modal') && e.target.tagName !== 'BUTTON') { | |
| const modal = e.target.closest('.modal-overlay'); | |
| if (modal) { | |
| e.preventDefault(); | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |