refactor: lint code

feat: add logo, copy icon
2024-08-22 22:51:09 +08:00 · 2024-08-22 22:49:04 +08:00
9 changed files with 96 additions and 58 deletions
--- a/img/coffee.png
+++ b/img/coffee.png
--- a/img/copy-black.png
+++ b/img/copy-black.png
--- a/img/copy-white.png
+++ b/img/copy-white.png
--- a/index.html
+++ b/index.html
@ -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>
--- a/script.js
+++ b/script.js
@ -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();
    });
--- a/styles.css
+++ b/styles.css
@ -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 {
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