pricing-full.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. <!DOCTYPE html>
  2. <html lang="vi">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Model Catalog & Pricing — DoTouch.AI</title>
  7. <link rel="stylesheet" href="style.css">
  8. <style>
  9. .cat-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
  10. .cat-tab { border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:999px; padding:8px 18px; font-size:13.5px; cursor:pointer; font-family:inherit; }
  11. .cat-tab.active { border-color:var(--purple); color:#fff; background:rgba(124,92,255,.2); }
  12. .cat-panel { display:none; }
  13. .cat-panel.active { display:block; }
  14. .verified { font-size:11px; color:var(--green-l); background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.3); padding:1px 8px; border-radius:999px; margin-left:8px; }
  15. details.cat-group { background:var(--card); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; }
  16. details.cat-group summary { padding:14px 18px; cursor:pointer; font-weight:600; font-size:14px; color:var(--purple-l); }
  17. details.cat-group[open] summary { border-bottom:1px solid var(--border); }
  18. details.cat-group .g-body { padding:12px 18px 16px; font-size:12.5px; color:var(--muted); line-height:2; }
  19. details.cat-group .g-body code { background:rgba(124,92,255,.1); padding:1px 6px; border-radius:4px; color:var(--text); font-size:12px; }
  20. .price-tag { font-size:11px; color:var(--gold); }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="dev-note">v1.1.0 · 模型大全定价子页面 · 236 模型全量接入 · 货币随语言切换</div>
  25. <header>
  26. <div class="wrap nav">
  27. <a class="nav-logo" href="index.html">
  28. <svg viewBox="0 0 460 120" xmlns="http://www.w3.org/2000/svg">
  29. <defs><linearGradient id="g1" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9B7BFF"/><stop offset="1" stop-color="#5C3DF0"/></linearGradient></defs>
  30. <g transform="translate(0,6) scale(0.92)"><circle cx="50" cy="50" r="33" stroke="rgba(124,92,255,.3)" stroke-width="1.5" stroke-dasharray="2 7" fill="none"/><g stroke="#00E5A0" stroke-width="1.8" opacity=".55"><line x1="50" y1="50" x2="76" y2="26"/><line x1="50" y1="50" x2="26" y2="76"/><line x1="50" y1="50" x2="78" y2="75"/></g><circle cx="50" cy="50" r="12" stroke="rgba(124,92,255,.4)" fill="none"/><circle cx="50" cy="50" r="7.5" fill="url(#g1)"/><circle cx="76" cy="26" r="4" fill="#00E5A0"/><circle cx="26" cy="76" r="4" fill="#00E5A0"/><circle cx="78" cy="75" r="4" fill="#00E5A0"/></g>
  31. <text x="128" y="78" font-size="50" font-weight="700" fill="#E8ECF8" font-family="inherit">DoTouch</text><text x="348" y="78" font-size="50" font-weight="700" fill="url(#g1)" font-family="inherit">.AI</text>
  32. </svg>
  33. </a>
  34. <nav class="nav-links">
  35. <a href="index.html" data-i18n="nav_home">Trang chủ</a>
  36. <a href="models.html" data-i18n="nav_models">Models</a>
  37. <a href="pricing.html" data-i18n="nav_pricing">Pricing</a>
  38. <a href="docs.html" data-i18n="nav_docs_ops">Hướng dẫn</a>
  39. <a href="../console-v1.0.0/user-console.html" data-i18n="nav_console">Console</a>
  40. </nav>
  41. <div class="nav-right">
  42. <div class="lang-switch">
  43. <button class="lang-btn active" data-lang="vi">VI</button><button class="lang-btn" data-lang="en">EN</button><button class="lang-btn" data-lang="zh-CN">简</button><button class="lang-btn" data-lang="zh-TW">繁</button>
  44. </div>
  45. <a class="btn btn-sm" href="#" data-open-auth="login" data-i18n="nav_login">Đăng nhập</a>
  46. <a class="btn btn-primary btn-sm" href="#" data-open-auth="register" data-i18n="nav_signup">Bắt đầu</a>
  47. </div>
  48. </div>
  49. </header>
  50. <div class="wrap">
  51. <div class="crumbs"><a href="index.html" data-i18n="crumb_home">Trang chủ</a><span class="sep">/</span><a href="pricing.html" data-i18n="nav_pricing">Bảng giá</a><span class="sep">/</span><b>Model Catalog</b></div>
  52. <div class="page-hero">
  53. <h1>Model Catalog · 236 models <span class="tag tag-purple">Alibaba Cloud DashScope</span></h1>
  54. <p>Toàn bộ 236 mô hình đang bán trên DashScope đã được quét và đưa vào nền tảng (2026-08-08). Giá hiển thị = giá DashScope × 0.7. <span class="verified">✓ giá đã xác minh</span> = nguồn chính thức.</p>
  55. </div>
  56. <div class="rate-box" data-i18n="rate_note">Tỷ giá tham khảo: 1 USD ≈ 25.400₫ (cập nhật tự động khi nạp tiền)</div>
  57. <!-- 分类 tabs -->
  58. <div class="cat-tabs" style="margin-top:24px;">
  59. <button class="cat-tab active" data-cat="chat">💬 Text Generation (150+)</button>
  60. <button class="cat-tab" data-cat="vision">👁️ Vision (20)</button>
  61. <button class="cat-tab" data-cat="image">🎨 Image (15)</button>
  62. <button class="cat-tab" data-cat="speech">🎙️ Speech (30)</button>
  63. </div>
  64. <!-- ══ 对话/推理 ══ -->
  65. <div class="cat-panel active" id="cat-chat">
  66. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Text Generation — mô hình được đề xuất</h2>
  67. <div class="table-wrap">
  68. <table class="data">
  69. <thead><tr><th>Model</th><th>Context</th><th>Input / 1M</th><th>Output / 1M</th><th>Capabilities</th></tr></thead>
  70. <tbody>
  71. <tr><td><b>qwen3.8-max</b> <span class="tag tag-purple">Flagship</span></td><td class="price">1M</td><td class="price"><span class="price-usd" data-usd="2.10">$2.10</span></td><td class="price"><span class="price-usd" data-usd="8.40">$8.40</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span><span class="tag tag-green">Tools</span><span class="tag tag-green">JSON</span></td></tr>
  72. <tr><td><b>qwen3.7-plus</b> <span class="tag tag-purple">Balanced</span></td><td class="price">1M</td><td class="price"><span class="price-usd" data-usd="0.42">$0.42</span></td><td class="price"><span class="price-usd" data-usd="1.68">$1.68</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span><span class="tag tag-green">Tools</span><span class="tag tag-green">JSON</span></td></tr>
  73. <tr><td><b>qwen3.7-flash</b> <span class="tag tag-green">Light</span></td><td class="price">1M</td><td class="price"><span class="price-usd" data-usd="0.14">$0.14</span></td><td class="price"><span class="price-usd" data-usd="0.56">$0.56</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span><span class="tag tag-green">Tools</span><span class="tag tag-green">JSON</span></td></tr>
  74. <tr><td><b>deepseek-v4-pro</b> <span class="tag tag-gold">Reasoning</span> <span class="verified">✓ verified</span></td><td class="price">1M</td><td class="price"><span class="price-usd" data-usd="0.42">$0.42</span></td><td class="price"><span class="price-usd" data-usd="0.84">$0.84</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span></td></tr>
  75. <tr><td><b>deepseek-v4-flash</b> <span class="tag tag-green">Best Value</span> <span class="verified">✓ verified</span></td><td class="price">1M</td><td class="price"><span class="price-usd" data-usd="0.14">$0.14</span></td><td class="price"><span class="price-usd" data-usd="0.28">$0.28</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span></td></tr>
  76. <tr><td><b>glm-5.2</b> <span class="tag tag-purple">Zhipu</span></td><td class="price">1M</td><td class="price"><span class="price-usd" data-usd="0.98">$0.98</span></td><td class="price"><span class="price-usd" data-usd="3.08">$3.08</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span><span class="tag tag-green">JSON</span></td></tr>
  77. <tr><td><b>kimi-k2.7-code</b> <span class="tag tag-gold">Coding</span></td><td class="price">256K</td><td class="price"><span class="price-usd" data-usd="0.70">$0.70</span></td><td class="price"><span class="price-usd" data-usd="2.80">$2.80</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span></td></tr>
  78. <tr><td><b>MiniMax-M3</b> <span class="tag tag-gray">MiniMax</span></td><td class="price">192K</td><td class="price"><span class="price-usd" data-usd="0.42">$0.42</span></td><td class="price"><span class="price-usd" data-usd="1.68">$1.68</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span></td></tr>
  79. <tr><td><b>mimo-v2.5-pro</b> <span class="tag tag-gray">Xiaomi</span></td><td class="price">1M</td><td class="price"><span class="price-usd" data-usd="0.28">$0.28</span></td><td class="price"><span class="price-usd" data-usd="1.12">$1.12</span></td><td><span class="tag tag-green">Think</span><span class="tag tag-green">FC</span><span class="tag tag-green">JSON</span></td></tr>
  80. <tr><td><b>qwen-long</b> <span class="tag tag-gray">10M ctx</span></td><td class="price">10M</td><td class="price"><span class="price-usd" data-usd="0.28">$0.28</span></td><td class="price"><span class="price-usd" data-usd="1.12">$1.12</span></td><td><span class="tag tag-green">JSON</span></td></tr>
  81. </tbody>
  82. </table>
  83. </div>
  84. <p style="color:var(--muted);font-size:12.5px;margin-top:10px;">* Giá chưa có dấu ✓ là giá tạm tính (placeholder), chờ xác nhận từ bảng điều khiển DashScope. Toàn bộ mô hình đều có thể đặt giá qua Admin Panel.</p>
  85. <details class="cat-group" open>
  86. <summary>Qwen 系列(旗舰/快照/开源)— 60+</summary>
  87. <div class="g-body">
  88. <b>旗舰与快照:</b> <code>qwen3.8-max</code> <code>qwen3.7-max</code> <code>qwen3.7-plus</code> <code>qwen3.7-flash</code> <code>qwen3.6-max-preview</code> <code>qwen3.6-plus</code> <code>qwen3.6-flash</code> <code>qwen3.5-plus</code> <code>qwen3.5-flash</code> <code>qwen3-max</code> <code>qwen-max</code> <code>qwen-plus</code> <code>qwen-turbo</code> <code>qwen-flash</code>(含各日期快照版本)<br>
  89. <b>开源(instruct/thinking):</b> <code>qwen3-235b-a22b</code> <code>qwen3-next-80b-a3b</code> <code>qwen3-32b</code> <code>qwen3-30b-a3b</code> <code>qwen3-14b</code> <code>qwen3-8b</code> <code>qwen3.5-397b-a17b</code> <code>qwen3.5-122b-a10b</code> <code>qwen3.5-35b-a3b</code> <code>qwen2.5-*</code> <code>qwen2-*</code> <code>qwen1.5-*</code><br>
  90. <b>Coder:</b> <code>qwen3-coder-plus</code> <code>qwen3-coder-flash</code> <code>qwen3-coder-next</code> <code>qwen3-coder-480b-a35b-instruct</code> <code>qwen-coder-plus</code> <code>qwen-coder-turbo</code><br>
  91. <b>专用:</b> <code>qwen-long</code>(10M) <code>qwen-mt-plus/turbo/flash/lite</code>(翻译) <code>qwen-plus-character</code> <code>qwen-flash-character</code>(角色扮演) <code>qwq-plus</code> <code>qvq-max</code>(推理)
  92. </div>
  93. </details>
  94. <details class="cat-group">
  95. <summary>DeepSeek 系列 — 15+</summary>
  96. <div class="g-body">
  97. <code>deepseek-v4-pro</code> <code>deepseek-v4-flash</code> <code>deepseek-v4-flash-0731</code> <code>deepseek-v3.2</code> <code>deepseek-v3.2-exp</code> <code>deepseek-v3.1</code> <code>deepseek-v3</code> <code>deepseek-r1</code> <code>deepseek-r1-distill-llama-70b/8b</code> <code>deepseek-r1-distill-qwen-1.5b/7b/14b/32b</code> <code>siliconflow/deepseek-v3-0324</code> <code>siliconflow/deepseek-v3.1-terminus</code> <code>siliconflow/deepseek-v3.2</code> <code>vanchin/deepseek-v3</code> <code>vanchin/deepseek-v3.1-terminus</code> <code>vanchin/deepseek-v3.2-think</code>
  98. </div>
  99. </details>
  100. <details class="cat-group">
  101. <summary>三方模型:GLM / Kimi / MiniMax / Xiaomi — 15+</summary>
  102. <div class="g-body">
  103. <b>Zhipu GLM:</b> <code>glm-5.2</code> <code>glm-5.2-fast-preview</code> <code>glm-5.1</code> <code>glm-5</code> <code>glm-4.7</code><br>
  104. <b>Moonshot Kimi:</b> <code>kimi/kimi-k3</code> <code>kimi-k2.7-code</code> <code>kimi/kimi-k2.7-code</code> <code>kimi/kimi-k2.7-code-highspeed</code> <code>kimi-k2.6</code> <code>kimi/kimi-k2.6</code> <code>kimi-k2.5</code> <code>kimi/kimi-k2.5</code> <code>kimi-k2-thinking</code><br>
  105. <b>MiniMax:</b> <code>MiniMax-M3</code> <code>MiniMax/MiniMax-M3</code> <code>MiniMax-M2.7</code> <code>MiniMax/MiniMax-M2.7</code> <code>MiniMax-M2.5</code> <code>MiniMax/MiniMax-M2.5</code> <code>MiniMax-M2.1</code> <code>MiniMax/MiniMax-M2.1</code><br>
  106. <b>Xiaomi:</b> <code>xiaomi/mimo-v2.5-pro</code>
  107. </div>
  108. </details>
  109. </div>
  110. <!-- ══ 视觉 ══ -->
  111. <div class="cat-panel" id="cat-vision">
  112. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Vision Understanding</h2>
  113. <div class="table-wrap">
  114. <table class="data">
  115. <thead><tr><th>Model</th><th>Context</th><th>Input / 1M</th><th>Output / 1M</th><th>Notes</th></tr></thead>
  116. <tbody>
  117. <tr><td><b>qwen-vl-max</b> <span class="tag tag-purple">Flagship</span></td><td class="price">128K</td><td class="price"><span class="price-usd" data-usd="1.40">$1.40</span></td><td class="price"><span class="price-usd" data-usd="4.20">$4.20</span></td><td style="color:var(--muted);">Hình ảnh + văn bản</td></tr>
  118. <tr><td><b>qwen-vl-plus</b> <span class="tag tag-green">Value</span></td><td class="price">128K</td><td class="price"><span class="price-usd" data-usd="0.28">$0.28</span></td><td class="price"><span class="price-usd" data-usd="0.84">$0.84</span></td><td style="color:var(--muted);">Hình ảnh + văn bản</td></tr>
  119. <tr><td><b>qwen-vl-ocr</b> <span class="tag tag-gray">OCR</span></td><td class="price">—</td><td class="price"><span class="price-usd" data-usd="0.14">$0.14</span></td><td class="price"><span class="price-usd" data-usd="0.42">$0.42</span></td><td style="color:var(--muted);">Nhận dạng văn bản hình ảnh</td></tr>
  120. <tr><td><b>qwen3.5-omni-plus</b> <span class="tag tag-purple">Omni</span></td><td class="price">32K</td><td class="price"><span class="price-usd" data-usd="2.10">$2.10</span></td><td class="price"><span class="price-usd" data-usd="8.40">$8.40</span></td><td style="color:var(--muted);">Đa phương thức</td></tr>
  121. </tbody>
  122. </table>
  123. </div>
  124. <details class="cat-group" open>
  125. <summary>Toàn bộ Vision (~20)</summary>
  126. <div class="g-body">
  127. <code>qwen-vl-max</code> <code>qwen-vl-plus</code> <code>qwen-vl-ocr</code> <code>qwen-vl-ocr-latest</code> <code>qwen-omni-turbo</code> <code>qwen3.5-omni-plus</code> <code>qwen3.8-max</code>(đa phương thức) <code>qwen3.7-plus</code> <code>qwen3.7-flash</code> <code>gui-plus</code> + các phiên bản snapshot
  128. </div>
  129. </details>
  130. </div>
  131. <!-- ══ 图像 ══ -->
  132. <div class="cat-panel" id="cat-image">
  133. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Image Generation — tính phí theo ảnh</h2>
  134. <div class="table-wrap">
  135. <table class="data">
  136. <thead><tr><th>Model</th><th>Giá / ảnh (placeholder)</th><th>Notes</th></tr></thead>
  137. <tbody>
  138. <tr><td><b>qwen-image-3.0</b> <span class="tag tag-purple">Flagship</span></td><td class="price"><span class="price-usd" data-usd="0.14">$0.14</span></td><td style="color:var(--muted);">1K · tính theo độ phân giải</td></tr>
  139. <tr><td><b>qwen-image-3.0-pro</b> <span class="tag tag-purple">Pro</span></td><td class="price"><span class="price-usd" data-usd="0.28">$0.28</span></td><td style="color:var(--muted);">2K · tính theo độ phân giải</td></tr>
  140. <tr><td><b>qwen-image-2.0</b> <span class="tag tag-green">Value</span></td><td class="price"><span class="price-usd" data-usd="0.07">$0.07</span></td><td style="color:var(--muted);">512/1024</td></tr>
  141. <tr><td><b>qwen-image-edit-plus</b> <span class="tag tag-gray">Edit</span></td><td class="price"><span class="price-usd" data-usd="0.07">$0.07</span></td><td style="color:var(--muted);">Chỉnh sửa ảnh</td></tr>
  142. </tbody>
  143. </table>
  144. </div>
  145. <details class="cat-group" open>
  146. <summary>Toàn bộ Image (~15)</summary>
  147. <div class="g-body">
  148. <code>qwen-image-3.0</code> <code>qwen-image-3.0-pro</code> <code>qwen-image-2.0</code> <code>qwen-image-2.0-pro</code>(2026-03-03 / 04-22 / 06-22) <code>qwen-image-max</code> <code>qwen-image-max-2025-12-30</code> <code>qwen-image-plus-2026-01-09</code> <code>qwen-image-edit-max</code>(2026-01-16) <code>qwen-image-edit-plus</code>(2025-10-30 / 12-15)
  149. </div>
  150. </details>
  151. </div>
  152. <!-- ══ 语音 ══ -->
  153. <div class="cat-panel" id="cat-speech">
  154. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Speech — TTS theo ký tự / ASR theo giây</h2>
  155. <div class="table-wrap">
  156. <table class="data">
  157. <thead><tr><th>Model</th><th>Loại</th><th>Đơn giá (placeholder)</th></tr></thead>
  158. <tbody>
  159. <tr><td><b>qwen-tts</b> <span class="tag tag-purple">TTS</span></td><td style="color:var(--muted);">Tổng hợp giọng nói</td><td class="price"><span class="price-usd" data-usd="0.0014">$0.0014</span>/char</td></tr>
  160. <tr><td><b>qwen3-asr-flash</b> <span class="tag tag-green">ASR</span></td><td style="color:var(--muted);">Nhận dạng giọng nói</td><td class="price"><span class="price-usd" data-usd="0.00028">$0.00028</span>/giây</td></tr>
  161. <tr><td><b>MiniMax/speech-2.8-hd</b> <span class="tag tag-gray">TTS</span></td><td style="color:var(--muted);">Giọng nói chất lượng cao</td><td class="price"><span class="price-usd" data-usd="0.0021">$0.0021</span>/char</td></tr>
  162. </tbody>
  163. </table>
  164. </div>
  165. <details class="cat-group" open>
  166. <summary>Toàn bộ Speech (~30)</summary>
  167. <div class="g-body">
  168. <b>TTS:</b> <code>qwen-tts-2025-05-22</code> <code>MiniMax/speech-02-hd</code> <code>MiniMax/speech-02-turbo</code> <code>MiniMax/speech-2.8-hd</code> <code>MiniMax/speech-2.8-turbo</code><br>
  169. <b>ASR:</b> <code>fun-asr-flash-2026-06-15</code> <code>qwen-audio-3.0-asr-flash</code> <code>qwen3-asr-flash</code>(+realtime 2025-10-27 / 2026-02-10)<br>
  170. <b>Realtime/其他:</b> <code>qwen-audio-3.0-realtime-flash/plus</code> <code>qwen3-livetranslate-flash</code>(+realtime/snapshot)
  171. </div>
  172. </details>
  173. </div>
  174. <!-- 收费方式 -->
  175. <section>
  176. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Chính sách thanh toán & giá ưu đãi</h2>
  177. <div class="grid3">
  178. <div class="card"><b style="color:var(--purple-l);">70% giá Trung Quốc</b><p style="font-size:13px;color:var(--muted);margin-top:6px;">Mọi giá = giá DashScope × 0.7. Mô hình có cache-hit sẽ có thêm giá cache rẻ hơn.</p></div>
  179. <div class="card"><b style="color:var(--purple-l);">Trả trước, tính theo token</b><p style="font-size:13px;color:var(--muted);margin-top:6px;">Text: input/output riêng. Image: theo ảnh/độ phân giải. Speech: theo ký tự/giây.</p></div>
  180. <div class="card"><b style="color:var(--purple-l);">Đặt giá qua Admin</b><p style="font-size:13px;color:var(--muted);margin-top:6px;">Toàn bộ 236 mô hình đặt giá theo danh mục; mô hình chưa định giá hiển thị "pending".</p></div>
  181. </div>
  182. </section>
  183. </div>
  184. <footer>
  185. <div class="wrap">
  186. <div class="foot-grid">
  187. <div class="foot-brand">
  188. <svg viewBox="0 0 460 120" width="140" xmlns="http://www.w3.org/2000/svg">
  189. <defs><linearGradient id="fg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9B7BFF"/><stop offset="1" stop-color="#5C3DF0"/></linearGradient></defs>
  190. <g transform="translate(0,6) scale(0.92)"><circle cx="50" cy="50" r="33" stroke="rgba(124,92,255,.3)" stroke-width="1.5" stroke-dasharray="2 7" fill="none"/><g stroke="#00E5A0" stroke-width="1.8" opacity=".55"><line x1="50" y1="50" x2="76" y2="26"/><line x1="50" y1="50" x2="26" y2="76"/><line x1="50" y1="50" x2="78" y2="75"/></g><circle cx="50" cy="50" r="7.5" fill="url(#fg)"/><circle cx="76" cy="26" r="4" fill="#00E5A0"/><circle cx="26" cy="76" r="4" fill="#00E5A0"/><circle cx="78" cy="75" r="4" fill="#00E5A0"/></g>
  191. <text x="128" y="78" font-size="50" font-weight="700" fill="#E8ECF8" font-family="inherit">DoTouch</text><text x="348" y="78" font-size="50" font-weight="700" fill="url(#fg)" font-family="inherit">.AI</text>
  192. </svg>
  193. <p data-i18n="foot_p">AI Trung Quốc giá rẻ cho lập trình viên và doanh nghiệp nhỏ trên toàn thế giới.</p>
  194. </div>
  195. <div class="foot-col"><h4 data-i18n="foot_product">Sản phẩm</h4><a href="models.html" data-i18n="nav_models">Mô hình</a><a href="pricing.html" data-i18n="nav_pricing">Bảng giá</a><a href="#" data-i18n="foot_console">Console</a><a href="#" data-i18n="foot_status">Trạng thái</a></div>
  196. <div class="foot-col"><h4 data-i18n="foot_dev">Nhà phát triển</h4><a href="docs.html" data-i18n="foot_docs">Tài liệu</a><a href="docs.html" data-i18n="foot_quickstart">Bắt đầu nhanh</a><a href="#" data-i18n="foot_support">Hỗ trợ</a></div>
  197. <div class="foot-col"><h4 data-i18n="foot_legal">Pháp lý</h4><a href="#" data-i18n="foot_tos">Điều khoản dịch vụ</a><a href="#" data-i18n="foot_privacy">Chính sách bảo mật</a><a href="#" data-i18n="foot_refund">Chính sách hoàn tiền</a></div>
  198. </div>
  199. <div class="foot-bottom"><span>© 2026 DoTouch.AI — doTouch.ai</span><span data-i18n="foot_made">Thế giới mã nguồn mở · AI phổ cập</span></div>
  200. </div>
  201. </footer>
  202. <div class="support-panel" id="supportPanel">
  203. <div class="support-head"><b data-i18n="chat_title">Trợ giúp & Hỗ trợ</b><span class="chat-status" data-i18n="chat_online">Trực tuyến</span></div>
  204. <div class="support-body">
  205. <p data-i18n="chat_hello">Xin chào! Chúng tôi có thể giúp gì cho bạn?</p>
  206. <div class="chat-sugg">
  207. <button data-i18n="chat_q_balance">Làm sao để nạp tiền?</button>
  208. <button data-i18n="chat_q_key">Tạo API key thế nào?</button>
  209. <button data-i18n="chat_q_model">Nên chọn mô hình nào?</button>
  210. </div>
  211. <div class="chat-input"><input placeholder="Nhập tin nhắn..." data-i18n="chat_input"><button>➤</button></div>
  212. <div class="chat-channels"><a class="tag tag-purple" href="#">Zalo</a><a class="tag tag-green" href="#">Telegram</a><a class="tag tag-gray" href="#">Email</a></div>
  213. </div>
  214. </div>
  215. <button class="support-fab" id="supportFab" aria-label="Support">
  216. <span class="pulse-ring"></span>
  217. <svg viewBox="0 0 24 24" width="26" height="26" fill="#fff"><path d="M12 3C7 3 3 6.6 3 11c0 2.3 1 4.3 2.7 5.8L5 20l3.4-1.5c1.1.4 2.3.5 3.6.5 5 0 9-3.6 9-8s-4-8-9-8z"/><circle cx="8.5" cy="11" r="1.2" fill="#0B1020"/><circle cx="12" cy="11" r="1.2" fill="#0B1020"/><circle cx="15.5" cy="11" r="1.2" fill="#0B1020"/></svg>
  218. </button>
  219. <div class="modal-mask" id="authModal">
  220. <div class="modal">
  221. <button class="modal-close" aria-label="Close">✕</button>
  222. <div id="viewLogin">
  223. <h3 data-i18n="auth_login_title">Đăng nhập</h3>
  224. <div class="auth-error" data-i18n="auth_err_email">Email không hợp lệ</div>
  225. <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
  226. <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
  227. <button class="btn btn-primary btn-block" data-i18n="auth_login_btn">Đăng nhập</button>
  228. <div class="auth-links"><a data-auth-view="reset" data-i18n="auth_forgot">Quên mật khẩu?</a><a data-auth-view="register" data-i18n="auth_to_register">Tạo tài khoản</a></div>
  229. </div>
  230. <div id="viewRegister" hidden>
  231. <h3 data-i18n="auth_register_title">Tạo tài khoản</h3>
  232. <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
  233. <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
  234. <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
  235. <div class="field"><label data-i18n="auth_confirm">Xác nhận mật khẩu</label><input type="password"></div>
  236. <div class="field">
  237. <label data-i18n="auth_code_label">Mã xác minh</label>
  238. <div class="code-row">
  239. <input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1">
  240. <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
  241. </div>
  242. <p class="auth-note" data-code-note data-i18n="auth_code_note">Mã gồm 8 ký tự chữ hoa & số, hiệu lực 15 phút</p>
  243. </div>
  244. <button class="btn btn-primary btn-block" data-i18n="auth_register_btn">Đăng ký</button>
  245. <div class="auth-links"><a data-auth-view="login" data-i18n="auth_to_login">Đã có tài khoản? Đăng nhập</a></div>
  246. </div>
  247. <div id="viewReset" hidden>
  248. <h3 data-i18n="auth_reset_title">Đặt lại mật khẩu</h3>
  249. <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
  250. <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
  251. <div class="field">
  252. <label data-i18n="auth_code_label">Mã xác minh</label>
  253. <div class="code-row">
  254. <input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1"><input class="code-cell" maxlength="1">
  255. <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
  256. </div>
  257. <p class="auth-note" data-code-note data-i18n="auth_code_note">Mã gồm 8 ký tự chữ hoa & số, hiệu lực 15 phút</p>
  258. </div>
  259. <div class="field"><label data-i18n="auth_new_pwd">Mật khẩu mới</label><input type="password"></div>
  260. <div class="field"><label data-i18n="auth_confirm_new">Xác nhận mật khẩu mới</label><input type="password"></div>
  261. <button class="btn btn-primary btn-block" data-i18n="auth_reset_btn">Đặt lại mật khẩu</button>
  262. <div class="auth-links"><a data-auth-view="login" data-i18n="auth_back_login">Quay lại đăng nhập</a></div>
  263. </div>
  264. </div>
  265. </div>
  266. <script src="i18n.js"></script>
  267. <script>
  268. /* 分类 tab 切换 */
  269. document.querySelectorAll('.cat-tab').forEach(btn => btn.addEventListener('click', () => {
  270. document.querySelectorAll('.cat-tab').forEach(b => b.classList.remove('active'));
  271. document.querySelectorAll('.cat-panel').forEach(p => p.classList.remove('active'));
  272. btn.classList.add('active');
  273. document.getElementById('cat-' + btn.dataset.cat).classList.add('active');
  274. }));
  275. </script>
  276. </body>
  277. </html>