Add themes, static assets, and logo
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
357
themes/vanilla-js/index.html
Normal file
357
themes/vanilla-js/index.html
Normal file
@@ -0,0 +1,357 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user