created web files

static/script.js

@@ -0,0 +1,49 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const dateElement = document.getElementById('current-date');
+    const eventsList = document.getElementById('events-list');
+    const timeCommentElement = document.getElementById('time-comment');
+    const today = new Date();
+
+    // Date display
+    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+    dateElement.textContent = today.toLocaleDateString('zh-TW', options);
+
+    // Query to API
+    fetch('/api/query')
+        .then(response => response.json())
+        .then(events => {
+            eventsList.innerHTML = '';
+
+            if (events == null || events.length == 0 || events.length == undefined) {
+                eventsList.innerHTML = '<p>今天沒有已記載的重大事件。</p>';
+                timeCommentElement.classList.add('hide');
+                return;
+            }
+
+            events.forEach(event => {
+                const card = document.createElement('div');
+                card.className = 'event-card';
+
+                const title = document.createElement('div');
+                title.className = 'event-title';
+                title.textContent = event.title;
+
+                const year = document.createElement('span');
+                year.className = 'event-year';
+                year.textContent = `(${event.year} 年)`;
+
+                const description = document.createElement('p');
+                description.textContent = event.description;
+
+                title.appendChild(year);
+                card.appendChild(title);
+                card.appendChild(description);
+                eventsList.appendChild(card);
+                timeCommentElement.classList.remove('hide');
+            });
+        })
+        .catch(error => {
+            console.error('Fetch error:', error);
+            eventsList.innerHTML = '<p style="color: red;">載入歷史事件失敗。請檢查 API。</p>';
+        });
+});