74 lines
2.6 KiB
HTML
74 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>AI Tool Station · 一键部署的 AI 工具站</title>
|
|
<meta name="description" content="开箱即用的 AI 工具聚合站，内置多种热门 AI 小工具，一键部署，谁用谁火。" />
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="logo">🚀</span>
|
|
<span class="brand-name">AI Tool Station</span>
|
|
</div>
|
|
<button id="settingsBtn" class="ghost-btn" title="设置 API">⚙️ 设置</button>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="hero">
|
|
<h1>一键部署的 <span class="grad">AI 工具站</span></h1>
|
|
<p>内置多个热门 AI 小工具，开箱即用，谁用谁火 🔥</p>
|
|
</section>
|
|
|
|
<section class="tools-grid" id="toolsGrid">
|
|
<!-- 工具卡片由 JS 渲染 -->
|
|
</section>
|
|
|
|
<section class="panel" id="panel" hidden>
|
|
<div class="panel-head">
|
|
<h2 id="panelTitle">工具</h2>
|
|
<button id="closePanel" class="ghost-btn">✕ 关闭</button>
|
|
</div>
|
|
<p class="panel-desc" id="panelDesc"></p>
|
|
<textarea id="inputBox" class="input-box" placeholder="请输入内容..."></textarea>
|
|
<div class="actions">
|
|
<button id="runBtn" class="primary-btn">✨ 运行</button>
|
|
<button id="copyBtn" class="ghost-btn">📋 复制结果</button>
|
|
<button id="clearBtn" class="ghost-btn">🧹 清空</button>
|
|
</div>
|
|
<div class="output" id="outputBox" aria-live="polite"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<span>© <span id="year"></span> AI Tool Station · MIT License</span>
|
|
</footer>
|
|
|
|
<!-- 设置弹窗 -->
|
|
<div class="modal" id="settingsModal" hidden>
|
|
<div class="modal-card">
|
|
<h3>⚙️ API 设置</h3>
|
|
<p class="hint">留空则使用内置模拟模式。支持 OpenAI 兼容接口。</p>
|
|
<label>API Base URL
|
|
<input id="apiBase" type="text" placeholder="https://api.openai.com/v1" />
|
|
</label>
|
|
<label>API Key
|
|
<input id="apiKey" type="password" placeholder="sk-..." />
|
|
</label>
|
|
<label>模型
|
|
<input id="apiModel" type="text" placeholder="gpt-4o-mini" />
|
|
</label>
|
|
<div class="modal-actions">
|
|
<button id="saveSettings" class="primary-btn">保存</button>
|
|
<button id="cancelSettings" class="ghost-btn">取消</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/tools.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|