collaborate

docs/css/events.css

@@ -0,0 +1,45 @@
+.event {
+    display: flex;
+    width: 100%;
+    margin-bottom: 25px;
+}
+
+.event-data span {display: block;}
+
+.event-date span.event-month {
+    font-weight: 300;
+    font-size: 11pt;
+}
+
+.event-date span.event-day {
+    font-weight: bold;
+    font-size: 17pt;
+}
+
+.event-data span.event-title {
+    font-weight: bold;
+    font-size: 13pt;
+    margin-bottom: 5px;
+}
+
+.event-month {
+    font-weight: bold;
+}
+
+.event-date {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    background-color: #111;
+    color: white;
+    padding: 15px;
+}
+
+div#events-list {position: relative;}
+
+.event-data {
+    width: 100%;
+    padding: 15px;
+    background-color: white;
+}

dist/css/styles.css → docs/css/styles.css

@@ -3033,14 +3033,14 @@ textarea.form-control-lg {
 }
 
 .btn-primary {
-  color: #fff;
-  background-color: #64a19d;
-  border-color: #64a19d;
+  color: #ffd700;
+  background-color: #326094;
+  border-color: #326094;
 }
 .btn-primary:hover {
-  color: #fff;
-  background-color: #558985;
-  border-color: #50817e;
+  color: #326094;
+  background-color: #ffd700;
+  border-color: #ffd700;
 }
 .btn-check:focus + .btn-primary, .btn-primary:focus {
   color: #fff;
@@ -11562,7 +11562,7 @@ body {
   height: auto;
   min-height: 35rem;
   padding: 15rem 0;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/bg-masthead.jpg");
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("../assets/img/ukraineflag.png");
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: scroll;
@@ -11612,6 +11612,23 @@ body {
   margin-bottom: 5rem;
 }
 
+.sign-section {
+  padding-top: 10rem;
+  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 1) 100%);
+}
+.sign-section p {
+  margin-bottom: 5rem;
+}
+.about-section p {
+  margin-bottom: 5rem;
+}
+.donate-section {
+  padding-top: 10rem;
+  background: linear-gradient(to bottom, #333333 3%, rgba(0,0, 0, 0.8) 75%, rgba(0, 0, 30, .7) 100%);
+}
+.donate-section p {
+  margin-bottom: 5rem;
+}
 .projects-section {
   padding: 10rem 0;
 }
@@ -11645,7 +11662,7 @@ body {
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: scroll;
-  background-size: cover;
+  background-size: 100%;
 }
 .signup-section .form-signup input {
   box-shadow: 0 0.1875rem 0.1875rem 0 rgba(0, 0, 0, 0.1) !important;
@@ -11697,4 +11714,4 @@ body {
 
 .footer {
   padding: 5rem 0;
-}
+}

docs/js/events.js

@@ -0,0 +1,32 @@
+$(function() {
+    fetchEvents();
+});
+
+function fetchEvents() {
+    let email = 'ukrainestrongumd%40gmail.com';
+    let apiKey = 'AIzaSyBb29rTfT7UH1ea_C5NuOuLJNXWD-JSApA';
+    $.get(`https://www.googleapis.com/calendar/v3/calendars/${email}/events?timeMin=${moment().format()}&key=${apiKey}`).then((data) => {
+        for (let i = 0; i < data.items.length; i++) {
+            let event = data.items[i];
+            let startDate = moment(event.start.dateTime);
+            let endDate = moment(event.end.dateTime);
+
+            let location = event.location;
+            location = (location == undefined) ? 'N/A' : location;
+
+            $('#events-list').append(`
+                <div class="event">
+                    <div class="event-date">
+                        <span class="event-month">${startDate.format('MMM').toUpperCase()}</span>
+                        <span class="event-day">${startDate.format('D')}</span>
+                    </div>
+                    <div class="event-data">
+                        <span class="event-title">${event.summary}</span>
+                        <span class="event-time"><i class="fa-solid fa-clock"></i> ${startDate.format('h:mm A')} - ${endDate.format('h:mm A')}</span>
+                        <span class="event-location"><i class="fa-solid fa-location-dot"></i> ${location}</span>
+                    </div>
+                </div>
+            `)
+        }
+    });
+}