{"project":{"id":"eC5c8lX","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"demo","visible":true,"contributors":"","githubRepo":null,"forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"\n\n\n \n \n Untitled\n \n\n\n\n\n\n\n
\n\t\n\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

Welcome in, User....

\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tInterviews\n\t\t\t\t\t\t15%\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tHired\n\t\t\t\t\t\t15%\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tProject time\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t60%\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tOutput\n\t\t\t\t\t\t10%\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t78\n\t\t\t\t\tEmployee\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t56\n\t\t\t\t\tHirings\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t203\n\t\t\t\t\tProjects\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\t\"Lora\n\t\t\t\t
\n\t\t\t\t\t

Lora Piterson

\n\t\t\t\t\t

UX/UI Designer

\n\t\t\t\t
\n\t\t\t\t$1,200\n\t\t\t
\n\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Progress

\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t6.1 h\n\t\t\t\t\tWork Time
this week\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
5h 23m
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tS\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tM\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tT\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tW\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tT\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tF\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tS\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Time tracker

\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t02:35\n\t\t\t\t\t\t\tWork Time\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Onboarding

\n\t\t\t\t\t\t18%\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t30%\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t25%\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t0%\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tTask\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Onboarding Task

\n\t\t\t\t\t\t2/8\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tInterview\n\t\t\t\t\t\t\t\tSep 13, 08:30\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tTeam Meeting\n\t\t\t\t\t\t\t\tSep 13, 10:30\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tProject Update\n\t\t\t\t\t\t\t\tSep 13, 13:00\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tDiscuss Q3 Goals\n\t\t\t\t\t\t\t\tSep 13, 14:45\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tHR Policy Review\n\t\t\t\t\t\t\t\tSep 13, 16:30\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tPension contributions\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tDevices\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\"MacBook\"\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\tMacBook Air\n\t\t\t\t\t\t\t\t\tVersion M1\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tCompensation Summary\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tEmployee Benefits\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t

September 2024

\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tMonTueWedThuFriSat\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t222324252627\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t8:00 am\n\t\t\t\t\t\t9:00 am\n\t\t\t\t\t\t10:00 am\n\t\t\t\t\t\t11:00 am\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tWeekly Team Sync\n\t\t\t\t\t\t\t\tDiscuss progress on projects\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\tOnboarding Session\n\t\t\t\t\t\t\t\tIntroduction for new hires\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
\n
\n \n\n"},{"name":"main.js","content":"// Initialize Lucide icons\nlucide.createIcons();"},{"name":"style.css","content":"@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');\n\n:root {\n\tcolor-scheme: light;\n\tfont-family: 'DM Sans', sans-serif;\n\t--bg: #f0ecdf;\n\t--bg-gradient: linear-gradient(135deg, #e8e4d4 0%, #f5f0dc 40%, #faf5e4 70%, #f0ecdf 100%);\n\t--card-bg: rgba(255, 255, 255, 0.45);\n\t--card-bg-solid: #faf8f0;\n\t--yellow: #f5c842;\n\t--yellow-light: #fef3c7;\n\t--dark: #2a2a2a;\n\t--dark-card: #3a3a3a;\n\t--gray: #888;\n\t--text: #1a1a1a;\n\t--text-light: #666;\n\t--border: rgba(0, 0, 0, 0.08);\n\t--radius: 16px;\n\t--radius-sm: 10px;\n}\n\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbody {\n\tbackground: var(--bg-gradient);\n\tcolor: var(--text);\n\tmin-height: 100vh;\n\toverflow-x: hidden;\n}\n\n.icon-sm {\n\twidth: 16px;\n\theight: 16px;\n}\n\n.icon-md {\n\twidth: 20px;\n\theight: 20px;\n}\n\n/* NAV */\n.nav {\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 16px 28px;\n\tgap: 16px;\n}\n\n.nav__logo {\n\tfont-size: 18px;\n\tfont-weight: 600;\n\tpadding: 8px 18px;\n\tborder: 1.5px solid var(--dark);\n\tborder-radius: 10px;\n\tletter-spacing: -0.3px;\n\tflex-shrink: 0;\n}\n\n.nav__links {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0;\n\tbackground: rgba(255, 255, 255, 0.5);\n\tborder-radius: 30px;\n\tpadding: 4px;\n\tmargin-left: auto;\n}\n\n.nav__link {\n\tpadding: 10px 18px;\n\tfont-size: 13.5px;\n\tfont-weight: 500;\n\tcolor: var(--text-light);\n\tcursor: pointer;\n\tborder-radius: 26px;\n\ttransition: all 0.2s;\n\twhite-space: nowrap;\n}\n\n.nav__link--active {\n\tbackground: var(--dark);\n\tcolor: #fff;\n}\n\n.nav__link:hover:not(.nav__link--active) {\n\tcolor: var(--text);\n}\n\n.nav__actions {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tmargin-left: auto;\n}\n\n.nav__setting {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tpadding: 10px 18px;\n\tborder: 1.5px solid var(--border);\n\tborder-radius: 26px;\n\tbackground: rgba(255, 255, 255, 0.6);\n\tfont-size: 13.5px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\tcolor: var(--text);\n\tfont-family: inherit;\n}\n\n.nav__icon-btn {\n\twidth: 40px;\n\theight: 40px;\n\tborder-radius: 50%;\n\tborder: 1.5px solid var(--border);\n\tbackground: rgba(255, 255, 255, 0.4);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\tcolor: var(--text);\n}\n\n/* CONTENT */\n.content {\n\tpadding: 0 28px 28px;\n}\n\n/* HEADER */\n.header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 20px;\n}\n\n.header__title {\n\tfont-size: 38px;\n\tfont-weight: 700;\n\tletter-spacing: -1px;\n\tmargin-bottom: 16px;\n}\n\n.header__metrics {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tgap: 16px;\n}\n\n.metric {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 6px;\n}\n\n.metric__label {\n\tfont-size: 13px;\n\tcolor: var(--text-light);\n\tfont-weight: 500;\n}\n\n.metric__badge {\n\tpadding: 8px 20px;\n\tborder-radius: 20px;\n\tfont-size: 13px;\n\tfont-weight: 600;\n}\n\n.metric__badge--dark {\n\tbackground: var(--dark);\n\tcolor: #fff;\n}\n\n.metric__badge--yellow {\n\tbackground: var(--yellow);\n\tcolor: var(--dark);\n}\n\n.metric__badge--outline {\n\tbackground: rgba(255, 255, 255, 0.6);\n\tborder: 1.5px solid var(--border);\n\tcolor: var(--text-light);\n}\n\n.metric__bar {\n\tposition: relative;\n\twidth: 240px;\n\theight: 38px;\n\tbackground: rgba(255, 255, 255, 0.5);\n\tborder-radius: 20px;\n\toverflow: hidden;\n}\n\n.metric__bar-fill {\n\theight: 100%;\n\tbackground: linear-gradient(90deg, #d6d0c0 0%, #e8e2d0 100%);\n\tborder-radius: 20px;\n}\n\n.metric__bar-text {\n\tposition: absolute;\n\tleft: 12px;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\tfont-size: 13px;\n\tfont-weight: 600;\n\tcolor: var(--text);\n}\n\n.header__stats {\n\tdisplay: flex;\n\tgap: 32px;\n\talign-items: flex-end;\n\tpadding-top: 10px;\n}\n\n.stat {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tflex-wrap: wrap;\n}\n\n.stat__icon {\n\twidth: 20px;\n\theight: 20px;\n\tcolor: var(--text-light);\n}\n\n.stat__number {\n\tfont-size: 52px;\n\tfont-weight: 300;\n\tletter-spacing: -2px;\n\tline-height: 1;\n}\n\n.stat__label {\n\tfont-size: 12px;\n\tcolor: var(--text-light);\n\twidth: 100%;\n\ttext-align: right;\n}\n\n/* MAIN GRID */\n.main-grid {\n\tdisplay: grid;\n\tgrid-template-columns: 270px 1fr 1fr 280px;\n\tgrid-template-rows: auto auto;\n\tgap: 16px;\n}\n\n/* EMPLOYEE CARD */\n.employee-card {\n\tgrid-row: 1;\n\tgrid-column: 1;\n\tposition: relative;\n\tborder-radius: var(--radius);\n\toverflow: hidden;\n\theight: 310px;\n}\n\n.employee-card__img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n.employee-card__info {\n\tposition: absolute;\n\tbottom: 16px;\n\tleft: 16px;\n}\n\n.employee-card__name {\n\tcolor: #fff;\n\tfont-size: 18px;\n\tfont-weight: 600;\n\ttext-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n\n.employee-card__role {\n\tcolor: rgba(255, 255, 255, 0.8);\n\tfont-size: 12px;\n\ttext-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n\n.employee-card__salary {\n\tposition: absolute;\n\tbottom: 20px;\n\tright: 16px;\n\tbackground: var(--dark);\n\tcolor: #fff;\n\tpadding: 10px 20px;\n\tborder-radius: 24px;\n\tfont-size: 14px;\n\tfont-weight: 600;\n}\n\n/* CARD SHARED */\n.card-title {\n\tfont-size: 18px;\n\tfont-weight: 600;\n}\n\n.card-arrow {\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\tborder: 1.5px solid var(--border);\n\tbackground: rgba(255, 255, 255, 0.6);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\tcolor: var(--text);\n}\n\n/* PROGRESS CARD */\n.progress-card {\n\tgrid-row: 1;\n\tgrid-column: 2;\n\tbackground: var(--card-bg);\n\tborder-radius: var(--radius);\n\tpadding: 20px;\n\tbackdrop-filter: blur(10px);\n\tborder: 1px solid rgba(255, 255, 255, 0.5);\n}\n\n.progress-card__header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 12px;\n}\n\n.progress-card__time {\n\tdisplay: flex;\n\talign-items: baseline;\n\tgap: 10px;\n\tmargin-bottom: 16px;\n}\n\n.progress-card__hours {\n\tfont-size: 36px;\n\tfont-weight: 300;\n\tletter-spacing: -1px;\n}\n\n.progress-card__desc {\n\tfont-size: 12px;\n\tcolor: var(--text-light);\n\tline-height: 1.3;\n}\n\n/* BAR CHART */\n.bar-chart {\n\tposition: relative;\n\theight: 160px;\n}\n\n.bar-chart__tooltip {\n\tposition: absolute;\n\ttop: -4px;\n\tright: 60px;\n\tbackground: var(--yellow);\n\tcolor: var(--dark);\n\tpadding: 4px 10px;\n\tborder-radius: 12px;\n\tfont-size: 11px;\n\tfont-weight: 600;\n\tz-index: 2;\n}\n\n.bar-chart__bars {\n\tdisplay: flex;\n\talign-items: flex-end;\n\tjustify-content: space-between;\n\theight: 140px;\n\tgap: 6px;\n}\n\n.bar-chart__col {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 3px;\n\tflex: 1;\n\theight: 100%;\n\tjustify-content: flex-end;\n}\n\n.bar-chart__bar {\n\twidth: 8px;\n\tborder-radius: 4px;\n\tmin-height: 4px;\n}\n\n.bar-chart__bar--gray {\n\tbackground: #ccc;\n}\n\n.bar-chart__bar--dark {\n\tbackground: var(--dark);\n}\n\n.bar-chart__bar--yellow {\n\tbackground: var(--yellow);\n}\n\n.bar-chart__label {\n\tfont-size: 11px;\n\tcolor: var(--text-light);\n\tmargin-top: 6px;\n}\n\n/* TIME TRACKER */\n.time-card {\n\tgrid-row: 1;\n\tgrid-column: 3;\n\tbackground: var(--card-bg);\n\tborder-radius: var(--radius);\n\tpadding: 20px;\n\tbackdrop-filter: blur(10px);\n\tborder: 1px solid rgba(255, 255, 255, 0.5);\n}\n\n.time-card__header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 8px;\n}\n\n.time-card__clock {\n\tdisplay: flex;\n\tjustify-content: center;\n\tpadding: 10px 0;\n}\n\n.clock-ring {\n\tposition: relative;\n\twidth: 190px;\n\theight: 190px;\n}\n\n.clock-ring__svg {\n\twidth: 100%;\n\theight: 100%;\n}\n\n.clock-ring__center {\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n\ttext-align: center;\n}\n\n.clock-ring__time {\n\tfont-size: 38px;\n\tfont-weight: 300;\n\tletter-spacing: -1px;\n\tdisplay: block;\n}\n\n.clock-ring__label {\n\tfont-size: 12px;\n\tcolor: var(--text-light);\n}\n\n.time-card__controls {\n\tdisplay: flex;\n\tjustify-content: center;\n\tgap: 10px;\n\tmargin-top: 8px;\n}\n\n.time-card__btn {\n\twidth: 44px;\n\theight: 44px;\n\tborder-radius: 50%;\n\tborder: 1.5px solid var(--border);\n\tbackground: rgba(255, 255, 255, 0.6);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcursor: pointer;\n\tcolor: var(--text);\n}\n\n.time-card__btn--dark {\n\tbackground: var(--dark);\n\tcolor: #fff;\n\tborder-color: var(--dark);\n}\n\n/* ONBOARDING */\n.onboarding-card {\n\tgrid-row: 1 / 3;\n\tgrid-column: 4;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0;\n}\n\n.onboarding-card__top {\n\tbackground: var(--card-bg);\n\tborder-radius: var(--radius);\n\tpadding: 20px;\n\tbackdrop-filter: blur(10px);\n\tborder: 1px solid rgba(255, 255, 255, 0.5);\n\tmargin-bottom: 12px;\n}\n\n.onboarding-card__header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 14px;\n}\n\n.onboarding-card__percent {\n\tfont-size: 32px;\n\tfont-weight: 300;\n\tletter-spacing: -1px;\n}\n\n.onboarding-card__bars {\n\tdisplay: flex;\n\tgap: 6px;\n\tmargin-bottom: 12px;\n\talign-items: center;\n}\n\n.onboarding-card__bar-group {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n\tflex: 1;\n}\n\n.onboarding-card__bar-label {\n\tfont-size: 11px;\n\tcolor: var(--text-light);\n}\n\n.onboarding-card__bar {\n\theight: 28px;\n\tborder-radius: 6px;\n\twidth: 100%;\n}\n\n.onboarding-card__bar--yellow {\n\tbackground: var(--yellow);\n}\n\n.onboarding-card__bar--gray {\n\tbackground: #bbb;\n}\n\n.onboarding-card__bar--dark {\n\tbackground: var(--dark);\n}\n\n.onboarding-card__task-label {\n\tfont-size: 13px;\n\tcolor: var(--text);\n\tfont-weight: 500;\n\tmargin-top: 6px;\n}\n\n/* ONBOARDING BOTTOM */\n.onboarding-card__bottom {\n\tbackground: var(--dark-card);\n\tborder-radius: var(--radius);\n\tpadding: 20px;\n\tflex: 1;\n\tcolor: #fff;\n}\n\n.onboarding-task__header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 18px;\n}\n\n.onboarding-task__title {\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tcolor: #fff;\n}\n\n.onboarding-task__count {\n\tfont-size: 28px;\n\tfont-weight: 300;\n\tcolor: rgba(255, 255, 255, 0.7);\n\tletter-spacing: -1px;\n}\n\n.onboarding-task__list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n}\n\n.onboarding-task__item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n}\n\n.onboarding-task__icon {\n\twidth: 36px;\n\theight: 36px;\n\tborder-radius: 10px;\n\tbackground: rgba(255, 255, 255, 0.1);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: rgba(255, 255, 255, 0.6);\n\tflex-shrink: 0;\n}\n\n.onboarding-task__icon--yellow {\n\tbackground: rgba(245, 200, 66, 0.2);\n\tcolor: var(--yellow);\n}\n\n.onboarding-task__info {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.onboarding-task__name {\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: #fff;\n}\n\n.onboarding-task__date {\n\tfont-size: 11px;\n\tcolor: rgba(255, 255, 255, 0.4);\n}\n\n.onboarding-task__check {\n\twidth: 22px;\n\theight: 22px;\n\tborder-radius: 50%;\n\tborder: 1.5px solid rgba(255, 255, 255, 0.2);\n\tflex-shrink: 0;\n}\n\n.onboarding-task__check--done {\n\tbackground: var(--yellow);\n\tborder-color: var(--yellow);\n\tcolor: var(--dark);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n/* SIDEBAR SECTION */\n.sidebar-section {\n\tgrid-row: 2;\n\tgrid-column: 1;\n}\n\n.accordion__item {\n\tborder-bottom: 1px dashed var(--border);\n\tpadding: 14px 0;\n}\n\n.accordion__item:last-child {\n\tborder-bottom: none;\n}\n\n.accordion__header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tcursor: pointer;\n\tfont-size: 14px;\n\tfont-weight: 500;\n}\n\n.accordion__content {\n\tmargin-top: 12px;\n}\n\n.device-item {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n}\n\n.device-item__img {\n\twidth: 48px;\n\theight: 48px;\n\tborder-radius: 10px;\n\tobject-fit: cover;\n}\n\n.device-item__info {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.device-item__name {\n\tfont-size: 14px;\n\tfont-weight: 600;\n}\n\n.device-item__version {\n\tfont-size: 12px;\n\tcolor: var(--text-light);\n}\n\n.device-item__more {\n\tbackground: none;\n\tborder: none;\n\tcursor: pointer;\n\tcolor: var(--text-light);\n\tmargin-left: auto;\n}\n\n/* CALENDAR */\n.calendar-card {\n\tgrid-row: 2;\n\tgrid-column: 2 / 4;\n\tbackground: var(--card-bg);\n\tborder-radius: var(--radius);\n\tpadding: 20px;\n\tbackdrop-filter: blur(10px);\n\tborder: 1px solid rgba(255, 255, 255, 0.5);\n}\n\n.calendar-card__nav {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 16px;\n}\n\n.calendar-card__title {\n\tfont-size: 18px;\n\tfont-weight: 600;\n}\n\n.calendar-card__month-btn {\n\tbackground: rgba(255, 255, 255, 0.5);\n\tborder: 1px solid var(--border);\n\tborder-radius: 20px;\n\tpadding: 6px 16px;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcursor: pointer;\n\tfont-family: inherit;\n\tcolor: var(--text-light);\n}\n\n.calendar-card__header {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(6, 1fr);\n\ttext-align: center;\n\tfont-size: 12px;\n\tcolor: var(--text-light);\n\tmargin-bottom: 4px;\n\tfont-weight: 500;\n}\n\n.calendar-card__dates {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(6, 1fr);\n\ttext-align: center;\n\tfont-size: 16px;\n\tfont-weight: 600;\n\tmargin-bottom: 16px;\n}\n\n.calendar-card__date--active {\n\tbackground: var(--dark);\n\tcolor: #fff;\n\tborder-radius: 8px;\n\tpadding: 4px 0;\n}\n\n.calendar-card__schedule {\n\tdisplay: flex;\n\tgap: 0;\n\tposition: relative;\n\tmin-height: 200px;\n}\n\n.calendar-card__times {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 32px;\n\tfont-size: 12px;\n\tcolor: var(--text-light);\n\twidth: 80px;\n\tflex-shrink: 0;\n\tpadding-top: 4px;\n}\n\n.calendar-card__events {\n\tflex: 1;\n\tposition: relative;\n}\n\n.calendar-event {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tpadding: 10px 14px;\n\tborder-radius: 14px;\n\tmin-width: 260px;\n}\n\n.calendar-event--yellow {\n\tbackground: var(--yellow);\n\tcolor: var(--dark);\n}\n\n.calendar-event--light {\n\tbackground: rgba(255, 255, 255, 0.7);\n\tborder: 1px solid var(--border);\n\tcolor: var(--text);\n}\n\n.calendar-event__info {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.calendar-event__title {\n\tfont-size: 13px;\n\tfont-weight: 600;\n}\n\n.calendar-event__desc {\n\tfont-size: 11px;\n\topacity: 0.7;\n}\n\n.calendar-event__avatars {\n\tdisplay: flex;\n\tmargin-left: auto;\n}\n\n.calendar-event__avatar {\n\twidth: 28px;\n\theight: 28px;\n\tborder-radius: 50%;\n\tborder: 2px solid #fff;\n\tmargin-left: -8px;\n\tobject-fit: cover;\n}\n\n.calendar-event__avatar:first-child {\n\tmargin-left: 0;\n}\n\n/* RESPONSIVE */\n@media (max-width: 1200px) {\n\t.main-grid {\n\t\tgrid-template-columns: 1fr 1fr;\n\t\tgrid-template-rows: auto;\n\t}\n\n\t.employee-card {\n\t\tgrid-column: 1;\n\t\tgrid-row: 1;\n\t}\n\n\t.progress-card {\n\t\tgrid-column: 2;\n\t\tgrid-row: 1;\n\t}\n\n\t.time-card {\n\t\tgrid-column: 1;\n\t\tgrid-row: 2;\n\t}\n\n\t.onboarding-card {\n\t\tgrid-column: 2;\n\t\tgrid-row: 2 / 4;\n\t}\n\n\t.sidebar-section {\n\t\tgrid-column: 1;\n\t\tgrid-row: 3;\n\t}\n\n\t.calendar-card {\n\t\tgrid-column: 1 / 3;\n\t\tgrid-row: 4;\n\t}\n}\n\n@media (max-width: 768px) {\n\t.main-grid {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t.main-grid>* {\n\t\tgrid-column: 1 !important;\n\t\tgrid-row: auto !important;\n\t}\n\n\t.nav__links {\n\t\tdisplay: none;\n\t}\n\n\t.header {\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t}\n\n\t.header__stats {\n\t\tgap: 20px;\n\t}\n\n\t.stat__number {\n\t\tfont-size: 36px;\n\t}\n\n\t.header__title {\n\t\tfont-size: 28px;\n\t}\n}"}],"folders":[]},"variants":null,"createdAt":"2026-02-08T00:28:33.325Z","updatedAt":"2026-03-04T16:30:41.658Z","hasThumbnail":true}}