Spaces:
Running
Running
File size: 2,309 Bytes
907b200 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Research News Feed</title>
<style>
body { font-family: Arial; background: #f5f5f5; margin:0; padding:0; }
.news-container { max-width:800px; margin:auto; padding:20px; }
.news-card { background:white; padding:15px; margin-bottom:15px; border-radius:8px; box-shadow:0 2px 5px rgba(0,0,0,0.1); }
.news-card h3 { margin:0 0 8px; }
.news-card p { color:#555; }
.loader { text-align:center; padding:20px; font-size:18px; color:#777; }
</style>
</head>
<body>
<div class="news-container" id="newsContainer"></div>
<div class="loader" id="loader">Loading more research news...</div>
<script>
let page = 1;
let loading = false;
const container = document.getElementById("newsContainer");
const loader = document.getElementById("loader");
const API_URL = "/news";
async function loadNews() {
if (loading) return;
loading = true;
const res = await fetch(`${API_URL}?page=${page}`);
const data = await res.json();
data.data.forEach(news => {
const div = document.createElement("div");
div.className = "news-card";
div.innerHTML = `
<h3>${news.title}</h3>
<p>${news.summary}</p>
<small>${news.source} | ${news.published_at}</small>
`;
container.appendChild(div);
});
loader.style.display = "none";
if (data.meta.has_more) {
page++;
loading = false;
} else {
await refreshNews();
loading = false;
}
}
window.addEventListener("scroll", () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 50) {
loadNews();
}
});
async function refreshNews() {
const res = await fetch("/news/refresh");
const data = await res.json();
page = 1;
container.innerHTML = "";
data.data.forEach(news => {
const div = document.createElement("div");
div.className = "news-card";
div.innerHTML = `
<h3>${news.title}</h3>
<p>${news.summary}</p>
<small>${news.source} | ${news.published_at}</small>
`;
container.appendChild(div);
});
loader.style.display = "none";
}
refreshNews();
</script>
</body>
</html>
|