Hugging Face's logo

Spaces:
coollsd
/
fileuploader
Running

App Files Community
1
coollsd commited on
Commit
740f8e5
·
verified ·
1 Parent(s): 36f6e5c

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +29 -28
app.py CHANGED
@@ -11,20 +11,23 @@ HTML_CONTENT = """
11
  <html lang="en">
12
  <head>
13
  <meta charset="UTF-8">
 
14
  <title>Radd PRO Uploader</title>
15
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
16
  <style>
17
- /* Global Styles */
18
  body {
19
  font-family: 'Poppins', sans-serif;
20
  background-color: #121212;
21
  color: #e0e0e0;
22
  margin: 0;
23
- height: 100vh;
24
- overflow: hidden;
 
 
 
 
25
  }
26
 
27
- /* Moving Grainy Background */
28
  body::before {
29
  content: "";
30
  position: fixed;
@@ -54,9 +57,10 @@ HTML_CONTENT = """
54
 
55
  .container {
56
  position: relative;
 
57
  max-width: 450px;
58
  margin: 0 auto;
59
- padding: 3rem 2rem;
60
  background: rgba(18, 18, 18, 0.9);
61
  backdrop-filter: blur(10px);
62
  border-radius: 15px;
@@ -66,8 +70,8 @@ HTML_CONTENT = """
66
  }
67
 
68
  h1 {
69
- margin-bottom: 2rem;
70
- font-size: 2rem;
71
  color: #ffffff;
72
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
73
  }
@@ -128,7 +132,7 @@ HTML_CONTENT = """
128
  position: relative;
129
  overflow: hidden;
130
  z-index: 1;
131
- margin: 0 2px;
132
  }
133
 
134
  .small-btn:hover {
@@ -283,7 +287,7 @@ HTML_CONTENT = """
283
  margin: 15% auto;
284
  padding: 20px;
285
  border: 1px solid #333;
286
- width: 80%;
287
  max-width: 600px;
288
  border-radius: 10px;
289
  color: #e0e0e0;
@@ -315,48 +319,45 @@ HTML_CONTENT = """
315
 
316
  .embed-container {
317
  display: flex;
318
- align-items: center;
 
319
  margin-top: 15px;
320
  }
321
 
322
  #embedLink {
323
- flex-grow: 1;
324
  padding: 10px;
325
  background-color: #333;
326
  border: 1px solid #555;
327
  color: #e0e0e0;
328
  border-radius: 5px;
329
- margin-right: 10px;
 
330
  }
331
 
332
  @media (max-width: 480px) {
333
  .container {
334
- padding: 2rem 1rem;
335
  }
336
 
337
  h1 {
338
  font-size: 1.5rem;
339
  }
340
 
341
- .embed-container {
342
- flex-direction: column;
 
343
  }
344
 
345
- #embedLink {
346
- margin-bottom: 10px;
347
- margin-right: 0;
348
  }
349
 
350
- .link-buttons {
351
- flex-direction: column;
352
- }
353
-
354
- .small-btn {
355
- margin-left: 0;
356
- margin-top: 5px;
357
  }
358
  }
359
-
360
  </style>
361
  </head>
362
  <body>
@@ -404,7 +405,7 @@ HTML_CONTENT = """
404
  const embedLinkInput = document.getElementById('embedLink');
405
  const uploadBtn = document.getElementById('uploadBtn');
406
 
407
- fileInput.addEventListener('change', handleFileSelect);
408
 
409
  uploadForm.addEventListener('submit', (e) => {
410
  e.preventDefault();
@@ -413,7 +414,7 @@ HTML_CONTENT = """
413
  }
414
  });
415
 
416
- dropZone.addEventListener('dragover', (e) => {
417
  e.preventDefault();
418
  dropZone.classList.add('drag-over');
419
  });
 
11
  <html lang="en">
12
  <head>
13
  <meta charset="UTF-8">
14
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
15
  <title>Radd PRO Uploader</title>
16
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
17
  <style>
 
18
  body {
19
  font-family: 'Poppins', sans-serif;
20
  background-color: #121212;
21
  color: #e0e0e0;
22
  margin: 0;
23
+ min-height: 100vh;
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ padding: 20px;
28
+ box-sizing: border-box;
29
  }
30
 
 
31
  body::before {
32
  content: "";
33
  position: fixed;
 
57
 
58
  .container {
59
  position: relative;
60
+ width: 100%;
61
  max-width: 450px;
62
  margin: 0 auto;
63
+ padding: 2rem;
64
  background: rgba(18, 18, 18, 0.9);
65
  backdrop-filter: blur(10px);
66
  border-radius: 15px;
 
70
  }
71
 
72
  h1 {
73
+ margin-bottom: 1.5rem;
74
+ font-size: 1.8rem;
75
  color: #ffffff;
76
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
77
  }
 
132
  position: relative;
133
  overflow: hidden;
134
  z-index: 1;
135
+ margin: 0.25rem;
136
  }
137
 
138
  .small-btn:hover {
 
287
  margin: 15% auto;
288
  padding: 20px;
289
  border: 1px solid #333;
290
+ width: 90%;
291
  max-width: 600px;
292
  border-radius: 10px;
293
  color: #e0e0e0;
 
319
 
320
  .embed-container {
321
  display: flex;
322
+ flex-direction: column;
323
+ align-items: stretch;
324
  margin-top: 15px;
325
  }
326
 
327
  #embedLink {
328
+ width: 100%;
329
  padding: 10px;
330
  background-color: #333;
331
  border: 1px solid #555;
332
  color: #e0e0e0;
333
  border-radius: 5px;
334
+ margin-bottom: 10px;
335
+ font-size: 0.9rem;
336
  }
337
 
338
  @media (max-width: 480px) {
339
  .container {
340
+ padding: 1.5rem;
341
  }
342
 
343
  h1 {
344
  font-size: 1.5rem;
345
  }
346
 
347
+ .btn, .small-btn {
348
+ font-size: 0.9rem;
349
+ padding: 10px 20px;
350
  }
351
 
352
+ .file-types {
353
+ font-size: 0.7rem;
 
354
  }
355
 
356
+ .modal-content {
357
+ width: 95%;
358
+ margin: 10% auto;
 
 
 
 
359
  }
360
  }
 
361
  </style>
362
  </head>
363
  <body>
 
405
  const embedLinkInput = document.getElementById('embedLink');
406
  const uploadBtn = document.getElementById('uploadBtn');
407
 
408
+ fileInput.addEventListener('change', handleFileSelect);
409
 
410
  uploadForm.addEventListener('submit', (e) => {
411
  e.preventDefault();
 
414
  }
415
  });
416
 
417
+ dropZone.addEventListener('dragover', (e) => {
418
  e.preventDefault();
419
  dropZone.classList.add('drag-over');
420
  });