4 lines
733 KiB
HTML
4 lines
733 KiB
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.31 · 汽车主题交互预览</title><style>
|
||
|
|
*{box-sizing:border-box}body{margin:0;background:#e9eef5;font-family:system-ui,-apple-system,'Microsoft YaHei',sans-serif;color:#23374c}header{min-height:65px;background:white;border-bottom:1px solid #d9e2ec;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px clamp(16px,3vw,35px)}.title{font-size:15px;font-weight:850}.title span{color:#e97542;margin-left:9px;font-size:12px}.controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}select,button{background:#f1f5f9;color:#193149;border:1px solid #dbe3ea;border-radius:8px;min-height:36px;padding:6px 12px;font-size:12px;cursor:pointer}button.active{background:#193b56;color:white}.hint{font-size:12px;color:#6e8397;margin:12px auto;text-align:center;padding:0 12px}.stage{display:flex;justify-content:center;padding:0 15px 40px}.screen{width:min(100%,1400px);flex:0 0 auto;max-width:100%;min-width:0;height:calc(100vh - 135px);min-height:540px;border-radius:12px;border:1px solid #cad5e0;background:white;box-shadow:0 25px 70px #30486128;overflow:hidden;transition:width .3s ease}.screen iframe{width:100%;height:100%;border:0;background:white}button:focus-visible,select:focus-visible{outline:3px solid #ee8455;outline-offset:2px}@media(max-width:690px){header{align-items:stretch}.controls{width:100%}.title{width:100%}.screen{height:calc(100vh - 186px);min-height:540px}.stage{padding-inline:5px}}</style></head><body><header><div class="title">SITEFORGE <span>汽车主题 1.4.0 · 参考 Magic Bridge Auto</span></div><div class="controls"><label for="pg">页面</label><select id="pg"></select><button data-size="1440" class="active">电脑</button><button data-size="768">平板</button><button data-size="390">手机</button></div></header><p class="hint">本预览由 SiteForge 真实静态构建输出生成，使用虚构车型资料；图片未提供时显示占位图。页面跳转请使用上方选择框。</p><div class="stage"><div class="screen" id="screen"><iframe id="view" title="汽车主题实际静态构建预览" sandbox="allow-scripts" referrerpolicy="no-referrer"></iframe></div></div><script id="pages" type="application/json">{"首页": "<!doctype html><html lang=\"zh-CN\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>首页<\/title><meta name=\"description\" content=\"探索更广阔的出行可能\"><meta property=\"og:type\" content=\"website\"><meta property=\"og:title\" content=\"首页\"><meta property=\"og:description\" content=\"探索更广阔的出行可能\"><meta property=\"og:url\" content=\"https://automotive.example.test/\"><meta name=\"theme-color\" content=\"#0e1c2c\"><meta name=\"robots\" content=\"index,follow\"><link rel=\"canonical\" href=\"https://automotive.example.test/\"><style>: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
|
||
|
|
const pages=JSON.parse(document.getElementById('pages').textContent);const select=document.getElementById('pg'),frame=document.getElementById('view'),screen=document.getElementById('screen');for(const name of Object.keys(pages))select.add(new Option(name,name));function show(){frame.srcdoc=pages[select.value]};select.onchange=show;document.querySelectorAll('[data-size]').forEach(btn=>btn.onclick=()=>{document.querySelectorAll('[data-size]').forEach(x=>x.classList.remove('active'));btn.classList.add('active');screen.style.width=btn.dataset.size==='1440'?'min(100%,1400px)':btn.dataset.size+'px';});show();
|
||
|
|
</script></body></html>
|