<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>悬浮FAQ按钮页面</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            scroll-behavior: smooth;
        }
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .gradient-bg {
            background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
        }
        .feature-card {
            transition: all 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        .header-shadow {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }
        .bg-tech-pattern {
            background-image: 
                radial-gradient(circle at 25px 25px, rgba(59, 130, 246, 0.1) 2px, transparent 0),
                radial-gradient(circle at 75px 75px, rgba(139, 92, 246, 0.1) 2px, transparent 0);
            background-size: 100px 100px;
        }
        .hero-gradient {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
        }
        .testimonial-card {
            transition: all 0.3s ease;
        }
        .testimonial-card:hover {
            transform: scale(1.02);
        }
        .feature-icon {
            transition: transform 0.3s ease;
        }
        .feature-card:hover .feature-icon {
            transform: scale(1.1);
        }
        .orbit {
            position: absolute;
            border: 1px dashed rgba(59, 130, 246, 0.3);
            border-radius: 50%;
            animation: spin 20s linear infinite;
        }
        .orbit-inner {
            width: 300px;
            height: 300px;
            top: calc(50% - 150px);
            left: calc(50% - 150px);
            animation-direction: reverse;
            animation-duration: 30s;
        }
        .orbit-outer {
            width: 500px;
            height: 500px;
            top: calc(50% - 250px);
            left: calc(50% - 250px);
        }
        .orbit-dot {
            position: absolute;
            width: 8px;
            height: 8px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }
        .ai-glow {
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .floating {
            animation: float 4s ease-in-out infinite;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .pricing-card {
            transition: all 0.3s ease;
        }
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .pricing-card.highlight {
            transform: translateY(-15px) scale(1.02);
        }
        .pricing-card.highlight:hover {
            transform: translateY(-20px) scale(1.02);
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #3b82f6, #8b5cf6);
            border-radius: 10px;
        }
        .cta-gradient {
            background: linear-gradient(120deg, #3b82f6, #8b5cf6, #9333ea);
            background-size: 200% 200%;
            animation: gradient 5s ease infinite;
        }
        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    </style>
</head>
<body>
    <!-- 主页横幅 -->
    <div class="relative bg-gradient-to-r from-blue-50 to-indigo-50 pt-40 pb-32">
        <!-- Decorative Orbit Elements -->
        <div class="orbit orbit-inner absolute">
            <div class="orbit-dot" style="top: 20%; left: 0;"></div>
            <div class="orbit-dot" style="top: 80%; right: 10%;"></div>
        </div>
        <div class="orbit orbit-outer absolute">
            <div class="orbit-dot" style="top: 10%; right: 20%;"></div>
            <div class="orbit-dot" style="top: 50%; left: 0;"></div>
            <div class="orbit-dot" style="bottom: 15%; left: 30%;"></div>
        </div>

        <div class="container mx-auto px-4 sm:px-6 lg:px-8 z-10">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-gray-900 select-none" style="line-height: 120%;">
                    <span class="relative whitespace-nowrap text-blue-600">
                        <svg aria-hidden="true" viewBox="0 0 418 42" class="absolute left-0 top-2/3 h-[0.58em] w-full fill-blue-300/70" preserveAspectRatio="none">
                            <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
                        </svg>
                        <span class="relative">极易</span>
                    </span>
                    云文档 — 安全验证服务
                </h1>
                <p class="mt-6 text-lg tracking-tight text-gray-700">
                    <strong>Surety 安全验证服务</strong>为极易云文档提供坚实的底层安全保障，提供用户鉴权、数据加密与解密服务，采用<strong>AES、RSA</strong>等主流加密算法，确保访问可信、内容保密、操作可靠，保障文档访问与用户数据安全。
                </p>
                
            </div>
        </div>
    </div>

    <!-- 核心功能 -->
    <section id="features" class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold gradient-text mb-4">核心功能</h2>
<!--                <p class="text-lg text-gray-600 max-w-3xl mx-auto">-->
<!--                    我们精心打造的功能套件，为您提供从内容创建到专业呈现的全流程支持-->
<!--                </p>-->
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="feature-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
                    <div class="p-6">
                        <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mb-4">
                            <i class="fas fa-cubes text-blue-500 text-xl feature-icon"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">用户鉴权</h3>
                        <p class="text-gray-600 mb-4">根据用户身份与权限信息，动态生成携带用户标识的加密访问凭证。对接收到的凭证进行身份有效性检查与校验，确保访问请求合法且未过期。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-lg">凭证签发</span>
                            <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-lg">凭证核验</span>
                            <!-- <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-lg">公式块</span>
                            <span class="px-2 py-1 bg-blue-50 text-blue-600 text-xs rounded-lg">代码块</span> -->
                        </div>
                    </div>
                </div>

                <div class="feature-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
                    <div class="p-6">
                        <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4">
                            <i class="fas fa-hand-pointer text-purple-500 text-xl feature-icon"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">明文对象加密解密</h3>
                        <p class="text-gray-600 mb-4">使用AES-256算法进行加密和解密，适用于性能要求较高的弱敏感数据对象。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2 py-1 bg-purple-50 text-purple-600 text-xs rounded-lg">AES-256算法</span>
                            <span class="px-2 py-1 bg-purple-50 text-purple-600 text-xs rounded-lg">弱敏感数据</span>
                            <!-- <span class="px-2 py-1 bg-purple-50 text-purple-600 text-xs rounded-lg">Markdown支持</span> -->
                        </div>
                    </div>
                </div>

                <div class="feature-card bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
                    <div class="p-6">
                        <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mb-4">
                            <i class="fas fa-users text-green-500 text-xl feature-icon"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">强对象加密解密</h3>
                        <p class="text-gray-600 mb-4">使用AES-256算法进行数据加密，并结合RSA算法进行签名和验证，适用于性能要求较低而安全性要求较高的敏感数据对象。</p>
                        <div class="flex flex-wrap gap-2">
                            <span class="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-lg">RSA算法</span>
                            <span class="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-lg">高敏感数据</span>
                            <!-- <span class="px-2 py-1 bg-green-50 text-green-600 text-xs rounded-lg">权限管理</span> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white pt-16 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4 h-13">
                <div class="col-span-1 md:col-span-2">
                    <a class="flex items-center mb-4" href="https://easytransnote.com">
                        <img className='rounded-full' style="width: 2.5rem; height: 2.5rem;" src="https://easytransnote.com/images/icon.5708b1659b3e1acfbc3e63019874abf2png" />
                        <span class="text-xl font-medium ml-2">极易云文档</span>
                    </a>
                    <p class="text-gray-400 mb-6">
                        智能科研协作平台，用AI重新定义学术写作与研究体验，让知识创作更简单高效。
                    </p>
                    <!-- <div class="flex space-x-4">
                        <a href="/" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weixin text-xl"></i>
                        </a>
                        <a href="/" class="text-gray-400 hover:text-white">
                            <i class="fab fa-weibo text-xl"></i>
                        </a>
                        <a href="/" class="text-gray-400 hover:text-white">
                            <i class="fab fa-github text-xl"></i>
                        </a>
                        <a href="/" class="text-gray-400 hover:text-white">
                            <i class="fab fa-zhihu text-xl"></i>
                        </a>
                    </div> -->
                    <!-- <div class="mt-6 flex space-x-4 text-center text-xs text-gray-500">
                        {/* 公安备案号 (必须) */}
                        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=42018502007419" target="_blank" rel="noopener noreferrer" class="inline-flex items-center hover:text-gray-200 transition-colors">
                            <img class="w-4 h-4 mr-1" src={gonganbeian_image} alt="公网安备图标" />
                            <span>鄂公网安备42018502007419号</span>
                        </a>

                        {/* ICP经营许可证 (可选，如果没有或不想显示，直接移除此 a 标签即可) */}
                        <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer" class="hover:text-gray-200 transition-colors">
                            鄂ICP证012389号
                        </a>

                        {/* ICP备案号 (必须) */}
                        <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer" class="hover:text-gray-200 transition-colors">
                            鄂ICP备2024042534号
                        </a>
                    </div> -->
                </div>

<!--                <div>-->
<!--                    <h3 class="font-semibold text-lg mb-4">产品</h3>-->
<!--                    <ul class="space-y-2">-->
<!--                        <li><a href="#features" class="text-gray-400 hover:text-white">功能特性</a></li>-->
<!--                        <li><a href="#ai-features" class="text-gray-400 hover:text-white">AI能力</a></li>-->
<!--                        <li><a href="#testimonials" class="text-gray-400 hover:text-white">用户反馈</a></li>-->
<!--                        <li><a href="#pricing" class="text-gray-400 hover:text-white">定价</a></li>-->
<!--                        <li><a href="#faq" class="text-gray-400 hover:text-white">常见问题</a></li>-->
<!--                    </ul>-->
<!--                </div>-->

<!--                <div>-->
<!--                    <h3 class="font-semibold text-lg mb-4">资源</h3>-->
<!--                    <ul class="space-y-2">-->
<!--                        <li><a href="/" class="text-gray-400 hover:text-white">学习中心</a></li>-->
<!--                        <li><a href="/" class="text-gray-400 hover:text-white">视频教程</a></li>-->
<!--                        <li><a href="/plug.html" target='_blank' class="text-gray-400 hover:text-white">浏览器插件</a></li>-->
<!--                        <li><a href="/ai.html#document" target='_blank' class="text-gray-400 hover:text-white">API文档</a></li>-->
<!--                        <li><a href="/" class="text-gray-400 hover:text-white">帮助中心</a></li>-->
<!--                    </ul>-->
<!--                </div>-->
            </div>

            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <!-- <p class="text-gray-400 text-sm">&copy; {new Date().getFullYear()} 极易云文档. 保留所有权利.</p> -->
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <span class="text-gray-400 hover:text-white text-sm cursor-default">作者：FFCoding</span>
                    <a href="mailto:cgf1730049337@163.com" target='_blank' class="text-gray-400 hover:text-white text-sm">联系方式：cgf1730049337@163.com</a>
                    <a href="https://ffcoding.xyz" class="text-gray-400 hover:text-white text-sm">个人主页：www.ffcoding.xyz</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>
