mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-05-01 01:40:59 -05:00
Dries Peeters
7525b44702
• Enhanced CSS variable system with comprehensive color palettes (50-900 scales) • Implemented modern glass morphism effects with backdrop-blur throughout • Added smooth animations and micro-interactions for better user feedback • Created reusable component system with modern styling patterns • Improved mobile experience with better touch interactions and responsive design • Enhanced dark theme with better contrast ratios and visual hierarchy • Updated navbar to use square corners and fixed dark mode styling issues • Applied consistent styling patterns from clients page across all templates • Added comprehensive theme template for future customizations • Maintained existing blue color scheme while modernizing visual appearance • Optimized CSS architecture with global styling patterns and reduced duplication • Enhanced accessibility with proper focus states and WCAG compliance • Improved button system with gradients, animations, and consistent interactions Files modified: - app/static/base.css: Enhanced with modern styling system - app/static/mobile.css: Improved mobile experience and touch interactions - app/static/theme-template.css: Comprehensive theme export template - app/templates/_components.html: Modernized reusable components - Multiple template files: Applied consistent styling patterns - Documentation: Added comprehensive guides and summaries Breaking changes: None - all existing functionality preserved
321 lines
20 KiB
HTML
321 lines
20 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ _('About') }} - {{ app_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
{% from "_components.html" import page_header, info_card, summary_card %}
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
{{ page_header('fas fa-info-circle', _('About'), _('Professional time tracking and project management'), None) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<!-- Hero Section -->
|
|
<div class="text-center mb-5">
|
|
{% if settings and settings.has_logo() %}
|
|
<img src="{{ settings.get_logo_url() }}" alt="{{ _('Company Logo') }}" class="mb-4" width="80" height="80">
|
|
{% else %}
|
|
<img src="{{ url_for('static', filename='images/drytrix-logo.svg') }}" alt="{{ _('DryTrix Logo') }}" class="mb-4" width="80" height="80">
|
|
{% endif %}
|
|
<h1 class="h2 mb-3">{{ _('TimeTracker') }}</h1>
|
|
<p class="lead text-muted mb-4">
|
|
{{ _('A comprehensive web-based time tracking application built with Flask, featuring project management, client organization, task management, invoicing, and advanced analytics.') }}
|
|
</p>
|
|
<div class="d-flex justify-content-center gap-3 flex-wrap">
|
|
<span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 px-3 py-2">
|
|
<i class="fas fa-clock me-1"></i> {{ _('Time Tracking') }}
|
|
</span>
|
|
<span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-3 py-2">
|
|
<i class="fas fa-project-diagram me-1"></i> {{ _('Project Management') }}
|
|
</span>
|
|
<span class="badge bg-info bg-opacity-10 text-info border border-info border-opacity-25 px-3 py-2">
|
|
<i class="fas fa-file-invoice-dollar me-1"></i> {{ _('Invoicing') }}
|
|
</span>
|
|
<span class="badge bg-warning bg-opacity-10 text-warning border border-warning border-opacity-25 px-3 py-2">
|
|
<i class="fas fa-chart-line me-1"></i> {{ _('Analytics') }}
|
|
</span>
|
|
</div>
|
|
<p class="text-muted mt-3">
|
|
<strong>{{ _('Developed by DryTrix') }}</strong> • {{ _('Open Source') }} • {{ _('GPL v3.0 License') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Key Features Overview -->
|
|
<div class="row mb-5">
|
|
<div class="col-md-3 col-sm-6 mb-4">
|
|
{{ summary_card('fas fa-stopwatch', 'primary', _('Smart Timers'), _('Real-time tracking with idle detection and WebSocket updates')) }}
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 mb-4">
|
|
{{ summary_card('fas fa-building', 'success', _('Client Management'), _('Organize clients with contacts, rates, and project relationships')) }}
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 mb-4">
|
|
{{ summary_card('fas fa-tasks', 'info', _('Task System'), _('Break down projects into manageable tasks with progress tracking')) }}
|
|
</div>
|
|
<div class="col-md-3 col-sm-6 mb-4">
|
|
{{ summary_card('fas fa-file-pdf', 'warning', _('PDF Invoices'), _('Generate professional branded invoices from tracked time')) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Feature Sections -->
|
|
<div class="row">
|
|
<!-- Core Features -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-star text-warning"></i> {{ _('Core Features') }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
{{ info_card(_('Time Tracking'), _('Start/stop timers with project association, idle detection, and real-time WebSocket updates'), 'fas fa-play-circle', 'primary') }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ info_card(_('Project Management'), _('Create and manage projects with client relationships, billing rates, and status tracking'), 'fas fa-project-diagram', 'success') }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ info_card(_('Client Organization'), _('Manage client contacts, default rates, and project relationships with error prevention'), 'fas fa-building', 'info') }}
|
|
</div>
|
|
<div class="mb-0">
|
|
{{ info_card(_('Task Management'), _('Break projects into tasks with priorities, due dates, and progress tracking'), 'fas fa-tasks', 'warning') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Features -->
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-rocket text-primary"></i> {{ _('Advanced Features') }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
{{ info_card(_('Professional Invoicing'), _('Generate branded PDF invoices with company logos, tax calculations, and payment tracking'), 'fas fa-file-invoice-dollar', 'primary') }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ info_card(_('Visual Analytics'), _('Comprehensive reporting with charts, trends, and export capabilities'), 'fas fa-chart-line', 'success') }}
|
|
</div>
|
|
<div class="mb-3">
|
|
{{ info_card(_('Multi-User System'), _('Role-based access control with admin panel and user management'), 'fas fa-users', 'info') }}
|
|
</div>
|
|
<div class="mb-0">
|
|
{{ info_card(_('API Integration'), _('RESTful API endpoints with JSON responses for third-party integrations'), 'fas fa-plug', 'warning') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Platform Support -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-globe"></i> {{ _('Platform Support') }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Web Application') }}</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Desktop browsers (Chrome, Firefox, Safari, Edge)') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Mobile responsive design') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Progressive Web App (PWA) capabilities') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Touch-friendly tablet interface') }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Operating Systems') }}</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Windows, macOS, Linux') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Android and iOS (web browser)') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Raspberry Pi support') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Docker containerized deployment') }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Database Support') }}</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('PostgreSQL (recommended)') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('SQLite (development/testing)') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Automatic migrations with Flask-Migrate') }}</li>
|
|
<li><i class="fas fa-check text-success me-2"></i>{{ _('Backup and restoration tools') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Technical Specifications -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-cogs"></i> {{ _('Technical Specifications') }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Technology Stack') }}</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li><i class="fas fa-code text-primary me-2"></i><strong>{{ _('Backend') }}:</strong> Python 3.8+, Flask, SQLAlchemy</li>
|
|
<li><i class="fas fa-palette text-success me-2"></i><strong>{{ _('Frontend') }}:</strong> Bootstrap 5, jQuery, Chart.js</li>
|
|
<li><i class="fas fa-database text-info me-2"></i><strong>{{ _('Database') }}:</strong> PostgreSQL, SQLite</li>
|
|
<li><i class="fas fa-server text-warning me-2"></i><strong>{{ _('Deployment') }}:</strong> Docker, Docker Compose</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Key Capabilities') }}</h6>
|
|
<ul class="list-unstyled mb-0">
|
|
<li><i class="fas fa-bolt text-primary me-2"></i><strong>{{ _('Real-time') }}:</strong> WebSocket updates, live timers</li>
|
|
<li><i class="fas fa-language text-success me-2"></i><strong>{{ _('i18n') }}:</strong> Multi-language support (Flask-Babel)</li>
|
|
<li><i class="fas fa-shield-alt text-info me-2"></i><strong>{{ _('Security') }}:</strong> Session management, CSRF protection</li>
|
|
<li><i class="fas fa-mobile-alt text-warning me-2"></i><strong>{{ _('Mobile') }}:</strong> Responsive design, touch optimized</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Security & Privacy -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-shield-alt"></i> {{ _('Security & Privacy') }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="mb-4">
|
|
{{ _('TimeTracker is designed with security and privacy as core principles:') }}
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Authentication & Access') }}</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-user-shield text-success me-2"></i>{{ _('Username-only authentication (no password required)') }}</li>
|
|
<li><i class="fas fa-users-cog text-success me-2"></i>{{ _('Role-based access control (user/admin)') }}</li>
|
|
<li><i class="fas fa-key text-success me-2"></i>{{ _('Secure session management with CSRF protection') }}</li>
|
|
<li><i class="fas fa-lock text-success me-2"></i>{{ _('Configurable secure cookie settings') }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Data Protection') }}</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-database text-info me-2"></i>{{ _('Data stored locally on your infrastructure') }}</li>
|
|
<li><i class="fas fa-user-secret text-info me-2"></i>{{ _('No external data sharing or tracking') }}</li>
|
|
<li><i class="fas fa-backup text-info me-2"></i>{{ _('Built-in backup and restoration capabilities') }}</li>
|
|
<li><i class="fas fa-eye-slash text-info me-2"></i>{{ _('Optional metrics collection (fully configurable)') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Open Source & Community -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-code-branch"></i> {{ _('Open Source & Community') }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Open Source Benefits') }}</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-code text-primary me-2"></i>{{ _('Full source code available on GitHub') }}</li>
|
|
<li><i class="fas fa-balance-scale text-primary me-2"></i>{{ _('Licensed under GPL v3.0') }}</li>
|
|
<li><i class="fas fa-users text-primary me-2"></i>{{ _('Community-driven development') }}</li>
|
|
<li><i class="fas fa-bug text-primary me-2"></i>{{ _('Transparent issue tracking and bug reports') }}</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="fw-semibold">{{ _('Deployment Options') }}</h6>
|
|
<ul class="list-unstyled">
|
|
<li><i class="fas fa-docker text-info me-2"></i>{{ _('Docker images available on GitHub Container Registry') }}</li>
|
|
<li><i class="fas fa-server text-info me-2"></i>{{ _('Self-hosted deployment with full control') }}</li>
|
|
<li><i class="fas fa-raspberry-pi text-info me-2"></i>{{ _('Raspberry Pi compatible for edge deployment') }}</li>
|
|
<li><i class="fas fa-cloud text-info me-2"></i>{{ _('Cloud-ready with Docker Compose configurations') }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="text-center mt-4">
|
|
<a href="https://github.com/drytrix/TimeTracker" target="_blank" rel="noopener" class="btn btn-outline-primary me-2">
|
|
<i class="fab fa-github me-2"></i>{{ _('View on GitHub') }}
|
|
</a>
|
|
<a href="https://buymeacoffee.com/DryTrix" target="_blank" rel="noopener" class="btn btn-outline-warning">
|
|
<i class="fas fa-mug-hot me-2"></i>{{ _('Support Development') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Getting Help -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="fas fa-question-circle"></i> {{ _('Getting Help & Resources') }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<div class="text-center">
|
|
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-book text-primary fa-2x"></i>
|
|
</div>
|
|
<h6 class="fw-semibold">{{ _('Documentation') }}</h6>
|
|
<p class="text-muted small mb-3">
|
|
{{ _('Comprehensive help documentation with step-by-step guides for all features.') }}
|
|
</p>
|
|
<a href="{{ url_for('main.help') }}" class="btn btn-outline-primary btn-sm">
|
|
<i class="fas fa-book me-1"></i>{{ _('View Help') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="text-center">
|
|
<div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
|
|
<i class="fas fa-info-circle text-success fa-2x"></i>
|
|
</div>
|
|
<h6 class="fw-semibold">{{ _('System Information') }}</h6>
|
|
<p class="text-muted small mb-3">
|
|
{{ _('View system status, version information, and configuration details.') }}
|
|
</p>
|
|
{% if current_user.is_admin %}
|
|
<a href="{{ url_for('admin.system_info') }}" class="btn btn-outline-success btn-sm">
|
|
<i class="fas fa-info-circle me-1"></i>{{ _('System Info') }}
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted small">{{ _('Admin access required') }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<div class="text-center">
|
|
<div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
|
|
<i class="fab fa-github text-warning fa-2x"></i>
|
|
</div>
|
|
<h6 class="fw-semibold">{{ _('Community Support') }}</h6>
|
|
<p class="text-muted small mb-3">
|
|
{{ _('Report issues, request features, and contribute to the project on GitHub.') }}
|
|
</p>
|
|
<a href="https://github.com/drytrix/TimeTracker/issues" target="_blank" rel="noopener" class="btn btn-outline-warning btn-sm">
|
|
<i class="fab fa-github me-1"></i>{{ _('GitHub Issues') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|