Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DiskClean Pro - Storage Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Dark Mode */ | |
| .dark { | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(17 24 39 / var(--tw-bg-opacity)); | |
| color: rgb(229 231 235 / var(--tw-text-opacity)); | |
| } | |
| .dark .bg-white { | |
| background-color: rgb(31 41 55 / var(--tw-bg-opacity)); | |
| border-color: rgb(55 65 81 / var(--tw-border-opacity)); | |
| } | |
| .dark .text-gray-800 { | |
| color: rgb(229 231 235 / var(--tw-text-opacity)); | |
| } | |
| .dark .text-gray-500 { | |
| color: rgb(156 163 175 / var(--tw-text-opacity)); | |
| } | |
| .dark .bg-gray-100 { | |
| background-color: rgb(55 65 81 / var(--tw-bg-opacity)); | |
| } | |
| /* Neon Night Mode */ | |
| .neon { | |
| --tw-bg-opacity: 1; | |
| background-color: rgb(3 7 18 / var(--tw-bg-opacity)); | |
| color: rgb(229 231 235 / var(--tw-text-opacity)); | |
| } | |
| .neon .bg-white { | |
| background-color: rgb(15 23 42 / var(--tw-bg-opacity)); | |
| border-color: rgb(30 41 59 / var(--tw-border-opacity)); | |
| box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); | |
| } | |
| .neon .text-gray-800 { | |
| color: rgb(219 234 254 / var(--tw-text-opacity)); | |
| } | |
| .neon .text-gray-500 { | |
| color: rgb(148 163 184 / var(--tw-text-opacity)); | |
| } | |
| .neon .bg-gray-100 { | |
| background-color: rgb(30 41 59 / var(--tw-bg-opacity)); | |
| } | |
| .neon .sidebar { | |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); | |
| } | |
| .neon .progress-bar { | |
| box-shadow: 0 0 8px currentColor; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease-in-out; | |
| } | |
| .file-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .disk-icon { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.8; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.8; } | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| position: absolute; | |
| z-index: 10; | |
| height: 100vh; | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0"> | |
| <div class="p-4 flex items-center space-x-3 border-b border-indigo-700"> | |
| <i class="fas fa-hdd text-2xl text-indigo-300"></i> | |
| <h1 class="text-xl font-bold">DiskClean Pro</h1> | |
| </div> | |
| <nav class="p-4"> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase text-indigo-400 mb-3 tracking-wider">Main</h3> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded bg-indigo-700 text-white"> | |
| <i class="fas fa-home"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase text-indigo-400 mb-3 tracking-wider">Tools</h3> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-white"> | |
| <i class="fas fa-broom"></i> | |
| <span>Cleaner</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-white mt-2"> | |
| <i class="fas fa-folder-open"></i> | |
| <span>Organizer</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-indigo-700 text-white mt-2"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <span>Transfer</span> | |
| </a> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xs uppercase text-indigo-400 mb-3 tracking-wider">Storage</h3> | |
| <div class="p-3 bg-indigo-900 rounded mb-2"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Main Drive (C:)</span> | |
| <span>72%</span> | |
| </div> | |
| <div class="w-full bg-indigo-700 rounded-full h-2"> | |
| <div class="bg-red-400 h-2 rounded-full" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-indigo-900 rounded"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>External (E:)</span> | |
| <span>34%</span> | |
| </div> | |
| <div class="w-full bg-indigo-700 rounded-full h-2"> | |
| <div class="bg-blue-400 h-2 rounded-full" style="width: 34%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-2 px-4 rounded flex items-center justify-center space-x-2"> | |
| <i class="fas fa-rocket"></i> | |
| <span>Optimize Now</span> | |
| </button> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center"> | |
| <button id="menu-toggle" class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mode-toggle" class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-moon text-gray-600 dark:text-yellow-300"></i> | |
| </button> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search files..." class="pl-10 pr-4 py-2 border rounded-full text-sm w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 rounded-full hover:bg-gray-100"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| </button> | |
| <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center text-white font-semibold"> | |
| U | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="p-6"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Storage Manager</h2> | |
| <div class="flex space-x-3"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md flex items-center space-x-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Task</span> | |
| </button> | |
| <button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-4 py-2 rounded-md flex items-center space-x-2"> | |
| <i class="fas fa-cog"></i> | |
| <span>Settings</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Storage Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">Main Drive</p> | |
| <h3 class="text-2xl font-bold mt-1">C:</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-red-100 text-red-600"> | |
| <i class="fas fa-hdd"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">Used: 128GB</span> | |
| <span class="text-gray-500">Free: 48GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full progress-bar" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">External Drive</p> | |
| <h3 class="text-2xl font-bold mt-1">E:</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i class="fas fa-usb"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span class="text-gray-500">Used: 340GB</span> | |
| <span class="text-gray-500">Free: 660GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full progress-bar" style="width: 34%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">Junk Files</p> | |
| <h3 class="text-2xl font-bold mt-1">4.2GB</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i class="fas fa-trash"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-white py-2 rounded-md text-sm font-medium"> | |
| Clean Now | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm text-gray-500">Duplicate Files</p> | |
| <h3 class="text-2xl font-bold mt-1">1.8GB</h3> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i class="fas fa-copy"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <button class="w-full bg-purple-500 hover:bg-purple-600 text-white py-2 rounded-md text-sm font-medium"> | |
| Find Duplicates | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- File Transfer Section --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">File Transfer</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm"> | |
| <i class="fas fa-sync-alt mr-1"></i> Refresh | |
| </button> | |
| <button class="px-3 py-1 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 rounded-md text-sm"> | |
| <i class="fas fa-play mr-1"></i> Start All | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Source Drive --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-hdd text-red-500"></i> | |
| <h4 class="font-medium">Main Drive (C:)</h4> | |
| </div> | |
| <div class="text-xs bg-gray-100 px-2 py-1 rounded">Source</div> | |
| </div> | |
| <div class="space-y-3 max-h-96 overflow-y-auto"> | |
| <div class="file-item bg-gray-50 hover:bg-gray-100 p-3 rounded-md border border-gray-200 cursor-pointer transition-all duration-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-folder text-yellow-500"></i> | |
| <div> | |
| <p class="text-sm font-medium">Documents</p> | |
| <p class="text-xs text-gray-500">12.4GB • 1,240 files</p> | |
| </div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="file-item bg-gray-50 hover:bg-gray-100 p-3 rounded-md border border-gray-200 cursor-pointer transition-all duration-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-folder text-yellow-500"></i> | |
| <div> | |
| <p class="text-sm font-medium">Downloads</p> | |
| <p class="text-xs text-gray-500">8.7GB • 320 files</p> | |
| </div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="file-item bg-gray-50 hover:bg-gray-100 p-3 rounded-md border border-gray-200 cursor-pointer transition-all duration-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-file-image text-blue-500"></i> | |
| <div> | |
| <p class="text-sm font-medium">Vacation Photos</p> | |
| <p class="text-xs text-gray-500">4.2GB • 150 files</p> | |
| </div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="file-item bg-gray-50 hover:bg-gray-100 p-3 rounded-md border border-gray-200 cursor-pointer transition-all duration-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-file-video text-purple-500"></i> | |
| <div> | |
| <p class="text-sm font-medium">Home Videos</p> | |
| <p class="text-xs text-gray-500">22.5GB • 18 files</p> | |
| </div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800"> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Destination Drive --> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-usb text-blue-500"></i> | |
| <h4 class="font-medium">External Drive (E:)</h4> | |
| </div> | |
| <div class="text-xs bg-gray-100 px-2 py-1 rounded">Destination</div> | |
| </div> | |
| <div class="space-y-3 max-h-96 overflow-y-auto"> | |
| <div class="file-item bg-gray-50 p-3 rounded-md border border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-folder text-yellow-500"></i> | |
| <div> | |
| <p class="text-sm font-medium">Backup</p> | |
| <p class="text-xs text-gray-500">Empty</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="file-item bg-gray-50 p-3 rounded-md border border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-folder text-yellow-500"></i> | |
| <div> | |
| <p class="text-sm font-medium">Media</p> | |
| <p class="text-xs text-gray-500">120GB • 2,140 files</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="file-item bg-gray-50 p-3 rounded-md border border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-folder text-yellow-500"></i> | |
| <div> | |
| <p class="text-sm font-medium">Archives</p> | |
| <p class="text-xs text-gray-500">45GB • 780 files</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-4 border border-dashed border-gray-300 rounded-lg bg-gray-50 text-center"> | |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> | |
| <p class="text-sm text-gray-500">Drop files here to transfer</p> | |
| <p class="text-xs text-gray-400 mt-1">or select files from the source</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-between items-center"> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-info-circle mr-1"></i> Select files to transfer from source to destination | |
| </div> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium flex items-center space-x-2"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <span>Start Transfer</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold text-gray-800">Recent Activities</h3> | |
| <button class="text-sm text-indigo-600 hover:text-indigo-800"> | |
| View All | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 bg-green-100 text-green-600 rounded-full"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Successfully transferred "Documents" folder</p> | |
| <p class="text-xs text-gray-500">12.4GB • 5 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 bg-blue-100 text-blue-600 rounded-full"> | |
| <i class="fas fa-trash"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Cleaned 2.1GB of junk files</p> | |
| <p class="text-xs text-gray-500">Today, 10:42 AM</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 bg-purple-100 text-purple-600 rounded-full"> | |
| <i class="fas fa-copy"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Found 850MB duplicate files</p> | |
| <p class="text-xs text-gray-500">Yesterday, 4:15 PM</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Toggle mobile menu | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('active'); | |
| }); | |
| // Simulate file transfer progress | |
| function simulateTransfer() { | |
| const progressBars = document.querySelectorAll('.progress-bar'); | |
| progressBars.forEach(bar => { | |
| let width = parseInt(bar.style.width); | |
| const interval = setInterval(() => { | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| bar.classList.remove('bg-red-500', 'bg-blue-500'); | |
| bar.classList.add('bg-green-500'); | |
| } else { | |
| width++; | |
| bar.style.width = width + '%'; | |
| } | |
| }, 50); | |
| }); | |
| } | |
| // Add click event to transfer buttons | |
| const transferButtons = document.querySelectorAll('.file-item button'); | |
| transferButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const fileItem = this.closest('.file-item'); | |
| fileItem.classList.add('bg-indigo-50', 'border-indigo-200'); | |
| this.innerHTML = '<i class="fas fa-check"></i>'; | |
| this.classList.remove('text-indigo-600', 'hover:text-indigo-800'); | |
| this.classList.add('text-green-500'); | |
| // Simulate transfer after 1 second | |
| setTimeout(simulateTransfer, 1000); | |
| }); | |
| }); | |
| // Mode toggle functionality | |
| const modeToggle = document.getElementById('mode-toggle'); | |
| const modes = ['light', 'dark', 'neon']; | |
| let currentMode = 0; | |
| modeToggle.addEventListener('click', function() { | |
| // Remove all mode classes | |
| document.body.classList.remove('dark', 'neon'); | |
| // Cycle through modes | |
| currentMode = (currentMode + 1) % modes.length; | |
| // Apply new mode | |
| if (modes[currentMode] !== 'light') { | |
| document.body.classList.add(modes[currentMode]); | |
| } | |
| // Update icon | |
| const icon = this.querySelector('i'); | |
| if (modes[currentMode] === 'dark') { | |
| icon.classList.replace('fa-moon', 'fa-sun'); | |
| icon.classList.replace('text-gray-600', 'text-yellow-300'); | |
| } else if (modes[currentMode] === 'neon') { | |
| icon.classList.replace('fa-sun', 'fa-lightbulb'); | |
| icon.classList.replace('text-yellow-300', 'text-blue-400'); | |
| } else { | |
| icon.classList.replace('fa-lightbulb', 'fa-moon'); | |
| icon.classList.replace('text-blue-400', 'text-gray-600'); | |
| } | |
| }); | |
| // Start transfer button | |
| const startTransferBtn = document.querySelector('button:contains("Start Transfer")'); | |
| if (startTransferBtn) { | |
| startTransferBtn.addEventListener('click', simulateTransfer); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=NaasirBruce/pchdext-admin" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |