AI工具�?/title> <style> *{margin:0;padding:0;box-sizing:border-box} body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);min-height:100vh;color:#fff} .navbar{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);padding:15px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1)} .logo{font-size:24px;font-weight:700;background:linear-gradient(90deg,#00d2ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .nav-links a{color:rgba(255,255,255,.7);text-decoration:none;margin-left:30px;font-size:14px;transition:color .3s} .nav-links a:hover{color:#fff} .hero{text-align:center;padding:80px 20px 60px} .hero h1{font-size:48px;font-weight:800;margin-bottom:20px;background:linear-gradient(90deg,#fff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .hero p{font-size:18px;color:rgba(255,255,255,.6);max-width:600px;margin:0 auto} .tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;padding:40px;max-width:1200px;margin:0 auto} .tool-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:30px;transition:transform .3s,border-color .3s;cursor:pointer} .tool-card:hover{transform:translateY(-5px);border-color:#7b2ff7} .tool-icon{font-size:40px;margin-bottom:15px} .tool-card h3{font-size:20px;margin-bottom:10px} .tool-card p{color:rgba(255,255,255,.5);font-size:14px;line-height:1.6} .tool-panel{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);z-index:100;justify-content:center;align-items:center} .tool-panel.active{display:flex} .panel-content{background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:40px;width:90%;max-width:700px;max-height:85vh;overflow-y:auto} .panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px} .panel-header h2{font-size:24px} .close-btn{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:20px;width:40px;height:40px;border-radius:50%;cursor:pointer} .close-btn:hover{background:rgba(255,255,255,.2)} textarea,input[type=text]{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:15px;color:#fff;font-size:15px;resize:vertical;font-family:inherit;margin-bottom:15px} textarea:focus,input[type=text]:focus{outline:none;border-color:#7b2ff7} .btn-primary{background:linear-gradient(90deg,#7b2ff7,#00d2ff);border:none;color:#fff;padding:14px 32px;border-radius:12px;font-size:15px;cursor:pointer;width:100%;font-weight:600;transition:opacity .3s} .btn-primary:hover{opacity:.9} .result-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:20px;margin-top:20px;min-height:80px;white-space:pre-wrap;line-height:1.8;color:rgba(255,255,255,.8)} .feature-row{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap} .feature-row select{flex:1;min-width:120px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:14px;color:#fff;font-size:15px} .feature-row select option{background:#1a1a2e} .feature-row input[type=text]{flex:1;min-width:180px} .pricing{text-align:center;padding:80px 20px;max-width:900px;margin:0 auto} .pricing h2{font-size:36px;margin-bottom:50px} .pricing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px} .pricing-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:35px;text-align:left} .pricing-card.popular{border-color:#7b2ff7;position:relative} .pricing-card.popular::before{content:'推荐';position:absolute;top:-12px;right:20px;background:#7b2ff7;padding:4px 12px;border-radius:20px;font-size:12px} .price{font-size:42px;font-weight:800;margin:15px 0} .price span{font-size:16px;font-weight:400;color:rgba(255,255,255,.5)} .pricing-card ul{list-style:none;margin:20px 0} .pricing-card li{padding:8px 0;color:rgba(255,255,255,.7);font-size:14px} .pricing-card li::before{content:'�?';color:#00d2ff} .footer{text-align:center;padding:40px;color:rgba(255,255,255,.3);font-size:13px;border-top:1px solid rgba(255,255,255,.05)} .toast{position:fixed;bottom:30px;right:30px;background:#7b2ff7;color:#fff;padding:15px 25px;border-radius:12px;display:none;animation:slideIn .3s ease;z-index:200} @keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}} .stats{display:flex;justify-content:center;gap:60px;padding:40px;flex-wrap:wrap} .stat-item{text-align:center} .stat-num{font-size:36px;font-weight:800;background:linear-gradient(90deg,#00d2ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .stat-label{color:rgba(255,255,255,.5);font-size:14px;margin-top:5px} @media(max-width:768px){.hero h1{font-size:32px}.tools-grid{padding:20px}.panel-content{padding:25px}} </style> </head> <body> <nav class="navbar"> <div class="logo">AI🚀 工具�?/div> <div class="nav-links"> <a href="#tools">工具</a> <a href="#ad">广告合作</a> <a href="#" onclick="showToast('联系我们: admin@aibang.com')">联系我们</a> </div> </nav> <section class="hero"> <h1>一个工具，解决所有AI需�?/h1> <p>文案写作 · 多语言翻译 · 密码生成 · 数据格式�?—�?全部免费使用</p> </section> <div class="stats"> <div class="stat-item"><div class="stat-num">10�?</div><div class="stat-label">月活跃用�?/div></div> <div class="stat-item"><div class="stat-num">5000�?</div><div class="stat-label">次文本生�?/div></div> <div class="stat-item"><div class="stat-num">4.9�?/div><div class="stat-label">用户评分</div></div> </div> <section class="tools-grid" id="tools"> <div class="tool-card" onclick="openPanel('copywriting')"> <div class="tool-icon">✍️</div> <h3>AI文案生成</h3> <p>输入关键词，一键生成营销文案、社交媒体帖子、博客文章等高质量内�?/p> </div> <div class="tool-card" onclick="openPanel('translate')"> <div class="tool-icon">🌍</div> <h3>智能翻译</h3> <p>支持50+语言互译，智能理解上下文，翻译结果自然流�?/p> </div> <div class="tool-card" onclick="openPanel('password')"> <div class="tool-icon">🔐</div> <h3>密码生成�?/h3> <p>生成高强度安全密码，可自定义长度、符号、数字组�?/p> </div> <div class="tool-card" onclick="openPanel('formatter')"> <div class="tool-icon">📊</div> <h3>数据格式�?/h3> <p>JSON格式化、Base64编码、URL编码解码、Markdown转换</p> </div> <div class="tool-card" onclick="openPanel('summary')"> <div class="tool-icon">📝</div> <h3>文章摘要</h3> <p>粘贴长篇文章，自动生成精炼摘要，节省阅读时间</p> </div> <div class="tool-card" onclick="openPanel('codehelper')"> <div class="tool-icon">💻</div> <h3>代码助手</h3> <p>粘贴代码自动检测bug、生成注释、转换为不同语言</p> </div> </section> <div class="ad-banner" style="max-width:1320px;margin:20px 40px;"> ⚠ 广告�?1 - 内容间横�?(728×90) - 联系 18019251460@163.com 投放 </div> <section class="article-section"> <h2>广告合作</h2> <h3>如何在我们的网站投放广告�?/h3> <p>AI工具箱拥有大量精准技术用户群体，是投放相关广告的理想平台。我们提供多种广告位选择，包括横幅广告、侧边栏广告、原生广告等�?/p> <p>如有合作意向，请发送邮件至 <a href="mailto:18019251460@163.com">18019251460@163.com</a>，我们将�?4小时内回复�?/p> </section> <div class="ad-banner" style="max-width:1320px;margin:0 40px;"> ⚠ 广告�?2 - 底部横幅 (970×90) - 高曝光黄金位�? </div> <div class="footer">© 2026 AI工具�?| 让AI为你工作</div> <div class="toast" id="toast"></div> <div class="tool-panel" id="copywriting"> <div class="panel-content"> <div class="panel-header"><h2>✍️ AI文案生成</h2><button class="close-btn" onclick="closePanel('copywriting')">✕</button></div> <div class="feature-row"><select id="copyType"><option value="marketing">营销文案</option><option value="social">社交媒体</option><option value="blog">博客文章</option><option value="email">邮件模板</option></select></div><div class="feature-row"><input type="text" id="copyTopic" placeholder="输入产品/主题关键�?></div><textarea id="copyInput" rows="3" placeholder="补充要求（可选）：目标受众、语气风格等"></textarea> <button class="btn-primary" onclick="gen_copywriting()">�?生成文案</button> <div class="result-box" id="copywritingResult">文案将在这里显示...</div> </div></div> <div class="tool-panel" id="translate"> <div class="panel-content"> <div class="panel-header"><h2>🌍 智能翻译</h2><button class="close-btn" onclick="closePanel('translate')">✕</button></div> <div class="feature-row"><select id="srcLang"><option value="auto">自动检�?/option><option value="zh" selected>中文</option><option value="en">英语</option><option value="ja">日语</option></select><select id="tgtLang"><option value="en" selected>英语</option><option value="zh">中文</option><option value="ja">日语</option><option value="ko">韩语</option></select></div><textarea id="translateInput" rows="5" placeholder="输入要翻译的文本"></textarea> <button class="btn-primary" onclick="gen_translate()">�?开始翻�?/button> <div class="result-box" id="translateResult">翻译结果将在这里显示...</div> </div></div> <div class="tool-panel" id="password"> <div class="panel-content"> <div class="panel-header"><h2>🔐 密码生成�?/h2><button class="close-btn" onclick="closePanel('password')">✕</button></div> <div class="feature-row"><select id="pwdLength"><option value="12">12�?/option><option value="16" selected>16�?/option><option value="20">20�?/option><option value="24">24�?/option></select><label style="color:rgba(255,255,255,.7);font-size:14px;display:flex;align-items:center;gap:5px;"><input type="checkbox" id="useSymbols" checked> 特殊符号</label></div> <button class="btn-primary" onclick="gen_password()">�?生成密码</button> <div class="result-box" id="passwordResult">密码将在这里显示...</div> </div></div> <div class="tool-panel" id="formatter"> <div class="panel-content"> <div class="panel-header"><h2>📊 数据格式�?/h2><button class="close-btn" onclick="closePanel('formatter')">✕</button></div> <div class="feature-row"><select id="fmtType"><option value="json">JSON格式�?/option><option value="base64enc">Base64 编码</option><option value="base64dec">Base64 解码</option><option value="urlencode">URL 编码</option><option value="urldecode">URL 解码</option></select></div><textarea id="formatterInput" rows="5" placeholder="输入数据"></textarea> <button class="btn-primary" onclick="gen_formatter()">�?处理</button> <div class="result-box" id="formatterResult">结果将在这里显示...</div> </div></div> <div class="tool-panel" id="summary"> <div class="panel-content"> <div class="panel-header"><h2>📝 文章摘要</h2><button class="close-btn" onclick="closePanel('summary')">✕</button></div> <textarea id="summaryInput" rows="8" placeholder="粘贴长篇文章..."></textarea> <button class="btn-primary" onclick="gen_summary()">�?生成摘要</button> <div class="result-box" id="summaryResult">摘要将在这里显示...</div> </div></div> <div class="tool-panel" id="codehelper"> <div class="panel-content"> <div class="panel-header"><h2>💻 代码助手</h2><button class="close-btn" onclick="closePanel('codehelper')">✕</button></div> <div class="feature-row"><select id="codeTask"><option value="debug">Bug检�?/option><option value="comment">生成注释</option><option value="explain">代码解释</option><option value="optimize">性能优化建议</option></select></div><textarea id="codeInput" rows="8" placeholder="粘贴代码..." style="font-family:monospace;"></textarea> <button class="btn-primary" onclick="gen_codehelper()">�?开始分�?/button> <div class="result-box" id="codehelperResult">分析结果将在这里显示...</div> </div></div> <script> // API 地址（本地开发用 /api，部署后改为 http://yourdomain.com/api�? var API_BASE = window.location.origin; function openPanel(id){document.getElementById(id).classList.add('active')} function closePanel(id){document.getElementById(id).classList.remove('active')} function showToast(msg){ var t=document.getElementById('toast'); t.textContent=msg; t.style.display='block'; setTimeout(function(){t.style.display='none'},3000); } document.querySelectorAll('.tool-panel').forEach(function(p){ p.addEventListener('click',function(e){ if(e.target===p) p.classList.remove('active'); }); }); // 通用 API 调用 function callAPI(url, data, callback, callbackError) { fetch(API_BASE + url, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(data) }) .then(function(res){return res.json();}) .then(function(json){ if(json.result){ callback(json.result); } else { callbackError(json.detail || "请求失败"); } }) .catch(function(err){ callbackError("网络错误，请检查后端是否启�?); }); } // AI 文案生成 function gen_copywriting(){ var type = document.getElementById("copyType").value; var topic = document.getElementById("copyTopic").value; if(!topic){showToast("请输入主题关键词");return;} var details = document.getElementById("copyInput").value; var el = document.getElementById("copyResult"); el.textContent = "AI 正在创作中，请稍�?.."; callAPI("/api/copywriting", {type:type, topic:topic, details:details}, function(result){el.textContent = result; showToast("生成成功�?);}, function(err){el.textContent = "生成失败�? + err;} ); } // 智能翻译 function gen_translate(){ var text = document.getElementById("translateInput").value; if(!text.trim()){showToast("请输入要翻译的文�?);return;} var el = document.getElementById("translateResult"); el.textContent = "AI 正在翻译中，请稍�?.."; callAPI("/api/translate", { text:text, source_lang: document.getElementById("srcLang").value, target_lang: document.getElementById("tgtLang").value }, function(result){el.textContent = result; showToast("翻译完成�?);}, function(err){el.textContent = "翻译失败�? + err;} ); } // 密码生成器（本地生成，不需�?API�? function gen_password(){ var length = parseInt(document.getElementById("pwdLength").value); var useSym = document.getElementById("useSymbols").checked; var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; if(useSym) chars += "!@#$%^&*()_+-=[]{}|;:,.<>?"; var pwd = ""; var arr = new Uint32Array(length); crypto.getRandomValues(arr); for(var i=0; i<length; i++) pwd += chars[arr[i]%chars.length]; var el = document.getElementById("passwordResult"); el.textContent = pwd; el.style.cursor = "pointer"; el.title = "点击复制"; el.onclick = function(){ navigator.clipboard.writeText(pwd).then(function(){showToast("已复制到剪贴板！")}); }; showToast("密码生成成功！点击可复制"); } // 数据格式化（本地处理，不需�?API�? function gen_formatter(){ var type = document.getElementById("fmtType").value; var input = document.getElementById("formatterInput").value; var el = document.getElementById("formatterResult"); if(!input.trim()){showToast("请输入数�?);return;} el.textContent = "处理�?.."; try{ var res; switch(type){ case "json": res = JSON.stringify(JSON.parse(input),null,2); break; case "base64enc": res = btoa(unescape(encodeURIComponent(input))); break; case "base64dec": res = decodeURIComponent(escape(atob(input))); break; case "urlencode": res = encodeURIComponent(input); break; case "urldecode": res = decodeURIComponent(input); break; default: res = "Success"; } el.textContent = res; showToast("处理成功�?); }catch(e){ el.textContent = "错误�? + e.message; showToast("处理失败"); } } // 文章摘要 function gen_summary(){ var text = document.getElementById("summaryInput").value; if(!text.trim()){showToast("请粘贴文章内�?);return;} var el = document.getElementById("summaryResult"); el.textContent = "AI 正在生成摘要，请稍�?.."; callAPI("/api/summary", {text:text}, function(result){el.textContent = result; showToast("摘要生成完成�?);}, function(err){el.textContent = "生成失败�? + err;} ); } // 代码助手 function gen_codehelper(){ var code = document.getElementById("codeInput").value; if(!code.trim()){showToast("请粘贴代�?);return;} var task = document.getElementById("codeTask").value; var el = document.getElementById("codeResult"); el.textContent = "AI 正在分析中，请稍�?.."; callAPI("/api/code", {code:code, task:task}, function(result){el.textContent = result; showToast("分析完成�?);}, function(err){el.textContent = "分析失败�? + err;} ); } </script> </body>