diff --git a/frontend/assets/styles.css b/frontend/assets/styles.css index 3d64e62..2a62263 100644 --- a/frontend/assets/styles.css +++ b/frontend/assets/styles.css @@ -1,12 +1,43 @@ -:root{--bg:#0f1216;--surface:#151922;--surface-2:#1b2030;--primary:#4f8cff;--primary-600:#3b71db;--text:#e6e8ee;--text-2:#b3b8c6;--border:#2a3244;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444} -[data-theme="light"]{--bg:#f5f7fa;--surface:#ffffff;--surface-2:#f8f9fb;--primary:#4f8cff;--primary-600:#3b71db;--text:#1a1d23;--text-2:#6b7280;--border:#e5e7eb;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444} +:root{--bg:#0f1216;--surface:#151922;--surface-2:#1b2030;--primary:#4f8cff;--primary-600:#3b71db;--text:#e6e8ee;--text-2:#b3b8c6;--border:#2a3244;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#60a5fa;--info-bg:#1e3a5f;--success-bg:#14532d;--warning-bg:#422006} +[data-theme="light"]{--bg:#f5f7fa;--surface:#ffffff;--surface-2:#f8f9fb;--primary:#4f8cff;--primary-600:#3b71db;--text:#1a1d23;--text-2:#6b7280;--border:#e5e7eb;--success:#22c55e;--warning:#f59e0b;--danger:#ef4444;--info:#2196f3;--info-bg:#e3f2fd;--success-bg:#e8f5e9;--warning-bg:#fff3e0} *{box-sizing:border-box} html,body{height:100%;overflow:hidden} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;line-height:1.5} #app{display:flex;height:100vh;overflow:hidden} -.sidebar{width:240px;min-width:240px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow:hidden} -.brand{padding:16px 20px;font-weight:700;font-size:18px;color:var(--text)} -.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 8px 16px} +.sidebar{position:relative;width:240px;min-width:240px;background:linear-gradient(180deg,var(--surface),var(--surface-2));border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow:visible;transition:width 0.3s ease,min-width 0.3s ease} +.sidebar.collapsed{width:60px;min-width:60px} +.brand-container{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;gap:8px} +.loader-wrapper{position:relative;display:flex;align-items:center;gap:10px;height:40px;width:auto;user-select:none;flex:1;min-width:0} +.brand-logo{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary) 0%,var(--primary-600) 100%);border-radius:8px;flex-shrink:0;box-shadow:0 2px 8px rgba(79,140,255,0.3)} +.brand-logo svg{width:18px;height:18px;color:#fff} +.brand-logo.dollar-spinner{border-top:2px solid #eab308;background:#fde047;animation:spin 1s linear infinite;border-radius:50%;color:#a16207;font-weight:700;font-size:16px} +@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}} +.brand-text{display:flex;flex-direction:column;line-height:1.2;overflow:hidden} +.brand-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:0.5px;white-space:nowrap} +.brand-subtitle{font-size:10px;color:var(--text-2);letter-spacing:1px;text-transform:uppercase;font-weight:500;white-space:nowrap} +[data-theme="light"] .brand-title{color:#1a1d23} +[data-theme="light"] .brand-subtitle{color:#6b7280} +.sidebar.collapsed .brand-container{padding:8px;flex-direction:column;gap:8px} +.sidebar.collapsed .loader-wrapper{flex:0;justify-content:center} +.sidebar.collapsed .brand-text{display:none} +.sidebar.collapsed .brand-logo{width:40px;height:40px;border-radius:10px} +.sidebar.collapsed .brand-logo svg{width:22px;height:22px} +.sidebar.collapsed .brand-logo.dollar-spinner{border-radius:50%;font-size:20px} +.sidebar.collapsed .sidebar-toggle{width:40px;height:32px;background:rgba(79,140,255,0.08);border-radius:8px} +.sidebar-toggle{width:36px;height:36px;border:none;background:transparent;color:var(--text-2);cursor:pointer;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;flex-shrink:0} +.sidebar-toggle:hover{background:rgba(79,140,255,.12);color:var(--text)} +.sidebar-toggle svg{width:20px;height:20px;transition:transform 0.3s ease} +.sidebar.collapsed .sidebar-toggle svg{transform:rotate(180deg)} +.sidebar.collapsed .nav-group-title{opacity:0;height:0;padding:0;margin:0;overflow:hidden} +.sidebar.collapsed .nav-item .text,.sidebar.collapsed .nav-item-btn .text,.sidebar.collapsed .caret{display:none} +.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0;margin:4px 8px} +.sidebar.collapsed .nav-item .icon{width:24px;font-size:18px} +.sidebar.collapsed .nav-item-btn{justify-content:center;padding:10px 0;margin:4px 8px} +.sidebar.collapsed .nav-item-btn .icon{width:24px;font-size:18px} +.sidebar.collapsed .nav-children{display:none} +.sidebar.collapsed .theme-toggle-container{padding:4px;overflow:hidden;justify-content:center} +.sidebar.collapsed .bb8-toggle{transform:scale(0.5);transform-origin:center center} +.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 8px 16px;min-height:0} .nav-group{margin:8px 0} .nav-group-title{padding:8px 12px;color:var(--text-2);font-size:12px;letter-spacing:.04em;text-transform:uppercase} .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:4px;border-radius:8px;color:var(--text);text-decoration:none;font-size:14px} @@ -25,12 +56,7 @@ body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui .caret{margin-left:auto;transition:transform .2s ease} .caret.rotate{transform:rotate(90deg)} -.theme-toggle-container{padding:16px;border-top:1px solid var(--border);margin-top:auto} -.theme-toggle-btn{width:100%;display:flex;align-items:center;justify-content:center;padding:10px;background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all 0.2s ease} -.theme-toggle-btn:hover{background:rgba(79,140,255,.12);border-color:var(--primary)} -.theme-icon{width:20px;height:20px;filter:invert(1);transition:transform 0.3s ease} -[data-theme="light"] .theme-icon{filter:invert(0)} -.theme-toggle-btn:hover .theme-icon{transform:rotate(20deg)} +.theme-toggle-container{padding:16px;border-top:1px solid var(--border);margin-top:auto;display:flex;justify-content:center} .btn{border:0;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer;background:var(--primary);color:#ffffff} .btn:hover{background:var(--primary-600)} @@ -1014,10 +1040,32 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ } .export-field-item input[type="checkbox"] { - cursor: pointer; - width: 16px; - height: 16px; - accent-color: var(--primary); + display: none; +} +.export-field-item .field-checkmark { + width: 18px; + height: 18px; + border: 2px solid var(--border); + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + background: var(--surface); + transition: all 0.3s; + flex-shrink: 0; +} +.export-field-item .field-checkmark::before { + content: "\2713"; + font-size: 12px; + color: transparent; + font-weight: 600; +} +.export-field-item input[type="checkbox"]:checked + .field-checkmark { + background-color: var(--primary); + border-color: var(--primary); +} +.export-field-item input[type="checkbox"]:checked + .field-checkmark::before { + color: #fff; } .export-field-item span { @@ -1078,3 +1126,244 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover{ align-items: center; gap: 12px; } + +/* Brand shine animation */ +@-moz-keyframes shine { + 0% { background-position: 0; } + 60% { background-position: 180px; } + 100% { background-position: 180px; } +} +@-webkit-keyframes shine { + 0% { background-position: 0; } + 60% { background-position: 180px; } + 100% { background-position: 180px; } +} +@-o-keyframes shine { + 0% { background-position: 0; } + 60% { background-position: 180px; } + 100% { background-position: 180px; } +} +@keyframes shine { + 0% { background-position: 0; } + 60% { background-position: 180px; } + 100% { background-position: 180px; } +} + +/* Metrics Card Styles */ +.metrics-card { + padding: 1rem; + background-color: var(--surface); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + border-radius: 20px; + border: 1px solid var(--border); +} +.metrics-title { + display: flex; + align-items: center; +} +.metrics-icon { + position: relative; + padding: 0.5rem; + width: 2.5rem; + height: 2.5rem; + border-radius: 9999px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} +.metrics-icon svg { + color: #ffffff; + height: 1.25rem; + width: 1.25rem; +} +.metrics-title-text { + margin: 0; + margin-left: 0.5rem; + color: var(--text); + font-size: 14px; + font-weight: 600; +} +.metrics-percent { + margin: 0; + margin-left: auto; + font-weight: 600; + display: flex; + align-items: center; +} +.metrics-data { + display: flex; + flex-direction: column; + justify-content: flex-start; +} +.metrics-value { + margin: 0.75rem 0; + color: var(--text); + font-size: 1.75rem; + line-height: 2rem; + font-weight: 700; + text-align: left; +} +.metrics-range { + position: relative; + background-color: var(--border); + width: 100%; + height: 0.5rem; + border-radius: 0.25rem; +} +.metrics-fill { + position: absolute; + top: 0; + left: 0; + height: 100%; + border-radius: 0.25rem; + transition: width 0.3s ease; +} + +/* Custom Checkbox Styles */ +.custom-checkbox { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + user-select: none; +} +.custom-checkbox input[type="checkbox"] { + display: none; +} +.custom-checkbox .checkmark { + width: 20px; + height: 20px; + border: 2px solid var(--border); + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + background: var(--surface); + transition: background-color 0.3s, border-color 0.3s, transform 0.3s; + transform-style: preserve-3d; +} +.custom-checkbox .checkmark::before { + content: "\2713"; + font-size: 14px; + color: transparent; + transition: color 0.3s, transform 0.3s; + font-weight: 600; +} +.custom-checkbox input[type="checkbox"]:checked + .checkmark { + background-color: var(--primary); + border-color: var(--primary); + transform: scale(1.05) rotateZ(360deg); +} +.custom-checkbox input[type="checkbox"]:checked + .checkmark::before { + color: #fff; +} +.custom-checkbox:hover .checkmark { + border-color: var(--primary); + background-color: rgba(79, 140, 255, 0.1); + transform: scale(1.05); +} +.custom-checkbox input[type="checkbox"]:focus + .checkmark { + box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.2); + outline: none; +} +[data-theme="light"] .custom-checkbox .checkmark { + border-color: #d1d5db; + background: #fff; +} +[data-theme="light"] .custom-checkbox:hover .checkmark { + border-color: var(--primary); + background-color: rgba(79, 140, 255, 0.08); +} + +/* Truck Loader Animation */ +.truck-loader { + width: 200px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + transform: scale(0.18); + transform-origin: center center; +} +.truck-wrapper { + width: 200px; + height: 100px; + display: flex; + flex-direction: column; + position: relative; + align-items: center; + justify-content: flex-end; + overflow-x: hidden; +} +.truck-body { + width: 130px; + height: fit-content; + margin-bottom: 6px; + animation: truck-motion 1s linear infinite; +} +.truck-body .trucksvg { + width: 100%; + height: auto; +} +@keyframes truck-motion { + 0% { transform: translateY(0px); } + 50% { transform: translateY(3px); } + 100% { transform: translateY(0px); } +} +.truck-tires { + width: 130px; + height: fit-content; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0px 10px 0px 15px; + position: absolute; + bottom: 0; +} +.truck-tires .tiresvg { + width: 24px; +} +.truck-road { + width: 100%; + height: 1.5px; + background-color: #282828; + position: relative; + bottom: 0; + align-self: flex-end; + border-radius: 3px; +} +.truck-road::before { + content: ""; + position: absolute; + width: 20px; + height: 100%; + background-color: #282828; + right: -50%; + border-radius: 3px; + animation: truck-road-anim 1.4s linear infinite; + border-left: 10px solid white; +} +.truck-road::after { + content: ""; + position: absolute; + width: 10px; + height: 100%; + background-color: #282828; + right: -65%; + border-radius: 3px; + animation: truck-road-anim 1.4s linear infinite; + border-left: 4px solid white; +} +@keyframes truck-road-anim { + 0% { transform: translateX(0px); } + 100% { transform: translateX(-350px); } +} +.truck-lamp { + position: absolute; + bottom: 0; + right: -90%; + height: 500px; + animation: truck-road-anim 1.4s linear infinite; + fill: #282828; +} diff --git a/frontend/index.html b/frontend/index.html index 27c54d4..78eaf7e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -7,13 +7,28 @@ - + +
-