SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>建立关系</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  body {
    background-color: #3b3b3b;
    background-image: radial-gradient(#555 2px, transparent 2px);
    background-size: 20px 20px;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
  }
  
  .chat-bubble {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    width: 100%;
    max-width: 320px;
    margin-bottom: 20px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
  }
  
  /* 气泡小尾巴 */
  .chat-bubble::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -8px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid #fff;
  }
  
  .bubble-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 6px;
  }
  
  .bubble-desc {
    font-size: 14px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 12px;
    display: none;
  }
  
  .bubble-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 50px;
    height: 50px;
    background: #e74c3c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.4);
  }
  
  .bubble-icon:active {
    transform: scale(0.9);
  }
  
  .bubble-icon svg {
    width: 30px;
    height: 30px;
    fill: #fff;
  }
  
  /* 底部 App 来源 */
  .bubble-source {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #aaa;
    margin-top: 12px;
  }
  
  .bubble-source svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    fill: #aaa;
  }
  
  /* 切换按钮 */
  .switch-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: 0.2s;
    margin-top: 10px;
  }
  
  .switch-btn:active {
    transform: scale(0.95);
  }
  
  @keyframes popIn {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  
  /* 心形跳动动画 */
  @keyframes beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  .heart-anim {
    animation: beat 1s infinite;
  }
</style>
</head>
<body>

<!-- 气泡卡片 -->
<div class="chat-bubble" onclick="showTip()">
  <div class="bubble-title" id="title">我想和你建立主仆关系</div>
  <div class="bubble-desc" id="desc">成为我的小狗，让微信帮我们记录每日主仆日常。</div>
  
  <!-- 红色图标 -->
  <div class="bubble-icon heart-anim">
    <svg viewBox="0 0 24 24">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </svg>
  </div>
  
  <!-- 底部来源 -->
  <div class="bubble-source">
    <svg viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-5 9h-2v2h-2v-2H9v-2h2v-2h2v2h2v2z"/></svg>
    恋爱笔记 App
  </div>
</div>

<!-- 底部切换按钮 -->
<button class="switch-btn" onclick="switchType()">换一个关系类型</button>

<script>
  // 关系数据
  const types = [
    { t: "我想和你建立主仆关系", d: "成为我的小狗，让微信帮我们记录每日主仆日常。" },
    { t: "我想和你建立姐弟关系", d: "叫一声姐姐，以后我罩着你呀。" },
    { t: "我想和你建立情侣关系", d: "成为我的唯一，让微信记录我们的点点滴滴。" },
    { t: "我想和你建立宿敌关系", d: "看你不顺眼很久了，有本事来对线啊！" },
    { t: "我想和你建立父子关系", d: "叫爸爸，零花钱管够！" }
  ];
  
  let currentIndex = 0;
  
  function switchType() {
    currentIndex = (currentIndex + 1) % types.length;
    const titleEl = document.getElementById('title');
    const descEl = document.getElementById('desc');
    
    // 改变文字
    titleEl.textContent = types[currentIndex].t;
    descEl.textContent = types[currentIndex].d;
    
    // 重新触发动画
    const bubble = document.querySelector('.chat-bubble');
    bubble.style.animation = 'none';
    bubble.offsetHeight; // 触发重排
    bubble.style.animation = 'popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
  }
  
  function showTip() {
    // 点击红心给出提示
    const icon = document.querySelector('.bubble-icon');
    icon.classList.remove('heart-anim');
    setTimeout(() => {
      icon.classList.add('heart-anim');
    }, 10);
    
    // 简单的震动反馈（如果设备支持）
    if (navigator.vibrate) navigator.vibrate(50);
  }
</script>

</body>
</html>