-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (109 loc) · 6.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- icon -->
<link rel="icon" type="image/x-icon" href="https://www.gov.hk/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="https://www.gov.hk/favicon.ico" />
<title>香港永居日期计算器</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-lg relative">
<h1 class="text-3xl font-bold text-center text-gray-800 mb-6">香港永居日期计算器</h1>
<p class="text-gray-600 mb-4">首次入境日期（见<a href="https://www.immd.gov.hk/hks/useful_information/visit-transit/endorsement-samples.html" target="_blank" class="text-blue-500 underline">入境标签/小白条</a>或<a href="https://mp.weixin.qq.com/s/0RSgJJ-YX9uUhjBxzBSM1w" target="_blank" class="text-blue-500 underline">出入境记录</a>）:</p>
<p class="text-sm text-gray-500 mb-6">注：适用于持有学生签、工作签、投资移民签证、受养人签证等符合条件的签证。不适用于旅游签及其他特定非永居性签证。</p>
<input type="text" id="inputDate" class="w-full p-3 border border-gray-300 rounded mb-4" placeholder="请选择日期">
<button id="calculateButton" onclick="addDays()" class="w-full p-3 bg-blue-500 text-white rounded hover:bg-blue-700 transition">计算</button>
<div class="mt-6 space-y-4">
<div class="text-lg text-gray-700">
<span class="block md:inline">最早可以申请永居的日期:</span>
<span id="earliestDate" class="block md:inline font-semibold md:ml-2"></span>
</div>
<div class="text-lg text-gray-700">
<span class="block md:inline">于香港居住满七年的日期:</span>
<span id="sevenYearDate" class="block md:inline font-semibold md:ml-2"></span>
</div>
</div>
<button id="shareButton" onclick="shareImage()" class="w-full p-3 bg-green-500 text-white rounded hover:bg-green-700 transition mt-4">保存图片</button>
<div class="h-4"></div> <!-- 添加额外的间距 -->
<div id="watermark" class="absolute bottom-2 left-1/2 transform -translate-x-1/2 text-gray-700 text-xs bg-white bg-opacity-70 px-3 py-1 rounded font-bold">https://7years.atom.im</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/zh.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the current UTC date
const todayUTC = new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
todayUTC.setUTCDate(todayUTC.getUTCDate() - 2557);
flatpickr("#inputDate", {
locale: "zh", // Chinese interface
defaultDate: todayUTC // Use the calculated UTC date as the default date
});
});
function addDays() {
const inputDate = document.getElementById('inputDate')._flatpickr.selectedDates[0];
if (!inputDate) {
alert("请选择一个日期。");
return;
}
// Create a new Date instance for calculations to avoid timezone issues
const date = new Date(Date.UTC(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate()));
// Add the days in UTC
const daysToAdd = 2527;
date.setUTCDate(date.getUTCDate() + daysToAdd);
const earliestDate = date.toISOString().split('T')[0]; // Format YYYY-MM-DD
document.getElementById('earliestDate').textContent = earliestDate;
// Calculate the date for 7 years later in UTC
const sevenYearDays = 2557;
const sevenYearDate = new Date(Date.UTC(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate()));
sevenYearDate.setUTCDate(sevenYearDate.getUTCDate() + sevenYearDays);
const formattedSevenYearDate = sevenYearDate.toISOString().split('T')[0];
document.getElementById('sevenYearDate').textContent = formattedSevenYearDate;
// Get today's date in UTC
const today = new Date();
const todayUTC = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
// Check if the earliest date is today or earlier
if (new Date(earliestDate) <= todayUTC) {
document.getElementById('earliestDate').classList.add('text-green-500', 'font-bold');
} else {
document.getElementById('earliestDate').classList.remove('text-green-500', 'font-bold');
}
// Check if the seven year date is today or earlier
if (new Date(formattedSevenYearDate) <= todayUTC) {
document.getElementById('sevenYearDate').classList.add('text-green-500', 'font-bold');
} else {
document.getElementById('sevenYearDate').classList.remove('text-green-500', 'font-bold');
}
}
function shareImage() {
const element = document.querySelector('.bg-white'); // 选择你想要截图的元素
const shareButton = document.getElementById('shareButton');
const calculateButton = document.getElementById('calculateButton');
// Hide the share button and calculate button before taking the screenshot
shareButton.style.display = 'none';
calculateButton.style.display = 'none';
html2canvas(element).then(canvas => {
// Show the share button and calculate button again after the screenshot is taken
shareButton.style.display = 'block';
calculateButton.style.display = 'block';
// 将 canvas 转换为图片 URL
const imgData = canvas.toDataURL('image/png');
// 创建一个临时的 a 标签用于下载图片
const link = document.createElement('a');
link.href = imgData;
link.download = '香港永居日期计算器.png';
link.click();
}).catch(err => {
console.error('生成图片失败:', err);
// Show the share button and calculate button again if an error occurs
shareButton.style.display = 'block';
calculateButton.style.display = 'block';
});
}
</script>
</body>
</html>