Documentation Index Fetch the complete documentation index at: https://mintlify.com/chrisdzasc/Time-Tracking-Dashboard/llms.txt
Use this file to discover all available pages before exploring further.
Overview The Time Tracking Dashboard uses semantic HTML5 elements to create an accessible and well-structured document. The layout consists of a profile card and six activity cards, all contained within a main dashboard container.
Document Structure The application uses a semantic <main> element with the class .dashboard to contain all components:
< main class = "dashboard" > < section class = "profile-card" > <!-- Profile card content --> </ section > < section class = "activity-card activity-card--work" > <!-- Activity card content --> </ section > <!-- More activity cards... --> </ main >
Reference: index.html:24
Profile Card Component The profile card displays user information and time period selection buttons.
Full Structure
Profile Info
Time Period Buttons
< section class = "profile-card" > < div class = "profile-card__wrapper" > < div class = "profile-card__info" > < img class = "profile-card__picture" src = "./images/image-jeremy.png" alt = "Jeremy Robson" > < div class = "profile-card__container" > < p class = "text--p6 text--p6--color" > Report for </ p > < h1 class = "profile-card__name" > Jeremy Robson </ h1 > </ div > </ div > < div class = "profile-card__options" > < button class = "profile-card__option text--p5-regular" id = "daily" > Daily </ button > < button class = "profile-card__option profile-card__option--active text--p5-regular" id = "weekly" > Weekly </ button > < button class = "profile-card__option text--p5-regular" id = "monthly" > Monthly </ button > </ div > </ div > </ section >
Reference: index.html:25-45 The profile info section uses semantic markup with an image and heading: < div class = "profile-card__info" > < img class = "profile-card__picture" src = "./images/image-jeremy.png" alt = "Jeremy Robson" > < div class = "profile-card__container" > < p class = "text--p6 text--p6--color" > Report for </ p > < h1 class = "profile-card__name" > Jeremy Robson </ h1 > </ div > </ div >
Reference: index.html:27-35 Three buttons control the time period display, with IDs for JavaScript targeting: < div class = "profile-card__options" > < button class = "profile-card__option text--p5-regular" id = "daily" > Daily </ button > < button class = "profile-card__option profile-card__option--active text--p5-regular" id = "weekly" > Weekly </ button > < button class = "profile-card__option text--p5-regular" id = "monthly" > Monthly </ button > </ div >
The weekly button has the profile-card__option--active class by default. Reference: index.html:37-43 Activity Card Components Each activity card follows a consistent structure with category-specific styling.
< section class = "activity-card activity-card--work" > < img class = "activity-card__picture" src = "./images/icon-work.svg" alt = "" > < div class = "activity-card__info" > < div class = "activity-card__top-row" > < h2 class = "text--p5-medium" > Work </ h2 > < button class = "activity-card__menu" aria-label = "Menu" >< img src = "./images/icon-ellipsis.svg" alt = "" ></ button > </ div > < div class = "activity-card__time" > < p class = "activity-card__hours" >< span id = "work-current" > 32 </ span > hrs </ p > < p class = "text--p6 text--p6--color" > Last Week - < span id = "work-previous" > 36 </ span > hrs </ p > </ div > </ div > </ section >
Reference: index.html:47-63
< section class = "activity-card activity-card--play" > < img class = "activity-card__picture activity-card__picture--play" src = "./images/icon-play.svg" alt = "" > < div class = "activity-card__info" > < div class = "activity-card__top-row" > < h2 class = "text--p5-medium" > Play </ h2 > < button class = "activity-card__menu" aria-label = "Menu" >< img src = "./images/icon-ellipsis.svg" alt = "" ></ button > </ div > < div class = "activity-card__time" > < p class = "activity-card__hours" >< span id = "play-current" > 10 </ span > hrs </ p > < p class = "text--p6 text--p6--color" > Last Week - < span id = "play-previous" > 36 </ span > hrs </ p > </ div > </ div > </ section >
Reference: index.html:65-81
< section class = "activity-card activity-card--study" > < img class = "activity-card__picture activity-card__picture--study" src = "./images/icon-study.svg" alt = "" > < div class = "activity-card__info" > < div class = "activity-card__top-row" > < h2 class = "text--p5-medium" > Study </ h2 > < button class = "activity-card__menu" aria-label = "Menu" >< img src = "./images/icon-ellipsis.svg" alt = "" ></ button > </ div > < div class = "activity-card__time" > < p class = "activity-card__hours" >< span id = "study-current" > 4 </ span > hrs </ p > < p class = "text--p6 text--p6--color" > Last Week - < span id = "study-previous" > 7 </ span > hrs </ p > </ div > </ div > </ section >
Reference: index.html:83-99
< section class = "activity-card activity-card--exercise" > < img class = "activity-card__picture activity-card__picture--exercise" src = "./images/icon-exercise.svg" alt = "" > < div class = "activity-card__info" > < div class = "activity-card__top-row" > < h2 class = "text--p5-medium" > Exercise </ h2 > < button class = "activity-card__menu" aria-label = "Menu" >< img src = "./images/icon-ellipsis.svg" alt = "" ></ button > </ div > < div class = "activity-card__time" > < p class = "activity-card__hours" >< span id = "exercise-current" > 4 </ span > hrs </ p > < p class = "text--p6 text--p6--color" > Last Week - < span id = "exercise-previous" > 5 </ span > hrs </ p > </ div > </ div > </ section >
Reference: index.html:101-117
< section class = "activity-card activity-card--social" > < img class = "activity-card__picture activity-card__picture--social" src = "./images/icon-social.svg" alt = "" > < div class = "activity-card__info" > < div class = "activity-card__top-row" > < h2 class = "text--p5-medium" > Social </ h2 > < button class = "activity-card__menu" aria-label = "Menu" >< img src = "./images/icon-ellipsis.svg" alt = "" ></ button > </ div > < div class = "activity-card__time" > < p class = "activity-card__hours" >< span id = "social-current" > 5 </ span > hrs </ p > < p class = "text--p6 text--p6--color" > Last Week - < span id = "social-previous" > 10 </ span > hrs </ p > </ div > </ div > </ section >
Reference: index.html:119-135
< section class = "activity-card activity-card--self-care" > < img class = "activity-card__picture activity-card__picture--self-care" src = "./images/icon-self-care.svg" alt = "" > < div class = "activity-card__info" > < div class = "activity-card__top-row" > < h2 class = "text--p5-medium" > Self Care </ h2 > < button class = "activity-card__menu" aria-label = "Menu" >< img src = "./images/icon-ellipsis.svg" alt = "" ></ button > </ div > < div class = "activity-card__time" > < p class = "activity-card__hours" >< span id = "self-care-current" > 2 </ span > hrs </ p > < p class = "text--p6 text--p6--color" > Last Week - < span id = "self-care-previous" > 2 </ span > hrs </ p > </ div > </ div > </ section >
Reference: index.html:137-153 Data Attributes and IDs The HTML uses specific ID attributes to enable JavaScript manipulation of the content:
Button IDs
#daily - Triggers daily view (index.html:38)#weekly - Triggers weekly view (index.html:40)#monthly - Triggers monthly view (index.html:42)
Content Span IDs Each activity category has two span elements for displaying current and previous time data:
Category Current ID Previous ID Work #work-current#work-previousPlay #play-current#play-previousStudy #study-current#study-previousExercise #exercise-current#exercise-previousSocial #social-current#social-previousSelf Care #self-care-current#self-care-previous
Example from the Work card:
< div class = "activity-card__time" > < p class = "activity-card__hours" >< span id = "work-current" > 32 </ span > hrs </ p > < p class = "text--p6 text--p6--color" > Last Week - < span id = "work-previous" > 36 </ span > hrs </ p > </ div >
Reference: index.html:57-61
Accessibility Features Alt Text The profile image includes descriptive alt text:
< img class = "profile-card__picture" src = "./images/image-jeremy.png" alt = "Jeremy Robson" >
Reference: index.html:28
ARIA Labels Menu buttons use aria-label for screen reader accessibility:
< button class = "activity-card__menu" aria-label = "Menu" > < img src = "./images/icon-ellipsis.svg" alt = "" > </ button >
Reference: index.html:54
Decorative icons use empty alt attributes to hide them from screen readers:
< img class = "activity-card__picture" src = "./images/icon-work.svg" alt = "" >
Reference: index.html:48
Semantic Elements
<main> - Wraps the entire dashboard (index.html:24)<section> - Used for both profile and activity cards (index.html:25, 47)<h1> - User name heading (index.html:33)<h2> - Activity category headings (index.html:52, 70, etc.)<button> - Interactive elements for period selection and menu (index.html:38, 54)
BEM Naming Convention The HTML follows the Block Element Modifier (BEM) methodology:
Block : .profile-card, .activity-cardElements : .profile-card__picture, .activity-card__hoursModifiers : .profile-card__option--active, .activity-card--work
Example:
< section class = "activity-card activity-card--work" > < div class = "activity-card__info" > < div class = "activity-card__top-row" > <!-- content --> </ div > </ div > </ section >