Hugging Face's logo

Spaces:
didiaodeking
/
diskmaster-explorer
Running

App Files Community
diskmaster-explorer / index.html
didiaodeking's picture
didiaodeking
点击加号后，弹出菜单向右下方弹出
e3b628d verified
raw
history blame contribute delete
18.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DiskMaster Explorer</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Windows-like folder icon */
.folder-icon {
color: #0078d7;
}
/* File icon colors */
.file-icon {
color: #737373;
}
.doc-icon {
color: #2b579a;
}
.img-icon {
color: #d24726;
}
.exe-icon {
color: #68217a;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<!-- Menu Bar -->
<div class="bg-gray-200 border-b border-gray-300 text-sm">
<div class="flex items-center justify-between px-2 h-8">
<div class="relative group">
<button class="px-2 hover:bg-gray-300 rounded">File</button>
<div class="hidden group-hover:block absolute bg-white shadow-lg z-10 w-48">
<button class="block w-full text-left px-4 py-1 hover:bg-blue-100">New Disk</button>
<button class="block w-full text-left px-4 py-1 hover:bg-blue-100">Open Disk</button>
<button class="block w-full text-left px-4 py-1 hover:bg-blue-100">Sign Out</button>
</div>
</div>
<div class="text-sm font-medium">Welcome, Admin</div>
</div>
</div>
<div class="flex h-screen overflow-hidden" style="height: calc(100vh - 2rem)">
<!-- Sidebar - Disk List -->
<div class="w-64 bg-white border-r border-gray-300 flex flex-col">
<div class="p-4 border-b border-gray-300">
<h2 class="text-lg font-semibold">DiskMaster</h2>
</div>
<div class="flex-1 overflow-y-auto">
<div class="p-2">
<div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
<div class="flex items-center">
<i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
<span>Local Disk (C:)</span>
</div>
<div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
<div class="h-full bg-blue-500" style="width: 65%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">82.4 GB / 120 GB</div>
</div>
<div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
<div class="flex items-center">
<i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
<span>Data (D:)</span>
</div>
<div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
<div class="h-full bg-green-500" style="width: 32%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">128 GB / 400 GB</div>
</div>
<div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
<div class="flex items-center">
<i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
<span>Backup (E:)</span>
</div>
<div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
<div class="h-full bg-yellow-500" style="width: 78%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">780 GB / 1 TB</div>
</div>
<div class="px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
<div class="flex items-center">
<i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
<span>External (F:)</span>
</div>
<div class="mt-1 h-1 w-full bg-gray-200 rounded-full overflow-hidden">
<div class="h-full bg-red-500" style="width: 15%"></div>
</div>
<div class="text-xs text-gray-500 mt-1">30 GB / 200 GB</div>
</div>
</div>
</div>
</div>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col overflow-hidden">
<!-- Toolbar -->
<div class="bg-gray-200 p-2 border-b border-gray-300 flex items-center">
<div class="flex space-x-1">
<button class="p-1 hover:bg-gray-300 rounded">
<i data-feather="arrow-left"></i>
</button>
<button class="p-1 hover:bg-gray-300 rounded">
<i data-feather="arrow-right"></i>
</button>
<button class="p-1 hover:bg-gray-300 rounded">
<i data-feather="refresh-cw"></i>
</button>
<div class="relative group">
<button class="p-1 hover:bg-gray-300 rounded">
<i data-feather="plus"></i>
</button>
<div class="hidden group-hover:block absolute bg-white shadow-lg z-10 w-48 left-0 top-full mt-1">
<button id="newFolderBtn" class="block w-full text-left px-4 py-1 hover:bg-blue-100">New Folder</button>
<button id="newFileBtn" class="block w-full text-left px-4 py-1 hover:bg-blue-100">New File</button>
</div>
</div>
</div>
<!-- Address Bar -->
<div class="flex-1 mx-4 bg-white rounded border border-gray-300 px-2 py-1 text-sm">
This PC > Local Disk (C:)
</div>
<!-- Search Box -->
<div class="flex items-center bg-white rounded border border-gray-300 overflow-hidden">
<input type="text" placeholder="Search Local Disk (C:)" class="px-2 py-1 outline-none w-64">
<button class="px-2 py-1 bg-gray-100 hover:bg-gray-200">
<i data-feather="search"></i>
</button>
</div>
</div>
<!-- Main File Browser -->
<div class="flex-1 overflow-auto bg-white" style="height: calc(100% - 8rem)">
<!-- File Grid View -->
<div class="p-4 grid grid-cols-6 gap-4">
<!-- Folders -->
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="folder" class="folder-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">Program Files</span>
</div>
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="folder" class="folder-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">Users</span>
</div>
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="folder" class="folder-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">Windows</span>
</div>
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="folder" class="folder-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">Documents</span>
</div>
<!-- Files -->
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="file-text" class="doc-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">readme.txt</span>
</div>
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="image" class="img-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">wallpaper.jpg</span>
</div>
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="file" class="file-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">notes.txt</span>
</div>
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="box" class="exe-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">setup.exe</span>
</div>
</div>
</div>
<!-- Details Panel -->
<div class="bg-gray-100 border-t border-gray-300 p-4 hidden" id="detailsPanel">
<h3 class="font-semibold mb-2">File Details</h3>
<div class="grid grid-cols-2 gap-2 text-sm">
<div class="text-gray-600">Name:</div>
<div id="detail-name">-</div>
<div class="text-gray-600">Type:</div>
<div id="detail-type">-</div>
<div class="text-gray-600">Size:</div>
<div id="detail-size">-</div>
<div class="text-gray-600">Created:</div>
<div id="detail-created">-</div>
<div class="text-gray-600">Modified:</div>
<div id="detail-modified">-</div>
</div>
</div>
<!-- Status Bar -->
<div class="bg-gray-200 p-1 border-t border-gray-300 text-xs flex justify-between px-2">
<div id="itemCount">12 items</div>
<div>4.2 GB free of 120 GB</div>
</div>
</div>
</div>
<script>
feather.replace();
// New Folder Dialog
const newFolderDialog = `
<div id="newFolderDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white p-4 rounded shadow-lg w-80">
<h3 class="font-semibold mb-4">Create New Folder</h3>
<input type="text" id="folderName" placeholder="Folder name" class="w-full p-2 border rounded mb-4">
<div class="flex justify-end space-x-2">
<button id="cancelFolderBtn" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
<button id="createFolderBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Create</button>
</div>
</div>
</div>
`;
// New File Dialog
const newFileDialog = `
<div id="newFileDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-white p-4 rounded shadow-lg w-80">
<h3 class="font-semibold mb-4">Create New File</h3>
<input type="text" id="fileName" placeholder="File name" class="w-full p-2 border rounded mb-2">
<select id="fileType" class="w-full p-2 border rounded mb-4">
<option value="text">Text File</option>
<option value="image">Image</option>
<option value="document">Document</option>
</select>
<div class="flex justify-end space-x-2">
<button id="cancelFileBtn" class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">Cancel</button>
<button id="createFileBtn" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Create</button>
</div>
</div>
</div>
`;
document.body.insertAdjacentHTML('beforeend', newFolderDialog);
document.body.insertAdjacentHTML('beforeend', newFileDialog);
// Handle new folder creation
document.getElementById('newFolderBtn').addEventListener('click', () => {
document.getElementById('newFolderDialog').classList.remove('hidden');
});
document.getElementById('cancelFolderBtn').addEventListener('click', () => {
document.getElementById('newFolderDialog').classList.add('hidden');
});
document.getElementById('createFolderBtn').addEventListener('click', () => {
const folderName = document.getElementById('folderName').value.trim();
if (folderName) {
const fileGrid = document.querySelector('.grid');
const newFolder = `
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="folder" class="folder-icon w-12 h-12"></i>
<span class="text-sm mt-1 text-center">${folderName}</span>
</div>
`;
fileGrid.insertAdjacentHTML('beforeend', newFolder);
feather.replace();
document.getElementById('newFolderDialog').classList.add('hidden');
document.getElementById('folderName').value = '';
}
});
// Handle new file creation
document.getElementById('newFileBtn').addEventListener('click', () => {
document.getElementById('newFileDialog').classList.remove('hidden');
});
document.getElementById('cancelFileBtn').addEventListener('click', () => {
document.getElementById('newFileDialog').classList.add('hidden');
});
document.getElementById('createFileBtn').addEventListener('click', () => {
const fileName = document.getElementById('fileName').value.trim();
const fileType = document.getElementById('fileType').value;
if (fileName) {
const fileGrid = document.querySelector('.grid');
let iconClass = 'file-icon';
let iconName = 'file';
switch(fileType) {
case 'text':
iconClass = 'doc-icon';
iconName = 'file-text';
break;
case 'image':
iconClass = 'img-icon';
iconName = 'image';
break;
case 'document':
iconClass = 'doc-icon';
iconName = 'file-text';
break;
}
const newFile = `
<div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
<i data-feather="${iconName}" class="${iconClass} w-12 h-12"></i>
<span class="text-sm mt-1 text-center">${fileName}</span>
</div>
`;
fileGrid.insertAdjacentHTML('beforeend', newFile);
feather.replace();
document.getElementById('newFileDialog').classList.add('hidden');
document.getElementById('fileName').value = '';
}
});
// Simulate disk selection
document.querySelectorAll('div.px-2.py-1').forEach(item => {
item.addEventListener('click', function() {
// Remove active class from all
document.querySelectorAll('div.px-2.py-1').forEach(i => {
i.classList.remove('bg-blue-100');
});
// Add to clicked
this.classList.add('bg-blue-100');
// Update address bar and search placeholder
const diskName = this.querySelector('div > span').textContent;
document.querySelector('.address-bar').textContent = `This PC > ${diskName}`;
document.querySelector('input[type="text"]').placeholder = `Search ${diskName}`;
});
});
// File/folder click handler
document.querySelectorAll('.flex.flex-col.items-center').forEach(item => {
item.addEventListener('click', function() {
const panel = document.getElementById('detailsPanel');
panel.classList.remove('hidden');
const name = this.querySelector('span').textContent;
const isFolder = this.querySelector('[data-feather="folder"]') !== null;
document.getElementById('detail-name').textContent = name;
document.getElementById('detail-type').textContent = isFolder ? 'Folder' : 'File';
document.getElementById('detail-size').textContent = isFolder ? '-' : (Math.random() * 10).toFixed(1) + ' MB';
const now = new Date();
document.getElementById('detail-created').textContent = now.toLocaleString();
document.getElementById('detail-modified').textContent = now.toLocaleString();
});
});
// Update item count
function updateItemCount() {
const count = document.querySelectorAll('.flex.flex-col.items-center').length;
document.getElementById('itemCount').textContent = `${count} items`;
}
// Initialize
updateItemCount();
</script>
</body>
</html>