

<!--
!lll!!ll!lllllll!!lllllIllllllllllllIllllllllllllllllllllllllllllllllllllllll!llllIlllllIlIl!lllllllll!!!ll!lll!llIlllllll!lll!ll
!!lll!!!!l!!!!!!!!!!l!lllllllll!lllllllllll!llllllll!lIllllllIllllllllllllllll!!lllll!!lll!!lllllll!lll!l!!!!lll!lll!lll!!!!lll!l
!l!l!!!l!l!lllIl!lllll!l!lll!!!!!l!lll!ll!lllllllll!lllll!lllllll!ll!lllllll!lllllllllll!llll!!!lllllllllll!!l!lll!!!!!!lllll!ll!
i!l!!l!!!!!!ll!lll!l!!lllllllIlllllllll!lIllllllllllll!lllll!l!lll!llll!ll!!llll!lllll!llll!llll!!llll!l!Illllllll!llll!!!!!!Ill!
!!!!lll!l!l!!!ll!!!!!!ll!!lll!!!!l!l!llll!!lllllll!l!!!!!!l!llI!llll!lll!!!!!!ll!!!!!!!!!!lllll!llIl!!!l!l!lllll!lIlll!!l!l!l!lll
!!ll!!llll!!!llllllllll!lll!!ll!l!llll!lll!llll!llllIlllll!Illll!l!llll!llllllll!!lllll!!!!!lllllllllIllllllllllllllllIlllllll!ll
!l!llll!ll!lllll!l!ll!llll!lllll!llllllllll!llll!lll!ll!lll!l!lIlllllllll!llll!!lll!llllllllllllllllllllll!lllllIllllll!lllllllIl
!lll!llll!!!llll!!lllllllll!!lll!lll!lll!l!llI!llllllllllllllll!ll!lll!lll!l!l!ll!lllllllll!llllllll!llllllllll!llllllllllllllll!
!!llll!lll!lI!lllllllll!!l!!!lllll!lI!lllllllllllllll!lllIllllllllllllll!lllllllllllllIll!lllllllllllllIlIIllllllllllllllllllllll
l!llllllll!llll!!l!lllIl!llllll!!llIl!llll!lllllllllllllllllllll!ll!ll!lllll!lllllllll!llll!l!lllll!lIl!llllllllllIllll!lllll!!ll
ll!lll!lll!!ll!!l!l!llllllllll!llllllllIlllllllll!llllllllllll!llllll!lIllllllllllll!Illlllllll!l!llll!lllllllllIlllll!llllllll!l
!ll!llll!lllllllllllllll!l!llll!lllllllllllllllllll!llll!lllIIlll!Illlll!l!lllll!ll!ll!lllllllllllllllllllllllllll!lllllllllllIlI
!Ill!l!ll!ll!l!l!lllll!lllllllll!llllllllllllllll!llllllIll:  :lllllIllIlll!lll!llll!l!llllllllllll!llllllIllllllIllll!lIlllllllI
!l!!ll!lll!llllll!l!llll!lll!lllllllllllllll!llllllIllll!!    Ii!l!lIlllllllllllllll!l!llllllIllllllllllllllllIlIlIllllllllllllll
llll!!!!llllll!ll!l!l!!ll!lllll!l!llllllIl!lll!lIIli;           ;>; ^l!Illlllllllllllllllll!llllllllIIlllIllllllllllllllllllllIll
!!l!llll!lll!llllllll!lIlll!lllllllll!llllll!lll!>"                  '  `!!lll!llllIll!!ll!!ll!lllllllllllllllllllll!l!llllllllll
!!lll!lllll!ll!lllllIlIlIllll!l!lll!llllIl!llII!"                       ,!IllllllllI!l!lllllIllllllllIlllll!ll!lIlllIllllllllllll
!l!llllIllllllllllll!lllllIllllll!lllllllII;>^                            !IllllllllIlllllllllllllllllllllIIll!!lllllll!llllllllI
ll!!lllllll!lllllllIllllIllllllllllll!lllli^                               Illllllll!l!lll!llllIllllIll!IlIllllIllllllllllllllIll
!lllllIlllllllllllllllllllllllllllllIlllIi                                 `!IllI!llllllllllIlllIlllllIlIIllllllllllllllllllllIlI
!llIll!lllllllllllIllllllllIllIlllIlllllI:                   \1>`            lIIlIllIlIllllllIlllIllllIIlIlllllllllllllllIlllllll
llll!llllllllllllllIllIllIlIlIlllllllllIi         (k$$Q;    >B$$$$$a\^      IIIlllllllllIlllIIIllIIllll!IIIl!lllllllllllllllllll!
!llllllllllllllllIlllllllllllllll!llllIlI       ,$$$$$$$0` 'z8#Ct(uW$8X     !IllIIllllll!lIIIIllIllllllll!llllllllllll!llllllll!l
lllllIllllllIllIIlIlI!lIl!lllllllllllII!        u$$$$$$$$$$$o:  "+[J$&bj    lIlIllllllllIllllllIllll!llllIIllllllllllll!lIll!llll
!!lllllllIllllllIlIlIlllIlll!IlllllIlll         &$$$Q; :&$$$$$$$Y^          _t}illIllIlIIIIlllIlllllIlllIlIlIlllllll!llIl!lllllll
llllllllllllllIlIlIlIllllIlllll!lIlIlllIII     :$$z  [#$$$$$$@I         ]| :j0bw|!lIIIIIlIIllllIl!IlIIllllIIIlIlll!llll!lll!l!llI
lllllllllllllIlllllIllIIlIllIlIIIlIllllII!     ]$$$B#Y?,!naJ~           >u1;]vqWa{!IlllIlllIlIIllllIlIlIllllllllllllll!llllllllll
lllIlIIIIlIlIllIlllIIIlIIIlIIIlIlIIllllllI!    "&u:         )>          _\nvnuwB8jiIlIllIlIlIIIllllIllIllllllllIlllllllIllllIll!!
!lllIlIlIlIlIlllllIIIIIllIIllIIllIllllllllIl:              t$$n        ~(nYYccd%k}IllIIIlIllllIllIllllllllllllllllll!lllIIlIlllIl
l!llIlIllllIllllllllll!lIlIlIIIllllllllllllll>)>           XW&#w?1][|vLOwpmQJLmJ}!Illl!llllllIllllllllIlllllIl!lllllIllll!llllll!
IllllllIlllllllllllIlllIIlIIlIIlllIlIlllllll-kMQi}        <dW&#bU8$$$$$8#akwOU]IlllIIlIlllllllIIlIllllIIllllllll!lllllIllllIlI!ll
lllllllllllIIlIllllIlIIlIlllIllllIlIlIlllIlIz&ahhom>   ^-L$$Mbwwo$$$8$$$$BWop0{lllIlIIlIllIllIlIlllllllllIlllllllIllllllIlIlIlIll
llllllllIlIllIlIlllIlIllllIlllIIllllIlIlllIIj$B$$$8Madh$$$$$$$$$$$$b-$$$$$$Wb0{IIlIllllllIIlIlllllll!llIlIllllIIIlIIIllllllIlllll
llllllllIIIIlllIlIIIlllIlIlllIlIlIlllIlllIll!0$$$$@MW8@$$$$W$$%&%m  W$$$$$$MkU-llllIIlllllIIlllllllllllllllllIlllllllIllllllIlllI
lllllIllIllIIIllllIlIlllIIIllIlllIllllllIllIII{o$$$%%@$$$$$$l   ')@$$$$$$$B*b\lllllllIlIlllIlllllllIlll!ll!lllIlIIIllllIllll!lIll
llllllllllllllIIllIlllllllllllllllllllllllllllII;;+O$$$$$$$$$$$$$$$$$$$$$BMonllllllIIll;llIIIllllllll!lll!!lllllIllllll!lllllIlll
!lIllllllllllIlllIllllllllllllll!llllllllllIlIllI;I+O$$$$$$$$$$$$$$$$$$$8MaZX[IIllIIIllllIIllllllIlllIllIlIllIllllllllIlIlllIlll!
lllIllllllllIlllllIIlllllllllllll!llllll!llllIlIlIlI!fW$$$$$$$$$$$$$$$8MaqOQLX[lIIIIlIIII;II;IIIIIIIIIIIlllllllllIlllllIlIlllll!l
llllllllllIlllllllIlIllllllllll!llllll!llllllllIlIlllI>(ZB$$$$$$$$%&*kqmZZZOQCXj}(ZWoM&%@$$$$$$$$$$B*wz)<lIIllllIllIIlllIllllllll
lllllllllllllllllIllllllllllllll!lllllll!llllIllIlIIlIlII!]0dpqqwmZ0OOOZOZZmwppwO*$$$$$$$$$$$$$$$$$$$$$$$$ML(!IlllllllIllllllIlll
l!lllllllllll!lllllllllllIlllllllllllllllllllllllIIIIIlIl-xd&#abdppdbko#W%@$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#X?IIIlIlllIllIll!l
lIlIll!llllllllllllllllllllIllllllllllllllllllllllI>}jL#$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8c?lIlllllIlIlll
lllllllllllllllllllll!lllllllllllllllIlIl!IlII!?fm$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Mj<IIIllIllll
!lllllllllIlllllllllllll!lllllIlllIlllIllIIi)d$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$L{iIIlllI
!llIlIllIlllll!llllllllllllllllllIlllllIIim$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$B0z0%$z>IIlI
ll!llIlllIllllllllllllllllllllllIlIllII>%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$JZ$$$$%x-ph_llI
llllIlllIlllllllIlllllllllllllllllllI!q$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$O$$$$$$$$$$@@Ci;I
!llllllllllll!llllllllllIIIlllllIIIIt$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@k$$$$$$$$$$$$$$*c!
lllll!lllllllllllIllIlllIlIIlllllllL$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$a$$$$$$$$$$$$$$$$$$
llllllllllllIlllIllllllIIllllllII~p$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$J$$$$$$$$$$$$$$$$$$$
!lllllllllllllllllIllllllIlIlIIl]o$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$d$$$$$$$$$$$$$$$$$$$
l!lllllll!llllIllIllllllIlIIIll[&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$w$$$$$$$$$$$$$$$$$$$
lllllllllllllllll!llll!llIIlll}%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$bW$$$$$$$$$$$r$$$$$$$$$$$$$$$$$$$
!llIllllllllllIIllllllllIIlll[&$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$U^}Y >8$$$$$$$$$$$$fW$$$$$$$$$$$$$$$$$
!!l!lllllll!llllllllllllllll)%$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$<> W:8+:ubB$$$$$$$$#w$$$[}d$$$$$$$$$$$$$$$
l!!ll!!llllllllllllllllllIlv$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$`i Wo$$$$$$$$$$$$$8qdCc$$$dCa$$$$$$$$$$$$
!Illllll!l!l!lllllllllllII}$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$BkbOIli~-?+~\q$$$$$$$$$
!l!l!lll!lIlllllllllllIlII[$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ohbIIlllIllIl<\q@$$$$$
!llllllIlll!lllll!llIlIlII>Q$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Mho>IlIllIlllIll+C$$$$
ll!l!lllllllllllllllIIlII!f$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Wao]IIIIllllIlIlliw$$$
lllllllllllll!llllllIllI!/$$$$$$$$$$$$$$$$$$$$@$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8ao|lllllllllllIlI_%$$
llIll!lllIIlllll!lllllll/$$$$$$$$$$$$$$$$$$$$&oqZ$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%oaxIlIlllIlIlIlIlI($$
lllllIlIl!lIl!lllllIlll($$$$$$$$$$$$$$$$$$$$B#dr>c$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@*azlllIIlIllllllIlIx$
llllIllllll!llllllllII}$$$$$$$$$$$$$$$8#W&8oqU?II}$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@#aLlIlllllllllllllIlY
l!lllllllllllIIlllllI}$$$$$$$$$$$$$$$$Bom0c!IlIIl~w$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$#amIllllIIIIllIlIllll
!llllIlIlllll!lllllI?$$$$$$$$$$$$$$$$%aZ0rlllIlIIiJ$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$MoqlIIIlIlIlIIlIlIIIl
llllllllllIllll!lll_$$$$$$$$$$$$$$$$8hZ0(!lIlIlIl>C$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$@obqI:;;;;;;;;;;;;IIll
!llllIllllllllllll<B$$$$$$$$$$$$$$$&bOQ1!Illlll!l+p$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$8hqq!:,,,,:,:,:::;:IIl
!!llllll!llIllllI!h$$$$$$$$$$$$$$$&d0L1llIlllllII[$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$%hpd>,:::::::::::;:;Il
!!!lIllIllllllIllZ$$$$$$$$$$$$$$$WbOJ{llIlIllIlIlf$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*kd>:;:;;;;;;;;;;Illl
llIllIIIllIlIlIIv$$$$$$$$$$$$$$$&bOJ}lIIlIIIIlII-k$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$W*h<II;IIIIIIIIIlllll

小归客源码标识-----xgk.pw
-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>电脑显示器模型展示 - 主题鼠版</title>
<style>
  body { 
    font-family: "Microsoft YaHei", sans-serif; 
    text-align: center; 
    padding: 20px; 
    background-color: #fff;
    margin: 0;
  }
  
  /* 输入框控制区域样式 */
  .controls {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: inline-block;
  }
  .controls input {
    padding: 10px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
  }
  .controls button {
    padding: 10px 20px;
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
  }
  .controls button:hover {
    background: #0056b3;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: white;
    border-radius: 8px;
    margin-bottom: 20px;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  /* --- 设定容器为 1280x800 --- */
  .device-container { 
    width: 1280px;   
    height: 800px;   
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    margin-top: 70px;
    background: #fff;
  }
  
  .device-frame { 
    display: block; 
    width: 100%;    
    height: 100%;   
    object-fit: contain; 
  }
  
  /* --- 屏幕定位区 (Screen Mask) --- */
  .screen-mask {
    position: absolute;
    top: 44px;     
    left: 218px;    
    width: 842px;  
    height: 483px;  
    
    overflow: hidden; /* 裁剪掉缩放后多余的空白 */
    border-radius: 0px; 
   
  }
  
  /* --- 核心修改：iframe 样式 --- */
  iframe { 
    /* 1. 设定一个标准的 PC 宽度（例如 1280px），让网页以为自己在宽屏上 */
    width: 1280px; 
    /* 2. 高度设为 100%，或者根据比例设为 720px */
    height: 800px; 
    
    border: none; 
    
    /* 3. 关键：设置缩放的基准点为左上角 */
    transform-origin: 0 0; 
    
    /* 4. 初始缩放比例，JS 会动态覆盖它，这里先给个默认值 */
    transform: scale(0.65); 
  }
</style>
</head>
<body>

<!-- 顶部信息栏 -->
<div class="header">
  <h1>   🖥️主题鼠（ztshu.cn）专用         </h1>
  <!-- 集成时间地点信息 -->
  <div style="text-align: left; font-size: 14px; color: #555;">
   <!-- 网址输入控制区 -->
<div class="controls">
  <input type="text" id="urlInput" placeholder="请输入网站域名 (如: baidu.com)" value="https://ztshu.cn">
  <button onclick="updateWebsite()">更新屏幕内容</button>
</div>
  </div>
</div>


<!-- 模型展示区 -->
<div id="mockupContainer" class="device-container">
  <!-- 内容由JS生成 -->
</div>

<script>
// 页面加载完成后自动执行
window.onload = function() {
  const deviceImageUrl = '/usr/themes/ztshu/21-lion.png'; 
  const container = document.getElementById('mockupContainer');
  
  container.innerHTML = `
    <img src="${deviceImageUrl}" class="device-frame" alt="电脑显示器 模型">
    <div class="screen-mask">
      <iframe id="screenFrame" src="" frameborder="0" useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"></iframe>
    </div>
  `;

  // 加载默认的网址
  updateWebsite();
};

// 更新网站内容的函数
function updateWebsite() {
  let url = document.getElementById('urlInput').value.trim();
  const iframe = document.getElementById('screenFrame');
  const mask = document.querySelector('.screen-mask');

  if (!url) {
    alert('请输入有效的网址！');
    return;
  }

  // 自动补全 http 协议头
  if (!url.startsWith('http://') && !url.startsWith('https://')) {
    url = 'https://' + url;
  }

  // --- 核心逻辑：自动计算缩放比例 ---
  // 1. 获取 mask 的宽度 (你的屏幕可视区域宽度，这里是 842px)
  const maskWidth = mask.offsetWidth; 
  
  // 2. 设定 iframe 的目标宽度 (我们强制网页按 1280px 渲染)
  const targetWidth = 1280; 
  
  // 3. 计算缩放比例 = 可视宽度 / 目标宽度
  const scale = maskWidth / targetWidth; 
  
  // 4. 应用缩放
  iframe.style.transform = `scale(${scale})`;
  
  // 5. 更新网址
  iframe.src = url;
}
</script>

</body>
</html>