Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>汇率换算器</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 --> | |
| <header> | |
| <div class="header-content"> | |
| <h1>汇率换算器</h1> | |
| <p class="header-subtitle">161种货币实时汇率换算</p> | |
| </div> | |
| <div class="header-info"> | |
| <div class="info-item"> | |
| <span class="info-label">最后更新</span> | |
| <span class="info-value" id="lastUpdate">加载中...</span> | |
| </div> | |
| <div class="info-divider"></div> | |
| <div class="info-item"> | |
| <span class="info-label">基准货币</span> | |
| <span class="info-value" id="baseCurrency">CNY</span> | |
| </div> | |
| <div class="info-divider"></div> | |
| <div class="info-item"> | |
| <span class="info-label">支持货币</span> | |
| <span class="info-value" | |
| ><span id="currencyCount">-</span> 种货币</span | |
| > | |
| </div> | |
| </div> | |
| </header> | |
| <!-- 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="搜索货币..." | |
| autocomplete="off" | |
| /> | |
| </div> | |
| <div class="filter-buttons"> | |
| <button class="filter-btn active" data-filter="all"> | |
| <span>全部</span> | |
| </button> | |
| <button class="filter-btn" data-filter="priority"> | |
| <span>常用</span> | |
| </button> | |
| </div> | |
| </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>输入任意货币金额即可查看实时换算结果</span> | |
| </div> | |
| <!-- Loading State --> | |
| <div class="loading-state" id="loading"> | |
| <div class="loading-spinner"></div> | |
| <p class="loading-text">正在加载汇率数据</p> | |
| </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">加载汇率数据失败</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>重试</span> | |
| </button> | |
| </div> | |
| <!-- Currency Grid --> | |
| <div class="currency-grid" id="currencyGrid"> | |
| <!-- Dynamically generated currency cards --> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <p class="footer-text"> | |
| 数据提供 | |
| <a | |
| href="https://www.exchangerate-api.com/" | |
| target="_blank" | |
| rel="noopener" | |
| >ExchangeRate-API</a | |
| > | |
| </p> | |
| <p class="footer-note" id="updateInterval">数据更新中...</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> | |