├── .gitignore
├── usage_example.png
├── exchange_rate.json
├── LLM_API_Price_Comparator.png
├── update_exchange_rate.py
├── .github
    └── workflows
    │   └── update_exchange_rate.yml
├── custom-alert.css
├── README.md
├── index.html
├── form-modal.css
├── form-modal.js
├── styles.css
├── script.js
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | # 本地测试用汇率文件
2 | mock_exchange_rate.json


--------------------------------------------------------------------------------
/usage_example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CookSleep/LLM_API_Price_Comparator_Web/HEAD/usage_example.png


--------------------------------------------------------------------------------
/exchange_rate.json:
--------------------------------------------------------------------------------
1 | {
2 |     "exchangeRate": "7.04190000",
3 |     "lastRefreshed": "2025-12-16 02:11:59"
4 | }


--------------------------------------------------------------------------------
/LLM_API_Price_Comparator.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CookSleep/LLM_API_Price_Comparator_Web/HEAD/LLM_API_Price_Comparator.png


--------------------------------------------------------------------------------
/update_exchange_rate.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | import requests
 3 | import json
 4 | 
 5 | def fetch_exchange_rate(api_key):
 6 |     url = f'https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency=USD&to_currency=CNY&apikey={api_key}'
 7 |     response = requests.get(url)
 8 |     data = response.json()
 9 |     if 'Realtime Currency Exchange Rate' in data:
10 |         return {
11 |             "exchangeRate": data['Realtime Currency Exchange Rate']['5. Exchange Rate'],
12 |             "lastRefreshed": data['Realtime Currency Exchange Rate']['6. Last Refreshed']
13 |         }
14 |     else:
15 |         raise Exception("Error fetching exchange rate")
16 | 
17 | def main():
18 |     api_key = os.getenv('ALPHA_VANTAGE_API_KEY')
19 |     if not api_key:
20 |         raise Exception("No API key found in environment variables")
21 |     
22 |     exchange_rate = fetch_exchange_rate(api_key)
23 |     with open('exchange_rate.json', 'w') as f:
24 |         json.dump(exchange_rate, f, indent=4)
25 | 
26 | if __name__ == '__main__':
27 |     main()
28 | 


--------------------------------------------------------------------------------
/.github/workflows/update_exchange_rate.yml:
--------------------------------------------------------------------------------
 1 | name: Update Exchange Rate
 2 | 
 3 | on:
 4 |   schedule:
 5 |     - cron: '30 1 * * *' # 每天UTC时间01:30，相当于北京时间09:30
 6 |   workflow_dispatch: # 手动触发
 7 | 
 8 | permissions:
 9 |   contents: write
10 | 
11 | env:
12 |   FORCE_JAVASCRIPT_ACTIONS_TO_NODE20: true # 强制使用 Node20
13 | 
14 | jobs:
15 |   update-exchange-rate:
16 |     runs-on: ubuntu-latest
17 | 
18 |     steps:
19 |       - name: Checkout repository
20 |         uses: actions/checkout@v3 # 使用 v3
21 | 
22 |       - name: Install dependencies
23 |         run: |
24 |           python -m pip install requests
25 | 
26 |       - name: Fetch exchange rate from Alpha Vantage
27 |         env:
28 |           ALPHA_VANTAGE_API_KEY: ${{ secrets.ALPHA_VANTAGE_API_KEY }}
29 |         run: |
30 |           python update_exchange_rate.py
31 | 
32 |       - name: Commit and push changes
33 |         env:
34 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
35 |         run: |
36 |           git config --local user.email "action@github.com"
37 |           git config --local user.name "GitHub Action"
38 |           git add exchange_rate.json
39 |           git diff-index --quiet HEAD || git commit -m "Update exchange rate"
40 |           git push origin HEAD:main
41 | 


--------------------------------------------------------------------------------
/custom-alert.css:
--------------------------------------------------------------------------------
 1 | /* 自定义弹窗样式 */
 2 | #customAlert {
 3 |     display: none;
 4 |     position: fixed;
 5 |     top: 0;
 6 |     left: 0;
 7 |     width: 100%;
 8 |     height: 100%;
 9 |     background-color: rgba(0, 0, 0, 0.5);
