<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>虚拟电脑</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Microsoft Yahei,sans-serif;}
.desktop{
  width:100vw;height:100vh;
  background:#222630;
  background-image:url('');
  background-size:cover;
  overflow:hidden;
  position:relative;
}
.icon{
  width:80px;text-align:center;color:#fff;
  position:absolute;top:30px;left:30px;
  cursor:pointer;
}
.icon img{width:48px;height:48px;object-fit:contain;}
.icon p{font-size:13px;margin-top:4px;text-shadow:1px 1px 2px #000;}
.icon2{
  width:80px;text-align:center;color:#fff;
  position:absolute;top:130px;left:30px;
  cursor:pointer;
}
.icon2 img{width:48px;height:48px;object-fit:contain;}
.icon2 p{font-size:13px;margin-top:4px;text-shadow:1px 1px 2px #000;}
.window{
  width:520px;height:360px;background:#f0f0f0;
  border:2px solid #666;
  position:absolute;display:none;
  box-shadow:3px 3px 12px #0005;
}
.titlebar{
  height:28px;background:#3355aa;color:#fff;
  padding:4px 8px;display:flex;justify-content:space-between;
  align-items:center;cursor:move;
}
.closeBtn{
  width:20px;height:20px;background:#dd4444;border:none;color:white;
  cursor:pointer;
}
.content{
  padding:12px;height:calc(100% - 28px);overflow:auto;
}
</style>
</head>
<body>
<div class="desktop">
  <!-- 图标1：泣音实验记录 -->
  <div class="icon" ondblclick="openWindow('ocDoc')">
    <img src="https://cdn-icons-png.flaticon.com/512/1159/1159622.png">
    <p>实验记录.txt</p>
  </div>
  <!-- 图标2：蛙暖暖档案 -->
  <div class="icon2" ondblclick="openWindow('frogDoc')">
    <img src="https://cdn-icons-png.flaticon.com/512/1159/1159622.png">
    <p>蛙暖暖档案.txt</p>
  </div>

  <!-- 窗口：泣音 -->
  <div class="window" id="ocDoc">
    <div class="titlebar" onmousedown="startDrag(this.parentElement,event)">
      实验记录.txt
      <button class="closeBtn" onclick="closeWindow('ocDoc')">×</button>
    </div>
    <div class="content">
      <h3>实验体 442号｜泣音</h3>
      <p>【日志】今日状态稳定，项圈心电监测正常……</p>
      <p>机械猫实验体，编号442。</p>
      <p>可以在这里继续写你的OC故事。</p>
    </div>
  </div>

  <!-- 窗口：蛙暖暖 -->
  <div class="window" id="frogDoc">
    <div class="titlebar" onmousedown="startDrag(this.parentElement,event)">
      蛙暖暖档案.txt
      <button class="closeBtn" onclick="closeWindow('frogDoc')">×</button>
    </div>
    <div class="content">
      <h3>实验体 338号｜蛙暖暖</h3>
      <p>无性别实验体，42岁，天蝎座。</p>
      <p>铁质头饰带有惩罚功能，灰蓝色头发。</p>
    </div>
  </div>

</div>

<script>
function openWindow(id){
  const win = document.getElementById(id);
  win.style.display = "block";
  win.style.left = "120px";
  win.style.top = "80px";
}
function closeWindow(id){
  document.getElementById(id).style.display = "none";
}

let dragWin = null;
let offsetX,offsetY;
function startDrag(win,evt){
  dragWin = win;
  offsetX = evt.clientX - win.getBoundingClientRect().left;
  offsetY = evt.clientY - win.getBoundingClientRect().top;
  document.addEventListener('mousemove',onDrag);
  document.addEventListener('mouseup',stopDrag);
}
function onDrag(evt){
  if(!dragWin) return;
  dragWin.style.left = (evt.clientX - offsetX)+'px';
  dragWin.style.top = (evt.clientY - offsetY)+'px';
}
function stopDrag(){
  dragWin = null;
  document.removeEventListener('mousemove',onDrag);
  document.removeEventListener('mouseup',stopDrag);
}
</script>
</body>
</html>
