v1.2.0 - Z.AI Chat for Android with dark/light themes, 4 chat modes, streaming SSE, coding plan endpoint
This commit is contained in:
admin
241
www/index.html
Normal file
241
www/index.html
Normal file
@@ -0,0 +1,241 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<meta name="theme-color" content="#1a1a2e">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<title>Z.AI Chat</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="setup-screen" class="screen active">
|
||||
<div class="setup-container">
|
||||
<div class="logo-area">
|
||||
<div class="logo-icon">Z</div>
|
||||
<h1>Z.AI Chat</h1>
|
||||
<p class="subtitle">GLM Coding Plan · Powered by GLM-5.1</p>
|
||||
</div>
|
||||
<div class="setup-form">
|
||||
<div class="input-group">
|
||||
<label for="api-token">Coding Plan Token</label>
|
||||
<input type="password" id="api-token" placeholder="Enter your Z.AI coding plan API key" autocomplete="off">
|
||||
<span class="input-hint">Get your key at <a href="https://z.ai/manage-apikey/apikey-list" target="_blank">z.ai/apikeys</a> · <a href="https://z.ai/subscribe" target="_blank">Subscribe</a></span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="base-url">Endpoint</label>
|
||||
<select id="base-url">
|
||||
<option value="https://api.z.ai/api/coding/paas/v4" selected>Coding Plan (api.z.ai/coding)</option>
|
||||
<option value="https://api.z.ai/api/paas/v4">General API (api.z.ai)</option>
|
||||
<option value="https://open.bigmodel.cn/api/paas/v4">China (bigmodel.cn)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="connect-btn" class="btn-primary">
|
||||
<span class="btn-text">Connect</span>
|
||||
<span class="btn-loader" style="display:none"></span>
|
||||
</button>
|
||||
<div id="setup-error" class="error-msg" style="display:none"></div>
|
||||
</div>
|
||||
<div class="setup-modes">
|
||||
<h3>Modes Available</h3>
|
||||
<div class="mode-cards">
|
||||
<div class="mode-card">
|
||||
<span class="mode-icon">💬</span>
|
||||
<span class="mode-name">Chat</span>
|
||||
<span class="mode-desc">General conversation</span>
|
||||
</div>
|
||||
<div class="mode-card">
|
||||
<span class="mode-icon">💻</span>
|
||||
<span class="mode-name">Coding</span>
|
||||
<span class="mode-desc">Code assistant</span>
|
||||
</div>
|
||||
<div class="mode-card">
|
||||
<span class="mode-icon">💡</span>
|
||||
<span class="mode-name">Brainstorm</span>
|
||||
<span class="mode-desc">Ideation partner</span>
|
||||
</div>
|
||||
<div class="mode-card">
|
||||
<span class="mode-icon">🤖</span>
|
||||
<span class="mode-name">Agentic</span>
|
||||
<span class="mode-desc">Autonomous coding</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chat-screen" class="screen">
|
||||
<div class="chat-header">
|
||||
<div class="header-left">
|
||||
<button id="menu-btn" class="icon-btn">☰</button>
|
||||
<div class="header-title">
|
||||
<h2 id="conversation-title">New Chat</h2>
|
||||
<span id="current-mode-label" class="mode-label">Chat</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<button id="theme-toggle-header" class="theme-toggle-btn" title="Toggle theme">☾</button>
|
||||
<button id="new-chat-btn" class="icon-btn" title="New chat">+</button>
|
||||
<button id="settings-btn" class="icon-btn" title="Settings">⚙</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar" class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3>Conversations</h3>
|
||||
<button id="sidebar-close" class="icon-btn">×</button>
|
||||
</div>
|
||||
<div id="conversation-list" class="conversation-list"></div>
|
||||
<div class="sidebar-footer">
|
||||
<button id="new-chat-sidebar" class="btn-secondary">+ New Chat</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar-overlay" class="sidebar-overlay"></div>
|
||||
|
||||
<div id="messages" class="messages"></div>
|
||||
|
||||
<div class="chat-input-area">
|
||||
<div id="mode-selector" class="mode-selector">
|
||||
<button class="mode-btn active" data-mode="chat">Chat</button>
|
||||
<button class="mode-btn" data-mode="coding">Coding</button>
|
||||
<button class="mode-btn" data-mode="brainstorm">Brainstorm</button>
|
||||
<button class="mode-btn" data-mode="agentic">Agentic</button>
|
||||
</div>
|
||||
<div class="input-row">
|
||||
<textarea id="message-input" placeholder="Type your message..." rows="1"></textarea>
|
||||
<button id="send-btn" class="send-btn" disabled>
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" fill="currentColor"/></svg>
|
||||
</button>
|
||||
<button id="stop-btn" class="stop-btn" style="display:none">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24"><rect x="6" y="6" width="12" height="12" fill="currentColor" rx="2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="settings-screen" class="screen">
|
||||
<div class="settings-container">
|
||||
<div class="settings-header">
|
||||
<button id="settings-back" class="icon-btn">←</button>
|
||||
<h2>Settings</h2>
|
||||
</div>
|
||||
<div class="settings-body">
|
||||
<div class="settings-section">
|
||||
<h3>API Configuration</h3>
|
||||
<div class="input-group">
|
||||
<label for="settings-token">API Token</label>
|
||||
<input type="password" id="settings-token" placeholder="Your API token">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="settings-url">Base URL</label>
|
||||
<input type="text" id="settings-url" placeholder="https://api.z.ai/api/coding/paas/v4">
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3>Model Settings</h3>
|
||||
<div class="input-group">
|
||||
<label for="settings-model">Model</label>
|
||||
<select id="settings-model">
|
||||
<option value="glm-5.1" selected>GLM-5.1 (Flagship)</option>
|
||||
<option value="glm-5-turbo">GLM-5 Turbo</option>
|
||||
<option value="glm-4.7">GLM-4.7</option>
|
||||
<option value="glm-4.5-air">GLM-4.5 Air (Fast)</option>
|
||||
<option value="glm-5v-turbo">GLM-5V Turbo (Vision)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Temperature: <span id="temp-value">0.7</span></label>
|
||||
<input type="range" id="settings-temp" min="0" max="1" step="0.1" value="0.7">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label>Max Tokens: <span id="tokens-value">4096</span></label>
|
||||
<input type="range" id="settings-tokens" min="256" max="16384" step="256" value="4096">
|
||||
</div>
|
||||
<div class="input-group toggle-group">
|
||||
<label>Web Search</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" id="settings-websearch">
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="input-group toggle-group">
|
||||
<label>Streaming</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" id="settings-streaming" checked>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3>Appearance</h3>
|
||||
<div class="input-group toggle-group">
|
||||
<label>Dark Mode</label>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" id="settings-darkmode" checked>
|
||||
<span class="toggle-slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3>Data</h3>
|
||||
<button id="export-btn" class="btn-secondary">Export Conversations</button>
|
||||
<button id="clear-btn" class="btn-danger">Clear All Data</button>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3>About</h3>
|
||||
<p class="about-text">Z.AI Chat v1.2.0</p>
|
||||
<p class="about-text">Built with Z.AI SDK & GLM-5.1</p>
|
||||
<p class="about-text">Compatible with Android 15/16</p>
|
||||
</div>
|
||||
<div class="settings-section">
|
||||
<h3>Changelog</h3>
|
||||
<ul class="changelog-list">
|
||||
<li>
|
||||
<span class="changelog-version">v1.2.0</span>
|
||||
<span class="changelog-date">2026-05-19</span>
|
||||
<ul>
|
||||
<li>Added light mode / dark mode toggle</li>
|
||||
<li>Theme persists across sessions</li>
|
||||
<li>Theme toggle button in chat header</li>
|
||||
<li>Theme setting in Settings screen</li>
|
||||
<li>Added changelog section to Settings</li>
|
||||
<li>Optimized light theme color palette</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="changelog-version">v1.1.0</span>
|
||||
<span class="changelog-date">2026-05-19</span>
|
||||
<ul>
|
||||
<li>Z.AI Coding Plan endpoint support</li>
|
||||
<li>Fixed API base URL to use coding plan endpoint</li>
|
||||
<li>Updated model list (GLM-5.1, GLM-5 Turbo, GLM-4.7, GLM-4.5 Air)</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<span class="changelog-version">v1.0.0</span>
|
||||
<span class="changelog-date">2026-05-19</span>
|
||||
<ul>
|
||||
<li>Initial release</li>
|
||||
<li>Chat, Coding, Brainstorm, Agentic modes</li>
|
||||
<li>Streaming SSE responses</li>
|
||||
<li>Markdown rendering with syntax highlighting</li>
|
||||
<li>Conversation management with sidebar</li>
|
||||
<li>Settings with model, temperature, tokens controls</li>
|
||||
<li>Web search integration</li>
|
||||
<li>Export conversations to JSON</li>
|
||||
<li>Android 15/16 support (targetSdk 36)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/marked.min.js"></script>
|
||||
<script src="js/highlight.min.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user