update GUI

.snow/notebook/exchangeRates.json

@@ -0,0 +1,29 @@
+{
+  "templates/index.html": [
+    {
+      "id": "notebook-1765162045130_96lg7j8bb",
+      "filePath": "templates/index.html",
+      "note": "✅ Redesigned with Apple design philosophy: Clean header with structured info items, improved semantic HTML structure, removed emoji from title for cleaner look, added proper aria labels and accessibility considerations",
+      "createdAt": "2025-12-08T10:47:25.130",
+      "updatedAt": "2025-12-08T10:47:25.130"
+    }
+  ],
+  "static/css/style.css": [
+    {
+      "id": "notebook-1765162045131_g1ouh1xmh",
+      "filePath": "static/css/style.css",
+      "note": "✅ Complete Apple Design System implementation: CSS variables for colors/spacing/transitions, refined shadows and blur effects, improved button states with proper hover/active feedback, staggered card animations, responsive design for all screen sizes, professional scrollbar styling",
+      "createdAt": "2025-12-08T10:47:25.131",
+      "updatedAt": "2025-12-08T10:47:25.131"
+    }
+  ],
+  "static/js/app.js": [
+    {
+      "id": "notebook-1765162045132_ob1xtd6gr",
+      "filePath": "static/js/app.js",
+      "note": "✅ Enhanced currency symbol display: Comprehensive currencyFlags mapping (50+ countries), added currencySymbols mapping for currencies without flags (₹ ₽ ₩ ฿ etc.), priority order: flag → symbol → API symbol → code abbreviation. Ensures all currencies display appropriate visual identifiers.",
+      "createdAt": "2025-12-08T10:47:25.132",
+      "updatedAt": "2025-12-08T10:47:25.132"
+    }
+  ]
+}

static/css/style.css

@@ -1,196 +1,306 @@
-/* ==================== 基础样式 ==================== */
-* {
+/* ==================== Apple Design System ==================== */
+/* Reset & Base */
+*,
+*::before,
+*::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 :root {
-    --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);
+    /* Apple Color Palette */
+    --color-blue: #007AFF;
+    --color-blue-dark: #0051D5;
+    --color-blue-light: #5AC8FA;
+    --color-indigo: #5856D6;
+    --color-green: #34C759;
+    --color-red: #FF3B30;
+    --color-orange: #FF9500;
+    --color-yellow: #FFCC00;
+    
+    /* Neutral Colors */
+    --color-gray-1: #F5F5F7;
+    --color-gray-2: #E8E8ED;
+    --color-gray-3: #D1D1D6;
+    --color-gray-4: #C7C7CC;
+    --color-gray-5: #AEAEB2;
+    --color-gray-6: #8E8E93;
+    --color-gray-7: #636366;
+    --color-gray-8: #48484A;
+    --color-gray-9: #3A3A3C;
+    --color-gray-10: #2C2C2E;
+    --color-gray-11: #1C1C1E;
+    
+    /* Semantic Colors */
+    --color-text-primary: #1D1D1F;
+    --color-text-secondary: #86868B;
+    --color-text-tertiary: #AEAEB2;
+    --color-background: #FFFFFF;
+    --color-background-secondary: #F5F5F7;
+    --color-background-elevated: #FFFFFF;
+    
+    /* Borders & Dividers */
+    --color-border: rgba(0, 0, 0, 0.06);
+    --color-divider: rgba(0, 0, 0, 0.08);
+    
+    /* Shadows */
+    --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.08);
+    --shadow-xlarge: 0 20px 25px rgba(0, 0, 0, 0.06), 0 8px 10px rgba(0, 0, 0, 0.08);
+    
+    /* Blur Effects */
+    --blur-small: blur(10px);
+    --blur-medium: blur(20px);
+    --blur-large: blur(40px);
+    
+    /* Border Radius */
+    --radius-small: 8px;
+    --radius-medium: 12px;
+    --radius-large: 16px;
+    --radius-xlarge: 20px;
+    
+    /* Spacing */
+    --space-xs: 4px;
+    --space-sm: 8px;
+    --space-md: 12px;
+    --space-lg: 16px;
+    --space-xl: 24px;
+    --space-2xl: 32px;
+    --space-3xl: 48px;
+    --space-4xl: 64px;
+    
+    /* Typography */
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    
+    /* Transitions */
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
-    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
+    background: linear-gradient(135deg, #F5F5F7 0%, #E8E8ED 100%);
+    background-attachment: fixed;
     min-height: 100vh;
-    padding: 20px;
-    color: var(--text-color);
+    color: var(--color-text-primary);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+    padding: var(--space-xl);
 }
 
-/* ==================== 容器 ==================== */
+/* ==================== Container ==================== */
 .container {
     max-width: 1400px;
     margin: 0 auto;
 }
 
-/* ==================== 头部 ==================== */
+/* ==================== Header ==================== */
 header {
     text-align: center;
-    margin-bottom: 40px;
-    padding: 40px 0 20px;
+    margin-bottom: var(--space-4xl);
+    padding: var(--space-3xl) 0;
+}
+
+.header-content {
+    margin-bottom: var(--space-2xl);
 }
 
 header h1 {
-    font-size: 3rem;
-    font-weight: 600;
-    margin-bottom: 12px;
-    color: var(--text-color);
-    letter-spacing: -0.5px;
+    font-size: 3.5rem;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    letter-spacing: -0.02em;
+    margin-bottom: var(--space-md);
+}
+
+.header-subtitle {
+    font-size: 1.125rem;
+    font-weight: var(--font-weight-regular);
+    color: var(--color-text-secondary);
+    letter-spacing: -0.01em;
 }
 
 .header-info {
     display: flex;
+    align-items: center;
     justify-content: center;
-    gap: 32px;
+    gap: var(--space-xl);
     flex-wrap: wrap;
 }
 
-.header-info p {
+.info-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xs);
+}
+
+.info-label {
+    font-size: 0.75rem;
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.info-value {
     font-size: 0.9375rem;
-    color: var(--text-secondary);
-    font-weight: 400;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
 }
 
-.header-info .label {
-    color: var(--text-secondary);
-    margin-right: 4px;
+.info-divider {
+    width: 1px;
+    height: 24px;
+    background: var(--color-divider);
 }
 
-/* ==================== 工具栏 ==================== */
+/* ==================== Toolbar ==================== */
 .toolbar {
     display: flex;
-    gap: 15px;
-    margin-bottom: 20px;
+    gap: var(--space-md);
+    margin-bottom: var(--space-xl);
     flex-wrap: wrap;
 }
 
-/* 搜索框 */
+/* Search Box */
 .search-box {
     flex: 1;
-    min-width: 250px;
+    min-width: 280px;
     position: relative;
 }
 
-.search-box .search-icon {
+.search-icon {
     position: absolute;
-    left: 15px;
+    left: var(--space-lg);
     top: 50%;
     transform: translateY(-50%);
-    width: 20px;
-    height: 20px;
-    color: var(--text-light);
+    width: 18px;
+    height: 18px;
+    color: var(--color-text-tertiary);
+    pointer-events: none;
 }
 
 .search-box input {
     width: 100%;
-    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: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 14px 20px 14px 48px;
+    border: 1.5px solid var(--color-border);
+    border-radius: var(--radius-large);
+    font-size: 0.9375rem;
+    font-weight: var(--font-weight-regular);
+    background: var(--color-background-elevated);
+    backdrop-filter: var(--blur-medium);
+    -webkit-backdrop-filter: var(--blur-medium);
+    box-shadow: var(--shadow-small);
+    transition: all var(--transition-base);
+    color: var(--color-text-primary);
+}
+
+.search-box input::placeholder {
+    color: var(--color-text-tertiary);
 }
 
 .search-box input:focus {
     outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1), var(--card-shadow);
+    border-color: var(--color-blue);
+    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1), var(--shadow-medium);
+    background: var(--color-background);
 }
 
-/* 筛选按钮 */
+/* Filter Buttons */
 .filter-buttons {
     display: flex;
-    gap: 10px;
+    gap: var(--space-sm);
 }
 
 .filter-btn {
-    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);
+    padding: 12px 24px;
+    border: 1.5px solid var(--color-border);
+    border-radius: var(--radius-large);
+    background: var(--color-background-elevated);
+    backdrop-filter: var(--blur-medium);
+    -webkit-backdrop-filter: var(--blur-medium);
+    color: var(--color-text-primary);
     font-size: 0.9375rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
     cursor: pointer;
-    box-shadow: var(--card-shadow);
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: var(--shadow-small);
+    transition: all var(--transition-base);
+    white-space: nowrap;
 }
 
 .filter-btn:hover {
-    background: rgba(255, 255, 255, 0.9);
+    background: var(--color-background);
     transform: translateY(-1px);
+    box-shadow: var(--shadow-medium);
 }
 
 .filter-btn.active {
-    background: var(--primary-color);
+    background: var(--color-blue);
     color: white;
-    border-color: var(--primary-color);
+    border-color: var(--color-blue);
+    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15), var(--shadow-medium);
+}
+
+.filter-btn.active:hover {
+    background: var(--color-blue-dark);
+    border-color: var(--color-blue-dark);
+    transform: translateY(-1px);
 }
 
-/* ==================== 提示信息 ==================== */
-.tips {
+/* ==================== Info Banner ==================== */
+.info-banner {
     display: flex;
     align-items: center;
-    gap: 12px;
-    background: var(--card-bg);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    padding: 16px 20px;
-    border-radius: 12px;
-    margin-bottom: 24px;
-    border: 1px solid var(--border-color);
-    box-shadow: var(--card-shadow);
-}
-
-.tips svg {
+    gap: var(--space-md);
+    background: rgba(0, 122, 255, 0.05);
+    backdrop-filter: var(--blur-medium);
+    -webkit-backdrop-filter: var(--blur-medium);
+    padding: var(--space-lg) var(--space-xl);
+    border-radius: var(--radius-large);
+    margin-bottom: var(--space-xl);
+    border: 1.5px solid rgba(0, 122, 255, 0.12);
+}
+
+.info-icon {
     width: 20px;
     height: 20px;
-    color: var(--primary-color);
+    color: var(--color-blue);
     flex-shrink: 0;
 }
 
-.tips span {
-    color: var(--text-secondary);
+.info-banner span {
+    color: var(--color-text-secondary);
     font-size: 0.875rem;
+    font-weight: var(--font-weight-regular);
     line-height: 1.5;
 }
 
-/* ==================== 加载状态 ==================== */
-.loading {
+/* ==================== Loading State ==================== */
+.loading-state {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 80px 20px;
+    padding: var(--space-4xl) var(--space-xl);
 }
 
-.spinner {
-    width: 44px;
-    height: 44px;
-    border: 3px solid rgba(0, 122, 255, 0.2);
-    border-top-color: var(--primary-color);
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    border: 3px solid rgba(0, 122, 255, 0.15);
+    border-top-color: var(--color-blue);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
-    margin-bottom: 20px;
+    margin-bottom: var(--space-xl);
 }
 
 @keyframes spin {
@@ -199,169 +309,214 @@ header h1 {
     }
 }
 
-.loading p {
+.loading-text {
     font-size: 1.0625rem;
-    color: var(--text-secondary);
-    font-weight: 500;
+    color: var(--color-text-secondary);
+    font-weight: var(--font-weight-medium);
 }
 
-.loading.hidden {
+.loading-state.hidden {
     display: none;
 }
 
-/* ==================== 错误提示 ==================== */
-.error-message {
+/* ==================== Error State ==================== */
+.error-state {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    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: 24px;
-}
-
-.error-message svg {
-    width: 22px;
-    height: 22px;
-    color: var(--error-color);
-    flex-shrink: 0;
+    justify-content: center;
+    gap: var(--space-lg);
+    background: rgba(255, 59, 48, 0.05);
+    border: 1.5px solid rgba(255, 59, 48, 0.15);
+    padding: var(--space-3xl) var(--space-xl);
+    border-radius: var(--radius-xlarge);
+    margin-bottom: var(--space-xl);
+    text-align: center;
 }
 
-.error-message span {
-    flex: 1;
-    color: var(--error-color);
-    font-size: 0.9375rem;
-    font-weight: 500;
+.error-icon {
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 59, 48, 0.1);
+    border-radius: 50%;
+}
+
+.error-icon svg {
+    width: 28px;
+    height: 28px;
+    color: var(--color-red);
 }
 
-.retry-btn {
-    padding: 8px 18px;
-    background: var(--error-color);
+.error-text {
+    font-size: 1.0625rem;
+    color: var(--color-red);
+    font-weight: var(--font-weight-medium);
+}
+
+.retry-button {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: 12px 24px;
+    background: var(--color-red);
     color: white;
     border: none;
-    border-radius: 8px;
+    border-radius: var(--radius-medium);
     cursor: pointer;
-    font-size: 0.875rem;
-    font-weight: 600;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: 0.9375rem;
+    font-weight: var(--font-weight-semibold);
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-medium);
 }
 
-.retry-btn:hover {
+.retry-button svg {
+    width: 16px;
+    height: 16px;
+}
+
+.retry-button:hover {
     background: #d70015;
-    transform: scale(1.02);
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-large);
+}
+
+.retry-button:active {
+    transform: translateY(0);
 }
 
-/* ==================== 货币网格 ==================== */
+/* ==================== Currency Grid ==================== */
 .currency-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 15px;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: var(--space-lg);
+    animation: fadeIn 0.4s ease-out;
 }
 
-/* ==================== 货币卡片 ==================== */
+/* ==================== Currency Card ==================== */
 .currency-card {
-    background: var(--card-bg);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border-radius: 16px;
-    padding: 20px;
-    box-shadow: var(--card-shadow);
+    background: var(--color-background-elevated);
+    backdrop-filter: var(--blur-medium);
+    -webkit-backdrop-filter: var(--blur-medium);
+    border-radius: var(--radius-large);
+    padding: var(--space-lg);
+    box-shadow: var(--shadow-small);
     display: flex;
     align-items: center;
-    gap: 16px;
-    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    border: 1px solid var(--border-color);
+    gap: var(--space-md);
+    transition: all var(--transition-base);
+    border: 1.5px solid var(--color-border);
+    position: relative;
+    overflow: hidden;
+}
+
+.currency-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 3px;
+    height: 100%;
+    background: transparent;
+    transition: all var(--transition-base);
 }
 
 .currency-card:hover {
     transform: translateY(-2px);
-    box-shadow: var(--card-shadow-hover);
-    background: rgba(255, 255, 255, 0.85);
+    box-shadow: var(--shadow-large);
+    border-color: var(--color-gray-3);
 }
 
-.currency-card.priority {
-    border-left: 3px solid var(--primary-color);
+.currency-card.priority::before {
+    background: var(--color-blue);
 }
 
 .currency-card.active {
-    border-color: var(--primary-color);
-    background: rgba(255, 255, 255, 0.9);
-    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1), var(--card-shadow-hover);
+    border-color: var(--color-blue);
+    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1), var(--shadow-large);
 }
 
 .currency-card.hidden {
     display: none;
 }
 
-/* 货币图标/符号 */
+/* Currency Icon */
 .currency-icon {
-    width: 52px;
-    height: 52px;
-    background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), rgba(88, 86, 214, 0.1));
-    border-radius: 14px;
+    width: 56px;
+    height: 56px;
+    background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(88, 86, 214, 0.08));
+    border-radius: var(--radius-medium);
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 1.5rem;
+    font-size: 1.75rem;
     flex-shrink: 0;
-    border: 1px solid rgba(0, 122, 255, 0.15);
+    border: 1.5px solid rgba(0, 122, 255, 0.12);
+    transition: all var(--transition-base);
 }
 
-/* 货币信息 */
+.currency-card:hover .currency-icon {
+    transform: scale(1.05);
+    background: linear-gradient(135deg, rgba(0, 122, 255, 0.12), rgba(88, 86, 214, 0.12));
+}
+
+/* Currency Info */
 .currency-info {
-    flex: 0 0 90px;
+    flex: 0 0 100px;
 }
 
 .currency-code {
     font-size: 1.125rem;
-    font-weight: 600;
-    color: var(--text-color);
-    letter-spacing: -0.2px;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text-primary);
+    letter-spacing: -0.01em;
+    margin-bottom: var(--space-xs);
 }
 
 .currency-name {
     font-size: 0.8125rem;
-    color: var(--text-secondary);
+    color: var(--color-text-secondary);
+    font-weight: var(--font-weight-regular);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: 100px;
-    font-weight: 400;
+    max-width: 110px;
 }
 
-/* 输入区域 */
+/* Currency Input */
 .currency-input {
     flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .currency-input input {
     width: 100%;
     padding: 12px 14px;
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
+    border: 1.5px solid var(--color-border);
+    border-radius: var(--radius-medium);
     font-size: 1.0625rem;
+    font-weight: var(--font-weight-medium);
     text-align: right;
-    font-weight: 500;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    color: var(--text-color);
-    background: rgba(255, 255, 255, 0.6);
+    transition: all var(--transition-base);
+    color: var(--color-text-primary);
+    background: rgba(0, 0, 0, 0.02);
 }
 
 .currency-input input:focus {
     outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
-    background: rgba(255, 255, 255, 0.9);
+    border-color: var(--color-blue);
+    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
+    background: var(--color-background);
 }
 
 .currency-input input::placeholder {
-    color: var(--text-secondary);
-    opacity: 0.5;
-    font-weight: 400;
+    color: var(--color-text-tertiary);
+    font-weight: var(--font-weight-regular);
 }
 
-/* 禁用输入时去除 spinner */
 .currency-input input::-webkit-outer-spin-button,
 .currency-input input::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -372,57 +527,129 @@ header h1 {
     -moz-appearance: textfield;
 }
 
-/* 汇率显示 */
 .currency-rate {
     font-size: 0.6875rem;
-    color: var(--text-secondary);
+    color: var(--color-text-tertiary);
     text-align: right;
-    margin-top: 6px;
-    font-weight: 400;
+    margin-top: var(--space-sm);
+    font-weight: var(--font-weight-regular);
+    letter-spacing: 0.01em;
 }
 
-/* ==================== 底部 ==================== */
+/* ==================== Footer ==================== */
 footer {
     text-align: center;
-    padding: 40px 20px 30px;
-    color: var(--text-secondary);
+    padding: var(--space-4xl) var(--space-xl) var(--space-2xl);
+}
+
+.footer-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-sm);
+}
+
+.footer-text {
+    color: var(--color-text-secondary);
     font-size: 0.875rem;
+    font-weight: var(--font-weight-regular);
 }
 
