update GUI

static/css/style.css

@@ -6,26 +6,29 @@
 }
 
 :root {
-    --primary-color: #667eea;
-    --primary-dark: #5a67d8;
-    --secondary-color: #764ba2;
-    --success-color: #48bb78;
-    --error-color: #f56565;
-    --warning-color: #ed8936;
-    --text-color: #2d3748;
-    --text-light: #718096;
-    --bg-light: #f7fafc;
-    --border-color: #e2e8f0;
-    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-    --card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
+    --primary-color: #007AFF;
+    --primary-dark: #0051D5;
+    --secondary-color: #5856D6;
+    --success-color: #34C759;
+    --error-color: #FF3B30;
+    --warning-color: #FF9500;
+    --text-color: #1d1d1f;
+    --text-secondary: #86868b;
+    --bg-light: #f5f5f7;
+    --border-color: rgba(0, 0, 0, 0.08);
+    --card-bg: rgba(255, 255, 255, 0.72);
+    --card-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
+    --card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
+    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
     min-height: 100vh;
     padding: 20px;
     color: var(--text-color);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 /* ==================== 容器 ==================== */
@@ -37,31 +40,34 @@ body {
 /* ==================== 头部 ==================== */
 header {
     text-align: center;
-    color: white;
-    margin-bottom: 30px;
-    padding: 20px 0;
+    margin-bottom: 40px;
+    padding: 40px 0 20px;
 }
 
 header h1 {
-    font-size: 2.5rem;
-    margin-bottom: 15px;
-    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    font-size: 3rem;
+    font-weight: 600;
+    margin-bottom: 12px;
+    color: var(--text-color);
+    letter-spacing: -0.5px;
 }
 
 .header-info {
     display: flex;
     justify-content: center;
-    gap: 30px;
+    gap: 32px;
     flex-wrap: wrap;
 }
 
 .header-info p {
-    opacity: 0.9;
-    font-size: 0.95rem;
+    font-size: 0.9375rem;
+    color: var(--text-secondary);
+    font-weight: 400;
 }
 
 .header-info .label {
-    opacity: 0.7;
+    color: var(--text-secondary);
+    margin-right: 4px;
 }
 
 /* ==================== 工具栏 ==================== */
@@ -91,18 +97,21 @@ header h1 {
 
 .search-box input {
     width: 100%;
-    padding: 15px 20px 15px 45px;
-    border: none;
-    border-radius: 12px;
+    padding: 14px 20px 14px 45px;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
     font-size: 1rem;
+    background: var(--card-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     box-shadow: var(--card-shadow);
-    transition: box-shadow 0.3s, transform 0.2s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .search-box input:focus {
     outline: none;
-    box-shadow: var(--card-shadow-hover);
-    transform: translateY(-1px);
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1), var(--card-shadow);
 }
 
 /* 筛选按钮 */
@@ -112,36 +121,43 @@ header h1 {
 }
 
 .filter-btn {
-    padding: 12px 24px;
-    border: none;
-    border-radius: 12px;
-    background: white;
+    padding: 10px 20px;
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--card-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     color: var(--text-color);
-    font-size: 0.95rem;
+    font-size: 0.9375rem;
+    font-weight: 500;
     cursor: pointer;
     box-shadow: var(--card-shadow);
-    transition: all 0.3s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .filter-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--card-shadow-hover);
+    background: rgba(255, 255, 255, 0.9);
+    transform: translateY(-1px);
 }
 
 .filter-btn.active {
     background: var(--primary-color);
     color: white;
+    border-color: var(--primary-color);
 }
 
 /* ==================== 提示信息 ==================== */
 .tips {
     display: flex;
     align-items: center;
-    gap: 10px;
-    background: rgba(255, 255, 255, 0.9);
-    padding: 15px 20px;
+    gap: 12px;
+    background: var(--card-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    padding: 16px 20px;
     border-radius: 12px;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
+    border: 1px solid var(--border-color);
     box-shadow: var(--card-shadow);
 }
 
@@ -153,8 +169,9 @@ header h1 {
 }
 
 .tips span {
-    color: var(--text-light);
-    font-size: 0.9rem;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    line-height: 1.5;
 }
 
 /* ==================== 加载状态 ==================== */
@@ -163,17 +180,16 @@ header h1 {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 60px 20px;
-    color: white;
+    padding: 80px 20px;
 }
 
 .spinner {
-    width: 50px;
-    height: 50px;
-    border: 4px solid rgba(255, 255, 255, 0.3);
-    border-top-color: white;
+    width: 44px;
+    height: 44px;
+    border: 3px solid rgba(0, 122, 255, 0.2);
+    border-top-color: var(--primary-color);
     border-radius: 50%;
-    animation: spin 1s linear infinite;
+    animation: spin 0.8s linear infinite;
     margin-bottom: 20px;
 }
 
@@ -184,8 +200,9 @@ header h1 {
 }
 
 .loading p {
-    font-size: 1.1rem;
-    opacity: 0.9;
+    font-size: 1.0625rem;
+    color: var(--text-secondary);
+    font-weight: 500;
 }
 
 .loading.hidden {
@@ -196,17 +213,17 @@ header h1 {
 .error-message {
     display: flex;
     align-items: center;
-    gap: 15px;
-    background: #fff5f5;
-    border: 1px solid #fed7d7;
-    padding: 20px;
+    gap: 16px;
+    background: rgba(255, 59, 48, 0.08);
+    border: 1px solid rgba(255, 59, 48, 0.2);
+    padding: 20px 24px;
     border-radius: 12px;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
 }
 
 .error-message svg {
-    width: 24px;
-    height: 24px;
+    width: 22px;
+    height: 22px;
     color: var(--error-color);
     flex-shrink: 0;
 }
@@ -214,21 +231,25 @@ header h1 {
 .error-message span {
     flex: 1;
     color: var(--error-color);
+    font-size: 0.9375rem;
+    font-weight: 500;
 }
 
 .retry-btn {
-    padding: 8px 20px;
+    padding: 8px 18px;
     background: var(--error-color);
     color: white;
     border: none;
     border-radius: 8px;
     cursor: pointer;
-    font-size: 0.9rem;
-    transition: background 0.3s;
+    font-size: 0.875rem;
+    font-weight: 600;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .retry-btn:hover {
-    background: #e53e3e;
+    background: #d70015;
+    transform: scale(1.02);
 }
 
 /* ==================== 货币网格 ==================== */
@@ -240,29 +261,33 @@ header h1 {
 
 /* ==================== 货币卡片 ==================== */
 .currency-card {
-    background: white;
+    background: var(--card-bg);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
     border-radius: 16px;
-    padding: 18px 20px;
+    padding: 20px;
     box-shadow: var(--card-shadow);
     display: flex;
     align-items: center;
-    gap: 15px;
-    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-    border: 2px solid transparent;
+    gap: 16px;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid var(--border-color);
 }
 
 .currency-card:hover {
-    transform: translateY(-3px);
+    transform: translateY(-2px);
     box-shadow: var(--card-shadow-hover);
+    background: rgba(255, 255, 255, 0.85);
 }
 
 .currency-card.priority {
-    border-left: 4px solid var(--primary-color);
+    border-left: 3px solid var(--primary-color);
 }
 
 .currency-card.active {
     border-color: var(--primary-color);
-    background: linear-gradient(to right, #f8f9ff, white);
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1), var(--card-shadow-hover);
 }
 
 .currency-card.hidden {
@@ -271,17 +296,16 @@ header h1 {
 
 /* 货币图标/符号 */
 .currency-icon {
-    width: 48px;
-    height: 48px;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    border-radius: 12px;
+    width: 52px;
+    height: 52px;
+    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(88, 86, 214, 0.1));
+    border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
-    font-weight: bold;
-    font-size: 1.1rem;
+    font-size: 1.5rem;
     flex-shrink: 0;
+    border: 1px solid rgba(0, 122, 255, 0.15);
 }
 
 /* 货币信息 */
@@ -290,19 +314,20 @@ header h1 {
 }
 
 .currency-code {
-    font-size: 1.25rem;
-    font-weight: 700;
+    font-size: 1.125rem;
+    font-weight: 600;
     color: var(--text-color);
-    letter-spacing: 0.5px;
+    letter-spacing: -0.2px;
 }
 
 .currency-name {
-    font-size: 0.85rem;
-    color: var(--text-light);
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100px;
+    font-weight: 400;
 }
 
 /* 输入区域 */
@@ -312,25 +337,28 @@ header h1 {
 
 .currency-input input {
     width: 100%;
-    padding: 12px 15px;
-    border: 2px solid var(--border-color);
+    padding: 12px 14px;
+    border: 1px solid var(--border-color);
     border-radius: 10px;
-    font-size: 1.15rem;
+    font-size: 1.0625rem;
     text-align: right;
     font-weight: 500;
-    transition: border-color 0.3s, box-shadow 0.3s;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     color: var(--text-color);
+    background: rgba(255, 255, 255, 0.6);
 }
 
 .currency-input input:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
+    background: rgba(255, 255, 255, 0.9);
 }
 
 .currency-input input::placeholder {
-    color: #cbd5e0;
-    font-weight: normal;
+    color: var(--text-secondary);
+    opacity: 0.5;
+    font-weight: 400;
 }
 
 /* 禁用输入时去除 spinner */
@@ -346,44 +374,50 @@ header h1 {
 
 /* 汇率显示 */
 .currency-rate {
-    font-size: 0.75rem;
-    color: var(--text-light);
+    font-size: 0.6875rem;
+    color: var(--text-secondary);
     text-align: right;
     margin-top: 6px;
+    font-weight: 400;
 }
 
 /* ==================== 底部 ==================== */
 footer {
     text-align: center;
-    padding: 30px 20px;
-    color: rgba(255, 255, 255, 0.8);
-    font-size: 0.9rem;
+    padding: 40px 20px 30px;
+    color: var(--text-secondary);
+    font-size: 0.875rem;
 }
 
 footer a {
-    color: white;
+    color: var(--primary-color);
     text-decoration: none;
     font-weight: 500;
+    transition: opacity 0.2s;
 }
 
 footer a:hover {
-    text-decoration: underline;
+    opacity: 0.7;
 }
 
 .footer-note {
     margin-top: 8px;
-    opacity: 0.7;
-    font-size: 0.85rem;
+    color: var(--text-secondary);
+    font-size: 0.8125rem;
 }
 
 /* ==================== 响应式设计 ==================== */
 @media (max-width: 768px) {
     body {
-        padding: 15px;
+        padding: 16px;
+    }
+    
+    header {
+        padding: 24px 0 16px;
     }
     
     header h1 {
-        font-size: 1.8rem;
+        font-size: 2rem;
     }
     
     .header-info {
@@ -412,9 +446,9 @@ footer a:hover {
     }
     
     .currency-icon {
-        width: 42px;
-        height: 42px;
-        font-size: 1rem;
+        width: 44px;
+        height: 44px;
+        font-size: 1.25rem;
     }
     
     .currency-info {

static/js/app.js

@@ -23,6 +23,17 @@ class CurrencyConverter {
         // 常用货币列表
         this.priorityCodes = ['CNY', 'USD', 'EUR', 'GBP', 'JPY', 'HKD', 'AUD', 'CAD', 'CHF', 'SGD', 'KRW', 'TWD', 'THB', 'MYR', 'INR', 'RUB'];
         
+        // 货币国旗映射
+        this.currencyFlags = {
+            'USD': '🇺🇸', 'EUR': '🇪🇺', 'GBP': '🇬🇧', 'JPY': '🇯🇵', 'CNY': '🇨🇳', 'AUD': '🇦🇺',
+            'CAD': '🇨🇦', 'CHF': '🇨🇭', 'HKD': '🇭🇰', 'SGD': '🇸🇬', 'SEK': '🇸🇪', 'KRW': '🇰🇷',
+            'NOK': '🇳🇴', 'NZD': '🇳🇿', 'INR': '🇮🇳', 'MXN': '🇲🇽', 'TWD': '🇹🇼', 'ZAR': '🇿🇦',
+            'BRL': '🇧🇷', 'DKK': '🇩🇰', 'PLN': '🇵🇱', 'THB': '🇹🇭', 'MYR': '🇲🇾', 'HUF': '🇭🇺',
+            'CZK': '🇨🇿', 'ILS': '🇮🇱', 'CLP': '🇨🇱', 'PHP': '🇵🇭', 'AED': '🇦🇪', 'SAR': '🇸🇦',
+            'TRY': '🇹🇷', 'RUB': '🇷🇺', 'IDR': '🇮🇩', 'VND': '🇻🇳', 'ARS': '🇦🇷', 'EGP': '🇪🇬',
+            'PKR': '🇵🇰', 'BGN': '🇧🇬', 'RON': '🇷🇴', 'ISK': '🇮🇸', 'HRK': '🇭🇷', 'UAH': '🇺🇦'
+        };
+        
         // 初始化
         this.init();
     }
@@ -105,6 +116,22 @@ class CurrencyConverter {
         }
     }
 
+    /**
+     * 获取货币图标（国旗或符号）
+     */
+    getCurrencyIcon(currency) {
+        // 优先使用国旗 emoji
+        if (this.currencyFlags[currency.code]) {
+            return this.currencyFlags[currency.code];
+        }
+        // 使用货币符号
+        if (currency.symbol && currency.symbol.length <= 3) {
+            return currency.symbol;
+        }
+        // 默认使用代码前两个字母
+        return currency.code.substring(0, 2);
+    }
+
     /**
      * 渲染货币网格
      */
@@ -116,13 +143,13 @@ class CurrencyConverter {
         grid.innerHTML = this.currencies.map(currency => {
             const isPriority = this.priorityCodes.includes(currency.code);
             const rate = this.rates[currency.code] || 0;
-            const symbol = currency.symbol || currency.code.substring(0, 2);
+            const icon = this.getCurrencyIcon(currency);
             
             return `
                 <div class="currency-card ${isPriority ? 'priority' : ''}" 
                      data-code="${currency.code}"
                      data-priority="${isPriority}">
-                    <div class="currency-icon">${symbol}</div>
+                    <div class="currency-icon">${icon}</div>
                     <div class="currency-info">
                         <div class="currency-code">${currency.code}</div>
                         <div class="currency-name" title="${currency.name}">${currency.name_cn}</div>

templates/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>汇率换算器</title>
+    <title>Currency Converter · 汇率换算</title>
     <link rel="stylesheet" href="/static/css/style.css">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💱</text></svg>">
 </head>
@@ -11,15 +11,15 @@
     <div class="container">
         <!-- 头部 -->
         <header>
-            <h1>💱 汇率换算器</h1>
+            <h1>💱 Currency Converter</h1>
             <div class="header-info">
                 <p class="update-time">
-                    <span class="label">数据更新时间:</span>
-                    <span id="lastUpdate">加载中...</span>
+                    <span class="label">Last Update</span>
+                    <span id="lastUpdate">Loading...</span>
                 </p>
                 <p class="currency-count">
-                    <span class="label">支持货币:</span>
-                    <span id="currencyCount">-</span> 种
+                    <span class="label">Currencies</span>
+                    <span id="currencyCount">-</span>
                 </p>
             </div>
         </header>
@@ -33,11 +33,11 @@
                         <circle cx="11" cy="11" r="8"/>
                         <path d="M21 21l-4.35-4.35"/>
                     </svg>
-                    <input type="text" id="searchInput" placeholder="搜索货币代码或名称...">
+                    <input type="text" id="searchInput" placeholder="Search currency code or name...">
                 </div>
                 <div class="filter-buttons">
-                    <button class="filter-btn active" data-filter="all">全部</button>
-                    <button class="filter-btn" data-filter="priority">常用</button>
+                    <button class="filter-btn active" data-filter="all">All</button>
+                    <button class="filter-btn" data-filter="priority">Popular</button>
                 </div>
             </div>
 
@@ -47,13 +47,13 @@
                     <circle cx="12" cy="12" r="10"/>
                     <path d="M12 16v-4M12 8h.01"/>
                 </svg>
-                <span>在任意货币输入框中输入金额，其他货币将自动换算</span>
+                <span>Enter amount in any currency field to convert automatically</span>
             </div>
 
             <!-- 加载状态 -->
             <div class="loading" id="loading">
                 <div class="spinner"></div>
-                <p>正在加载汇率数据...</p>
+                <p>Loading exchange rates...</p>
             </div>
 
             <!-- 错误提示 -->
@@ -62,8 +62,8 @@
                     <circle cx="12" cy="12" r="10"/>
                     <path d="M15 9l-6 6M9 9l6 6"/>
                 </svg>
-                <span id="errorText">加载失败</span>
-                <button id="retryBtn" class="retry-btn">重试</button>
+                <span id="errorText">Failed to load</span>
+                <button id="retryBtn" class="retry-btn">Retry</button>
             </div>
 
             <!-- 货币列表 -->
@@ -74,8 +74,8 @@
 
         <!-- 底部 -->
         <footer>
-            <p>数据来源: <a href="https://www.exchangerate-api.com/" target="_blank">ExchangeRate-API</a></p>
-            <p class="footer-note">汇率每日更新 | 基准货币: <span id="baseCurrency">CNY</span></p>
+            <p>Data Source: <a href="https://www.exchangerate-api.com/" target="_blank" rel="noopener">ExchangeRate-API</a></p>
+            <p class="footer-note">Daily Updates · Base Currency: <span id="baseCurrency">CNY</span></p>
         </footer>
     </div>