Guys I made a small navigation page for labs.
create a .html file and paste this in.
save the file inside the "code" folder. You can navigate the labz files with arrow keys on the top or type the page number on the input field and hit the button
I will work on another piece of code that will import the video files inside this to make it even better.
----
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Navigator</title>
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
}
iframe {
width: 100%;
height: 100vh;
border: none;
}
input {
margin-top: 10px;
width: 50px;
text-align: center;
}
.navigation {
display: flex;
gap: 2rem;
}
</style>
</head>
<body>
<div class="navigation">
<p id="currentPageText">Current Page: /Labz(1).html</p>
<button onclick="navigateToPrev()">Previous Page</button>
<button onclick="navigateToNext()">Next Page</button>
<button onclick="goToPage()">Go to page -></button>
<input type="text" id="pageNumberInput" placeholder="Page Number" />
</div>
<iframe id="contentFrame" src=""></iframe>
<script>
let currentPage = 1;
function updateCurrentPageText() {
document.getElementById("currentPageText").innerText =
"Current Page: /Labz(" + currentPage + ").html";
}
function navigateToNext() {
currentPage++;
updateCurrentPageText();
document.getElementById("contentFrame").src = encodeURI(
/Labz (${currentPage}).html
);
}
function navigateToPrev() {
if (currentPage > 1) {
currentPage--;
updateCurrentPageText();
document.getElementById("contentFrame").src = encodeURI(
/Labz (${currentPage}).html
);
}
}
function goToPage() {
const inputElement = document.getElementById("pageNumberInput");
const pageNumber = parseInt(inputElement.value);
if (!isNaN(pageNumber) && pageNumber > 0) {
currentPage = pageNumber;
updateCurrentPageText();
document.getElementById("contentFrame").src = encodeURI(
/Labz (${currentPage}).html
);
}
}
updateCurrentPageText();
</script>
</body>
</html>
---