diff --git a/.agents/rules/utilizzo-di-git.md b/.agents/rules/utilizzo-di-git.md new file mode 100644 index 0000000..513a1d3 --- /dev/null +++ b/.agents/rules/utilizzo-di-git.md @@ -0,0 +1,6 @@ +--- +trigger: always_on +glob: +description: +--- + diff --git a/.env.example b/.env.example index b0b6768..481f866 100644 --- a/.env.example +++ b/.env.example @@ -17,3 +17,10 @@ PORT=3000 OTRS_API_USER=root@localhost OTRS_API_PASSWORD=your_password_here OTRS_API_URL=http://your_otrs_host_or_ip/otrs/nph-genericinterface.pl/Webservice/GenericTicketConnectorREST + +#Variabile per il Tempo di consultivazione giornaliero +DAILY_TARGET_TIME=480 + +#Variabile per la numerazione dei ticket +OTRS_SYSTEM_ID=10 +OTRS_COUNTER_PADDING=6 \ No newline at end of file diff --git a/public/css/style.css b/public/css/style.css index ece5118..cb631e1 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -5,59 +5,59 @@ /* ---- CSS Variables / Design Tokens ---- */ :root { - /* Base colors */ - --bg-primary: #0b0e14; - --bg-secondary: #111827; - --bg-tertiary: #1a2234; - --bg-card: rgba(17, 24, 39, 0.7); - --bg-card-hover: rgba(26, 34, 52, 0.85); - --bg-glass: rgba(17, 24, 39, 0.55); + /* Base colors - Light Theme Default */ + --bg-primary: #f8fafc; + --bg-secondary: #ffffff; + --bg-tertiary: #f1f5f9; + --bg-card: #ffffff; + --bg-card-hover: #f8fafc; + --bg-glass: rgba(255, 255, 255, 0.8); /* Accent */ - --accent-primary: #6366f1; - --accent-primary-hover: #818cf8; - --accent-primary-glow: rgba(99, 102, 241, 0.3); - --accent-secondary: #8b5cf6; + --accent-primary: #4f46e5; + --accent-primary-hover: #4338ca; + --accent-primary-glow: rgba(79, 70, 229, 0.15); + --accent-secondary: #7c3aed; /* Text */ - --text-primary: #f1f5f9; - --text-secondary: #94a3b8; + --text-primary: #0f172a; + --text-secondary: #475569; --text-tertiary: #64748b; - --text-muted: #475569; + --text-muted: #94a3b8; /* Borders */ - --border-subtle: rgba(148, 163, 184, 0.08); - --border-light: rgba(148, 163, 184, 0.15); - --border-accent: rgba(99, 102, 241, 0.3); + --border-subtle: rgba(15, 23, 42, 0.05); + --border-light: rgba(15, 23, 42, 0.1); + --border-accent: rgba(79, 70, 229, 0.2); /* Priority colors */ - --priority-1-bg: rgba(30, 58, 95, 0.5); - --priority-1-text: #60a5fa; - --priority-2-bg: rgba(30, 70, 50, 0.5); - --priority-2-text: #4ade80; - --priority-3-bg: rgba(80, 65, 20, 0.5); - --priority-3-text: #facc15; - --priority-4-bg: rgba(100, 50, 15, 0.5); - --priority-4-text: #fb923c; - --priority-5-bg: rgba(100, 20, 20, 0.5); - --priority-5-text: #f87171; + --priority-1-bg: #eff6ff; + --priority-1-text: #1d4ed8; + --priority-2-bg: #f0fdf4; + --priority-2-text: #15803d; + --priority-3-bg: #fef9c3; + --priority-3-text: #854d0e; + --priority-4-bg: #ffedd5; + --priority-4-text: #c2410c; + --priority-5-bg: #fef2f2; + --priority-5-text: #b91c1c; /* State colors */ - --state-new: #38bdf8; - --state-open: #6366f1; - --state-pending: #f59e0b; - --state-closed: #64748b; - --state-removed: #ef4444; + --state-new: #0284c7; + --state-open: #4f46e5; + --state-pending: #d97706; + --state-closed: #475569; + --state-removed: #dc2626; /* Semantic */ - --success: #22c55e; - --success-bg: rgba(34, 197, 94, 0.12); - --warning: #f59e0b; - --warning-bg: rgba(245, 158, 11, 0.12); - --error: #ef4444; - --error-bg: rgba(239, 68, 68, 0.12); - --info: #38bdf8; - --info-bg: rgba(56, 189, 248, 0.12); + --success: #16a34a; + --success-bg: rgba(22, 163, 74, 0.1); + --warning: #d97706; + --warning-bg: rgba(217, 119, 6, 0.1); + --error: #dc2626; + --error-bg: rgba(220, 38, 38, 0.1); + --info: #0284c7; + --info-bg: rgba(2, 132, 199, 0.1); /* Spacing */ --space-xs: 4px; @@ -75,9 +75,9 @@ --radius-full: 9999px; /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-glow: 0 0 20px var(--accent-primary-glow); /* Layout */ @@ -90,6 +90,186 @@ --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); } +/* ========================================== + Alternative Dark & Custom Themes + ========================================== */ + +/* Helpers for dark priority variables */ +.theme-dark, +.theme-rosso, +.theme-naturale, +.theme-ice, +.theme-autunno, +.theme-fairytale { + --priority-1-bg: rgba(30, 58, 95, 0.5); + --priority-1-text: #60a5fa; + --priority-2-bg: rgba(30, 70, 50, 0.5); + --priority-2-text: #4ade80; + --priority-3-bg: rgba(80, 65, 20, 0.5); + --priority-3-text: #facc15; + --priority-4-bg: rgba(100, 50, 15, 0.5); + --priority-4-text: #fb923c; + --priority-5-bg: rgba(100, 20, 20, 0.5); + --priority-5-text: #f87171; + + --state-new: #38bdf8; + --state-open: #6366f1; + --state-pending: #f59e0b; + --state-closed: #64748b; + --state-removed: #ef4444; + + --success: #22c55e; + --success-bg: rgba(34, 197, 94, 0.12); + --warning: #f59e0b; + --warning-bg: rgba(245, 158, 11, 0.12); + --error: #ef4444; + --error-bg: rgba(239, 68, 68, 0.12); + --info: #38bdf8; + --info-bg: rgba(56, 189, 248, 0.12); + + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); +} + +body.theme-dark { + --bg-primary: #0b0e14; + --bg-secondary: #111827; + --bg-tertiary: #1a2234; + --bg-card: rgba(17, 24, 39, 0.7); + --bg-card-hover: rgba(26, 34, 52, 0.85); + --bg-glass: rgba(17, 24, 39, 0.55); + + --accent-primary: #6366f1; + --accent-primary-hover: #818cf8; + --accent-primary-glow: rgba(99, 102, 241, 0.3); + --accent-secondary: #8b5cf6; + + --text-primary: #f1f5f9; + --text-secondary: #94a3b8; + --text-tertiary: #64748b; + --text-muted: #475569; + + --border-subtle: rgba(148, 163, 184, 0.08); + --border-light: rgba(148, 163, 184, 0.15); + --border-accent: rgba(99, 102, 241, 0.3); +} + +body.theme-rosso { + --bg-primary: #1f0002; + --bg-secondary: #3d0004; + --bg-tertiary: #620007; + --bg-card: rgba(61, 0, 4, 0.7); + --bg-card-hover: rgba(98, 0, 7, 0.85); + --bg-glass: rgba(31, 0, 2, 0.6); + + --accent-primary: #fd5d41; + --accent-primary-hover: #ff7e67; + --accent-primary-glow: rgba(253, 93, 65, 0.3); + --accent-secondary: #fec4a1; + + --text-primary: #fed8b9; + --text-secondary: #fec4a1; + --text-tertiary: #c48375; + --text-muted: #8d4f45; + + --border-subtle: rgba(254, 196, 161, 0.08); + --border-light: rgba(254, 196, 161, 0.15); + --border-accent: rgba(253, 93, 65, 0.3); +} + +body.theme-naturale { + --bg-primary: #181007; + --bg-secondary: #271a0b; + --bg-tertiary: #39271b; + --bg-card: rgba(39, 26, 11, 0.7); + --bg-card-hover: rgba(57, 39, 27, 0.85); + --bg-glass: rgba(24, 16, 7, 0.6); + + --accent-primary: #a8ae7b; + --accent-primary-hover: #c4ca9a; + --accent-primary-glow: rgba(168, 174, 123, 0.3); + --accent-secondary: #4b57de; + + --text-primary: #f3efe9; + --text-secondary: #baa820; + --text-tertiary: #a8ae7b; + --text-muted: #736952; + + --border-subtle: rgba(168, 174, 123, 0.08); + --border-light: rgba(168, 174, 123, 0.15); + --border-accent: rgba(168, 174, 123, 0.3); +} + +body.theme-ice { + --bg-primary: #0b1822; + --bg-secondary: #162c3d; + --bg-tertiary: #235878; + --bg-card: rgba(22, 44, 61, 0.7); + --bg-card-hover: rgba(35, 88, 120, 0.85); + --bg-glass: rgba(11, 24, 34, 0.6); + + --accent-primary: #719ebd; + --accent-primary-hover: #8fb6d2; + --accent-primary-glow: rgba(113, 158, 189, 0.3); + --accent-secondary: #497591; + + --text-primary: #f0f6fa; + --text-secondary: #a3c4dc; + --text-tertiary: #80a9c7; + --text-muted: #5e839f; + + --border-subtle: rgba(163, 196, 220, 0.08); + --border-light: rgba(163, 196, 220, 0.15); + --border-accent: rgba(113, 158, 189, 0.3); +} + +body.theme-autunno { + --bg-primary: #161216; + --bg-secondary: #2d1d0f; + --bg-tertiary: #472e18; + --bg-card: rgba(45, 29, 15, 0.7); + --bg-card-hover: rgba(71, 46, 24, 0.85); + --bg-glass: rgba(22, 18, 22, 0.6); + + --accent-primary: #a46a02; + --accent-primary-hover: #c4840b; + --accent-primary-glow: rgba(164, 106, 2, 0.3); + --accent-secondary: #8d5203; + + --text-primary: #faf6f0; + --text-secondary: #eed4b3; + --text-tertiary: #cda371; + --text-muted: #a48259; + + --border-subtle: rgba(164, 106, 2, 0.15); + --border-light: rgba(164, 106, 2, 0.25); + --border-accent: rgba(164, 106, 2, 0.4); +} + +body.theme-fairytale { + --bg-primary: #2a1d28; + --bg-secondary: #443241; + --bg-tertiary: #4f3558; + --bg-card: rgba(68, 50, 65, 0.88); + --bg-card-hover: rgba(85, 62, 81, 0.95); + --bg-glass: rgba(42, 29, 40, 0.75); + + --accent-primary: #e67dcf; + --accent-primary-hover: #fcaae7; + --accent-primary-glow: rgba(230, 125, 207, 0.35); + --accent-secondary: #c971ba; + + --text-primary: #fdf4fa; + --text-secondary: #f3bae2; + --text-tertiary: #dfa0cf; + --text-muted: #bd8eaf; + + --border-subtle: rgba(243, 186, 226, 0.08); + --border-light: rgba(243, 186, 226, 0.15); + --border-accent: rgba(230, 125, 207, 0.3); +} + /* ---- Reset & Base ---- */ *, *::before, @@ -747,6 +927,11 @@ body { box-shadow: inset 3px 0 0 var(--accent-primary); } +.ticket-table tbody tr.first-selected { + background: rgba(160, 65, 71, 0.32) !important; + box-shadow: inset 6px 0 0 var(--accent-primary) !important; +} + .ticket-table .checkbox-cell { width: 40px; text-align: center; @@ -2038,4 +2223,132 @@ body { padding: 1px 4px; border-radius: 6px; font-weight: bold; +} + +/* ============================================================ + Quill Editor Custom Theme Integration + ============================================================ */ +.ql-toolbar.ql-snow { + background: var(--bg-secondary) !important; + border: 1px solid var(--border-light) !important; + border-bottom: none !important; + border-radius: var(--radius-md) var(--radius-md) 0 0 !important; +} + +.ql-container.ql-snow { + background: var(--bg-tertiary) !important; + border: 1px solid var(--border-light) !important; + border-radius: 0 0 var(--radius-md) var(--radius-md) !important; + color: var(--text-primary) !important; + font-family: inherit !important; +} + +.ql-editor { + min-height: 200px; + font-family: inherit !important; + font-size: 0.95rem !important; +} + +.ql-snow .ql-stroke { + stroke: var(--text-secondary) !important; +} + +.ql-snow .ql-fill { + fill: var(--text-secondary) !important; +} + +.ql-snow .ql-picker { + color: var(--text-secondary) !important; +} + +.ql-snow .ql-picker-options { + background-color: var(--bg-secondary) !important; + border-color: var(--border-light) !important; +} + +.ql-snow .ql-picker-item { + color: var(--text-secondary) !important; +} + +.ql-snow.ql-toolbar button:hover, +.ql-snow .ql-toolbar button:hover, +.ql-snow.ql-toolbar button:focus, +.ql-snow .ql-toolbar button:focus, +.ql-snow.ql-toolbar button.ql-active, +.ql-snow .ql-toolbar button.ql-active, +.ql-snow.ql-toolbar .ql-picker-label:hover, +.ql-snow .ql-toolbar .ql-picker-label:hover, +.ql-snow.ql-toolbar .ql-picker-label.ql-active, +.ql-snow .ql-toolbar .ql-picker-label.ql-active { + color: var(--accent-primary) !important; +} + +.ql-snow.ql-toolbar button:hover .ql-stroke, +.ql-snow .ql-toolbar button:hover .ql-stroke, +.ql-snow.ql-toolbar button.ql-active .ql-stroke, +.ql-snow .ql-toolbar button.ql-active .ql-stroke { + stroke: var(--accent-primary) !important; +} + +.ql-snow.ql-toolbar button:hover .ql-fill, +.ql-snow .ql-toolbar button:hover .ql-fill, +.ql-snow.ql-toolbar button.ql-active .ql-fill, +.ql-snow .ql-toolbar button.ql-active .ql-fill { + fill: var(--accent-primary) !important; +} + +/* ============================================================ + Daily Timer Tooltip & Progress Bar + ============================================================ */ +.sidebar-timer { + position: relative; + cursor: pointer; +} + +.timer-tooltip { + position: absolute; + left: 105%; + top: 50%; + transform: translateY(-50%) translateX(-8px); + width: 290px; + background: var(--bg-secondary); + border: 1px solid var(--border-light); + border-radius: var(--radius-md); + padding: var(--space-md); + box-shadow: var(--shadow-lg); + opacity: 0; + pointer-events: none; + transition: all var(--transition-base); + z-index: 1000; + display: flex; + flex-direction: column; + gap: var(--space-sm); +} + +.timer-tooltip::after { + content: ""; + position: absolute; + top: 50%; + right: 100%; + transform: translateY(-50%); + border-width: 6px; + border-style: solid; + border-color: transparent var(--bg-secondary) transparent transparent; +} + +.timer-tooltip-border { + position: absolute; + top: 50%; + right: 100%; + transform: translateY(-50%); + border-width: 7px; + border-style: solid; + border-color: transparent var(--border-light) transparent transparent; + z-index: 999; +} + +.sidebar-timer:hover .timer-tooltip { + opacity: 1; + transform: translateY(-50%) translateX(0); + pointer-events: auto; } \ No newline at end of file diff --git a/public/demotivational.txt b/public/demotivational.txt new file mode 100644 index 0000000..78f660a --- /dev/null +++ b/public/demotivational.txt @@ -0,0 +1,16 @@ +Lavora duro così il tuo capo potrà comprarsi una macchina nuova l'anno prossimo. +Se pensi che a nessuno importi se sei vivo, prova a saltare un giorno di lavoro. +Nessuno è inutile, puoi sempre essere usato come cattivo esempio. +Il lavoro di squadra è essenziale: ti permette di dare la colpa a qualcun altro. +Arrendersi è molto più facile che provarci e poi fallire ugualmente. +Le cose peggioreranno prima di diventare insostenibili. +Ogni giorno è un'opportunità per fare un altro passo verso la pensione che non avrai. +Ricorda: il lavoro nobilita l'uomo, ma rende ricchi gli altri. +La luce in fondo al tunnel è stata spenta per risparmiare energia. +Non rimandare a domani quello che puoi evitare del tutto. +Fai oggi quello che puoi rimandare a domani: così domani non avrai nulla da fare. +Se l'esperienza fosse così importante, non ti pagherebbero così poco per averla. +I campioni non si arrendono mai, ma tu non sei un campione. +Chi fa da sé fa per tre, chi fa in squadra fa ricorso. +Il successo è l'abilità di andare da un fallimento all'altro senza perdere l'entusiasmo. +L'unico posto in cui il successo viene prima del lavoro è il dizionario. diff --git a/public/index.html b/public/index.html index b951b90..e68eda7 100644 --- a/public/index.html +++ b/public/index.html @@ -1,31 +1,39 @@ +
- +