greg/rss-reader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add feed

Browse Source
This commit is contained in:
Greg Shuflin
2025-02-02 01:23:21 -08:00
parent 5db2cb4ead
commit 50d1171f19
2 changed files with 189 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
templates/index.html.tera
View File

@@ -11,7 +11,7 @@
color: white;
padding: 0.5rem 1rem;
display: flex;
justify-content: flex-end;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
@@ -20,6 +20,12 @@
z-index: 1000;
}
.top-bar-buttons {
display: flex;
gap: 1rem;
align-items: center;
}
.logout-button {
background-color: #dc3545;
color: white;
@@ -34,6 +40,110 @@
background-color: #c82333;
}
.add-feed-button {
background-color: #28a745;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
.add-feed-button:hover {
background-color: #218838;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background-color: white;
padding: 2rem;
border-radius: 8px;
width: 100%;
max-width: 500px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.modal-header {
margin-bottom: 1.5rem;
}
.modal-header h2 {
margin: 0;
color: #333;
}
.modal-body {
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: #333;
}
.form-group input {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
.modal-footer button {
padding: 0.5rem 1rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 0.9rem;
}
.btn-primary {
background-color: #007bff;
color: white;
}
.btn-primary:hover {
background-color: #0056b3;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #545b62;
}
/* Adjust main content to account for top bar */
.with-sidebar {
padding-top: 3rem;
@@ -46,8 +156,34 @@
</head>
<body class="with-sidebar">
<div class="top-bar">
<div class="top-bar-buttons">
<button class="add-feed-button" id="addFeedButton">Add Feed</button>
</div>
<button class="logout-button" id="logoutButton">Logout</button>
</div>
<!-- Add Feed Modal -->
<div class="modal" id="addFeedModal">
<div class="modal-content">
<div class="modal-header">
<h2>Add RSS Feed</h2>
</div>
<div class="modal-body">
<form id="addFeedForm">
<div class="form-group">
<label for="feedUrl">Feed URL</label>
<input type="url" id="feedUrl" name="feedUrl" required
placeholder="https://example.com/feed.xml">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn-secondary" id="cancelAddFeed">Cancel</button>
<button type="button" class="btn-primary" id="confirmAddFeed">OK</button>
</div>
</div>
</div>
<div class="sidebar">
<h2>Navigation</h2>
<ul>
@@ -61,20 +197,6 @@
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
document.getElementById('logoutButton').addEventListener('click', async () => {
try {
const response = await fetch('/logout', {
method: 'POST',
});
if (response.ok) {
window.location.href = '/login';
}
} catch (error) {
console.error('Logout failed:', error);
}
});
</script>
<script src="/static/js/app.js"></script>
</body>
</html>