fixed some things and refactored
This commit is contained in:
60
src/static/rss.js
Normal file
60
src/static/rss.js
Normal file
@@ -0,0 +1,60 @@
|
||||
async function loadRSS() {
|
||||
try {
|
||||
const response = await fetch("/rss");
|
||||
const items = await response.json();
|
||||
|
||||
const container = document.getElementById("rss-feed");
|
||||
const showLegacyContainer = document.getElementById("show-legacy-container");
|
||||
const showLegacyBtn = document.getElementById("show-legacy-btn");
|
||||
|
||||
if (!items.length) {
|
||||
container.innerHTML = "<p>No releases found.</p>";
|
||||
return;
|
||||
}
|
||||
|
||||
let html = "<ul class='release-list'>";
|
||||
|
||||
// Show only the first 2 releases initially
|
||||
let visibleItems = 2;
|
||||
let hasMoreItems = items.length > visibleItems;
|
||||
|
||||
items.forEach((item, index) => {
|
||||
const isHidden = index >= visibleItems;
|
||||
html += `
|
||||
<li class="release-item ${isHidden ? 'legacy-release' : ''}"
|
||||
style="${isHidden ? 'display: none;' : ''}">
|
||||
<a href="${item.link}" target="_blank">${item.title}</a>
|
||||
<div class="pub-date">${item.pubDate ? new Date(item.pubDate).toLocaleString() : ""}</div>
|
||||
<div class="author">by ${item.author || "Unknown"}</div>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
html += "</ul>";
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
// Show the "Show Legacy Releases" button if there are more than 2 items
|
||||
if (hasMoreItems) {
|
||||
showLegacyContainer.style.display = 'block';
|
||||
|
||||
let showingLegacy = false;
|
||||
showLegacyBtn.addEventListener('click', function() {
|
||||
showingLegacy = !showingLegacy;
|
||||
|
||||
const legacyItems = container.querySelectorAll('.legacy-release');
|
||||
legacyItems.forEach(item => {
|
||||
item.style.display = showingLegacy ? 'block' : 'none';
|
||||
});
|
||||
|
||||
showLegacyBtn.textContent = showingLegacy ?
|
||||
'Hide Legacy Releases' : 'Show Legacy Releases';
|
||||
});
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error("Failed to load RSS:", err);
|
||||
document.getElementById("rss-feed").innerHTML = "<p>Failed to load feed.</p>";
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", loadRSS);
|
||||
@@ -546,3 +546,74 @@ body {
|
||||
outline: 2px solid #00ff88;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* moved from html */
|
||||
ul.release-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
ul.release-list li {
|
||||
background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
|
||||
padding: 1rem 1.5rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
ul.release-list li:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
ul.release-list a {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
color: #00f683;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.release-list a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.pub-date {
|
||||
font-size: 0.85rem;
|
||||
color: #a0a0a0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 0.75rem;
|
||||
color: #7a7a7a;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.release-content {
|
||||
font-size: 0.9rem;
|
||||
color: #c0c0c0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.laptopimg:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Responsive adjustments for smaller screens */
|
||||
@media (max-width: 480px) {
|
||||
.laptopimg {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure images are responsive and maintain aspect ratio */
|
||||
.laptopimg {
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
@@ -10,8 +10,10 @@
|
||||
<link rel="stylesheet" href="../static/stylesheet.css">
|
||||
<link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png') }}">
|
||||
<script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.7.2/dist/socket.io.min.js"></script>
|
||||
<!-- Everything Locally Hosted ( javascript files for frontend / client encryption )-->
|
||||
<script src="{{ url_for('static', filename='script.js') }}"></script>
|
||||
<scrpt src="{{ url_for('static', filename='frontend.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='frontend.js') }}"></script>
|
||||
<script src="{{ url_for("static", filename="rss.js") }}" async></script>
|
||||
</head>
|
||||
<body style="overflow-y: auto;">
|
||||
<div class="chat-container">
|
||||
@@ -107,116 +109,15 @@
|
||||
<div id="rss-feed" style="padding: 1rem; color: #ccc;">
|
||||
<p>Loading release notes...</p>
|
||||
</div>
|
||||
<div id="show-legacy-container" style="display: none; text-align: center; margin-top: 1rem;">
|
||||
<button id="show-legacy-btn" class="btn" style="font-size: 0.8rem; padding: 0.4rem 0.8rem;">
|
||||
Show Legacy Releases
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script async>
|
||||
async function loadRSS() {
|
||||
try {
|
||||
const response = await fetch("/rss");
|
||||
const items = await response.json();
|
||||
|
||||
const container = document.getElementById("rss-feed");
|
||||
|
||||
if (!items.length) {
|
||||
container.innerHTML = "<p>No releases found.</p>";
|
||||
return;
|
||||
}
|
||||
|
||||
let html = "<ul class='release-list'>";
|
||||
items.forEach(item => {
|
||||
html += `
|
||||
<li>
|
||||
<a href="${item.link}" target="_blank">${item.title}</a>
|
||||
<div class="pub-date">${item.pubDate ? new Date(item.pubDate).toLocaleString() : ""}</div>
|
||||
<div class="author">by ${item.author || "Unknown"}</div>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
html += "</ul>";
|
||||
|
||||
container.innerHTML = html;
|
||||
|
||||
} catch (err) {
|
||||
console.error("Failed to load RSS:", err);
|
||||
document.getElementById("rss-feed").innerHTML = "<p>Failed to load feed.</p>";
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", loadRSS);
|
||||
</script>
|
||||
<style>
|
||||
ul.release-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
ul.release-list li {
|
||||
background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
|
||||
padding: 1rem 1.5rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
ul.release-list li:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
ul.release-list a {
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
font-style: italic;
|
||||
color: #00f683;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.release-list a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.pub-date {
|
||||
font-size: 0.85rem;
|
||||
color: #a0a0a0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 0.75rem;
|
||||
color: #7a7a7a;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.release-content {
|
||||
font-size: 0.9rem;
|
||||
color: #c0c0c0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.laptopimg:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Responsive adjustments for smaller screens */
|
||||
@media (max-width: 480px) {
|
||||
.laptopimg {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure images are responsive and maintain aspect ratio */
|
||||
.laptopimg {
|
||||
max-width: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
<!-- Chat Screen -->
|
||||
|
||||
Reference in New Issue
Block a user