feat(events): Add script to fetch and display Zoho calendar events
This commit introduces a new script that fetches and normalizes event data from Zoho Calendar using OAuth2. The script makes an API call to retrieve calendar events for the current month. The event data is then processed and formatted to be used by a Nunjucks template. Key Changes: - test(dummy-data): Created a dummy calendar and dummy events for development and testing. - feat(events): Added a new script to fetch event data from Zoho Calendar. - feat(oauth2): Implemented OAuth2 authentication for secure API access. - refactor(data): Normalized the fetched data payload for consistency. - feat(ui): Integrated the normalized data with a Nunjucks template to dynamically populate "event cards" on the community events page.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
/* |--↓-↓-↓ Start about.html ↓-↓-↓--| */
|
||||
#about-page main {
|
||||
.about {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -8,9 +8,9 @@
|
||||
#main-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 95vw;
|
||||
position: center;
|
||||
gap: 30px;
|
||||
width: 90vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#business-info {
|
||||
@@ -35,7 +35,7 @@
|
||||
|
||||
|
||||
#business-info h3,
|
||||
#feedback-intro h1 {
|
||||
#feedback-intro h2 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px 2px #014038, /* Bottom-right base shadow */
|
||||
@@ -77,7 +77,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
#story h1 {
|
||||
#story h2 {
|
||||
background-color: #96baa0;
|
||||
color: #f7f7f7;
|
||||
border: solid #f7f7f7;
|
||||
@@ -112,7 +112,7 @@ box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#feedback h1 {
|
||||
#feedback h2 {
|
||||
background-color: #a4ccd6;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 10px;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
* Global Styles */
|
||||
/* Global Styles */
|
||||
html {
|
||||
font-size: 17px; /* Base font size for scaling */
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@@ -1,90 +1,143 @@
|
||||
/* |--↓-↓-↓ Start Community.html ↓-↓-↓--| */
|
||||
#community-page {
|
||||
.community {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
width: 95vh;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
#community-page h1 {
|
||||
font-size: 1.6rem;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2.3rem;
|
||||
background-color: #f7f7f7;
|
||||
border: solid #96baa0;
|
||||
border-radius: 15px;
|
||||
width: 50vw;
|
||||
color: #f7f7f7;
|
||||
color: #014038;
|
||||
text-decoration: underline;
|
||||
text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */
|
||||
-0.5px -0.5px 1px #014038, /* Top-left base shadow */
|
||||
-0.5px 0.5px 1px #014038, /* Bottom-left base shadow */
|
||||
0.5px -0.5px 1px #014038; /* Top-right base shadow */
|
||||
padding: 5px 10px;
|
||||
padding: 5px 100px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
#calendar-events-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.calendar iframe{
|
||||
width: 80vw;
|
||||
height: auto;
|
||||
width: 975px;
|
||||
height: 750px;
|
||||
margin-top: 25px;
|
||||
margin-bottom: 20px;
|
||||
background-color: #bdd4da;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.upcoming-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: #f0c06d;
|
||||
border: solid #014038;
|
||||
border-radius: 15px;
|
||||
padding: 10px;
|
||||
width: 95vw;
|
||||
width: 80vw;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.events h2 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px .5px #014038, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px .5px #014038, /* Top-left top shadow */
|
||||
-0.5px 0.5px .5px #014038, /* Bottom-left top shadow */
|
||||
0.5px -0.5px .5px #014038; /* Top-right top shadow */
|
||||
color: #f7f7f7;
|
||||
background-color: #96baa0;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 15px;
|
||||
padding: 10px 15px;
|
||||
width: 50vw;
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
margin-left: 20vw;
|
||||
transform: translateY(-6vh);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.events h3 {
|
||||
background-color: #96baa080;
|
||||
border: solid #bdd4da;
|
||||
border-radius: 15px;
|
||||
padding: 5px 10px;
|
||||
width: 50vw;
|
||||
text-decoration: underline;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
.upcoming-events {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
margin-left: 20vw;
|
||||
transform: translateY(-5vh);
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
background-color: #CADCD0;
|
||||
border: solid #014038;
|
||||
border-radius: 15px;
|
||||
padding: 0px 20px 10px 20px;
|
||||
width: 95%;
|
||||
margin-top: 20px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
|
||||
}
|
||||
|
||||
.events p {
|
||||
transform: translateY(-5vh);
|
||||
.zoho-event {
|
||||
background-color:#f7f7f7;
|
||||
border: solid #014038 2px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8);
|
||||
max-width: 1200px;
|
||||
|
||||
}
|
||||
|
||||
.zoho-event h3 {
|
||||
font-size: 1.875rem;
|
||||
text-align: center;
|
||||
text-shadow: 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */
|
||||
-0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */
|
||||
-0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */
|
||||
0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */
|
||||
color: #014038;
|
||||
background-color: #bdd4da;
|
||||
border: solid #f7f7f7;
|
||||
border-radius: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: fit-content;
|
||||
padding: 0 50px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.zoho-event p {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.display-date, .location, .add-events {
|
||||
font-weight: heavy;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 1.3rem;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.event-list ul {
|
||||
list-style-type: none;
|
||||
transform: translateY(-5vh);
|
||||
|
||||
}
|
||||
|
||||
.event-list li {
|
||||
|
||||
@@ -1,4 +1,19 @@
|
||||
/* CSS Style Rules for "Credits & Attributions" */
|
||||
.credits-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#tip-desc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.credits-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@@ -40,10 +55,13 @@
|
||||
.thumb-tooltip { /* background image is handled by JS */
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain; /* fit full image */
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
border: 1px solid #ccc;
|
||||
border: 3px solid #555;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
z-index: 9999;
|
||||
}
|
||||
@@ -90,7 +90,7 @@ header .logo img {
|
||||
.business-name {
|
||||
font-family: 'Georgia', serif;
|
||||
display: block;
|
||||
font-size: 2.8rem;
|
||||
font-size: 3.6rem;
|
||||
color: #014038; /* Dark green for the title */
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
@@ -266,6 +266,10 @@ nav ul li, #footer-nav ul li {
|
||||
box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.community-link {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
nav ul li a, #footer-nav ul li a {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 1rem;
|
||||
@@ -280,7 +284,8 @@ nav ul li a, #footer-nav ul li a {
|
||||
nav ul li a:hover, #footer-nav ul li a:hover {
|
||||
background-color: #f7f7f7;
|
||||
color: #014038;
|
||||
border: solid #014038;
|
||||
border: solid .5px #014038;
|
||||
padding: 7px 14px;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user