Hugging Face's logo

Spaces:
ntdservices
/
file-hub
Sleeping

App Files Community
ntdservices commited on
Commit
8ab00b2
·
verified ·
1 Parent(s): d1baa28

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +92 -36
templates/index.html CHANGED
@@ -1,42 +1,98 @@
1
- <!DOCTYPE html>
2
- <html>
3
  <head>
4
- <title>File Manager</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  </head>
 
6
  <body>
7
- <h1>Upload, View, Download, Delete Files</h1>
8
-
9
- <form action="/upload" method="POST" enctype="multipart/form-data">
10
- <input type="file" name="file" multiple accept=".pdf,.txt,.mp3,.wav,.ogg,audio/*">
11
- <button type="submit">Upload</button>
12
- </form>
13
-
14
- <h2>Uploaded Files</h2>
15
- {% if files %}
16
- <ul>
17
- {% for file in files %}
18
- <li>
19
- {{ file }}
20
- {% if file.endswith('.mp3') or file.endswith('.wav') or file.endswith('.ogg') %}
21
- <audio controls style="display:block; margin-top:5px; width:300px;">
22
- <source src="/view/{{ file }}" type="audio/{{ file.rsplit('.', 1)[1] }}">
23
- Your browser does not support the audio element.
24
- </audio>
25
- {% else %}
26
- <a href="/view/{{ file }}" target="_blank">View</a> |
27
- {% endif %}
28
- <a href="/download/{{ file }}">Download</a>
29
- <form action="/delete/{{ file }}" method="POST" style="display:inline;">
30
- <button type="submit">Delete</button>
31
- </form>
32
- </li>
33
- {% endfor %}
34
- </ul>
35
- <form method="POST" action="/clear">
36
- <button type="submit">Clear All</button>
37
  </form>
38
- {% else %}
39
- <p>No files uploaded yet.</p>
40
- {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  </body>
42
  </html>
 
1
+ <!doctype html>
2
+ <html lang="en">
3
  <head>
4
+ <meta charset="utf-8">
5
+ <title>Dashboard – File Hub</title>
6
+ <meta name="viewport" content="width=device-width,initial-scale=1">
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <style>
9
+ :root { --accent-rgb: 25,85,130; }
10
+
11
+ body { background:#f8fafc; }
12
+ .bg-primary { background:rgb(var(--accent-rgb)) !important; }
13
+ .navbar-brand{ font-weight:600; }
14
+
15
+ .card { border:none; border-radius:1rem; }
16
+ .card-title { word-break:break-all; }
17
+
18
+ audio { width:100%; outline:none; border-radius:.5rem; margin-bottom:1rem; }
19
+
20
+ /* compact forms inside button groups */
21
+ .btn-group form { display:inline; margin:0; }
22
+ </style>
23
  </head>
24
+
25
  <body>
26
+
27
+ <!-- top bar -->
28
+ <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
29
+ <div class="container-fluid">
30
+ <span class="navbar-brand">File Hub</span>
31
+ <div class="ms-auto text-white-50">
32
+ signed in as <strong>{{ user }}</strong>
33
+ </div>
34
+ <a href="/logout" class="btn btn-outline-light btn-sm ms-3">Log out</a>
35
+ </div>
36
+ </nav>
37
+
38
+ <div class="container">
39
+
40
+ <!-- upload -->
41
+ <form action="/upload" method="POST" enctype="multipart/form-data" class="mb-4">
42
+ <div class="input-group">
43
+ <input class="form-control" name="file" type="file" multiple
44
+ accept=".pdf,.txt,.mp3,.wav,.ogg,audio/*">
45
+ <button class="btn btn-success">Upload</button>
46
+ </div>
 
 
 
 
 
 
 
 
 
47
  </form>
48
+
49
+ <!-- file grid -->
50
+ {% if files %}
51
+ <div class="row gy-4">
52
+ {% for file in files %}
53
+ <div class="col-12 col-md-6 col-lg-4">
54
+ <div class="card h-100 shadow-sm p-3 d-flex flex-column">
55
+
56
+ <h6 class="card-title">{{ file }}</h6>
57
+
58
+ {% if file.endswith((".mp3",".wav",".ogg")) %}
59
+ <audio controls>
60
+ <source src="/view/{{ file }}" type="audio/{{ file.rsplit('.',1)[1] }}">
61
+ </audio>
62
+ {% endif %}
63
+
64
+ <div class="btn-group mt-auto w-100">
65
+ {% if not file.endswith((".mp3",".wav",".ogg")) %}
66
+ <a class="btn btn-outline-primary" target="_blank" href="/view/{{ file }}">View</a>
67
+ {% endif %}
68
+ <a class="btn btn-outline-secondary" href="/download/{{ file }}">Download</a>
69
+ <form action="/delete/{{ file }}" method="POST">
70
+ <button class="btn btn-outline-danger">Delete</button>
71
+ </form>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ {% endfor %}
76
+ </div>
77
+
78
+ <!-- clear‑all -->
79
+ <form id="clear-form" action="/clear" method="POST" class="text-center my-5">
80
+ <button type="button" class="btn btn-danger px-5" onclick="confirmClear()">Clear everything</button>
81
+ </form>
82
+
83
+ {% else %}
84
+ <p class="lead text-center text-muted">
85
+ No files yet – drag & drop or choose a file above.
86
+ </p>
87
+ {% endif %}
88
+ </div>
89
+
90
+ <script>
91
+ function confirmClear() {
92
+ if (confirm("Delete every file in your space? This cannot be undone.")) {
93
+ document.getElementById('clear-form').submit();
94
+ }
95
+ }
96
+ </script>
97
  </body>
98
  </html>