10 |     z-index: 10000; /* 确保显示在最前面 */
11 |     justify-content: center;
12 |     align-items: center;
13 | }
14 | 
15 | #customAlert.show {
16 |     display: flex;
17 | }
18 | 
19 | #customAlert .modal-content {
20 |     background-color: #fff;
21 |     padding: 20px;
22 |     border-radius: 8px;
23 |     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
24 |     width: 90%;
25 |     max-width: 400px;
26 |     text-align: center;
27 | }
28 | 
29 | #customAlert p {
30 |     margin-bottom: 20px;
31 |     font-size: 16px;
32 |     color: #333;
33 | }
34 | 
35 | #customAlert .alert-buttons {
36 |     display: flex;
37 |     justify-content: center;
38 |     gap: 15px;
39 | }
40 | 
41 | #customAlert button {
42 |     padding: 8px 20px;
43 |     border: none;
44 |     border-radius: 4px;
45 |     cursor: pointer;
46 |     font-size: 14px;
47 |     transition: all 0.3s ease;
48 | }
49 | 
50 | #alertConfirm {
51 |     background-color: var(--primary-color);
52 |     color: white;
53 | }
54 | 
55 | #alertConfirm:hover {
56 |     background-color: #2980b9;
57 | }
58 | 
59 | #alertCancel {
60 |     background-color: #e0e0e0;
61 |     color: #333;
62 | }
63 | 
64 | #alertCancel:hover {
65 |     background-color: #ccc;
66 | }
67 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">LLM API Price Comparator Web</h1>
  2 | 
  3 | <p align="center">
  4 |   <img src="LLM_API_Price_Comparator.png" alt="LLM API Price Comparator Logo" width="200"/>
  5 | </p>
  6 | 
  7 | LLM API Price Comparator Web 是一个在线工具，帮助用户便捷地比较不同LLM API服务商在指定输入输出下调用同一种模型的价格。
  8 | 
  9 | 它会自动获取美元/人民币汇率，允许用户输入服务商的余额、调用定价信息，并计算、比较相对于输入输出Token的成本。
 10 | 
 11 | 该项目是原Windows桌面应用的网页版本，代码主要由Claude 3.5 Sonnet和GPT-4o编写，我提供了非常多的样式、功能设计提议和反馈。
 12 | 
 13 | ![使用示例](usage_example.png)
 14 | 
 15 | ## 功能特性
 16 | 
 17 | - 自动获取美元/人民币汇率，方便比较国内外服务商。
 18 | - 用户可输入服务商名称、充值金额、充值货币、到账余额、调用价格等详细信息。
 19 | - 支持不同服务商的费用排名显示，按成本从低到高排序。
 20 | - 提供直观的Web界面，方便添加、删除服务商信息。
 21 | - 生成人民币、美元费用比较结果。
 22 | - 响应式设计，支持桌面和移动设备。
 23 | - 按住 Ctrl 或 ⌘ 键并使用方向键快速在表单间移动。
 24 | - 支持保存当前表单并在浏览器中查看和填充历史记录。
 25 | 
 26 | ## 如何使用
 27 | 
 28 | 1. 访问 [LLM API Price Comparator Web](https://cooksleep.github.io/LLM_API_Price_Comparator_Web/)。
 29 | 2. 在页面上输入Token数(输入和输出)。
 30 | 3. 填写每个服务商的相关信息。
 31 | 4. 点击"计算成本"按钮以获取不同服务商的成本比较。
 32 | 5. 查看费用排名，选择合适的服务商。
 33 | 6. 如有需要，点击"保存表单"为当前填写的数据命名并存储。
 34 | 7. 点击"历史记录"可选择过往表单并快速填充。
 35 | 
 36 | 
 37 | ## 自行部署指南（如果你想自己再部署一个，而不是用我部署好的）
 38 | 
 39 | 本项目使用 GitHub Actions 自动更新汇率数据，并通过 GitHub Pages 部署静态网站。以下是如何 Fork 本仓库并配置 GitHub Actions 和 GitHub Pages 的步骤。
 40 | 
 41 | ### 1. Fork 仓库
 42 | 
 43 | 1. 访问 [LLM API Price Comparator Web](https://github.com/CookSleep/LLM_API_Price_Comparator_Web) 仓库页面。
 44 | 2. 点击页面右上角的 "Fork" 按钮，将该仓库 Fork 到你的 GitHub 账户中。
 45 | 
 46 | ### 2. 配置 GitHub Actions
 47 | 
 48 | 1. 在你的 GitHub 仓库中创建 `.github/workflows` 目录
 49 | 2. 在该目录中创建 `update_exchange_rate.yml` 文件，内容如下：
 50 | 
 51 | ```yaml
 52 | name: Update Exchange Rate
 53 | 
 54 | on:
 55 |   schedule:
 56 |     - cron: '30 1 * * *' # 每天UTC时间01:30，相当于北京时间09:30
 57 |   workflow_dispatch: # 手动触发
 58 | 
 59 | permissions:
 60 |   contents: write
 61 | 
 62 | env:
 63 |   FORCE_JAVASCRIPT_ACTIONS_TO_NODE20: true # 强制使用 Node20
 64 | 
 65 | jobs:
 66 |   update-exchange-rate:
 67 |     runs-on: ubuntu-latest
 68 | 
 69 |     steps:
 70 |       - name: Checkout repository
 71 |         uses: actions/checkout@v3 # 使用 v3
 72 | 
 73 |       - name: Install dependencies
 74 |         run: |
 75 |           python -m pip install requests
 76 | 
 77 |       - name: Fetch exchange rate from Alpha Vantage
 78 |         env:
 79 |           ALPHA_VANTAGE_API_KEY: ${{ secrets.ALPHA_VANTAGE_API_KEY }}
 80 |         run: |
 81 |           python update_exchange_rate.py
 82 | 
 83 |       - name: Commit and push changes
 84 |         env:
 85 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 86 |         run: |
 87 |           git config --local user.email "action@github.com"
 88 |           git config --local user.name "GitHub Action"
 89 |           git add exchange_rate.json
 90 |           git diff-index --quiet HEAD || git commit -m "Update exchange rate"
 91 |           git push origin HEAD:main
 92 | ```
 93 | 
 94 | ### 3. 创建 Python 脚本
 95 | 
 96 | 在仓库根目录创建 `update_exchange_rate.py` 文件，内容如下：
 97 | 
 98 | ```python
 99 | import os
100 | import requests
101 | import json
102 | 
103 | def fetch_exchange_rate(api_key):
104 |     url = f'https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency=USD&to_currency=CNY&apikey={api_key}'
105 |     response = requests.get(url)
106 |     data = response.json()
107 |     if 'Realtime Currency Exchange Rate' in data:
108 |         return {
109 |             "exchangeRate": data['Realtime Currency Exchange Rate']['5. Exchange Rate'],
110 |             "lastRefreshed": data['Realtime Currency Exchange Rate']['6. Last Refreshed']
111 |         }
112 |     else:
113 |         raise Exception("Error fetching exchange rate")
114 | 
115 | def main():
116 |     api_key = os.getenv('ALPHA_VANTAGE_API_KEY')
117 |     if not api_key:
118 |         raise Exception("No API key found in environment variables")
119 |     
120 |     exchange_rate = fetch_exchange_rate(api_key)
121 |     with open('exchange_rate.json', 'w') as f:
122 |         json.dump(exchange_rate, f, indent=4)
123 | 
124 | if __name__ == '__main__':
125 |     main()
126 | ```
127 | 
128 | ### 4. 配置 Secrets
129 | 
130 | 为了确保你的 API 密钥和 GitHub Token 安全地存储和使用，你需要在 GitHub 仓库设置中配置 Secrets。
131 | 
132 | 1. 在 [Alpha Vantage](https://www.alphavantage.co/) 获取 Alpha Vantage API 密钥。
133 | 2. 导航到你的 GitHub 仓库。
134 | 3. 点击 "Settings"。
135 | 4. 在左侧菜单中选择 "Secrets and variables" > "Actions"。
136 | 5. 点击 "New repository secret"。
137 | 6. **Name**: `ALPHA_VANTAGE_API_KEY`
138 | 7. **Value**: 你的 Alpha Vantage API 密钥。
139 | 8. 点击 "Add secret" 保存。
140 | 
141 | ### 5. 配置仓库设置
142 | 
143 | 确保配置仓库的 GitHub Actions 设置，以允许使用外部 Actions 并设置适当的权限：
144 | 
145 | 1. 在仓库的 "Settings" 页面，选择 "Actions" > "General"。
146 | 2. 在 "Actions permissions" 部分：
147 |    - 选择 "Allow all actions and reusable workflows"。
148 |    - 勾选 "Allow actions created by GitHub"。
149 | 3. 在 "Workflow permissions" 部分：
150 |    - 选择 "Read and write permissions"。
151 |    - 勾选 "Allow GitHub Actions to create and approve pull requests"。
152 | 4. 点击 "Save" 保存更改。
153 | 
154 | ### 6. 创建 GitHub Pages
155 | 
156 | 1. 导航到你的 GitHub 仓库。
157 | 2. 点击 "Settings"。
158 | 3. 在左侧菜单中选择 "Pages"。
159 | 4. 在 "Build and deployment" 部分：
160 |    - **Source**: 选择 `Deploy from a branch`。
161 |    - **Branch**: 选择 `main` 分支，并确保目录是 `/root`。
162 | 5. 点击 "Save"。
163 | 
164 | 完成这些步骤后，GitHub Pages 将从你的 `main` 分支部署，你可以通过 `https://<your-username>.github.io/LLM_API_Price_Comparator_Web` 访问你的静态网站。
165 | 
166 | ### 手动触发汇率更新（初次部署后如果没到汇率更新时间时可能需要）
167 | 
168 | 1. 导航到你的 GitHub 仓库页面。
169 | 2. 点击 "Actions" 选项卡。
170 | 3. 在左侧找到 "Update Exchange Rate" 工作流。
171 | 4. 点击 "Run workflow" 按钮，然后点击 "Run workflow" 确认。
172 | 
173 | 完成以上步骤后，GitHub Actions 将自动或根据需要手动更新汇率数据，并将更新后的数据提交到你的仓库中，同时通过 GitHub Pages 部署静态网站。
174 | 
175 | ## 贡献
176 | 
177 | 欢迎对项目进行贡献！如果您有任何建议或想要添加新功能，请随时创建一个Issue或Pull Request。
178 | 
179 | ## 许可证
180 | 
181 | 本项目采用 [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0.html) 许可证，详情请见 [LICENSE](LICENSE) 文件。
182 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | 
  4 | <head>
  5 | 
  6 |     <meta charset="UTF-8">
  7 | 
  8 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 | 
 10 |     <title>LLM API 价格比较器</title>
 11 | 
 12 |     <link rel="stylesheet" href="styles.css">
 13 |     <link rel="stylesheet" href="form-modal.css">
 14 |     <link rel="stylesheet" href="custom-alert.css">
 15 | 
 16 |     <link rel="icon" href="LLM_API_Price_Comparator.png" type="image/png">
 17 | 
 18 |     <meta name="description" content="LLM API 价格比较器 - 比较不同LLM API服务商的价格，自动获取美元/人民币汇率，帮助用户选择最合适的服务。">
 19 | 
 20 |     <meta name="keywords" content="LLM, API, 价格比较, 汇率, AI, 机器学习, 成本计算">
 21 | 
 22 |     <meta name="author" content="CookSleep">
 23 | 
 24 | </head>
 25 | 
 26 | <body>
 27 | 
 28 |     <div id="main-content">
 29 | 
 30 |         <div class="container">
 31 | 
 32 |             <header>
 33 | 
 34 |                 <div class="logo-container">
 35 | 
 36 |                     <img src="LLM_API_Price_Comparator.png" alt="LLM API 价格比较器 Logo" class="logo">
 37 | 
 38 |                 </div>
 39 | 
 40 |                 <div class="header-right">
 41 | 
 42 |                     <h1>LLM API 价格比较器</h1>
 43 | 
 44 |                     <div class="exchange-rate-container">
 45 | 
 46 |                         <span id="exchangeRateLabel">今日汇率 (USD/CNY): </span>
 47 | 
 48 |                         <span id="exchangeRateValue">获取中...</span>
 49 | 
 50 |                         <svg class="info-icon" viewBox="0 0 24 24" width="16" height="16">
 51 | 
 52 |                             <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
 53 | 
 54 |                         </svg>
 55 | 
 56 |                         <div class="tooltip">汇率数据来源：Alpha Vantage API<br>每日更新时间：北京时间 09:30</div>
 57 | 
 58 |                     </div>
 59 | 
 60 |                     <a href="https://github.com/CookSleep/LLM_API_Price_Comparator_Web" target="_blank" class="github-link">GitHub @CookSleep</a>
 61 | 
 62 |                 </div>
 63 | 
 64 |             </header>
 65 | 
 66 |             
 67 | 
 68 |             <div class="input-section">
 69 | 
 70 |                 <div class="token-input">
 71 | 
 72 |                     <div>
 73 | 
 74 |                         <label for="inputtokens">输入token数:</label>
 75 | 
 76 |                         <input type="number" id="inputtokens" placeholder="仅数字" step="any">
 77 | 
 78 |                     </div>
 79 | 
 80 |                     <div>
 81 | 
 82 |                         <label for="outputtokens">输出token数:</label>
 83 | 
 84 |                         <input type="number" id="outputtokens" placeholder="仅数字" step="any">
 85 | 
 86 |                     </div>
 87 | 
 88 |                 </div>
 89 | 
 90 |                 <div class="usage-tips">
 91 | 
 92 |                     <ul>
 93 | 
 94 |                         <li>按住 Ctrl 或 ⌘ 键并使用方向键快速在输入、选择框间移动</li>
 95 | 
 96 |                         <li>使用鼠标滚轮可以快速切换下拉选项</li>
 97 |                     
 98 |                     </ul>
 99 | 
100 |                 </div>
101 | 
102 |             </div>  
103 | 
104 |             
105 | 
106 |             <div class="table-container">
107 | 
108 |                 <table id="providersTable">
109 | 
110 |                     <thead>
111 | 
112 |                         <tr>
113 | 
114 |                             <th>服务商名称</th>
115 | 
116 |                             <th>充值金额</th>
117 | 
118 |                             <th>充值货币</th>
119 | 
120 |                             <th>到账余额</th>
121 | 
122 |                             <th>输入价格</th>
123 | 
124 |                             <th>输出价格</th>
125 | 
126 |                             <th>不区分输入输出</th>
127 | 
128 |                             <th>token单位</th>
129 | 
130 |                             <th>操作</th>
131 | 
132 |                         </tr>
133 | 
134 |                     </thead>
135 | 
136 |                     <tbody>
137 | 
138 |                         <!-- 表格 -->
139 | 
140 |                     </tbody>
141 | 
142 |                 </table>
143 | 
144 |             </div>
145 | 
146 | 
147 | 
148 |             <button id="addProviderBtn" class="add-btn">
149 | 
150 |                 <svg class="icon" viewBox="0 0 24 24">
151 | 
152 |                     <circle cx="12" cy="12" r="10"/>
153 | 
154 |                     <line x1="12" y1="8" x2="12" y2="16"/>
155 | 
156 |                     <line x1="8" y1="12" x2="16" y2="12"/>
157 | 
158 |                 </svg>
159 | 
160 |             </button>
161 | 
162 | 
163 | 
164 |             <div class="results">
165 | 
166 |                 <h3>费用排名（由低至高）:</h3>
167 | 
168 |                 <p class="results-disclaimer">结果仅供比价参考，贵的可能有贵的道理，便宜也不一定没好货，选择需结合实际体验。</p>
169 | 
170 |                 <div id="results-list"></div>
171 | 
172 |             </div>                                 
173 | 
174 | 
175 | 
176 |             <div class="actions">
177 | 
178 |                 <button id="calculateBtn">计算成本</button>
179 | 
180 |                 <button id="clearAllBtn">清除所有数据</button>
181 | 
182 |                 <button id="saveFormBtn">保存表单</button>
183 | 
184 |                 <button id="historyFormBtn">历史记录</button>
185 | 
186 |             </div>
187 | 
188 |         </div>
189 | 
190 |     </div>
191 | 
192 | 
193 | 
194 |     <div id="customAlert" class="modal">
195 | 
196 |         <div class="modal-content">
197 | 
198 |             <p id="alertMessage"></p>
199 | 
200 |             <div class="alert-buttons">
201 | 
202 |                 <button id="alertConfirm">确定</button>
203 | 
204 |                 <button id="alertCancel">取消</button>
205 | 
206 |             </div>
207 | 
208 |         </div>
209 | 
210 |     </div>   
211 | 
212 | 
213 | 
214 |     <!-- 保存表单模态框 -->
215 |     <div id="saveFormModal" class="modal">
216 |         <div class="modal-content form-modal-content">
217 |             <div class="modal-header">
218 |                 <h3>保存表单</h3>
219 |                 <span class="close-btn">&times;</span>
220 |             </div>
221 |             <div class="modal-body">
222 |                 <div class="form-group">
223 |                     <label for="formName">表单名称：</label>
224 |                     <input type="text" id="formName" placeholder="请输入表单名称">
225 |                 </div>
226 |                 <button id="saveFormConfirm" class="modal-btn primary-btn">保存</button>
227 |             </div>
228 |         </div>
229 |     </div>
230 |     <!-- 历史记录模态框 -->
231 |     <div id="historyFormModal" class="modal">
232 |         <div class="modal-content form-modal-content">
233 |             <div class="modal-header">
234 |                 <h3>历史表单</h3>
235 |                 <span class="close-btn">&times;</span>
236 |             </div>
237 |             <div class="modal-body">
238 |                 <div class="form-list-container">
239 |                     <ul id="formList" class="form-list">
240 |                         <!-- 这里将动态填充已保存的表单 -->
241 |                     </ul>
242 |                 </div>
243 |                 <div class="no-forms-message" id="noFormsMessage">暂无保存的表单</div>
244 |             </div>
245 |         </div>
246 |     </div>
247 |     
248 | 
249 |     <footer>
250 | 
251 |         <p>本工具不收集、存储或处理任何个人信息<br>所有计算都在您的浏览器中本地进行</p>
252 | 
253 |     </footer>    
254 | 
255 |     
256 | 
257 |     <script src="script.js"></script>
258 |     <script src="form-modal.js"></script>
259 | 
260 | </body>
261 | 
262 | </html>
263 | 


--------------------------------------------------------------------------------
/form-modal.css:
--------------------------------------------------------------------------------
  1 | /* 表单模态框样式 */
  2 | .form-modal-content {
  3 |     max-width: 600px;
  4 |     width: 90%;
  5 |     padding: 0;
  6 |     border-radius: 15px;
  7 |     overflow: hidden;
  8 |     animation: fadeIn 0.3s ease;
  9 | }
 10 | 
 11 | .modal-header {
 12 |     background-color: var(--primary-color);
 13 |     color: var(--white-color);
 14 |     padding: 15px 20px;
 15 |     display: flex;
 16 |     justify-content: space-between;
 17 |     align-items: center;
 18 |     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 19 | }
 20 | 
 21 | .modal-header h3 {
 22 |     margin: 0;
 23 |     font-size: 1.3em;
 24 | }
 25 | 
 26 | .close-btn {
 27 |     font-size: 1.8em;
 28 |     font-weight: bold;
 29 |     cursor: pointer;
 30 |     line-height: 1;
 31 |     transition: opacity 0.3s ease;
 32 | }
 33 | 
 34 | .close-btn:hover {
 35 |     opacity: 0.7;
 36 | }
 37 | 
 38 | .modal-body {
 39 |     padding: 20px;
 40 |     max-height: 70vh;
 41 |     overflow-y: auto;
 42 | }
 43 | 
 44 | #formSaveSection, #formLoadSection {
 45 |     margin-bottom: 25px;
 46 | }
 47 | 
 48 | .form-group {
 49 |     margin-bottom: 15px;
 50 | }
 51 | 
 52 | .form-group label {
 53 |     display: block;
 54 |     margin-bottom: 8px;
 55 |     font-weight: bold;
 56 |     color: var(--secondary-color);
 57 | }
 58 | 
 59 | .form-group input {
 60 |     width: 100%;
 61 |     padding: 10px;
 62 |     border: 1px solid #bdc3c7;
 63 |     border-radius: 6px;
 64 |     font-size: 1em;
 65 |     transition: all 0.3s ease;
 66 | }
 67 | 
 68 | .form-group input:focus {
 69 |     outline: none;
 70 |     border-color: var(--primary-color);
 71 |     box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
 72 | }
 73 | 
 74 | .modal-btn {
 75 |     padding: 10px 20px;
 76 |     border: none;
 77 |     border-radius: 6px;
 78 |     cursor: pointer;
 79 |     font-size: 1em;
 80 |     transition: all 0.3s ease;
 81 |     margin-top: 10px;
 82 | }
 83 | 
 84 | .primary-btn {
 85 |     background-color: var(--primary-color);
 86 |     color: var(--white-color);
 87 | }
 88 | 
 89 | .primary-btn:hover {
 90 |     background-color: #2980b9;
 91 | }
 92 | 
 93 | .form-list-container {
 94 |     max-height: 300px;
 95 |     overflow-y: auto;
 96 |     border: 1px solid #e0e0e0;
 97 |     border-radius: 6px;
 98 |     margin-bottom: 15px;
 99 | }
100 | 
101 | .form-list {
102 |     list-style: none;
103 |     padding: 0;
104 |     margin: 0;
105 | }
106 | 
107 | .form-list li {
108 |     padding: 15px;
109 |     border-bottom: 1px solid #e0e0e0;
110 |     cursor: pointer;
111 |     transition: all 0.3s ease;
112 |     display: flex;
113 |     justify-content: space-between;
114 |     align-items: center;
115 |     position: relative;
116 | }
117 | 
118 | .form-list .form-name {
119 |     flex: 1 1 auto;
120 |     overflow: hidden;
121 |     white-space: nowrap;
122 |     text-overflow: ellipsis;
123 |     font-size: 16px;
124 |     color: #333;
125 | }
126 | 
127 | .form-list .delete-btn {
128 |     flex: 0 0 auto;
129 |     margin-left: 8px;
130 |     background: none;
131 |     border: none;
132 |     padding: 0;
133 |     cursor: pointer;
134 |     display: flex;
135 |     align-items: center;
136 |     justify-content: center;
137 |     width: 28px;
138 |     height: 28px;
139 |     min-width: 28px;
140 |     min-height: 28px;
141 |     max-width: 28px;
142 |     max-height: 28px;
143 |     border-radius: 8px;
144 |     position: relative;
145 |     overflow: hidden;
146 |     transition: background 0.2s;
147 | }
148 | .form-list .delete-btn svg {
149 |     width: 18px;
150 |     height: 18px;
151 |     display: block;
152 |     margin: auto;
153 |     pointer-events: none;
154 |     position: absolute;
155 |     left: 0;
156 |     right: 0;
157 |     top: 0;
158 |     bottom: 0;
159 | }
160 | .form-list .delete-btn:hover,
161 | .form-list .delete-btn:active,
162 | .form-list .delete-btn:focus {
163 |     background: rgba(231, 76, 60, 0.13);
164 | }
165 | 
166 | .form-list .delete-btn:active,
167 | .form-list .delete-btn:focus {
168 |     background: rgba(231, 76, 60, 0.08);
169 | }
170 | 
171 | @media (max-width: 600px) {
172 |     .form-list li {
173 |         display: flex;
174 |         flex-direction: column;
175 |         align-items: stretch;
176 |         justify-content: flex-start;
177 |         padding: 12px 8px;
178 |     }
179 |     .form-list .form-name {
180 |         font-size: 15px;
181 |         margin-bottom: 8px;
182 |         text-align: left;
183 |     }
184 |     .form-list .delete-btn {
185 |         align-self: flex-end;
186 |         width: 28px;
187 |         height: 28px;
188 |         min-width: 28px;
189 |         min-height: 28px;
190 |         max-width: 28px;
191 |         max-height: 28px;
192 |         margin: 0;
193 |         border-radius: 8px;
194 |         background: none;
195 |         box-shadow: none;
196 |         border: none;
197 |         transition: background 0.2s;
198 |         display: flex;
199 |         align-items: center;
200 |         justify-content: center;
201 |         padding: 0;
202 |         position: relative;
203 |         overflow: hidden;
204 |     }
205 |     .form-list .delete-btn svg {
206 |         width: 18px;
207 |         height: 18px;
208 |         display: block;
209 |         margin: auto;
210 |         pointer-events: none;
211 |         position: absolute;
212 |         left: 0;
213 |         right: 0;
214 |         top: 0;
215 |         bottom: 0;
216 |     }
217 |     .form-list .delete-btn:hover,
218 |     .form-list .delete-btn:active,
219 |     .form-list .delete-btn:focus {
220 |         background: rgba(231, 76, 60, 0.13);
221 |     }
222 | }
223 | 
224 | .form-list li:last-child {
225 |     border-bottom: none;
226 | }
227 | 
228 | .form-list li:hover {
229 |     background-color: rgba(52, 152, 219, 0.05);
230 | }
231 | 
232 | .form-list li.selected {
233 |     background-color: rgba(52, 152, 219, 0.1);
234 |     border-left: 4px solid var(--primary-color);
235 | }
236 | 
237 | .form-list .form-name {
238 |     flex-grow: 1;
239 |     font-size: 1.1em;
240 |     padding: 5px 0;
241 |     color: var(--secondary-color);
242 | }
243 | 
244 | .form-list .delete-btn {
245 |     color: var(--error-color);
246 |     background: none;
247 |     border: none;
248 |     padding: 0;
249 |     cursor: pointer;
250 |     display: flex;
251 |     align-items: center;
252 |     justify-content: center;
253 |     width: 32px;
254 |     height: 32px;
255 | }
256 | 
257 | .form-list .delete-btn svg {
258 |     width: 18px;
259 |     height: 18px;
260 |     fill: currentColor;
261 | }
262 | 
263 | .no-forms-message {
264 |     text-align: center;
265 |     padding: 20px;
266 |     color: #777;
267 |     font-style: italic;
268 |     display: none;
269 | }
270 | 
271 | .form-data-preview {
272 |     margin-top: 15px;
273 |     padding: 15px;
274 |     background-color: #f8f9fa;
275 |     border-radius: 6px;
276 |     border-left: 4px solid var(--primary-color);
277 |     font-family: monospace;
278 |     font-size: 0.9em;
279 |     overflow-x: auto;
280 |     max-height: 200px;
281 |     overflow-y: auto;
282 | }
283 | 
284 | @media (max-width: 768px) {
285 |     .form-modal-content {
286 |         width: 95%;
287 |         max-height: 90vh;
288 |     }
289 |     
290 |     .modal-body {
291 |         padding: 15px;
292 |     }
293 |     
294 |     .form-list li {
295 |         padding: 10px;
296 |         flex-direction: column;
297 |         align-items: flex-start;
298 |     }
299 |     
300 |     .form-list .delete-btn {
301 |         margin-top: 10px;
302 |         width: 100%;
303 |         justify-content: flex-end;
304 |     }
305 | }
306 | 


--------------------------------------------------------------------------------
/form-modal.js:
--------------------------------------------------------------------------------
  1 | // 预设表单数据
  2 | const presetFormData = {
  3 |     token: {
  4 |         input: 1769,
  5 |         output: 246
  6 |     },
  7 |     services: [
  8 |         {
  9 |             name: "A",
 10 |             recharge_amount: 1,
 11 |             currency: "USD",
 12 |             balance: 1,
 13 |             input_price: 12.5,
 14 |             output_price: 5,
 15 |             unified_io: false,
 16 |             token_unit: "M"
 17 |         },
 18 |         {
 19 |             name: "B",
 20 |             recharge_amount: 1.5,
 21 |             currency: "CNY",
 22 |             balance: 1,
 23 |             input_price: 0.1,
 24 |             output_price: 0.1,
 25 |             unified_io: true,
 26 |             token_unit: "K"
 27 |         },
 28 |         {
 29 |             name: "C",
 30 |             recharge_amount: 5.49,
 31 |             currency: "USD",
 32 |             balance: 5,
 33 |             input_price: 0.015,
 34 |             output_price: 0.075,
 35 |             unified_io: false,
 36 |             token_unit: "K"
 37 |         }
 38 |     ]
 39 | };
 40 | 
 41 | // 表单模态框功能实现
 42 | // 只暴露弹窗相关函数，不直接绑定按钮事件
 43 | window.openSaveFormModal = openSaveFormModal;
 44 | window.openHistoryFormModal = openHistoryFormModal;
 45 | 
 46 | // 初始化模态框和预设表单
 47 | initFormModal();
 48 | addPresetFormToStorage();
 49 | 
 50 | // 初始化表单模态框
 51 | function initFormModal() {
 52 |     // 直接绑定事件（DOM已在index.html中）
 53 |     setupSaveFormModalEvents();
 54 |     setupHistoryFormModalEvents();
 55 | }
 56 | 
 57 | // 设置保存表单模态框事件
 58 | function setupSaveFormModalEvents() {
 59 |     const modal = document.getElementById('saveFormModal');
 60 |     const closeBtn = modal.querySelector('.close-btn');
 61 |     const saveBtn = document.getElementById('saveFormConfirm');
 62 |     
 63 |     // 关闭按钮事件
 64 |     closeBtn.addEventListener('click', () => {
 65 |         console.log('点击保存表单弹窗关闭按钮');
 66 |         closeSaveFormModal();
 67 |     });
 68 |     
 69 |     // 点击模态框外部关闭
 70 |     window.addEventListener('click', (event) => {
 71 |         if (event.target === modal) {
 72 |             console.log('点击保存表单弹窗外部关闭');
 73 |             closeSaveFormModal();
 74 |         }
 75 |     });
 76 |     
 77 |     // 保存表单按钮事件
 78 |     saveBtn.addEventListener('click', () => {
 79 |         console.log('点击保存表单按钮');
 80 |         saveFormWithName();
 81 |     });
 82 |     
 83 |     // 表单名称输入框支持Enter触发保存
 84 |     const formNameInput = document.getElementById('formName');
 85 |     if (formNameInput) {
 86 |         formNameInput.addEventListener('keydown', (e) => {
 87 |             if (e.key === 'Enter') {
 88 |                 e.preventDefault();
 89 |                 console.log('回车保存表单');
 90 |                 saveFormWithName();
 91 |             }
 92 |         });
 93 |     }
 94 | }
 95 | 
 96 | // 设置历史记录模态框事件
 97 | function setupHistoryFormModalEvents() {
 98 |     const modal = document.getElementById('historyFormModal');
 99 |     const closeBtn = modal.querySelector('.close-btn');
100 |     
101 |     // 关闭按钮事件
102 |     closeBtn.addEventListener('click', () => {
103 |         console.log('点击历史记录弹窗关闭按钮');
104 |         closeHistoryFormModal();
105 |     });
106 |     
107 |     // 点击模态框外部关闭
108 |     window.addEventListener('click', (event) => {
109 |         if (event.target === modal) {
110 |             console.log('点击历史记录弹窗外部关闭');
111 |             closeHistoryFormModal();
112 |         }
113 |     });
114 | }
115 | 
116 | // 打开保存表单模态框
117 | function openSaveFormModal() {
118 |     const modal = document.getElementById('saveFormModal');
119 |     document.getElementById('formName').value = '';
120 |     modal.style.display = 'flex';
121 | }
122 | 
123 | // 关闭保存表单模态框
124 | function closeSaveFormModal() {
125 |     const modal = document.getElementById('saveFormModal');
126 |     modal.style.display = 'none';
127 |     document.getElementById('formName').value = '';
128 | }
129 | 
130 | // 打开历史记录模态框
131 | function openHistoryFormModal() {
132 |     const modal = document.getElementById('historyFormModal');
133 |     const formList = document.getElementById('formList');
134 |     const noFormsMessage = document.getElementById('noFormsMessage');
135 |     
136 |     // 清空表单列表
137 |     formList.innerHTML = '';
138 |     
139 |     // 加载已保存的表单
140 |     const forms = JSON.parse(localStorage.getItem('formHistory') || '[]');
141 |     
142 |     if (forms.length > 0) {
143 |         forms.forEach((form, index) => {
144 |             const li = document.createElement('li');
145 |             li.innerHTML = `
146 |                 <div class="form-name">${form.name}</div>
147 |                 <button class="delete-btn" data-index="${index}">
148 |                     <svg viewBox="0 0 24 24" width="16" height="16">
149 |                         <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
150 |                     </svg>
151 |                 </button>
152 |             `;
153 |             
154 |             // 添加点击加载事件
155 |             li.addEventListener('click', (e) => {
156 |                 // 如果点击的是删除按钮或其子元素，不触发加载
157 |                 if (e.target.closest('.delete-btn')) {
158 |                     return;
159 |                 }
160 |                 loadForm(index);
161 |             });
162 |             
163 |             formList.appendChild(li);
164 |         });
165 |         
166 |         // 绑定删除按钮事件
167 |         formList.querySelectorAll('.delete-btn').forEach(btn => {
168 |             btn.addEventListener('click', (e) => {
169 |                 e.stopPropagation(); // 阻止事件冒泡到列表项
170 |                 const index = e.currentTarget.getAttribute('data-index');
171 |                 deleteForm(index);
172 |             });
173 |         });
174 |         
175 |         // 显示表单列表，隐藏无表单消息
176 |         formList.style.display = 'block';
177 |         noFormsMessage.style.display = 'none';
178 |     } else {
179 |         // 隐藏表单列表，显示无表单消息
180 |         formList.style.display = 'none';
181 |         noFormsMessage.style.display = 'block';
182 |     }
183 |     
184 |     // 显示模态框
185 |     modal.style.display = 'flex';
186 | }
187 | 
188 | // 关闭历史记录模态框
189 | function closeHistoryFormModal() {
190 |     const modal = document.getElementById('historyFormModal');
191 |     modal.style.display = 'none';
192 | }
193 | 
194 | // 保存表单
195 | function saveFormWithName() {
196 |     const formName = document.getElementById('formName').value.trim();
197 |     if (!formName) {
198 |         // 只高亮输入框，不显示红色提示字
199 |         const input = document.getElementById('formName');
200 |         if (input) {
201 |             input.classList.add('error');
202 |             const tip = document.getElementById('formName-error-tip');
203 |             if (tip) tip.remove();
204 |         }
205 |         return;
206 |     }
207 |     
208 |     // 获取当前表单数据
209 |     const formData = getCurrentFormData();
210 |     
211 |     // 获取已保存的表单历史
212 |     const forms = JSON.parse(localStorage.getItem('formHistory') || '[]');
213 |     
214 |     // 添加新表单
215 |     forms.push({
216 |         name: formName,
217 |         data: formData
218 |     });
219 |     
220 |     // 保存到本地存储
221 |     localStorage.setItem('formHistory', JSON.stringify(forms));
222 |     
223 |     // 保存成功后移除高亮
224 |     const input = document.getElementById('formName');
225 |     if (input) {
226 |         input.classList.remove('error');
227 |         const tip = document.getElementById('formName-error-tip');
228 |         if (tip) tip.remove();
229 |     }
230 |     // 关闭模态框
231 |     closeSaveFormModal();
232 |     // 不再弹窗，直接关闭弹窗或刷新历史列表即可
233 | }
234 | 
235 | // 加载表单
236 | function loadForm(index) {
237 |     const forms = JSON.parse(localStorage.getItem('formHistory') || '[]');
238 |     
239 |     if (index >= 0 && index < forms.length) {
240 |         // 使用script.js中的populateForm函数
241 |         const formData = forms[index].data;
242 |         document.getElementById('inputtokens').value = formData.inputTokens || '';
243 |         document.getElementById('outputtokens').value = formData.outputTokens || '';
244 |         
245 |         // 清除当前所有行
246 |         const tbody = document.querySelector('#providersTable tbody');
247 |         tbody.innerHTML = '';
248 |         
249 |         // 添加服务商行
250 |         if (formData.providers && formData.providers.length > 0) {
251 |             formData.providers.forEach(provider => {
252 |                 const row = addProviderRow(false);
253 |                 row.querySelector('.provider-name').value = provider.providerName || '';
254 |                 row.querySelector('.recharge-amount').value = provider.recharge_amount || '';
255 |                 row.querySelector('.currency').value = provider.currency || 'USD';
256 |                 row.querySelector('.balance').value = provider.balance || '';
257 |                 row.querySelector('.input-price').value = provider.input_price || '';
258 |                 row.querySelector('.output-price').value = provider.output_price || '';
259 |                 row.querySelector('.same-price').checked = !!provider.same_price_checked;
260 |                 row.querySelector('.token-unit').value = provider.token_unit || '1000';
261 |             });
262 |         } else {
263 |             // 确保至少有一行
264 |             ensureMinimumRows();
265 |         }
266 |         
267 |         // 更新导航数组
268 |         updateNavigationArray();
269 |         adjustFrameHeights();
270 |         
271 |         closeHistoryFormModal();
272 |     }
273 | }
274 | 
275 | // 删除表单
276 | function deleteForm(index) {
277 |     const forms = JSON.parse(localStorage.getItem('formHistory') || '[]');
278 |     
279 |     if (index >= 0 && index < forms.length) {
280 |         const formName = forms[index].name;
281 |         
282 |         // 使用自定义弹窗确认删除
283 |         showCustomConfirm(`确定要删除表单 "${formName}" 吗？`, function() {
284 |             forms.splice(index, 1);
285 |             localStorage.setItem('formHistory', JSON.stringify(forms));
286 |             
287 |             // 刷新表单列表
288 |             openHistoryFormModal();
289 |         });
290 |     }
291 | }
292 | 
293 | // 显示自定义确认弹窗
294 | function showCustomConfirm(message, confirmCallback) {
295 |     // 使用现有的自定义弹窗
296 |     const modal = document.getElementById('customAlert');
297 |     const alertMessage = document.getElementById('alertMessage');
298 |     const confirmBtn = document.getElementById('alertConfirm');
299 |     const cancelBtn = document.getElementById('alertCancel');
300 |     
301 |     // 如果取消按钮不存在，创建一个
302 |     if (!cancelBtn) {
303 |         const newCancelBtn = document.createElement('button');
304 |         newCancelBtn.id = 'alertCancel';
305 |         newCancelBtn.textContent = '取消';
306 |         document.querySelector('.alert-buttons').appendChild(newCancelBtn);
307 |     }
308 |     
309 |     // 设置消息
310 |     alertMessage.textContent = message;
311 |     
312 |     // 显示弹窗
313 |     modal.style.display = 'flex';
314 |     
315 |     // 确认按钮点击事件
316 |     const handleConfirm = function() {
317 |         modal.style.display = 'none';
318 |         confirmBtn.removeEventListener('click', handleConfirm);
319 |         document.getElementById('alertCancel').removeEventListener('click', handleCancel);
320 |         confirmCallback();
321 |     };
322 |     
323 |     // 取消按钮点击事件
324 |     const handleCancel = function() {
325 |         modal.style.display = 'none';
326 |         confirmBtn.removeEventListener('click', handleConfirm);
327 |         document.getElementById('alertCancel').removeEventListener('click', handleCancel);
328 |     };
329 |     
330 |     // 绑定事件
331 |     confirmBtn.addEventListener('click', handleConfirm);
332 |     document.getElementById('alertCancel').addEventListener('click', handleCancel);
333 | }
334 | 
335 | // 获取当前表单数据
336 | function getCurrentFormData() {
337 |     // 当前使用script.js中的getFormData函数格式
338 |     const providers = Array.from(document.querySelectorAll('#providersTable tbody tr')).map(row => {
339 |         const nameInput = row.querySelector('.provider-name');
340 |         if (!nameInput || !nameInput.value.trim()) return null;
341 |         
342 |         return {
343 |             providerName: row.querySelector('.provider-name').value,
344 |             recharge_amount: row.querySelector('.recharge-amount').value,
345 |             currency: row.querySelector('.currency').value,
346 |             balance: row.querySelector('.balance').value,
347 |             input_price: row.querySelector('.input-price').value,
348 |             output_price: row.querySelector('.output-price').value,
349 |             same_price_checked: row.querySelector('.same-price').checked,
350 |             token_unit: row.querySelector('.token-unit').value
351 |         };
352 |     }).filter(item => item !== null);
353 |     
354 |     const formData = {
355 |         inputTokens: document.getElementById('inputtokens').value,
356 |         outputTokens: document.getElementById('outputtokens').value,
357 |         providers: providers
358 |     };
359 |     
360 |     console.log('获取当前表单数据:', formData);
361 |     
362 |     return formData;
363 | }
364 | 
365 | // 填充表单数据
366 | function populateForm(formData) {
367 |     // 清除当前所有行
368 |     const tbody = document.querySelector('#providersTable tbody');
369 |     tbody.innerHTML = '';
370 |     
371 |     // 填充输入和输出标记数
372 |     if (formData.token) {
373 |         document.getElementById('inputtokens').value = formData.token.input || '';
374 |         document.getElementById('outputtokens').value = formData.token.output || '';
375 |     }
376 |     
377 |     // 添加服务商行
378 |     if (formData.providers && formData.providers.length > 0) {
379 |         formData.providers.forEach(provider => {
380 |             const row = addProviderRow(false);
381 |             
382 |             const nameInput = row.querySelector('.provider-name');
383 |             const rechargeInput = row.querySelector('.recharge-amount');
384 |             const currencySelect = row.querySelector('.currency');
385 |             const balanceInput = row.querySelector('.balance');
386 |             const inputPriceInput = row.querySelector('.input-price');
387 |             const outputPriceInput = row.querySelector('.output-price');
388 |             const singlePriceInput = row.querySelector('.single-price');
389 |             const unitSelect = row.querySelector('.token-unit');
390 |             
391 |             if (nameInput) nameInput.value = provider.name || '';
392 |             if (rechargeInput) rechargeInput.value = provider.recharge || '';
393 |             if (currencySelect) currencySelect.value = provider.currency || 'USD';
394 |             if (balanceInput) balanceInput.value = provider.balance || '';
395 |             if (inputPriceInput) inputPriceInput.value = provider.inputPrice || '';
396 |             if (outputPriceInput) outputPriceInput.value = provider.outputPrice || '';
397 |             if (singlePriceInput) singlePriceInput.value = provider.singlePrice || '';
398 |             if (unitSelect) unitSelect.value = provider.unit || '1';
399 |         });
400 |     } else {
401 |         // 确保至少有一行
402 |         ensureMinimumRows();
403 |     }
404 |     
405 |     // 更新导航数组
406 |     updateNavigationArray();
407 | }
408 | 
409 | // 添加预设表单到本地存储
410 | function addPresetFormToStorage() {
411 |     console.log('添加预设表单到本地存储');
412 |     const forms = JSON.parse(localStorage.getItem('formHistory') || '[]');
413 |     
414 |     // 检查是否已存在预设表单
415 |     const presetExists = forms.some(form => form.name === '预设表单示例');
416 |     console.log('预设表单是否存在:', presetExists);
417 |     
418 |     if (!presetExists) {
419 |         // 转换预设数据格式以适应应用程序
420 |         const presetData = {
421 |             inputTokens: presetFormData.token.input.toString(),
422 |             outputTokens: presetFormData.token.output.toString(),
423 |             providers: presetFormData.services.map(service => ({
424 |                 providerName: service.name,
425 |                 recharge_amount: service.recharge_amount.toString(),
426 |                 currency: service.currency,
427 |                 balance: service.balance.toString(),
428 |                 input_price: service.input_price.toString(),
429 |                 output_price: service.output_price.toString(),
430 |                 same_price_checked: service.unified_io,
431 |                 token_unit: service.token_unit === 'K' ? '1000' : '1000000'
432 |             }))
433 |         };
434 |         
435 |         // 添加预设表单
436 |         forms.push({ name: '预设表单示例', data: presetData });
437 |         localStorage.setItem('formHistory', JSON.stringify(forms));
438 |         console.log('预设表单已添加');
439 |     }
440 | }
441 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --main-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  3 |     --hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  4 |     --primary-color: #3498db;
  5 |     --secondary-color: #34495e;
  6 |     --background-color: #f0f4f8;
  7 |     --white-color: #ffffff;
  8 |     --error-color: #e74c3c;
  9 |     --font-family: sans-serif;
 10 | }
 11 | 
 12 | * {
 13 |     box-sizing: border-box;
 14 | }
 15 | 
 16 | body {
 17 |     line-height: 1.6;
 18 |     margin: 0;
 19 |     padding: 0;
 20 |     background-color: var(--background-color);
 21 |     color: var(--secondary-color);
 22 |     font-size: 16px;
 23 |     font-family: var(--font-family);
 24 | }
 25 | 
 26 | #main-content {
 27 |     max-width: 1200px;
 28 |     margin: 20px auto;
 29 |     background-color: var(--white-color);
 30 |     box-shadow: var(--main-shadow);
 31 |     border-radius: 12px;
 32 |     overflow: hidden;
 33 |     transition: all 0.5s ease;
 34 | }
 35 | 
 36 | .container {
 37 |     padding: 30px;
 38 | }
 39 | 
 40 | header {
 41 |     display: flex;
 42 |     align-items: center;
 43 |     margin-bottom: 30px;
 44 | }
 45 | 
 46 | .logo-container {
 47 |     flex: 0 0 120px;
 48 |     margin-right: 20px;
 49 | }
 50 | 
 51 | .logo {
 52 |     width: 100%;
 53 |     height: auto;
 54 | }
 55 | 
 56 | .header-right {
 57 |     flex-grow: 1;
 58 |     display: flex;
 59 |     flex-direction: column;
 60 |     align-items: flex-start;
 61 | }
 62 | 
 63 | h1 {
 64 |     margin: 0 0 10px;
 65 |     color: var(--secondary-color);
 66 |     font-size: 2.2em;
 67 |     font-weight: bold;
 68 |     display: flex;
 69 |     align-items: center;
 70 | }
 71 | 
 72 | .info-icon {
 73 |     cursor: pointer;
 74 |     vertical-align: text-bottom;
 75 |     margin-left: 10px;
 76 |     fill: var(--primary-color);
 77 |     width: 16px;
 78 |     height: 16px;
 79 | }
 80 | 
 81 | .tooltip {
 82 |     display: none;
 83 |     position: absolute;
 84 |     background-color: #333;
 85 |     color: #fff;
 86 |     padding: 10px;
 87 |     border-radius: 6px;
 88 |     font-size: 14px;
 89 |     z-index: 1000;
 90 |     max-width: 250px;
 91 |     box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 92 | }
 93 | 
 94 | .exchange-rate-container {
 95 |     display: flex;
 96 |     align-items: center;
 97 |     margin-bottom: 5px;
 98 | }
 99 | 
