
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打招呼 - 相亲服务平台</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: "San Francisco", "Roboto", "思源黑体简体", sans-serif;
            background-color: #FAF7F5;
            height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
        }
        .status-bar {
            height: 44px;
            background-color: transparent;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            color: #333;
            font-size: 12px;
        }
        .header {
            background-color: white;
            padding: 16px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            position: relative;
        }
        .back-button {
            margin-right: 16px;
            color: #333;
        }
        .page-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
            flex: 1;
            text-align: center;
        }
        .header-action {
            color: #333;
        }
        .chat-header {
            background-color: white;
            padding: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom: 1px solid #f0f0f0;
        }
        .user-profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 12px;
        }
        .user-avatar {
            width: 70px;
            height: 70px;
            border-radius: 35px;
            object-fit: cover;
            border: 2px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 8px;
        }
        .user-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 4px;
        }
        .user-meta {
            font-size: 12px;
            color: #999;
            margin-bottom: 4px;
        }
        .user-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 8px;
        }
        .user-tag {
            background-color: #f5f5f5;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 10px;
            color: #666;
        }
        .greeting-counter {
            background-color: #f5f5f5;
            border-radius: 16px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #666;
            margin-top: 12px;
        }
        .greeting-counter-value {
            color: #F87171;
            font-weight: 600;
            margin: 0 4px;
        }
        .chat-body {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
        }
        .chat-message {
            margin-bottom: 16px;
            max-width: 80%;
        }
        .chat-message.received {
            align-self: flex-start;
        }
        .chat-message.sent {
            align-self: flex-end;
        }
        .chat-message-content {
            background-color: white;
            border-radius: 18px;
            padding: 12px 16px;
            font-size: 14px;
            color: #333;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            position: relative;
        }
        .chat-message.sent .chat-message-content {
            background-color: #FAD2CF;
            color: #333;
        }
        .chat-message-time {
            font-size: 10px;
            color: #999;
            margin-top: 4px;
            text-align: right;
        }
        .chat-input-container {
            background-color: white;
            padding: 12px 16px;
            border-top: 1px solid #f0f0f0;
        }
        .chat-input-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .chat-input {
            flex: 1;
            border: 1px solid #eee;
            border-radius: 24px;
            padding: 10px 16px;
            font-size: 14px;
            color: #333;
            background-color: #f9f9f9;
        }
        .chat-input:focus {
            outline: none;
            border-color: #FAD2CF;
            background-color: white;
        }
        .chat-input-actions {
            display: flex;
            margin-left: 12px;
        }
        .chat-input-action {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            background-color: #f9f9f9;
            margin-left: 8px;
        }
        .chat-input-action.send {
            background-color: #FAD2CF;
            color: white;
        }
        .quick-replies {
            display: flex;
            overflow-x: auto;
            gap: 8px;
            padding-bottom: 4px;
        }
        .quick-reply {
            background-color: #f9f9f9;
            border: 1px solid #eee;
            border-radius: 16px;
            padding: 8px 16px;
            font-size: 12px;
            color: #666;
            white-space: nowrap;
        }
        .quick-reply:hover {
            background-color: #f0f0f0;
        }
        .system-message {
            display: flex;
            justify-content: center;
            margin: 16px 0;
        }
        .system-message-content {
            background-color: rgba(0,0,0,0.05);
            border-radius: 16px;
            padding: 8px 16px;
            font-size: 12px;
            color: #666;
        }
        .empty-chat {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #999;
            text-align: center;
            padding: 0 32px;
        }
        .empty-chat-icon {
            font-size: 48px;
            color: #ddd;
            margin-bottom: 16px;
        }
        .empty-chat-text {
            font-size: 14px;
            margin-bottom: 8px;
        }
        .empty-chat-subtext {
            font-size: 12px;
            color: #aaa;
        }
        .verified-badge {
            background-color: #A3D8F4;
            color: white;
            border-radius: 10px;
            padding: 1px 6px;
            font-size: 10px;
            margin-left: 6px;
            display: inline-flex;
            align-items: center;
        }
        .verified-badge i {
            margin-right: 2px;
            font-size: 8px;
        }
        .match-rate {
            background-color: #FAD2CF;
            color: white;
            border-radius: 12px;
            padding: 2px 8px;
            font-size: 10px;
            display: inline-flex;
            align-items: center;
            margin-left: 6px;
        }
        .match-rate i {
            margin-right: 2px;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <!-- iOS 状态栏 -->
    <div class="status-bar">
        <div>9:41</div>
        <div class="flex space-x-1">
            <i class="fas fa-signal"></i>
            <i class="fas fa-wifi"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>

    <!-- 页面头部 -->
    <div class="header">
        <a href="match.html" class="back-button">
            <i class="fas fa-chevron-left"></i>
        </a>
        <div class="page-title">打招呼</div>
        <a href="#" class="header-action">
            <i class="fas fa-ellipsis-v"></i>
        </a>
    </div>

    <!-- 聊天头部 - 用户信息 -->
    <div class="chat-header">
        <div class="user-profile">
            <img src="https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="用户头像" class="user-avatar">
            <div class="user-name">
                小雨, 28
                <span class="verified-badge">
                    <i class="fas fa-check"></i> 已认证
                </span>
                <span class="match-rate">
                    <i class="fas fa-percentage"></i> 95%
                </span>
            </div>
            <div class="user-meta">北京 · 金融分析师</div>
            <div class="user-tags">
                <div class="user-tag">爱旅行</div>
                <div class="user-tag">喜欢烹饪</div>
                <div class="user-tag">希望遇到一个真诚的人</div>
            </div>
        </div>
        <div class="greeting-counter">
            今日剩余打招呼次数: <span class="greeting-counter-value">7</span>/10
            <i class="fas fa-question-circle ml-1 text-gray-400" title="每天可免费向10位用户打招呼"></i>
        </div>
    </div>

    <!-- 聊天内容区 -->
    <div class="chat-body">
        <div class="empty-chat">
            <div class="empty-chat-icon">
                <i class="far fa-comment-dots"></i>
            </div>
            <div class="empty-chat-text">还没有聊天记录</div>
            <div class="empty-chat-subtext">发送一条消息开始对话吧</div>
        </div>
    </div>

    <!-- 聊天输入框 -->
    <div class="chat-input-container">
        <div class="chat-input-wrapper">
            <input type="text" class="chat-input" placeholder="输入消息...">
            <div class="chat-input-actions">
                <button class="chat-input-action">
                    <i class="fas fa-smile"></i>
                </button>
                <button class="chat-input-action send">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        <div class="quick-replies">
            <button class="quick-reply">你好，很高兴认识你！</button>
            <button class="quick-reply">看了你的资料，感觉我们很合拍</button>
            <button class="quick-reply">我也喜欢旅行，去过哪些地方？</button>
            <button class="quick-reply">周末有空一起喝咖啡吗？</button>
            <button class="quick-reply">想了解你更多</button>
        </div>
    </div>

    <script>
        // 快捷回复点击事件
        document.querySelectorAll('.quick-reply').forEach(button => {
            button.addEventListener('click', function() {
                const chatBody = document.querySelector('.chat-body');
                const emptyChat = document.querySelector('.empty-chat');
                const messageText = this.textContent;
                
                // 移除空状态
                if (emptyChat) {
                    emptyChat.remove();
                }
                
                // 创建消息元素
                const messageElement = document.createElement('div');
                messageElement.className = 'chat-message sent';
                messageElement.innerHTML = `
                    <div class="chat-message-content">${messageText}</div>
                    <div class="chat-message-time">刚刚</div>
                `;
                
                // 添加到聊天区域
                chatBody.appendChild(messageElement);
                
                // 滚动到底部
                chatBody.scrollTop = chatBody.scrollHeight;
                
                // 更新剩余次数
                const counterElement = document.querySelector('.greeting-counter-value');
                let remainingCount = parseInt(counterElement.textContent);
                if (remainingCount > 0) {
                    counterElement.textContent = (remainingCount - 1).toString();
                }
                
                // 模拟系统消息
                setTimeout(() => {
                    const systemMessage = document.createElement('div');
                    systemMessage.className = 'system-message';
                    systemMessage.innerHTML = `
                        <div class="system-message-content">
                            <i class="fas fa-info-circle mr-1"></i> 消息已发送，对方会在看到后回复你
                        </div>
                    `;
                    chatBody.appendChild(systemMessage);
                    chatBody.scrollTop = chatBody.scrollHeight;
                }, 1000);
            });
        });
        
        // 发送按钮点击事件
        document.querySelector('.chat-input-action.send').addEventListener('click', function() {
            const input = document.querySelector('.chat-input');
            const messageText = input.value.trim();
            
            if (messageText) {
                const chatBody = document.querySelector('.chat-body');
                const emptyChat = document.querySelector('.empty-chat');
                
                // 移除空状态
                if (emptyChat) {
                    emptyChat.remove();
                }
                
                // 创建消息元素
                const messageElement = document.createElement('div');
                messageElement.className = 'chat-message sent';
                messageElement.innerHTML = `
                    <div class="chat-message-content">${messageText}</div>
                    <div class="chat-message-time">刚刚</div>
                `;
                
                // 添加到聊天区域
                chatBody.appendChild(messageElement);
                
                // 清空输入框
                input.value = '';
                
                // 滚动到底部
                chatBody.scrollTop = chatBody.scrollHeight;
                
                // 更新剩余次数
                const counterElement = document.querySelector('.greeting-counter-value');
                let remainingCount = parseInt(counterElement.textContent);
                if (remainingCount > 0) {
                    counterElement.textContent = (remainingCount - 1).toString();
                }
                
                // 模拟系统消息
                setTimeout(() => {
                    const systemMessage = document.createElement('div');
                    systemMessage.className = 'system-message';
                    systemMessage.innerHTML = `
                        <div class="system-message-content">
                            <i class="fas fa-info-circle mr-1"></i> 消息已发送，对方会在看到后回复你
                        </div>
                    `;
                    chatBody.appendChild(systemMessage);
                    chatBody.scrollTop = chatBody.scrollHeight;
                }, 1000);
            }
        });
        
        // 输入框回车发送
        document.querySelector('.chat-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.chat-input-action.send').click();
                e.preventDefault();
            }
        });
    </script>
</body>
</html>