From d201e49409c3952047bc21154c85848065543370 Mon Sep 17 00:00:00 2001 From: Anthony Correa Date: Tue, 1 Apr 2025 07:55:20 -0500 Subject: [PATCH] Add calendar template and schedule generation for MLB schedule - Added a calendar template using Handlebars.js to generate a schedule for the Major League Baseball (MLB) games. - Implemented a function to fetch and parse the MLB schedule API and populate the calendar with game details. - Enhanced the calendar layout with custom CSS to improve readability and visual appeal. - Added support for team-specific schedule display based on the user's favorite team ID. - Implemented a feature to mark specific games with a special annotation based on specific criteria. - Included support for different sheet sizes (letter, A4) and customized the header and calendar layout accordingly. - Added a header image based on the user's favorite team ID. - Enhanced the user experience by displaying game details like opponent, time, and annotation (e.g., A or B for home and away games). - Improved the overall layout and design to enhance the schedule readability and visual appeal. --- index.html | 368 ++++++++++++++++++++++++++++++++++++++++++++++ styles/styles.css | 266 +++++++++++++++++++++++++++++++++ 2 files changed, 634 insertions(+) create mode 100644 index.html create mode 100644 styles/styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..19ffec6 --- /dev/null +++ b/index.html @@ -0,0 +1,368 @@ + + + + + + + + + Schedule + + + + +
+ +
+ +

Schedule

+
+
+ +
+ +
+ + + + + + diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 0000000..f93f4af --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,266 @@ +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap'); + +:root { + font-family: "Noto Sans", Arial, Helvetica, sans-serif; + --black-border: solid black 2px; +} + +header { + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; + + img { + &.placeholder{ + background-color: lightblue; + } + } + h1 { + text-transform: uppercase; + } +} + +.border { + border: var(--black-border); +} +.radius { + border-radius: 1em; +} + +.flex { + display: flex; + flex-direction: column; +} + +section { + flex: 1; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: auto; + + .grid-item { + display: flex; + align-items: center; + justify-content: center; + /* padding: 0.5em; */ + } +} + +.team-id-112 { + th { + background-color: navy !important; + } +} + +.calendar { + h2 { + margin: 0; + text-transform: uppercase; + } + table { + /* width:100%; */ + border-collapse: collapse; + th { + background-color: black; + color: white; + text-transform: uppercase; + font-weight: 900; + } + th, td { + border: black solid 1px; + width: 65px; + &:has(.half){ + padding: 0; + } + + &:has(.home) { + /* background-color: lightblue; */ + } + &:has(.away) { + background-color: #e9ecef; + } + } + td > div { + height: auto; + aspect-ratio: 10 / 10; + align-items: center; + & { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + grid-column-gap: 0px; + grid-row-gap: 0px; + } + + .day-date { + grid-area: 1 / 1 / 2 / 2; + } + .opponent { + grid-area: 2 / 1 / 3 / 4; + } + .annotation { + margin-right: 2px; + grid-area: 1 / 2 / 2 / 4; + } + .time { + grid-area: 3 / 1 / 4 / 4; + } + + .friday9_80 { + font-size: .7em; + font-weight: 900; + text-align: right; + &.A{ + color: gray; + text-decoration: underline; + } + &.B{ + color: grey; + } + } + + &.half { + height: inherit; + aspect-ratio: inherit; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: auto auto; + grid-column-gap: 0px; + grid-row-gap: 0px; + + &:first-child{ + border-bottom: black solid 1px; + align-items: top; + } + + .day-date { + font-size: .9em; + margin-left: 1px; + grid-area: 1 / 1 / 2 / 2; + } + .opponent { + font-size: .9em; + line-height: .9em; + grid-area: 2 / 1 / 3 / 3; + margin-bottom: 1px; + } + .annotation { + display:none; + } + .time { + margin-right: 1px; + text-wrap: nowrap; + grid-area: 1 / 2 / 2 / 3; + font-size: .9em; + font-stretch: condensed; + } + } + } + + .opponent { + font-size: 1.1em; + font-weight: bold; + text-align: center; + text-transform: uppercase; + } + + .day-date{ + font-weight: 500; + font-stretch: semi-condensed; + } + .time { + text-align: center; + font-size: .8em; + } + } +} + +.ledger { + font-size: 16px; + header { + padding: 2em; + + img { + width: 1.5in; + height: 1.5in; + } + h1 { + margin-left: 1em; + font-size: xxx-large; + } + } + + .calendar { + h2 { + line-height: .9em; + margin-bottom: .3em; + } + + table { + th { + font-size: .8em; + } + th, td { + width: 65px; + } + + .opponent { + font-size: 1.3em; + } + + .month-number{ + font-size: 1em; + } + .time { + font-size: .8em; + } + } + } +} + +.letter, .A4 { + header { + padding: 1em; + + img { + width: .9in; + height: .9in; + } + h1 { + margin-left: 1em; + font-size: xx-large; + + } + } + + .calendar { + font-size: 11px; + h2 { + line-height: .9em; + margin-bottom: .3em; + } + + table { + th { + font-size: .8em; + } + th, td { + width: 45px; + } + + + .opponent { + font-size: 1.3em; + } + + .month-number{ + font-size: 1em; + } + .time { + font-size: .8em; + } + } + } + +} \ No newline at end of file