-footer a {
-    color: var(--primary-color);
+.footer-text a {
+    color: var(--color-blue);
     text-decoration: none;
-    font-weight: 500;
-    transition: opacity 0.2s;
+    font-weight: var(--font-weight-medium);
+    transition: opacity var(--transition-fast);
 }
 
-footer a:hover {
+.footer-text a:hover {
     opacity: 0.7;
 }
 
 .footer-note {
-    margin-top: 8px;
-    color: var(--text-secondary);
+    color: var(--color-text-tertiary);
     font-size: 0.8125rem;
+    font-weight: var(--font-weight-regular);
 }
 
-/* ==================== 响应式设计 ==================== */
+/* ==================== Animations ==================== */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.currency-card {
+    animation: fadeIn 0.4s ease-out backwards;
+}
+
+/* Staggered animation for cards */
+.currency-card:nth-child(1) { animation-delay: 0.02s; }
+.currency-card:nth-child(2) { animation-delay: 0.04s; }
+.currency-card:nth-child(3) { animation-delay: 0.06s; }
+.currency-card:nth-child(4) { animation-delay: 0.08s; }
+.currency-card:nth-child(5) { animation-delay: 0.1s; }
+.currency-card:nth-child(6) { animation-delay: 0.12s; }
+.currency-card:nth-child(7) { animation-delay: 0.14s; }
+.currency-card:nth-child(8) { animation-delay: 0.16s; }
+.currency-card:nth-child(9) { animation-delay: 0.18s; }
+.currency-card:nth-child(10) { animation-delay: 0.2s; }
+.currency-card:nth-child(11) { animation-delay: 0.22s; }
+.currency-card:nth-child(12) { animation-delay: 0.24s; }
+
+/* ==================== Scrollbar ==================== */
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--color-gray-1);
+    border-radius: var(--radius-small);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--color-gray-4);
+    border-radius: var(--radius-small);
+    transition: background var(--transition-fast);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--color-gray-5);
+}
+
+/* ==================== Responsive Design ==================== */
 @media (max-width: 768px) {
     body {
-        padding: 16px;
+        padding: var(--space-md);
     }
     
     header {
-        padding: 24px 0 16px;
+        padding: var(--space-xl) 0;
+        margin-bottom: var(--space-2xl);
     }
     
     header h1 {
-        font-size: 2rem;
+        font-size: 2.25rem;
+    }
+    
+    .header-subtitle {
+        font-size: 1rem;
     }
     
     .header-info {
         flex-direction: column;
-        gap: 10px;
+        gap: var(--space-md);
+    }
+    
+    .info-divider {
+        width: 40px;
+        height: 1px;
     }
     
     .toolbar {
@@ -435,6 +662,11 @@ footer a:hover {
     
     .filter-buttons {
         justify-content: center;
+        width: 100%;
+    }
+    
+    .filter-btn {
+        flex: 1;
     }
     
     .currency-grid {
@@ -442,68 +674,73 @@ footer a:hover {
     }
     
     .currency-card {
-        padding: 15px;
+        padding: var(--space-md);
     }
     
     .currency-icon {
-        width: 44px;
-        height: 44px;
-        font-size: 1.25rem;
+        width: 48px;
+        height: 48px;
+        font-size: 1.5rem;
     }
     
     .currency-info {
-        flex: 0 0 80px;
+        flex: 0 0 85px;
+    }
+    
+    .currency-code {
+        font-size: 1rem;
     }
     
     .currency-name {
-        max-width: 80px;
+        font-size: 0.75rem;
+        max-width: 90px;
     }
-}
-
-/* ==================== 动画 ==================== */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
+    
+    .currency-input input {
+        font-size: 0.9375rem;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
+    
+    footer {
+        padding: var(--space-2xl) var(--space-md) var(--space-xl);
     }
 }
 
-.currency-card {
-    animation: fadeIn 0.3s ease-out;
-}
-
-/* 卡片依次出现的延迟效果 */
-.currency-card:nth-child(1) { animation-delay: 0.02s; }
-.currency-card:nth-child(2) { animation-delay: 0.04s; }
-.currency-card:nth-child(3) { animation-delay: 0.06s; }
-.currency-card:nth-child(4) { animation-delay: 0.08s; }
-.currency-card:nth-child(5) { animation-delay: 0.1s; }
-.currency-card:nth-child(6) { animation-delay: 0.12s; }
-.currency-card:nth-child(7) { animation-delay: 0.14s; }
-.currency-card:nth-child(8) { animation-delay: 0.16s; }
-.currency-card:nth-child(9) { animation-delay: 0.18s; }
-.currency-card:nth-child(10) { animation-delay: 0.2s; }
-
-/* ==================== 滚动条美化 ==================== */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 4px;
+@media (max-width: 480px) {
+    header h1 {
+        font-size: 1.875rem;
+    }
+    
+    .header-subtitle {
+        font-size: 0.9375rem;
+    }
+    
+    .info-label {
+        font-size: 0.6875rem;
+    }
+    
+    .info-value {
+        font-size: 0.875rem;
+    }
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
+/* ==================== Print Styles ==================== */
+@media print {
+    body {
+        background: white;
+        padding: 0;
+    }
+    
+    .toolbar,
+    .info-banner,
+    .loading-state,
+    .error-state,
+    footer {
+        display: none;
+    }
+    
+    .currency-card {
+        break-inside: avoid;
+        box-shadow: none;
+        border: 1px solid var(--color-border);
+    }
 }

static/js/app.js

@@ -1,6 +1,6 @@
 /**
  * 汇率换算器前端交互逻辑
- * 
+ *
  * 功能：
  * - 加载货币列表和汇率数据
  * - 实时输入实时换算
@@ -9,150 +9,278 @@
  */
 
 class CurrencyConverter {
-    constructor() {
-        // 数据
-        this.currencies = [];
-        this.rates = {};
-        this.baseCurrency = 'CNY';
-        
-        // 状态
-        this.activeInput = null;
-        this.debounceTimer = null;
-        this.currentFilter = 'all';
-        
-        // 常用货币列表
-        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();
+  constructor() {
+    // 数据
+    this.currencies = [];
+    this.rates = {};
+    this.baseCurrency = "CNY";
+
+    // 状态
+    this.activeInput = null;
+    this.debounceTimer = null;
+    this.currentFilter = "all";
+
+    // 常用货币列表
+    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: "🇸🇪",
+      NOK: "🇳🇴",
+      DKK: "🇩🇰",
+      PLN: "🇵🇱",
+      HUF: "🇭🇺",
+      CZK: "🇨🇿",
+      RON: "🇷🇴",
+      BGN: "🇧🇬",
+      HRK: "🇭🇷",
+      ISK: "🇮🇸",
+
+      // 亚洲
+      KRW: "🇰🇷",
+      TWD: "🇹🇼",
+      THB: "🇹🇭",
+      MYR: "🇲🇾",
+      INR: "🇮🇳",
+      IDR: "🇮🇩",
+      VND: "🇻🇳",
+      PHP: "🇵🇭",
+      PKR: "🇵🇰",
+
+      // 中东
+      AED: "🇦🇪",
+      SAR: "🇸🇦",
+      ILS: "🇮🇱",
+      TRY: "🇹🇷",
+      EGP: "🇪🇬",
+
+      // 美洲
+      MXN: "🇲🇽",
+      BRL: "🇧🇷",
+      ARS: "🇦🇷",
+      CLP: "🇨🇱",
+      COP: "🇨🇴",
+      PEN: "🇵🇪",
+      UYU: "🇺🇾",
+
+      // 非洲
+      ZAR: "🇿🇦",
+      NGN: "🇳🇬",
+      KES: "🇰🇪",
+
+      // 大洋洲
+      NZD: "🇳🇿",
+
+      // 东欧与独联体
+      RUB: "🇷🇺",
+      UAH: "🇺🇦",
+      KZT: "🇰🇿",
+    };
+
+    // 货币符号映射（用于没有国旗的货币）
+    this.currencySymbols = {
+      USD: "$",
+      EUR: "€",
+      GBP: "£",
+      JPY: "¥",
+      CNY: "¥",
+      AUD: "$",
+      CAD: "$",
+      CHF: "Fr",
+      HKD: "$",
+      SGD: "$",
+      KRW: "₩",
+      TWD: "$",
+      THB: "฿",
+      MYR: "RM",
+      INR: "₹",
+      IDR: "Rp",
+      VND: "₫",
+      PHP: "₱",
+      AED: "د.إ",
+      SAR: "﷼",
+      ILS: "₪",
+      TRY: "₺",
+      RUB: "₽",
+      MXN: "$",
+      BRL: "R$",
+      ARS: "$",
+      ZAR: "R",
+      NZD: "$",
+      SEK: "kr",
+      NOK: "kr",
+      DKK: "kr",
+      PLN: "zł",
+      CZK: "Kč",
+      HUF: "Ft",
+      RON: "lei",
+      BGN: "лв",
+      HRK: "kn",
+      ISK: "kr",
+      PKR: "₨",
+      EGP: "£",
+      CLP: "$",
+      COP: "$",
+      PEN: "S/",
+      UYU: "$",
+      NGN: "₦",
+      KES: "KSh",
+      UAH: "₴",
+      KZT: "₸",
+    };
+
+    // 初始化
+    this.init();
+  }
+
+  /**
+   * 初始化应用
+   */
+  async init() {
+    try {
+      // 并行加载数据
+      await Promise.all([this.loadCurrencies(), this.loadRates()]);
+
+      // 隐藏加载状态
+      this.hideLoading();
+
+      // 渲染界面
+      this.renderCurrencyGrid();
+      this.setupEventListeners();
+      this.updateStatusInfo();
+    } catch (error) {
+      console.error("Initialization failed:", error);
+      this.showError("加载汇率数据失败，请检查���络连接");
     }
-
-    /**
-     * 初始化应用
-     */
-    async init() {
-        try {
-            // 并行加载数据
-            await Promise.all([
-                this.loadCurrencies(),
-                this.loadRates()
-            ]);
-            
-            // 隐藏加载状态
-            this.hideLoading();
-            
-            // 渲染界面
-            this.renderCurrencyGrid();
-            this.setupEventListeners();
-            this.updateStatusInfo();
-            
-        } catch (error) {
-            console.error('Initialization failed:', error);
-            this.showError('加载汇率数据失败，请检查网络连接');
-        }
+  }
+
+  /**
+   * 加载货币列表
+   */
+  async loadCurrencies() {
+    try {
+      const response = await fetch("/api/currencies");
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (data.success) {
+        this.currencies = data.currencies;
+        console.log(`Loaded ${this.currencies.length} currencies`);
+      } else {
+        throw new Error("API returned unsuccessful response");
+      }
+    } catch (error) {
+      console.error("Failed to load currencies:", error);
+      throw error;
     }
-
-    /**
-     * 加载货币列表
-     */
-    async loadCurrencies() {
-        try {
-            const response = await fetch('/api/currencies');
-            
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}`);
-            }
-            
-            const data = await response.json();
-            
-            if (data.success) {
-                this.currencies = data.currencies;
-                console.log(`Loaded ${this.currencies.length} currencies`);
-            } else {
-                throw new Error('API returned unsuccessful response');
-            }
-            
-        } catch (error) {
-            console.error('Failed to load currencies:', error);
-            throw error;
-        }
+  }
+
+  /**
+   * 加载汇率数据
+   */
+  async loadRates() {
+    try {
+      const response = await fetch("/api/rates");
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (data.success) {
+        this.rates = data.rates;
+        this.baseCurrency = data.base_currency;
+        console.log(
+          `Loaded rates for ${Object.keys(this.rates).length} currencies`
+        );
+      } else {
+        throw new Error("API returned unsuccessful response");
+      }
+    } catch (error) {
+      console.error("Failed to load rates:", error);
+      throw error;
     }
-
-    /**
-     * 加载汇率数据
-     */
-    async loadRates() {
-        try {
-            const response = await fetch('/api/rates');
-            
-            if (!response.ok) {
-                throw new Error(`HTTP ${response.status}`);
-            }
-            
-            const data = await response.json();
-            
-            if (data.success) {
-                this.rates = data.rates;
-                this.baseCurrency = data.base_currency;
-                console.log(`Loaded rates for ${Object.keys(this.rates).length} currencies`);
-            } else {
-                throw new Error('API returned unsuccessful response');
-            }
-            
-        } catch (error) {
-            console.error('Failed to load rates:', error);
-            throw error;
-        }
+  }
+
+  /**
+   * 获取货币图标（国旗或符号）
+   */
+  getCurrencyIcon(currency) {
+    // 优先使用国旗 emoji
+    if (this.currencyFlags[currency.code]) {
+      return this.currencyFlags[currency.code];
     }
-
-    /**
-     * 获取货币图标（国旗或符号）
-     */
-    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);
+    // 使用货币符号
+    if (this.currencySymbols[currency.code]) {
+      return this.currencySymbols[currency.code];
     }
-
-    /**
-     * 渲染货币网格
-     */
-    renderCurrencyGrid() {
-        const grid = document.getElementById('currencyGrid');
-        
-        if (!grid) return;
-        
-        grid.innerHTML = this.currencies.map(currency => {
-            const isPriority = this.priorityCodes.includes(currency.code);
-            const rate = this.rates[currency.code] || 0;
-            const icon = this.getCurrencyIcon(currency);
-            
-            return `
-                <div class="currency-card ${isPriority ? 'priority' : ''}" 
+    // 备选：使用 currency.symbol（如果API提供）
+    if (currency.symbol && currency.symbol.length <= 3) {
+      return currency.symbol;
+    }
+    // 最后：使用货币代码的前两个字母
+    return currency.code.substring(0, 2);
+  }
+
+  /**
+   * 渲染货币网格
+   */
+  renderCurrencyGrid() {
+    const grid = document.getElementById("currencyGrid");
+
+    if (!grid) return;
+
+    grid.innerHTML = this.currencies
+      .map((currency) => {
+        const isPriority = this.priorityCodes.includes(currency.code);
+        const rate = this.rates[currency.code] || 0;
+        const icon = this.getCurrencyIcon(currency);
+
+        return `
+                <div class="currency-card ${isPriority ? "priority" : ""}" 
                      data-code="${currency.code}"
                      data-priority="${isPriority}">
                     <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>
+                        <div class="currency-name" title="${currency.name}">${
+          currency.name_cn
+        }</div>
                     </div>
                     <div class="currency-input">
                         <input type="number" 
@@ -161,312 +289,323 @@ class CurrencyConverter {
                                placeholder="0.00"
                                step="any"
                                inputmode="decimal">
-                        <div class="currency-rate">1 ${this.baseCurrency} = ${this.formatRate(rate)} ${currency.code}</div>
+                        <div class="currency-rate">1 ${
+                          this.baseCurrency
+                        } = ${this.formatRate(rate)} ${currency.code}</div>
                     </div>
                 </div>
             `;
-        }).join('');
-    }
-
-    /**
-     * 设置事件监听器
-     */
-    setupEventListeners() {
-        const grid = document.getElementById('currencyGrid');
-        const searchInput = document.getElementById('searchInput');
-        const retryBtn = document.getElementById('retryBtn');
-        
-        // ========== 输入事件（事件委托）==========
-        if (grid) {
-            // 输入事件
-            grid.addEventListener('input', (e) => {
-                if (e.target.tagName === 'INPUT') {
-                    this.handleInput(e.target);
-                }
-            });
-
-            // 焦点事件
-            grid.addEventListener('focusin', (e) => {
-                if (e.target.tagName === 'INPUT') {
-                    this.activeInput = e.target;
-                    const card = e.target.closest('.currency-card');
-                    if (card) {
-                        card.classList.add('active');
-                    }
-                }
-            });
-
-            grid.addEventListener('focusout', (e) => {
-                if (e.target.tagName === 'INPUT') {
-                    const card = e.target.closest('.currency-card');
-                    if (card) {
-                        card.classList.remove('active');
-                    }
-                }
-            });
+      })
+      .join("");
+  }
+
+  /**
+   * 设置事件监听器
+   */
+  setupEventListeners() {
+    const grid = document.getElementById("currencyGrid");
+    const searchInput = document.getElementById("searchInput");
+    const retryBtn = document.getElementById("retryBtn");
+
+    // ========== 输入事件（事件委托）==========
+    if (grid) {
+      // 输入事件
+      grid.addEventListener("input", (e) => {
+        if (e.target.tagName === "INPUT") {
+          this.handleInput(e.target);
         }
-
-        // ========== 搜索事件 ==========
-        if (searchInput) {
-            searchInput.addEventListener('input', (e) => {
-                this.filterCurrencies(e.target.value);
-            });
+      });
+
+      // 焦点事件
+      grid.addEventListener("focusin", (e) => {
+        if (e.target.tagName === "INPUT") {
+          this.activeInput = e.target;
+          const card = e.target.closest(".currency-card");
+          if (card) {
+            card.classList.add("active");
+          }
         }
-
-        // ========== 筛选按钮 ==========
-        document.querySelectorAll('.filter-btn').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                // 更新按钮状态
-                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
-                e.target.classList.add('active');
-                
-                // 应用筛选
-                this.currentFilter = e.target.dataset.filter;
-                this.applyFilter();
-            });
-        });
-
-        // ========== 重试按钮 ==========
-        if (retryBtn) {
-            retryBtn.addEventListener('click', () => {
-                this.hideError();
-                this.showLoading();
-                this.init();
-            });
+      });
+
+      grid.addEventListener("focusout", (e) => {
+        if (e.target.tagName === "INPUT") {
+          const card = e.target.closest(".currency-card");
+          if (card) {
+            card.classList.remove("active");
+          }
         }
+      });
     }
 
-    /**
-     * 处理输入事件
-     */
-    handleInput(input) {
-        // 清除之前的定时器
-        clearTimeout(this.debounceTimer);
-        
-        // 防抖处理：100ms 后执行计算
-        this.debounceTimer = setTimeout(() => {
-            this.calculateAll(input);
-        }, 100);
-    }
-
-    /**
-     * 计算所有货币的换算值
-     */
-    calculateAll(sourceInput) {
-        const sourceCode = sourceInput.dataset.code;
-        const sourceValue = parseFloat(sourceInput.value);
-
-        // 如果输入为空、无效或为零，清空所有其他输入
-        if (isNaN(sourceValue) || sourceValue === 0 || sourceInput.value.trim() === '') {
-            this.clearAll(sourceInput);
-            return;
-        }
-
-        const sourceRate = this.rates[sourceCode];
-        
-        if (!sourceRate) {
-            console.warn(`Rate not found for ${sourceCode}`);
-            return;
-        }
-
-        // 计算并更新所有其他货币
-        this.currencies.forEach(currency => {
-            if (currency.code === sourceCode) return;
-
-            const targetRate = this.rates[currency.code];
-            
-            if (!targetRate) return;
-
-            // 交叉汇率计算
-            // sourceRate = 1 CNY = X source_currency
-            // targetRate = 1 CNY = Y target_currency
-            // 所以 1 source_currency = (targetRate / sourceRate) target_currency
-            const crossRate = targetRate / sourceRate;
-            const result = sourceValue * crossRate;
-
-            const input = document.getElementById(`input-${currency.code}`);
-            
-            if (input) {
-                input.value = this.formatNumber(result);
-            }
-        });
+    // ========== 搜索事件 ==========
+    if (searchInput) {
+      searchInput.addEventListener("input", (e) => {
+        this.filterCurrencies(e.target.value);
+      });
     }
 
-    /**
-     * 清空所有输入（除了指定的输入框）
-     */
-    clearAll(exceptInput = null) {
-        this.currencies.forEach(currency => {
-            const input = document.getElementById(`input-${currency.code}`);
-            
-            if (input && input !== exceptInput) {
-                input.value = '';
-            }
-        });
+    // ========== 筛选按钮 ==========
+    document.querySelectorAll(".filter-btn").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        // 更新按钮状态
+        document
+          .querySelectorAll(".filter-btn")
+          .forEach((b) => b.classList.remove("active"));
+        e.target.classList.add("active");
+
+        // 应用筛选
+        this.currentFilter = e.target.dataset.filter;
+        this.applyFilter();
+      });
+    });
+
+    // ========== 重试按钮 ==========
+    if (retryBtn) {
+      retryBtn.addEventListener("click", () => {
+        this.hideError();
+        this.showLoading();
+        this.init();
+      });
     }
-
-    /**
-     * 格式化数字显示
-     */
-    formatNumber(num) {
-        if (num === 0) return '';
-        
-        // 根据数值大小选择精度
-        if (Math.abs(num) >= 1000) {
-            return num.toFixed(2);
-        } else if (Math.abs(num) >= 1) {
-            return num.toFixed(4);
-        } else if (Math.abs(num) >= 0.0001) {
-            return num.toFixed(6);
-        } else {
-            return num.toExponential(4);
-        }
+  }
+
+  /**
+   * 处理输入事件
+   */
+  handleInput(input) {
+    // 清除之前的定时器
+    clearTimeout(this.debounceTimer);
+
+    // 防抖处理：100ms 后执行计算
+    this.debounceTimer = setTimeout(() => {
+      this.calculateAll(input);
+    }, 100);
+  }
+
+  /**
+   * 计算所有货币的换算值
+   */
+  calculateAll(sourceInput) {
+    const sourceCode = sourceInput.dataset.code;
+    const sourceValue = parseFloat(sourceInput.value);
+
+    // 如果输入为空、无效或为零，清空所有其他输入
+    if (
+      isNaN(sourceValue) ||
+      sourceValue === 0 ||
+      sourceInput.value.trim() === ""
+    ) {
+      this.clearAll(sourceInput);
+      return;
     }
 
-    /**
-     * 格式化汇率显示
-     */
-    formatRate(rate) {
-        if (rate >= 1) {
-            return rate.toFixed(4);
-        } else if (rate >= 0.0001) {
-            return rate.toFixed(6);
-        } else {
-            return rate.toExponential(4);
-        }
-    }
+    const sourceRate = this.rates[sourceCode];
 
-    /**
-     * 搜索过滤货币
-     */
-    filterCurrencies(keyword) {
-        const cards = document.querySelectorAll('.currency-card');
-        const lowerKeyword = keyword.toLowerCase().trim();
-
-        cards.forEach(card => {
-            const code = card.dataset.code.toLowerCase();
-            const currency = this.currencies.find(c => c.code === card.dataset.code);
-            const name = currency ? currency.name.toLowerCase() : '';
-            const nameCn = currency ? currency.name_cn : '';
-
-            // 匹配代码、英文名或中文名
-            const matchesSearch = !lowerKeyword || 
-                code.includes(lowerKeyword) || 
-                name.includes(lowerKeyword) || 
-                nameCn.includes(keyword);
-            
-            // 同时考虑当前筛选状态
-            const matchesFilter = this.currentFilter === 'all' || 
-                (this.currentFilter === 'priority' && card.dataset.priority === 'true');
-
-            card.classList.toggle('hidden', !(matchesSearch && matchesFilter));
-        });
+    if (!sourceRate) {
+      console.warn(`Rate not found for ${sourceCode}`);
+      return;
     }
 
-    /**
-     * 应用筛选（常用/全部）
-     */
-    applyFilter() {
-        const searchInput = document.getElementById('searchInput');
-        const keyword = searchInput ? searchInput.value : '';
-        this.filterCurrencies(keyword);
+    // 计算并更新所有其他货币
+    this.currencies.forEach((currency) => {
+      if (currency.code === sourceCode) return;
+
+      const targetRate = this.rates[currency.code];
+
+      if (!targetRate) return;
+
+      // 交叉汇率计算
+      // sourceRate = 1 CNY = X source_currency
+      // targetRate = 1 CNY = Y target_currency
+      // 所以 1 source_currency = (targetRate / sourceRate) target_currency
+      const crossRate = targetRate / sourceRate;
+      const result = sourceValue * crossRate;
+
+      const input = document.getElementById(`input-${currency.code}`);
+
+      if (input) {
+        input.value = this.formatNumber(result);
+      }
+    });
+  }
+
+  /**
+   * 清空所有输入（除了指定的输入框）
+   */
+  clearAll(exceptInput = null) {
+    this.currencies.forEach((currency) => {
+      const input = document.getElementById(`input-${currency.code}`);
+
+      if (input && input !== exceptInput) {
+        input.value = "";
+      }
+    });
+  }
+
+  /**
+   * 格式化数字显示
+   */
+  formatNumber(num) {
+    if (num === 0) return "";
+
+    // 根据数值大小选择精度
+    if (Math.abs(num) >= 1000) {
+      return num.toFixed(2);
+    } else if (Math.abs(num) >= 1) {
+      return num.toFixed(4);
+    } else if (Math.abs(num) >= 0.0001) {
+      return num.toFixed(6);
+    } else {
+      return num.toExponential(4);
     }
-
-    /**
-     * 更新状态信息
-     */
-    async updateStatusInfo() {
-        try {
-            const response = await fetch('/api/status');
-            const data = await response.json();
-            
-            // 更新时间
-            const lastUpdateEl = document.getElementById('lastUpdate');
-            if (lastUpdateEl && data.last_update) {
-                const date = new Date(data.last_update);
-                lastUpdateEl.textContent = date.toLocaleString('zh-CN');
-            }
-            
-            // 货币数量
-            const countEl = document.getElementById('currencyCount');
-            if (countEl) {
-                countEl.textContent = data.currencies_count || this.currencies.length;
-            }
-            
-            // 基准货币
-            const baseEl = document.getElementById('baseCurrency');
-            if (baseEl) {
-                baseEl.textContent = this.baseCurrency;
-            }
-            
-        } catch (error) {
-            console.error('Failed to update status:', error);
-        }
+  }
+
+  /**
+   * 格式化汇率显示
+   */
+  formatRate(rate) {
+    if (rate >= 1) {
+      return rate.toFixed(4);
+    } else if (rate >= 0.0001) {
+      return rate.toFixed(6);
+    } else {
+      return rate.toExponential(4);
     }
-
-    /**
-     * 显示加载状态
-     */
-    showLoading() {
-        const loading = document.getElementById('loading');
-        const grid = document.getElementById('currencyGrid');
-        const tips = document.getElementById('tips');
-        
-        if (loading) loading.classList.remove('hidden');
-        if (loading) loading.style.display = 'flex';
-        if (grid) grid.style.display = 'none';
-        if (tips) tips.style.display = 'none';
+  }
+
+  /**
+   * 搜索过滤货币
+   */
+  filterCurrencies(keyword) {
+    const cards = document.querySelectorAll(".currency-card");
+    const lowerKeyword = keyword.toLowerCase().trim();
+
+    cards.forEach((card) => {
+      const code = card.dataset.code.toLowerCase();
+      const currency = this.currencies.find(
+        (c) => c.code === card.dataset.code
+      );
+      const name = currency ? currency.name.toLowerCase() : "";
+      const nameCn = currency ? currency.name_cn : "";
+
+      // 匹配代码、英文名或中文名
+      const matchesSearch =
+        !lowerKeyword ||
+        code.includes(lowerKeyword) ||
+        name.includes(lowerKeyword) ||
+        nameCn.includes(keyword);
+
+      // 同时考虑当前筛选状态
+      const matchesFilter =
+        this.currentFilter === "all" ||
+        (this.currentFilter === "priority" && card.dataset.priority === "true");
+
+      card.classList.toggle("hidden", !(matchesSearch && matchesFilter));
+    });
+  }
+
+  /**
+   * 应用筛选（常用/全部）
+   */
+  applyFilter() {
+    const searchInput = document.getElementById("searchInput");
+    const keyword = searchInput ? searchInput.value : "";
+    this.filterCurrencies(keyword);
+  }
+
+  /**
+   * 更新状态信息
+   */
+  async updateStatusInfo() {
+    try {
+      const response = await fetch("/api/status");
+      const data = await response.json();
+
+      // 更新时间
+      const lastUpdateEl = document.getElementById("lastUpdate");
+      if (lastUpdateEl && data.last_update) {
+        const date = new Date(data.last_update);
+        lastUpdateEl.textContent = date.toLocaleString("zh-CN");
+      }
+
+      // 货币数量
+      const countEl = document.getElementById("currencyCount");
+      if (countEl) {
+        countEl.textContent = data.currencies_count || this.currencies.length;
+      }
+
+      // 基准货币
+      const baseEl = document.getElementById("baseCurrency");
+      if (baseEl) {
+        baseEl.textContent = this.baseCurrency;
+      }
+    } catch (error) {
+      console.error("Failed to update status:", error);
     }
-
-    /**
-     * 隐藏加载状态
-     */
-    hideLoading() {
-        const loading = document.getElementById('loading');
-        const grid = document.getElementById('currencyGrid');
-        const tips = document.getElementById('tips');
-        
-        if (loading) loading.classList.add('hidden');
-        if (loading) loading.style.display = 'none';
-        if (grid) grid.style.display = 'grid';
-        if (tips) tips.style.display = 'flex';
+  }
+
+  /**
+   * 显示加载状态
+   */
+  showLoading() {
+    const loading = document.getElementById("loading");
+    const grid = document.getElementById("currencyGrid");
+    const tips = document.getElementById("tips");
+
+    if (loading) loading.classList.remove("hidden");
+    if (loading) loading.style.display = "flex";
+    if (grid) grid.style.display = "none";
+    if (tips) tips.style.display = "none";
+  }
+
+  /**
+   * 隐藏加载状态
+   */
+  hideLoading() {
+    const loading = document.getElementById("loading");
+    const grid = document.getElementById("currencyGrid");
+    const tips = document.getElementById("tips");
+
+    if (loading) loading.classList.add("hidden");
+    if (loading) loading.style.display = "none";
+    if (grid) grid.style.display = "grid";
+    if (tips) tips.style.display = "flex";
+  }
+
+  /**
+   * 显示错误信息
+   */
+  showError(message) {
+    const errorDiv = document.getElementById("errorMessage");
+    const errorText = document.getElementById("errorText");
+    const loading = document.getElementById("loading");
+    const grid = document.getElementById("currencyGrid");
+
+    if (loading) loading.style.display = "none";
+    if (grid) grid.style.display = "none";
+
+    if (errorDiv) {
+      errorDiv.style.display = "flex";
     }
 
-    /**
-     * 显示错误信息
-     */
-    showError(message) {
-        const errorDiv = document.getElementById('errorMessage');
-        const errorText = document.getElementById('errorText');
-        const loading = document.getElementById('loading');
-        const grid = document.getElementById('currencyGrid');
-        
-        if (loading) loading.style.display = 'none';
-        if (grid) grid.style.display = 'none';
-        
-        if (errorDiv) {
-            errorDiv.style.display = 'flex';
-        }
-        
-        if (errorText) {
-            errorText.textContent = message;
-        }
+    if (errorText) {
+      errorText.textContent = message;
     }
-
-    /**
-     * 隐藏错误信息
-     */
-    hideError() {
-        const errorDiv = document.getElementById('errorMessage');
-        if (errorDiv) {
-            errorDiv.style.display = 'none';
-        }
+  }
+
+  /**
+   * 隐藏错误信息
+   */
+  hideError() {
+    const errorDiv = document.getElementById("errorMessage");
+    if (errorDiv) {
+      errorDiv.style.display = "none";
     }
+  }
 }
 
-
 // ==================== 初始化应用 ====================
-document.addEventListener('DOMContentLoaded', () => {
-    // 创建全局实例
-    window.currencyConverter = new CurrencyConverter();
+document.addEventListener("DOMContentLoaded", () => {
+  // 创建全局实例
+  window.currencyConverter = new CurrencyConverter();
 });

templates/index.html

@@ -1,84 +1,156 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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>
-<body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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>
+  <body>
     <div class="container">
-        <!-- 头部 -->
-        <header>
-            <h1>💱 Currency Converter</h1>
-            <div class="header-info">
-                <p class="update-time">
-                    <span class="label">Last Update</span>
-                    <span id="lastUpdate">Loading...</span>
-                </p>
-                <p class="currency-count">
-                    <span class="label">Currencies</span>
-                    <span id="currencyCount">-</span>
-                </p>
-            </div>
-        </header>
+      <!-- Header -->
+      <header>
+        <div class="header-content">
+          <h1>Currency Converter</h1>
+          <p class="header-subtitle">
+            Real-time exchange rates for 161 currencies
+          </p>
+        </div>
+        <div class="header-info">
+          <div class="info-item">
+            <span class="info-label">Last Update</span>
+            <span class="info-value" id="lastUpdate">Loading...</span>
+          </div>
+          <div class="info-divider"></div>
+          <div class="info-item">
+            <span class="info-label">Base Currency</span>
+            <span class="info-value" id="baseCurrency">CNY</span>
+          </div>
+          <div class="info-divider"></div>
+          <div class="info-item">
+            <span class="info-label">Supported</span>
+            <span class="info-value"
+              ><span id="currencyCount">-</span> currencies</span
+            >
+          </div>
+        </div>
+      </header>
 
-        <!-- 主体内容 -->
-        <main>
-            <!-- 搜索和筛选 -->
-            <div class="toolbar">
-                <div class="search-box">
-                    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                        <circle cx="11" cy="11" r="8"/>
-                        <path d="M21 21l-4.35-4.35"/>
-                    </svg>
-                    <input type="text" id="searchInput" placeholder="Search currency code or name...">
-                </div>
-                <div class="filter-buttons">
-                    <button class="filter-btn active" data-filter="all">All</button>
-                    <button class="filter-btn" data-filter="priority">Popular</button>
-                </div>
-            </div>
+      <!-- Main Content -->
+      <main>
+        <!-- Toolbar -->
+        <div class="toolbar">
+          <div class="search-box">
+            <svg
+              class="search-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2.5"
+              stroke-linecap="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <path d="M21 21l-4.35-4.35" />
+            </svg>
+            <input
+              type="text"
+              id="searchInput"
+              placeholder="Search currencies..."
+              autocomplete="off"
+            />
+          </div>
+          <div class="filter-buttons">
+            <button class="filter-btn active" data-filter="all">
+              <span>All</span>
+            </button>
+            <button class="filter-btn" data-filter="priority">
+              <span>Popular</span>
+            </button>
+          </div>
+        </div>
 
-            <!-- 提示信息 -->
-            <div class="tips" id="tips">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"/>
-                    <path d="M12 16v-4M12 8h.01"/>
-                </svg>
-                <span>Enter amount in any currency field to convert automatically</span>
-            </div>
+        <!-- Info Banner -->
+        <div class="info-banner" id="tips">
+          <svg
+            class="info-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4M12 8h.01" />
+          </svg>
+          <span
+            >Enter an amount in any currency to see instant conversions</span
+          >
+        </div>
 
-            <!-- 加载状态 -->
-            <div class="loading" id="loading">
-                <div class="spinner"></div>
-                <p>Loading exchange rates...</p>
-            </div>
+        <!-- Loading State -->
+        <div class="loading-state" id="loading">
+          <div class="loading-spinner"></div>
+          <p class="loading-text">Loading exchange rates</p>
+        </div>
 
-            <!-- 错误提示 -->
-            <div class="error-message" id="errorMessage" style="display: none;">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <circle cx="12" cy="12" r="10"/>
-                    <path d="M15 9l-6 6M9 9l6 6"/>
-                </svg>
-                <span id="errorText">Failed to load</span>
-                <button id="retryBtn" class="retry-btn">Retry</button>
-            </div>
+        <!-- Error State -->
+        <div class="error-state" id="errorMessage" style="display: none">
+          <div class="error-icon">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            >
+              <circle cx="12" cy="12" r="10" />
+              <path d="M15 9l-6 6M9 9l6 6" />
+            </svg>
+          </div>
+          <p class="error-text" id="errorText">Failed to load exchange rates</p>
+          <button id="retryBtn" class="retry-button">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+            >
+              <path
+                d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
+              />
+            </svg>
+            <span>Try Again</span>
+          </button>
+        </div>
 
-            <!-- 货币列表 -->
-            <div class="currency-grid" id="currencyGrid">
-                <!-- 动态生成货币卡片 -->
-            </div>
-        </main>
+        <!-- Currency Grid -->
+        <div class="currency-grid" id="currencyGrid">
+          <!-- Dynamically generated currency cards -->
+        </div>
+      </main>
 
-        <!-- 底部 -->
-        <footer>
-            <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>
+      <!-- Footer -->
+      <footer>
+        <div class="footer-content">
+          <p class="footer-text">
+            Powered by
+            <a
+              href="https://www.exchangerate-api.com/"
+              target="_blank"
+              rel="noopener"
+              >ExchangeRate-API</a
+            >
+          </p>
+          <p class="footer-note">Updates daily at midnight UTC</p>
+        </div>
+      </footer>
     </div>
 
     <script src="/static/js/app.js"></script>
-</body>
+  </body>
 </html>