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

Stramline template's use and adjust styl.es.

Browse Source
This commit is contained in:
Jens Luedicke
2025-07-09 06:45:31 +02:00
parent 77c2827fee
commit e959734973
16 changed files with 1844 additions and 2609 deletions
Download Patch File Download Diff File Expand all files Collapse all files

390
static/css/hover-standards.css Normal file
View File

@@ -0,0 +1,390 @@
/* ===================================================================
TIMETRACK HOVER STANDARDS
Consistent hover states based on primary gradient colors
Primary: #667eea to #764ba2
=================================================================== */
:root {
/* Primary gradient colors */
--primary-gradient-start: #667eea;
--primary-gradient-end: #764ba2;
--primary-color: #667eea;
/* Hover color variations */
--hover-primary: #5569d6; /* Darker primary for hover */
--hover-primary-dark: #4a5bc8; /* Even darker primary */
--hover-secondary: #6a4195; /* Darker gradient end */
/* Background hover colors */
--hover-bg-light: rgba(102, 126, 234, 0.05); /* 5% primary */
--hover-bg-medium: rgba(102, 126, 234, 0.1); /* 10% primary */
--hover-bg-strong: rgba(102, 126, 234, 0.15); /* 15% primary */
/* Shadow definitions */
--hover-shadow-light: 0 2px 4px rgba(102, 126, 234, 0.15);
--hover-shadow-medium: 0 4px 12px rgba(102, 126, 234, 0.2);
--hover-shadow-strong: 0 6px 20px rgba(102, 126, 234, 0.25);
--hover-shadow-heavy: 0 8px 30px rgba(102, 126, 234, 0.3);
/* Transform values */
--hover-lift-subtle: translateY(-1px);
--hover-lift-small: translateY(-2px);
--hover-lift-medium: translateY(-3px);
--hover-lift-large: translateY(-5px);
/* Transition timing */
--hover-transition-fast: all 0.2s ease;
--hover-transition-normal: all 0.3s ease;
--hover-transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ===================================================================
GLOBAL HOVER STYLES
=================================================================== */
/* All links */
a {
transition: var(--hover-transition-fast);
}
a:hover {
color: var(--primary-color);
text-decoration: none;
}
/* ===================================================================
BUTTON HOVER STYLES
=================================================================== */
/* Base button hover */
.btn {
transition: var(--hover-transition-normal);
}
.btn:hover {
transform: var(--hover-lift-subtle);
box-shadow: var(--hover-shadow-light);
}
/* Primary button with gradient */
.btn-primary {
background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--hover-primary) 0%, var(--hover-secondary) 100%);
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
border-color: var(--hover-primary);
}
/* Secondary button */
.btn-secondary:hover {
background-color: var(--hover-bg-medium);
border-color: var(--primary-color);
color: var(--primary-color);
transform: var(--hover-lift-subtle);
box-shadow: var(--hover-shadow-light);
}
/* Success button - maintain green but with consistent effects */
.btn-success:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
filter: brightness(0.9);
}
/* Danger button - maintain red but with consistent effects */
.btn-danger:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
filter: brightness(0.9);
}
/* Outline buttons */
.btn-outline:hover {
background-color: var(--primary-color);
border-color: var(--primary-color);
color: white;
transform: var(--hover-lift-subtle);
box-shadow: var(--hover-shadow-light);
}
/* Small buttons */
.btn-sm:hover {
transform: var(--hover-lift-subtle);
box-shadow: var(--hover-shadow-light);
}
/* ===================================================================
NAVIGATION HOVER STYLES
=================================================================== */
/* Sidebar */
.sidebar {
transition: var(--hover-transition-normal);
}
.sidebar:hover {
box-shadow: var(--hover-shadow-heavy);
}
/* Sidebar navigation items */
.sidebar-nav li a {
transition: var(--hover-transition-fast);
}
.sidebar-nav li a:hover {
background-color: var(--hover-bg-medium);
border-left-color: var(--primary-color);
color: var(--primary-color);
}
/* Active state should be stronger */
.sidebar-nav li.active a {
background-color: var(--hover-bg-strong);
border-left-color: var(--primary-gradient-end);
color: var(--primary-gradient-end);
}
/* Top navigation */
.navbar-nav .nav-link:hover {
color: var(--primary-color);
background-color: var(--hover-bg-light);
border-radius: 4px;
}
/* Dropdown items */
.dropdown-item:hover {
background-color: var(--hover-bg-medium);
color: var(--primary-color);
}
/* ===================================================================
CARD & PANEL HOVER STYLES
=================================================================== */
/* Base card hover */
.card,
.panel,
.dashboard-card,
.admin-card,
.stat-card {
transition: var(--hover-transition-normal);
}
.card:hover,
.panel:hover,
.dashboard-card:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
}
/* Clickable cards get stronger effect */
.admin-card:hover,
.clickable-card:hover {
transform: var(--hover-lift-medium);
box-shadow: var(--hover-shadow-strong);
cursor: pointer;
}
/* Stat cards */
.stat-card:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
border-color: var(--hover-bg-strong);
}
/* Management cards */
.management-card {
transition: var(--hover-transition-normal);
}
.management-card:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
border-color: var(--hover-bg-medium);
}
/* ===================================================================
TABLE HOVER STYLES
=================================================================== */
/* Table rows */
.table tbody tr,
.data-table tbody tr,
.time-history tbody tr {
transition: var(--hover-transition-fast);
}
.table tbody tr:hover,
.data-table tbody tr:hover,
.time-history tbody tr:hover {
background-color: var(--hover-bg-light);
}
/* Clickable rows get pointer */
.clickable-row:hover {
cursor: pointer;
background-color: var(--hover-bg-medium);
}
/* ===================================================================
FORM ELEMENT HOVER STYLES
=================================================================== */
/* Input fields */
.form-control,
.form-select {
transition: var(--hover-transition-fast);
}
.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
border-color: var(--primary-color);
box-shadow: 0 0 0 1px var(--hover-bg-light);
}
/* Checkboxes and radios */
.form-check-input:hover {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--hover-bg-medium);
}
/* ===================================================================
ICON HOVER STYLES
=================================================================== */
/* Icon buttons */
.icon-btn {
transition: var(--hover-transition-fast);
}
.icon-btn:hover {
color: var(--primary-color);
background-color: var(--hover-bg-medium);
border-radius: 50%;
}
/* Action icons */
.action-icon:hover {
color: var(--primary-color);
transform: scale(1.1);
}
/* ===================================================================
SPECIAL COMPONENT HOVER STYLES
=================================================================== */
/* Task cards */
.task-card {
transition: var(--hover-transition-normal);
}
.task-card:hover {
transform: var(--hover-lift-subtle);
box-shadow: var(--hover-shadow-medium);
border-left-color: var(--primary-color);
}
/* Note cards */
.note-card:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
border-color: var(--hover-bg-strong);
}
/* Export sections */
.export-section:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-strong);
}
/* Widget hover */
.widget:hover {
transform: var(--hover-lift-small);
box-shadow: var(--hover-shadow-medium);
border-color: var(--hover-bg-medium);
}
/* Mode buttons */
.mode-btn:hover:not(.active) {
background-color: var(--hover-bg-medium);
color: var(--primary-color);
border-color: var(--primary-color);
}
/* Tab buttons */
.tab-btn:hover:not(.active) {
background-color: var(--hover-bg-light);
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
/* ===================================================================
UTILITY HOVER CLASSES
=================================================================== */
/* Add these classes to elements for consistent hover effects */
.hover-lift:hover {
transform: var(--hover-lift-small);
}
.hover-lift-large:hover {
transform: var(--hover-lift-large);
}
.hover-shadow:hover {
box-shadow: var(--hover-shadow-medium);
}
.hover-shadow-strong:hover {
box-shadow: var(--hover-shadow-strong);
}
.hover-bg:hover {
background-color: var(--hover-bg-medium);
}
.hover-primary:hover {
color: var(--primary-color);
}
.hover-scale:hover {
transform: scale(1.05);
}
.hover-brightness:hover {
filter: brightness(1.1);
}
/* ===================================================================
ANIMATION UTILITIES
=================================================================== */
/* Smooth all transitions */
.smooth-transition {
transition: var(--hover-transition-smooth);
}
/* Quick transitions for responsive feel */
.quick-transition {
transition: var(--hover-transition-fast);
}
/* Disable transitions on request */
.no-transition {
transition: none !important;
}
/* ===================================================================
DARK MODE ADJUSTMENTS (if applicable)
=================================================================== */
@media (prefers-color-scheme: dark) {
:root {
--hover-bg-light: rgba(102, 126, 234, 0.1);
--hover-bg-medium: rgba(102, 126, 234, 0.2);
--hover-bg-strong: rgba(102, 126, 234, 0.3);
}
}

26
static/css/splash.css
View File

@@ -64,15 +64,15 @@
}
.btn-primary {
background: #4CAF50;
background: #667eea;
color: white;
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.btn-primary:hover {
background: #45a049;
background: linear-gradient(135deg, #5569d6 0%, #6a4195 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
@@ -83,7 +83,9 @@
.btn-secondary:hover {
background: white;
color: #2a5298;
color: #667eea;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
/* Floating Clock Animation */
@@ -135,7 +137,7 @@
width: 2px;
height: 110px;
margin-left: -1px;
background: #4CAF50;
background: #667eea;
animation: rotate 60s linear infinite;
}
@@ -171,8 +173,8 @@
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
}
.feature-icon {
@@ -329,7 +331,7 @@
top: -15px;
left: 50%;
transform: translateX(-50%);
background: #4CAF50;
background: #667eea;
color: white;
padding: 0.5rem 1.5rem;
border-radius: 20px;
@@ -375,7 +377,7 @@
.btn-pricing {
display: inline-block;
padding: 1rem 2rem;
background: #4CAF50;
background: #667eea;
color: white;
text-decoration: none;
border-radius: 6px;
@@ -385,8 +387,9 @@
}
.btn-pricing:hover {
background: #45a049;
background: linear-gradient(135deg, #5569d6 0%, #6a4195 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.2);
}
.pricing-card.featured .btn-pricing {
@@ -394,7 +397,8 @@
}
.pricing-card.featured .btn-pricing:hover {
background: #1e3c72;
background: linear-gradient(135deg, #5569d6 0%, #6a4195 100%);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}
/* Final CTA */

143
static/css/style.css
View File

@@ -112,7 +112,7 @@ button {
}
.sidebar:hover {
box-shadow: 0 6px 30px rgba(0,0,0,0.12);
box-shadow: 0 6px 30px rgba(102, 126, 234, 0.15);
}
/* Custom scrollbar for sidebar */
@@ -169,7 +169,7 @@ button {
}
.sidebar-header h2 a:hover {
color: #4CAF50;
color: #667eea;
}
.sidebar-header small {
@@ -229,14 +229,14 @@ button {
.sidebar-nav li a:hover {
background-color: #e9ecef;
border-left-color: #4CAF50;
border-left-color: #667eea;
color: #333;
}
.sidebar-nav li a.active {
background-color: #e8f5e9;
border-left-color: #4CAF50;
color: #2e7d32;
background-color: rgba(102, 126, 234, 0.1);
border-left-color: #667eea;
color: #5569d6;
font-weight: 600;
}
@@ -366,7 +366,7 @@ body:has(.sidebar.collapsed) .main-content {
}
.feature h3 {
color: #4CAF50;
color: #667eea;
margin-top: 0;
}
@@ -457,8 +457,10 @@ button {
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
background-color: #5569d6;
border-color: #5569d6;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.btn-secondary {
@@ -470,6 +472,8 @@ button {
.btn-secondary:hover {
background-color: #545b62;
border-color: #545b62;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-success {
@@ -481,6 +485,8 @@ button {
.btn-success:hover {
background-color: #218838;
border-color: #218838;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-danger {
@@ -492,6 +498,8 @@ button {
.btn-danger:hover {
background-color: #c82333;
border-color: #c82333;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-warning {
@@ -503,6 +511,8 @@ button {
.btn-warning:hover {
background-color: #e0a800;
border-color: #e0a800;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.btn-info {
@@ -514,6 +524,8 @@ button {
.btn-info:hover {
background-color: #138496;
border-color: #138496;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
/* Button Outline Variants */
@@ -524,8 +536,11 @@ button {
}
.btn-outline:hover {
background-color: #007bff;
background-color: #667eea;
color: white;
border-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
/* Special Button Styles */
@@ -539,7 +554,9 @@ button {
.btn-filter:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
border-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
}
.btn-filter.active {
@@ -551,7 +568,7 @@ button {
/* Generic Button Hover */
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
}
footer {
@@ -600,7 +617,7 @@ footer {
}
.footer-links a:hover {
color: var(--primary-color);
color: #667eea;
}
.footer-separator {
@@ -662,8 +679,8 @@ footer {
}
.email-nag-dismiss:hover {
background-color: rgba(0,0,0,0.1);
color: #333;
background-color: rgba(102, 126, 234, 0.1);
color: #5569d6;
}
@keyframes slideDown {
@@ -748,7 +765,9 @@ body:has(.sidebar.collapsed) footer {
}
.arrive-btn:hover {
background-color: #45a049;
background-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.leave-btn {
@@ -760,6 +779,8 @@ body:has(.sidebar.collapsed) footer {
.leave-btn:hover {
background-color: #d32f2f;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.time-history {
@@ -788,7 +809,7 @@ body:has(.sidebar.collapsed) footer {
}
.time-history tr:hover {
background-color: #f5f5f5;
background-color: rgba(102, 126, 234, 0.05);
}
.button-group {
@@ -807,6 +828,8 @@ body:has(.sidebar.collapsed) footer {
.pause-btn:hover {
background-color: #f57c00;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}
.resume-btn {
@@ -817,7 +840,9 @@ body:has(.sidebar.collapsed) footer {
}
.resume-btn:hover {
background-color: #1976D2;
background-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}
.break-info {
@@ -971,7 +996,9 @@ body:has(.sidebar.collapsed) footer {
}
.edit-entry-btn:hover {
background-color: #0b7dda;
background-color: #667eea;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}
.delete-entry-btn {
@@ -981,6 +1008,8 @@ body:has(.sidebar.collapsed) footer {
.delete-entry-btn:hover {
background-color: #d32f2f;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15);
}
input[type="date"], input[type="time"] {
@@ -1037,8 +1066,8 @@ input[type="time"]::-webkit-datetime-edit {
}
.admin-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.15);
}
.admin-card h2 {
@@ -1113,11 +1142,11 @@ input[type="time"]::-webkit-datetime-edit {
}
.checkbox-container:hover input ~ .checkmark {
background-color: #ccc;
background-color: rgba(102, 126, 234, 0.15);
}
.checkbox-container input:checked ~ .checkmark {
background-color: #2196F3;
background-color: #667eea;
}
.checkmark:after {
@@ -1171,7 +1200,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.data-table tr:hover {
background-color: #f5f5f5;
background-color: rgba(102, 126, 234, 0.05);
}
/* Team Hours Page Styles */
@@ -1266,16 +1295,16 @@ input[type="time"]::-webkit-datetime-edit {
.export-section:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2);
}
.export-section h3 {
color: #4CAF50;
color: #667eea;
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 600;
border-bottom: 2px solid #4CAF50;
border-bottom: 2px solid #667eea;
padding-bottom: 0.5rem;
}
@@ -1296,7 +1325,7 @@ input[type="time"]::-webkit-datetime-edit {
.quick-export-buttons .btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
}
.export-button-container {
@@ -1305,7 +1334,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.export-button-container .btn {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 1rem 2rem;
font-size: 1.1rem;
@@ -1314,13 +1343,13 @@ input[type="time"]::-webkit-datetime-edit {
display: inline-block;
transition: all 0.2s ease;
font-weight: 600;
box-shadow: 0 2px 10px rgba(76, 175, 80, 0.3);
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}
.export-button-container .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
/* Custom date range form styling */
@@ -1348,8 +1377,8 @@ input[type="time"]::-webkit-datetime-edit {
.export-section .form-group input:focus,
.export-section .form-group select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Team Hours Export Styling */
@@ -1364,7 +1393,7 @@ input[type="time"]::-webkit-datetime-edit {
}
#export-buttons h4 {
color: #4CAF50;
color: #667eea;
margin-bottom: 1rem;
font-size: 1.2rem;
font-weight: 600;
@@ -1387,7 +1416,7 @@ input[type="time"]::-webkit-datetime-edit {
#export-buttons .quick-export-buttons .btn:hover {
transform: translateY(-1px);
box-shadow: 0 3px 10px rgba(76, 175, 80, 0.3);
box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
}
/* Responsive Design for Sidebar Navigation */
@media (max-width: 1024px) {
@@ -1528,14 +1557,14 @@ input[type="time"]::-webkit-datetime-edit {
}
.mode-btn.active {
background: #4CAF50;
background: #667eea;
color: white;
box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3);
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}
.mode-btn:hover:not(.active) {
background: #e9ecef;
color: #495057;
background: rgba(102, 126, 234, 0.1);
color: #5569d6;
}
.filter-panel {
@@ -1579,8 +1608,8 @@ input[type="time"]::-webkit-datetime-edit {
.filter-group input:focus,
.filter-group select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.view-tabs {
@@ -1603,14 +1632,14 @@ input[type="time"]::-webkit-datetime-edit {
}
.tab-btn.active {
color: #4CAF50;
border-bottom-color: #4CAF50;
background: rgba(76, 175, 80, 0.05);
color: #667eea;
border-bottom-color: #667eea;
background: rgba(102, 126, 234, 0.05);
}
.tab-btn:hover:not(.active) {
color: #495057;
background: rgba(0, 0, 0, 0.05);
color: #5569d6;
background: rgba(102, 126, 234, 0.05);
}
.view-content {
@@ -1700,7 +1729,7 @@ input[type="time"]::-webkit-datetime-edit {
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
text-align: center;
border-left: 4px solid #4CAF50;
border-left: 4px solid #667eea;
}
.stat-card h4 {
@@ -1796,8 +1825,8 @@ input[type="time"]::-webkit-datetime-edit {
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* Responsive Design for Analytics */
@@ -2031,7 +2060,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.view-btn:hover:not(.active) {
background: #e9ecef;
background: rgba(102, 126, 234, 0.1);
}
/* Statistics Cards */
@@ -2165,7 +2194,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.management-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
transform: translateY(-2px);
}
@@ -2289,7 +2318,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.card-header {
@@ -2362,7 +2391,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.widget:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2);
}
.widget-header {
@@ -2549,8 +2578,8 @@ input[type="time"]::-webkit-datetime-edit {
}
.user-dropdown-toggle:hover {
background-color: #e9ecef;
color: #333;
background-color: rgba(102, 126, 234, 0.1);
color: #5569d6;
}
/* Removed nav-icon style as we're using avatar instead */
@@ -2643,7 +2672,7 @@ input[type="time"]::-webkit-datetime-edit {
}
.user-dropdown-menu a:hover {
background-color: #f0f0f0;
background-color: rgba(102, 126, 234, 0.1);
}
.user-dropdown-menu .nav-icon {

770
static/css/time-tracking.css Normal file
View File

@@ -0,0 +1,770 @@
/* Time Tracking Styles */
/* Container */
.time-tracking-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/* Page Header - reuse existing styles */
.page-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 2rem;
color: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.page-title {
font-size: 2rem;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.page-icon {
font-size: 2.5rem;
display: inline-block;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.page-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin: 0.5rem 0 0 0;
}
.header-actions {
display: flex;
gap: 1rem;
}
/* Timer Section */
.timer-section {
margin-bottom: 2rem;
}
.timer-card {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
}
.timer-card.active {
border: 2px solid #10b981;
background: linear-gradient(135deg, #10b98110 0%, #059b6910 100%);
}
.timer-display {
text-align: center;
margin-bottom: 2rem;
}
.timer-value {
font-size: 4rem;
font-weight: 700;
color: #1f2937;
font-family: 'Monaco', 'Courier New', monospace;
letter-spacing: 0.1em;
}
.timer-status {
margin-top: 0.5rem;
}
.status-badge {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
}
.status-badge.active {
background: #10b981;
color: white;
}
.status-badge.paused {
background: #f59e0b;
color: white;
}
.timer-info {
background: #f8f9fa;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #e5e7eb;
}
.info-row:last-child {
border-bottom: none;
}
.info-label {
font-weight: 600;
color: #6b7280;
}
.info-value {
color: #1f2937;
}
.project-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 16px;
color: white;
font-size: 0.875rem;
font-weight: 500;
}
.task-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: #e5e7eb;
border-radius: 8px;
font-size: 0.875rem;
}
.timer-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Start Work Form */
.start-work-container {
text-align: center;
}
.start-work-container h2 {
font-size: 1.75rem;
color: #1f2937;
margin-bottom: 0.5rem;
}
.start-work-container p {
color: #6b7280;
margin-bottom: 2rem;
}
.modern-form {
max-width: 600px;
margin: 0 auto;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-weight: 600;
color: #374151;
font-size: 0.95rem;
}
.optional-badge {
background: #e5e7eb;
color: #6b7280;
padding: 0.125rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
margin-left: 0.5rem;
}
.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-actions {
margin-top: 1.5rem;
}
/* Stats Section */
.stats-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: white;
padding: 1.5rem;
border-radius: 12px;
text-align: center;
border: 1px solid #e5e7eb;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.stat-value {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #667eea;
}
.stat-label {
font-size: 0.9rem;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
/* Entries Section */
.entries-section {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
border: 1px solid #e5e7eb;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.view-toggle {
display: flex;
gap: 0.5rem;
}
.toggle-btn {
padding: 0.5rem 1rem;
border: 2px solid #e5e7eb;
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.25rem;
font-weight: 500;
}
.toggle-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}
.view-container {
display: none;
}
.view-container.active {
display: block;
}
/* Table Styles */
.entries-table-container {
overflow-x: auto;
}
.entries-table {
width: 100%;
border-collapse: collapse;
}
.entries-table th {
text-align: left;
padding: 1rem;
border-bottom: 2px solid #e5e7eb;
font-weight: 600;
color: #374151;
background: #f8f9fa;
}
.entries-table td {
padding: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.entry-row:hover {
background: #f8f9fa;
}
.date-cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.date-day {
font-size: 1.25rem;
font-weight: 700;
color: #1f2937;
}
.date-month {
font-size: 0.875rem;
color: #6b7280;
text-transform: uppercase;
}
.time-cell {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: 'Monaco', 'Courier New', monospace;
}
.time-separator {
color: #9ca3af;
}
.project-task-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
.project-tag {
display: inline-block;
padding: 0.25rem 0.5rem;
border-radius: 4px;
color: white;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.task-name,
.project-name {
color: #374151;
}
.no-project {
color: #9ca3af;
font-style: italic;
}
.duration-badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: #ede9fe;
color: #5b21b6;
border-radius: 16px;
font-weight: 600;
font-size: 0.875rem;
}
.break-duration {
color: #6b7280;
}
.notes-preview {
color: #6b7280;
font-size: 0.875rem;
}
.actions-cell {
display: flex;
gap: 0.5rem;
}
/* Specific button hover states */
.btn-icon.resume-work-btn:hover:not(:disabled) {
color: #10b981;
border-color: #10b981;
background: #f0fdf4;
}
.btn-icon.edit-entry-btn:hover {
color: #667eea;
border-color: #667eea;
background: #f3f4f6;
}
.btn-icon.delete-entry-btn:hover {
color: #ef4444;
border-color: #ef4444;
background: #fef2f2;
}
/* Grid View */
.entries-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
.entry-card {
background: #f8f9fa;
border-radius: 12px;
padding: 1.5rem;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}
.entry-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.entry-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.entry-date {
font-weight: 600;
color: #374151;
}
.entry-duration {
font-size: 1.25rem;
font-weight: 700;
color: #667eea;
}
.entry-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.entry-project {
padding-left: 1rem;
border-left: 4px solid;
}
.entry-task,
.entry-time,
.entry-notes {
display: flex;
align-items: flex-start;
gap: 0.5rem;
color: #6b7280;
font-size: 0.875rem;
}
.entry-footer {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}
/* 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-large {
padding: 1rem 2rem;
font-size: 1.125rem;
}
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.btn-icon {
padding: 0.5rem;
border: 1px solid #e5e7eb;
background: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
color: #6b7280;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
}
.btn-icon:hover {
background: #f3f4f6;
transform: translateY(-2px);
color: #374151;
}
.btn-icon:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-icon:disabled:hover {
transform: none;
background: white;
color: #6b7280;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: white;
color: #4b5563;
border: 2px solid #e5e7eb;
}
.btn-secondary:hover {
background: #f3f4f6;
}
.btn-success {
background: #10b981;
color: white;
}
.btn-success:hover {
background: #059669;
transform: translateY(-2px);
}
.btn-warning {
background: #f59e0b;
color: white;
}
.btn-warning:hover {
background: #d97706;
transform: translateY(-2px);
}
.btn-danger {
background: #ef4444;
color: white;
}
.btn-danger:hover {
background: #dc2626;
transform: translateY(-2px);
}
.btn-ghost {
background: transparent;
color: #6b7280;
}
.btn-ghost:hover {
color: #374151;
background: #f3f4f6;
}
/* Empty State */
.empty-state {
text-align: center;
padding: 4rem 2rem;
}
.empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.empty-state h3 {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.empty-state p {
color: #6b7280;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
background: white;
border-radius: 16px;
max-width: 600px;
margin: 5vh auto;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.modal-small {
max-width: 400px;
}
.modal-header {
padding: 2rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-title {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin: 0;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6b7280;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: all 0.2s ease;
}
.modal-close:hover {
background: #f3f4f6;
color: #1f2937;
}
.modal-body {
padding: 2rem;
}
.modal-footer {
padding: 1.5rem 2rem;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: flex-end;
gap: 1rem;
}
/* Responsive */
@media (max-width: 768px) {
.time-tracking-container {
padding: 1rem;
}
.form-row {
grid-template-columns: 1fr;
}
.timer-value {
font-size: 3rem;
}
.entries-grid {
grid-template-columns: 1fr;
}
.entries-table {
font-size: 0.875rem;
}
.entries-table th,
.entries-table td {
padding: 0.5rem;
}
}

356
templates/_time_tracking_interface.html Normal file
View File

@@ -0,0 +1,356 @@
<!-- Time Tracking Interface - Shared Component -->
<div class="time-tracking-container">
<!-- Header Section -->
<div class="page-header">
<div class="header-content">
<div class="header-left">
<h1 class="page-title">
<i class="ti ti-clock page-icon"></i>
Time Tracking
</h1>
<p class="page-subtitle">Track your work hours efficiently</p>
</div>
<div class="header-actions">
<button id="manual-entry-btn" class="btn btn-secondary">
<i class="ti ti-pencil"></i>
Manual Entry
</button>
<a href="{{ url_for('analytics') }}" class="btn btn-secondary">
<i class="ti ti-chart-bar"></i>
View Analytics
</a>
</div>
</div>
</div>
<!-- Timer Section -->
<div class="timer-section">
{% if active_entry %}
<!-- Active Timer -->
<div class="timer-card active">
<div class="timer-display">
<div class="timer-value" id="timer"
data-start="{{ active_entry.arrival_time.timestamp() }}"
data-breaks="{{ active_entry.total_break_duration }}"
data-paused="{{ 'true' if active_entry.is_paused else 'false' }}">
00:00:00
</div>
<div class="timer-status">
{% if active_entry.is_paused %}
<span class="status-badge paused">On Break</span>
{% else %}
<span class="status-badge active">Working</span>
{% endif %}
</div>
</div>
<div class="timer-info">
<div class="info-row">
<span class="info-label">Started:</span>
<span class="info-value">{{ active_entry.arrival_time|format_datetime }}</span>
</div>
{% if active_entry.project %}
<div class="info-row">
<span class="info-label">Project:</span>
<span class="info-value project-badge" style="background-color: {{ active_entry.project.color or '#667eea' }}">
{{ active_entry.project.code }} - {{ active_entry.project.name }}
</span>
</div>
{% endif %}
{% if active_entry.task %}
<div class="info-row">
<span class="info-label">Task:</span>
<span class="info-value task-badge">
{{ active_entry.task.title }}
</span>
</div>
{% endif %}
{% if active_entry.notes %}
<div class="info-row">
<span class="info-label">Notes:</span>
<span class="info-value">{{ active_entry.notes }}</span>
</div>
{% endif %}
{% if active_entry.is_paused %}
<div class="info-row">
<span class="info-label">Break started:</span>
<span class="info-value">{{ active_entry.pause_start_time|format_time }}</span>
</div>
{% endif %}
{% if active_entry.total_break_duration > 0 %}
<div class="info-row">
<span class="info-label">Total breaks:</span>
<span class="info-value">{{ active_entry.total_break_duration|format_duration }}</span>
</div>
{% endif %}
</div>
<div class="timer-actions">
<button id="pause-btn" class="btn {% if active_entry.is_paused %}btn-success{% else %}btn-warning{% endif %}"
data-id="{{ active_entry.id }}">
{% if active_entry.is_paused %}
<i class="ti ti-player-play"></i>
Resume Work
{% else %}
<i class="ti ti-player-pause"></i>
Take Break
{% endif %}
</button>
<button id="leave-btn" class="btn btn-danger" data-id="{{ active_entry.id }}">
<i class="ti ti-player-stop"></i>
Stop Working
</button>
</div>
</div>
{% else %}
<!-- Inactive Timer -->
<div class="timer-card inactive">
<div class="start-work-container">
<h2>Start Tracking Time</h2>
<p>Select a project and task to begin tracking your work</p>
<form id="start-work-form" class="modern-form">
<div class="form-row">
<div class="form-group">
<label for="project-select" class="form-label">
Project <span class="optional-badge">Optional</span>
</label>
<select id="project-select" name="project_id" class="form-control">
<option value="">No specific project</option>
{% for project in available_projects %}
<option value="{{ project.id }}" data-color="{{ project.color or '#667eea' }}">
{{ project.code }} - {{ project.name }}
</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="task-select" class="form-label">
Task <span class="optional-badge">Optional</span>
</label>
<select id="task-select" name="task_id" class="form-control" disabled>
<option value="">Select a project first</option>
</select>
</div>
</div>
<div class="form-group">
<label for="work-notes" class="form-label">
Notes <span class="optional-badge">Optional</span>
</label>
<textarea id="work-notes" name="notes" class="form-control"
rows="2" placeholder="What are you working on?"></textarea>
</div>
<div class="form-actions">
<button type="submit" id="arrive-btn" class="btn btn-primary btn-large">
<i class="ti ti-player-play"></i>
Start Working
</button>
</div>
</form>
</div>
</div>
{% endif %}
</div>
<!-- Quick Stats -->
<div class="stats-section">
<div class="stat-card">
<div class="stat-value">{{ today_hours|format_duration }}</div>
<div class="stat-label">Today</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ week_hours|format_duration }}</div>
<div class="stat-label">This Week</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ month_hours|format_duration }}</div>
<div class="stat-label">This Month</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ active_projects|length }}</div>
<div class="stat-label">Active Projects</div>
</div>
</div>
<!-- Recent Entries -->
<div class="entries-section">
<div class="section-header">
<h2 class="section-title">
<i class="ti ti-clipboard-list"></i>
Recent Time Entries
</h2>
<div class="view-toggle">
<button class="toggle-btn active" data-view="list">
<i class="ti ti-list"></i>
List
</button>
<button class="toggle-btn" data-view="grid">
<i class="ti ti-layout-grid"></i>
Grid
</button>
</div>
</div>
<!-- List View -->
<div id="list-view" class="view-container active">
{% if history %}
<div class="entries-table-container">
<table class="entries-table">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Project / Task</th>
<th>Duration</th>
<th>Break</th>
<th>Notes</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for entry in history %}
<tr data-entry-id="{{ entry.id }}" class="entry-row">
<td>
<div class="date-cell">
<span class="date-day">{{ entry.arrival_time.strftime('%d') }}</span>
<span class="date-month">{{ entry.arrival_time.strftime('%b') }}</span>
</div>
</td>
<td>
<div class="time-cell">
<span class="time-start">{{ entry.arrival_time|format_time }}</span>
<span class="time-separator"><i class="ti ti-arrow-right"></i></span>
<span class="time-end">{{ entry.departure_time|format_time if entry.departure_time else 'Active' }}</span>
</div>
</td>
<td>
<div class="project-task-cell">
{% if entry.project %}
<span class="project-tag" style="background-color: {{ entry.project.color or '#667eea' }}">
{{ entry.project.code }}
</span>
{% endif %}
{% if entry.task %}
<span class="task-name">{{ entry.task.title }}</span>
{% elif entry.project %}
<span class="project-name">{{ entry.project.name }}</span>
{% else %}
<span class="no-project">No project</span>
{% endif %}
</div>
</td>
<td>
<span class="duration-badge">
{{ entry.duration|format_duration if entry.duration is not none else 'In progress' }}
</span>
</td>
<td>
<span class="break-duration">
{{ entry.total_break_duration|format_duration if entry.total_break_duration else '-' }}
</span>
</td>
<td>
<span class="notes-preview" title="{{ entry.notes or '' }}">
{{ entry.notes[:30] + '...' if entry.notes and entry.notes|length > 30 else entry.notes or '-' }}
</span>
</td>
<td>
<div class="actions-cell">
{% if entry.departure_time and not active_entry %}
{% if entry.arrival_time.date() >= today %}
<button class="btn-icon resume-work-btn" data-id="{{ entry.id }}" title="Resume">
<i class="ti ti-refresh"></i>
</button>
{% else %}
<button class="btn-icon resume-work-btn" data-id="{{ entry.id }}" title="Cannot resume entries from previous days" disabled style="opacity: 0.5; cursor: not-allowed;">
<i class="ti ti-refresh"></i>
</button>
{% endif %}
{% endif %}
<button class="btn-icon edit-entry-btn" data-id="{{ entry.id }}" title="Edit">
<i class="ti ti-pencil"></i>
</button>
<button class="btn-icon delete-entry-btn" data-id="{{ entry.id }}" title="Delete">
<i class="ti ti-trash"></i>
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="empty-state">
<div class="empty-icon"><i class="ti ti-mail-opened" style="font-size: 4rem;"></i></div>
<h3>No time entries yet</h3>
<p>Start tracking your time to see entries here</p>
</div>
{% endif %}
</div>
<!-- Grid View -->
<div id="grid-view" class="view-container">
<div class="entries-grid">
{% for entry in history %}
<div class="entry-card" data-entry-id="{{ entry.id }}">
<div class="entry-header">
<div class="entry-date">
{{ entry.arrival_time.strftime('%d %b %Y') }}
</div>
<div class="entry-duration">
{{ entry.duration|format_duration if entry.duration is not none else 'Active' }}
</div>
</div>
<div class="entry-body">
{% if entry.project %}
<div class="entry-project" style="border-left-color: {{ entry.project.color or '#667eea' }}">
<strong>{{ entry.project.code }}</strong> - {{ entry.project.name }}
</div>
{% endif %}
{% if entry.task %}
<div class="entry-task">
<i class="ti ti-clipboard-list"></i> {{ entry.task.title }}
</div>
{% endif %}
<div class="entry-time">
<i class="ti ti-clock"></i>
{{ entry.arrival_time|format_time }} - {{ entry.departure_time|format_time if entry.departure_time else 'Active' }}
</div>
{% if entry.notes %}
<div class="entry-notes">
<i class="ti ti-notes"></i>
{{ entry.notes }}
</div>
{% endif %}
</div>
<div class="entry-footer">
<button class="btn-sm edit-entry-btn" data-id="{{ entry.id }}">Edit</button>
<button class="btn-sm btn-danger delete-entry-btn" data-id="{{ entry.id }}">Delete</button>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<!-- Modals -->
{% include '_time_tracking_modals.html' %}
<!-- Scripts -->
<script src="{{ url_for('static', filename='js/timer.js') }}"></script>
<script src="{{ url_for('static', filename='js/time-tracking.js') }}"></script>

146
templates/_time_tracking_modals.html Normal file
View File

@@ -0,0 +1,146 @@
<!-- Time Tracking Modals -->
<!-- Edit Entry Modal -->
<div id="edit-modal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Edit Time Entry</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<form id="edit-entry-form" class="modern-form">
<input type="hidden" id="edit-entry-id">
<div class="form-row">
<div class="form-group">
<label for="edit-arrival-date" class="form-label">Start Date</label>
<input type="date" id="edit-arrival-date" class="form-control" required>
</div>
<div class="form-group">
<label for="edit-arrival-time" class="form-label">Start Time</label>
<input type="time" id="edit-arrival-time" class="form-control" required step="60">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="edit-departure-date" class="form-label">End Date</label>
<input type="date" id="edit-departure-date" class="form-control">
</div>
<div class="form-group">
<label for="edit-departure-time" class="form-label">End Time</label>
<input type="time" id="edit-departure-time" class="form-control" step="60">
</div>
</div>
<div class="form-group">
<label for="edit-project" class="form-label">Project</label>
<select id="edit-project" class="form-control">
<option value="">No specific project</option>
{% for project in available_projects %}
<option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="edit-notes" class="form-label">Notes</label>
<textarea id="edit-notes" class="form-control" rows="3"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- Manual Entry Modal -->
<div id="manual-modal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Add Manual Time Entry</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<form id="manual-entry-form" class="modern-form">
<div class="form-row">
<div class="form-group">
<label for="manual-start-date" class="form-label">Start Date</label>
<input type="date" id="manual-start-date" class="form-control" required>
</div>
<div class="form-group">
<label for="manual-start-time" class="form-label">Start Time</label>
<input type="time" id="manual-start-time" class="form-control" required step="60">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="manual-end-date" class="form-label">End Date</label>
<input type="date" id="manual-end-date" class="form-control" required>
</div>
<div class="form-group">
<label for="manual-end-time" class="form-label">End Time</label>
<input type="time" id="manual-end-time" class="form-control" required step="60">
</div>
</div>
<div class="form-group">
<label for="manual-project" class="form-label">Project</label>
<select id="manual-project" name="project_id" class="form-control">
<option value="">No specific project</option>
{% for project in available_projects %}
<option value="{{ project.id }}">{{ project.code }} - {{ project.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group">
<label for="manual-task" class="form-label">Task</label>
<select id="manual-task" name="task_id" class="form-control" disabled>
<option value="">Select a project first</option>
</select>
</div>
<div class="form-group">
<label for="manual-break" class="form-label">Break Duration (minutes)</label>
<input type="number" id="manual-break" class="form-control" min="0" value="0">
</div>
<div class="form-group">
<label for="manual-notes" class="form-label">Notes</label>
<textarea id="manual-notes" class="form-control" rows="3" placeholder="Description of work performed"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Add Entry</button>
<button type="button" class="btn btn-ghost modal-cancel">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-content modal-small">
<div class="modal-header">
<h3 class="modal-title">Confirm Deletion</h3>
<button class="modal-close">&times;</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this time entry? This action cannot be undone.</p>
<input type="hidden" id="delete-entry-id">
</div>
<div class="modal-footer">
<button id="confirm-delete" class="btn btn-danger">Delete Entry</button>
<button class="btn btn-ghost modal-cancel">Cancel</button>
</div>
</div>
</div>

26
templates/admin_users.html
View File

@@ -7,7 +7,7 @@
<div class="header-content">
<div class="header-left">
<h1 class="page-title">
<span class="page-icon">👤</span>
<span class="page-icon"><i class="ti ti-user"></i></span>
User Management
</h1>
<p class="page-subtitle">Manage user accounts and permissions across your organization</p>
@@ -49,7 +49,7 @@
<!-- View Controls -->
<div class="view-controls">
<div class="search-container">
<span class="search-icon">🔍</span>
<span class="search-icon"><i class="ti ti-search"></i></span>
<input type="text"
class="search-input"
id="userSearch"
@@ -106,23 +106,23 @@
<div class="user-actions">
<a href="{{ url_for('users.edit_user', user_id=user.id) }}" class="btn btn-edit" title="Edit User">
<span class="icon">✏️</span>
<span class="icon"><i class="ti ti-pencil"></i></span>
Edit
</a>
{% if user.id != g.user.id %}
<form method="POST" action="{{ url_for('users.toggle_user_status', user_id=user.id) }}" class="status-form">
{% if user.is_blocked %}
<button type="submit" class="btn btn-unblock" title="Unblock User">
<span class="icon">🔓</span>
<span class="icon"><i class="ti ti-lock-open"></i></span>
</button>
{% else %}
<button type="submit" class="btn btn-block" title="Block User">
<span class="icon">🔒</span>
<span class="icon"><i class="ti ti-lock"></i></span>
</button>
{% endif %}
</form>
<button class="btn btn-delete" onclick="confirmDelete({{ user.id }}, '{{ user.username }}')" title="Delete User">
<span class="icon">🗑️</span>
<span class="icon"><i class="ti ti-trash"></i></span>
</button>
{% endif %}
</div>
@@ -174,22 +174,22 @@
<td>
<div class="table-actions">
<a href="{{ url_for('users.edit_user', user_id=user.id) }}" class="btn-action btn-edit" title="Edit">
<span class="icon">✏️</span>
<span class="icon"><i class="ti ti-pencil"></i></span>
</a>
{% if user.id != g.user.id %}
<form method="POST" action="{{ url_for('users.toggle_user_status', user_id=user.id) }}" class="inline-form">
{% if user.is_blocked %}
<button type="submit" class="btn-action btn-unblock" title="Unblock">
<span class="icon">🔓</span>
<span class="icon"><i class="ti ti-lock-open"></i></span>
</button>
{% else %}
<button type="submit" class="btn-action btn-block" title="Block">
<span class="icon">🔒</span>
<span class="icon"><i class="ti ti-lock"></i></span>
</button>
{% endif %}
</form>
<button class="btn-action btn-delete" onclick="confirmDelete({{ user.id }}, '{{ user.username }}')" title="Delete">
<span class="icon">🗑️</span>
<span class="icon"><i class="ti ti-trash"></i></span>
</button>
{% endif %}
</div>
@@ -203,14 +203,14 @@
<!-- No Results Message -->
<div class="no-results" id="noResults" style="display: none;">
<div class="empty-icon">🔍</div>
<div class="empty-icon"><i class="ti ti-search"></i></div>
<p class="empty-message">No users found matching your search</p>
<p class="empty-hint">Try searching with different keywords</p>
</div>
{% else %}
<!-- Empty State -->
<div class="empty-state">
<div class="empty-icon">👤</div>
<div class="empty-icon"><i class="ti ti-user"></i></div>
<h2 class="empty-title">No Users Yet</h2>
<p class="empty-message">Create your first user to get started</p>
<a href="{{ url_for('users.create_user') }}" class="btn btn-primary btn-lg">
@@ -236,7 +236,7 @@
<form id="delete-form" method="POST">
<button type="button" id="cancel-delete" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-danger">
<span class="icon">🗑️</span>
<span class="icon"><i class="ti ti-trash"></i></span>
Delete User
</button>
</form>

1242
templates/index.html
View File

File diff suppressed because it is too large Load Diff

32
templates/invitations/list.html
View File

@@ -7,7 +7,7 @@
<div class="header-content">
<div class="header-left">
<h1 class="page-title">
<span class="page-icon">📨</span>
<span class="page-icon"><i class="ti ti-mail"></i></span>
Invitations
</h1>
<p class="page-subtitle">Manage team invitations for {{ g.user.company.name }}</p>
@@ -45,7 +45,7 @@
{% if pending_invitations %}
<div class="section">
<h2 class="section-title">
<span class="icon">⏳</span>
<span class="icon"><i class="ti ti-hourglass"></i></span>
Pending Invitations
</h2>
<div class="invitations-list">
@@ -56,15 +56,15 @@
<h3 class="invitation-email">{{ invitation.email }}</h3>
<div class="invitation-meta">
<span class="meta-item">
<span class="icon">👤</span>
<span class="icon"><i class="ti ti-user"></i></span>
Role: {{ invitation.role }}
</span>
<span class="meta-item">
<span class="icon">📅</span>
<span class="icon"><i class="ti ti-calendar"></i></span>
Sent {{ invitation.created_at.strftime('%b %d, %Y') }}
</span>
<span class="meta-item">
<span class="icon">⏰</span>
<span class="icon"><i class="ti ti-clock"></i></span>
Expires {{ invitation.expires_at.strftime('%b %d, %Y') }}
</span>
</div>
@@ -72,13 +72,13 @@
<div class="invitation-actions">
<form method="POST" action="{{ url_for('invitations.resend_invitation', invitation_id=invitation.id) }}" style="display: inline;">
<button type="submit" class="btn btn-sm btn-secondary">
<span class="icon">🔄</span>
<span class="icon"><i class="ti ti-refresh"></i></span>
Resend
</button>
</form>
<form method="POST" action="{{ url_for('invitations.revoke_invitation', invitation_id=invitation.id) }}" style="display: inline;">
<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to revoke this invitation?');">
<span class="icon">❌</span>
<span class="icon"><i class="ti ti-x"></i></span>
Revoke
</button>
</form>
@@ -97,7 +97,7 @@
{% if accepted_invitations %}
<div class="section">
<h2 class="section-title">
<span class="icon">✅</span>
<span class="icon"><i class="ti ti-check"></i></span>
Accepted Invitations
</h2>
<div class="invitations-list">
@@ -108,18 +108,18 @@
<h3 class="invitation-email">{{ invitation.email }}</h3>
<div class="invitation-meta">
<span class="meta-item">
<span class="icon">👤</span>
<span class="icon"><i class="ti ti-user"></i></span>
Joined as: {{ invitation.accepted_by.username }} ({{ invitation.role }})
</span>
<span class="meta-item">
<span class="icon">📅</span>
<span class="icon"><i class="ti ti-calendar"></i></span>
Accepted {{ invitation.accepted_at.strftime('%b %d, %Y') }}
</span>
</div>
</div>
<div class="invitation-actions">
<a href="{{ url_for('users.view_user', user_id=invitation.accepted_by.id) }}" class="btn btn-sm btn-secondary">
<span class="icon">👁️</span>
<span class="icon"><i class="ti ti-eye"></i></span>
View User
</a>
</div>
@@ -137,7 +137,7 @@
{% if expired_invitations %}
<div class="section">
<h2 class="section-title">
<span class="icon">⏱️</span>
<span class="icon"><i class="ti ti-clock"></i></span>
Expired Invitations
</h2>
<div class="invitations-list">
@@ -148,11 +148,11 @@
<h3 class="invitation-email">{{ invitation.email }}</h3>
<div class="invitation-meta">
<span class="meta-item">
<span class="icon">👤</span>
<span class="icon"><i class="ti ti-user"></i></span>
Role: {{ invitation.role }}
</span>
<span class="meta-item">
<span class="icon">📅</span>
<span class="icon"><i class="ti ti-calendar"></i></span>
Expired {{ invitation.expires_at.strftime('%b %d, %Y') }}
</span>
</div>
@@ -160,7 +160,7 @@
<div class="invitation-actions">
<form method="POST" action="{{ url_for('invitations.resend_invitation', invitation_id=invitation.id) }}" style="display: inline;">
<button type="submit" class="btn btn-sm btn-primary">
<span class="icon">📤</span>
<span class="icon"><i class="ti ti-send"></i></span>
Send New Invitation
</button>
</form>
@@ -178,7 +178,7 @@
<!-- Empty State -->
{% if not pending_invitations and not accepted_invitations and not expired_invitations %}
<div class="empty-state">
<div class="empty-icon">📨</div>
<div class="empty-icon"><i class="ti ti-mail"></i></div>
<h3>No invitations yet</h3>
<p>Start building your team by sending invitations</p>
<a href="{{ url_for('invitations.send_invitation') }}" class="btn btn-primary">

8
templates/invitations/send.html
View File

@@ -7,7 +7,7 @@
<div class="header-content">
<div class="header-left">
<h1 class="page-title">
<span class="page-icon">✉️</span>
<span class="page-icon"><i class="ti ti-mail"></i></span>
Send Invitation
</h1>
<p class="page-subtitle">Invite team members to join {{ g.user.company.name }}</p>
@@ -60,7 +60,7 @@
<div class="info-panel">
<div class="info-item">
<span class="info-icon">📧</span>
<span class="info-icon"><i class="ti ti-mail-opened"></i></span>
<div class="info-content">
<h4>What happens next?</h4>
<ul>
@@ -75,7 +75,7 @@
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<span class="icon">📤</span>
<span class="icon"><i class="ti ti-send"></i></span>
Send Invitation
</button>
<a href="{{ url_for('invitations.list_invitations') }}" class="btn btn-ghost">
@@ -90,7 +90,7 @@
<div class="card preview-card">
<div class="card-header">
<h2 class="card-title">
<span class="icon">👁️</span>
<span class="icon"><i class="ti ti-eye"></i></span>
Email Preview
</h2>
</div>

25
templates/layout.html
View File

@@ -6,7 +6,11 @@
<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') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/hover-standards.css') }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
{% if g.user %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/time-tracking.css') }}">
{% endif %}
{% if not g.user %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/splash.css') }}">
{% endif %}
@@ -15,21 +19,12 @@
{% 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' }};
--primary-color: {{ g.branding.primary_color if g.branding else '#667eea' }};
--primary-gradient-start: {{ g.branding.primary_color if g.branding else '#667eea' }};
--primary-gradient-end: #764ba2;
}
.nav-icon {
color: rgb(116, 85, 175) /* var(--primary-color); */
}
a:hover {
color: var(--primary-color);
color: var(--primary-gradient-end);
}
.mobile-logo {
max-height: 30px;
@@ -216,7 +211,7 @@
<strong>Add your email address</strong> to enable account recovery and receive important notifications.
</span>
<a href="{{ url_for('profile') }}" class="btn btn-sm btn-primary">Add Email</a>
<button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session">×</button>
<button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session"><i class="ti ti-x"></i></button>
</div>
</div>
{% elif g.show_email_verification_nag %}
@@ -227,7 +222,7 @@
<strong>Please verify your email address</strong> to ensure you can recover your account if needed.
</span>
<a href="{{ url_for('profile') }}" class="btn btn-sm btn-warning">Verify Email</a>
<button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session">×</button>
<button class="email-nag-dismiss" onclick="dismissEmailNag()" title="Dismiss for this session"><i class="ti ti-x"></i></button>
</div>
</div>
{% endif %}

8
templates/notes_list.html
View File

@@ -129,25 +129,25 @@
{% if folder_filter %}
<span class="filter-tag">
<i class="ti ti-folder"></i> {{ folder_filter }}
<a href="{{ url_for('notes.notes_list', tag=tag_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter">×</a>
<a href="{{ url_for('notes.notes_list', tag=tag_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter"><i class="ti ti-x"></i></a>
</span>
{% endif %}
{% if tag_filter %}
<span class="filter-tag">
<i class="ti ti-tag"></i> {{ tag_filter }}
<a href="{{ url_for('notes.notes_list', folder=folder_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter">×</a>
<a href="{{ url_for('notes.notes_list', folder=folder_filter, visibility=visibility_filter, search=search_query) }}" class="remove-filter"><i class="ti ti-x"></i></a>
</span>
{% endif %}
{% if visibility_filter %}
<span class="filter-tag">
<i class="ti ti-eye"></i> {{ visibility_filter|title }}
<a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, search=search_query) }}" class="remove-filter">×</a>
<a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, search=search_query) }}" class="remove-filter"><i class="ti ti-x"></i></a>
</span>
{% endif %}
{% if search_query %}
<span class="filter-tag">
<i class="ti ti-search"></i> "{{ search_query }}"
<a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, visibility=visibility_filter) }}" class="remove-filter">×</a>
<a href="{{ url_for('notes.notes_list', folder=folder_filter, tag=tag_filter, visibility=visibility_filter) }}" class="remove-filter"><i class="ti ti-x"></i></a>
</span>
{% endif %}
<a href="{{ url_for('notes.notes_list') }}" class="clear-all">Clear all</a>

36
templates/profile.html
View File

@@ -24,7 +24,7 @@
<span class="stat-text">{{ user.team.name if user.team else 'No Team' }}</span>
</div>
<div class="stat-badge">
<span class="stat-icon">👤</span>
<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>
@@ -37,7 +37,7 @@
<div class="flash-messages">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
<span class="alert-icon">{% if category == 'success' %}✓{% elif category == 'error' %}✕{% else %}ℹ{% endif %}</span>
<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 %}
@@ -53,7 +53,7 @@
<div class="card avatar-card">
<div class="card-header">
<h2 class="card-title">
<span class="icon">🖼️</span>
<span class="icon"><i class="ti ti-photo"></i></span>
Profile Picture
</h2>
</div>
@@ -65,15 +65,15 @@
<div class="avatar-controls">
<div class="control-tabs">
<button class="tab-btn active" data-tab="default">
<span class="tab-icon">👤</span>
<span class="tab-icon"><i class="ti ti-user"></i></span>
Default
</button>
<button class="tab-btn" data-tab="upload">
<span class="tab-icon">📤</span>
<span class="tab-icon"><i class="ti ti-upload"></i></span>
Upload
</button>
<button class="tab-btn" data-tab="url">
<span class="tab-icon">🔗</span>
<span class="tab-icon"><i class="ti ti-link"></i></span>
URL
</button>
</div>
@@ -95,7 +95,7 @@
<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">📁</div>
<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>
@@ -107,7 +107,7 @@
<img id="upload-preview-img" src="" alt="Preview">
</div>
<button type="submit" class="btn btn-primary" id="upload-btn" disabled>
<span class="icon">⬆</span>
<span class="icon"><i class="ti ti-upload"></i></span>
Upload Avatar
</button>
</form>
@@ -124,7 +124,7 @@
<span class="form-hint">Enter a direct link to an image</span>
</div>
<button type="submit" class="btn btn-primary">
<span class="icon">✓</span>
<span class="icon"><i class="ti ti-check"></i></span>
Set Avatar URL
</button>
</form>
@@ -137,7 +137,7 @@
<div class="card">
<div class="card-header">
<h2 class="card-title">
<span class="icon">ℹ️</span>
<span class="icon"><i class="ti ti-info-circle"></i></span>
Account Information
</h2>
</div>
@@ -175,7 +175,7 @@
<div class="card">
<div class="card-header">
<h2 class="card-title">
<span class="icon">✉️</span>
<span class="icon"><i class="ti ti-mail"></i></span>
Email Settings
</h2>
</div>
@@ -198,14 +198,14 @@
</div>
{% elif not user.email %}
<div class="alert alert-info">
<span class="alert-icon">ℹ️</span>
<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">✓</span>
<span class="icon"><i class="ti ti-check"></i></span>
{% if user.email %}Update{% else %}Add{% endif %} Email
</button>
</div>
@@ -217,7 +217,7 @@
<div class="card">
<div class="card-header">
<h2 class="card-title">
<span class="icon">🔒</span>
<span class="icon"><i class="ti ti-lock"></i></span>
Security Settings
</h2>
</div>
@@ -251,7 +251,7 @@
<div class="form-actions">
<button type="submit" class="btn btn-warning">
<span class="icon">🔑</span>
<span class="icon"><i class="ti ti-key"></i></span>
Change Password
</button>
</div>
@@ -264,7 +264,7 @@
<div class="tfa-status">
{% if user.two_factor_enabled %}
<div class="status-indicator enabled">
<span class="status-icon">🛡️</span>
<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>
@@ -279,7 +279,7 @@
class="form-control" placeholder="Enter your password to disable 2FA" required>
</div>
<button type="submit" class="btn btn-danger">
<span class="icon">✕</span>
<span class="icon"><i class="ti ti-x"></i></span>
Disable 2FA
</button>
</form>
@@ -293,7 +293,7 @@
</div>
<a href="{{ url_for('setup_2fa') }}" class="btn btn-success">
<span class="icon">✓</span>
<span class="icon"><i class="ti ti-check"></i></span>
Enable 2FA
</a>
{% endif %}

10
templates/team_form.html
View File

@@ -72,7 +72,7 @@
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<span class="icon">✓</span>
<span class="icon"><i class="ti ti-check"></i></span>
{% if team %}Save Changes{% else %}Create Team{% endif %}
</button>
{% if not team %}
@@ -149,7 +149,7 @@
class="btn-icon btn-danger"
onclick="return confirm('Remove {{ member.username }} from the team?')"
title="Remove from team">
<span class="icon">×</span>
<span class="icon"><i class="ti ti-x"></i></span>
</button>
</form>
</div>
@@ -170,7 +170,7 @@
<div class="card add-member-card">
<div class="card-header">
<h2 class="card-title">
<span class="icon">➕</span>
<span class="icon"><i class="ti ti-plus"></i></span>
Add Team Member
</h2>
</div>
@@ -202,7 +202,7 @@
</form>
{% else %}
<div class="empty-state">
<div class="empty-icon">✓</div>
<div class="empty-icon"><i class="ti ti-check"></i></div>
<p class="empty-message">All users are assigned</p>
<p class="empty-hint">No available users to add to this team</p>
</div>
@@ -216,7 +216,7 @@
<div class="card info-card">
<div class="card-body">
<div class="info-content">
<div class="info-icon">💡</div>
<div class="info-icon"><i class="ti ti-bulb"></i></div>
<h3>Team Members</h3>
<p>After creating the team, you'll be able to add members and manage team composition from this page.</p>
</div>

1233
templates/time_tracking.html
View File

File diff suppressed because it is too large Load Diff

2
templates/unified_task_management.html
View File

@@ -10,7 +10,7 @@
<div class="smart-search-container">
<div class="smart-search-box">
<input type="text" id="smart-search-input" class="smart-search-input" placeholder="Search tasks... (e.g., my-tasks priority:high, project:TimeTrack, overdue)">
<button type="button" class="smart-search-clear" id="smart-search-clear" title="Clear search">×</button>
<button type="button" class="smart-search-clear" id="smart-search-clear" title="Clear search"><i class="ti ti-x"></i></button>
</div>
<div class="smart-search-suggestions" id="smart-search-suggestions" style="display: none;">
<!-- Suggestions will be populated here -->