```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>電話號碼記錄</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
transform: translateX(10px);
}
}
</style>
</head>
<body>
<div style="width: 400px; margin: auto; padding: 20px; border: 5px solid #f39c12; border-radius: 15px; background-color: #fff9c4;">
<h1 style="text-align: center; font-size: 24px;">📒 電話號碼記錄 📞</h1>
<div style="margin-bottom: 20px;">
<input
id="name"
type="text"
style="width: 100%; padding: 10px; margin-bottom: 10px; border: 2px solid #8e44ad; border-radius: 5px;"
placeholder="輸入名字"
>
<input
id="phone"
type="text"
style="width: 100%; padding: 10px; border: 2px solid #8e44ad; border-radius: 5px;"
placeholder="輸入電話號碼"
>
</div>
<div style="text-align: center;">
<button
onclick="addEntry()"
style="padding: 10px 20px; margin: 10px; border: none; border-radius: 5px; background-color: #27ae60; color: white; font-size: 18px; animation: bounce 2s infinite;"
>
➕ 添加
</button>
<button
onclick="downloadData()"
style="padding: 10px 20px; margin: 10px; border: none; border-radius: 5px; background-color: #2980b9; color: white; font-size: 18px; animation: shake 1s infinite;"
>
💾 下載資料
</button>
</div>
<div id="dataList" style="max-height: 200px; overflow-y: auto;">
<!-- List will be shown here -->
</div>
</div>
<script>
let data = [];
function addEntry() {
const nameInput = document.getElementById('name');
const phoneInput = document.getElementById('phone');
const name = nameInput.value;
const phone = phoneInput.value;
if (name && phone) {
data.push({ name, phone });
displayData();
nameInput.value = '';
phoneInput.value = '';
}
}
function displayData() {
const dataList = document.getElementById('dataList');
dataList.innerHTML = '';
data.forEach((entry, index) => {
const div = document.createElement('div');
div.style = 'padding: 10px; margin: 5px 0; background-color: #ecf0f1; border-radius: 5px;';
div.innerHTML = `${index + 1}. 📛<b>${entry.name}</b> - 📞<b>${entry.phone}</b>`;
dataList.appendChild(div);
});
}
function downloadData() {
let csvContent = "data:text/csv;charset=utf-8,序號,名字,電話號碼\n";
data.forEach((entry, index) => {
csvContent += `${index + 1},${entry.name},${entry.phone}\n`;
});
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "電話號碼記錄.csv");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
```
