cms-SiteForge/examples/V8_33_五套主题真实页面_离线交互预览.html

<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SiteForge V8.33 · 五主题对比预览</title><style>
*{box-sizing:border-box}body{margin:0;background:#edf2f7;color:#152b43;font:14px/1.55 system-ui,-apple-system,"Microsoft YaHei",sans-serif}header{background:#fff;border-bottom:1px solid #d9e4ed;padding:16px clamp(16px,4vw,50px);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}h1{margin:0;font-size:21px;letter-spacing:-.04em}header p{margin:3px 0 0;color:#66788a;font-size:12px}.pill{font-size:11px;border-radius:30px;background:#e7f4ec;color:#267346;padding:5px 11px}.tool{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:16px clamp(16px,4vw,50px);background:#fff;border-bottom:1px solid #dce4ed}.tool label{display:grid;gap:6px;font-size:12px;font-weight:700;color:#64788d}.tool select{background:#fff;border:1px solid #cbd7e2;border-radius:9px;padding:10px 12px;min-width:142px;color:#14283f;min-height:40px;font:inherit}.devices{display:flex;background:#f0f4f8;padding:4px;border-radius:10px;gap:4px}.devices button{border:0;border-radius:7px;background:transparent;padding:10px 15px;cursor:pointer;color:#526980}.devices button[aria-pressed="true"]{background:#12385d;color:#fff}main{padding:20px 16px 60px;display:grid;justify-items:center;gap:12px}.frame{width:100%;max-width:100%;height:min(78vh,850px);min-height:490px;background:#fff;overflow:hidden;box-shadow:0 18px 50px #17406420;border:1px solid #d4e0ed;border-radius:12px;transition:width .2s}.frame iframe{width:100%;height:100%;border:0;background:#fff}.hint{font-size:12px;text-align:center;color:#5f7185;max-width:760px}@media(max-width:700px){h1{font-size:17px}.tool{gap:9px}.tool label,.tool select{width:100%}.devices{width:100%}.devices button{flex:1}main{padding:10px}.frame{min-height:480px;height:70vh}}
</style></head><body><header><div><h1>SiteForge · 五套主题实际页面</h1><p>V8.33 融合验证 · 14 类页面 · 电脑 / 平板 / 手机</p></div><span class="pill">本地交互演示 · 不修改真实网站</span></header><div class="tool"><label>行业主题<select id="theme"><option value="automotive">汽车出口</option><option value="industrial">工业建材</option><option value="corporate">企业商务</option><option value="minimal">极简展示</option><option value="trade-pro">Trade Pro · 外贸 B2B</option></select></label><label>页面类型<select id="page"><option value="home">首页</option><option value="listing">产品列表</option><option value="product">产品详情</option><option value="brand">品牌页面</option><option value="about">关于我们</option><option value="contact">联系我们</option><option value="article">新闻详情</option><option value="case">项目案例</option><option value="service">解决方案</option><option value="faq">常见问题</option><option value="category">分类详情</option><option value="search">站内搜索</option><option value="standard">普通页面</option><option value="notfound">404 页面</option></select></label><div class="devices" role="group" aria-label="屏幕尺寸"><button type="button" data-width="100%" aria-pressed="true">电脑</button><button type="button" data-width="820px" aria-pressed="false">平板</button><button type="button" data-width="390px" aria-pressed="false">手机</button></div></div><main><div class="frame" id="frame"><iframe id="preview" sandbox="" title="主题页面实际渲染"></iframe></div><p class="hint" id="status" role="status">使用真实主题的模板和样式生成预览，内容为演示数据；本演示禁用画布内脚本，业务交互应在真实站点验收。</p></main><script type="application/json" id="pages-data">{"automotive":{"home":"\u003c!doctype html>\u003chtml lang=\"zh-CN\">\u003chead>\u003cmeta charset=\"UTF-8\">\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\u003cbase href=\"/\">\u003ctitle>创造有影响力的网站\u003c/title>\u003cmeta name=\"description\" content=\"从完整主题出发，连接产品、品牌和客户。\">\u003cmeta property=\"og:type\" content=\"website\">\u003cmeta property=\"og:title\" content=\"创造有影响力的网站\">\u003cmeta property=\"og:description\" content=\"从完整主题出发，连接产品、品牌和客户。\">\u003cmeta name=\"theme-color\" content=\"#0e1c2c\">\u003cmeta name=\"robots\" content=\"index,follow\">\u003cstyle id=\"theme-assets\">:root{--accent:#ecb75c;--ink:#f6f7fa;--body:#101318}*{box-sizing:border-box}body{margin:0;background:#f7f7f7;color:#1b232c;font:16px/1.65 Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif}a{text-decoration:none;color:inherit}img{max-width:100%;object-fit:cover}.utility{height:32px;display:flex;justify-content:space-between;align-items:center;background:#090d13;color:#919da8;padding:0 5%;font-size:10px;letter-spacing:2px}.header{height:90px;background:#121922;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:24px}.brand{font-size:22px;font-weight:780;display:flex;align-items:center;gap:14px;line-height:1.15}.brand small{display:block;font-size:9px;color:#9ba4b4;letter-spacing:2.5px;margin-top:5px}.mark{background:var(--accent);border-radius:3px;color:#111;padding:10px;font-size:19px}.header nav{display:flex;flex-wrap:wrap;gap:26px;font-size:12px;letter-spacing:1px}.header nav a:hover{color:var(--accent)}.nav-cta{border:1px solid #505a62;padding:12px 17px;color:#e6c893;font-size:11px;letter-spacing:1px}.hero{background:radial-gradient(circle at 80% 55%,#2d4359 0%,#141e2c 34%,#0b121b 75%);color:white;min-height:580px}.hero-inner{max-width:1450px;margin:auto;padding:70px 5% 50px;display:grid;grid-template-columns:51% 49%;align-items:center;min-height:520px}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:700;color:#e9b962}.glow{display:inline-block;width:8px;height:8px;background:#efbf6e;border-radius:10
const data=JSON.parse(document.getElementById('pages-data').textContent);const t=document.getElementById('theme'),p=document.getElementById('page'),f=document.getElementById('preview'),frame=document.getElementById('frame');function render(){const markup=data[t.value]?.[p.value]||'<p>未找到当前页面</p>';f.srcdoc=markup;document.getElementById('status').textContent='当前：'+t.selectedOptions[0].textContent+' · '+p.selectedOptions[0].textContent+'。这是实际模板与样式的离线静态预览，图文均为演示数据。';}t.addEventListener('change',render);p.addEventListener('change',render);document.querySelectorAll('[data-width]').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('[data-width]').forEach(x=>x.setAttribute('aria-pressed',String(x===b)));frame.style.width=b.dataset.width;}));render();
</script></body></html>