Compare commits

...

2 Commits

Author SHA1 Message Date
39c06cb68a
refactor: lint code 2024-08-22 22:51:09 +08:00
2bc34662a7
feat: add logo, copy icon 2024-08-22 22:49:04 +08:00
9 changed files with 96 additions and 58 deletions

BIN
img/coffee.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
img/copy-black.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/copy-white.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

@ -1,27 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>加密货币捐赠</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="card">
<h1 id="title"><img src="logo.png" alt="asadasd" width="24px"> 捐赠加密货币</h1>
<h1>
<img id="title-icon" src="logo.png" alt="" /><span id="title-text"
>捐赠加密货币</span
>
</h1>
<div class="donation-card">
<div class="select-wrapper">
<select id="blockchain" onchange="updateDonationInfo()"></select>
<div id="icon-wrapper">
<img id="blockchain-icon" src="icons/btc.png" alt="Blockchain Icon">
<img id="blockchain-icon" src="icons/btc.png" alt="Blockchain Icon" />
</div>
</div>
<div id="donation-info">
<img id="qr-code" src="qr/btc-taproot.png" alt="QR Code">
<p id="address">bc1pfx4a7n6fuyum4dv6rjmg9nsuj7t9wdepjjgsp67d6n8hsdp8w47qw228fy</p>
<button onclick="copyAddress()" id="copyAddress">复制地址</button>
<img id="qr-code" src="qr/btc-taproot.png" alt="QR Code" />
<p id="address">
bc1pfx4a7n6fuyum4dv6rjmg9nsuj7t9wdepjjgsp67d6n8hsdp8w47qw228fy
</p>
<button onclick="copyAddress()">
<img id="copyIcon" src="img/copy-white.png" alt="" /><span
id="copyAddress"
>复制地址</span
>
</button>
</div>
</div>
</div>
@ -30,14 +41,29 @@
<li onclick="changeLanguage('zh')">中文</li>
</ul>
<div class="social-media">
<a href="https://github.com/earthjasonlin" target="_blank"><img class="social-icon" src="https://www.svgrepo.com/download/521688/github.svg" alt="GitHub"></a>
<a href="https://t.me/zcl1103" target="_blank"><img class="social-icon" src="https://www.svgrepo.com/download/521874/telegram.svg" alt="Telegram"></a>
<a href="mailto:earthjasonlin@126.com" target="_blank"><img class="social-icon" src="https://www.svgrepo.com/download/479773/email-8.svg" alt="e-Mail"></a>
<a href="https://github.com/earthjasonlin" target="_blank"
><img
class="social-icon"
src="https://www.svgrepo.com/download/521688/github.svg"
alt="GitHub"
/></a>
<a href="https://t.me/zcl1103" target="_blank"
><img
class="social-icon"
src="https://www.svgrepo.com/download/521874/telegram.svg"
alt="Telegram"
/></a>
<a href="mailto:earthjasonlin@126.com" target="_blank"
><img
class="social-icon"
src="https://www.svgrepo.com/download/479773/email-8.svg"
alt="e-Mail"
/></a>
</div>
<footer>
<p>&copy; 2024-now earthjasonlin. All rights reserved.</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</body>
</html>

@ -1,16 +1,16 @@
let currentLang = 'zh';
let currentLang = "zh";
let data, i18n;
document.addEventListener("DOMContentLoaded", () => {
loadData('data.json', loadBlockchainOptions);
loadData("data.json", loadBlockchainOptions);
changeLanguage(currentLang);
updateCopyrightYear()
updateCopyrightYear();
});
function updateCopyrightYear() {
const currentYear = new Date().getFullYear();
let copyrightText
if(currentYear > 2024) {
let copyrightText;
if (currentYear > 2024) {
copyrightText = `&copy; 2024-${currentYear} earthjasonlin. All rights reserved.`;
} else {
copyrightText = `&copy; 2024 earthjasonlin. All rights reserved.`;
@ -20,27 +20,27 @@ function updateCopyrightYear() {
function loadData(url, callback) {
fetch(url)
.then(response => response.json())
.then(json => {
.then((response) => response.json())
.then((json) => {
data = json;
callback();
})
.catch(error => console.error('Error loading JSON:', error));
.catch((error) => console.error("Error loading JSON:", error));
}
function loadI18n(url, callback) {
fetch(url)
.then(response => response.json())
.then(json => {
.then((response) => response.json())
.then((json) => {
i18n = json;
callback();
})
.catch(error => console.error('Error loading i18n JSON:', error));
.catch((error) => console.error("Error loading i18n JSON:", error));
}
function loadBlockchainOptions() {
const blockchainSelect = document.getElementById("blockchain");
blockchainSelect.innerHTML = '';
blockchainSelect.innerHTML = "";
for (const key in data) {
const option = document.createElement("option");
@ -53,7 +53,7 @@ function loadBlockchainOptions() {
function changeLanguage(lang) {
loadI18n(`i18n/${lang}.json`, () => {
document.getElementById("title").textContent = i18n.title;
document.getElementById("title-text").textContent = i18n.title;
document.getElementById("copyAddress").textContent = i18n.copyAddress;
loadBlockchainOptions();
});

@ -1,5 +1,5 @@
body {
font-family: 'Roboto', sans-serif;
font-family: Microsoft YaHei;
background-color: #f2f2f2;
display: flex;
justify-content: center;
@ -25,10 +25,16 @@ body {
}
h1 {
font-size: 24px;
font-size: 20px;
margin-bottom: 20px;
}
#title-icon {
width: 30px;
vertical-align: bottom;
margin-right: 8px;
}
.donation-card {
text-align: center;
}
@ -56,13 +62,13 @@ select {
height: 30px;
}
#donation-info img {
#qr-code {
width: 150px;
height: 150px;
margin-bottom: 15px;
}
#address {
font-family: consolas;
font-size: 14px;
background-color: #f0f0f0;
padding: 10px;
@ -72,7 +78,7 @@ select {
}
button {
background-color: #4CAF50;
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
@ -86,6 +92,12 @@ button:hover {
background-color: #45a049;
}
#copyIcon {
width: 16px;
vertical-align: middle;
margin-right: 8px;
}
.language-list {
display: flex;
justify-content: center;
@ -103,7 +115,7 @@ button:hover {
}
.language-list li:hover {
color: #4CAF50;
color: #4caf50;
}
.social-media {