add digital calendar GUI for gratitude journal

.gitignore

@@ -15,3 +15,4 @@
 /.vs/slnx.sqlite
 /.vs/slnx.sqlite-journal
 /.vs/gratitude journal.slnx/v18/.wsuo
+/.vs

app.js

@@ -0,0 +1,110 @@
+// Replace this with the RAW URL of your markdown file on GitHub
+// Example: 'https://raw.githubusercontent.com/sparkcloud/my-repo/main/readme.md'
+const RAW_GITHUB_URL = 'https://raw.githubusercontent.com/sparkcloud/gratitude-journal/refs/heads/master/README.md';
+const journalEntries = {};
+
+// Calendar State
+let currentDisplayDate = new Date(); // Defaults to today
+
+async function initJournal() {
+    try {
+        const response = await fetch(RAW_GITHUB_URL);
+        if (!response.ok) throw new Error("Failed to fetch markdown file.");
+
+        const markdownText = await response.text();
+        parseMarkdown(markdownText);
+
+        setupEventListeners();
+        renderCalendar(); // Draw the calendar!
+
+    } catch (error) {
+        console.error("Error loading journal:", error);
+    }
+}
+
+function parseMarkdown(text) {
+    const entryRegex = /## Date: (\d{2}\/\d{2}\/\d{4})\s+([\s\S]*?)(?=(?:## Date:)|$)/g;
+    for (const match of text.matchAll(entryRegex)) {
+        journalEntries[match[1]] = match[2].trim();
+    }
+}
+
+function setupEventListeners() {
+    document.getElementById('prev-month').addEventListener('click', () => {
+        currentDisplayDate.setMonth(currentDisplayDate.getMonth() - 1);
+        renderCalendar();
+    });
+
+    document.getElementById('next-month').addEventListener('click', () => {
+        currentDisplayDate.setMonth(currentDisplayDate.getMonth() + 1);
+        renderCalendar();
+    });
+}
+
+function renderCalendar() {
+    const year = currentDisplayDate.getFullYear();
+    const month = currentDisplayDate.getMonth(); // 0-indexed (0 = Jan, 11 = Dec)
+
+    // Update the Header text (e.g., "March 2026")
+    const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    document.getElementById('month-year-display').innerText = `${monthNames[month]} ${year}`;
+
+    const calendarGrid = document.getElementById('calendar-grid');
+    calendarGrid.innerHTML = ''; // Clear previous days
+
+    // Get the first day of the month (0 = Sun, 1 = Mon...)
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    // Get total days in the current month
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+    // 1. Fill in blank days at the start of the month
+    for (let i = 0; i < firstDayIndex; i++) {
+        const emptyDiv = document.createElement('div');
+        emptyDiv.classList.add('calendar-day', 'empty');
+        calendarGrid.appendChild(emptyDiv);
+    }
+
+    // 2. Fill in the actual days
+    for (let day = 1; day <= daysInMonth; day++) {
+        const dayDiv = document.createElement('div');
+        dayDiv.classList.add('calendar-day');
+        dayDiv.innerText = day;
+
+        // Format date to match your Markdown (MM/DD/YYYY)
+        // String().padStart(2, '0') ensures single digits become "03" instead of "3"
+        const formattedMonth = String(month + 1).padStart(2, '0');
+        const formattedDay = String(day).padStart(2, '0');
+        const dateKey = `${formattedMonth}/${formattedDay}/${year}`;
+
+        // Check if this date exists in our parsed Markdown dictionary
+        if (journalEntries[dateKey]) {
+            dayDiv.classList.add('has-entry');
+
+            dayDiv.addEventListener('click', () => {
+                // Remove active styling from all days, add to this one
+                document.querySelectorAll('.calendar-day').forEach(d => d.classList.remove('active'));
+                dayDiv.classList.add('active');
+
+                displayEntry(dateKey);
+            });
+        }
+
+        calendarGrid.appendChild(dayDiv);
+    }
+}
+
+function displayEntry(dateStr) {
+    const displayContainer = document.getElementById('journal-display');
+    const rawMarkdown = journalEntries[dateStr];
+
+    if (rawMarkdown) {
+        displayContainer.innerHTML = `
+            <h3 style="margin-top: 0; color: var(--primary-color); border-bottom: 2px solid #eee; padding-bottom: 10px;">
+                Journal Entry: ${dateStr}
+            </h3>
+            ${marked.parse(rawMarkdown)}
+        `;
+    }
+}
+
+initJournal();

