jens/TimeTrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge website-branding feature and adjust for compatibility

Browse Source 
- Resolved conflicts in models.py, app.py, and template files
- Added branding checks to prevent errors when g.branding is None
- Updated all template references to use conditional branding
- Added BrandingSettings to migrations
- Created branding uploads directory
- Integrated branding with existing comment and task management features
This commit is contained in:
Jens Luedicke
2025-07-06 16:58:29 +02:00
parent 9bc3839587 0fbf410755
commit 462d91c3a8
14 changed files with 466 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
templates/about.html
View File

@@ -5,7 +5,7 @@
<div class="about-content">
<div class="intro">
<h2>Professional Time Tracking Made Simple</h2>
<p>TimeTrack is a comprehensive multi-tenant time management solution designed to help organizations and individuals monitor work hours efficiently. Built with simplicity and accuracy in mind, our platform provides the tools you need to track, manage, and analyze time spent on work activities across multiple companies and teams.</p>
<p>{{ g.branding.app_name }} is a comprehensive multi-tenant time management solution designed to help organizations and individuals monitor work hours efficiently. Built with simplicity and accuracy in mind, our platform provides the tools you need to track, manage, and analyze time spent on work activities across multiple companies and teams.</p>
</div>
<div class="features-section">
@@ -39,7 +39,7 @@
<div class="feature-item">
<h3>🏢 Multi-Company Support</h3>
<p>Enterprise-ready multi-tenant architecture allows multiple companies to operate independently within a single TimeTrack instance, with complete data isolation and security.</p>
<p>Enterprise-ready multi-tenant architecture allows multiple companies to operate independently within a single {{ g.branding.app_name }} instance, with complete data isolation and security.</p>
</div>
<div class="feature-item">
@@ -76,7 +76,7 @@
</div>
<div class="benefits-section">
<h2>Why Choose TimeTrack?</h2>
<h2>Why Choose {{ g.branding.app_name }}?</h2>
<div class="benefits-list">
<div class="benefit">
@@ -103,7 +103,7 @@
<div class="technical-section">
<h2>Technical Information</h2>
<p>TimeTrack is built using modern web technologies including Flask (Python), SQLite database, and responsive HTML/CSS/JavaScript frontend. The application features a REST API architecture, secure session management, and email integration for user verification.</p>
<p>{{ g.branding.app_name }} is built using modern web technologies including Flask (Python), SQLite database, and responsive HTML/CSS/JavaScript frontend. The application features a REST API architecture, secure session management, and email integration for user verification.</p>
</div>
<div class="company-setup-section">
@@ -111,12 +111,12 @@
<div class="setup-options">
<div class="setup-option">
<h3>🏢 New Company Setup</h3>
<p>Setting up TimeTrack for the first time or adding a new company? Create your company profile and administrator account to get started.</p>
<p>Setting up {{ g.branding.app_name }} for the first time or adding a new company? Create your company profile and administrator account to get started.</p>
</div>
<div class="setup-option">
<h3>👥 Join Existing Company</h3>
<p>Already have a company using TimeTrack? Get your company code from your administrator and register to join your organization.</p>
<p>Already have a company using {{ g.branding.app_name }}? Get your company code from your administrator and register to join your organization.</p>
</div>
</div>
</div>

2
templates/index.html
View File

@@ -9,7 +9,7 @@
<section class="splash-hero">
<div class="hero-content">
<h1 class="hero-title">Transform Your Productivity</h1>
<p class="hero-subtitle">Experience the future of time management with TimeTrack's intelligent tracking system</p>
<p class="hero-subtitle">Experience the future of time management with {{ g.branding.app_name if g.branding else 'TimeTrack' }}'s intelligent tracking system</p>
<div class="cta-buttons">
<a href="{{ url_for('register') }}" class="btn-primary">Get Started Free</a>
<a href="{{ url_for('login') }}" class="btn-secondary">Sign In</a>

72
templates/layout.html
View File

@@ -3,19 +3,69 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} - TimeTrack{% if g.company %} - {{ g.company.name }}{% endif %}</title>
<title>{{ title }} - {{ g.branding.app_name if g.branding else 'TimeTrack' }}{% if g.company %} - {{ g.company.name }}{% endif %}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% if not g.user %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/splash.css') }}">
{% endif %}
{% if g.branding and g.branding.favicon_filename %}
<link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='uploads/branding/' + g.branding.favicon_filename) }}">
{% endif %}
<style>
:root {
--primary-color: {{ g.branding.primary_color if g.branding else '#007bff' }};
}
.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.btn-primary:hover {
background-color: {{ (g.branding.primary_color if g.branding else '#007bff') + 'dd' }};
border-color: {{ (g.branding.primary_color if g.branding else '#007bff') + 'dd' }};
}
.nav-icon {
color: var(--primary-color);
}
a:hover {
color: var(--primary-color);
}
.mobile-logo {
max-height: 30px;
max-width: 150px;
object-fit: contain;
}
.sidebar-logo {
max-height: 32px;
max-width: 160px;
object-fit: contain;
}
.mobile-nav-brand a {
display: flex;
align-items: center;
}
.sidebar-header h2 a {
display: flex;
align-items: center;
color: inherit;
text-decoration: none;
}
</style>
</head>
<body{% if g.user %} class="has-user"{% endif %}>
<!-- Mobile header -->
{% if g.user %}
<header class="mobile-header">
<div class="mobile-nav-brand">
<a href="{{ url_for('home') }}">TimeTrack</a>
<a href="{{ url_for('home') }}">
{% if g.branding and g.branding.logo_filename %}
<img src="{{ url_for('static', filename='uploads/branding/' + g.branding.logo_filename) }}"
alt="{{ g.branding.logo_alt_text }}"
class="mobile-logo">
{% else %}
{{ g.branding.app_name if g.branding else 'TimeTrack' }}
{% endif %}
</a>
{% if g.company %}
<small class="company-name">{{ g.company.name }}</small>
{% endif %}
@@ -32,6 +82,22 @@
{% if g.user %}
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>
<a href="{{ url_for('home') }}">
{% if g.branding and g.branding.logo_filename %}
<img src="{{ url_for('static', filename='uploads/branding/' + g.branding.logo_filename) }}"
alt="{{ g.branding.logo_alt_text }}"
class="sidebar-logo">
{% else %}
{{ g.branding.app_name if g.branding else 'TimeTrack' }}
{% endif %}
</a>
</h2>
{% if g.company %}
<div class="company-info">
<small class="text-muted">{{ g.company.name }}</small>
</div>
{% endif %}
<button class="sidebar-toggle" id="sidebar-toggle">
<span></span>
<span></span>
@@ -151,7 +217,7 @@
</main>
<footer>
<p>&copy; {{ current_year }} TimeTrack. All rights reserved.</p>
<p>&copy; {{ current_year }} {{ g.branding.app_name }}. All rights reserved.</p>
</footer>
<script src="{{ url_for('static', filename='js/script.js') }}"></script>

4
templates/login.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - TimeTrack</title>
<title>Login - {{ g.branding.app_name if g.branding else 'TimeTrack' }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
@@ -12,7 +12,7 @@
<div class="auth-container">
<div class="auth-brand">
<h1>Welcome Back</h1>
<p>Sign in to continue tracking</p>
<p>Sign in to {{ g.branding.app_name if g.branding else 'TimeTrack' }}</p>
</div>
{% with messages = get_flashed_messages(with_categories=true) %}

4
templates/register.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - TimeTrack</title>
<title>Register - {{ g.branding.app_name if g.branding else 'TimeTrack' }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/fonts.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
@@ -11,7 +11,7 @@
<body class="auth-page">
<div class="auth-container">
<div class="auth-brand">
<h1>Welcome to TimeTrack</h1>
<h1>Welcome to {{ g.branding.app_name if g.branding else 'TimeTrack' }}</h1>
<p>Join your company team</p>
</div>

2
templates/setup_2fa.html
View File

@@ -25,7 +25,7 @@
<div class="manual-entry">
<h3>Can't scan? Enter this code manually:</h3>
<div class="secret-code">{{ secret }}</div>
<p><small>Account: {{ g.user.email }}<br>Issuer: TimeTrack</small></p>
<p><small>Account: {{ g.user.email }}<br>Issuer: {{ g.branding.app_name }}</small></p>
</div>
</div>
</div>

6
templates/setup_company.html
View File

@@ -4,7 +4,7 @@
<div class="admin-container">
<h1>
{% if is_initial_setup %}
Welcome to TimeTrack
Welcome to {{ g.branding.app_name }}
{% else %}
Create New Company
{% endif %}
@@ -14,12 +14,12 @@
{% if is_initial_setup %}
<div class="info-message">
<h3>🎉 Let's Get Started!</h3>
<p>Set up your company and create the first administrator account to begin using TimeTrack.</p>
<p>Set up your company and create the first administrator account to begin using {{ g.branding.app_name }}.</p>
</div>
{% elif is_super_admin %}
<div class="info-message">
<h3>🏢 New Company Setup</h3>
<p>Create a new company with its own administrator. This will be a separate organization within TimeTrack.</p>
<p>Create a new company with its own administrator. This will be a separate organization within {{ g.branding.app_name }}.</p>
</div>
{% else %}
<div class="error-message">

222
templates/system_admin_branding.html Normal file
View File

@@ -0,0 +1,222 @@
{% extends "layout.html" %}
{% block content %}
<div class="container">
<div class="header-section">
<h1>🎨 System Administrator - Branding Settings</h1>
<p class="subtitle">Customize the appearance and branding of your TimeTrack instance</p>
<a href="{{ url_for('system_admin_dashboard') }}" class="btn btn-secondary">← Back to Dashboard</a>
</div>
<!-- Current Branding Preview -->
<div class="stats-section">
<h3>👁️ Current Branding Preview</h3>
<div class="branding-preview">
<div class="preview-card">
<div class="preview-header">
{% if branding.logo_filename %}
<img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}"
alt="{{ branding.logo_alt_text }}"
class="preview-logo">
{% endif %}
<h4>{{ branding.app_name }}</h4>
</div>
<div class="preview-content">
<p>This is how your branding will appear to users.</p>
<div class="preview-button" style="background-color: {{ branding.primary_color }};">
Sample Button
</div>
</div>
</div>
</div>
</div>
<!-- Branding Settings Form -->
<div class="settings-section">
<h3>🔧 Branding Configuration</h3>
<form method="POST" enctype="multipart/form-data" class="settings-form">
<!-- Application Name -->
<div class="setting-group">
<div class="setting-header">
<h4>Application Name</h4>
<p>The name that appears throughout the application</p>
</div>
<div class="setting-control">
<label for="app_name">Application Name:</label>
<input type="text" id="app_name" name="app_name"
value="{{ branding.app_name }}"
class="form-control"
placeholder="TimeTrack"
required>
<small class="setting-description">
This name will appear in the title, navigation, and throughout the interface.
</small>
</div>
</div>
<!-- Logo Upload -->
<div class="setting-group">
<div class="setting-header">
<h4>Logo Upload</h4>
<p>Upload a custom logo for your application</p>
</div>
<div class="setting-control">
<label for="logo_file">Logo File:</label>
<input type="file" id="logo_file" name="logo_file"
accept="image/*"
class="form-control">
{% if branding.logo_filename %}
<div class="current-file">
<strong>Current logo:</strong>
<img src="{{ url_for('static', filename='uploads/branding/' + branding.logo_filename) }}"
alt="{{ branding.logo_alt_text }}"
class="current-logo">
</div>
{% endif %}
<small class="setting-description">
Supported formats: PNG, JPG, GIF, SVG. Recommended size: 200x50px or similar aspect ratio.
</small>
</div>
</div>
<!-- Logo Alt Text -->
<div class="setting-group">
<div class="setting-header">
<h4>Logo Alt Text</h4>
<p>Alternative text for the logo (accessibility)</p>
</div>
<div class="setting-control">
<label for="logo_alt_text">Alt Text:</label>
<input type="text" id="logo_alt_text" name="logo_alt_text"
value="{{ branding.logo_alt_text }}"
class="form-control"
placeholder="Company Logo">
<small class="setting-description">
This text will be read by screen readers and shown when the logo cannot be displayed.
</small>
</div>
</div>
<!-- Favicon Upload -->
<div class="setting-group">
<div class="setting-header">
<h4>Favicon Upload</h4>
<p>Upload a custom favicon (browser tab icon)</p>
</div>
<div class="setting-control">
<label for="favicon_file">Favicon File:</label>
<input type="file" id="favicon_file" name="favicon_file"
accept="image/*"
class="form-control">
{% if branding.favicon_filename %}
<div class="current-file">
<strong>Current favicon:</strong>
<img src="{{ url_for('static', filename='uploads/branding/' + branding.favicon_filename) }}"
alt="Current favicon"
class="current-favicon">
</div>
{% endif %}
<small class="setting-description">
Supported formats: ICO, PNG (16x16px or 32x32px recommended).
</small>
</div>
</div>
<!-- Primary Color -->
<div class="setting-group">
<div class="setting-header">
<h4>Primary Color</h4>
<p>The primary color used throughout the application</p>
</div>
<div class="setting-control">
<label for="primary_color">Primary Color:</label>
<input type="color" id="primary_color" name="primary_color"
value="{{ branding.primary_color }}"
class="form-control color-picker">
<small class="setting-description">
This color will be used for buttons, links, and other UI elements throughout the application.
</small>
</div>
</div>
<!-- Save Button -->
<div class="form-actions">
<button type="submit" class="btn btn-primary">💾 Save Branding Settings</button>
</div>
</form>
</div>
</div>
<style>
/* Branding-specific styles that complement the existing design system */
.branding-preview {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 5px;
padding: 20px;
margin-top: 15px;
}
.preview-card {
background: white;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
max-width: 400px;
}
.preview-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.preview-logo {
max-height: 40px;
max-width: 150px;
object-fit: contain;
}
.preview-button {
color: white;
padding: 8px 16px;
border-radius: 4px;
display: inline-block;
margin-top: 10px;
font-size: 14px;
border: none;
cursor: pointer;
}
.current-file {
margin-top: 10px;
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
border: 1px solid #dee2e6;
}
.current-logo {
max-height: 30px;
max-width: 100px;
object-fit: contain;
margin-left: 10px;
}
.current-favicon {
max-height: 16px;
max-width: 16px;
object-fit: contain;
margin-left: 10px;
}
.color-picker {
width: 80px !important;
height: 40px;
padding: 0 !important;
}
</style>
{% endblock %}

5
templates/system_admin_dashboard.html
View File

@@ -183,7 +183,10 @@
<a href="{{ url_for('system_admin_settings') }}" class="btn btn-primary">
⚙️ System Settings
</a>
<a href="{{ url_for('system_admin_health') }}" class="btn btn-warning">
<a href="{{ url_for('system_admin_branding') }}" class="btn btn-primary">
🎨 Branding Settings
</a>
<a href="{{ url_for('system_admin_health') }}" class="btn btn-primary">
🏥 System Health
</a>
</div>

2
templates/system_admin_settings.html
View File

@@ -119,7 +119,7 @@
<div class="info-grid">
<div class="info-card">
<h4>Application Version</h4>
<p>TimeTrack v1.0</p>
<p>{{ g.branding.app_name }} v1.0</p>
</div>
<div class="info-card">
<h4>Database</h4>