pricing-full.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  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" id="demoLoginBanner" style="bottom:56px;"></div>
  25. <div class="dev-note">v1.1.0 · 模型大全定价子页面 · 236 模型全量接入 · 货币随语言切换</div>
  26. <header>
  27. <div class="wrap nav">
  28. <a class="nav-logo" href="index.html">
  29. <svg viewBox="0 0 460 120" xmlns="http://www.w3.org/2000/svg">
  30. <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>
  31. <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>
  32. <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>
  33. </svg>
  34. </a>
  35. <nav class="nav-links">
  36. <a href="index.html" data-i18n="nav_home">Trang chủ</a>
  37. <a href="models.html" data-i18n="nav_models">Models</a>
  38. <a href="pricing.html" data-i18n="nav_pricing">Pricing</a>
  39. <a href="docs.html" data-i18n="nav_docs_ops">Hướng dẫn</a>
  40. <a href="../console-v1.0.0/user-console.html" data-i18n="nav_console">Console</a>
  41. </nav>
  42. <div class="nav-right">
  43. <div class="lang-switch">
  44. <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>
  45. </div>
  46. <a class="btn btn-sm" href="#" data-open-auth="login" data-i18n="nav_login">Đăng nhập</a>
  47. <a class="btn btn-primary btn-sm" href="#" data-open-auth="register" data-i18n="nav_signup">Bắt đầu</a>
  48. </div>
  49. </div>
  50. </header>
  51. <div class="wrap">
  52. <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>
  53. <div class="page-hero">
  54. <h1>Model Catalog · 236 models <span class="tag tag-purple">Alibaba Cloud DashScope</span></h1>
  55. <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>
  56. </div>
  57. <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>
  58. <!-- 分类 tabs -->
  59. <div class="cat-tabs" style="margin-top:24px;">
  60. <button class="cat-tab active" data-cat="chat">💬 Text Generation (150+)</button>
  61. <button class="cat-tab" data-cat="vision">👁️ Vision (20)</button>
  62. <button class="cat-tab" data-cat="image">🎨 Image (15)</button>
  63. <button class="cat-tab" data-cat="speech">🎙️ Speech (30)</button>
  64. </div>
  65. <!-- ══ 对话/推理 ══ -->
  66. <div class="cat-panel active" id="cat-chat">
  67. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Text Generation — mô hình được đề xuất</h2>
  68. <div class="table-wrap">
  69. <table class="data">
  70. <thead><tr><th>Model</th><th>Context</th><th>Input / 1M</th><th>Output / 1M</th><th>Capabilities</th></tr></thead>
  71. <tbody>
  72. <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>
  73. <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>
  74. <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>
  75. <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>
  76. <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>
  77. <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>
  78. <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>
  79. <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>
  80. <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>
  81. <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>
  82. </tbody>
  83. </table>
  84. </div>
  85. <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>
  86. <details class="cat-group" open>
  87. <summary>Qwen 系列(旗舰/快照/开源)— 60+</summary>
  88. <div class="g-body">
  89. <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>
  90. <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>
  91. <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>
  92. <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>(推理)
  93. </div>
  94. </details>
  95. <details class="cat-group">
  96. <summary>DeepSeek 系列 — 15+</summary>
  97. <div class="g-body">
  98. <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>
  99. </div>
  100. </details>
  101. <details class="cat-group">
  102. <summary>三方模型:GLM / Kimi / MiniMax / Xiaomi — 15+</summary>
  103. <div class="g-body">
  104. <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>
  105. <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>
  106. <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>
  107. <b>Xiaomi:</b> <code>xiaomi/mimo-v2.5-pro</code>
  108. </div>
  109. </details>
  110. </div>
  111. <!-- ══ 视觉 ══ -->
  112. <div class="cat-panel" id="cat-vision">
  113. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Vision Understanding</h2>
  114. <div class="table-wrap">
  115. <table class="data">
  116. <thead><tr><th>Model</th><th>Context</th><th>Input / 1M</th><th>Output / 1M</th><th>Notes</th></tr></thead>
  117. <tbody>
  118. <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>
  119. <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>
  120. <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>
  121. <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>
  122. </tbody>
  123. </table>
  124. </div>
  125. <details class="cat-group" open>
  126. <summary>Toàn bộ Vision (~20)</summary>
  127. <div class="g-body">
  128. <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
  129. </div>
  130. </details>
  131. </div>
  132. <!-- ══ 图像 ══ -->
  133. <div class="cat-panel" id="cat-image">
  134. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Image Generation — tính phí theo ảnh</h2>
  135. <div class="table-wrap">
  136. <table class="data">
  137. <thead><tr><th>Model</th><th>Giá / ảnh (placeholder)</th><th>Notes</th></tr></thead>
  138. <tbody>
  139. <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>
  140. <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>
  141. <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>
  142. <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>
  143. </tbody>
  144. </table>
  145. </div>
  146. <details class="cat-group" open>
  147. <summary>Toàn bộ Image (~15)</summary>
  148. <div class="g-body">
  149. <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)
  150. </div>
  151. </details>
  152. </div>
  153. <!-- ══ 语音 ══ -->
  154. <div class="cat-panel" id="cat-speech">
  155. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Speech — TTS theo ký tự / ASR theo giây</h2>
  156. <div class="table-wrap">
  157. <table class="data">
  158. <thead><tr><th>Model</th><th>Loại</th><th>Đơn giá (placeholder)</th></tr></thead>
  159. <tbody>
  160. <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>
  161. <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>
  162. <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>
  163. </tbody>
  164. </table>
  165. </div>
  166. <details class="cat-group" open>
  167. <summary>Toàn bộ Speech (~30)</summary>
  168. <div class="g-body">
  169. <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>
  170. <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>
  171. <b>Realtime/其他:</b> <code>qwen-audio-3.0-realtime-flash/plus</code> <code>qwen3-livetranslate-flash</code>(+realtime/snapshot)
  172. </div>
  173. </details>
  174. </div>
  175. <!-- 收费方式 -->
  176. <section>
  177. <h2 style="font-size:18px;font-weight:800;margin-bottom:14px;">Chính sách thanh toán & giá ưu đãi</h2>
  178. <div class="grid3">
  179. <div class="card"><b style="color:var(--purple-l);">giá cực kỳ cạnh tranh</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>
  180. <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>
  181. <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>
  182. </div>
  183. </section>
  184. </div>
  185. <footer>
  186. <div class="wrap">
  187. <div class="foot-grid">
  188. <div class="foot-brand">
  189. <svg viewBox="0 0 460 120" width="140" xmlns="http://www.w3.org/2000/svg">
  190. <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>
  191. <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>
  192. <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>
  193. </svg>
  194. <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>
  195. </div>
  196. <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>
  197. <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>
  198. <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>
  199. </div>
  200. <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>
  201. </div>
  202. </footer>
  203. <div class="support-panel" id="supportPanel">
  204. <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>
  205. <div class="support-body">
  206. <p data-i18n="chat_hello">Xin chào! Chúng tôi có thể giúp gì cho bạn?</p>
  207. <div class="chat-sugg">
  208. <button data-i18n="chat_q_balance">Làm sao để nạp tiền?</button>
  209. <button data-i18n="chat_q_key">Tạo API key thế nào?</button>
  210. <button data-i18n="chat_q_model">Nên chọn mô hình nào?</button>
  211. </div>
  212. <div class="chat-input"><input placeholder="Nhập tin nhắn..." data-i18n="chat_input"><button>➤</button></div>
  213. <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>
  214. </div>
  215. </div>
  216. <button class="support-fab" id="supportFab" aria-label="Support">
  217. <span class="pulse-ring"></span>
  218. <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>
  219. </button>
  220. <div class="modal-mask" id="authModal">
  221. <div class="modal">
  222. <button class="modal-close" aria-label="Close">✕</button>
  223. <div id="viewLogin">
  224. <h3 data-i18n="auth_login_title">Đăng nhập</h3>
  225. <div class="auth-error" data-i18n="auth_err_email">Email không hợp lệ</div>
  226. <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
  227. <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
  228. <button class="btn btn-primary btn-block" data-i18n="auth_login_btn">Đăng nhập</button>
  229. <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>
  230. </div>
  231. <div id="viewRegister" hidden>
  232. <h3 data-i18n="auth_register_title">Tạo tài khoản</h3>
  233. <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
  234. <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
  235. <div class="field"><label data-i18n="auth_password">Mật khẩu</label><input type="password"></div>
  236. <div class="field"><label data-i18n="auth_confirm">Xác nhận mật khẩu</label><input type="password"></div>
  237. <div class="field">
  238. <label data-i18n="auth_code_label">Mã xác minh</label>
  239. <div class="code-row">
  240. <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">
  241. <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
  242. </div>
  243. <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>
  244. </div>
  245. <button class="btn btn-primary btn-block" data-i18n="auth_register_btn">Đăng ký</button>
  246. <div class="auth-links"><a data-auth-view="login" data-i18n="auth_to_login">Đã có tài khoản? Đăng nhập</a></div>
  247. </div>
  248. <div id="viewReset" hidden>
  249. <h3 data-i18n="auth_reset_title">Đặt lại mật khẩu</h3>
  250. <div class="auth-error" data-i18n="auth_err_pwd">Mật khẩu không khớp</div>
  251. <div class="field"><label data-i18n="auth_email">Email</label><input type="email" placeholder="you@example.com"></div>
  252. <div class="field">
  253. <label data-i18n="auth_code_label">Mã xác minh</label>
  254. <div class="code-row">
  255. <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">
  256. <button class="btn btn-sm code-send" data-send-code data-i18n="auth_code_send">Gửi mã</button>
  257. </div>
  258. <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>
  259. </div>
  260. <div class="field"><label data-i18n="auth_new_pwd">Mật khẩu mới</label><input type="password"></div>
  261. <div class="field"><label data-i18n="auth_confirm_new">Xác nhận mật khẩu mới</label><input type="password"></div>
  262. <button class="btn btn-primary btn-block" data-i18n="auth_reset_btn">Đặt lại mật khẩu</button>
  263. <div class="auth-links"><a data-auth-view="login" data-i18n="auth_back_login">Quay lại đăng nhập</a></div>
  264. </div>
  265. </div>
  266. </div>
  267. <script src="i18n.js"></script>
  268. <script>
  269. /* 分类 tab 切换 */
  270. document.querySelectorAll('.cat-tab').forEach(btn => btn.addEventListener('click', () => {
  271. document.querySelectorAll('.cat-tab').forEach(b => b.classList.remove('active'));
  272. document.querySelectorAll('.cat-panel').forEach(p => p.classList.remove('active'));
  273. btn.classList.add('active');
  274. document.getElementById('cat-' + btn.dataset.cat).classList.add('active');
  275. }));
  276. </script>
  277. </body>
  278. </html>