mirror of
https://github.com/DRYTRIX/TimeTracker.git
synced 2026-05-02 18:29:26 -05:00
Dries Peeters
abebd88185
- Add mobile-first CSS with responsive breakpoints and touch targets - Create dedicated mobile.css and mobile.js files for enhanced mobile experience - Implement card-based table layouts for small screens with data-label attributes - Add mobile-specific utility classes (mobile-card, touch-target, mobile-stack) - Enhance navigation with collapsible mobile menu and swipe gestures - Optimize forms, buttons, and modals for mobile devices - Add touch feedback and mobile-specific interactions - Implement responsive grid layouts and mobile typography - Add mobile meta tags for PWA-like functionality - Ensure all templates use mobile-friendly classes and responsive design
1265 lines
40 KiB
HTML
1265 lines
40 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="theme-color" content="#3b82f6">
|
|
<title>{% block title %}{{ app_name }}{% endblock %}</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='images/drytrix-logo.svg') }}">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<!-- Google Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='mobile.css') }}">
|
|
<style>
|
|
:root {
|
|
--primary-color: #3b82f6;
|
|
--primary-dark: #2563eb;
|
|
--primary-light: #93c5fd;
|
|
--secondary-color: #64748b;
|
|
--success-color: #059669;
|
|
--danger-color: #dc2626;
|
|
--warning-color: #d97706;
|
|
--info-color: #0891b2;
|
|
--dark-color: #1e293b;
|
|
--light-color: #f8fafc;
|
|
--border-color: #e2e8f0;
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #475569;
|
|
--text-muted: #64748b;
|
|
--bg-gradient: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
|
|
--card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
--card-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
--border-radius: 8px;
|
|
--border-radius-sm: 6px;
|
|
--transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
height: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #f8fafc;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 0.95rem;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
main {
|
|
flex: 1 0 auto;
|
|
display: block;
|
|
padding-bottom: 2rem;
|
|
}
|
|
|
|
/* Mobile-First Navigation */
|
|
.navbar {
|
|
background: white !important;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 0.75rem 0;
|
|
z-index: 1030;
|
|
position: relative;
|
|
min-height: var(--mobile-nav-height);
|
|
}
|
|
|
|
.navbar-brand {
|
|
font-weight: 700;
|
|
font-size: 1.4rem;
|
|
color: var(--primary-color) !important;
|
|
text-decoration: none;
|
|
transition: var(--transition);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-brand img {
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.navbar-brand:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.navbar-brand:hover {
|
|
color: var(--primary-dark) !important;
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
color: var(--text-secondary) !important;
|
|
font-weight: 500;
|
|
padding: 0.75rem 1rem;
|
|
border-radius: var(--border-radius-sm);
|
|
transition: var(--transition);
|
|
position: relative;
|
|
margin: 0 0.25rem;
|
|
min-height: var(--mobile-touch-target);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.navbar-nav .nav-link:hover {
|
|
color: var(--primary-color) !important;
|
|
background: var(--light-color);
|
|
}
|
|
|
|
.navbar-nav .nav-link.active {
|
|
background: var(--primary-color);
|
|
color: white !important;
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
z-index: 1051;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 0.5rem 0;
|
|
margin-top: 0.5rem;
|
|
z-index: 1050;
|
|
position: absolute;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 0.75rem 1.5rem;
|
|
transition: var(--transition);
|
|
color: var(--text-secondary);
|
|
min-height: var(--mobile-touch-target);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: var(--light-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Mobile Navigation Toggle */
|
|
.navbar-toggler {
|
|
border: none;
|
|
padding: 0.5rem;
|
|
min-height: var(--mobile-touch-target);
|
|
min-width: var(--mobile-touch-target);
|
|
}
|
|
|
|
.navbar-toggler:focus {
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
/* Mobile Navigation Menu */
|
|
@media (max-width: 991.98px) {
|
|
.navbar-collapse {
|
|
background: white;
|
|
border-top: 1px solid var(--border-color);
|
|
margin-top: 0.5rem;
|
|
padding: 1rem 0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.navbar-nav .nav-link {
|
|
padding: 1rem 1.5rem;
|
|
margin: 0.25rem 0;
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.navbar-nav .nav-link i {
|
|
width: 24px;
|
|
text-align: center;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
position: static !important;
|
|
float: none;
|
|
width: 100%;
|
|
margin: 0;
|
|
border: none;
|
|
box-shadow: none;
|
|
background: var(--light-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 0.75rem 2rem;
|
|
border-radius: var(--border-radius-sm);
|
|
margin: 0.25rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Card Styling */
|
|
.card {
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
border-radius: var(--border-radius);
|
|
transition: var(--transition);
|
|
background: white;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card:hover {
|
|
box-shadow: var(--card-shadow-hover);
|
|
}
|
|
|
|
.card a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.card a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Quick action card hover effects */
|
|
.card a:hover .card-body {
|
|
background-color: var(--light-color);
|
|
}
|
|
|
|
.card a:hover .bg-primary.bg-opacity-10 {
|
|
background-color: rgba(59, 130, 246, 0.2) !important;
|
|
}
|
|
|
|
.card a:hover .bg-secondary.bg-opacity-10 {
|
|
background-color: rgba(100, 116, 139, 0.2) !important;
|
|
}
|
|
|
|
.card a:hover .bg-info.bg-opacity-10 {
|
|
background-color: rgba(8, 145, 178, 0.2) !important;
|
|
}
|
|
|
|
.card a:hover .bg-warning.bg-opacity-10 {
|
|
background-color: rgba(217, 119, 6, 0.2) !important;
|
|
}
|
|
|
|
.card-header {
|
|
background: white;
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1.25rem 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Button Styling - Mobile Optimized */
|
|
.btn {
|
|
border-radius: var(--border-radius-sm);
|
|
font-weight: 500;
|
|
padding: 0.75rem 1.5rem;
|
|
transition: var(--transition);
|
|
border: none;
|
|
position: relative;
|
|
font-size: 0.95rem;
|
|
min-height: var(--mobile-touch-target);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.btn-success {
|
|
background: var(--success-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: #047857;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: var(--danger-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #b91c1c;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
border: 1px solid var(--primary-color);
|
|
color: var(--primary-color);
|
|
background: transparent;
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-outline-secondary {
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-secondary);
|
|
background: transparent;
|
|
}
|
|
|
|
.btn-outline-secondary:hover {
|
|
background: var(--light-color);
|
|
border-color: var(--text-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
/* Mobile Button Sizes */
|
|
@media (max-width: 768px) {
|
|
.btn {
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1rem;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.75rem 1.25rem;
|
|
font-size: 0.9rem;
|
|
min-height: 40px;
|
|
}
|
|
}
|
|
|
|
/* Timer Display */
|
|
.timer-display {
|
|
font-family: 'Inter', monospace;
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Stats Cards */
|
|
.stats-card {
|
|
background: var(--bg-gradient);
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-card .card-body {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.stats-card i {
|
|
font-size: 2rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.stats-card h4 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Table Styling - Mobile Responsive */
|
|
.table {
|
|
border-radius: var(--border-radius-sm);
|
|
overflow: hidden;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.table th {
|
|
background: var(--light-color);
|
|
border: none;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
padding: 1rem;
|
|
text-transform: uppercase;
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.table td {
|
|
padding: 1rem;
|
|
border-bottom: 1px solid var(--border-color);
|
|
vertical-align: middle;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.table tbody tr {
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.table tbody tr:hover {
|
|
background: var(--light-color);
|
|
}
|
|
|
|
/* Mobile Table Responsiveness */
|
|
@media (max-width: 768px) {
|
|
.table-responsive {
|
|
border: none;
|
|
}
|
|
|
|
.table {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.table thead {
|
|
display: none;
|
|
}
|
|
|
|
.table tbody {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.table tr {
|
|
display: block;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
background: white;
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.table td {
|
|
display: block;
|
|
text-align: left;
|
|
padding: 0.75rem 1rem;
|
|
border: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: relative;
|
|
}
|
|
|
|
.table td:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.table td:before {
|
|
content: attr(data-label) ": ";
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.table td.actions-cell {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.table td.actions-cell:before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Badge Styling */
|
|
.badge {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: var(--border-radius-sm);
|
|
}
|
|
|
|
/* Form Styling - Mobile Optimized */
|
|
.form-control, .form-select {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 0.875rem 1rem;
|
|
font-size: 1rem;
|
|
transition: var(--transition);
|
|
background: white;
|
|
min-height: var(--mobile-touch-target);
|
|
}
|
|
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Mobile Form Improvements */
|
|
@media (max-width: 768px) {
|
|
.form-control, .form-select {
|
|
font-size: 16px; /* Prevents zoom on iOS */
|
|
padding: 1rem 1.25rem;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Alert Styling */
|
|
.alert {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
padding: 1rem 1.25rem;
|
|
font-weight: 500;
|
|
position: relative;
|
|
background: white;
|
|
}
|
|
|
|
.alert-success {
|
|
border-color: #10b981;
|
|
background: #f0fdf4;
|
|
color: #065f46;
|
|
}
|
|
|
|
.alert-danger {
|
|
border-color: #ef4444;
|
|
background: #fef2f2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.alert-info {
|
|
border-color: #06b6d4;
|
|
background: #f0f9ff;
|
|
color: #0c4a6e;
|
|
}
|
|
|
|
.alert-warning {
|
|
border-color: #f59e0b;
|
|
background: #fffbeb;
|
|
color: #92400e;
|
|
}
|
|
|
|
/* Modal Styling - Mobile Optimized */
|
|
.modal-content {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
/* Mobile Modal Improvements */
|
|
@media (max-width: 576px) {
|
|
.modal-dialog {
|
|
margin: 0.5rem;
|
|
max-width: calc(100% - 1rem);
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.modal-header, .modal-body, .modal-footer {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* Footer */
|
|
.footer {
|
|
background: white;
|
|
color: var(--text-secondary);
|
|
padding: 2rem 0;
|
|
margin-top: 4rem;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: var(--primary-dark);
|
|
}
|
|
|
|
/* Toast Container */
|
|
.toast-container {
|
|
z-index: 9999;
|
|
}
|
|
|
|
.toast {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
box-shadow: var(--card-shadow-hover);
|
|
}
|
|
|
|
/* Loading Animation */
|
|
.loading-spinner {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top-color: white;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Enhanced Mobile Responsiveness */
|
|
@media (max-width: 768px) {
|
|
.timer-display {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.stats-card h4 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.container {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
.row {
|
|
margin-left: -0.5rem;
|
|
margin-right: -0.5rem;
|
|
}
|
|
|
|
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
|
|
padding-left: 0.5rem;
|
|
padding-right: 0.5rem;
|
|
}
|
|
|
|
/* Mobile-specific spacing */
|
|
.mb-4 { margin-bottom: 1.5rem !important; }
|
|
.mb-3 { margin-bottom: 1rem !important; }
|
|
.mb-2 { margin-bottom: 0.75rem !important; }
|
|
|
|
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
|
|
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
|
|
|
|
/* Mobile navigation improvements */
|
|
.navbar-nav .nav-link {
|
|
border-radius: var(--border-radius-sm);
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
/* Mobile card improvements */
|
|
.card {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Mobile button group improvements */
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-group .btn {
|
|
border-radius: var(--border-radius-sm) !important;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.btn-group .btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/* Small Mobile Devices */
|
|
@media (max-width: 480px) {
|
|
.navbar-brand {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.d-flex.justify-content-between {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.d-flex.justify-content-between .btn {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--light-color);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--text-muted);
|
|
}
|
|
|
|
/* Animation Classes */
|
|
.fade-in {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.text-gradient {
|
|
background: var(--bg-gradient);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.glass-effect {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* Typography improvements */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
h1 { font-size: 2rem; }
|
|
h2 { font-size: 1.75rem; }
|
|
h3 { font-size: 1.5rem; }
|
|
h4 { font-size: 1.25rem; }
|
|
h5 { font-size: 1.125rem; }
|
|
h6 { font-size: 1rem; }
|
|
|
|
/* Mobile Typography */
|
|
@media (max-width: 768px) {
|
|
h1 { font-size: 1.75rem; }
|
|
h2 { font-size: 1.5rem; }
|
|
h3 { font-size: 1.25rem; }
|
|
h4 { font-size: 1.125rem; }
|
|
h5 { font-size: 1rem; }
|
|
h6 { font-size: 0.95rem; }
|
|
}
|
|
|
|
.text-muted {
|
|
color: var(--text-muted) !important;
|
|
}
|
|
|
|
.text-secondary {
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
/* Professional spacing and layout */
|
|
.container-fluid {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Better table styling */
|
|
.table th {
|
|
font-weight: 600;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Improved form styling */
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
/* Better button consistency */
|
|
.btn-sm {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
/* Professional card headers */
|
|
.card-header h5, .card-header h6 {
|
|
margin-bottom: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Empty state styling */
|
|
.text-center.py-5 {
|
|
background: var(--light-color);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.text-center.py-5 i {
|
|
color: var(--text-muted);
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* Better badge styling */
|
|
.badge.bg-primary {
|
|
background-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.badge.bg-success {
|
|
background-color: var(--success-color) !important;
|
|
}
|
|
|
|
.badge.bg-light {
|
|
background-color: var(--light-color) !important;
|
|
color: var(--text-secondary) !important;
|
|
}
|
|
|
|
/* Logo image styling */
|
|
.navbar-brand img,
|
|
.card-body img[src*="drytrix-logo.svg"] {
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Improved spacing */
|
|
.mb-4 { margin-bottom: 1.5rem !important; }
|
|
.mb-3 { margin-bottom: 1rem !important; }
|
|
.mb-2 { margin-bottom: 0.5rem !important; }
|
|
.mb-1 { margin-bottom: 0.25rem !important; }
|
|
|
|
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
|
|
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
|
|
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
|
|
|
|
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
|
|
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
|
|
|
|
/* Mobile-specific improvements */
|
|
.mobile-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.mobile-stack .btn {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.mobile-stack .btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Touch-friendly improvements */
|
|
.touch-target {
|
|
min-height: var(--mobile-touch-target);
|
|
min-width: var(--mobile-touch-target);
|
|
}
|
|
|
|
/* Mobile navigation improvements */
|
|
.mobile-nav-item {
|
|
padding: 1rem 1.5rem;
|
|
border-radius: var(--border-radius-sm);
|
|
margin: 0.25rem 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.mobile-nav-item:hover {
|
|
background: var(--light-color);
|
|
}
|
|
|
|
.mobile-nav-item.active {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
/* Mobile form improvements */
|
|
.mobile-form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.mobile-form-group .form-label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.mobile-form-group .form-control,
|
|
.mobile-form-group .form-select {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Mobile card improvements */
|
|
.mobile-card {
|
|
margin-bottom: 1rem;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.mobile-card .card-body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
/* Mobile button improvements */
|
|
.mobile-btn {
|
|
width: 100%;
|
|
margin-bottom: 0.75rem;
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1rem;
|
|
min-height: 48px;
|
|
}
|
|
|
|
.mobile-btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Mobile table improvements */
|
|
.mobile-table-row {
|
|
background: white;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.mobile-table-row .row {
|
|
margin: 0;
|
|
}
|
|
|
|
.mobile-table-row .col {
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.mobile-table-row .col:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.mobile-table-row .col:before {
|
|
content: attr(data-label) ": ";
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
</style>
|
|
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<!-- Navigation -->
|
|
<nav class="navbar navbar-expand-lg navbar-light">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="{{ url_for('main.dashboard') }}">
|
|
<img src="{{ url_for('static', filename='images/drytrix-logo.svg') }}" alt="DryTrix Logo" class="me-2" width="32" height="32">
|
|
<span class="text-dark fw-bold">Time Tracker</span>
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
{% if current_user.is_authenticated %}
|
|
<ul class="navbar-nav me-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if request.endpoint == 'main.dashboard' %}active{% endif %}" href="{{ url_for('main.dashboard') }}">
|
|
<i class="fas fa-tachometer-alt me-1"></i>Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if 'projects.' in request.endpoint %}active{% endif %}" href="{{ url_for('projects.list_projects') }}">
|
|
<i class="fas fa-project-diagram me-1"></i>Projects
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if 'timer.' in request.endpoint %}active{% endif %}" href="{{ url_for('timer.manual_entry') }}">
|
|
<i class="fas fa-plus me-1"></i>Log Time
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if 'reports.' in request.endpoint %}active{% endif %}" href="{{ url_for('reports.reports') }}">
|
|
<i class="fas fa-chart-bar me-1"></i>Reports
|
|
</a>
|
|
</li>
|
|
{% if current_user.is_admin %}
|
|
<li class="nav-item">
|
|
<a class="nav-link {% if 'admin.' in request.endpoint %}active{% endif %}" href="{{ url_for('admin.admin_dashboard') }}">
|
|
<i class="fas fa-cog me-1"></i>Admin
|
|
</a>
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-2" style="width: 32px; height: 32px;">
|
|
<i class="fas fa-user text-primary"></i>
|
|
</div>
|
|
<span>{{ current_user.username }}</span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="{{ url_for('auth.profile') }}">
|
|
<i class="fas fa-user-circle me-2"></i>Profile
|
|
</a></li>
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">
|
|
<i class="fas fa-sign-out-alt me-2"></i>Logout
|
|
</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mt-4">
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ 'danger' if category == 'error' else category }} alert-dismissible fade show fade-in" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Page Content -->
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer mt-auto">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<p class="mb-0 text-muted">
|
|
© 2024 <strong>DryTrix</strong>. All rights reserved.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<div class="d-flex justify-content-md-end gap-3">
|
|
<small class="text-muted">v{{ app_version }}</small>
|
|
<small><a href="{{ url_for('main.about') }}" class="text-decoration-none">About</a></small>
|
|
<small><a href="{{ url_for('main.help') }}" class="text-decoration-none">Help</a></small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- Socket.IO -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
|
|
<!-- Custom JS -->
|
|
<script src="{{ url_for('static', filename='mobile.js') }}"></script>
|
|
<script>
|
|
// Initialize Socket.IO
|
|
const socket = io();
|
|
|
|
// Global functions
|
|
function formatDuration(seconds) {
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
const secs = seconds % 60;
|
|
return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
function showToast(message, type = 'info') {
|
|
const toastContainer = document.getElementById('toast-container');
|
|
if (!toastContainer) {
|
|
console.warn('Toast container not found');
|
|
return;
|
|
}
|
|
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast align-items-center text-white bg-${type} border-0 fade-in`;
|
|
toast.setAttribute('role', 'alert');
|
|
toast.innerHTML = `
|
|
<div class="d-flex">
|
|
<div class="toast-body">${message}</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
`;
|
|
|
|
toastContainer.appendChild(toast);
|
|
const bsToast = new bootstrap.Toast(toast);
|
|
bsToast.show();
|
|
|
|
toast.addEventListener('hidden.bs.toast', () => {
|
|
toast.remove();
|
|
});
|
|
}
|
|
|
|
// Socket.IO event handlers
|
|
socket.on('connect', () => {
|
|
console.log('Connected to server');
|
|
});
|
|
|
|
socket.on('disconnect', () => {
|
|
console.log('Disconnected from server');
|
|
});
|
|
|
|
socket.on('timer_started', (data) => {
|
|
showToast(`Timer started for ${data.project_name}`, 'success');
|
|
// Refresh page or update timer display
|
|
if (typeof updateTimerDisplay === 'function') {
|
|
updateTimerDisplay();
|
|
}
|
|
});
|
|
|
|
socket.on('timer_stopped', (data) => {
|
|
showToast(`Timer stopped. Duration: ${data.duration}`, 'info');
|
|
// Refresh page or update timer display
|
|
if (typeof updateTimerDisplay === 'function') {
|
|
updateTimerDisplay();
|
|
}
|
|
});
|
|
|
|
// Add fade-in animation to cards on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const cards = document.querySelectorAll('.card');
|
|
cards.forEach((card, index) => {
|
|
card.style.animationDelay = `${index * 0.1}s`;
|
|
card.classList.add('fade-in');
|
|
});
|
|
|
|
// Mobile-specific improvements
|
|
if (window.innerWidth <= 768) {
|
|
// Add mobile-specific classes
|
|
document.body.classList.add('mobile-view');
|
|
|
|
// Improve touch targets
|
|
const buttons = document.querySelectorAll('.btn');
|
|
buttons.forEach(btn => {
|
|
btn.classList.add('touch-target');
|
|
});
|
|
|
|
// Improve form inputs
|
|
const inputs = document.querySelectorAll('.form-control, .form-select');
|
|
inputs.forEach(input => {
|
|
input.classList.add('touch-target');
|
|
});
|
|
}
|
|
});
|
|
|
|
// Handle mobile navigation improvements
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const navbarToggler = document.querySelector('.navbar-toggler');
|
|
const navbarCollapse = document.querySelector('.navbar-collapse');
|
|
|
|
if (navbarToggler && navbarCollapse) {
|
|
// Close mobile menu when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const isClickInsideNavbar = navbarToggler.contains(event.target) || navbarCollapse.contains(event.target);
|
|
|
|
if (!isClickInsideNavbar && navbarCollapse.classList.contains('show')) {
|
|
const bsCollapse = new bootstrap.Collapse(navbarCollapse);
|
|
bsCollapse.hide();
|
|
}
|
|
});
|
|
|
|
// Close mobile menu when clicking on a nav link
|
|
const navLinks = navbarCollapse.querySelectorAll('.nav-link');
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
if (window.innerWidth <= 991.98) {
|
|
const bsCollapse = new bootstrap.Collapse(navbarCollapse);
|
|
bsCollapse.hide();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
// Handle mobile viewport changes
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth <= 768) {
|
|
document.body.classList.add('mobile-view');
|
|
} else {
|
|
document.body.classList.remove('mobile-view');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% block extra_js %}{% endblock %}
|
|
</body>
|
|
</html>
|