? WebForge - 企业官网生成�?/title> <link href="https://fonts.loli.net/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+SC:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> <style> *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{--bg:#0a0a12;--sidebar:#111118;--surface:#1a1a25;--border:#2a2a3a;--text:#e8e8f0;--text2:#8888a8;--accent:#6c5ce7;--accent2:#00cec9;--radius:12px} html,body{height:100%;font-family:"Inter","Noto Sans SC",sans-serif;background:var(--bg);color:var(--text);overflow:hidden} button{cursor:pointer;font-family:inherit;border:none;font-size:14px;outline:none} input,textarea,select{font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;outline:none;width:100%} input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,92,231,0.15)} textarea{resize:vertical;min-height:80px} select{appearance:none} label{display:block;font-size:13px;font-weight:500;color:var(--text2);margin-bottom:6px} input[type="color"]{height:44px;padding:4px;cursor:pointer} .app{display:flex;height:100vh;overflow:hidden} .sidebar{width:420px;min-width:420px;background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden} .preview{flex:1;overflow:hidden;position:relative;background:var(--bg)} .sidebar-header{padding:22px 24px 16px;border-bottom:1px solid var(--border);flex-shrink:0} .sidebar-header h1{font-size:20px;font-weight:800;display:flex;align-items:center;gap:10px} .sidebar-header h1 span{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .sidebar-header p{font-size:12px;color:var(--text2);margin-top:2px} .sidebar-header .badge{display:inline-block;background:var(--accent);color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle;-webkit-text-fill-color:#fff} .tabs{display:flex;padding:0 16px;border-bottom:1px solid var(--border);flex-shrink:0} .tab{padding:13px 16px;font-size:13px;font-weight:500;color:var(--text2);background:none;border-bottom:2px solid transparent} .tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)} .sidebar-content{flex:1;overflow-y:auto;padding:20px 24px} .form-section{display:none}.form-section.active{display:block} .form-section h3{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--text)} .form-section .desc{font-size:12px;color:var(--text2);margin-bottom:20px} .form-group{margin-bottom:18px}.form-row{display:flex;gap:12px}.form-row .form-group{flex:1} .product-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;position:relative;background:var(--surface)} .product-card .remove-btn{position:absolute;top:10px;right:10px;background:rgba(231,76,60,0.1);border:none;color:#e74c3c;font-size:14px;cursor:pointer;opacity:0.6;padding:4px 8px;border-radius:6px} .product-card .remove-btn:hover{opacity:1;background:rgba(231,76,60,0.2)} .product-card .form-group{margin-bottom:12px} .add-product-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:1.5px dashed var(--border);border-radius:var(--radius);background:none;color:var(--text2);font-size:13px} .add-product-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(108,92,231,0.06)} .template-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} .template-option{position:relative;border:2px solid var(--border);border-radius:var(--radius);padding:16px;cursor:pointer;background:var(--surface);text-align:center} .template-option.active{border-color:var(--accent);background:rgba(108,92,231,0.08)} .template-option .thumb{height:48px;border-radius:8px;margin-bottom:10px;display:flex;align-items:center;justify-content:center;font-size:24px} .template-option .name{font-size:14px;font-weight:600} .template-option .check{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:none;align-items:center;justify-content:center;font-size:12px;box-shadow:0 2px 8px rgba(108,92,231,0.4)} .template-option.active .check{display:flex} .template-option .badge-desc{font-size:11px;color:var(--text2);margin-top:4px} .color-row{display:flex;gap:10px;align-items:center}.color-row input[type="color"]{flex:0 0 44px;border-radius:8px} .sidebar-footer{padding:16px 24px 20px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:10px} .btn-primary{flex:1;padding:12px 20px;background:linear-gradient(135deg,var(--accent),#5a4bd1);color:#fff;border-radius:var(--radius);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 14px rgba(108,92,231,0.25)} .btn-primary:hover{opacity:0.92;transform:translateY(-1px)} .btn-secondary{padding:12px 18px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-weight:500} .preview-frame{width:100%;height:100%;border:none;background:#fff} .preview-toolbar{position:absolute;top:16px;right:20px;z-index:10;display:flex;gap:8px} .preview-toolbar button{background:rgba(0,0,0,0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#fff;padding:9px 16px;border-radius:10px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,0.08)} .preview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text2);text-align:center;padding:40px} .preview-empty .icon{font-size:64px;margin-bottom:20px;opacity:0.3}.preview-empty h3{color:var(--text);margin-bottom:8px;font-size:20px} .preview-empty p{font-size:14px;max-width:380px;line-height:1.7;opacity:0.7} @media(max-width:900px){.app{flex-direction:column}.sidebar{width:100%;min-width:auto;max-height:50vh}.preview{height:50vh}} </style> </head> <body> <div class="app" id="app"> <aside class="sidebar"> <div class="sidebar-header"> <h1><span>WebForge</span> <span class="badge">v1.0</span></h1> <p>输入企业信息，即刻生成精美官�?/p> </div> <div class="tabs" id="tabs"> <button class="tab active" data-tab="basic">基本信息</button> <button class="tab" data-tab="products">产品/服务</button> <button class="tab" data-tab="style">风格设置</button> <button class="tab" data-tab="contact">联系方式</button> </div> <div class="sidebar-content" id="sidebarContent"> <div class="form-section active" id="sec-basic"> <h3>企业基本信息</h3> <p class="desc">填写您企业的核心信息，这些将展示在网站最显眼的位�?/p> <div class="form-group"><label>企业名称 <span style="color:#e74c3c">*</span></label><input type="text" id="companyName" placeholder= + C(0x4f8b,0xff1a,0x661f,0x8fb0,0x79d1,0x6280,0x6709,0x9650,0x516c,0x53f8) + value= + C(0x661f,0x8fb0,0x79d1,0x6280) + ></div> <div class="form-group"><label>品牌标语</label><input type="text" id="companyTagline" placeholder= + C(0x4f8b,0xff1a,0x7528,0x79d1,0x6280,0x70b9,0x4eae,0x672a,0x6765) + value= + C(0x7528,0x667a,0x6167,0x79d1,0x6280,0xff0c,0x521b,0x9020,0x65e0,0x9650,0x53ef,0x80fd) + ></div> <div class="form-group"><label>企业简�?/label><textarea id="companyDesc" rows="3" placeholder="简要介绍您的企�?..">我们是一家专注于人工智能与物联网技术的创新企业，致力于为全球客户提供领先的智能解决方案。自成立以来，我们始终坚持以技术创新为核心驱动力，打造了多款深受市场认可的产品�?/textarea></div> <div class="form-group"><label>企业 Logo URL（可选）</label><input type="text" id="companyLogo" placeholder="输入Logo图片链接，或留空使用文字标识"></div> <div class="form-row"><div class="form-group"><label>成立年份</label><input type="text" id="companyYear" placeholder="例：2020" value="2020"></div><div class="form-group"><label>企业规模</label><select id="companySize"><option value="1-50�?>1-50�?/option><option value="50-200�? selected>50-200�?/option><option value="200-1000�?>200-1000�?/option><option value="1000人以�?>1000人以�?/option></select></div></div> <div class="form-group"><label>行业领域</label><input type="text" id="companyIndustry" placeholder="例：人工智能" value="人工智能 · 物联�?></div> </div> <div class="form-section" id="sec-products"><h3>产品与服�?/h3><p class="desc">添加您的产品或服务项目，展示企业核心业务</p><div id="productList"></div><button class="add-product-btn" onclick="addProduct()">+ 添加产品</button></div> <div class="form-section" id="sec-style"><h3>网站风格</h3><p class="desc">选择模板和配色，让官网呈现您想要的视觉感�?/p><div class="form-group"><label>选择模板</label><div class="template-grid" id="templateGrid"></div></div> <div class="form-group"><label>主色�?/label><div class="color-row"><input type="color" id="primaryColor" value="#6c5ce7"><input type="text" id="primaryColorText" value="#6c5ce7"></div></div> <div class="form-group"><label>辅助�?/label><div class="color-row"><input type="color" id="secondaryColor" value="#00cec9"><input type="text" id="secondaryColorText" value="#00cec9"></div></div> <div class="form-group"><label>字体风格</label><select id="fontStyle"><option value="modern">现代简约（Inter + Noto Sans SC�?/option><option value="elegant">优雅衬线（Playfair Display + 系统�?/option><option value="rounded">圆润亲和（Nunito + 系统�?/option></select></div> <div class="form-group"><label>动画风格</label><select id="animationStyle"><option value="subtle">淡雅微动</option><option value="smooth" selected>平滑过渡</option><option value="dynamic">活力动感</option></select></div> </div> <div class="form-section" id="sec-contact"><h3>联系方式</h3><p class="desc">填写企业的联系信息，让客户能够轻松找到您</p> <div class="form-group"><label>联系邮箱</label><input type="email" id="contactEmail" placeholder="contact@example.com" value="hello@star-tech.com"></div> <div class="form-group"><label>联系电话</label><input type="text" id="contactPhone" placeholder="+86 10 8888 8888" value="+86 400-888-9999"></div> <div class="form-group"><label>公司地址</label><input type="text" id="contactAddress" placeholder="详细地址" value="北京市海淀区中关村科技园区创新大厦18�?></div> <div class="form-row"><div class="form-group"><label>微信</label><input type="text" id="socialWechat" placeholder="微信�? value="StarTech_AI"></div><div class="form-group"><label>微博</label><input type="text" id="socialWeibo" placeholder="微博链接" value="@星辰科技官方"></div></div> <div class="form-row"><div class="form-group"><label>LinkedIn</label><input type="text" id="socialLinkedin" placeholder="LinkedIn URL"></div><div class="form-group"><label>Twitter / X</label><input type="text" id="socialTwitter" placeholder="@username" value="@startech"></div></div> <div class="form-group"><label>营业时间</label><input type="text" id="businessHours" placeholder="例：周一至周�?9:00-18:00" value="周一至周�?09:00 - 18:00"></div> </div> </div> <div class="form-section" id="sec-advanced"> <h3>页脚设置</h3> <p class="desc">自定义网站版权信�?/p> <div class="form-group"><label>版权文本</label><input type="text" id="footerCopyright" placeholder="例：© 2024 星辰科技 版权所�?></div> <div class="form-group"><label>ICP备案�?/label><input type="text" id="footerIcp" placeholder="例：粤ICP备XXXXXXXX�?></div> <hr style="border-color:var(--border);margin:20px 0"> <h3>数据统计</h3> <p class="desc">展示企业核心数据</p> <div class="form-row"><div class="form-group"><label>统计1 标题</label><input type="text" id="stat1Title" value="项目案例" placeholder="例：项目案例"></div><div class="form-group"><label>统计1 数�?/label><input type="text" id="stat1Num" value="500+" placeholder="例：500+"></div></div> <div class="form-row"><div class="form-group"><label>统计2 标题</label><input type="text" id="stat2Title" value="合作伙伴" placeholder="例：合作伙伴"></div><div class="form-group"><label>统计2 数�?/label><input type="text" id="stat2Num" value="200+" placeholder="例：200+"></div></div> <div class="form-row"><div class="form-group"><label>统计3 标题</label><input type="text" id="stat3Title" value="服务客户" placeholder="例：服务客户"></div><div class="form-group"><label>统计3 数�?/label><input type="text" id="stat3Num" value="1000+" placeholder="例：1000+"></div></div> <div class="form-row"><div class="form-group"><label>统计4 标题</label><input type="text" id="stat4Title" value="团队精英" placeholder="例：团队精英"></div><div class="form-group"><label>统计4 数�?/label><input type="text" id="stat4Num" value="80+" placeholder="例：80+"></div></div> <hr style="border-color:var(--border);margin:20px 0"> <h3>客户案例 / 合作伙伴</h3> <p class="desc">展示合作客户Logo和案�?/p> <div id="partnerList"></div> <button class="add-product-btn" onclick="addPartner()">+ 添加合作伙伴</button> <hr style="border-color:var(--border);margin:20px 0"> <h3>FAQ 常见问题</h3> <p class="desc">添加常见问题答疑</p> <div id="faqList"></div> <button class="add-product-btn" onclick="addFaq()">+ 添加问题</button> </div> <div class="sidebar-footer"> <button class="btn-secondary" onclick="resetForm()">重置</button> <button class="btn-primary" onclick="generateSite()"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>生成官网</button> </div> </aside> <main class="preview" id="previewPane"> <div class="preview-toolbar"> <button onclick="generateSite()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>刷新预览</button> <button onclick="downloadSite()"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>下载 HTML</button> </div> <div class="preview-empty" id="previewEmpty"><div class="icon">🏢</div><h3>准备就绪</h3><p>在左侧填写企业信息并选择风格，然后点击「生成官网」即可预览您精美的企业官方网�?/p></div> <iframe class="preview-frame" id="previewFrame" style="display:none" sandbox="allow-scripts allow-same-origin"></iframe> </main> </div> <script> var pid=0,dp=[ {id:++pid,name:"AI 智能分析平台",desc:"基于深度学习的数据分析引擎，帮助企业快速洞察业务趋势，做出数据驱动的智能决策�?,price:"联系获取报价",image:""}, {id:++pid,name:"IoT 物联网网�?,desc:"高性能边缘计算网关，支持多种工业协议，实现设备互联与云端协同�?,price:"¥2,999 �?,image:""}, {id:++pid,name:"智慧云服务平�?,desc:"一站式云端管理平台，提供设备管理、数据分析、远程运维等全方位服务�?,price:"¥9,999/�?,image:""} ]; var tp=[ {id:"modern",name:"现代简�?,thumb:"�?,primary:"#6c5ce7",secondary:"#00cec9",desc:"干净利落，适合科技、互联网企业"}, {id:"vibrant",name:"活力商务",thumb:"�?,primary:"#e17055",secondary:"#fdcb6e",desc:"温暖活力，适合创意、服务类企业"}, {id:"dark",name:"深邃高端",thumb:"�?,primary:"#a29bfe",secondary:"#fd79a8",desc:"高级感强，适合高端品牌、设计机�?}, {id:"classic",name:"经典商务",thumb:"�?,primary:"#2d3436",secondary:"#0984e3",desc:"稳重专业，适合金融、法律、咨询行�?} ]; var ct="modern"; function rP(){var l=document.getElementById("productList"),its=l.querySelectorAll(".product-card");if(its.length===0){l.innerHTML="";dp.forEach(function(p){l.insertAdjacentHTML("beforeend",pC(p));});}} function es(s){return String(s).replace(/&/g,"&").replace(/\u0022/g,""").replace(/</g,"<").replace(/>/g,">");} function pC(p){return'<div class="product-card" datA-id="'+p.id+'"><button class="remove-btn" onclick="removeProduct(this)">\u2715</button><div class="form-group"><label>产品/服务名称</label><input type="text" class="prod-name" value="'+es(p.name)+'" placeholder="输入名称"></div><div class="form-group"><label>描述</label><textarea class="prod-desc" rows="2" placeholder="描述该产品或服务">'+es(p.desc)+'</textarea></div><div class="form-row"><div class="form-group"><label>价格/报价</label><input type="text" class="prod-price" value="'+es(p.price)+'" placeholder="例：¥999"></div><div class="form-group"><label>图片URL（可选）</label><input type="text" class="prod-image" value="'+es(p.image||"")+'" placeholder="产品图片链接"></div></div></div>';} function gP(){return Array.from(document.querySelectorAll("#productList .product-card")).map(function(c){return{id:c.dataset.id,name:c.querySelector(".prod-name").value,desc:c.querySelector(".prod-desc").value,price:c.querySelector(".prod-price").value,image:c.querySelector(".prod-image").value};});} function aP(){document.getElementById("productList").insertAdjacentHTML("beforeend",pC({id:++pid,name:"",desc:"",price:"",image:""}));} function rmv(b){var c=b.closest(".product-card");if(document.querySelectorAll("#productList .product-card").length>1){c.remove();}else{alert("至少保留一个产�?);}} function rT(){var g=document.getElementById("templateGrid");g.innerHTML=tp.map(function(t){return'<div class="template-option'+(t.id===ct?" active":"")+'" data-template="'+t.id+'" onclick="selectTemplate(\u0027'+t.id+'\u0027)"><div class="check">\u2713</div><div class="thumb" style="background:'+t.primary+'">'+t.thumb+'</div><div class="name">'+t.name+'</div><div class="badge-desc">'+t.desc+'</div></div>';}).join("");} function sT(id){ct=id;document.querySelectorAll(".template-option").forEach(function(e){e.classList.remove("active");});document.querySelector('.template-option[data-template="'+id+'"]').classList.add("active");var tt=tp.find(function(t){return t.id===id;});if(tt){document.getElementById("primaryColor").value=tt.primary;document.getElementById("primaryColorText").value=tt.primary;document.getElementById("secondaryColor").value=tt.secondary;document.getElementById("secondaryColorText").value=tt.secondary;}} document.querySelectorAll(".tab").forEach(function(t){t.addEventListener("click",function(){document.querySelectorAll(".tab").forEach(function(x){x.classList.remove("active");});this.classList.add("active");document.querySelectorAll(".form-section").forEach(function(s){s.classList.remove("active");});document.getElementById("sec-"+this.dataset.tab).classList.add("active");});}); document.getElementById("primaryColor").addEventListener("input",function(){document.getElementById("primaryColorText").value=this.value;}); document.getElementById("primaryColorText").addEventListener("input",function(){if(/^#[0-9a-f]{6}$/i.test(this.value))document.getElementById("primaryColor").value=this.value;}); document.getElementById("secondaryColor").addEventListener("input",function(){document.getElementById("secondaryColorText").value=this.value;}); document.getElementById("secondaryColorText").addEventListener("input",function(){if(/^#[0-9a-f]{6}$/i.test(this.value))document.getElementById("secondaryColor").value=this.value;}); function gS(){var d=cD();var h=rTpl(d);document.getElementById("previewEmpty").style.display="none";document.getElementById("previewFrame").style.display="block";document.getElementById("previewFrame").srcdoc=h;} function cD(){return{name:document.getElementById("companyName").value||"企业名称",tagline:document.getElementById("companyTagline").value||"",desc:document.getElementById("companyDesc").value||"",logo:document.getElementById("companyLogo").value||"",year:document.getElementById("companyYear").value||"",size:document.getElementById("companySize").value||"",industry:document.getElementById("companyIndustry").value||"",products:gP(),template:ct,primary:document.getElementById("primaryColor").value,secondary:document.getElementById("secondaryColor").value,font:document.getElementById("fontStyle").value,animation:document.getElementById("animationStyle").value,email:document.getElementById("contactEmail").value||"",phone:document.getElementById("contactPhone").value||"",address:document.getElementById("contactAddress").value||"",wechat:document.getElementById("socialWechat").value||"",weibo:document.getElementById("socialWeibo").value||"",linkedin:document.getElementById("socialLinkedin").value||"",twitter:document.getElementById("socialTwitter").value||"",hours:document.getElementById("businessHours").value||""};} function rTpl(d){ var id=d.template==="dark",bg=id?"#0a0a0f":"#ffffff",tx=id?"#e8e8ed":"#1a1a2e",t2=id?"#8888a0":"#555577",cb=id?"#14141c":"#f8f9fa",bo=id?"#2a2a35":"#e8e8f0",sb=id?"#0e0e16":"#f5f6fa",p=d.primary,ss=d.secondary; var fc='"Inter","Noto Sans SC",sans-serif';if(d.font==="elegant")fc='"Playfair Display","Noto Sans SC",serif';else if(d.font==="rounded")fc='"Nunito","Noto Sans SC",sans-serif'; var xf="";if(d.font==="elegant")xf='<link href="https://fonts.loli.net/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">';else if(d.font==="rounded")xf='<link href="https://fonts.loli.net/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">'; // === NAVIGATION === var nav='<nav style="position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;background:'+bg+'cc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid '+bo+'"><div style="display:flex;align-items:center;gap:12px"><div style="width:36px;height:36px;border-radius:10px;background:'+p+';display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:16px">'+d.name.charAt(0)+'</div><span style="font-weight:700;font-size:16px;color:'+tx+'">'+d.name+'</span></div><div style="display:flex;gap:24px;align-items:center"><a href="#about" style="color:'+t2+';text-decoration:none;font-size:14px;transition:color .2s">关于</a><a href="#products" style="color:'+t2+';text-decoration:none;font-size:14px;transition:color .2s">产品</a><a href="#contact" style="color:'+t2+';text-decoration:none;font-size:14px;transition:color .2s">联系</a><a href="#contact" style="display:inline-flex;padding:8px 20px;background:'+p+';color:#fff;border-radius:8px;text-decoration:none;font-size:13px;font-weight:600">立即咨询</a></div></nav>'; // === HERO === var lh=d.logo?'<img class="hero-logo" src="'+d.logo+'" alt="" style="width:90px;height:90px;object-fit:contain;border-radius:24px;background:'+p+'">':'<div class="hero-logo" style="background:'+p+'">'+d.name.charAt(0)+'</div>'; var mt=[];if(d.industry)mt.push('<span class="meta-item">\ud83d\udd2c '+d.industry+'</span>');if(d.year)mt.push('<span class="meta-item">\ud83d\udcc5 '+d.year+'</span>');if(d.size)mt.push('<span class="meta-item">\ud83d\udc65 '+d.size+'</span>');var mh=mt.length?'<div class="hero-meta">'+mt.join("")+'</div>':""; var ht=d.tagline?'<p class="hero-tagline" style="font-size:clamp(20px,3vw,28px);color:'+t2+';margin-bottom:24px;font-weight:300;line-height:1.5">'+d.tagline+'</p>':""; var hd=d.desc?'<p class="hero-desc" style="font-size:16px;color:'+t2+';max-width:650px;margin:0 auto 32px;line-height:1.9;opacity:0.85">'+d.desc+'</p>':""; var hs='<section class="hero" style="min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:100px 24px 60px;position:relative;overflow:hidden;background:'+bg+'">' +'<div style="position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 30% 20%,'+p+'15 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,'+ss+'12 0%,transparent 50%)"></div>' +'<div style="position:absolute;top:15%;left:10%;width:300px;height:300px;border-radius:50%;border:1px solid '+p+'10;z-index:0"></div>' +'<div style="position:absolute;bottom:20%;right:8%;width:200px;height:200px;border-radius:50%;border:1px solid '+ss+'10;z-index:0"></div>' +'<div class="hero-content" style="position:relative;z-index:1;max-width:900px">'+lh +'<h1 style="font-size:clamp(42px,7vw,72px);font-weight:800;line-height:1.1;margin-bottom:20px;color:'+tx+'"><span style="background:linear-gradient(135deg,'+p+','+ss+');-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">'+d.name+'</span></h1>' +ht+hd+mh +'<div style="display:flex;gap:16px;justify-content:center;flex-wrap:wrap"><a href="#products" class="hero-cta" style="display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:'+p+';color:#fff;border-radius:50px;font-size:16px;font-weight:600;text-decoration:none;box-shadow:0 4px 20px '+p+'44">\u67e5\u770b\u4ea7\u54c1\u4e0e\u670d\u52a1 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>' +'<a href="#contact" style="display:inline-flex;align-items:center;gap:8px;padding:16px 36px;border:2px solid '+bo+';color:'+tx+';border-radius:50px;font-size:16px;font-weight:500;text-decoration:none;transition:all .25s">\u8054\u7cfb\u6211\u4eec</a></div>' +'</div></section>'; // === ABOUT === var as=""; if(d.desc){ as='<section class="section alt" id="about" style="padding:100px 24px;max-width:1200px;margin:0 auto;background:'+sb+'">' +'<div class="section-head" style="text-align:center;margin-bottom:60px"><h2 style="font-size:clamp(30px,4vw,42px);font-weight:700;margin-bottom:12px;color:'+tx+'">\u5173\u4e8e\u6211\u4eec</h2>' +'<div class="accent-line" style="width:64px;height:4px;background:linear-gradient(135deg,'+p+','+ss+');border-radius:2px;margin:16px auto"></div>' +'<p style="font-size:16px;color:'+t2+';max-width:500px;margin:0 auto">\u4e86\u89e3 '+d.name+' \u7684\u6545\u4e8b\u4e0e\u4f7f\u547d</p></div>' +'<div class="about-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start">' +'<div><p style="font-size:16px;color:'+t2+';line-height:2;margin-bottom:20px">'+d.desc+'</p>' +'<p style="font-size:16px;color:'+t2+';line-height:2;margin-bottom:20px">\u6211\u4eec\u59cb\u7ec8\u575a\u6301\u4ee5\u5ba2\u6237\u4e3a\u4e2d\u5fc3\uff0c\u4ee5\u521b\u65b0\u4e3a\u9a71\u52a8\uff0c\u4e0d\u65ad\u7a81\u7834\u6280\u672f\u8fb9\u754c\uff0c\u4e3a\u5168\u7403\u5ba2\u6237\u521b\u9020\u771f\u6b63\u7684\u4ef7\u503c\u3002</p>' +'<div style="display:flex;gap:12px;flex-wrap:wrap"><span style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:'+p+'08;color:'+p+';border-radius:8px;font-size:13px;font-weight:500">\u2713 \u884c\u4e1a\u9886\u5148</span><span style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:'+p+'08;color:'+p+';border-radius:8px;font-size:13px;font-weight:500">\u2713 \u521b\u65b0\u9a71\u52a8</span><span style="display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:'+p+'08;color:'+p+';border-radius:8px;font-size:13px;font-weight:500">\u2713 \u4e13\u4e1a\u56e2\u961f</span></div></div>' +'<div class="about-stats" style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px"><div class="stat-card" style="text-align:center;padding:32px 20px;background:'+cb+';border-radius:16px;border:1px solid '+bo+'"><div style="font-size:40px;font-weight:800;color:'+p+';margin-bottom:4px">500+</div><div style="font-size:14px;color:'+t2+'">\u5408\u4f5c\u5ba2\u6237</div></div><div class="stat-card" style="text-align:center;padding:32px 20px;background:'+cb+';border-radius:16px;border:1px solid '+bo+'"><div style="font-size:40px;font-weight:800;color:'+p+';margin-bottom:4px">99.9%</div><div style="font-size:14px;color:'+t2+'">\u670d\u52a1\u53ef\u7528\u7387</div></div><div class="stat-card" style="text-align:center;padding:32px 20px;background:'+cb+';border-radius:16px;border:1px solid '+bo+'"><div style="font-size:40px;font-weight:800;color:'+p+';margin-bottom:4px">50+</div><div style="font-size:14px;color:'+t2+'">\u6280\u672f\u4e13\u5229</div></div></div></div></section>'; } // === VALUES === var vs='<section class="section" style="padding:100px 24px;max-width:1200px;margin:0 auto;background:'+bg+'">' +'<div class="section-head" style="text-align:center;margin-bottom:60px"><h2 style="font-size:clamp(28px,4vw,38px);font-weight:700;margin-bottom:12px;color:'+tx+'">\u6838\u5fc3\u4ef7\u503c\u89c2</h2>' +'<div class="accent-line" style="width:64px;height:4px;background:linear-gradient(135deg,'+p+','+ss+');border-radius:2px;margin:16px auto"></div>' +'<p style="font-size:16px;color:'+t2+';max-width:500px;margin:0 auto">\u575a\u6301\u521b\u65b0\uff0c\u8d62\u5f97\u4fe1\u8d56</p></div>' +'<div class="values-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px">' +'<div style="text-align:center;padding:36px 24px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:36px;margin-bottom:16px">\ud83d\ude80</div><h3 style="font-size:18px;font-weight:700;margin-bottom:8px;color:'+tx+'">\u6280\u672f\u521b\u65b0</h3><p style="font-size:14px;color:'+t2+';line-height:1.7">\u4e0d\u65ad\u63a2\u7d22\u524d\u6cbf\u6280\u672f\uff0c\u6253\u9020\u7ade\u4e89\u529b\u4ea7\u54c1</p></div>' +'<div style="text-align:center;padding:36px 24px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:36px;margin-bottom:16px">\ud83c\udf1f</div><h3 style="font-size:18px;font-weight:700;margin-bottom:8px;color:'+tx+'">\u4e13\u4e1a\u670d\u52a1</h3><p style="font-size:14px;color:'+t2+';line-height:1.7">\u4ee5\u5ba2\u6237\u9700\u6c42\u4e3a\u5bfc\u5411\uff0c\u63d0\u4f9b\u7cbe\u51c6\u9ad8\u6548\u670d\u52a1</p></div>' +'<div style="text-align:center;padding:36px 24px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:36px;margin-bottom:16px">\ud83e\udd1d</div><h3 style="font-size:18px;font-weight:700;margin-bottom:8px;color:'+tx+'">\u5171\u8d62\u5408\u4f5c</h3><p style="font-size:14px;color:'+t2+';line-height:1.7">\u4e0e\u5408\u4f5c\u4f19\u4f34\u5171\u540c\u6210\u957f\uff0c\u521b\u9020\u957f\u671f\u4ef7\u503c</p></div>' +'</div></section>'; // === PRODUCTS === var ph="",ic=["\ud83d\udce6","\ud83d\udce1","\ud83d\udca1","\ud83d\udd0c","\u2699\ufe0f","\ud83c\udf10"],vp=d.products.filter(function(p){return p.name;}); for(var pi=0;pi<vp.length;pi++){var pr=vp[pi];ph+='<div class="prod-card" style="background:'+cb+';border:1px solid '+bo+';border-radius:20px;padding:36px;position:relative;overflow:hidden;transition:all .35s">' +'<div style="width:56px;height:56px;border-radius:16px;background:'+p+'12;color:'+p+';display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:20px">'+ic[pi%ic.length]+'</div>' +'<h3 style="font-size:22px;font-weight:700;margin-bottom:12px;color:'+tx+'">'+pr.name+'</h3>' +'<p style="font-size:14px;color:'+t2+';line-height:1.8;margin-bottom:20px">'+pr.desc+'</p>' +(pr.price?'<div class="prod-price" style="display:inline-block;font-size:20px;font-weight:700;color:'+p+';background:'+p+'10;padding:8px 20px;border-radius:10px">'+pr.price+'</div>':"")+'</div>';} var ps='<section class="section alt" id="products" style="padding:100px 24px;max-width:1200px;margin:0 auto;background:'+sb+'">' +'<div class="section-head" style="text-align:center;margin-bottom:60px"><h2 style="font-size:clamp(30px,4vw,42px);font-weight:700;margin-bottom:12px;color:'+tx+'">\u4ea7\u54c1\u4e0e\u670d\u52a1</h2>' +'<div class="accent-line" style="width:64px;height:4px;background:linear-gradient(135deg,'+p+','+ss+');border-radius:2px;margin:16px auto"></div>' +'<p style="font-size:16px;color:'+t2+';max-width:500px;margin:0 auto">\u63a2\u7d22\u6211\u4eec\u7684\u5168\u9762\u89e3\u51b3\u65b9\u6848</p></div>' +'<div class="prod-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px">'+ph+'</div></section>'; // === TESTIMONIALS === var ts='<section class="section" style="padding:100px 24px;max-width:1200px;margin:0 auto;background:'+bg+'">' +'<div class="section-head" style="text-align:center;margin-bottom:60px"><h2 style="font-size:clamp(28px,4vw,38px);font-weight:700;margin-bottom:12px;color:'+tx+'">\u5ba2\u6237\u8bc4\u4ef7</h2>' +'<div class="accent-line" style="width:64px;height:4px;background:linear-gradient(135deg,'+p+','+ss+');border-radius:2px;margin:16px auto"></div>' +'<p style="font-size:16px;color:'+t2+';max-width:500px;margin:0 auto">\u542c\u542c\u5408\u4f5c\u4f19\u4f34\u600e\u4e48\u8bf4</p></div>' +'<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:24px">' +'<div style="padding:32px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:28px;color:'+p+';margin-bottom:12px;opacity:0.4">\u201c</div><p style="font-size:14px;color:'+t2+';line-height:1.8;margin-bottom:16px;font-style:italic">\u4e0e'+d.name+'\u5408\u4f5c\u7684\u4f53\u9a8c\u975e\u5e38\u68d2\uff0c\u4ed6\u4eec\u7684\u4e13\u4e1a\u80fd\u529b\u548c\u670d\u52a1\u6001\u5ea6\u8ba9\u6211\u4eec\u975e\u5e38\u6ee1\u610f\u3002</p><div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:'+p+';display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px">\u674e</div><div><div style="font-size:14px;font-weight:600;color:'+tx+'">\u674e\u603b</div><div style="font-size:12px;color:'+t2+'">\u67d0\u79d1\u6280\u516c\u53f8 CEO</div></div></div></div>' +'<div style="padding:32px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:28px;color:'+p+';margin-bottom:12px;opacity:0.4">\u201c</div><p style="font-size:14px;color:'+t2+';line-height:1.8;margin-bottom:16px;font-style:italic">'+d.name+'\u7684\u89e3\u51b3\u65b9\u6848\u5e2e\u52a9\u6211\u4eec\u5927\u5e45\u63d0\u5347\u4e86\u8fd0\u8425\u6548\u7387\uff0c\u63a8\u8350\u7ed9\u6240\u6709\u9700\u8981\u6570\u5b57\u5316\u8f6c\u578b\u7684\u4f01\u4e1a\u3002</p><div style="display:flex;align-items:center;gap:12px"><div style="width:40px;height:40px;border-radius:50%;background:'+ss+';display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:14px">\u738b</div><div><div style="font-size:14px;font-weight:600;color:'+tx+'">\u738b\u7ecf\u7406</div><div style="font-size:12px;color:'+t2+'">\u67d0\u96c6\u56e2 CIO</div></div></div></div>' +'</div></section>'; // === CONTACT === var ci=[];if(d.email)ci.push('<div class="contact-item" style="display:flex;align-items:flex-start;gap:16px;padding:18px;background:'+cb+';border:1px solid '+bo+';border-radius:12px;transition:border-color .2s"><div style="width:44px;height:44px;border-radius:12px;background:'+p+'12;color:'+p+';display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">\u2709\ufe0f</div><div><h4 style="font-size:14px;font-weight:600;margin-bottom:3px;color:'+tx+'">\u7535\u5b50\u90ae\u7bb1</h4><p style="font-size:14px;color:'+t2+'">'+d.email+'</p></div></div>'); if(d.phone)ci.push('<div class="contact-item" style="display:flex;align-items:flex-start;gap:16px;padding:18px;background:'+cb+';border:1px solid '+bo+';border-radius:12px"><div style="width:44px;height:44px;border-radius:12px;background:'+p+'12;color:'+p+';display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">\ud83d\udcde</div><div><h4 style="font-size:14px;font-weight:600;margin-bottom:3px;color:'+tx+'">\u8054\u7cfb\u7535\u8bdd</h4><p style="font-size:14px;color:'+t2+'">'+d.phone+'</p></div></div>'); if(d.address)ci.push('<div class="contact-item" style="display:flex;align-items:flex-start;gap:16px;padding:18px;background:'+cb+';border:1px solid '+bo+';border-radius:12px"><div style="width:44px;height:44px;border-radius:12px;background:'+p+'12;color:'+p+';display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">\ud83d\udccd</div><div><h4 style="font-size:14px;font-weight:600;margin-bottom:3px;color:'+tx+'">\u516c\u53f8\u5730\u5740</h4><p style="font-size:14px;color:'+t2+'">'+d.address+'</p></div></div>'); if(d.hours)ci.push('<div class="contact-item" style="display:flex;align-items:flex-start;gap:16px;padding:18px;background:'+cb+';border:1px solid '+bo+';border-radius:12px"><div style="width:44px;height:44px;border-radius:12px;background:'+p+'12;color:'+p+';display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0">\ud83d\udd50</div><div><h4 style="font-size:14px;font-weight:600;margin-bottom:3px;color:'+tx+'">\u8425\u4e1a\u65f6\u95f4</h4><p style="font-size:14px;color:'+t2+'">'+d.hours+'</p></div></div>'); var sh="",sl=[];if(d.wechat)sl.push('<a href="#" style="width:48px;height:48px;border-radius:14px;background:'+cb+';border:1px solid '+bo+';display:flex;align-items:center;justify-content:center;color:'+t2+';text-decoration:none;font-size:20px;transition:all .2s" title="\u5fae\u4fe1\uff1a'+d.wechat+'">\ud83d\udcac</a>'); if(d.weibo)sl.push('<a href="'+d.weibo+'" target="_blank" style="width:48px;height:48px;border-radius:14px;background:'+cb+';border:1px solid '+bo+';display:flex;align-items:center;justify-content:center;color:'+t2+';text-decoration:none;font-size:20px;transition:all .2s" title="\u5fae\u535a">\ud83d\udd17</a>'); if(d.linkedin)sl.push('<a href="'+d.linkedin+'" target="_blank" style="width:48px;height:48px;border-radius:14px;background:'+cb+';border:1px solid '+bo+';display:flex;align-items:center;justify-content:center;color:'+t2+';text-decoration:none;font-size:16px;font-weight:700;transition:all .2s" title="LinkedIn">in</a>'); if(d.twitter)sl.push('<a href="https://twitter.com/'+d.twitter.replace("@","")+'" target="_blank" style="width:48px;height:48px;border-radius:14px;background:'+cb+';border:1px solid '+bo+';display:flex;align-items:center;justify-content:center;color:'+t2+';text-decoration:none;font-size:20px;transition:all .2s" title="Twitter">\ud835\udd4f</a>'); if(sl.length)sh='<div style="display:flex;gap:12px;margin-top:8px;flex-wrap:wrap">'+sl.join("")+'</div>'; var cs='<section class="section alt" id="contact" style="padding:100px 24px;max-width:1200px;margin:0 auto;background:'+sb+'">' +'<div class="section-head" style="text-align:center;margin-bottom:60px"><h2 style="font-size:clamp(30px,4vw,42px);font-weight:700;margin-bottom:12px;color:'+tx+'">\u8054\u7cfb\u6211\u4eec</h2>' +'<div class="accent-line" style="width:64px;height:4px;background:linear-gradient(135deg,'+p+','+ss+');border-radius:2px;margin:16px auto"></div>' +'<p style="font-size:16px;color:'+t2+';max-width:500px;margin:0 auto">\u671f\u5f85\u4e0e\u60a8\u643a\u624b\u5408\u4f5c</p></div>' +'<div class="contact-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:60px">' +'<div style="display:flex;flex-direction:column;gap:14px">'+ci.join("")+sh+'</div>' +'<div class="contact-form-card" style="padding:36px;background:'+cb+';border:1px solid '+bo+';border-radius:20px">' +'<h3 style="font-size:22px;font-weight:700;margin-bottom:24px;color:'+tx+'">\u53d1\u9001\u6d88\u606f</h3>' +'<input type="text" placeholder="\u60a8\u7684\u59d3\u540d" style="width:100%;padding:14px 18px;border:1px solid '+bo+';border-radius:10px;background:'+bg+';color:'+tx+';font-size:15px;font-family:inherit;margin-bottom:14px;outline:none;transition:border .2s">' +'<input type="email" placeholder="\u60a8\u7684\u90ae\u7bb1" style="width:100%;padding:14px 18px;border:1px solid '+bo+';border-radius:10px;background:'+bg+';color:'+tx+';font-size:15px;font-family:inherit;margin-bottom:14px;outline:none;transition:border .2s">' +'<input type="text" placeholder="\u4e3b\u9898" style="width:100%;padding:14px 18px;border:1px solid '+bo+';border-radius:10px;background:'+bg+';color:'+tx+';font-size:15px;font-family:inherit;margin-bottom:14px;outline:none;transition:border .2s">' +'<textarea placeholder="\u7559\u8a00\u5185\u5bb9..." style="width:100%;padding:14px 18px;border:1px solid '+bo+';border-radius:10px;background:'+bg+';color:'+tx+';font-size:15px;font-family:inherit;margin-bottom:20px;outline:none;min-height:120px;resize:vertical;transition:border .2s"></textarea>' +'<button style="padding:14px 36px;background:'+p+';color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .25s;box-shadow:0 4px 14px '+p+'33">\u53d1\u9001\u7559\u8a00</button>' +'</div></div></section>'; // === FOOTER === var fb=id?"#06060a":"#1a1a2e"; var fs_='<footer style="background:'+fb+';color:rgba(255,255,255,0.6);padding:60px 24px 36px;text-align:center">' +'<div style="max-width:1200px;margin:0 auto">' +'<div style="display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px"><div style="width:40px;height:40px;border-radius:12px;background:'+p+';display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px">'+d.name.charAt(0)+'</div><span style="font-size:22px;font-weight:800;color:#fff">'+d.name+'</span></div>' +(d.tagline?'<p style="font-size:14px;line-height:1.8;opacity:0.6;margin-bottom:24px">'+d.tagline+'</p>':"") +'<div style="display:flex;gap:28px;justify-content:center;margin:0 0 24px;flex-wrap:wrap">' +'<a href="#about" style="color:rgba(255,255,255,0.4);text-decoration:none;font-size:14px;transition:color .2s">\u5173\u4e8e\u6211\u4eec</a>' +'<a href="#products" style="color:rgba(255,255,255,0.4);text-decoration:none;font-size:14px;transition:color .2s">\u4ea7\u54c1\u670d\u52a1</a>' +'<a href="#contact" style="color:rgba(255,255,255,0.4);text-decoration:none;font-size:14px;transition:color .2s">\u8054\u7cfb\u6211\u4eec</a>' +(d.email?'<a href="mailto:'+d.email+'" style="color:rgba(255,255,255,0.4);text-decoration:none;font-size:14px;transition:color .2s">\u5546\u52a1\u5408\u4f5c</a>':"") +'</div>' +'<div style="display:flex;gap:16px;justify-content:center;margin-bottom:24px">' +(d.wechat?'<a href="#" style="display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);text-decoration:none;font-size:16px;transition:all .2s">\ud83d\udcac</a>':"") +(d.weibo?'<a href="'+d.weibo+'" style="display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);text-decoration:none;font-size:16px;transition:all .2s">\ud83d\udd17</a>':"") +(d.email?'<a href="mailto:'+d.email+'" style="display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.5);text-decoration:none;font-size:16px;transition:all .2s">\u2709\ufe0f</a>':"") +'</div>' +'<div style="font-size:13px;opacity:0.35;padding-top:24px;border-top:1px solid rgba(255,255,255,0.06)">© '+new Date().getFullYear()+' '+d.name+' \u7248\u6743\u6240\u6709 All Rights Reserved</div>' +'</div></footer>'; // === BACK TO TOP === var btt='<button onclick="window.scrollTo({top:0,behavior:\u0027smooth\u0027})" style="position:fixed;bottom:32px;right:32px;z-index:999;width:48px;height:48px;border-radius:14px;background:'+p+';color:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:0 4px 16px '+p+'44;display:flex;align-items:center;justify-content:center;transition:all .25s">\u2191</button>'; var is='<style>.hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px '+p+'55!important}.hero~.section a[href="#contact"]:hover{border-color:'+p+'!important;color:'+p+'!important}.prod-card:hover{transform:translateY(-8px)!important;box-shadow:0 20px 60px rgba(0,0,0,0.08)!important;border-color:'+p+'33!important}.stat-card{transition:all .3s}.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.05)}.contact-item:hover{border-color:'+p+'33!important}.contact-form-card input:focus,.contact-form-card textarea:focus{border-color:'+p+'!important;box-shadow:0 0 0 3px '+p+'18}.contact-form-card button:hover{opacity:0.92;transform:translateY(-2px);box-shadow:0 8px 24px '+p+'44!important}.values-grid>div{transition:all .3s}.values-grid>div:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.04);border-color:'+p+'33!important}.contact-item{transition:all .2s}@keyframes scrollBounce{0%,100%{opacity:0.5;transform:rotate(45deg) translateY(0)}50%{opacity:1;transform:rotate(45deg) translateY(4px)},footerCopyright:document.getElementById("footerCopyright").value||"",footerIcp:document.getElementById("footerIcp").value||"",stat1Title:document.getElementById("stat1Title").value||"",stat1Num:document.getElementById("stat1Num").value||"",stat2Title:document.getElementById("stat2Title").value||"",stat2Num:document.getElementById("stat2Num").value||"",stat3Title:document.getElementById("stat3Title").value||"",stat3Num:document.getElementById("stat3Num").value||"",stat4Title:document.getElementById("stat4Title").value||"",stat4Num:document.getElementById("stat4Num").value||"",partners:gParts(),faqs:gFaqs()};@media(max-width:768px){.about-grid,.contact-grid{grid-template-columns:1fr!important;gap:40px!important}.about-stats,.values-grid{grid-template-columns:1fr!important}.prod-grid{grid-template-columns:1fr!important}.hero-content h1{font-size:32px!important}.section,.section.alt{padding:60px 20px!important}.hero-meta{flex-direction:column;gap:10px!important}nav{padding:12px 20px!important}}</style>'; var ijs="<scr"+"ipt>var obs=new IntersectionObserver(function(e){e.forEach(function(en){if(en.isIntersecting){en.target.style.opacity='1';en.target.style.transform='translateY(0)'}})},{threshold:0.1});document.querySelectorAll('.hero-content,.section-head,.about-grid>div,.about-text,.stat-card,.prod-card,.values-grid>div,.contact-item,.contact-form-card').forEach(function(el,i){el.style.opacity='0';el.style.transform='translateY(24px)';el.style.transition='opacity 0.7s ease, transform 0.7s ease';el.style.transitionDelay=(i*0.08)+'s';obs.observe(el)});document.querySelectorAll('a[href^='#']'.replace(/^/,'')).forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();var t=document.querySelector(this.getAttribute('href'));if(t)t.scrollIntoView({behavior:'smooth'})})});var nav=document.querySelector('nav');window.addEventListener('scroll',function(){if(window.scrollY>80){nav.style.borderBottomColor='+JSON.stringify(bo)+';nav.style.boxShadow='0 2px 20px rgba(0,0,0,0.06)'}else{nav.style.borderBottomColor='transparent';nav.style.boxShadow='none'}});"+"</scr"+"ipt>"; // === PARTNERS / CLIENTS === var cs_ps="";if(d.partners&&d.partners.length){var cph="";d.partners.forEach(function(r,ix){cph+='<div style="background:'+cb+';border:1px solid '+bo+';border-radius:16px;padding:32px;text-align:center"><div style="width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:'+p+'12;display:flex;align-items:center;justify-content:center;font-size:28px;color:'+p+'">'+(r.logo?'<img src="'+r.logo+'" style="width:100%;height:100%;object-fit:contain;border-radius:50%">':r.name.charAt(0))+'</div><h4 style="font-size:16px;font-weight:700;margin-bottom:8px;color:'+tx+'">'+r.name+'</h4><p style="font-size:13px;color:'+t2+';line-height:1.6">'+r.desc+'</p></div>';});cs_ps='<section class="section" id="partners" style="padding:100px 24px;max-width:1200px;margin:0 auto;background:'+bg+'"><div class="section-head" style="text-align:center;margin-bottom:60px"><h2 style="font-size:clamp(28px,4vw,38px);font-weight:700;margin-bottom:12px;color:'+tx+'">合作伙伴</h2><div class="accent-line" style="width:64px;height:4px;background:linear-gradient(135deg,'+p+','+ss+');border-radius:2px;margin:16px auto"></div><p style="font-size:16px;color:'+t2+';max-width:500px;margin:0 auto">携手优秀企业，共创美好未�?/p></div><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px">'+cph+'</div></section>';} // === FAQ === var faqs="";if(d.faqs&&d.faqs.length){var fh="";d.faqs.forEach(function(f,ix){fh+='<div style="background:'+cb+';border:1px solid '+bo+';border-radius:12px;padding:20px 24px;margin-bottom:12px"><h4 style="font-size:15px;font-weight:600;color:'+tx+';margin-bottom:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==="none"?"block":"none"">'+f.q+'<span style="font-size:20px;color:'+t2+'">+</span></h4><p style="font-size:14px;color:'+t2+';line-height:1.7;display:none">'+f.a+'</p></div>';});faqs='<section class="section alt" id="faq" style="padding:100px 24px;max-width:900px;margin:0 auto;background:'+sb+'"><div class="section-head" style="text-align:center;margin-bottom:50px"><h2 style="font-size:clamp(28px,4vw,38px);font-weight:700;margin-bottom:12px;color:'+tx+'">常见问题</h2><div class="accent-line" style="width:64px;height:4px;background:linear-gradient(135deg,'+p+','+ss+');border-radius:2px;margin:16px auto"></div></div>'+fh+'</section>';} // === STATS === var sts="";if(d.stat1Title&&d.stat1Title!==(void 0)){var sitems=[];if(d.stat1Title)sitems.push('<div class="stat-card" style="text-align:center;padding:32px 16px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:clamp(36px,5vw,48px);font-weight:800;color:'+p+';margin-bottom:6px">'+d.stat1Num+'</div><div style="font-size:14px;color:'+t2+'">'+d.stat1Title+'</div></div>');if(d.stat2Title)sitems.push('<div class="stat-card" style="text-align:center;padding:32px 16px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:clamp(36px,5vw,48px);font-weight:800;color:'+p+';margin-bottom:6px">'+d.stat2Num+'</div><div style="font-size:14px;color:'+t2+'">'+d.stat2Title+'</div></div>');if(d.stat3Title)sitems.push('<div class="stat-card" style="text-align:center;padding:32px 16px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:clamp(36px,5vw,48px);font-weight:800;color:'+p+';margin-bottom:6px">'+d.stat3Num+'</div><div style="font-size:14px;color:'+t2+'">'+d.stat3Title+'</div></div>');if(d.stat4Title)sitems.push('<div class="stat-card" style="text-align:center;padding:32px 16px;background:'+cb+';border:1px solid '+bo+';border-radius:16px"><div style="font-size:clamp(36px,5vw,48px);font-weight:800;color:'+p+';margin-bottom:6px">'+d.stat4Num+'</div><div style="font-size:14px;color:'+t2+'">'+d.stat4Title+'</div></div>');sts='<section class="section" style="padding:80px 24px;max-width:1200px;margin:0 auto;background:'+sb+'"><div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px">'+sitems.join("")+'</div></section>';} return '<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>'+d.name+' - \u5b98\u65b9\u7f51\u7ad9'+xf+''+nav+hs+as+vs+ps+cs_ps+ts+cs+fs_+faqs+btt+is+ijs+' '; } function dS(){var d=cD();var o=rTpl(d);var b=new Blob([o],{type:"text/html;charset=utf-8"});var u=URL.createObjectURL(b);var a=document.createElement("a");a.href=u;a.download=d.name+"_官方网站.html";document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(u);} var pid2=0,pid3=0; function pCard(p){return '
';} function addFaq(){var l=document.getElementById("faqList");l.insertAdjacentHTML("beforeend",fCard({id:++pid3,q:"",a:""}));} function removeFaq(b){b.closest(".product-card").remove();} function gFaqs(){return Array.from(document.querySelectorAll("#faqList .product-card")).map(function(c){return{q:c.querySelector(".f-q").value,a:c.querySelector(".f-a").value};}).filter(function(f){return f.q;});} function submitContact(btn){ var form = btn.closest(".contact-form-card"); var name = form.querySelector("input[placeholder*=\u60a8\u7684\u59d3\u540d]"); var email = form.querySelector("input[type=email]"); var subject = form.querySelector("input[placeholder*=\u4e3b\u9898]"); var content = form.querySelector("textarea"); if(!name||!email||!name.value||!email.value){alert("\u8bf7\u586b\u5199\u59d3\u540d\u548c\u90ae\u7bb1");return;} var data = {name:name.value,email:email.value,subject:subject?subject.value:"",content:content?content.value:""}; fetch("/api/contact",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(data)}) .then(function(r){return r.json();}) .then(function(r){ if(r.ok){ name.value="";email.value="";if(subject)subject.value="";if(content)content.value=""; var d=document.createElement("div");d.style.cssText="position:fixed;top:20px;left:50%;transform:translateX(-50%);background:#00b894;color:#fff;padding:16px 32px;border-radius:12px;font-size:15px;font-weight:600;z-index:99999;box-shadow:0 4px 20px rgba(0,0,0,0.2)"; d.textContent="\u606d\u559c\uff0c\u7559\u8a00\u5df2\u53d1\u9001\u6210\u529f\uff01"; document.body.appendChild(d);setTimeout(function(){d.remove();},3000); } else {alert(r.msg||"\u53d1\u9001\u5931\u8d25");} }).catch(function(){alert("\u7f51\u7edc\u5f02\u5e38\uff0c\u8bf7\u91cd\u8bd5");}); } function rF(){if(!confirm("确定要重置所有内容吗�?))return;document.getElementById("companyName").value="星辰科技";document.getElementById("companyTagline").value="用智慧科技，创造无限可�?;document.getElementById("companyDesc").value="我们是一家专注于人工智能与物联网技术的创新企业，致力于为全球客户提供领先的智能解决方案。自成立以来，我们始终坚持以技术创新为核心驱动力，打造了多款深受市场认可的产品�?;document.getElementById("companyLogo").value="";document.getElementById("companyYear").value="2020";document.getElementById("companySize").value="50-200�?;document.getElementById("companyIndustry").value="人工智能 · 物联�?;document.getElementById("contactEmail").value="hello@star-tech.com";document.getElementById("contactPhone").value="+86 400-888-9999";document.getElementById("contactAddress").value="北京市海淀区中关村科技园区创新大厦18�?;document.getElementById("socialWechat").value="StarTech_AI";document.getElementById("socialWeibo").value="@星辰科技官方";document.getElementById("socialTwitter").value="@startech";document.getElementById("socialLinkedin").value="";document.getElementById("businessHours").value="周一至周�?09:00 - 18:00";sT("modern");pid=0;var l=document.getElementById("productList");l.innerHTML="";dp.forEach(function(p){p.id=++pid;l.insertAdjacentHTML("beforeend",pC(p));});document.getElementById("previewEmpty").style.display="flex";document.getElementById("footerCopyright").value="© 2024 星辰科技 版权所�?;document.getElementById("footerIcp").value="";document.getElementById("stat1Title").value="项目案例";document.getElementById("stat1Num").value="500+";document.getElementById("stat2Title").value="合作伙伴";document.getElementById("stat2Num").value="200+";document.getElementById("stat3Title").value="服务客户";document.getElementById("stat3Num").value="1000+";document.getElementById("stat4Title").value="团队精英";document.getElementById("stat4Num").value="80+";document.getElementById("partnerList").innerHTML="";document.getElementById("faqList").innerHTML="";document.getElementById("previewEmpty").style.display="flex";document.getElementById("previewFrame").style.display="none";} function generateSite(){return gS();} function collectData(){return cD();} function renderTemplate(d){return rTpl(d);} function downloadSite(){return dS();} // ���������� function publishSite(){ var d = collectData(); var html = renderTemplate(d); var slug = d.name.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g,"").substring(0,30) || "mysite"; if(!confirm("�� " + d.name + " ����������������: /site/" + slug + "\\nȷ�Ϸ�����")) return; var btn = document.querySelector("[onclick*=\\"publishSite\\"]"); btn.disabled = true; btn.textContent = "������..."; fetch("/api/publish", {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({slug:slug, company:d.name, html:html})}) .then(function(r){return r.json();}) .then(function(r){ btn.disabled = false; btn.innerHTML = "����������"; if(r.ok){ document.getElementById("publishUrl").textContent = window.location.origin + r.url; document.getElementById("publishDialog").style.display = "flex"; } else { alert("����ʧ��: " + (r.msg||"δ֪����")); } }).catch(function(e){ btn.disabled = false; alert("�������: "+e.message); }); } // �رշ������� function closePublishDialog(){ document.getElementById("publishDialog").style.display = "none"; } // �������� function copyPublishUrl(){ var url = document.getElementById("publishUrl").textContent; navigator.clipboard.writeText(url).then(function(){ alert("�����Ѹ��ƣ�"); }).catch(function(){ prompt("��������:", url); }); } function resetForm(){return rF();} function addProduct(){return aP();} function removeProduct(b){return rmv(b);} function selectTemplate(id){return sT(id);} rP();rT();