Initial commit: BalanceBoard - Reddit-style content aggregator
- Flask-based web application with PostgreSQL - User authentication and session management - Content moderation and filtering - Docker deployment with docker-compose - Admin interface for content management 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
382
templates/settings.html
Normal file
382
templates/settings.html
Normal file
@@ -0,0 +1,382 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Settings - BalanceBoard{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.settings-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.settings-header h1 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.settings-header p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.settings-sidebar {
|
||||
background: var(--surface-color);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
height: fit-content;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.settings-nav {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.settings-nav li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.settings-nav a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settings-nav a:hover {
|
||||
background: var(--surface-elevation-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.settings-nav a.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.settings-nav .nav-icon {
|
||||
margin-right: 12px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
background: var(--surface-color);
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.settings-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-section h2 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.settings-section p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.setting-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.setting-info h3 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.setting-info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.setting-value {
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-settings {
|
||||
padding: 8px 16px;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-settings:hover {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--surface-elevation-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--surface-elevation-2);
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: var(--surface-elevation-1);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-info h3 {
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.current-filter {
|
||||
padding: 12px 16px;
|
||||
background: var(--surface-elevation-1);
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.current-filter strong {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.settings-sidebar {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="settings-container">
|
||||
<div class="settings-header">
|
||||
<h1>Settings</h1>
|
||||
<p>Manage your BalanceBoard preferences and account settings</p>
|
||||
</div>
|
||||
|
||||
<div class="settings-grid">
|
||||
<aside class="settings-sidebar">
|
||||
<ul class="settings-nav">
|
||||
<li>
|
||||
<a href="{{ url_for('settings') }}" class="active">
|
||||
<span class="nav-icon">⚙️</span>
|
||||
<span>Overview</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('settings_profile') }}">
|
||||
<span class="nav-icon">👤</span>
|
||||
<span>Profile</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('settings_communities') }}">
|
||||
<span class="nav-icon">🌐</span>
|
||||
<span>Communities</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('settings_filters') }}">
|
||||
<span class="nav-icon">🔍</span>
|
||||
<span>Filters</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url_for('settings_experience') }}">
|
||||
<span class="nav-icon">🎯</span>
|
||||
<span>Experience</span>
|
||||
</a>
|
||||
</li>
|
||||
{% if current_user.is_admin %}
|
||||
<li>
|
||||
<a href="{{ url_for('admin_panel') }}">
|
||||
<span class="nav-icon">🛡️</span>
|
||||
<span>Admin Panel</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<main class="settings-content">
|
||||
<div class="user-profile">
|
||||
<div class="user-avatar">
|
||||
{% if user.profile_picture_url %}
|
||||
<img src="{{ user.profile_picture_url }}" alt="{{ user.username }}">
|
||||
{% else %}
|
||||
{{ user.username[0]|upper }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<h3>{{ user.username }}</h3>
|
||||
<p>{{ user.email }}</p>
|
||||
{% if user.is_admin %}
|
||||
<p style="color: var(--primary-color); font-weight: 500;">🛡️ Administrator</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h2>Profile Settings</h2>
|
||||
<p>Manage your account information and profile picture</p>
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Profile Information</h3>
|
||||
<p>Update your username, email, and profile picture</p>
|
||||
</div>
|
||||
<a href="{{ url_for('settings_profile') }}" class="btn-settings">Edit Profile</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h2>Content Preferences</h2>
|
||||
<p>Customize your content sources and filtering preferences</p>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Communities</h3>
|
||||
<p>Select which subreddits, websites, and sources to follow</p>
|
||||
</div>
|
||||
<a href="{{ url_for('settings_communities') }}" class="btn-settings">Manage</a>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Content Filters</h3>
|
||||
<p>Configure content filtering and safety preferences</p>
|
||||
</div>
|
||||
<a href="{{ url_for('settings_filters') }}" class="btn-settings">Configure</a>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Experience Settings</h3>
|
||||
<p>Manage potentially addictive features like infinite scroll</p>
|
||||
</div>
|
||||
<a href="{{ url_for('settings_experience') }}" class="btn-settings">Configure</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h2>Current Configuration</h2>
|
||||
<p>Review your current settings and preferences</p>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Active Filter</h3>
|
||||
<p>The content filter currently applied to your feed</p>
|
||||
</div>
|
||||
<div class="current-filter">
|
||||
<strong>{{ filter_sets[user_settings.get('filter_set', 'no_filter')].description or 'No Filter' }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Selected Communities</h3>
|
||||
<p>Communities and sources you're currently following</p>
|
||||
</div>
|
||||
<div class="setting-value">
|
||||
{{ user_settings.get('communities', [])|length or 0 }} communities selected
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-section">
|
||||
<h2>Account Actions</h2>
|
||||
<p>Manage your account access and security</p>
|
||||
|
||||
<div class="setting-item">
|
||||
<div class="setting-info">
|
||||
<h3>Sign Out</h3>
|
||||
<p>Sign out of your current session</p>
|
||||
</div>
|
||||
<a href="{{ url_for('logout') }}" class="btn-settings btn-secondary">Sign Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user