index.html

@@ -1,11 +1,46 @@
 <!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+			<meta name="viewport" content="width=device-width, initial-scale=1.0">
+				<title>Git Gratitude Journal</title>
+				<link rel="stylesheet" href="style.css">
+					<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+				</head>
+	<body>
 
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <meta charset="utf-8" />
-    <title>My first github page</title>
-</head>
-<body>
+		<main class="app-container">
+			<header>
+				<h1>My Gratitude Journal</h1>
+				<p>Select a highlighted date below to view the entry.</p>
+			</header>
 
-</body>
+			<section class="calendar-wrapper">
+				<div class="calendar-header">
+					<button id="prev-month" class="nav-btn">&lt; Prev</button>
+					<h2 id="month-year-display">Month Year</h2>
+					<button id="next-month" class="nav-btn">Next &gt;</button>
+				</div>
+
+				<div class="calendar-weekdays">
+					<div>Sun</div>
+					<div>Mon</div>
+					<div>Tue</div>
+					<div>Wed</div>
+					<div>Thu</div>
+					<div>Fri</div>
+					<div>Sat</div>
+				</div>
+
+				<div id="calendar-grid" class="calendar-grid">
+				</div>
+			</section>
+
+			<section id="journal-display" class="journal-container">
+				<div class="placeholder-text">Waiting for a date selection...</div>
+			</section>
+		</main>
+
+		<script src="app.js"></script>
+	</body>
 </html>

style.css

@@ -0,0 +1,105 @@
+/* Keep your existing :root and body styles */
+:root {
+    --bg-color: #f4f4f9;
+    --text-color: #333;
+    --primary-color: #4a90e2;
+    --card-bg: #ffffff;
+    --border-radius: 8px;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    margin: 0;
+    padding: 2rem;
+}
+
+.app-container { max-width: 800px; margin: 0 auto; }
+header { text-align: center; margin-bottom: 2rem; }
+
+/* NEW CALENDAR STYLES */
+.calendar-wrapper {
+    background-color: var(--card-bg);
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    margin-bottom: 2rem;
+}
+
+.calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.nav-btn {
+    background: none;
+    border: 1px solid #ddd;
+    padding: 5px 15px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.nav-btn:hover { background-color: #f0f0f0; }
+
+.calendar-weekdays, .calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr); /* Forces 7 equal columns */
+    gap: 5px;
+    text-align: center;
+}
+
+.calendar-weekdays div {
+    font-weight: bold;
+    color: #888;
+    padding-bottom: 10px;
+}
+
+.calendar-day {
+    padding: 15px 5px;
+    border-radius: 4px;
+    background-color: #fafafa;
+    border: 1px solid #eee;
+    color: #ccc; /* Default to greyed out if no entry */
+}
+
+/* Style for days that have a journal entry */
+.calendar-day.has-entry {
+    background-color: #eef5ff;
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.calendar-day.has-entry:hover {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.calendar-day.active {
+    background-color: var(--primary-color);
+    color: white;
+    box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);
+}
+
+.calendar-day.empty {
+    background-color: transparent;
+    border: none;
+}
+
+/* Journal Entry Display Styles */
+.journal-container {
+    background-color: var(--card-bg);
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    min-height: 200px;
+}
+
+.placeholder-text { text-align: center; color: #888; font-style: italic; }