<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #1a365d;
            --secondary: #2c5282;
            --accent: #e53e3e;
            --light: #f7fafc;
            --dark: #2d3748;
            --gray: #718096;
            --success: #38a169;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        /* 头部导航 */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 2rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo img {
            height: 50px;
        }

        .logo h1 {
            font-size: 1.8rem;
            color: var(--primary);
            font-weight: 700;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: var(--accent);
        }

        .contact-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s;
        }

        .contact-btn:hover {
            background: var(--secondary);
        }

        /* 英雄区域 */
        .hero {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 5rem 2rem;
            text-align: center;
        }

        .hero-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h2 {
            font-size: 2.8rem;
            margin-bottom: 1.5rem;
            font-weight: 700;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
        }

        .primary-btn {
            background: var(--accent);
            color: white;
            padding: 1rem 2rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            transition: background 0.3s;
        }

        .primary-btn:hover {
            background: #c53030;
        }

        .secondary-btn {
            background: transparent;
            color: white;
            border: 2px solid white;
            padding: 1rem 2rem;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
        }

        .secondary-btn:hover {
            background: white;
            color: var(--primary);
        }

        /* 服务区域 */
        .services {
            padding: 5rem 2rem;
            background: white;
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }

        .section-title h2 {
            font-size: 2.2rem;
            color: var(--primary);
            margin-bottom: 1rem;
        }

        .section-title p {
            color: var(--gray);
            max-width: 600px;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .service-card {
            background: var(--light);
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .service-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }

        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: var(--dark);
        }

        /* 律师团队 */
        .team {
            padding: 5rem 2rem;
            background: #f0f4f8;
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .team-member {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .member-img {
            height: 250px;
            background: var(--secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 5rem;
        }

        .member-info {
            padding: 1.5rem;
            text-align: center;
        }

        .member-info h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }

        .member-info p {
            color: var(--gray);
            font-style: italic;
        }

        /* 聊天机器人 */
        .chat-bot-container {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }

        .chat-toggle {
            width: 60px;
            height: 60px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s;
        }

        .chat-toggle:hover {
            background: var(--secondary);
            transform: scale(1.05);
        }

        .chat-window {
            width: 350px;
            height: 500px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: absolute;
            bottom: 70px;
            right: 0;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            visibility: hidden;
        }

        .chat-window.active {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        .chat-header {
            background: var(--primary);
            color: white;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chat-header h3 {
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .close-chat {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        .chat-container {
            flex: 1;
            padding: 1rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: #f8f9fa;
        }

        .message {
            max-width: 80%;
            padding: 10px 15px;
            border-radius: 18px;
            position: relative;
        }

        .user-message {
            background: var(--primary);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 5px;
        }

        .ai-message {
            background: white;
            align-self: flex-start;
            border-bottom-left-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .typing-indicator {
            color: var(--gray);
            font-style: italic;
            padding: 10px 15px;
            align-self: flex-start;
        }

        .chat-input {
            display: flex;
            padding: 1rem;
            background: white;
            border-top: 1px solid #e9ecef;
        }

        #messageInput {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
        }

        #sendButton {
            background: var(--primary);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-left: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }

        #sendButton:hover {
            background: var(--secondary);
        }

        /* 页脚 */
        footer {
            background: var(--dark);
            color: white;
            padding: 3rem 2rem;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .footer-column h3 {
            font-size: 1.3rem;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .footer-column h3::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--accent);
        }

        .footer-column p, .footer-column a {
            color: #cbd5e0;
            margin-bottom: 0.8rem;
            display: block;
            text-decoration: none;
        }

        .footer-column a:hover {
            color: white;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }

        .social-links a:hover {
            background: var(--accent);
        }

        .copyright {
            text-align: center;
            padding-top: 2rem;
            margin-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #a0aec0;
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1rem;
            }

            .nav-links {
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;
            }

            .hero h2 {
                font-size: 2rem;
            }

            .cta-buttons {
                flex-direction: column;
            }

            .chat-window {
                width: 100%;
                height: 70vh;
                bottom: 60px;
                right: 0;
                left: 0;
                border-radius: 10px 10px 0 0;
            }
        }
    </style>
</head>
<body>
    <!-- 头部导航 -->
    <header>
        <div class="navbar">
            <div class="logo">
                <i class="fas fa-balance-scale fa-2x"></i>
                <h1>明德律师事务所</h1>
            </div>
            <div class="nav-links">
                <a href="#home">首页</a>
                <a href="#services">服务领域</a>
                <a href="#team">律师团队</a>
                <a href="#cases">成功案例</a>
                <a href="#about">关于我们</a>
                <a href="#contact">联系我们</a>
            </div>
            <button class="contact-btn">预约咨询</button>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section class="hero" id="home">
        <div class="hero-content">
            <h2>专业法律团队，守护您的权益</h2>
            <p>明德律师事务所拥有20年执业经验，专注于民商事诉讼、企业法律顾问、知识产权保护等领域，为客户提供专业、高效的法律服务。</p>
            <div class="cta-buttons">
                <a href="#contact" class="primary-btn">免费咨询</a>
                <a href="#services" class="secondary-btn">了解服务</a>
            </div>
        </div>
    </section>

    <!-- 服务区域 -->
    <section class="services" id="services">
        <div class="section-title">
            <h2>专业法律服务</h2>
            <p>我们提供全方位的法律解决方案，满足您的各种法律需求</p>
        </div>
        <div class="services-grid">
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-gavel"></i>
                </div>
                <h3>民商事诉讼</h3>
                <p>合同纠纷、债权债务、房产纠纷、婚姻继承等各类民商事案件代理</p>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-briefcase"></i>
                </div>
                <h3>企业法律顾问</h3>
                <p>公司设立、股权架构、合同审查、劳动人事、合规管理等企业法律服务</p>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-copyright"></i>
                </div>
                <h3>知识产权</h3>
                <p>商标、专利、著作权申请与保护，知识产权侵权诉讼与维权</p>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-home"></i>
                </div>
                <h3>房地产与建设工程</h3>
                <p>房地产开发、买卖、租赁、建设工程合同纠纷等法律服务</p>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>刑事辩护</h3>
                <p>刑事辩护、取保候审、刑事附带民事诉讼等刑事法律服务</p>
            </div>
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-globe"></i>
                </div>
                <h3>涉外法律事务</h3>
                <p>外商投资、国际贸易、跨境投资并购、涉外仲裁等法律服务</p>
            </div>
        </div>
    </section>

    <!-- 律师团队 -->
    <section class="team" id="team">
        <div class="section-title">
            <h2>精英律师团队</h2>
            <p>我们的律师团队由各领域专家组成，为您提供专业法律支持</p>
        </div>
        <div class="team-grid">
            <div class="team-member">
                <div class="member-img">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="member-info">
                    <h3>张明德</h3>
                    <p>创始合伙人 · 民商事诉讼专家</p>
                </div>
            </div>
            <div class="team-member">
                <div class="member-img">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="member-info">
                    <h3>李思远</h3>
                    <p>高级合伙人 · 企业法律顾问</p>
                </div>
            </div>
            <div class="team-member">
                <div class="member-img">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="member-info">
                    <h3>王浩然</h3>
                    <p>合伙人 · 知识产权专家</p>
                </div>
            </div>
            <div class="team-member">
                <div class="member-img">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="member-info">
                    <h3>赵静雅</h3>
                    <p>资深律师 · 刑事辩护专家</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer id="contact">
        <div class="footer-content">
            <div class="footer-column">
                <h3>明德律师事务所</h3>
                <p>专业、诚信、高效的法律服务团队，致力于为客户提供全方位的法律解决方案。</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-linkedin"></i></a>
                </div>
            </div>
            <div class="footer-column">
                <h3>联系方式</h3>
                <p><i class="fas fa-map-marker-alt"></i> 北京市朝阳区建国路88号明德大厦18层</p>
                <p><i class="fas fa-phone"></i> 010-88889999</p>
                <p><i class="fas fa-envelope"></i> contact@mingdelaw.com</p>
            </div>
            <div class="footer-column">
                <h3>快速链接</h3>
                <a href="#home">首页</a>
                <a href="#services">服务领域</a>
                <a href="#team">律师团队</a>
                <a href="#cases">成功案例</a>
                <a href="#about">关于我们</a>
            </div>
            <div class="footer-column">
                <h3>工作时间</h3>
                <p>周一至周五: 9:00 - 18:00</p>
                <p>周六: 10:00 - 16:00</p>
                <p>周日: 休息</p>
                <p>紧急咨询: 24小时服务</p>
            </div>
        </div>
        <div class="copyright">
            <p>&copy; 2023 明德律师事务所 版权所有</p>
        </div>
    </footer>
<script>
 window.difyChatbotConfig = {
  token: 'ayHeZPPIA8DVo2E2',
  baseUrl: 'http://127.0.0.1',
  inputs: {
    // You can define the inputs from the Start node here
    // key is the variable name
    // e.g.
    // name: "NAME"
  },
  systemVariables: {
    // user_id: 'YOU CAN DEFINE USER ID HERE',
    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
  },
  userVariables: {
    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
    // name: 'YOU CAN DEFINE USER NAME HERE',
  },
 }
</script>
<script
 src="http://127.0.0.1/embed.min.js"
 id="ayHeZPPIA8DVo2E2"
 defer>
</script>
<style>
  #dify-chatbot-bubble-button {
    background-color: #184175 !important;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
  }
</style>
<script>
 window.difyChatbotConfig = {
  token: 'kT90MZSBBfXqtY4H',
  baseUrl: 'http://8.216.37.111',
  inputs: {
    // You can define the inputs from the Start node here
    // key is the variable name
    // e.g.
    // name: "NAME"
  },
  systemVariables: {
    // user_id: 'YOU CAN DEFINE USER ID HERE',
    // conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
  },
  userVariables: {
    // avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
    // name: 'YOU CAN DEFINE USER NAME HERE',
  },
 }
</script>
<script
 src="http://8.216.37.111/embed.min.js"
 id="kT90MZSBBfXqtY4H"
 defer>
</script>
<style>
  #dify-chatbot-bubble-button {
    background-color: #184175 !important;
  }
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
  }
</style>
</body>
</html>