Hugging Face's logo

Spaces:
kimhyunwoo
/
os
Running

App Files Community
kimhyunwoo commited on
Commit
70ab879
·
verified ·
1 Parent(s): 679e647

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +155 -18
index.html CHANGED
@@ -1,19 +1,156 @@
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="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>MiniOS File Explorer Demo</title>
6
+ <style>
7
+ :root{
8
+ --bg:#1e1e1e;
9
+ --panel:#2d2d2d;
10
+ --accent:#3b82f6;
11
+ --text:#f5f5f5;
12
+ --border:#444;
13
+ }
14
+ *{box-sizing:border-box;font-family:system-ui, sans-serif;}
15
+ body{
16
+ margin:0;
17
+ background:var(--bg);
18
+ color:var(--text);
19
+ height:100vh;
20
+ display:flex;
21
+ align-items:center;
22
+ justify-content:center;
23
+ }
24
+ #desktop{
25
+ width:90vw;
26
+ height:90vh;
27
+ border:1px solid var(--border);
28
+ border-radius:12px;
29
+ background:var(--panel);
30
+ display:flex;
31
+ flex-direction:column;
32
+ }
33
+ #titlebar{
34
+ background:var(--accent);
35
+ padding:8px 12px;
36
+ border-bottom:1px solid var(--border);
37
+ display:flex;
38
+ justify-content:space-between;
39
+ align-items:center;
40
+ user-select:none;
41
+ }
42
+ #titlebar .btns{
43
+ display:flex;
44
+ gap:6px;
45
+ }
46
+ .btn{
47
+ width:12px;height:12px;border-radius:50%;background:var(--panel);border:1px solid var(--border);
48
+ }
49
+ #content{
50
+ flex:1;overflow:auto;padding:16px;
51
+ }
52
+ #actions{
53
+ margin-bottom:12px;display:flex;gap:8px;
54
+ }
55
+ #fileList{
56
+ display:grid;
57
+ grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
58
+ gap:12px;
59
+ }
60
+ .file-card{
61
+ background:var(--bg);
62
+ border:1px solid var(--border);
63
+ border-radius:8px;
64
+ padding:8px;
65
+ overflow:hidden;
66
+ word-break:break-all;
67
+ }
68
+ .file-card img{max-width:100%;height:auto;display:block;margin-bottom:4px;}
69
+ .drop-zone{
70
+ border:2px dashed var(--accent);
71
+ border-radius:8px;
72
+ padding:40px;
73
+ text-align:center;
74
+ color:#aaaaaa;
75
+ transition:background .2s;
76
+ }
77
+ .drop-zone.dragover{background:#333;}
78
+ pre{white-space:pre-wrap;max-height:200px;overflow:auto;background:#111;padding:6px;border-radius:4px;}
79
+ </style>
80
+ </head>
81
+ <body>
82
+ <div id="desktop">
83
+ <div id="titlebar">
84
+ <span>MiniOS File Explorer</span>
85
+ <div class="btns">
86
+ <div class="btn"></div>
87
+ <div class="btn"></div>
88
+ <div class="btn"></div>
89
+ </div>
90
+ </div>
91
+ <div id="content">
92
+ <div id="actions">
93
+ <button id="openBtn">📂 Open File(s)</button>
94
+ <input type="file" id="fileInput" multiple style="display:none">
95
+ </div>
96
+ <div class="drop-zone" id="dropZone">Drag &amp; drop files here</div>
97
+ <h3>Files</h3>
98
+ <div id="fileList"></div>
99
+ </div>
100
+ </div>
101
+
102
+ <script>
103
+ const fileInput = document.getElementById('fileInput');
104
+ const openBtn = document.getElementById('openBtn');
105
+ const fileList = document.getElementById('fileList');
106
+ const dropZone = document.getElementById('dropZone');
107
+
108
+ openBtn.addEventListener('click', ()=> fileInput.click());
109
+ fileInput.addEventListener('change', e=> handleFiles(e.target.files));
110
+
111
+ ['dragenter','dragover'].forEach(evt=>{
112
+ dropZone.addEventListener(evt,e=>{
113
+ e.preventDefault();
114
+ dropZone.classList.add('dragover');
115
+ });
116
+ });
117
+ ['dragleave','drop'].forEach(evt=>{
118
+ dropZone.addEventListener(evt,e=>{
119
+ e.preventDefault();
120
+ dropZone.classList.remove('dragover');
121
+ });
122
+ });
123
+ dropZone.addEventListener('drop', e=>{
124
+ const files=e.dataTransfer.files;
125
+ handleFiles(files);
126
+ });
127
+
128
+ function handleFiles(files){
129
+ Array.from(files).forEach(file=>{
130
+ const card=document.createElement('div');
131
+ card.className='file-card';
132
+ const name=document.createElement('strong');
133
+ name.textContent=file.name;
134
+ card.appendChild(name);
135
+
136
+ if(file.type.startsWith('image/')){
137
+ const img=document.createElement('img');
138
+ img.src=URL.createObjectURL(file);
139
+ card.insertBefore(img,name);
140
+ } else if(file.type.startsWith('text/') || /(csv|log|md|json|xml|yaml|yml|html|css|js)$/i.test(file.name)){
141
+ const pre=document.createElement('pre');
142
+ const reader=new FileReader();
143
+ reader.onload=()=>pre.textContent=reader.result;
144
+ reader.readAsText(file);
145
+ card.appendChild(pre);
146
+ } else {
147
+ const size=document.createElement('div');
148
+ size.textContent=`${(file.size/1024).toFixed(1)} KB`;
149
+ card.appendChild(size);
150
+ }
151
+ fileList.appendChild(card);
152
+ });
153
+ }
154
+ </script>
155
+ </body>
156
  </html>