feat: add logo, copy icon

This commit is contained in:
Zichao Lin 2024-08-22 22:49:04 +08:00
parent 934a5cd50d
commit 2bc34662a7
Signed by: earthjasonlin
GPG Key ID: 406D9913DE2E42FB
6 changed files with 19 additions and 7 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

@ -10,7 +10,7 @@
<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>
@ -21,7 +21,7 @@
<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>
<button onclick="copyAddress()"><img id="copyIcon" src="img/copy-white.png" alt=""><span id="copyAddress">复制地址</span></button>
</div>
</div>
</div>

@ -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;
@ -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;