-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
132 lines (120 loc) · 4.79 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
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<title>日本向大海排放核污染水计时</title>
<style>
#title {
font-size: 5vw;
text-align: center;
}
#subtitle {
font-size: 3.5vw;
text-align: center;
}
#countdown {
font-size: 7vw;
font-weight: bold;
text-align: center;
}
body {
background-image: url('https://m1.miaomc.cn/uploads/20230824_64e72c759e7a5.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
#languageSelector {
font-size: 1vw;
}
.center-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered-image {
max-width: 100%;
max-height: 100%;
}
</style>
<script src="https://unpkg.com/[email protected]/i18next.min.js"></script>
<script src="https://unpkg.com/[email protected]/i18nextBrowserLanguageDetector.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const languageSelector = document.getElementById('languageSelector');
const titleElement = document.getElementById('title');
const subtitleElement = document.getElementById('subtitle');
const countdownElement = document.getElementById('countdown');
i18next.init({
resources: {
en: {
translation: {
title: "Time since Japan released nuclear contaminated water into the sea",
subtitle: "\"The world will never forget this day.\"",
countdown: "{{days}} days {{hours}} hours {{minutes}} minutes {{seconds}} seconds"
}
},
zh: {
translation: {
title: "距离日本向大海排放核污染水已经过去",
subtitle: "「世界不会忘记这一天」",
countdown: "{{days}} 天 {{hours}} 小时 {{minutes}} 分 {{seconds}} 秒"
}
},
ja: {
translation: {
title: "日本が海に核汚染水を放出してからの時間",
subtitle: "「世界はこの日を決して忘れないでしょう」",
countdown: "{{days}} 日 {{hours}} 時間 {{minutes}} 分 {{seconds}} 秒"
}
}
},
lng: 'zh', // Default language
fallbackLng: 'zh',
interpolation: {
escapeValue: false
}
});
titleElement.innerHTML = i18next.t('title',)
subtitleElement.innerHTML = i18next.t('subtitle',)
function updateCountdown() {
const targetDate = new Date("2023-08-24T12:00:00+08:00").getTime();
const timeRemaining = targetDate - Date.now();
const days = -parseInt(timeRemaining / (1000 * 60 * 60 * 24));
const hours = -parseInt((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = -parseInt((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = -parseInt((timeRemaining % (1000 * 60)) / 1000);
countdownElement.innerHTML = i18next.t('countdown', {
days: days,
hours: hours,
minutes: minutes,
seconds: seconds
});
}
languageSelector.addEventListener('change', function(event) {
i18next.changeLanguage(event.target.value, () => {
titleElement.innerHTML = i18next.t('title',)
subtitleElement.innerHTML = i18next.t('subtitle',)
updateCountdown();
});
});
setInterval(updateCountdown,1000);
});
</script>
</head>
<body>
<select id="languageSelector">
<option value="zh">中文</option>
<option value="en">English</option>
<option value="ja">日本語</option>
</select>
<div id="title"></div>
<div id="subtitle"></div>
<br>
<br>
<div id="countdown"></div>
<br>
<div class="center-container">
<img class="centered-image" src="https://m1.miaomc.cn/uploads/20230824_64e72d9224e93.jpg">
</div>
</body>
</html>