100 | #exchangeRateLabel {
101 |     margin-right: 5px;
102 | }
103 | 
104 | #exchangeRateValue {
105 |     font-weight: bold;
106 |     margin-right: 10px;
107 | }
108 | 
109 | #exchangeRateValue.loading {
110 |     color: var(--primary-color);
111 | }
112 | 
113 | #exchangeRateValue.error {
114 |     color: var(--error-color);
115 | }
116 | 
117 | .github-link {
118 |     color: var(--primary-color);
119 |     text-decoration: none;
120 |     transition: color 0.3s ease;
121 |     font-size: 0.9em;
122 |     align-self: flex-start;
123 | 
124 | }
125 | 
126 | .github-link:hover {
127 |     color: darken(var(--primary-color), 10%);
128 | }
129 | 
130 | .input-section {
131 |     display: flex;
132 |     justify-content: space-between;
133 |     margin-bottom: 30px;
134 |     background-color: #f8f9fa;
135 |     padding: 20px;
136 |     border-radius: 12px;
137 |     box-shadow: var(--main-shadow);
138 |     transition: box-shadow 0.3s ease;
139 | }
140 | 
141 | .input-section:hover {
142 |     box-shadow: var(--hover-shadow);
143 | }
144 | 
145 | .token-input {
146 |     flex: 1;
147 |     display: flex;
148 |     flex-direction: column;
149 |     justify-content: space-between;
150 |     margin-right: 20px;
151 | }
152 | 
153 | .token-input > div {
154 |     display: flex;
155 |     align-items: center;
156 |     margin-bottom: 15px;
157 | }
158 | 
159 | .token-input > div:last-child {
160 |     margin-bottom: 0;
161 | }
162 | 
163 | .token-input label {
164 |     width: 130px;
165 |     margin-right: 15px;
166 |     font-weight: bold;
167 |     color: var(--secondary-color);
168 | }
169 | 
170 | .token-input input,
171 | .token-input select {
172 |     flex: 1;
173 |     padding: 10px;
174 |     border: 1px solid #bdc3c7;
175 |     border-radius: 6px;
176 |     font-size: 1em;
177 |     transition: all 0.3s ease;
178 | }
179 | 
180 | .token-input input:focus,
181 | .token-input select:focus {
182 |     outline: none;
183 |     border-color: var(--primary-color);
184 |     box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
185 | }
186 | 
187 | .usage-tips {
188 |     flex: 1;
189 |     background-color: #f8f9fa;
190 |     padding: 20px;
191 |     border-radius: 12px;
192 |     box-shadow: var(--main-shadow);
193 |     border-left: 4px solid var(--primary-color);
194 |     transition: box-shadow 0.3s ease;
195 | }
196 | 
197 | .usage-tips:hover {
198 |     box-shadow: var(--hover-shadow);
199 | }
200 | 
201 | .usage-tips h3 {
202 |     color: var(--primary-color);
203 |     margin-top: 0;
204 |     margin-bottom: 15px;
205 | }
206 | 
207 | .usage-tips ul {
208 |     padding-left: 20px;
209 |     color: var(--secondary-color);
210 |     margin: 0;
211 | }
212 | 
213 | .usage-tips li {
214 |     margin-bottom: 10px;
215 | }
216 | 
217 | .usage-tips li:last-child {
218 |     margin-bottom: 0;
219 | }
220 | 
221 | .table-container {
222 |     overflow-x: auto;
223 |     overflow-y: hidden;
224 |     box-shadow: var(--main-shadow);
225 |     border-radius: 12px;
226 |     margin-bottom: 30px;
227 |     transition: height 0.5s ease-in-out, box-shadow 0.3s ease;
228 | }
229 | 
230 | .table-container:hover {
231 |     box-shadow: var(--hover-shadow);
232 | }
233 | 
234 | table {
235 |     width: 100%;
236 |     border-collapse: separate;
237 |     border-spacing: 0;
238 | }
239 | 
240 | th, td {
241 |     padding: 12px 8px;
242 |     text-align: center; 
243 |     white-space: nowrap; 
244 | }
245 | 
246 | th {
247 |     background-color: var(--primary-color);
248 |     color: var(--white-color);
249 |     font-weight: bold;
250 |     text-transform: uppercase;
251 |     letter-spacing: 0.5px;
252 | }
253 | 
254 | tr:nth-child(even) {
255 |     background-color: #f9f9f9;
256 | }
257 | 
258 | input[type="text"], input[type="number"], select {
259 |     width: 100%;
260 |     padding: 8px;
261 |     border: 1px solid #bdc3c7;
262 |     border-radius: 6px;
263 |     font-size: 0.9em;
264 |     transition: all 0.3s ease;
265 |     text-align: center;
266 | }
267 | 
268 | input[type="text"]:focus, input[type="number"]:focus, select:focus {
269 |     outline: none;
270 |     border-color: var(--primary-color);
271 |     box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
272 | }
273 | 
274 | input[type="number"] {
275 |     appearance: textfield;
276 |     -moz-appearance: textfield;
277 | }
278 | 
279 | input[type="number"]::-webkit-outer-spin-button,
280 | input[type="number"]::-webkit-inner-spin-button {
281 |     appearance: none;
282 |     -webkit-appearance: none;
283 |     margin: 0;
284 | }
285 | 
286 | select {
287 |     appearance: none;
288 |     background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
289 |     background-repeat: no-repeat;
290 |     background-position-x: 98%;
291 |     background-position-y: 50%;
292 |     padding-right: 30px;
293 | }
294 | 
295 | .add-btn, .delete-row {
296 |     display: flex;
297 |     justify-content: center;
298 |     align-items: center;
299 |     width: 30px;
300 |     height: 30px;
301 |     margin: 10px auto;
302 |     cursor: pointer;
303 |     background: none;
304 |     border: none;
305 |     padding: 0;
306 |     color: var(--primary-color);
307 |     transition: all 0.3s ease;
308 | }
309 | 
310 | .add-btn:hover, .delete-row:hover {
311 |     color: darken(var(--primary-color), 10%);
312 |     transform: scale(1.1);
313 | }
314 | 
315 | .delete-row {
316 |     margin: 0 auto;
317 | }
318 | 
319 | .delete-row:hover {
320 |     color: var(--error-color);
321 | }
322 | 
323 | .add-btn svg, .delete-row svg {
324 |     width: 100%;
325 |     height: 100%;
326 |     fill: none;
327 |     stroke: currentColor;
328 |     stroke-width: 2;
329 |     stroke-linecap: round;
330 |     stroke-linejoin: round;
331 | }
332 | 
333 | .results {
334 |     background-color: #ecf0f1;
335 |     padding: 20px;
336 |     border-radius: 12px;
337 |     margin-bottom: 30px;
338 |     box-shadow: var(--main-shadow);
339 |     overflow: hidden;
340 |     min-height: 100px;
341 |     transition: height 0.5s ease-in-out, box-shadow 0.3s ease;
342 |     height: auto;
343 |     display: flex;
344 |     flex-direction: column;
345 |     justify-content: flex-start;
346 | }
347 | 
348 | .results-disclaimer {
349 |     color: #666;
350 |     font-size: 0.9em;
351 |     margin-top: 10px;
352 |     margin-bottom: 20px;
353 |     line-height: 1.4;
354 |     position: relative;
355 |     z-index: 1;
356 | }
357 | 
358 | .results:hover {
359 |     box-shadow: var(--hover-shadow);
360 | }
361 | 
362 | .results h3 {
363 |     margin-top: 0;
364 |     margin-bottom: 20px;
365 |     color: var(--secondary-color);
366 | }
367 | 
368 | .result-item {
369 |     background-color: var(--white-color);
370 |     margin-top: 0;
371 |     margin-bottom: 15px;
372 |     padding: 15px;
373 |     border-radius: 8px;
374 |     box-shadow: var(--main-shadow);
375 |     display: flex;
376 |     justify-content: space-between;
377 |     align-items: center;
378 |     transition: opacity 0.5s ease, transform 0.5s ease;
379 | }
380 | 
381 | .result-item:last-child {
382 |     margin-bottom: 0;
383 | }
384 | 
385 | .result-item:hover {
386 |     transform: translateY(-2px);
387 |     box-shadow: var(--hover-shadow);
388 | }
389 | 
390 | .result-item .rank {
391 |     font-weight: bold;
392 |     font-size: 1.2em;
393 |     color: var(--primary-color);
394 |     margin-right: 15px;
395 |     min-width: 30px;
396 | }
397 | 
398 | .result-item .provider {
399 |     flex-grow: 1;
400 |     text-align: left;
401 | }
402 | 
403 | .result-item .cost {
404 |     font-weight: bold;
405 |     text-align: right;
406 | }
407 | 
408 | .result-item-fade-in {
409 |     animation: fadeIn 0.5s ease-out forwards;
410 | }
411 | 
412 | .result-item.fade-out {
413 |     animation: fadeOut 0.5s ease-out forwards;
414 | }
415 | 
416 | .actions {
417 |     text-align: center;
418 |     margin-bottom: 30px;
419 | }
420 | 
421 | .actions button {
422 |     padding: 12px 24px;
423 |     background-color: var(--primary-color);
424 |     color: var(--white-color);
425 |     border: none;
426 |     border-radius: 6px;
427 |     cursor: pointer;
428 |     font-size: 1em;
429 |     margin: 0 10px;
430 |     transition: all 0.3s ease;
431 |     font-weight: bold;
432 |     text-transform: uppercase;
433 |     letter-spacing: 1px;
434 | }
435 | 
436 | .actions button:hover {
437 |     background-color: #2980b9;
438 |     transform: translateY(-2px);
439 |     box-shadow: var(--hover-shadow);
440 | }
441 | 
442 | .error {
443 |     background-color: #ffecec;
444 |     border-color: var(--error-color);
445 | }
446 | 
447 | .error-animation {
448 |     animation: fadeToRed 0.5s forwards;
449 | }
450 | 
451 | .switch {
452 |     position: relative;
453 |     display: inline-block;
454 |     width: 60px;
455 |     height: 34px;
456 |     margin: auto;
457 | }
458 | 
459 | .switch input {
460 |     opacity: 0;
461 |     width: 0;
462 |     height: 0;
463 | }
464 | 
465 | .slider {
466 |     position: absolute;
467 |     cursor: pointer;
468 |     top: 0;
469 |     left: 0;
470 |     right: 0;
471 |     bottom: 0;
472 |     background-color: #ccc;
473 |     transition: .4s;
474 |     border-radius: 34px;
475 | }
476 | 
477 | .switch input:hover + .slider {
478 |     box-shadow: 0 0 10px rgba(52, 152, 219, 0.5);
479 | }
480 | 
481 | .slider:before {
482 |     position: absolute;
483 |     content: "";
484 |     height: 26px;
485 |     width: 26px;
486 |     left: 4px;
487 |     bottom: 4px;
488 |     background-color: white;
489 |     transition: .4s;
490 |     border-radius: 50%;
491 | }
492 | 
493 | .slide-down {
494 |     animation: slideDown 0.5s ease-out forwards;
495 | }
496 | 
497 | .slide-up {
498 |     animation: slideUp 0.5s ease-out forwards;
499 | }
500 | 
501 | input:checked + .slider {
502 |     background-color: var(--primary-color);
503 | }
504 | 
505 | input:checked + .slider:before {
506 |     transform: translateX(26px);
507 | }
508 | 
509 | .modal {
510 |     display: none;
511 |     position: fixed;
512 |     z-index: 2000;
513 |     left: 0;
514 |     top: 0;
515 |     width: 100%;
516 |     height: 100%;
517 |     background-color: rgba(0,0,0,0.5);
518 |     align-items: center;
519 |     justify-content: center;
520 |     text-align: center;
521 | }
522 | 
523 | .modal-content {
524 |     background-color: var(--white-color);
525 |     padding: 30px;
526 |     border-radius: 15px;
527 |     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
528 |     text-align: center;
529 |     max-width: 400px;
530 |     width: 90%;
531 | }
532 | 
533 | #alertMessage {
534 |     margin-bottom: 25px;
535 |     font-size: 1.2em;
536 |     color: var(--secondary-color);
537 |     line-height: 1.5;
538 |     white-space: pre-line; 
539 | }
540 | 
541 | .alert-buttons {
542 |     display: flex;
543 |     justify-content: center;
544 |     gap: 20px;
545 | }
546 | 
547 | #alertConfirm, #alertCancel {
548 |     background-color: var(--primary-color);
549 |     color: var(--white-color);
550 |     border: none;
551 |     padding: 10px 20px;
552 |     border-radius: 5px;
553 |     cursor: pointer;
554 |     font-size: 1em;
555 |     transition: all 0.3s ease;
556 | }
557 | 
558 | #alertCancel {
559 |     background-color: var(--error-color);
560 | }
561 | 
562 | #alertConfirm:hover, #alertCancel:hover {
563 |     opacity: 0.8;
564 | }
565 | 
566 | @keyframes slideDown {
567 |     from { opacity: 0; transform: translateY(-20px); }
568 |     to { opacity: 1; transform: translateY(0); }
569 | }
570 | 
571 | @keyframes slideUp {
572 |     from { opacity: 1; transform: translateY(0); }
573 |     to { opacity: 0; transform: translateY(-20px); }
574 | }
575 | 
576 | @keyframes fadeIn {
577 |     from { opacity: 0; transform: translateY(-10px); }
578 |     to { opacity: 1; transform: translateY(0); }
579 | }
580 | 
581 | @keyframes fadeOut {
582 |     from { opacity: 1; transform: translateY(0); }
583 |     to { opacity: 0; transform: translateY(-10px); }
584 | }
585 | 
586 | @keyframes expand {
587 |     0% {
588 |         transform: scaleY(0);
589 |         opacity: 0;
590 |     }
591 |     100% {
592 |         transform: scaleY(1);
593 |         opacity: 1;
594 |     }
595 | }
596 | 
597 | @keyframes collapse {
598 |     0% {
599 |         transform: scaleY(1);
600 |         opacity: 1;
601 |     }
602 |     100% {
603 |         transform: scaleY(0);
604 |         opacity: 0;
605 |     }
606 | }
607 | 
608 | .slide-down {
609 |     animation: slideDown 0.5s forwards;
610 |     transform-origin: top;
611 | }
612 | 
613 | .slide-up {
614 |     animation: slideUp 0.5s forwards;
615 |     transform-origin: top;
616 | }
617 | 
618 | .expand-row {
619 |     animation: expand 0.5s forwards;
620 |     transform-origin: top;
621 | }
622 | 
623 | .collapse-row {
624 |     animation: collapse 0.5s forwards;
625 |     transform-origin: top;
626 | }
627 | 
628 | footer {
629 |     text-align: center;
630 |     padding: 10px 0;
631 |     background-color: var(--background-color);
632 |     color: var(--secondary-color);
633 |     font-size: 0.9em;
634 | }
635 | 
636 | @media (max-width: 768px) {
637 |     .header-right {
638 |         align-items: center;
639 |     }
640 | 
641 |     .exchange-rate-container {
642 |         justify-content: center;
643 |         width: 100%;
644 |     }
645 | 
646 |     .github-link {
647 |         align-self: center;
648 |     }
649 | 
650 |     .tooltip {
651 |         position: absolute;
652 |         left: 50% !important;
653 |         transform: translateX(-50%);
654 |         width: 90%;
655 |         max-width: none;
656 |     }
657 |     
658 |     .container {
659 |         padding: 20px;
660 |     }
661 | 
662 |     .input-section {
663 |         flex-direction: column;
664 |         margin-bottom: 20px;
665 |     }
666 | 
667 |     .token-input {
668 |         margin-right: 0;
669 |         margin-bottom: 0;
670 |     }
671 | 
672 |     .usage-tips {
673 |         display: none;
674 |     }
675 | 
676 |     .actions button {
677 |         width: 100%;
678 |         margin: 10px 0;
679 |     }
680 | 
681 |     header {
682 |         flex-direction: column;
683 |         text-align: center;
684 |     }
685 | 
686 |     .logo-container {
687 |         margin-right: 0;
688 |         margin-bottom: 20px;
689 |     }
690 | 
691 |     h1 {
692 |         font-size: 1.8em;
693 |     }
694 | 
695 |     .results {
696 |         padding: 15px;
697 |         min-height: 100px;
698 |     }
699 | 
700 |     .result-item {
701 |         padding: 10px;
702 |     }
703 | 
704 |     .results h3 {
705 |         font-size: 1.1em;
706 |         margin-bottom: 10px;
707 |     }
708 |     
709 |     .results-disclaimer {
710 |         font-size: 0.8em;
711 |         line-height: 1.3;
712 |         margin-bottom: 15px;
713 |     }
714 | }
715 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | let exchangeRate = null;
  2 | let navigationArray = [];
  3 | let animationQueue = [];
  4 | let isAnimating = false;
  5 | let resultsContainerHeight = 0;
  6 | let isTooltipVisible = false;
  7 | 
  8 | document.addEventListener('DOMContentLoaded', function() {
  9 |     adjustFrameHeights(); 
 10 |     setupKeyboardNavigation();
 11 |     setupWheelSelection();
 12 |     getExchangeRate();
 13 |     document.getElementById('calculateBtn').addEventListener('click', calculateCosts);
 14 |     document.getElementById('clearAllBtn').addEventListener('click', clearAllData);
 15 |     document.getElementById('saveFormBtn').addEventListener('click', () => window.openSaveFormModal());
 16 |     document.getElementById('historyFormBtn').addEventListener('click', () => window.openHistoryFormModal());
 17 |     document.getElementById('addProviderBtn').addEventListener('click', () => addProviderRow(true));
 18 |     ensureMinimumRows();
 19 |     updateNavigationArray();
 20 | 
 21 |     const infoIcon = document.querySelector('.info-icon');
 22 |     const tooltip = document.querySelector('.tooltip');
 23 |     
 24 |     infoIcon.addEventListener('click', toggleTooltip);
 25 | 
 26 |     if (window.innerWidth > 768) {
 27 |         infoIcon.addEventListener('mouseenter', showTooltip);
 28 |         infoIcon.addEventListener('mouseleave', hideTooltip);
 29 |     }
 30 | 
 31 |     window.addEventListener('resize', function() {
 32 |         positionTooltip();
 33 |         if (window.innerWidth <= 768) {
 34 |             infoIcon.removeEventListener('mouseenter', showTooltip);
 35 |             infoIcon.removeEventListener('mouseleave', hideTooltip);
 36 |         } else {
 37 |             infoIcon.addEventListener('mouseenter', showTooltip);
 38 |             infoIcon.addEventListener('mouseleave', hideTooltip);
 39 |         }
 40 |     });
 41 | 
 42 |     document.addEventListener('touchstart', function(e) {
 43 |         if (!tooltip.contains(e.target) && !infoIcon.contains(e.target)) {
 44 |             hideTooltip();
 45 |         }
 46 |     });
 47 | 
 48 |     window.addEventListener('scroll', function() {
 49 |         if (isTooltipVisible) {
 50 |             hideTooltip();
 51 |         }
 52 |     });
 53 | 
 54 |     const resultsContainer = document.querySelector('.results');
 55 |     resultsContainerHeight = resultsContainer.offsetHeight;
 56 | });
 57 | 
 58 | function showTooltip() {
 59 |     const tooltip = document.querySelector('.tooltip');
 60 |     tooltip.style.display = 'block';
 61 |     isTooltipVisible = true;
 62 |     positionTooltip();
 63 | }
 64 | 
 65 | function hideTooltip() {
 66 |     const tooltip = document.querySelector('.tooltip');
 67 |     tooltip.style.display = 'none';
 68 |     isTooltipVisible = false;
 69 | }
 70 | 
 71 | function positionTooltip() {
 72 |     const tooltip = document.querySelector('.tooltip');
 73 |     const infoIcon = document.querySelector('.info-icon');
 74 |     const iconRect = infoIcon.getBoundingClientRect();
 75 | 
 76 |     if (window.innerWidth <= 768) {
 77 |         tooltip.style.top = `${iconRect.bottom + window.scrollY + 5}px`;
 78 |         tooltip.style.left = '50%';
 79 |         tooltip.style.transform = 'translateX(-50%)';
 80 |     } else {
 81 |         let left = iconRect.right + 5;
 82 |         let top = iconRect.top + (iconRect.height / 2) - (tooltip.offsetHeight / 2) + window.scrollY;
 83 | 
 84 |         if (left + tooltip.offsetWidth > window.innerWidth - 10) {
 85 |             left = window.innerWidth - tooltip.offsetWidth - 10;
 86 |         }
 87 | 
 88 |         tooltip.style.left = `${left}px`;
 89 |         tooltip.style.top = `${top}px`;
 90 |         tooltip.style.transform = 'none';
 91 |     }
 92 | }
 93 | 
 94 | function toggleTooltip(e) {
 95 |     e.preventDefault();
 96 |     if (isTooltipVisible) {
 97 |         hideTooltip();
 98 |     } else {
 99 |         showTooltip();
100 |     }
101 | }
102 | 
103 | window.addEventListener('scroll', function() {
104 |     if (isTooltipVisible) {
105 |         hideTooltip();
106 |     }
107 | });
108 | 
109 | function ensureMinimumRows() {
110 |     const tbody = document.querySelector('#providersTable tbody');
111 |     while (tbody.children.length < 2) {
112 |         addProviderRow(false);
113 |     }
114 |     updateNavigationArray();
115 |     adjustFrameHeights();
116 | }
117 | 
118 | function getExchangeRate() {
119 |     const exchangeRateValue = document.getElementById('exchangeRateValue');
120 |     exchangeRateValue.textContent = '获取中...';
121 |     exchangeRateValue.className = 'loading';
122 | 
123 |     const isLocalHost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
124 |     const url = isLocalHost ? 'mock_exchange_rate.json' : 'exchange_rate.json';
125 |     
126 |     console.log('正在获取汇率，使用URL:', url);
127 | 
128 |     fetch(url)
129 |         .then(response => {
130 |             if (!response.ok) {
131 |                 console.error('响应不成功:', response.status);
132 |                 throw new Error('Network response was not ok');
133 |             }
134 |             return response.json();
135 |         })
136 |         .then(data => {
137 |             console.log('获取到汇率数据:', data);
138 |             exchangeRate = parseFloat(data.exchangeRate);
139 |             exchangeRateValue.textContent = exchangeRate.toFixed(4);
140 |             exchangeRateValue.className = '';
141 |         })
142 |         .catch(error => {
143 |             console.error('获取汇率失败:', error);
144 |             // 在本地环境中使用默认汇率
145 |             if (isLocalHost) {
146 |                 console.log('使用默认汇率');
147 |                 exchangeRate = 7.2468;
148 |                 exchangeRateValue.textContent = exchangeRate.toFixed(4);
149 |                 exchangeRateValue.className = '';
150 |             } else {
151 |                 exchangeRateValue.textContent = '获取失败';
152 |                 exchangeRateValue.className = 'error';
153 |             }
154 |         });
155 | }
156 | 
157 | function calculateCosts() {
158 |     console.log('[调试] 点击计算成本按钮');
159 |     if (!exchangeRate) {
160 |         console.log('[调试] 汇率不存在');
161 |         showCustomAlert('汇率获取失败，\n可能是GitHub Action故障。');
162 |         return;
163 |     }
164 | 
165 |     clearErrors();
166 |     const valid = validateInputs();
167 |     console.log('[调试] validateInputs结果:', valid);
168 |     if (!valid) {
169 |         showCustomAlert('请检查所有输入项是否填写完整且格式正确');
170 |         return;
171 |     }
172 | 
173 |     const inputTokens = parseFloat(document.getElementById('inputtokens').value) || 0;
174 |     const outputTokens = parseFloat(document.getElementById('outputtokens').value) || 0;
175 |     console.log('[调试] inputTokens:', inputTokens, 'outputTokens:', outputTokens);
176 |     const results = calculateProviderCosts(inputTokens, outputTokens);
177 |     console.log('[调试] 计算结果:', results);
178 |     displayResults(results);
179 | }
180 | 
181 | function get_price_per_token(price, unit) {
182 |     if (unit === "1000") { // K
183 |         return price / 1000;
184 |     } else if (unit === "1000000") { // M
185 |         return price / 1000000;
186 |     }
187 |     return price; 
188 | }
189 | 
190 | function calculateProviderCosts(inputTokens, outputTokens) {
191 |     return Array.from(document.querySelectorAll('#providersTable tbody tr'))
192 |         .map(row => calculateProviderCost(row, inputTokens, outputTokens))
193 |         .filter(result => result !== null);
194 | }
195 | 
196 | function calculateProviderCost(row, inputTokens, outputTokens) {
197 |     try {
198 |         const providerName = row.querySelector('.provider-name').value.trim();
199 |         const recharge_amount = parseFloat(row.querySelector('.recharge-amount').value);
200 |         const currency = row.querySelector('.currency').value;
201 |         const balance = parseFloat(row.querySelector('.balance').value);
202 |         const input_price = parseFloat(row.querySelector('.input-price').value);
203 |         const output_price = parseFloat(row.querySelector('.output-price').value);
204 |         const same_price_checked = row.querySelector('.same-price').checked;
205 |         const price_unit = row.querySelector('.token-unit').value;
206 | 
207 |         if (!providerName || isNaN(recharge_amount) || isNaN(balance) || isNaN(input_price) || (isNaN(output_price) && !same_price_checked)) {
208 |             return null;
209 |         }
210 | 
211 |         // 计算充值汇率
212 |         // recharge_rate = recharge_amount / recharge_balance
213 |         const recharge_rate = recharge_amount / balance;
214 | 
215 |         // 将输入、输出价格转换为每token价格
216 |         const input_price_per_token = get_price_per_token(input_price, price_unit);
217 |         const output_price_per_token = same_price_checked ? input_price_per_token : get_price_per_token(output_price, price_unit);
218 | 
219 |         // 根据是否区分输入输出计算总费用（balance单位的cost）
220 |         let total_cost;
221 |         if (same_price_checked) {
222 |             // 不区分输入输出
223 |             total_cost = (inputTokens + outputTokens) * input_price_per_token;
224 |         } else {
225 |             // 区分输入输出
226 |             const input_cost = inputTokens * input_price_per_token;
227 |             const output_cost = outputTokens * output_price_per_token;
228 |             total_cost = input_cost + output_cost;
229 |         }
230 | 
231 |         // 根据充值货币和汇率换算成CNY和USD
232 |         let cost_cny, cost_usd;
233 |         if (currency === "CNY") {
234 |             // cost in CNY = total_cost * recharge_rate
235 |             cost_cny = total_cost * recharge_rate;
236 |             cost_usd = cost_cny / exchangeRate;
237 |         } else if (currency === "USD") {
238 |             // cost in USD = total_cost * recharge_rate
239 |             cost_usd = total_cost * recharge_rate;
240 |             cost_cny = cost_usd * exchangeRate;
241 |         }
242 | 
243 |         return { name: providerName, costCNY: cost_cny, costUSD: cost_usd };
244 |     } catch (error) {
245 |         console.error(`计算错误: ${error.message}`);
246 |         return null;
247 |     }
248 | }
249 | 
250 | function displayResults(results) {
251 |     results.sort((a, b) => a.costCNY - b.costCNY);
252 |     const resultsList = document.getElementById('results-list');
253 |     resultsList.innerHTML = '';
254 | 
255 |     const resultsContainer = document.querySelector('.results');
256 |     const originalHeight = resultsContainer.scrollHeight;
257 | 
258 |     const fragment = document.createDocumentFragment();
259 | 
260 |     results.forEach((r, index) => {
261 |         const resultItem = document.createElement('div');
262 |         resultItem.classList.add('result-item');
263 |         resultItem.style.opacity = '0';
264 |         resultItem.style.transform = 'translateY(20px)';
265 |         resultItem.innerHTML = `
266 |             <span class="rank">#${index + 1}</span>
267 |             <span class="provider">${r.name}</span>
268 |             <span class="cost">${r.costCNY.toFixed(4)} CNY / ${r.costUSD.toFixed(4)} USD</span>
269 |         `;
270 |         fragment.appendChild(resultItem);
271 |     });
272 | 
273 |     resultsList.appendChild(fragment);
274 |     
275 |     const newHeight = resultsList.scrollHeight;
276 | 
277 |     animateResultsContainer(originalHeight, newHeight, () => {
278 |         const resultItems = resultsList.querySelectorAll('.result-item');
279 |         resultItems.forEach((item, index) => {
280 |             item.style.transition = `opacity 0.5s ease ${index * 0.05}s, transform 0.5s ease ${index * 0.05}s`;
281 |             item.style.opacity = '1';
282 |             item.style.transform = 'translateY(0)';
283 |         });
284 |     });
285 | 
286 |     adjustResultsContainerHeight(resultsContainer);
287 | }
288 | 
289 | function adjustResultsContainerHeight(container) {
290 |     const content = container.innerHTML;
291 |     const tempDiv = document.createElement('div');
292 |     tempDiv.style.visibility = 'hidden';
293 |     tempDiv.style.position = 'absolute';
294 |     tempDiv.style.width = container.clientWidth + 'px';
295 |     tempDiv.innerHTML = content;
296 |     document.body.appendChild(tempDiv);
297 | 
298 |     const height = tempDiv.offsetHeight;
299 |     document.body.removeChild(tempDiv);
300 | 
301 |     container.style.height = height + 'px';
302 | }
303 | 
304 | function animateResultsContainer(fromHeight, toHeight, callback) {
305 |     const resultsContainer = document.querySelector('.results');
306 |     resultsContainer.style.height = `${fromHeight}px`;
307 |     resultsContainer.style.transition = 'height 0.5s ease-in-out';
308 | 
309 |     requestAnimationFrame(() => {
310 |         resultsContainer.style.height = `${toHeight}px`;
311 |     });
312 | 
313 |     const transitionEndHandler = () => {
314 |         resultsContainer.style.height = 'auto';
315 |         resultsContainer.style.transition = '';
316 |         if (callback) callback();
317 |         resultsContainer.removeEventListener('transitionend', transitionEndHandler);
318 |     };
319 | 
320 |     resultsContainer.addEventListener('transitionend', transitionEndHandler);
321 | }
322 | 
323 | function clearAllData() {
324 |     showCustomAlert('确定要清除所有数据吗？').then((confirmed) => {
325 |         if (confirmed) {
326 |             const rows = document.querySelectorAll('#providersTable tbody tr');
327 |             const resultsList = document.getElementById('results-list');
328 |             const resultItems = resultsList.querySelectorAll('.result-item');
329 | 
330 |             clearResultsList(resultsList, resultItems).then(() => {
331 |                 return clearAllRows(rows);
332 |             }).then(() => {
333 |                 document.getElementById('inputtokens').value = '';
334 |                 document.getElementById('outputtokens').value = '';
335 |                 clearErrors();
336 |                 ensureMinimumRows();
337 |                 updateNavigationArray();
338 |                 adjustFrameHeights();
339 |             });
340 |         }
341 |     });
342 | }
343 | 
344 | function clearResultsList(container, items) {
345 |     return new Promise((resolve) => {
346 |         if (items.length === 0) {
347 |             resolve();
348 |             return;
349 |         }
350 | 
351 |         items.forEach((item, index) => {
352 |             item.style.transition = `opacity 0.5s ease ${index * 0.05}s, transform 0.5s ease ${index * 0.05}s`;
353 |             item.style.opacity = '0';
354 |             item.style.transform = 'translateY(20px)';
355 |         });
356 | 
357 |         setTimeout(() => {
358 |             container.innerHTML = '';
359 |             resolve();
360 |         }, 500 + items.length * 0.05 * 1000);
361 |     });
362 | }
363 | 
364 | function clearAllRows(rows) {
365 |     return new Promise((resolve) => {
366 |         if (rows.length === 0) {
367 |             resolve();
368 |             return;
369 |         }
370 | 
371 |         const tableContainer = document.querySelector('.table-container');
372 |         const tbody = document.querySelector('#providersTable tbody');
373 | 
374 |         for (let i = 0; i < Math.min(2, rows.length); i++) {
375 |             clearRowData(rows[i]);
376 |             rows[i].classList.add('collapse-row');
377 |             setTimeout(() => {
378 |                 rows[i].classList.remove('collapse-row');
379 |                 rows[i].classList.add('expand-row');
380 |             }, 500);
381 |         }
382 | 
383 |         for (let i = 2; i < rows.length; i++) {
384 |             rows[i].classList.add('collapse-row');
385 |         }
386 | 
387 |         const newHeight = rows[0].offsetHeight * 2;
388 | 
389 |         tableContainer.style.transition = 'height 0.5s ease-in-out';
390 |         tableContainer.style.height = `${newHeight}px`;
391 | 
392 |         setTimeout(() => {
393 |             for (let i = rows.length - 1; i >= 2; i--) {
394 |                 tbody.removeChild(rows[i]);
395 |             }
396 |             tableContainer.style.transition = '';
397 |             resolve();
398 |         }, 500);
399 |     });
400 | }
401 | 
402 | function clearRowData(row) {
403 |     row.querySelectorAll('input, select').forEach(input => {
404 |         if (input.type === 'checkbox') {
405 |             input.checked = false;
406 |         } else if (input.tagName === 'SELECT') {
407 |             input.selectedIndex = 0;
408 |         } else {
409 |             input.value = '';
410 |         }
411 |         input.disabled = false;
412 |         input.style.backgroundColor = '';
413 |     });
414 |     toggleOutputPrice(row, false);
415 | }
416 | 
417 | function validateInputs() {
418 |     let isValid = true;
419 |     let firstError = '';
420 |     // 只校验主表单区，不校验弹窗等其它输入
421 |     const tableInputs = document.querySelectorAll('#providersTable input[type="number"], #providersTable input[type="text"]');
422 |     const inputTokens = document.getElementById('inputtokens');
423 |     const outputTokens = document.getElementById('outputtokens');
424 |     const inputs = [...tableInputs, inputTokens, outputTokens];
425 |     inputs.forEach(input => {
426 |         if (!input) return;
427 |         input.classList.remove('error');
428 |         if (input.value.trim() === '' && !input.disabled) {
429 |             input.classList.add('error');
430 |             isValid = false;
431 |             if (!firstError) {
432 |                 if (input.id === 'inputtokens') firstError = '请输入“输入token数”';
433 |                 else if (input.id === 'outputtokens') firstError = '请输入“输出token数”';
434 |                 else if (input.classList.contains('provider-name')) firstError = '请填写所有服务商名称';
435 |                 else if (input.classList.contains('recharge-amount')) firstError = '请填写所有充值金额';
436 |                 else if (input.classList.contains('balance')) firstError = '请填写所有余额';
437 |                 else if (input.classList.contains('input-price')) firstError = '请填写所有输入价格';
438 |                 else if (input.classList.contains('output-price')) firstError = '请填写所有输出价格';
439 |                 else firstError = '有未填写的输入项';
440 |             }
441 |             console.log('[校验失败] input:', input);
442 |         }
443 |     });
444 |     if (!isValid) {
445 |         showCustomAlert(firstError);
446 |         console.log('[调试] validateInputs 未通过:', firstError);
447 |     } else {
448 |         console.log('[调试] validateInputs 全部通过');
449 |     }
450 |     return isValid;
451 | }
452 | 
453 | function clearErrors() {
454 |     const inputs = document.querySelectorAll('.error');
455 |     inputs.forEach(input => input.classList.remove('error'));
456 | }
457 | 
458 | function updateNavigationArray() {
459 |     navigationArray = [
460 |         [document.getElementById('inputtokens')],
461 |         [document.getElementById('outputtokens')]
462 |     ];
463 | 
464 |     const rows = document.querySelectorAll('#providersTable tbody tr');
465 |     rows.forEach(row => {
466 |         const rowElements = row.querySelectorAll('input:not([type="checkbox"]), select');
467 |         navigationArray.push(Array.from(rowElements));
468 |     });
469 | }
470 | 
471 | function setupKeyboardNavigation() {
472 |     document.addEventListener('keydown', function(e) {
473 |         const currentElement = document.activeElement;
474 |         if (!isNavigableElement(currentElement)) return;
475 | 
476 |         let nextElement;
477 | 
478 |         switch(e.key) {
479 |             case 'ArrowUp':
480 |                 if (e.ctrlKey || e.metaKey) {
481 |                     e.preventDefault();
482 |                     nextElement = findNextElement(currentElement, 'up');
483 |                 }
484 |                 break;
485 |             case 'ArrowDown':
486 |                 if (e.ctrlKey || e.metaKey) {
487 |                     e.preventDefault();
488 |                     nextElement = findNextElement(currentElement, 'down');
489 |                 }
490 |                 break;
491 |             case 'ArrowLeft':
492 |                 if (e.ctrlKey || e.metaKey) {
493 |                     e.preventDefault();
494 |                     nextElement = findNextElement(currentElement, 'left');
495 |                 }
496 |                 break;
497 |             case 'ArrowRight':
498 |                 if (e.ctrlKey || e.metaKey) {
499 |                     e.preventDefault();
500 |                     nextElement = findNextElement(currentElement, 'right');
501 |                 }
502 |                 break;
503 |             case 'Enter':
504 |                 if (currentElement.tagName === 'SELECT') {
505 |                     return;
506 |                 }
507 |                 e.preventDefault();
508 |                 handleEnterKey(currentElement);
509 |                 return;
510 |         }
511 | 
512 |         if (nextElement && nextElement !== currentElement) {
513 |             nextElement.focus();
514 |         }
515 |     });
516 | }
517 | 
518 | function setupWheelSelection() {
519 |     document.querySelectorAll('select').forEach(select => {
520 |         select.addEventListener('wheel', function(e) {
521 |             e.preventDefault();
522 |             const options = this.options;
523 |             const index = this.selectedIndex;
524 |             if (e.deltaY < 0 && index > 0) {
525 |                 this.selectedIndex = index - 1;
526 |             } else if (e.deltaY > 0 && index < options.length - 1) {
527 |                 this.selectedIndex = index + 1;
528 |             }
529 |         });
530 |     });
531 | }
532 | 
533 | function isNavigableElement(element) {
534 |     return element && (
535 |         element.tagName === 'INPUT' ||
536 |         element.tagName === 'SELECT'
537 |     );
538 | }
539 | 
540 | function findNextElement(currentElement, direction) {
541 |     const currentPosition = findElementPosition(currentElement);
542 |     if (!currentPosition) return currentElement;
543 | 
544 |     let {row, col} = currentPosition;
545 | 
546 |     switch (direction) {
547 |         case 'up':
548 |             if (row > 0) {
549 |                 row--;
550 |             }
551 |             break;
552 |         case 'down':
553 |             if (row < navigationArray.length - 1) {
554 |                 row++;
555 |             }
556 |             break;
557 |         case 'left':
558 |             if (col > 0) {
559 |                 col--;
560 |             }
561 |             break;
562 |         case 'right':
563 |             if (col < navigationArray[row].length - 1) {
564 |                 col++;
565 |             }
566 |             break;
567 |     }
568 | 
569 |     return navigationArray[row][col] || currentElement;
570 | }
571 | 
572 | function findElementPosition(element) {
573 |     for (let i = 0; i < navigationArray.length; i++) {
574 |         const j = navigationArray[i].indexOf(element);
575 |         if (j !== -1) {
576 |             return {row: i, col: j};
577 |         }
578 |     }
579 |     return null;
580 | }
581 | 
582 | function handleEnterKey(element) {
583 |     if (element.id === 'calculateBtn') {
584 |         calculateCosts();
585 |     } else if (element.id === 'clearAllBtn') {
586 |         clearAllData();
587 |     } else if (element.id === 'alertConfirm') {
588 |         closeCustomAlert();
589 |     }
590 | }
591 | 
592 | function addProviderRow(updateFrameHeights = true) {
593 |     const tbody = document.querySelector('#providersTable tbody');
594 |     const row = document.createElement('tr');
595 |     row.classList.add('expand-row');
596 |     row.innerHTML = `
597 |         <td><input type="text" class="provider-name" placeholder="服务商名称"></td>
598 |         <td><input type="number" class="recharge-amount" placeholder="仅数字" step="any"></td>
599 |         <td>
600 |             <select class="currency">
601 |                 <option value="CNY">CNY</option>
602 |                 <option value="USD">USD</option>
603 |             </select>
604 |         </td>
605 |         <td><input type="number" class="balance" placeholder="仅数字" step="any"></td>
606 |         <td><input type="number" class="input-price" placeholder="仅数字" step="any"></td>
607 |         <td><input type="number" class="output-price" placeholder="仅数字" step="any"></td>
608 |         <td>
609 |             <label class="switch">
610 |                 <input type="checkbox" class="same-price">
611 |                 <span class="slider"></span>
612 |             </label>
613 |         </td>
614 |         <td>
615 |             <select class="token-unit">
616 |                 <option value="1000">K</option>
617 |                 <option value="1000000">M</option>
618 |             </select>
619 |         </td>
620 |         <td>
621 |             <button class="delete-row">
622 |                 <svg class="icon" viewBox="0 0 24 24">
623 |                     <circle cx="12" cy="12" r="10"/>
624 |                     <line x1="15" y1="9" x2="9" y2="15"/>
625 |                     <line x1="9" y1="9" x2="15" y2="15"/>
626 |                 </svg>
627 |             </button>
628 |         </td>
629 |     `;
630 | 
631 |     tbody.appendChild(row);
632 | 
633 |     row.querySelector('.delete-row').addEventListener('click', function() {
634 |         deleteRow(row);
635 |     });
636 | 
637 |     row.querySelector('.same-price').addEventListener('change', function(e) {
638 |         toggleOutputPrice(row, e.target.checked);
639 |     });
640 | 
641 |     updateNavigationArray();
642 |     setupWheelSelection();
643 | 
644 |     if (updateFrameHeights) {
645 |         enqueueAnimation(() => adjustTableContainerHeight(row.offsetHeight, 500));
646 |     }
647 |     return row;
648 | }
649 | 
650 | function deleteRow(row) {
651 |     const tbody = row.parentNode;
652 |     const rows = Array.from(tbody.children);
653 |     const rowIndex = rows.indexOf(row);
654 | 
655 |     if (rows.length > 1) {
656 |         const rowHeight = row.offsetHeight;
657 | 
658 |         row.classList.remove('expand-row');
659 |         row.classList.add('collapse-row');
660 | 
661 |         enqueueAnimation(() => adjustTableContainerHeight(-rowHeight, 500, () => {
662 |             if (rows.length > 1) {
663 |                 tbody.removeChild(row);
664 |             } else {
665 |                 clearRowData(row);
666 |             }
667 |             updateNavigationArray();
668 |         }));
669 |     } else {
670 |         clearRowData(row);
671 |     }
672 | }
673 | 
674 | function adjustTableContainerHeight(heightChange, duration, callback) {
675 |     const tableContainer = document.querySelector('.table-container');
676 |     const newHeight = tableContainer.offsetHeight + heightChange;
677 |     tableContainer.style.transition = `height ${duration}ms ease-in-out`;
678 |     tableContainer.style.height = `${newHeight}px`;
679 | 
680 |     setTimeout(() => {
681 |         tableContainer.style.transition = '';
682 |         if (callback) callback();
683 |         playNextAnimation();
684 |     }, duration);
685 | }
686 | 
687 | function enqueueAnimation(animation) {
688 |     animationQueue.push(animation);
689 |     if (!isAnimating) {
690 |         playNextAnimation();
691 |     }
692 | }
693 | 
694 | function playNextAnimation() {
695 |     if (animationQueue.length > 0) {
696 |         isAnimating = true;
697 |         const nextAnimation = animationQueue.shift();
698 |         nextAnimation();
699 |     } else {
700 |         isAnimating = false;
701 |     }
702 | }
703 | 
704 | function showCustomAlert(message) {
705 |     return new Promise((resolve) => {
706 |         const modal = document.getElementById('customAlert');
707 |         const alertMessage = document.getElementById('alertMessage');
708 |         const confirmButton = document.getElementById('alertConfirm');
709 |         const cancelButton = document.getElementById('alertCancel');
710 | 
711 |         alertMessage.innerHTML = message.replace(/\n/g, '<br>');
712 |         modal.style.display = 'flex';
713 | 
714 |         const closeModal = (result) => {
715 |             modal.style.display = 'none';
716 |             resolve(result);
717 |         };
718 | 
719 |         confirmButton.onclick = () => closeModal(true);
720 |         cancelButton.onclick = () => closeModal(false);
721 | 
722 |         const handleKeyDown = function(e) {
723 |             if (e.key === 'Enter' && modal.style.display === 'flex') {
724 |                 e.preventDefault();
725 |                 closeModal(true);
726 |             } else if (e.key === 'Escape' && modal.style.display === 'flex') {
727 |                 e.preventDefault();
728 |                 closeModal(false);
729 |             }
730 |         };
731 | 
732 |         document.addEventListener('keydown', handleKeyDown);
733 | 
734 |         modal.onclose = () => {
735 |             document.removeEventListener('keydown', handleKeyDown);
736 |         };
737 |     });
738 | }
739 | 
740 | function toggleOutputPrice(row, isChecked) {
741 |     const outputPrice = row.querySelector('.output-price');
742 |     const inputPrice = row.querySelector('.input-price');
743 |     outputPrice.disabled = isChecked;
744 |     outputPrice.style.backgroundColor = isChecked ? '#f0f0f0' : '';
745 |     if (isChecked) {
746 |         outputPrice.value = inputPrice.value;
747 |     }
748 | }
749 | 
750 | function adjustFrameHeights() {
751 |     const tableContainer = document.querySelector('.table-container');
752 |     const tbody = document.querySelector('#providersTable tbody');
753 |     const resultsContainer = document.querySelector('.results');
754 | 
755 |     tableContainer.style.height = `${tbody.scrollHeight + 50}px`;
756 | 
757 |     if (resultsContainer.children.length > 2) {
758 |         resultsContainer.style.height = `${resultsContainerHeight}px`;
759 |     } else {
760 |         resultsContainer.style.height = 'auto';
761 |         resultsContainerHeight = resultsContainer.offsetHeight;
762 |     }
763 | }
764 | 
765 | window.addEventListener('load', () => {
766 |     const resultsContainer = document.querySelector('.results');
767 |     resultsContainerHeight = resultsContainer.offsetHeight;
768 |     adjustFrameHeights();
769 | });
770 | 
771 | function onAnimationEnd(element, callback) {
772 |     const animationEndEvents = ['animationend', 'webkitAnimationEnd', 'oAnimationEnd', 'MSAnimationEnd'];
773 |     
774 |     function handleAnimationEnd() {
775 |         animationEndEvents.forEach(event => {
776 |             element.removeEventListener(event, handleAnimationEnd);
777 |         });
778 |         callback();
779 |     }
780 | 
781 |     animationEndEvents.forEach(event => {
782 |         element.addEventListener(event, handleAnimationEnd);
783 |     });
784 | }
785 | 
786 | function getFormData() {
787 |     const providers = Array.from(document.querySelectorAll('#providersTable tbody tr')).map(row => ({
788 |         providerName: row.querySelector('.provider-name').value,
789 |         recharge_amount: row.querySelector('.recharge-amount').value,
790 |         currency: row.querySelector('.currency').value,
791 |         balance: row.querySelector('.balance').value,
792 |         input_price: row.querySelector('.input-price').value,
793 |         output_price: row.querySelector('.output-price').value,
794 |         same_price_checked: row.querySelector('.same-price').checked,
795 |         token_unit: row.querySelector('.token-unit').value
796 |     }));
797 |     return {
798 |         inputTokens: document.getElementById('inputtokens').value,
799 |         outputTokens: document.getElementById('outputtokens').value,
800 |         providers
801 |     };
802 | }
803 | 
804 | function populateForm(data) {
805 |     const tbody = document.querySelector('#providersTable tbody');
806 |     tbody.innerHTML = '';
807 |     data.providers.forEach(() => addProviderRow(false));
808 |     const rows = document.querySelectorAll('#providersTable tbody tr');
809 |     rows.forEach((row, idx) => {
810 |         const p = data.providers[idx];
811 |         row.querySelector('.provider-name').value = p.providerName;
812 |         row.querySelector('.recharge-amount').value = p.recharge_amount;
813 |         row.querySelector('.currency').value = p.currency;
814 |         row.querySelector('.balance').value = p.balance;
815 |         row.querySelector('.input-price').value = p.input_price;
816 |         row.querySelector('.output-price').value = p.output_price;
817 |         row.querySelector('.same-price').checked = p.same_price_checked;
818 |         row.querySelector('.token-unit').value = p.token_unit;
819 |         toggleOutputPrice(row, p.same_price_checked);
820 |     });
821 |     document.getElementById('inputtokens').value = data.inputTokens;
822 |     document.getElementById('outputtokens').value = data.outputTokens;
823 |     document.getElementById('results-list').innerHTML = '';
824 |     updateNavigationArray();
825 |     adjustFrameHeights();
826 | }
827 | 
828 | function saveCurrentForm() {
829 |     const name = prompt('请输入表单名称:');
830 |     if (!name) return;
831 |     const history = JSON.parse(localStorage.getItem('formHistory') || '[]');
832 |     history.push({ name, data: getFormData() });
833 |     localStorage.setItem('formHistory', JSON.stringify(history));
834 |     showCustomAlert('表单已保存');
835 | }
836 | 
837 | function showFormHistory() {
838 |     const history = JSON.parse(localStorage.getItem('formHistory') || '[]');
839 |     if (history.length === 0) {
840 |         showCustomAlert('暂无历史记录');
841 |         return;
842 |     }
843 |     const list = history.map((h, i) => `${i + 1}. ${h.name}`).join('\n');
844 |     const index = parseInt(prompt(`选择要填充的表单:\n${list}`), 10);
845 |     if (index && index >= 1 && index <= history.length) {
846 |         populateForm(history[index - 1].data);
847 |     }
848 | }
849 | 
850 | adjustFrameHeights();
851 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 3, 29 June 2007
  3 | 
  4 |  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  5 |  Everyone is permitted to copy and distribute verbatim copies
  6 |  of this license document, but changing it is not allowed.
  7 | 
  8 |                             Preamble
  9 | 
 10 |   The GNU General Public License is a free, copyleft license for
 11 | software and other kinds of works.
 12 | 
 13 |   The licenses for most software and other practical works are designed
 14 | to take away your freedom to share and change the works.  By contrast,
 15 | the GNU General Public License is intended to guarantee your freedom to
 16 | share and change all versions of a program--to make sure it remains free
 17 | software for all its users.  We, the Free Software Foundation, use the
 18 | GNU General Public License for most of our software; it applies also to
 19 | any other work released this way by its authors.  You can apply it to
 20 | your programs, too.
 21 | 
 22 |   When we speak of free software, we are referring to freedom, not
 23 | price.  Our General Public Licenses are designed to make sure that you
 24 | have the freedom to distribute copies of free software (and charge for
 25 | them if you wish), that you receive source code or can get it if you
 26 | want it, that you can change the software or use pieces of it in new
 27 | free programs, and that you know you can do these things.
 28 | 
 29 |   To protect your rights, we need to prevent others from denying you
 30 | these rights or asking you to surrender the rights.  Therefore, you have
 31 | certain responsibilities if you distribute copies of the software, or if
 32 | you modify it: responsibilities to respect the freedom of others.
 33 | 
 34 |   For example, if you distribute copies of such a program, whether
 35 | gratis or for a fee, you must pass on to the recipients the same
 36 | freedoms that you received.  You must make sure that they, too, receive
 37 | or can get the source code.  And you must show them these terms so they
 38 | know their rights.
 39 | 
 40 |   Developers that use the GNU GPL protect your rights with two steps:
 41 | (1) assert copyright on the software, and (2) offer you this License
 42 | giving you legal permission to copy, distribute and/or modify it.
 43 | 
 44 |   For the developers' and authors' protection, the GPL clearly explains
 45 | that there is no warranty for this free software.  For both users' and
 46 | authors' sake, the GPL requires that modified versions be marked as
 47 | changed, so that their problems will not be attributed erroneously to
 48 | authors of previous versions.
 49 | 
 50 |   Some devices are designed to deny users access to install or run
 51 | modified versions of the software inside them, although the manufacturer
 52 | can do so.  This is fundamentally incompatible with the aim of
 53 | protecting users' freedom to change the software.  The systematic
 54 | pattern of such abuse occurs in the area of products for individuals to
 55 | use, which is precisely where it is most unacceptable.  Therefore, we
 56 | have designed this version of the GPL to prohibit the practice for those
 57 | products.  If such problems arise substantially in other domains, we
 58 | stand ready to extend this provision to those domains in future versions
 59 | of the GPL, as needed to protect the freedom of users.
 60 | 
 61 |   Finally, every program is threatened constantly by software patents.
 62 | States should not allow patents to restrict development and use of
 63 | software on general-purpose computers, but in those that do, we wish to
 64 | avoid the special danger that patents applied to a free program could
 65 | make it effectively proprietary.  To prevent this, the GPL assures that
 66 | patents cannot be used to render the program non-free.
 67 | 
 68 |   The precise terms and conditions for copying, distribution and
 69 | modification follow.
 70 | 
 71 |                        TERMS AND CONDITIONS
 72 | 
 73 |   0. Definitions.
 74 | 
 75 |   "This License" refers to version 3 of the GNU General Public License.
 76 | 
 77 |   "Copyright" also means copyright-like laws that apply to other kinds of
 78 | works, such as semiconductor masks.
 79 | 
 80 |   "The Program" refers to any copyrightable work licensed under this
 81 | License.  Each licensee is addressed as "you".  "Licensees" and
 82 | "recipients" may be individuals or organizations.
 83 | 
 84 |   To "modify" a work means to copy from or adapt all or part of the work
 85 | in a fashion requiring copyright permission, other than the making of an
 86 | exact copy.  The resulting work is called a "modified version" of the
 87 | earlier work or a work "based on" the earlier work.
 88 | 
 89 |   A "covered work" means either the unmodified Program or a work based
 90 | on the Program.
 91 | 
 92 |   To "propagate" a work means to do anything with it that, without
 93 | permission, would make you directly or secondarily liable for
 94 | infringement under applicable copyright law, except executing it on a
 95 | computer or modifying a private copy.  Propagation includes copying,
 96 | distribution (with or without modification), making available to the
 97 | public, and in some countries other activities as well.
 98 | 
 99 |   To "convey" a work means any kind of propagation that enables other
