cfc/cfc-desktop-pet/src/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Xaf Pet</title>
<link rel="stylesheet" href="animations.css" />
<style>
  html, body {
    width: 100%; height: 100%; margin: 0; overflow: hidden;
    background: transparent !important;
    -webkit-app-region: no-drag;
  }
  #pet-stage {
    position: fixed; inset: 0; display: flex; align-items: flex-end;
    justify-content: center; pointer-events: none;
    background: transparent !important;
  }
  #pet {
    position: relative; width: 120px; height: 140px; pointer-events: auto;
    cursor: pointer; user-select: none;
    -webkit-app-region: no-drag;
  }
  #pet-body {
    position: relative; width: 100%; height: 100%;
    transform-origin: 50% 100%;
    cursor: pointer; --face: 1;
  }
  #pet img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
  /* 胸部热区：悬停 5s → 站手跟随（纯 hover，无需按键） */
  #chest {
    position: absolute; left: 50%; top: 16%; width: 55%; height: 42%;
    transform: translateX(-50%);
    pointer-events: auto; cursor: pointer; background: transparent;
  }
  #bubble {
    position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%);
    background: rgba(255,255,255,0.95); border: 2px solid #4A9BD7;
    border-radius: 12px; padding: 6px 12px;
    font: 13px/1.4 'PingFang SC', sans-serif; color: #333;
    white-space: nowrap; display: none; box-shadow: 0 2px 8px rgba(0,0,0,.12);
    pointer-events: none;
  }
  #bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #4A9BD7;
  }
  /* 右键菜单 */
  #context-menu {
    position: absolute; display: none;
    background: #fff; border: 1px solid #ccc; border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0,0,0,.15); padding: 4px 0;
    min-width: 120px; z-index: 9999; pointer-events: auto;
  }
  #context-menu .item {
    padding: 6px 16px; font-size: 13px; cursor: pointer; color: #333;
  }
  #context-menu .item:hover { background: #f0f6ff; }
  #context-menu .divider { height: 1px; background: #e0e0e0; margin: 4px 0; }
</style>
</head>
<body>
<div id="pet-stage">
  <div id="pet">
    <div id="pet-body">
      <img id="pet-img" src="" alt="pet" draggable="false" />
    </div>
    <div id="chest"></div>
    <div id="bubble"></div>
  </div>
</div>
<!-- 右键菜单 -->
<div id="context-menu">
  <div class="item" data-action="settings">设置</div>
  <div class="item" data-action="passthrough">鼠标穿透</div>
  <div class="divider"></div>
  <div class="item" data-action="quit">退出</div>
</div>
<script src="animation-gen.js"></script>
<script src="pet-engine.js"></script>
<script src="pet-pose.js"></script>
<script src="bridge.js"></script>
<script src="interactions.js"></script>
</body>
</html>