created web files
This commit is contained in:
25
static/index.html
Executable file
25
static/index.html
Executable file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-TW">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>歷史上的今天</title>
|
||||
<link rel="stylesheet" href="static/styles.css">
|
||||
<script src="static/script.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1 id="title">歷史上的今天</h1>
|
||||
<div id="current-date"></div>
|
||||
|
||||
<div id="events-list">
|
||||
<p>正在載入歷史事件...</p>
|
||||
</div>
|
||||
<div id="time-comment" class="hide">*以上標註時間均為臺灣標準時間(UTC+8)</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
21
static/poster.js
Normal file
21
static/poster.js
Normal file
@@ -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);
|
||||
});
|
||||
49
static/script.js
Executable file
49
static/script.js
Executable file
@@ -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>';
|
||||
});
|
||||
});
|
||||
107
static/styles.css
Executable file
107
static/styles.css
Executable file
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user