File Manager Interface - Copy this Html, Tailwind Component to your project
Cập nhập lại giao diện cho mã này cho tôi: <!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>MINli DRIVER</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="icon" href="{{ url_for('static', filename='minli.png') }}" type="image/png"> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> <script src="{{ url_for('static', filename='script.js') }}"></script> <input type="hidden" id="currentPath" value="a" /> </head> <body> <div class="layout container"></div> <div class="app container" id="appContainer"> <header> <h1>Minli Driver</h1> <div> <form id="upload form" enctype="multipart/form data"> <! Nút chọn file > <label for="file input" class="custom file label"> <span id="file label text">Chọn tệp</span> </label> <input type="file" name="file" id="file input" multiple style="display: none;" /> <button type="button" id="upload button" onclick="uploadFiles('{{ current_dir }}')" class="btn upload"> Tải lên </button> </form> </div> <! Dropdown với biểu tượng ba gạch > <div class="dropdown"> <button class="dropbtn"> <span class="material icons">menu</span> <! Biểu tượng ba gạch > </button> <! Nội dung dropdown > <div class="dropdown content"> <a href="/logout"><span class="material icons">logout</span> Đăng xuất</a> <! Thêm phần tạo thư mục mới vào dropdown > <a href="javascript:void(0)" onclick="toggleCreateDirectoryForm()"><span class="material icons">create_new_folder</span> Tạo thư mục mới</a> <! Form tạo thư mục mới, ẩn mặc định > <div id="directoryInputContainer" style="display: none; padding: 10px;"> <input type="text" id="directoryName" placeholder="Nhập tên thư mục mới" /> <button id="createDirectoryBtn" onclick="createNewDirectory()">Tạo Thư Mục Mới</button> <input type="hidden" id="currentPath" value="a" /> <div id="directoryMessage" style="display: none;"></div> </div> </div> </div> </div> <script> // Hàm hiển thị/ẩn form tạo thư mục mới khi click vào "Tạo thư mục mới" function toggleCreateDirectoryForm() { const form = document.getElementById('directoryInputContainer'); form.style.display = form.style.display === 'none' ? 'block' : 'none'; } // Tạo thư mục mới document.getElementById('createDirectoryBtn').addEventListener('click', function () { const directoryName = document.getElementById('directoryName').value.trim(); const directoryMessage = document.getElementById('directoryMessage'); if (!directoryName) { alert('Vui lòng nhập tên thư mục.'); return; } // Lấy đường dẫn hiện tại từ URL const currentPath = window.location.pathname.replace('/view_dir/', ''); // Chuẩn bị dữ liệu gửi lên server const formData = new FormData(); formData.append('directory_name', directoryName); formData.append('current_path', currentPath); fetch('/create_directory', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { directoryMessage.style.display = 'block'; if (data.message === 'Thư mục đã được tạo thành công.') { directoryMessage.style.color = 'green'; directoryMessage.innerHTML = data.message; // Reset input field document.getElementById('directoryName').value = ''; // Reload trang để phản ánh thư mục mới location.reload(); } else { directoryMessage.style.color = 'red'; directoryMessage.innerHTML = data.message; setTimeout(() => { window.location.reload(); }, 1000); // 1000ms = 1 giây } }) .catch(error => { directoryMessage.style.display = 'block'; directoryMessage.style.color = 'red'; directoryMessage.innerHTML = 'Có lỗi xảy ra khi tạo thư mục.'; }); }); // Hàm để điều hướng vào thư mục con function navigateToSubDir(dirName) { // Lấy đường dẫn hiện tại và thêm thư mục con const currentPath = window.location.pathname.replace('/view_dir/', ''); const newPath = `${currentPath}/${dirName}`; // Cập nhật URL mà không reload trang history.pushState({}, '', `/view_dir/${newPath}`); // Cập nhật danh sách file (nếu có) updateFileList(); return false; // Ngăn hành động mặc định của liên kết } </script> <div class="breadcrumb"> <a href="{{ url_for('index') }}">>\uThư mục gốc</a> {% for crumb in breadcrumbs %} / <a href="{{ url_for('view_dir', subdir=crumb.path) }}">{{ crumb.name }}</a> {% endfor %} </div> <div class="file manager"> {% for item in files_and_dirs %} <div class="file item"> {% if item.is_dir %} <a href="{{ url_for('view_dir', subdir=current_dir + '/' + item.name) }}"> <img src="/static/icons/folder_icon.png" alt="Folder Icon" /> </a> {% else %} <img src="{{ url_for('get_thumbnail', filename=item.name) }}" alt="{{ item.name }}" /> {% endif %} <p class="file name">{{ item.name }}</p> <div class="file actions"> <button onclick="downloadFile('{{ item.name | escape }}')"> <span class="material icons">download</span> </button> <button class="btn action" onclick="deleteItem('{{ item.name }}', '{{ current_dir }}')"> <span class="material icons">delete</span> </button> </div> </div> {% endfor %} </div> </div> </body> <script> function downloadFile(filename) { const currentPath = window.location.pathname.replace('/view_dir/', ''); const encodedFilename = encodeURIComponent(currentPath + '/' + filename); const url = `/download/${encodedFilename}`; console.log("Đường dẫn tải file:", url); // In URL để kiểm tra window.location.href = url; } </script> </html>
