87 lines
2.6 KiB
HTML
87 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Textbooks</title>
|
|
</head>
|
|
<body>
|
|
|
|
<style>
|
|
body{
|
|
background-image: url("static/background.jpg");
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
a{
|
|
color: white;
|
|
}
|
|
div{
|
|
max-width: 50vw;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
|
|
<h1>Textbook Software</h1>
|
|
<div id="main-container">
|
|
<p>textbooks loading</p>
|
|
</div>
|
|
|
|
<script>
|
|
async function renderData() {
|
|
const container = document.getElementById('main-container');
|
|
container.innerHTML = '<p>Fetching data from API...</p>';
|
|
|
|
const API_URL = 'http://localhost:5000/api/textbooks';
|
|
let items = [];
|
|
|
|
const response = await fetch(API_URL);
|
|
items = await response.json();
|
|
|
|
container.innerHTML = '';
|
|
|
|
if (items.length === 0) {
|
|
container.innerHTML = '<p>No texbooks</p>';
|
|
return;
|
|
}
|
|
|
|
items.forEach((item) => {
|
|
const itemDiv = document.createElement('div');
|
|
|
|
itemDiv.appendChild(document.createElement('hr'));
|
|
|
|
const contentDiv = document.createElement('div');
|
|
|
|
contentDiv.innerHTML = `
|
|
<p>${item.name}</p>
|
|
<p>By ${item.author}</p>
|
|
`;
|
|
|
|
const linkButton = document.createElement('a');
|
|
linkButton.textContent = `[Read ${item.name}]`;
|
|
linkButton.href = `read?filepath=${encodeURIComponent(item.path)}`;
|
|
linkButton.title = `go to ${item.name}`;
|
|
contentDiv.appendChild(linkButton);
|
|
|
|
const notesButton = document.createElement('a');
|
|
notesButton.textContent = `[Notes for ${item.name}]`;
|
|
notesButton.href = `notes?filepath=${encodeURIComponent(item.path)}`;
|
|
notesButton.title = `view notes for ${item.name}`;
|
|
contentDiv.appendChild(notesButton);
|
|
|
|
|
|
itemDiv.appendChild(contentDiv);
|
|
|
|
container.appendChild(itemDiv);
|
|
});
|
|
|
|
container.appendChild(document.createElement('hr'));
|
|
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', renderData);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |