Jens Luedicke
80edb1be55
This commit introduces a complete dark mode implementation across the entire application, along with various UI consistency improvements and mobile responsiveness fixes. Dark Mode Implementation: - Added new dark-mode.css with comprehensive CSS variable system - Implemented theme switcher with localStorage persistence - Created dark mode color palette optimized for readability - Added smooth transitions between light and dark themes Component-Specific Dark Mode Styling: - Headers: Added glowing gradient effects with animations (pulse, shimmer) - Tables: Unified table styling across all views with proper dark mode support - Forms: Updated all form controls, inputs, and buttons for dark mode - Cards: Fixed white backgrounds in project cards, stat cards, and activity items - Navigation: Enhanced sidebar and mobile navigation dark mode styling - Modals: Added dark mode support for all modal dialogs including task modal - Charts: Updated chart colors for dark mode visibility UI Consistency Improvements: - Standardized container padding (1rem) across all pages - Unified page widths (regular: 1400px, admin: 1600px) - Fixed mobile bottom navigation to only show on devices ≤768px - Resolved page header positioning inconsistencies - Improved text contrast ratios for better accessibility Table Consolidation: - Created tables-consolidated.css for unified table styling - Removed duplicate table styles across components - Standardized table headers, borders, and hover states - Added responsive table behavior for mobile devices Mobile Improvements: - Fixed splash screen viewport coverage - Enhanced mobile menu accessibility - Improved touch targets for mobile interactions - Added proper mobile-specific dark mode adjustments Technical Details: - CSS variables for easy theme customization - Proper specificity management with [data-theme="dark"] selectors - Performance optimized with minimal repaints - Browser compatibility for modern browsers 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1052 lines
31 KiB
HTML
1052 lines
31 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="profile-container">
|
|
<!-- Header Section -->
|
|
<div class="page-header">
|
|
<div class="header-content">
|
|
<div class="header-left">
|
|
<div class="profile-header-info">
|
|
<img src="{{ user.get_avatar_url(80) }}" alt="{{ user.username }}" class="header-avatar">
|
|
<div>
|
|
<h1 class="page-title">{{ user.username }}</h1>
|
|
<p class="page-subtitle">Manage your profile and account settings</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-stats">
|
|
<div class="stat-badge">
|
|
<span class="stat-icon">🏢</span>
|
|
<span class="stat-text">{{ user.company.name if user.company else 'No Company' }}</span>
|
|
</div>
|
|
<div class="stat-badge">
|
|
<span class="stat-icon"><i class="ti ti-users"></i></span>
|
|
<span class="stat-text">{{ user.team.name if user.team else 'No Team' }}</span>
|
|
</div>
|
|
<div class="stat-badge">
|
|
<span class="stat-icon"><i class="ti ti-user"></i></span>
|
|
<span class="stat-text">{{ user.role.value if user.role else 'Team Member' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="flash-messages">
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }}">
|
|
<span class="alert-icon">{% if category == 'success' %}<i class="ti ti-check"></i>{% elif category == 'error' %}<i class="ti ti-x"></i>{% else %}<i class="ti ti-info-circle"></i>{% endif %}</span>
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Main Content Grid -->
|
|
<div class="content-grid">
|
|
<!-- Left Column -->
|
|
<div class="content-column">
|
|
<!-- Profile Picture Card -->
|
|
<div class="card avatar-card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<span class="icon"><i class="ti ti-photo"></i></span>
|
|
Profile Picture
|
|
</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="avatar-showcase">
|
|
<img src="{{ user.get_avatar_url(160) }}" alt="{{ user.username }}" class="profile-avatar" id="avatar-preview">
|
|
</div>
|
|
|
|
<div class="avatar-controls">
|
|
<div class="control-tabs">
|
|
<button class="tab-btn active" data-tab="default">
|
|
<span class="tab-icon"><i class="ti ti-user"></i></span>
|
|
Default
|
|
</button>
|
|
<button class="tab-btn" data-tab="upload">
|
|
<span class="tab-icon"><i class="ti ti-upload"></i></span>
|
|
Upload
|
|
</button>
|
|
<button class="tab-btn" data-tab="url">
|
|
<span class="tab-icon"><i class="ti ti-link"></i></span>
|
|
URL
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Default Avatar Tab -->
|
|
<div class="tab-content active" id="default-tab">
|
|
<div class="info-message">
|
|
<span class="info-icon"><i class="ti ti-bulb"></i></span>
|
|
<p>Your default avatar is automatically generated based on your username.</p>
|
|
</div>
|
|
<button type="button" class="btn btn-outline" onclick="resetAvatar()">
|
|
<span class="icon">↻</span>
|
|
Reset to Default
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Upload Avatar Tab -->
|
|
<div class="tab-content" id="upload-tab">
|
|
<form method="POST" action="{{ url_for('upload_avatar') }}" enctype="multipart/form-data" class="modern-form">
|
|
<div class="upload-area">
|
|
<label for="avatar_file" class="upload-label">
|
|
<div class="upload-icon"><i class="ti ti-folder-upload"></i></div>
|
|
<div class="upload-text">Drop image here or click to browse</div>
|
|
<div class="upload-hint">Max 5MB • JPG, PNG, GIF, WebP</div>
|
|
<div class="file-name" id="file-name"></div>
|
|
</label>
|
|
<input type="file" id="avatar_file" name="avatar_file" class="file-input"
|
|
accept="image/jpeg,image/jpg,image/png,image/gif,image/webp" required>
|
|
</div>
|
|
<div class="upload-preview" id="upload-preview" style="display: none;">
|
|
<img id="upload-preview-img" src="" alt="Preview">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" id="upload-btn" disabled>
|
|
<span class="icon"><i class="ti ti-upload"></i></span>
|
|
Upload Avatar
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- URL Avatar Tab -->
|
|
<div class="tab-content" id="url-tab">
|
|
<form method="POST" action="{{ url_for('update_avatar') }}" class="modern-form">
|
|
<div class="form-group">
|
|
<label for="avatar_url" class="form-label">Image URL</label>
|
|
<input type="url" id="avatar_url" name="avatar_url" class="form-control"
|
|
placeholder="https://example.com/avatar.jpg"
|
|
value="{{ user.avatar_url or '' }}">
|
|
<span class="form-hint">Enter a direct link to an image</span>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="icon"><i class="ti ti-check"></i></span>
|
|
Set Avatar URL
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Information Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<span class="icon"><i class="ti ti-info-circle"></i></span>
|
|
Account Information
|
|
</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<span class="info-label">Username</span>
|
|
<span class="info-value">{{ user.username }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Email</span>
|
|
<span class="info-value">
|
|
{{ user.email if user.email else 'Not provided' }}
|
|
{% if user.email and not user.is_verified %}
|
|
<span class="badge badge-warning">Unverified</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Member Since</span>
|
|
<span class="info-value">{{ user.created_at|format_date }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">Account Type</span>
|
|
<span class="info-value">{{ user.account_type.value if user.account_type else 'Standard' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column -->
|
|
<div class="content-column">
|
|
<!-- Email Settings Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<span class="icon"><i class="ti ti-mail"></i></span>
|
|
Email Settings
|
|
</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<form method="POST" action="{{ url_for('profile') }}" class="modern-form">
|
|
<div class="form-group">
|
|
<label for="email" class="form-label">Email Address</label>
|
|
<input type="email" id="email" name="email" class="form-control"
|
|
value="{{ user.email or '' }}" placeholder="your@email.com">
|
|
<span class="form-hint">Used for notifications and account recovery</span>
|
|
</div>
|
|
|
|
{% if user.email and not user.is_verified %}
|
|
<div class="alert alert-warning">
|
|
<span class="alert-icon"><i class="ti ti-alert-triangle"></i></span>
|
|
<div>
|
|
<p>Your email address is not verified.</p>
|
|
<a href="{{ url_for('profile') }}" class="btn btn-sm btn-warning">Send Verification Email</a>
|
|
</div>
|
|
</div>
|
|
{% elif not user.email %}
|
|
<div class="alert alert-info">
|
|
<span class="alert-icon"><i class="ti ti-info-circle"></i></span>
|
|
<p>Adding an email enables account recovery and notifications.</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="icon"><i class="ti ti-check"></i></span>
|
|
{% if user.email %}Update{% else %}Add{% endif %} Email
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security Settings Card -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2 class="card-title">
|
|
<span class="icon"><i class="ti ti-lock"></i></span>
|
|
Security Settings
|
|
</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Change Password Section -->
|
|
<div class="security-section">
|
|
<h3 class="section-title">Change Password</h3>
|
|
<form method="POST" action="{{ url_for('profile') }}" class="modern-form">
|
|
<input type="hidden" name="email" value="{{ user.email or '' }}">
|
|
|
|
<div class="form-group">
|
|
<label for="current_password" class="form-label">Current Password</label>
|
|
<input type="password" id="current_password" name="current_password"
|
|
class="form-control" required>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="new_password" class="form-label">New Password</label>
|
|
<input type="password" id="new_password" name="new_password"
|
|
class="form-control" required>
|
|
<span class="form-hint">Min. 8 characters</span>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirm_password" class="form-label">Confirm Password</label>
|
|
<input type="password" id="confirm_password" name="confirm_password"
|
|
class="form-control" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-warning">
|
|
<span class="icon"><i class="ti ti-key"></i></span>
|
|
Change Password
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Two-Factor Authentication Section -->
|
|
<div class="security-section">
|
|
<h3 class="section-title">Two-Factor Authentication</h3>
|
|
<div class="tfa-status">
|
|
{% if user.two_factor_enabled %}
|
|
<div class="status-indicator enabled">
|
|
<span class="status-icon"><i class="ti ti-shield"></i></span>
|
|
<div>
|
|
<div class="status-text">Enabled</div>
|
|
<div class="status-description">Your account is protected with 2FA</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ url_for('disable_2fa') }}" class="modern-form"
|
|
onsubmit="return confirm('Are you sure you want to disable two-factor authentication?');">
|
|
<div class="form-group">
|
|
<label for="password_disable" class="form-label">Password</label>
|
|
<input type="password" id="password_disable" name="password"
|
|
class="form-control" placeholder="Enter your password to disable 2FA" required>
|
|
</div>
|
|
<button type="submit" class="btn btn-danger">
|
|
<span class="icon"><i class="ti ti-x"></i></span>
|
|
Disable 2FA
|
|
</button>
|
|
</form>
|
|
{% else %}
|
|
<div class="status-indicator disabled">
|
|
<span class="status-icon"><i class="ti ti-alert-triangle"></i></span>
|
|
<div>
|
|
<div class="status-text">Disabled</div>
|
|
<div class="status-description">Add extra security to your account</div>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="{{ url_for('setup_2fa') }}" class="btn btn-success">
|
|
<span class="icon"><i class="ti ti-check"></i></span>
|
|
Enable 2FA
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Container and Layout */
|
|
.profile-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* Page Header */
|
|
.page-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 16px;
|
|
padding: 2.5rem;
|
|
margin-bottom: 2rem;
|
|
color: white;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.profile-header-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.header-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
border: 4px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
margin: 0.25rem 0 0 0;
|
|
}
|
|
|
|
.header-stats {
|
|
display: flex;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 0.75rem 1.25rem;
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.stat-icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.stat-text {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Flash Messages */
|
|
.flash-messages {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.alert {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.alert-error {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
|
|
.alert-warning {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
border: 1px solid #ffeaa7;
|
|
}
|
|
|
|
.alert-info {
|
|
background: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
|
|
.alert-icon {
|
|
font-size: 1.25rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Content Grid */
|
|
.content-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.2fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.content-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
border: 1px solid #e5e7eb;
|
|
margin-bottom: 1.5rem;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-header {
|
|
background: #f8f9fa;
|
|
padding: 1.5rem;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: #1f2937;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.card-title .icon {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Avatar Card */
|
|
.avatar-showcase {
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 160px;
|
|
height: 160px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 6px solid #f3f4f6;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.control-tabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
background: #f3f4f6;
|
|
padding: 0.5rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tab-btn {
|
|
flex: 1;
|
|
padding: 0.75rem 1rem;
|
|
border: none;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.tab-btn:hover {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
color: #667eea;
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background: white;
|
|
color: #667eea;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Upload Area */
|
|
.upload-area {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.upload-label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 3rem 2rem;
|
|
border: 2px dashed #e5e7eb;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.upload-label:hover {
|
|
border-color: #667eea;
|
|
background: #f3f4f6;
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.upload-text {
|
|
font-weight: 600;
|
|
color: #374151;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.upload-hint {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.file-name {
|
|
margin-top: 1rem;
|
|
font-size: 0.875rem;
|
|
color: #667eea;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.file-input {
|
|
display: none;
|
|
}
|
|
|
|
.upload-preview {
|
|
text-align: center;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.upload-preview img {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Info Grid */
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 1.05rem;
|
|
color: #1f2937;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.info-message {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
background: #f3f4f6;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.info-icon {
|
|
font-size: 1.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Forms */
|
|
.modern-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #374151;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-control {
|
|
padding: 0.75rem 1rem;
|
|
border: 2px solid #e5e7eb;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: all 0.2s ease;
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
.form-control:focus {
|
|
outline: none;
|
|
border-color: #667eea;
|
|
background-color: white;
|
|
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
|
}
|
|
|
|
.form-hint {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.btn-success {
|
|
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
|
}
|
|
|
|
.btn-warning {
|
|
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.btn-outline {
|
|
background: white;
|
|
color: #6b7280;
|
|
border: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: #f3f4f6;
|
|
border-color: #d1d5db;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Security Section */
|
|
.security-section {
|
|
padding: 1.5rem 0;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.security-section:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.tfa-status {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.status-indicator.enabled {
|
|
background: #d4edda;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
|
|
.status-indicator.disabled {
|
|
background: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
}
|
|
|
|
.status-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.status-text {
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.status-description {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.badge-warning {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.profile-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.page-header {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.profile-header-info {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.header-stats {
|
|
justify-content: center;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.control-tabs {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tab-btn {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.card {
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
.card:nth-child(2) {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.card:nth-child(3) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Tab switching
|
|
const tabBtns = document.querySelectorAll('.tab-btn');
|
|
const tabContents = document.querySelectorAll('.tab-content');
|
|
|
|
tabBtns.forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const tabName = this.getAttribute('data-tab');
|
|
|
|
// Update active states
|
|
tabBtns.forEach(b => b.classList.remove('active'));
|
|
tabContents.forEach(c => c.classList.remove('active'));
|
|
|
|
this.classList.add('active');
|
|
document.getElementById(tabName + '-tab').classList.add('active');
|
|
});
|
|
});
|
|
|
|
// File upload handling
|
|
const fileInput = document.getElementById('avatar_file');
|
|
const fileName = document.getElementById('file-name');
|
|
const uploadPreview = document.getElementById('upload-preview');
|
|
const uploadPreviewImg = document.getElementById('upload-preview-img');
|
|
const uploadBtn = document.getElementById('upload-btn');
|
|
|
|
fileInput.addEventListener('change', function(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
// Update file name display
|
|
fileName.textContent = file.name;
|
|
|
|
// Validate file size (5MB max)
|
|
if (file.size > 5 * 1024 * 1024) {
|
|
alert('File size must be less than 5MB');
|
|
this.value = '';
|
|
fileName.textContent = '';
|
|
uploadPreview.style.display = 'none';
|
|
uploadBtn.disabled = true;
|
|
return;
|
|
}
|
|
|
|
// Validate file type
|
|
const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
|
|
if (!validTypes.includes(file.type)) {
|
|
alert('Please select a valid image file (JPG, PNG, GIF, or WebP)');
|
|
this.value = '';
|
|
fileName.textContent = '';
|
|
uploadPreview.style.display = 'none';
|
|
uploadBtn.disabled = true;
|
|
return;
|
|
}
|
|
|
|
// Preview the image
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
uploadPreviewImg.src = e.target.result;
|
|
uploadPreview.style.display = 'block';
|
|
uploadBtn.disabled = false;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
fileName.textContent = '';
|
|
uploadPreview.style.display = 'none';
|
|
uploadBtn.disabled = true;
|
|
}
|
|
});
|
|
|
|
// Avatar URL preview
|
|
const avatarUrlInput = document.getElementById('avatar_url');
|
|
const avatarPreview = document.getElementById('avatar-preview');
|
|
|
|
avatarUrlInput.addEventListener('input', function() {
|
|
const url = this.value.trim();
|
|
if (url && isValidUrl(url)) {
|
|
// Test if image loads
|
|
const img = new Image();
|
|
img.onload = function() {
|
|
avatarPreview.src = url;
|
|
};
|
|
img.onerror = function() {
|
|
// Keep current avatar if URL is invalid
|
|
avatarPreview.src = '{{ user.get_avatar_url(160) }}';
|
|
};
|
|
img.src = url;
|
|
}
|
|
});
|
|
|
|
// Drag and drop for file upload
|
|
const uploadLabel = document.querySelector('.upload-label');
|
|
|
|
uploadLabel.addEventListener('dragover', function(e) {
|
|
e.preventDefault();
|
|
this.style.borderColor = '#667eea';
|
|
this.style.background = '#f3f4f6';
|
|
});
|
|
|
|
uploadLabel.addEventListener('dragleave', function(e) {
|
|
e.preventDefault();
|
|
this.style.borderColor = '#e5e7eb';
|
|
this.style.background = '#f9fafb';
|
|
});
|
|
|
|
uploadLabel.addEventListener('drop', function(e) {
|
|
e.preventDefault();
|
|
this.style.borderColor = '#e5e7eb';
|
|
this.style.background = '#f9fafb';
|
|
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
fileInput.files = files;
|
|
fileInput.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
});
|
|
|
|
function isValidUrl(string) {
|
|
try {
|
|
new URL(string);
|
|
return true;
|
|
} catch (_) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function resetAvatar() {
|
|
if (confirm('Reset to your default avatar? This will remove any custom avatar.')) {
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = '{{ url_for("update_avatar") }}';
|
|
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'avatar_url';
|
|
input.value = '';
|
|
|
|
form.appendChild(input);
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |