baskbuddy-zby/pages/greet-success.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>青核 Youthome - 发送成功</title>
  <link rel="stylesheet" href="../colors_and_type.css">
  <style>
    /* ============================================================
     * 打招呼/好友申请发送成功弹窗页
     * Traework 设计系统 - 仅浅色主题
     * ============================================================ */

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      height: 100%;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'SF Pro Display', 'Helvetica Neue', sans-serif;
      background: #F7F8FA;
      color: #1F1F1F;
      min-height: 100vh;
      overflow: hidden;
    }

    /* 页面容器 - 模拟底层页面模糊 */
    .page-container {
      width: 375px;
      min-height: 812px;
      margin: 0 auto;
      background: #F7F8FA;
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* 模糊背景层（模拟底层页面） */
    .blur-bg {
      position: absolute;
      inset: 0;
      filter: blur(20px);
      -webkit-filter: blur(20px);
      opacity: 0.6;
      z-index: 1;
    }

    .blur-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(38, 194, 187, 0.08) 0%, rgba(247, 248, 250, 0.5) 100%);
    }

    /* 半透明遮罩 */
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 2;
    }

    /* ============================================================
     * 弹窗主体
     * ============================================================ */
    .modal-wrapper {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 32px;
    }

    .modal-card {
      width: 100%;
      background: #FFFFFF;
      border-radius: 20px;
      padding: 28px 20px 20px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      position: relative;
      animation: modalIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes modalIn {
      0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    /* 关闭按钮 */
    .close-btn {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #F0F1F3;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
      border: none;
    }

    .close-btn:active {
      transform: scale(0.9);
      background: #E8E8E8;
    }

    .close-btn svg {
      width: 14px;
      height: 14px;
      stroke: #8C8C8C;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    /* 成功图标 */
    .success-icon-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
    }

    .success-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: rgba(82, 196, 26, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      animation: iconPop 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
    }

    @keyframes iconPop {
      0% {
        transform: scale(0);
      }
      60% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
      }
    }

    .success-icon::before {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      background: rgba(82, 196, 26, 0.06);
      z-index: -1;
    }

    .success-icon svg {
      width: 32px;
      height: 32px;
      stroke: #52C41A;
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 30;
      stroke-dashoffset: 30;
      animation: checkDraw 0.4s ease 0.4s forwards;
    }

    @keyframes checkDraw {
      to {
        stroke-dashoffset: 0;
      }
    }

    /* 标题区 */
    .modal-title {
      text-align: center;
      font-size: 19px;
      font-weight: 700;
      color: #1F1F1F;
      margin-bottom: 6px;
    }

    .modal-subtitle {
      text-align: center;
      font-size: 13px;
      color: #8C8C8C;
      margin-bottom: 18px;
      line-height: 1.5;
    }

    /* 分隔线 */
    .divider {
      height: 1px;
      background: #F0F1F3;
      margin: 0 -20px 16px;
    }

    /* 用户卡片 */
    .user-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: #F7F8FA;
      border-radius: 12px;
      margin-bottom: 12px;
    }

    .user-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .user-info {
      flex: 1;
      min-width: 0;
    }

    .user-name {
      font-size: 15px;
      font-weight: 600;
      color: #1F1F1F;
      margin-bottom: 5px;
    }

    .user-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .tag {
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 11px;
      font-weight: 500;
      background: #E6F7F6;
      color: #26C2BB;
      white-space: nowrap;
    }

    .tag.secondary {
      background: #F0F1F3;
      color: #595959;
    }

    /* 消息预览 */
    .message-preview {
      background: #FFFFFF;
      border: 1px solid #E8E8E8;
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 20px;
      display: flex;
      gap: 8px;
    }

    .msg-label {
      flex-shrink: 0;
      font-size: 12px;
      color: #8C8C8C;
      line-height: 1.5;
    }

    .msg-content {
      flex: 1;
      font-size: 13px;
      color: #595959;
      line-height: 1.5;
      word-break: break-all;
    }

    /* 按钮区 */
    .modal-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .btn-primary {
      width: 100%;
      height: 44px;
      border-radius: 8px;
      background: linear-gradient(135deg, #54CAC5 0%, #26C2BB 100%);
      color: #FFFFFF;
      font-size: 15px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 8px rgba(38, 194, 187, 0.25);
      transition: all 0.2s ease;
    }

    .btn-primary:active {
      transform: scale(0.98);
      box-shadow: 0 1px 4px rgba(38, 194, 187, 0.2);
    }

    .btn-primary svg {
      width: 16px;
      height: 16px;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .btn-secondary {
      width: 100%;
      height: 44px;
      border-radius: 8px;
      background: #F7F8FA;
      color: #595959;
      font-size: 14px;
      font-weight: 500;
      border: 1px solid #E8E8E8;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .btn-secondary:active {
      background: #F0F1F3;
    }

    .btn-secondary svg {
      width: 15px;
      height: 15px;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
  </style>
</head>
<body>
  <div class="page-container">
    <!-- 模糊背景 -->
    <div class="blur-bg"></div>

    <!-- 半透明遮罩 -->
    <div class="overlay"></div>

    <!-- 弹窗 -->
    <div class="modal-wrapper">
      <div class="modal-card">
        <!-- 关闭按钮 -->
        <button class="close-btn" id="btn-close" aria-label="关闭">
          <svg viewBox="0 0 24 24">
            <line x1="18" y1="6" x2="6" y2="18"></line>
            <line x1="6" y1="6" x2="18" y2="18"></line>
          </svg>
        </button>

        <!-- 成功图标 -->
        <div class="success-icon-wrap">
          <div class="success-icon">
            <svg viewBox="0 0 24 24">
              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
              <polyline points="22 4 12 14.01 9 11.01"></polyline>
            </svg>
          </div>
        </div>

        <!-- 标题 -->
        <div class="modal-title">发送成功</div>
        <div class="modal-subtitle">对方收到你的打招呼消息</div>

        <div class="divider"></div>

        <!-- 用户卡片 -->
        <div class="user-card"><div class="user-avatar" style="background: linear-gradient(135deg, #FFEEDD, #FFB980);">
</div>
          
          <div class="user-info">
            <div class="user-name">林小夏</div>
            <div class="user-tags">
              <span class="tag">同校</span>
              <span class="tag secondary">计算机学院</span>
            </div>
          </div>
        </div>

        <!-- 打招呼内容预览 -->
        <div class="message-preview">
          <span class="msg-label">打招呼：</span>
          <span class="msg-content">同学你好，想认识一下</span>
        </div>

        <!-- 按钮区 -->
        <div class="modal-actions">
          <button class="btn-primary" id="btn-chat">
            <svg viewBox="0 0 24 24">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            发送消息
          </button>
          <button class="btn-secondary" id="btn-back">
            <svg viewBox="0 0 24 24">
              <line x1="19" y1="12" x2="5" y2="12"></line>
              <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
            返回推荐
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 关闭弹窗
    document.getElementById('btn-close').addEventListener('click', function() {
      console.log('关闭弹窗，不保留草稿');
    });

    // 发送消息
    document.getElementById('btn-chat').addEventListener('click', function() {
      console.log('进入聊天页');
    });

    // 返回推荐
    document.getElementById('btn-back').addEventListener('click', function() {
      console.log('返回交友推荐列表');
    });

    // 点击遮罩关闭
    document.querySelector('.overlay').addEventListener('click', function() {
      console.log('点击遮罩关闭弹窗');
    });
  </script>
</body>
</html>