Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -17,25 +17,32 @@ HTML_CONTENT = """
|
|
17 |
<style>
|
18 |
body {
|
19 |
font-family: 'Poppins', sans-serif;
|
20 |
-
background: #
|
21 |
height: 100vh;
|
22 |
margin: 0;
|
23 |
display: flex;
|
24 |
justify-content: center;
|
25 |
align-items: center;
|
26 |
-
color: #
|
27 |
}
|
28 |
.container {
|
29 |
-
background: rgba(255, 255, 255, 0.
|
30 |
padding: 2.5rem;
|
31 |
-
border-radius:
|
32 |
-
box-shadow: 0
|
|
|
|
|
33 |
text-align: center;
|
34 |
max-width: 450px;
|
35 |
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
36 |
}
|
37 |
h1 {
|
38 |
-
color: #
|
39 |
margin-bottom: 1.5rem;
|
40 |
font-weight: 600;
|
41 |
}
|
@@ -43,8 +50,8 @@ HTML_CONTENT = """
|
|
43 |
display: none;
|
44 |
}
|
45 |
.btn {
|
46 |
-
background-color: #
|
47 |
-
color:
|
48 |
padding: 12px 24px;
|
49 |
border-radius: 5px;
|
50 |
cursor: pointer;
|
@@ -54,18 +61,50 @@ HTML_CONTENT = """
|
|
54 |
border: none;
|
55 |
font-size: 1rem;
|
56 |
margin: 0.5rem;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
57 |
}
|
58 |
.btn:hover {
|
59 |
-
background-color: #
|
60 |
}
|
61 |
.btn:disabled {
|
62 |
-
background-color: #
|
63 |
cursor: not-allowed;
|
64 |
}
|
65 |
.file-name {
|
66 |
margin-top: 1rem;
|
67 |
font-size: 0.9rem;
|
68 |
-
color: #
|
69 |
}
|
70 |
.progress-container {
|
71 |
margin-top: 1.5rem;
|
@@ -74,22 +113,22 @@ HTML_CONTENT = """
|
|
74 |
.progress-bar {
|
75 |
width: 100%;
|
76 |
height: 10px;
|
77 |
-
background-color: #
|
78 |
border-radius: 5px;
|
79 |
overflow: hidden;
|
80 |
}
|
81 |
.progress {
|
82 |
width: 0%;
|
83 |
height: 100%;
|
84 |
-
background-color: #
|
85 |
-
transition: width 0.
|
86 |
}
|
87 |
.loading-spinner {
|
88 |
display: none;
|
89 |
width: 40px;
|
90 |
height: 40px;
|
91 |
-
border: 4px solid #
|
92 |
-
border-top: 4px solid #
|
93 |
border-radius: 50%;
|
94 |
animation: spin 1s linear infinite;
|
95 |
margin: 20px auto;
|
@@ -103,19 +142,19 @@ HTML_CONTENT = """
|
|
103 |
margin-top: 1.5rem;
|
104 |
}
|
105 |
.result-link {
|
106 |
-
color: #
|
107 |
text-decoration: none;
|
108 |
font-weight: 600;
|
109 |
transition: all 0.3s ease;
|
110 |
margin-right: 10px;
|
111 |
}
|
112 |
.result-link:hover {
|
113 |
-
color: #
|
114 |
text-decoration: underline;
|
115 |
}
|
116 |
.copy-btn {
|
117 |
-
background-color: #
|
118 |
-
color: #
|
119 |
border: none;
|
120 |
padding: 5px 10px;
|
121 |
border-radius: 5px;
|
@@ -123,7 +162,7 @@ HTML_CONTENT = """
|
|
123 |
transition: all 0.3s ease;
|
124 |
}
|
125 |
.copy-btn:hover {
|
126 |
-
background-color: #
|
127 |
}
|
128 |
</style>
|
129 |
</head>
|
@@ -198,11 +237,13 @@ HTML_CONTENT = """
|
|
198 |
} else {
|
199 |
alert('Upload failed: ' + xhr.statusText);
|
200 |
}
|
|
|
201 |
};
|
202 |
xhr.onerror = function() {
|
203 |
loadingSpinner.style.display = 'none';
|
204 |
uploadBtn.disabled = false;
|
205 |
alert('Upload failed: Network error');
|
|
|
206 |
};
|
207 |
xhr.send(formData);
|
208 |
}
|
@@ -214,6 +255,14 @@ HTML_CONTENT = """
|
|
214 |
}
|
215 |
}
|
216 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
217 |
copyBtn.addEventListener('click', () => {
|
218 |
navigator.clipboard.writeText(resultLink.href).then(() => {
|
219 |
alert('Link copied to clipboard!');
|
|
|
17 |
<style>
|
18 |
body {
|
19 |
font-family: 'Poppins', sans-serif;
|
20 |
+
background: #121212;
|
21 |
height: 100vh;
|
22 |
margin: 0;
|
23 |
display: flex;
|
24 |
justify-content: center;
|
25 |
align-items: center;
|
26 |
+
color: #e0e0e0;
|
27 |
}
|
28 |
.container {
|
29 |
+
background: rgba(255, 255, 255, 0.1);
|
30 |
padding: 2.5rem;
|
31 |
+
border-radius: 15px;
|
32 |
+
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
33 |
+
backdrop-filter: blur(4px);
|
34 |
+
border: 1px solid rgba(255, 255, 255, 0.18);
|
35 |
text-align: center;
|
36 |
max-width: 450px;
|
37 |
width: 100%;
|
38 |
+
transition: all 0.3s ease;
|
39 |
+
}
|
40 |
+
.container:hover {
|
41 |
+
transform: translateY(-5px);
|
42 |
+
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
|
43 |
}
|
44 |
h1 {
|
45 |
+
color: #00CED1;
|
46 |
margin-bottom: 1.5rem;
|
47 |
font-weight: 600;
|
48 |
}
|
|
|
50 |
display: none;
|
51 |
}
|
52 |
.btn {
|
53 |
+
background-color: #00CED1;
|
54 |
+
color: #121212;
|
55 |
padding: 12px 24px;
|
56 |
border-radius: 5px;
|
57 |
cursor: pointer;
|
|
|
61 |
border: none;
|
62 |
font-size: 1rem;
|
63 |
margin: 0.5rem;
|
64 |
+
position: relative;
|
65 |
+
overflow: hidden;
|
66 |
+
}
|
67 |
+
.btn::after {
|
68 |
+
content: '';
|
69 |
+
position: absolute;
|
70 |
+
top: 50%;
|
71 |
+
left: 50%;
|
72 |
+
width: 5px;
|
73 |
+
height: 5px;
|
74 |
+
background: rgba(255, 255, 255, 0.5);
|
75 |
+
opacity: 0;
|
76 |
+
border-radius: 100%;
|
77 |
+
transform: scale(1, 1) translate(-50%);
|
78 |
+
transform-origin: 50% 50%;
|
79 |
+
}
|
80 |
+
@keyframes ripple {
|
81 |
+
0% {
|
82 |
+
transform: scale(0, 0);
|
83 |
+
opacity: 1;
|
84 |
+
}
|
85 |
+
20% {
|
86 |
+
transform: scale(25, 25);
|
87 |
+
opacity: 1;
|
88 |
+
}
|
89 |
+
100% {
|
90 |
+
opacity: 0;
|
91 |
+
transform: scale(40, 40);
|
92 |
+
}
|
93 |
+
}
|
94 |
+
.btn:focus:not(:active)::after {
|
95 |
+
animation: ripple 1s ease-out;
|
96 |
}
|
97 |
.btn:hover {
|
98 |
+
background-color: #00A9A9;
|
99 |
}
|
100 |
.btn:disabled {
|
101 |
+
background-color: #555;
|
102 |
cursor: not-allowed;
|
103 |
}
|
104 |
.file-name {
|
105 |
margin-top: 1rem;
|
106 |
font-size: 0.9rem;
|
107 |
+
color: #aaa;
|
108 |
}
|
109 |
.progress-container {
|
110 |
margin-top: 1.5rem;
|
|
|
113 |
.progress-bar {
|
114 |
width: 100%;
|
115 |
height: 10px;
|
116 |
+
background-color: #333;
|
117 |
border-radius: 5px;
|
118 |
overflow: hidden;
|
119 |
}
|
120 |
.progress {
|
121 |
width: 0%;
|
122 |
height: 100%;
|
123 |
+
background-color: #00CED1;
|
124 |
+
transition: width 0.3s ease;
|
125 |
}
|
126 |
.loading-spinner {
|
127 |
display: none;
|
128 |
width: 40px;
|
129 |
height: 40px;
|
130 |
+
border: 4px solid #333;
|
131 |
+
border-top: 4px solid #00CED1;
|
132 |
border-radius: 50%;
|
133 |
animation: spin 1s linear infinite;
|
134 |
margin: 20px auto;
|
|
|
142 |
margin-top: 1.5rem;
|
143 |
}
|
144 |
.result-link {
|
145 |
+
color: #00CED1;
|
146 |
text-decoration: none;
|
147 |
font-weight: 600;
|
148 |
transition: all 0.3s ease;
|
149 |
margin-right: 10px;
|
150 |
}
|
151 |
.result-link:hover {
|
152 |
+
color: #00A9A9;
|
153 |
text-decoration: underline;
|
154 |
}
|
155 |
.copy-btn {
|
156 |
+
background-color: #333;
|
157 |
+
color: #e0e0e0;
|
158 |
border: none;
|
159 |
padding: 5px 10px;
|
160 |
border-radius: 5px;
|
|
|
162 |
transition: all 0.3s ease;
|
163 |
}
|
164 |
.copy-btn:hover {
|
165 |
+
background-color: #444;
|
166 |
}
|
167 |
</style>
|
168 |
</head>
|
|
|
237 |
} else {
|
238 |
alert('Upload failed: ' + xhr.statusText);
|
239 |
}
|
240 |
+
resetUploadState();
|
241 |
};
|
242 |
xhr.onerror = function() {
|
243 |
loadingSpinner.style.display = 'none';
|
244 |
uploadBtn.disabled = false;
|
245 |
alert('Upload failed: Network error');
|
246 |
+
resetUploadState();
|
247 |
};
|
248 |
xhr.send(formData);
|
249 |
}
|
|
|
255 |
}
|
256 |
}
|
257 |
|
258 |
+
function resetUploadState() {
|
259 |
+
fileInput.value = '';
|
260 |
+
fileName.textContent = '';
|
261 |
+
uploadBtn.style.display = 'none';
|
262 |
+
progressContainer.style.display = 'none';
|
263 |
+
progress.style.width = '0%';
|
264 |
+
}
|
265 |
+
|
266 |
copyBtn.addEventListener('click', () => {
|
267 |
navigator.clipboard.writeText(resultLink.href).then(() => {
|
268 |
alert('Link copied to clipboard!');
|