earthjasonlin/donate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: earthjasonlin:934a5cd50dfd2e1692ba78c94c2f044dd810fa37
Branches Tags
earthjasonlin:main
...
compare: earthjasonlin:39c06cb68a3b59f1ae4f0aeb6eee85820e1013c5
Branches Tags
earthjasonlin:main

2 Commits
934a5cd50d ... 39c06cb68a

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

2
data.json
View File

@ -24,4 +24,4 @@
"qr": "qr/sol.png", "qr": "qr/sol.png",
"icon": "icons/sol.png" "icon": "icons/sol.png"
} }
} }

2
i18n/en.json
View File

@ -9,4 +9,4 @@
"bitcoin": "Bitcoin", "bitcoin": "Bitcoin",
"solana": "Solana", "solana": "Solana",
"monero": "Monero" "monero": "Monero"
} }

2
i18n/zh.json
View File

@ -9,4 +9,4 @@
"bitcoin": "比特币", "bitcoin": "比特币",
"solana": "Solana", "solana": "Solana",
"monero": "门罗币" "monero": "门罗币"
} }

BIN
img/coffee.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
img/copy-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
img/copy-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

98
index.html
View File

@ -1,43 +1,69 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>加密货币捐赠</title> <title>加密货币捐赠</title>
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="card"> <div class="card">
<h1 id="title"><img src="logo.png" alt="asadasd" width="24px"> 捐赠加密货币</h1> <h1>
<div class="donation-card"> <img id="title-icon" src="logo.png" alt="" /><span id="title-text"
<div class="select-wrapper"> >捐赠加密货币</span
<select id="blockchain" onchange="updateDonationInfo()"></select> >
<div id="icon-wrapper"> </h1>
<img id="blockchain-icon" src="icons/btc.png" alt="Blockchain Icon"> <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" />
</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()">
<img id="copyIcon" src="img/copy-white.png" alt="" /><span
id="copyAddress"
>复制地址</span
>
</button>
</div> </div>
</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>
</div>
</div> </div>
<ul class="language-list">
<li onclick="changeLanguage('en')">English</li>
<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>
</div>
<footer>
<p>&copy; 2024-now earthjasonlin. All rights reserved.</p>
</footer>
</div> </div>
<ul class="language-list"> <script src="script.js"></script>
<li onclick="changeLanguage('en')">English</li> </body>
<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>
</div>
<footer>
<p>&copy; 2024-now earthjasonlin. All rights reserved.</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html> </html>

26
script.js
View File

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

24
styles.css
View File

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