100 | parties to make or receive copies.  Mere interaction with a user through
101 | a computer network, with no transfer of a copy, is not conveying.
102 | 
103 |   An interactive user interface displays "Appropriate Legal Notices"
104 | to the extent that it includes a convenient and prominently visible
105 | feature that (1) displays an appropriate copyright notice, and (2)
106 | tells the user that there is no warranty for the work (except to the
107 | extent that warranties are provided), that licensees may convey the
108 | work under this License, and how to view a copy of this License.  If
109 | the interface presents a list of user commands or options, such as a
110 | menu, a prominent item in the list meets this criterion.
111 | 
112 |   1. Source Code.
113 | 
114 |   The "source code" for a work means the preferred form of the work
115 | for making modifications to it.  "Object code" means any non-source
116 | form of a work.
117 | 
118 |   A "Standard Interface" means an interface that either is an official
119 | standard defined by a recognized standards body, or, in the case of
120 | interfaces specified for a particular programming language, one that
121 | is widely used among developers working in that language.
122 | 
123 |   The "System Libraries" of an executable work include anything, other
124 | than the work as a whole, that (a) is included in the normal form of
125 | packaging a Major Component, but which is not part of that Major
126 | Component, and (b) serves only to enable use of the work with that
127 | Major Component, or to implement a Standard Interface for which an
128 | implementation is available to the public in source code form.  A
129 | "Major Component", in this context, means a major essential component
130 | (kernel, window system, and so on) of the specific operating system
131 | (if any) on which the executable work runs, or a compiler used to
132 | produce the work, or an object code interpreter used to run it.
133 | 
134 |   The "Corresponding Source" for a work in object code form means all
135 | the source code needed to generate, install, and (for an executable
136 | work) run the object code and to modify the work, including scripts to
137 | control those activities.  However, it does not include the work's
138 | System Libraries, or general-purpose tools or generally available free
139 | programs which are used unmodified in performing those activities but
140 | which are not part of the work.  For example, Corresponding Source
141 | includes interface definition files associated with source files for
142 | the work, and the source code for shared libraries and dynamically
143 | linked subprograms that the work is specifically designed to require,
144 | such as by intimate data communication or control flow between those
145 | subprograms and other parts of the work.
146 | 
147 |   The Corresponding Source need not include anything that users
148 | can regenerate automatically from other parts of the Corresponding
149 | Source.
150 | 
151 |   The Corresponding Source for a work in source code form is that
152 | same work.
153 | 
154 |   2. Basic Permissions.
155 | 
156 |   All rights granted under this License are granted for the term of
157 | copyright on the Program, and are irrevocable provided the stated
158 | conditions are met.  This License explicitly affirms your unlimited
159 | permission to run the unmodified Program.  The output from running a
160 | covered work is covered by this License only if the output, given its
161 | content, constitutes a covered work.  This License acknowledges your
162 | rights of fair use or other equivalent, as provided by copyright law.
163 | 
164 |   You may make, run and propagate covered works that you do not
165 | convey, without conditions so long as your license otherwise remains
166 | in force.  You may convey covered works to others for the sole purpose
167 | of having them make modifications exclusively for you, or provide you
168 | with facilities for running those works, provided that you comply with
169 | the terms of this License in conveying all material for which you do
170 | not control copyright.  Those thus making or running the covered works
171 | for you must do so exclusively on your behalf, under your direction
172 | and control, on terms that prohibit them from making any copies of
173 | your copyrighted material outside their relationship with you.
174 | 
175 |   Conveying under any other circumstances is permitted solely under
176 | the conditions stated below.  Sublicensing is not allowed; section 10
177 | makes it unnecessary.
178 | 
179 |   3. Protecting Users' Legal Rights From Anti-Circumvention Law.
180 | 
181 |   No covered work shall be deemed part of an effective technological
182 | measure under any applicable law fulfilling obligations under article
183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or
184 | similar laws prohibiting or restricting circumvention of such
185 | measures.
186 | 
187 |   When you convey a covered work, you waive any legal power to forbid
188 | circumvention of technological measures to the extent such circumvention
189 | is effected by exercising rights under this License with respect to
190 | the covered work, and you disclaim any intention to limit operation or
191 | modification of the work as a means of enforcing, against the work's
192 | users, your or third parties' legal rights to forbid circumvention of
193 | technological measures.
194 | 
195 |   4. Conveying Verbatim Copies.
196 | 
197 |   You may convey verbatim copies of the Program's source code as you
198 | receive it, in any medium, provided that you conspicuously and
199 | appropriately publish on each copy an appropriate copyright notice;
200 | keep intact all notices stating that this License and any
201 | non-permissive terms added in accord with section 7 apply to the code;
202 | keep intact all notices of the absence of any warranty; and give all
203 | recipients a copy of this License along with the Program.
204 | 
205 |   You may charge any price or no price for each copy that you convey,
206 | and you may offer support or warranty protection for a fee.
207 | 
208 |   5. Conveying Modified Source Versions.
209 | 
210 |   You may convey a work based on the Program, or the modifications to
211 | produce it from the Program, in the form of source code under the
212 | terms of section 4, provided that you also meet all of these conditions:
213 | 
214 |     a) The work must carry prominent notices stating that you modified
215 |     it, and giving a relevant date.
216 | 
217 |     b) The work must carry prominent notices stating that it is
218 |     released under this License and any conditions added under section
219 |     7.  This requirement modifies the requirement in section 4 to
220 |     "keep intact all notices".
221 | 
222 |     c) You must license the entire work, as a whole, under this
223 |     License to anyone who comes into possession of a copy.  This
224 |     License will therefore apply, along with any applicable section 7
225 |     additional terms, to the whole of the work, and all its parts,
226 |     regardless of how they are packaged.  This License gives no
227 |     permission to license the work in any other way, but it does not
228 |     invalidate such permission if you have separately received it.
229 | 
230 |     d) If the work has interactive user interfaces, each must display
231 |     Appropriate Legal Notices; however, if the Program has interactive
232 |     interfaces that do not display Appropriate Legal Notices, your
233 |     work need not make them do so.
234 | 
235 |   A compilation of a covered work with other separate and independent
236 | works, which are not by their nature extensions of the covered work,
237 | and which are not combined with it such as to form a larger program,
238 | in or on a volume of a storage or distribution medium, is called an
239 | "aggregate" if the compilation and its resulting copyright are not
240 | used to limit the access or legal rights of the compilation's users
241 | beyond what the individual works permit.  Inclusion of a covered work
242 | in an aggregate does not cause this License to apply to the other
243 | parts of the aggregate.
244 | 
245 |   6. Conveying Non-Source Forms.
246 | 
247 |   You may convey a covered work in object code form under the terms
248 | of sections 4 and 5, provided that you also convey the
249 | machine-readable Corresponding Source under the terms of this License,
250 | in one of these ways:
251 | 
252 |     a) Convey the object code in, or embodied in, a physical product
253 |     (including a physical distribution medium), accompanied by the
254 |     Corresponding Source fixed on a durable physical medium
255 |     customarily used for software interchange.
256 | 
257 |     b) Convey the object code in, or embodied in, a physical product
258 |     (including a physical distribution medium), accompanied by a
259 |     written offer, valid for at least three years and valid for as
260 |     long as you offer spare parts or customer support for that product
261 |     model, to give anyone who possesses the object code either (1) a
262 |     copy of the Corresponding Source for all the software in the
263 |     product that is covered by this License, on a durable physical
264 |     medium customarily used for software interchange, for a price no
265 |     more than your reasonable cost of physically performing this
266 |     conveying of source, or (2) access to copy the
267 |     Corresponding Source from a network server at no charge.
268 | 
269 |     c) Convey individual copies of the object code with a copy of the
270 |     written offer to provide the Corresponding Source.  This
271 |     alternative is allowed only occasionally and noncommercially, and
272 |     only if you received the object code with such an offer, in accord
273 |     with subsection 6b.
274 | 
275 |     d) Convey the object code by offering access from a designated
276 |     place (gratis or for a charge), and offer equivalent access to the
277 |     Corresponding Source in the same way through the same place at no
278 |     further charge.  You need not require recipients to copy the
279 |     Corresponding Source along with the object code.  If the place to
280 |     copy the object code is a network server, the Corresponding Source
281 |     may be on a different server (operated by you or a third party)
282 |     that supports equivalent copying facilities, provided you maintain
283 |     clear directions next to the object code saying where to find the
284 |     Corresponding Source.  Regardless of what server hosts the
285 |     Corresponding Source, you remain obligated to ensure that it is
286 |     available for as long as needed to satisfy these requirements.
287 | 
288 |     e) Convey the object code using peer-to-peer transmission, provided
289 |     you inform other peers where the object code and Corresponding
290 |     Source of the work are being offered to the general public at no
291 |     charge under subsection 6d.
292 | 
293 |   A separable portion of the object code, whose source code is excluded
294 | from the Corresponding Source as a System Library, need not be
295 | included in conveying the object code work.
296 | 
297 |   A "User Product" is either (1) a "consumer product", which means any
298 | tangible personal property which is normally used for personal, family,
299 | or household purposes, or (2) anything designed or sold for incorporation
300 | into a dwelling.  In determining whether a product is a consumer product,
301 | doubtful cases shall be resolved in favor of coverage.  For a particular
302 | product received by a particular user, "normally used" refers to a
303 | typical or common use of that class of product, regardless of the status
304 | of the particular user or of the way in which the particular user
305 | actually uses, or expects or is expected to use, the product.  A product
306 | is a consumer product regardless of whether the product has substantial
307 | commercial, industrial or non-consumer uses, unless such uses represent
308 | the only significant mode of use of the product.
309 | 
310 |   "Installation Information" for a User Product means any methods,
311 | procedures, authorization keys, or other information required to install
312 | and execute modified versions of a covered work in that User Product from
313 | a modified version of its Corresponding Source.  The information must
314 | suffice to ensure that the continued functioning of the modified object
315 | code is in no case prevented or interfered with solely because
316 | modification has been made.
317 | 
318 |   If you convey an object code work under this section in, or with, or
319 | specifically for use in, a User Product, and the conveying occurs as
320 | part of a transaction in which the right of possession and use of the
321 | User Product is transferred to the recipient in perpetuity or for a
322 | fixed term (regardless of how the transaction is characterized), the
323 | Corresponding Source conveyed under this section must be accompanied
324 | by the Installation Information.  But this requirement does not apply
325 | if neither you nor any third party retains the ability to install
326 | modified object code on the User Product (for example, the work has
327 | been installed in ROM).
328 | 
329 |   The requirement to provide Installation Information does not include a
330 | requirement to continue to provide support service, warranty, or updates
331 | for a work that has been modified or installed by the recipient, or for
332 | the User Product in which it has been modified or installed.  Access to a
333 | network may be denied when the modification itself materially and
334 | adversely affects the operation of the network or violates the rules and
335 | protocols for communication across the network.
336 | 
337 |   Corresponding Source conveyed, and Installation Information provided,
338 | in accord with this section must be in a format that is publicly
339 | documented (and with an implementation available to the public in
340 | source code form), and must require no special password or key for
341 | unpacking, reading or copying.
342 | 
343 |   7. Additional Terms.
344 | 
345 |   "Additional permissions" are terms that supplement the terms of this
346 | License by making exceptions from one or more of its conditions.
347 | Additional permissions that are applicable to the entire Program shall
348 | be treated as though they were included in this License, to the extent
349 | that they are valid under applicable law.  If additional permissions
350 | apply only to part of the Program, that part may be used separately
351 | under those permissions, but the entire Program remains governed by
352 | this License without regard to the additional permissions.
353 | 
354 |   When you convey a copy of a covered work, you may at your option
355 | remove any additional permissions from that copy, or from any part of
356 | it.  (Additional permissions may be written to require their own
357 | removal in certain cases when you modify the work.)  You may place
358 | additional permissions on material, added by you to a covered work,
359 | for which you have or can give appropriate copyright permission.
360 | 
361 |   Notwithstanding any other provision of this License, for material you
362 | add to a covered work, you may (if authorized by the copyright holders of
363 | that material) supplement the terms of this License with terms:
364 | 
365 |     a) Disclaiming warranty or limiting liability differently from the
366 |     terms of sections 15 and 16 of this License; or
367 | 
368 |     b) Requiring preservation of specified reasonable legal notices or
369 |     author attributions in that material or in the Appropriate Legal
370 |     Notices displayed by works containing it; or
371 | 
372 |     c) Prohibiting misrepresentation of the origin of that material, or
373 |     requiring that modified versions of such material be marked in
374 |     reasonable ways as different from the original version; or
375 | 
376 |     d) Limiting the use for publicity purposes of names of licensors or
377 |     authors of the material; or
378 | 
379 |     e) Declining to grant rights under trademark law for use of some
380 |     trade names, trademarks, or service marks; or
381 | 
382 |     f) Requiring indemnification of licensors and authors of that
383 |     material by anyone who conveys the material (or modified versions of
384 |     it) with contractual assumptions of liability to the recipient, for
385 |     any liability that these contractual assumptions directly impose on
386 |     those licensors and authors.
387 | 
388 |   All other non-permissive additional terms are considered "further
389 | restrictions" within the meaning of section 10.  If the Program as you
390 | received it, or any part of it, contains a notice stating that it is
391 | governed by this License along with a term that is a further
392 | restriction, you may remove that term.  If a license document contains
393 | a further restriction but permits relicensing or conveying under this
394 | License, you may add to a covered work material governed by the terms
395 | of that license document, provided that the further restriction does
396 | not survive such relicensing or conveying.
397 | 
398 |   If you add terms to a covered work in accord with this section, you
399 | must place, in the relevant source files, a statement of the
400 | additional terms that apply to those files, or a notice indicating
401 | where to find the applicable terms.
402 | 
403 |   Additional terms, permissive or non-permissive, may be stated in the
404 | form of a separately written license, or stated as exceptions;
405 | the above requirements apply either way.
406 | 
407 |   8. Termination.
408 | 
409 |   You may not propagate or modify a covered work except as expressly
410 | provided under this License.  Any attempt otherwise to propagate or
411 | modify it is void, and will automatically terminate your rights under
412 | this License (including any patent licenses granted under the third
413 | paragraph of section 11).
414 | 
415 |   However, if you cease all violation of this License, then your
416 | license from a particular copyright holder is reinstated (a)
417 | provisionally, unless and until the copyright holder explicitly and
418 | finally terminates your license, and (b) permanently, if the copyright
419 | holder fails to notify you of the violation by some reasonable means
420 | prior to 60 days after the cessation.
421 | 
422 |   Moreover, your license from a particular copyright holder is
423 | reinstated permanently if the copyright holder notifies you of the
424 | violation by some reasonable means, this is the first time you have
425 | received notice of violation of this License (for any work) from that
426 | copyright holder, and you cure the violation prior to 30 days after
427 | your receipt of the notice.
428 | 
429 |   Termination of your rights under this section does not terminate the
430 | licenses of parties who have received copies or rights from you under
431 | this License.  If your rights have been terminated and not permanently
432 | reinstated, you do not qualify to receive new licenses for the same
433 | material under section 10.
434 | 
435 |   9. Acceptance Not Required for Having Copies.
436 | 
437 |   You are not required to accept this License in order to receive or
438 | run a copy of the Program.  Ancillary propagation of a covered work
439 | occurring solely as a consequence of using peer-to-peer transmission
440 | to receive a copy likewise does not require acceptance.  However,
441 | nothing other than this License grants you permission to propagate or
442 | modify any covered work.  These actions infringe copyright if you do
443 | not accept this License.  Therefore, by modifying or propagating a
444 | covered work, you indicate your acceptance of this License to do so.
445 | 
446 |   10. Automatic Licensing of Downstream Recipients.
447 | 
448 |   Each time you convey a covered work, the recipient automatically
449 | receives a license from the original licensors, to run, modify and
450 | propagate that work, subject to this License.  You are not responsible
451 | for enforcing compliance by third parties with this License.
452 | 
453 |   An "entity transaction" is a transaction transferring control of an
454 | organization, or substantially all assets of one, or subdividing an
455 | organization, or merging organizations.  If propagation of a covered
456 | work results from an entity transaction, each party to that
457 | transaction who receives a copy of the work also receives whatever
458 | licenses to the work the party's predecessor in interest had or could
459 | give under the previous paragraph, plus a right to possession of the
460 | Corresponding Source of the work from the predecessor in interest, if
461 | the predecessor has it or can get it with reasonable efforts.
462 | 
463 |   You may not impose any further restrictions on the exercise of the
464 | rights granted or affirmed under this License.  For example, you may
465 | not impose a license fee, royalty, or other charge for exercise of
466 | rights granted under this License, and you may not initiate litigation
467 | (including a cross-claim or counterclaim in a lawsuit) alleging that
468 | any patent claim is infringed by making, using, selling, offering for
469 | sale, or importing the Program or any portion of it.
470 | 
471 |   11. Patents.
472 | 
473 |   A "contributor" is a copyright holder who authorizes use under this
474 | License of the Program or a work on which the Program is based.  The
475 | work thus licensed is called the contributor's "contributor version".
476 | 
477 |   A contributor's "essential patent claims" are all patent claims
478 | owned or controlled by the contributor, whether already acquired or
479 | hereafter acquired, that would be infringed by some manner, permitted
480 | by this License, of making, using, or selling its contributor version,
481 | but do not include claims that would be infringed only as a
482 | consequence of further modification of the contributor version.  For
483 | purposes of this definition, "control" includes the right to grant
484 | patent sublicenses in a manner consistent with the requirements of
485 | this License.
486 | 
487 |   Each contributor grants you a non-exclusive, worldwide, royalty-free
488 | patent license under the contributor's essential patent claims, to
489 | make, use, sell, offer for sale, import and otherwise run, modify and
490 | propagate the contents of its contributor version.
491 | 
492 |   In the following three paragraphs, a "patent license" is any express
493 | agreement or commitment, however denominated, not to enforce a patent
494 | (such as an express permission to practice a patent or covenant not to
495 | sue for patent infringement).  To "grant" such a patent license to a
496 | party means to make such an agreement or commitment not to enforce a
497 | patent against the party.
498 | 
499 |   If you convey a covered work, knowingly relying on a patent license,
500 | and the Corresponding Source of the work is not available for anyone
501 | to copy, free of charge and under the terms of this License, through a
502 | publicly available network server or other readily accessible means,
503 | then you must either (1) cause the Corresponding Source to be so
504 | available, or (2) arrange to deprive yourself of the benefit of the
505 | patent license for this particular work, or (3) arrange, in a manner
506 | consistent with the requirements of this License, to extend the patent
507 | license to downstream recipients.  "Knowingly relying" means you have
508 | actual knowledge that, but for the patent license, your conveying the
509 | covered work in a country, or your recipient's use of the covered work
510 | in a country, would infringe one or more identifiable patents in that
511 | country that you have reason to believe are valid.
512 | 
513 |   If, pursuant to or in connection with a single transaction or
514 | arrangement, you convey, or propagate by procuring conveyance of, a
515 | covered work, and grant a patent license to some of the parties
516 | receiving the covered work authorizing them to use, propagate, modify
517 | or convey a specific copy of the covered work, then the patent license
518 | you grant is automatically extended to all recipients of the covered
519 | work and works based on it.
520 | 
521 |   A patent license is "discriminatory" if it does not include within
522 | the scope of its coverage, prohibits the exercise of, or is
523 | conditioned on the non-exercise of one or more of the rights that are
524 | specifically granted under this License.  You may not convey a covered
525 | work if you are a party to an arrangement with a third party that is
526 | in the business of distributing software, under which you make payment
527 | to the third party based on the extent of your activity of conveying
528 | the work, and under which the third party grants, to any of the
529 | parties who would receive the covered work from you, a discriminatory
530 | patent license (a) in connection with copies of the covered work
531 | conveyed by you (or copies made from those copies), or (b) primarily
532 | for and in connection with specific products or compilations that
533 | contain the covered work, unless you entered into that arrangement,
534 | or that patent license was granted, prior to 28 March 2007.
535 | 
536 |   Nothing in this License shall be construed as excluding or limiting
537 | any implied license or other defenses to infringement that may
538 | otherwise be available to you under applicable patent law.
539 | 
540 |   12. No Surrender of Others' Freedom.
541 | 
542 |   If conditions are imposed on you (whether by court order, agreement or
543 | otherwise) that contradict the conditions of this License, they do not
544 | excuse you from the conditions of this License.  If you cannot convey a
545 | covered work so as to satisfy simultaneously your obligations under this
546 | License and any other pertinent obligations, then as a consequence you may
547 | not convey it at all.  For example, if you agree to terms that obligate you
548 | to collect a royalty for further conveying from those to whom you convey
549 | the Program, the only way you could satisfy both those terms and this
550 | License would be to refrain entirely from conveying the Program.
551 | 
552 |   13. Use with the GNU Affero General Public License.
553 | 
554 |   Notwithstanding any other provision of this License, you have
555 | permission to link or combine any covered work with a work licensed
556 | under version 3 of the GNU Affero General Public License into a single
557 | combined work, and to convey the resulting work.  The terms of this
558 | License will continue to apply to the part which is the covered work,
559 | but the special requirements of the GNU Affero General Public License,
560 | section 13, concerning interaction through a network will apply to the
561 | combination as such.
562 | 
563 |   14. Revised Versions of this License.
564 | 
565 |   The Free Software Foundation may publish revised and/or new versions of
566 | the GNU General Public License from time to time.  Such new versions will
567 | be similar in spirit to the present version, but may differ in detail to
568 | address new problems or concerns.
569 | 
570 |   Each version is given a distinguishing version number.  If the
571 | Program specifies that a certain numbered version of the GNU General
572 | Public License "or any later version" applies to it, you have the
573 | option of following the terms and conditions either of that numbered
574 | version or of any later version published by the Free Software
575 | Foundation.  If the Program does not specify a version number of the
576 | GNU General Public License, you may choose any version ever published
577 | by the Free Software Foundation.
578 | 
579 |   If the Program specifies that a proxy can decide which future
580 | versions of the GNU General Public License can be used, that proxy's
581 | public statement of acceptance of a version permanently authorizes you
582 | to choose that version for the Program.
583 | 
584 |   Later license versions may give you additional or different
585 | permissions.  However, no additional obligations are imposed on any
586 | author or copyright holder as a result of your choosing to follow a
587 | later version.
588 | 
589 |   15. Disclaimer of Warranty.
590 | 
591 |   THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
592 | APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
596 | PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
597 | IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
599 | 
600 |   16. Limitation of Liability.
601 | 
602 |   IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
610 | SUCH DAMAGES.
611 | 
612 |   17. Interpretation of Sections 15 and 16.
613 | 
614 |   If the disclaimer of warranty and limitation of liability provided
615 | above cannot be given local legal effect according to their terms,
616 | reviewing courts shall apply local law that most closely approximates
617 | an absolute waiver of all civil liability in connection with the
618 | Program, unless a warranty or assumption of liability accompanies a
619 | copy of the Program in return for a fee.
620 | 
621 |                      END OF TERMS AND CONDITIONS
622 | 
623 |             How to Apply These Terms to Your New Programs
624 | 
625 |   If you develop a new program, and you want it to be of the greatest
626 | possible use to the public, the best way to achieve this is to make it
627 | free software which everyone can redistribute and change under these terms.
628 | 
629 |   To do so, attach the following notices to the program.  It is safest
630 | to attach them to the start of each source file to most effectively
631 | state the exclusion of warranty; and each file should have at least
632 | the "copyright" line and a pointer to where the full notice is found.
633 | 
634 |     <one line to give the program's name and a brief idea of what it does.>
635 |     Copyright (C) <year>  <name of author>
636 | 
637 |     This program is free software: you can redistribute it and/or modify
638 |     it under the terms of the GNU General Public License as published by
639 |     the Free Software Foundation, either version 3 of the License, or
640 |     (at your option) any later version.
641 | 
642 |     This program is distributed in the hope that it will be useful,
643 |     but WITHOUT ANY WARRANTY; without even the implied warranty of
644 |     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
645 |     GNU General Public License for more details.
646 | 
647 |     You should have received a copy of the GNU General Public License
648 |     along with this program.  If not, see <https://www.gnu.org/licenses/>.
649 | 
650 | Also add information on how to contact you by electronic and paper mail.
651 | 
652 |   If the program does terminal interaction, make it output a short
653 | notice like this when it starts in an interactive mode:
654 | 
655 |     <program>  Copyright (C) <year>  <name of author>
656 |     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
657 |     This is free software, and you are welcome to redistribute it
658 |     under certain conditions; type `show c' for details.
659 | 
660 | The hypothetical commands `show w' and `show c' should show the appropriate
661 | parts of the General Public License.  Of course, your program's commands
662 | might be different; for a GUI interface, you would use an "about box".
663 | 
664 |   You should also get your employer (if you work as a programmer) or school,
665 | if any, to sign a "copyright disclaimer" for the program, if necessary.
666 | For more information on this, and how to apply and follow the GNU GPL, see
667 | <https://www.gnu.org/licenses/>.
668 | 
669 |   The GNU General Public License does not permit incorporating your program
670 | into proprietary programs.  If your program is a subroutine library, you
671 | may consider it more useful to permit linking proprietary applications with
672 | the library.  If this is what you want to do, use the GNU Lesser General
673 | Public License instead of this License.  But first, please read
674 | <https://www.gnu.org/licenses/why-not-lgpl.html>.
675 | 


--------------------------------------------------------------------------------