|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>File List</title> |
|
<style> |
|
body, html { |
|
height: 100%; |
|
margin: 0; |
|
} |
|
|
|
.bg { |
|
|
|
position: fixed; |
|
right: 0; |
|
bottom: 0; |
|
min-width: 100%; |
|
min-height: 100%; |
|
z-index: -1; |
|
} |
|
|
|
body { |
|
|
|
color: #fff; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
height: 100vh; |
|
overflow: hidden; |
|
position: relative; |
|
} |
|
a { |
|
color: #FF0000; |
|
font-size: 24px; |
|
text-decoration: none; |
|
transition: transform 0.3s ease-in-out, color 0.3s ease-in-out; |
|
} |
|
a:hover { |
|
color: #FFFFFF; |
|
transform: scale(1.2); |
|
} |
|
ul { |
|
list-style: none; |
|
padding: 0; |
|
text-align: center; |
|
} |
|
div { |
|
text-align: center; |
|
} |
|
h1 { |
|
color: #FF0000; |
|
text-shadow: 2px 2px 4px #000000; |
|
} |
|
#pagination { |
|
margin-top: 20px; |
|
display: flex; |
|
justify-content: center; |
|
} |
|
.page-link { |
|
color: #FFB6C1; |
|
font-size: 24px; |
|
cursor: pointer; |
|
margin: 0 10px; |
|
transition: transform 0.2s ease-in-out; |
|
} |
|
.page-link:hover { |
|
transform: scale(1.2); |
|
color: #FF69B4; |
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
body { |
|
flex-direction: column; |
|
justify-content: space-around; |
|
} |
|
h1 { |
|
font-size: 20px; |
|
} |
|
a { |
|
font-size: 18px; |
|
} |
|
.page-link { |
|
font-size: 18px; |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div> |
|
<h1>Files in Directory</h1> |
|
<ul id="fileList"></ul> |
|
<div id="pagination"></div> |
|
</div> |
|
<video autoplay muted loop class="bg"> |
|
<source src="1.mp4" type="video/mp4"> |
|
Your browser does not support HTML5 video. |
|
</video> |
|
|
|
<script> |
|
const itemsPerPage = 5; |
|
let currentPage = 1; |
|
|
|
fetch('list.yml') |
|
.then(response => response.text()) |
|
.then(data => { |
|
const files = data.split('\n') |
|
.filter(line => line.trim() !== '') |
|
.map(line => line.replace(/^- /, '').trim()); |
|
const totalPages = Math.ceil(files.length / itemsPerPage); |
|
displayFiles(files, currentPage); |
|
|
|
const paginationElement = document.getElementById('pagination'); |
|
paginationElement.innerHTML = ''; |
|
for (let i = 1; i <= totalPages; i++) { |
|
const pageLink = document.createElement('span'); |
|
pageLink.textContent = i; |
|
pageLink.className = 'page-link'; |
|
pageLink.onclick = () => { |
|
currentPage = i; |
|
displayFiles(files, currentPage); |
|
}; |
|
paginationElement.appendChild(pageLink); |
|
} |
|
}) |
|
.catch(error => console.error('Error loading the file list:', error)); |
|
|
|
function displayFiles(files, page) { |
|
const start = (page - 1) * itemsPerPage; |
|
const end = start + itemsPerPage; |
|
const paginatedFiles = files.slice(start, end); |
|
|
|
const listElement = document.getElementById('fileList'); |
|
listElement.innerHTML = ''; |
|
paginatedFiles.forEach(file => { |
|
const listItem = document.createElement('li'); |
|
const link = document.createElement('a'); |
|
link.href = file; |
|
link.textContent = file.replace(/^files\//, ''); |
|
listItem.appendChild(link); |
|
listElement.appendChild(listItem); |
|
}); |
|
} |
|
</script> |
|
</body> |
|
</html> |
|
|