Hugging Face's logo

Spaces:
didiaodeking
/
diskmaster-explorer
Running

App Files Community
didiaodeking commited on
Commit
c9f0362
·
verified ·
1 Parent(s): b6719ad

仿造windows资源管理器布局和样式设计一份适用于Windows PC客户端的虚拟磁盘管理工具UI界面，要求：左边展示多个磁盘列表。右边展示选中磁盘根目录下的文件夹和文件信息，并在右上方提供搜索输入框和按钮。

Browse files
Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +175 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Diskmaster Explorer
3
- emoji: 💻
4
  colorFrom: gray
5
- colorTo: purple
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: DiskMaster Explorer 🚀
 
3
  colorFrom: gray
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,176 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DiskMaster Explorer</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <style>
10
+ /* Custom scrollbar */
11
+ ::-webkit-scrollbar {
12
+ width: 8px;
13
+ height: 8px;
14
+ }
15
+ ::-webkit-scrollbar-track {
16
+ background: #f1f1f1;
17
+ }
18
+ ::-webkit-scrollbar-thumb {
19
+ background: #888;
20
+ border-radius: 4px;
21
+ }
22
+ ::-webkit-scrollbar-thumb:hover {
23
+ background: #555;
24
+ }
25
+
26
+ /* Windows-like folder icon */
27
+ .folder-icon {
28
+ color: #0078d7;
29
+ }
30
+
31
+ /* File icon colors */
32
+ .file-icon {
33
+ color: #737373;
34
+ }
35
+ .doc-icon {
36
+ color: #2b579a;
37
+ }
38
+ .img-icon {
39
+ color: #d24726;
40
+ }
41
+ .exe-icon {
42
+ color: #68217a;
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-100 font-sans">
47
+ <div class="flex h-screen overflow-hidden">
48
+ <!-- Sidebar - Disk List -->
49
+ <div class="w-64 bg-white border-r border-gray-300 flex flex-col">
50
+ <div class="p-4 border-b border-gray-300">
51
+ <h2 class="text-lg font-semibold">DiskMaster</h2>
52
+ </div>
53
+ <div class="flex-1 overflow-y-auto">
54
+ <div class="p-2">
55
+ <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
56
+ <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
57
+ <span>Local Disk (C:)</span>
58
+ </div>
59
+ <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
60
+ <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
61
+ <span>Data (D:)</span>
62
+ </div>
63
+ <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
64
+ <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
65
+ <span>Backup (E:)</span>
66
+ </div>
67
+ <div class="flex items-center px-2 py-1 hover:bg-blue-50 rounded cursor-pointer">
68
+ <i data-feather="hard-drive" class="mr-2 text-blue-500"></i>
69
+ <span>External (F:)</span>
70
+ </div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- Main Content Area -->
76
+ <div class="flex-1 flex flex-col overflow-hidden">
77
+ <!-- Toolbar -->
78
+ <div class="bg-gray-200 p-2 border-b border-gray-300 flex items-center">
79
+ <div class="flex space-x-1">
80
+ <button class="p-1 hover:bg-gray-300 rounded">
81
+ <i data-feather="arrow-left"></i>
82
+ </button>
83
+ <button class="p-1 hover:bg-gray-300 rounded">
84
+ <i data-feather="arrow-right"></i>
85
+ </button>
86
+ <button class="p-1 hover:bg-gray-300 rounded">
87
+ <i data-feather="refresh-cw"></i>
88
+ </button>
89
+ </div>
90
+
91
+ <!-- Address Bar -->
92
+ <div class="flex-1 mx-4 bg-white rounded border border-gray-300 px-2 py-1 text-sm">
93
+ This PC > Local Disk (C:)
94
+ </div>
95
+
96
+ <!-- Search Box -->
97
+ <div class="flex items-center bg-white rounded border border-gray-300 overflow-hidden">
98
+ <input type="text" placeholder="Search Local Disk (C:)" class="px-2 py-1 outline-none w-64">
99
+ <button class="px-2 py-1 bg-gray-100 hover:bg-gray-200">
100
+ <i data-feather="search"></i>
101
+ </button>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Main File Browser -->
106
+ <div class="flex-1 overflow-auto bg-white">
107
+ <!-- File Grid View -->
108
+ <div class="p-4 grid grid-cols-6 gap-4">
109
+ <!-- Folders -->
110
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
111
+ <i data-feather="folder" class="folder-icon w-12 h-12"></i>
112
+ <span class="text-sm mt-1 text-center">Program Files</span>
113
+ </div>
114
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
115
+ <i data-feather="folder" class="folder-icon w-12 h-12"></i>
116
+ <span class="text-sm mt-1 text-center">Users</span>
117
+ </div>
118
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
119
+ <i data-feather="folder" class="folder-icon w-12 h-12"></i>
120
+ <span class="text-sm mt-1 text-center">Windows</span>
121
+ </div>
122
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
123
+ <i data-feather="folder" class="folder-icon w-12 h-12"></i>
124
+ <span class="text-sm mt-1 text-center">Documents</span>
125
+ </div>
126
+
127
+ <!-- Files -->
128
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
129
+ <i data-feather="file-text" class="doc-icon w-12 h-12"></i>
130
+ <span class="text-sm mt-1 text-center">readme.txt</span>
131
+ </div>
132
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
133
+ <i data-feather="image" class="img-icon w-12 h-12"></i>
134
+ <span class="text-sm mt-1 text-center">wallpaper.jpg</span>
135
+ </div>
136
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
137
+ <i data-feather="file" class="file-icon w-12 h-12"></i>
138
+ <span class="text-sm mt-1 text-center">notes.txt</span>
139
+ </div>
140
+ <div class="flex flex-col items-center p-2 hover:bg-blue-50 rounded cursor-pointer">
141
+ <i data-feather="box" class="exe-icon w-12 h-12"></i>
142
+ <span class="text-sm mt-1 text-center">setup.exe</span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Status Bar -->
148
+ <div class="bg-gray-200 p-1 border-t border-gray-300 text-xs flex justify-between px-2">
149
+ <div>12 items</div>
150
+ <div>4.2 GB free of 120 GB</div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+
155
+ <script>
156
+ feather.replace();
157
+
158
+ // Simulate disk selection
159
+ document.querySelectorAll('.flex.items-center.px-2.py-1').forEach(item => {
160
+ item.addEventListener('click', function() {
161
+ // Remove active class from all
162
+ document.querySelectorAll('.flex.items-center.px-2.py-1').forEach(i => {
163
+ i.classList.remove('bg-blue-100');
164
+ });
165
+ // Add to clicked
166
+ this.classList.add('bg-blue-100');
167
+
168
+ // Update address bar and search placeholder
169
+ const diskName = this.querySelector('span').textContent;
170
+ document.querySelector('.address-bar').textContent = `This PC > ${diskName}`;
171
+ document.querySelector('input[type="text"]').placeholder = `Search ${diskName}`;
172
+ });
173
+ });
174
+ </script>
175
+ </body>
176
  </html>