From a163e9714f7d62e3d0f2519ea3971e92625d0b11 Mon Sep 17 00:00:00 2001 From: bwhenn Date: Sat, 11 May 2024 21:18:19 -0700 Subject: [PATCH 1/2] project view and split sidebar --- css/{styles.css => homepage.css} | 29 +++++++++++++++----- css/projectView.css | 46 ++++++++++++++++++++++++++++++++ index.html | 21 ++++++++++++--- js/main.js | 35 ++++++++++++++++++++++++ 4 files changed, 121 insertions(+), 10 deletions(-) rename css/{styles.css => homepage.css} (74%) create mode 100644 css/projectView.css create mode 100644 js/main.js diff --git a/css/styles.css b/css/homepage.css similarity index 74% rename from css/styles.css rename to css/homepage.css index d005f20..dc31b01 100644 --- a/css/styles.css +++ b/css/homepage.css @@ -2,9 +2,10 @@ :root { --background-color: #ffdaca; --content-color: #588b8b; - --sidebar-color: #FFA343; + --accomp-color: #FFA343; --bar-color: #c8553d; - --card-color: white; + --card-color: #ffffffeb; + --cal-color: #65c9c9be; } @@ -50,8 +51,7 @@ body, html { height: calc(100% - 80px); } -.project-cards, .accomplishments { - padding: 20px; +.project-cards, .sidebar-sec { border-radius: 8px; /* Rounded corners */ } @@ -67,15 +67,30 @@ body, html { margin: 30px 15px 30px 30px; } -.accomplishments { - background-color: var(--sidebar-color); +.sidebar { width: 250px; /* Fixed width for the sidebar */ + display: flex; + flex-direction: column; margin: 30px 30px 30px 15px; } +.sidebar-sec { + flex: 1; +} + +.calendar { + margin-bottom: 15px; + background-color: var(--cal-color); /* Light grey for visibility */ +} + +.accomplishments { + background-color: var(--accomp-color); /* Slightly different grey for distinction */ + margin-top: 15px; +} + /* MEDIA QUERY FOR MOBILE DEVICES */ -@media (max-width: 768px) { +@media (max-width: 837px) { .main { flex-direction: column; } diff --git a/css/projectView.css b/css/projectView.css new file mode 100644 index 0000000..151abae --- /dev/null +++ b/css/projectView.css @@ -0,0 +1,46 @@ +.modal { + display: none; + position: fixed; + z-index: 2; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0,0,0,0.4);; /* Black with opacity for blur effect */ + backdrop-filter: blur(8px); +} + +.modal-content { + background-color: #fff; /* White background */ + margin: 10% auto; /* 10% from the top and centered horizontally */ + padding: 20px; + border: 1px solid #888; + width: 50%; /* Smaller width to keep it well-sized */ + border-radius: 10px; /* Rounded edges */ + box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Soft shadow for 3D effect */ + position: relative; /* Needed for absolute positioning of close button */ + height: 65%; +} + +.close { + color: #aaa; + position: absolute; + right: 10px; + top: 5px; + font-size: 24px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; +} + +/* Ensure the modal content is scrollable if the content exceeds the viewport */ +.modal-content { + overflow: auto; + max-height: 80%; /* Limit the height to ensure it stays within the viewport */ +} \ No newline at end of file diff --git a/index.html b/index.html index a52d84e..08c1d5c 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,11 @@ + - + + @@ -25,9 +27,22 @@
- -
+ +
+
+
+
+ +
+
+
+ + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..33c3efe --- /dev/null +++ b/js/main.js @@ -0,0 +1,35 @@ +// Function to show the modal +function showModal(card) { + const modal = document.getElementById('projectView'); + const modalContent = modal.querySelector('.modal-content p'); + modalContent.textContent = 'Content for ' + card.innerText; // Set the content dynamically + modal.style.display = 'block'; // Show the modal +} + +// Initialization function to set up event handlers +function init() { + + + // Get the element that closes the modal + const close = document.querySelector('.close'); + close.onclick = function() { + const modal = document.getElementById('projectView'); + modal.style.display = 'none'; + } + + // Setup event listeners for any existing cards (if any) + document.querySelectorAll('.card').forEach(card => { + card.onclick = function() { showModal(card); }; + }) + + // Click anywhere outside of the modal to close it + window.onclick = function(event) { + const modal = document.getElementById('projectView'); + if (event.target === modal) { + modal.style.display = 'none'; + } + } +} + +// Ensures all DOM content is loaded before executing scripts +document.addEventListener('DOMContentLoaded', init); \ No newline at end of file From aa48fc751d05e3a2608ef1bdad49d0a6400df31e Mon Sep 17 00:00:00 2001 From: bwhenn Date: Sun, 12 May 2024 01:02:26 -0700 Subject: [PATCH 2/2] add calendar --- css/homepage.css | 81 +++++++++++++++++++++++++++++++++++++++++++++--- index.html | 20 ++++++++++++ js/calendar.js | 52 +++++++++++++++++++++++++++++++ 3 files changed, 149 insertions(+), 4 deletions(-) create mode 100644 js/calendar.js diff --git a/css/homepage.css b/css/homepage.css index dc31b01..8760637 100644 --- a/css/homepage.css +++ b/css/homepage.css @@ -68,24 +68,97 @@ body, html { } .sidebar { - width: 250px; /* Fixed width for the sidebar */ + width: 380px; /* Fixed width for the sidebar */ display: flex; + height: calc(100% - 60px); flex-direction: column; margin: 30px 30px 30px 15px; } -.sidebar-sec { - flex: 1; -} .calendar { margin-bottom: 15px; background-color: var(--cal-color); /* Light grey for visibility */ + height: 283px; + flex-direction: column; +} + +.cal-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; +} + +.monthYear { + text-align: center; + font-weight: 600; + width: 150px; +} + +.cal-header button { + display: flex; + align-items: center; + justify-content: center; + border: none; + border-radius: 50%; + background: #fff; + cursor: pointer; + width: 30px; + height: 30px; + box-shadow: 0 0 4px rgba(0,0,0,0.2); +} + +.days { + display: grid; + grid-template-columns: repeat(7,1fr); +} + + +.day { + text-align: center; + padding: 5px; + font-weight: 600; +} + +.dates { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 1px; +} + +.date { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 4px; + margin: auto; + cursor: pointer; + font-weight: 400; + border-radius: 50%; + width: 30px; + height: 30px; + transition: 0.2s; +} + +.date:hover, .date:active { + background: #ff5869; + color: #fff; +} + +.date.inactive { + color: #d2d2d2; +} + +.date.inactive:hover { + color: #fff; } .accomplishments { background-color: var(--accomp-color); /* Slightly different grey for distinction */ margin-top: 15px; + flex-grow: 1; } diff --git a/index.html b/index.html index 08c1d5c..86ec222 100644 --- a/index.html +++ b/index.html @@ -29,9 +29,27 @@
+
+
+ +
+ +
+
+
Mon
+
Tue
+
Wed
+
Thu
+
Fri
+
Sat
+
Sun
+
+
+ +
@@ -51,5 +69,7 @@
+ + \ No newline at end of file diff --git a/js/calendar.js b/js/calendar.js new file mode 100644 index 0000000..faf29af --- /dev/null +++ b/js/calendar.js @@ -0,0 +1,52 @@ +const monthYearElement = document.getElementById('monthYear'); +const datesElement = document.getElementById('dates'); +const prevBttn = document.getElementById('cal-prev'); +const nextBttn = document.getElementById('cal-next'); + +let currentDate = new Date(); + +const updateCalendar = () => { + const currentYear = currentDate.getFullYear(); + const currentMonth = currentDate.getMonth(); + + const firstDay = new Date(currentYear, currentMonth, 0); + const lastDay = new Date(currentYear, currentMonth + 1, 0); + const totalDays = lastDay.getDate(); + const firstDayIndex = firstDay.getDay(); + const lastDayIndex = lastDay.getDay(); + + const monthYearString = currentDate.toLocaleString('default', {month: 'long', year: 'numeric'}); + monthYearElement.textContent = monthYearString; + + let datesHTML = ''; + + for (let i = firstDayIndex; i > 0; i--) { + const prevDate = new Date(currentYear, currentMonth, 0 - i + 1); + datesHTML += `
${prevDate.getDate()}
`; + } + + for (let i = 1; i <= totalDays; i++) { + const date = new Date(currentYear, currentMonth, i); + const activeClass = date.toDateString() === new Date(). + toDateString() ? 'active' : ''; + datesHTML += `
${i}
`; + } + + for (let i = 1; i <= 7 - lastDayIndex; i++) { + const nextDate = new Date(currentYear, currentMonth + 1, i); + datesHTML += `
${nextDate.getDate()}
`; + } + + datesElement.innerHTML = datesHTML; +} +prevBttn.addEventListener('click', () => { + currentDate.setMonth(currentDate.getMonth() - 1); + updateCalendar(); +}) + +nextBttn.addEventListener('click', () => { + currentDate.setMonth(currentDate.getMonth() + 1); + updateCalendar(); +}) + +updateCalendar(); \ No newline at end of file