diff --git a/static/index.html b/static/index.html new file mode 100755 index 0000000..94966fc --- /dev/null +++ b/static/index.html @@ -0,0 +1,25 @@ + + + + + + + 歷史上的今天 + + + + + + +
+

歷史上的今天

+
+ +
+

正在載入歷史事件...

+
+
*以上標註時間均為臺灣標準時間(UTC+8)
+
+ + + \ No newline at end of file diff --git a/static/poster.js b/static/poster.js new file mode 100644 index 0000000..32d94ac --- /dev/null +++ b/static/poster.js @@ -0,0 +1,21 @@ +const submit_btn = document.getElementById('submit'); +const title_obj = document.getElementById('title'); +const desc_obj = document.getElementById('desc'); +const date_obj = document.getElementById('date'); +const messenger = document.getElementById('messenger'); + +document.addEventListener('DOMContentLoaded') + +submit_btn.addEventListener(onclick, () => { + var title = title_obj.value; + var desc = desc_obj.value; + var date_str = date_obj.value; + + if (title == null || desc == null || date == null) { + messenger.innerHTML = '請填寫所有欄位'; + messenger.classList.remove("hide"); + return; + } + + const date = new Date(date_str); +}); \ No newline at end of file diff --git a/static/script.js b/static/script.js new file mode 100755 index 0000000..845bb6e --- /dev/null +++ b/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 = '

今天沒有已記載的重大事件。

'; + 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 = '

載入歷史事件失敗。請檢查 API。

'; + }); +}); \ No newline at end of file diff --git a/static/styles.css b/static/styles.css new file mode 100755 index 0000000..dd9f3ca --- /dev/null +++ b/static/styles.css @@ -0,0 +1,107 @@ +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f4f4f9; + color: #333; + text-align: center; + padding: 20px; +} + +.container { + max-width: 800px; + margin: auto; + background: #fff; + padding: 30px; + border-radius: 10px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +table.container { + background: transparent; + box-shadow: none; +} + +h1[id="title"] { + color: #ff69b4; + border-bottom: 3px solid #ff69b4; + padding-bottom: 10px; + margin-bottom: 20px; +} + +#current-date { + font-size: 1.2em; + margin-bottom: 25px; + color: #555; +} + +.event-card { + border: 1px solid #ddd; + padding: 15px; + margin-bottom: 15px; + border-radius: 8px; + text-align: left; + background-color: #fff9fc; + transition: transform 0.2s; +} + +.event-card:hover { + transform: translateY(-3px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); +} + +.event-title { + font-size: 1.5em; + color: #333; + margin-bottom: 5px; +} + +.event-year { + font-size: 0.9em; + color: #ff69b4; + font-weight: bold; + display: inline-block; + margin-left: 10px; +} + +#events-list { + margin-top: 20px; +} + +#events-list p { + font-style: normal; + color: #888; +} + +table { + margin-left: auto; + margin-right: auto; + margin-bottom: auto; + margin-top: auto; +} + +input[id='submit'] { + margin-left: auto; + margin-right: auto; +} + +input[type='text'], +input[type='date'] { + border-radius: 5px; + border: 0 0.5px 0.5px rgba(0, 0, 0, 0.1); + width: 100%; +} + +.message { + color: rgba(255, 8, 10, 0.8); +} + + +.hide { + display: none; +} + +#time-comment { + font-size: 11px; + color: #777; + margin-top: 25px; + margin-bottom: 0; +} \ No newline at end of file