chelsea
cb894b2159
- Docker deployment ready
- Content aggregation and filtering
- User authentication
- Polling service for updates
🤖 Generated with Claude Code
358 lines
11 KiB
HTML
358 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BalanceBoard - Content Feed</title>
|
|
{% for css_path in theme.css_dependencies %}
|
|
<link rel="stylesheet" href="{{ css_path }}">
|
|
{% endfor %}
|
|
<style>
|
|
/* Enhanced Navigation Styles */
|
|
.nav-top {
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 0.5rem 0;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.nav-top-container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.nav-brand-text {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand-balance {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.brand-board {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.nav-user-section {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.nav-user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.nav-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--accent);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.nav-username {
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.hamburger-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.hamburger-toggle {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.hamburger-toggle:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.hamburger-line {
|
|
width: 20px;
|
|
height: 2px;
|
|
background: var(--text-primary);
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.hamburger-dropdown {
|
|
position: absolute;
|
|
top: 100%;
|
|
right: 0;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
min-width: 200px;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
.hamburger-dropdown.show {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-item {
|
|
display: block;
|
|
padding: 0.75rem 1rem;
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
transition: background-color 0.2s;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.dropdown-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.dropdown-divider {
|
|
height: 1px;
|
|
background: var(--border);
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.nav-login-prompt {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn-nav-login, .btn-nav-signup {
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-nav-login {
|
|
background: var(--surface);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.btn-nav-login:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.btn-nav-signup {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.btn-nav-signup:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.nav-username {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Enhanced Top Navigation -->
|
|
<nav class="nav-top">
|
|
<div class="nav-top-container">
|
|
<a href="/" class="nav-brand">
|
|
<img src="/logo.png" alt="BalanceBoard Logo" class="nav-logo">
|
|
<div class="nav-brand-text">
|
|
<span class="brand-balance">balance</span><span class="brand-board">Board</span>
|
|
</div>
|
|
</a>
|
|
|
|
<div class="nav-user-section">
|
|
<!-- Logged in user state -->
|
|
<div class="nav-user-info" style="display: none;">
|
|
<div class="nav-avatar">JD</div>
|
|
<span class="nav-username">johndoe</span>
|
|
<div class="hamburger-menu">
|
|
<button class="hamburger-toggle" onclick="toggleDropdown()">
|
|
<div class="hamburger-line"></div>
|
|
<div class="hamburger-line"></div>
|
|
<div class="hamburger-line"></div>
|
|
</button>
|
|
<div class="hamburger-dropdown" id="userDropdown">
|
|
<a href="/settings" class="dropdown-item">
|
|
⚙️ Settings
|
|
</a>
|
|
<a href="/settings/profile" class="dropdown-item">
|
|
👤 Profile
|
|
</a>
|
|
<a href="/settings/communities" class="dropdown-item">
|
|
🌐 Communities
|
|
</a>
|
|
<a href="/settings/filters" class="dropdown-item">
|
|
🎛️ Filters
|
|
</a>
|
|
<div class="dropdown-divider"></div>
|
|
<a href="/admin" class="dropdown-item" style="display: none;">
|
|
🛠️ Admin
|
|
</a>
|
|
<div class="dropdown-divider" style="display: none;"></div>
|
|
<a href="/logout" class="dropdown-item">
|
|
🚪 Sign Out
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logged out state -->
|
|
<div class="nav-login-prompt">
|
|
<a href="/login" class="btn-nav-login">Log In</a>
|
|
<a href="/signup" class="btn-nav-signup">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="app-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar">
|
|
<!-- User Card -->
|
|
<div class="sidebar-section user-card">
|
|
<div class="login-prompt">
|
|
<div class="user-avatar">?</div>
|
|
<p>Join BalanceBoard to customize your feed</p>
|
|
<a href="/login" class="btn-login">Log In</a>
|
|
<a href="/signup" class="btn-signup">Sign Up</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<div class="sidebar-section">
|
|
<h3>Navigation</h3>
|
|
<ul class="nav-menu">
|
|
<li><a href="/" class="nav-item active">
|
|
<span class="nav-icon">🏠</span>
|
|
<span>Home</span>
|
|
</a></li>
|
|
<li><a href="#" class="nav-item">
|
|
<span class="nav-icon">🔥</span>
|
|
<span>Popular</span>
|
|
</a></li>
|
|
<li><a href="#" class="nav-item">
|
|
<span class="nav-icon">⭐</span>
|
|
<span>Saved</span>
|
|
</a></li>
|
|
<li><a href="#" class="nav-item">
|
|
<span class="nav-icon">📊</span>
|
|
<span>Analytics</span>
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="sidebar-section">
|
|
<h3>Filter by Platform</h3>
|
|
<div class="filter-tags">
|
|
<a href="#" class="filter-tag active">All</a>
|
|
<a href="#" class="filter-tag">Reddit</a>
|
|
<a href="#" class="filter-tag">HackerNews</a>
|
|
<a href="#" class="filter-tag">Lobsters</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- About -->
|
|
<div class="sidebar-section">
|
|
<h3>About</h3>
|
|
<p style="font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5;">
|
|
BalanceBoard filters and curates content from multiple platforms to help you stay informed.
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<div class="container">
|
|
<header>
|
|
<h1>{{ filterset_name|title or 'All Posts' }}</h1>
|
|
<p class="post-count">{{ posts|length }} posts</p>
|
|
</header>
|
|
<div id="posts-container">
|
|
{% for post in posts %}
|
|
{{ post|safe }}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{% for js_path in theme.js_dependencies %}
|
|
<script src="{{ js_path }}"></script>
|
|
{% endfor %}
|
|
|
|
<script>
|
|
// Dropdown functionality
|
|
function toggleDropdown() {
|
|
const dropdown = document.getElementById('userDropdown');
|
|
dropdown.classList.toggle('show');
|
|
}
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const dropdown = document.getElementById('userDropdown');
|
|
const toggle = document.querySelector('.hamburger-toggle');
|
|
|
|
if (!toggle.contains(event.target) && !dropdown.contains(event.target)) {
|
|
dropdown.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Check user authentication state (this would be dynamic in a real app)
|
|
function checkAuthState() {
|
|
// This would normally check with the server
|
|
// For now, we'll show the logged out state
|
|
document.querySelector('.nav-user-info').style.display = 'none';
|
|
document.querySelector('.nav-login-prompt').style.display = 'flex';
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', checkAuthState);
|
|
</script>
|
|
</body>
|
|
</html>
|