Hugging Face's logo

Spaces:
making-new-thing-testing-pushing-huginface
/
testing-video-ts-1
Running

App Files Community
motoe moto commited on
Commit
27e3b7b
•
1 Parent(s): 6689c46

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +147 -19
index.html CHANGED
@@ -1,19 +1,147 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>File List</title>
7
+ <style>
8
+ body, html {
9
+ height: 100%;
10
+ margin: 0;
11
+ }
12
+
13
+ .bg {
14
+ /* The video background */
15
+ position: fixed;
16
+ right: 0;
17
+ bottom: 0;
18
+ min-width: 100%;
19
+ min-height: 100%;
20
+ z-index: -1; /* Ensure video stays in the background */
21
+ }
22
+
23
+ body {
24
+ /* Styling for content */
25
+ color: #fff;
26
+ display: flex;
27
+ justify-content: center;
28
+ align-items: center; /* Align items to the center */
29
+ height: 100vh;
30
+ overflow: hidden; /* Lock scrolling */
31
+ position: relative;
32
+ }
33
+ a {
34
+ color: #FF0000; /* Brighter red for better visibility */
35
+ font-size: 24px; /* Increased font size for file names */
36
+ text-decoration: none; /* No underline */
37
+ transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; /* Added transform transition */
38
+ }
39
+ a:hover {
40
+ color: #FFFFFF; /* White color on hover */
41
+ transform: scale(1.2); /* Scale up on hover */
42
+ }
43
+ ul {
44
+ list-style: none;
45
+ padding: 0;
46
+ text-align: center; /* Center align the list items */
47
+ }
48
+ div {
49
+ text-align: center; /* Center align the div content */
50
+ }
51
+ h1 {
52
+ color: #FF0000; /* Brighter red consistent with link color */
53
+ text-shadow: 2px 2px 4px #000000; /* Text shadow for better readability */
54
+ }
55
+ #pagination {
56
+ margin-top: 20px;
57
+ display: flex;
58
+ justify-content: center; /* Center pagination */
59
+ }
60
+ .page-link {
61
+ color: #FFB6C1; /* Light pink */
62
+ font-size: 24px; /* Made page number bigger */
63
+ cursor: pointer;
64
+ margin: 0 10px; /* Increase spacing */
65
+ transition: transform 0.2s ease-in-out;
66
+ }
67
+ .page-link:hover {
68
+ transform: scale(1.2); /* Scale up on hover */
69
+ color: #FF69B4; /* Hot pink on hover */
70
+ }
71
+
72
+ /* Responsive adjustments for mobile screens */
73
+ @media (max-width: 768px) {
74
+ body {
75
+ flex-direction: column;
76
+ justify-content: space-around;
77
+ }
78
+ h1 {
79
+ font-size: 20px; /* Smaller font size for smaller screens */
80
+ }
81
+ a {
82
+ font-size: 18px; /* Smaller font size for links on smaller screens */
83
+ }
84
+ .page-link {
85
+ font-size: 18px; /* Smaller font size for pagination on smaller screens */
86
+ }
87
+ }
88
+ </style>
89
+ </head>
90
+ <body>
91
+ <div>
92
+ <h1>Files in Directory</h1>
93
+ <ul id="fileList"></ul>
94
+ <div id="pagination"></div>
95
+ </div>
96
+ <video autoplay muted loop class="bg">
97
+ <source src="1.mp4" type="video/mp4">
98
+ Your browser does not support HTML5 video.
99
+ </video>
100
+
101
+ <script>
102
+ const itemsPerPage = 5; // Number of files to display per page
103
+ let currentPage = 1;
104
+
105
+ fetch('list.yml')
106
+ .then(response => response.text())
107
+ .then(data => {
108
+ const files = data.split('\n')
109
+ .filter(line => line.trim() !== '')
110
+ .map(line => line.replace(/^- /, '').trim());
111
+ const totalPages = Math.ceil(files.length / itemsPerPage);
112
+ displayFiles(files, currentPage);
113
+
114
+ const paginationElement = document.getElementById('pagination');
115
+ paginationElement.innerHTML = ''; // Clear previous pagination links
116
+ for (let i = 1; i <= totalPages; i++) {
117
+ const pageLink = document.createElement('span');
118
+ pageLink.textContent = i;
119
+ pageLink.className = 'page-link';
120
+ pageLink.onclick = () => {
121
+ currentPage = i;
122
+ displayFiles(files, currentPage);
123
+ };
124
+ paginationElement.appendChild(pageLink);
125
+ }
126
+ })
127
+ .catch(error => console.error('Error loading the file list:', error));
128
+
129
+ function displayFiles(files, page) {
130
+ const start = (page - 1) * itemsPerPage;
131
+ const end = start + itemsPerPage;
132
+ const paginatedFiles = files.slice(start, end);
133
+
134
+ const listElement = document.getElementById('fileList');
135
+ listElement.innerHTML = ''; // Clear previous entries
136
+ paginatedFiles.forEach(file => {
137
+ const listItem = document.createElement('li');
138
+ const link = document.createElement('a');
139
+ link.href = file;
140
+ link.textContent = file.replace(/^files\//, ''); // Remove 'files/' from display text
141
+ listItem.appendChild(link);
142
+ listElement.appendChild(listItem);
143
+ });
144
+ }
145
+ </script>
146
+ </body>
147
+ </html>