Hugging Face's logo

Spaces:
parthmax
/
quickdrop
Sleeping

App Files Community
parthmax commited on
Commit
c690323
·
verified ·
1 Parent(s): c43f678

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +184 -0
templates/index.html ADDED
@@ -0,0 +1,184 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <title>QuickDrop</title>
7
+
8
+ <style>
9
+ body {
10
+ font-family: 'Segoe UI', sans-serif;
11
+ background: linear-gradient(135deg, #020617, #0f172a);
12
+ color: white;
13
+ text-align: center;
14
+ padding: 40px;
15
+ }
16
+
17
+ h1 { font-size: 34px; }
18
+
19
+ .drop-area {
20
+ border: 2px dashed #3b82f6;
21
+ padding: 50px;
22
+ border-radius: 18px;
23
+ margin-top: 20px;
24
+ cursor: pointer;
25
+ }
26
+
27
+ .drop-area.hover {
28
+ background: #1e293b;
29
+ }
30
+
31
+ input { display: none; }
32
+
33
+ .progress {
34
+ margin-top: 20px;
35
+ background: #1e293b;
36
+ border-radius: 10px;
37
+ }
38
+
39
+ .progress-bar {
40
+ height: 10px;
41
+ width: 0%;
42
+ background: #22c55e;
43
+ }
44
+
45
+ .preview { margin-top: 20px; }
46
+
47
+ button {
48
+ margin-top: 10px;
49
+ padding: 10px 20px;
50
+ background: #3b82f6;
51
+ border: none;
52
+ border-radius: 8px;
53
+ color: white;
54
+ cursor: pointer;
55
+ }
56
+
57
+ .copy-btn { background: #22c55e; }
58
+
59
+ a { color: #38bdf8; }
60
+ </style>
61
+
62
+ </head>
63
+
64
+ <body>
65
+
66
+ <h1>⚡ QuickDrop</h1>
67
+ <p>Upload & Share Files Instantly</p>
68
+
69
+ <div class="drop-area" id="dropArea">
70
+ Click or Drag file here
71
+ </div>
72
+
73
+ <input type="file" id="fileInput">
74
+
75
+ <div class="progress">
76
+ <div class="progress-bar" id="progressBar"></div>
77
+ </div>
78
+
79
+ <div id="progressText"></div>
80
+
81
+ <div class="preview" id="preview"></div>
82
+
83
+ <h3>🔗 Share Link</h3>
84
+ <p id="link">No upload yet</p>
85
+
86
+ <script>
87
+
88
+ let file;
89
+
90
+ const dropArea = document.getElementById("dropArea");
91
+ const fileInput = document.getElementById("fileInput");
92
+
93
+ // Click
94
+ dropArea.onclick = () => fileInput.click();
95
+
96
+ // Drag
97
+ dropArea.addEventListener("dragover", e => {
98
+ e.preventDefault();
99
+ dropArea.classList.add("hover");
100
+ });
101
+
102
+ dropArea.addEventListener("dragleave", () => {
103
+ dropArea.classList.remove("hover");
104
+ });
105
+
106
+ dropArea.addEventListener("drop", e => {
107
+ e.preventDefault();
108
+ dropArea.classList.remove("hover");
109
+ file = e.dataTransfer.files[0];
110
+ preview(file);
111
+ });
112
+
113
+ fileInput.addEventListener("change", e => {
114
+ file = e.target.files[0];
115
+ preview(file);
116
+ });
117
+
118
+ // Preview
119
+ function preview(f) {
120
+ const preview = document.getElementById("preview");
121
+ preview.innerHTML = "";
122
+
123
+ if (!f) return;
124
+
125
+ const size = (f.size / 1024).toFixed(1);
126
+
127
+ preview.innerHTML = `<p>${f.name} (${size} KB)</p>`;
128
+
129
+ if (f.type.startsWith("image")) {
130
+ preview.innerHTML += `<img src="${URL.createObjectURL(f)}" width="200">`;
131
+ }
132
+
133
+ const btn = document.createElement("button");
134
+ btn.innerText = "Upload";
135
+ btn.onclick = upload;
136
+ preview.appendChild(btn);
137
+ }
138
+
139
+ // Upload
140
+ function upload() {
141
+ if (!file) return alert("Select file");
142
+
143
+ const xhr = new XMLHttpRequest();
144
+ const bar = document.getElementById("progressBar");
145
+ const text = document.getElementById("progressText");
146
+
147
+ xhr.upload.onprogress = e => {
148
+ let percent = Math.round((e.loaded / e.total) * 100);
149
+ bar.style.width = percent + "%";
150
+ text.innerText = percent + "% uploaded";
151
+ };
152
+
153
+ xhr.onload = () => {
154
+ if (xhr.status === 200) {
155
+ const data = JSON.parse(xhr.responseText);
156
+
157
+ const url = data.link;
158
+
159
+ document.getElementById("link").innerHTML = `
160
+ <a href="${url}" target="_blank">${url}</a><br>
161
+ <button class="copy-btn" onclick="copy('${url}')">Copy</button>
162
+ `;
163
+ } else {
164
+ document.getElementById("link").innerText = "Upload failed ❌";
165
+ }
166
+ };
167
+
168
+ xhr.open("POST", "/upload");
169
+
170
+ const formData = new FormData();
171
+ formData.append("file", file);
172
+
173
+ xhr.send(formData);
174
+ }
175
+
176
+ // Copy
177
+ function copy(url) {
178
+ navigator.clipboard.writeText(url);
179
+ }
180
+
181
+ </script>
182
+
183
+ </body>
184
+ </html>