```
<!-- 顶部导航栏 -->
<header class="w-full bg-slate-950/60 backdrop-blur-md border-b border-slate-800 sticky top-0 z-50">
    <div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <div class="bg-indigo-600 text-white p-2 rounded-xl shadow-lg shadow-indigo-500/30">
                <i data-lucide="terminal" class="w-5 h-5"></i>
            </div>
            <span class="font-extrabold text-lg tracking-tight bg-gradient-to-r from-indigo-400 to-violet-400 bg-clip-text text-transparent">jd.gg</span>
        </div>
        <nav class="hidden md:flex items-center space-x-6 text-sm text-slate-400">
            <a href="#projects" class="hover:text-indigo-400 transition-colors">精选项目</a>
            <a href="#services" class="hover:text-indigo-400 transition-colors">开发服务</a>
            <a href="#about" class="hover:text-indigo-400 transition-colors">关于站长</a>
        </nav>
        <a href="mailto:contact@jd.gg" class="bg-indigo-600/20 hover:bg-indigo-600/30 text-indigo-300 border border-indigo-500/30 px-4 py-2 rounded-xl text-xs font-semibold transition-all flex items-center gap-1.5 cursor-pointer">
            <i data-lucide="mail" class="w-3.5 h-3.5"></i>
            联系合作
        </a>
    </div>
</header>

<!-- 主要内容区域 -->
<main class="max-w-6xl mx-auto px-6 py-16 w-full flex-grow flex flex-col items-center justify-center">
    
    <!-- Hero 区域 -->
    <div class="text-center max-w-3xl mx-auto mb-20">
        <div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs font-medium mb-6 backdrop-blur-sm">
            <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
            独立开发者 &amp; 高效网页工具站
        </div>
        <h1 class="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight leading-tight">
            构建极致轻量的<br><span class="bg-gradient-to-r from-indigo-400 via-violet-400 to-pink-400 bg-clip-text text-transparent">浏览器端云端工具矩阵</span>
        </h1>
        <p class="text-slate-400 text-base md:text-lg mb-10 leading-relaxed">
            专注于研发无后端、隐私安全、开箱即用的 Web 端微工具。免安装、纯前端运行，打造高效数字生活体验。
        </p>
        <div class="flex flex-wrap items-center justify-center gap-4">
            <a href="[https://m3u8.jd.gg](https://m3u8.jd.gg)" target="_blank" class="bg-indigo-600 hover:bg-indigo-500 text-white font-semibold px-6 py-3 rounded-2xl shadow-xl shadow-indigo-600/30 transition-all flex items-center gap-2 text-sm">
                <i data-lucide="play-circle" class="w-4 h-4"></i>
                体验 M3U8 工具站
            </a>
            <a href="#projects" class="bg-slate-800/80 hover:bg-slate-800 text-slate-300 border border-slate-700/60 font-semibold px-6 py-3 rounded-2xl transition-all flex items-center gap-2 text-sm">
                查看所有工具
                <i data-lucide="arrow-down" class="w-4 h-4"></i>
            </a>
        </div>
    </div>

    <!-- 项目展示区块 -->
    <div id="projects" class="w-full mb-20">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-2xl font-bold text-white tracking-tight">精选在线工具</h2>
                <p class="text-xs text-slate-400 mt-1">完全基于浏览器端运行的现代化网页服务</p>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 项目卡片 1 -->
            <a href="[https://m3u8.jd.gg](https://m3u8.jd.gg)" target="_blank" class="bg-slate-800/40 hover:bg-slate-800/70 border border-slate-800 hover:border-indigo-500/40 rounded-3xl p-6 transition-all group flex flex-col justify-between">
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <div class="bg-indigo-500/10 text-indigo-400 p-3 rounded-2xl group-hover:scale-110 transition-transform">
                            <i data-lucide="film" class="w-6 h-6"></i>
                        </div>
                        <span class="text-xs font-mono text-emerald-400 bg-emerald-500/10 border border-emerald-500/20 px-2.5 py-1 rounded-full">运行中</span>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2 group-hover:text-indigo-400 transition-colors">M3U8 / HLS 工具箱</h3>
                    <p class="text-xs text-slate-400 leading-relaxed">支持在线流媒体播放、HLS 切片解析与 M3U8 转 MP4 下载转换器。</p>
                </div>
                <div class="mt-6 flex items-center text-xs font-semibold text-indigo-400 gap-1 group-hover:translate-x-1 transition-transform">
                    访问站点 <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
                </div>
            </a>

            <!-- 项目卡片 2 -->
            <div class="bg-slate-800/40 border border-slate-800 rounded-3xl p-6 flex flex-col justify-between opacity-80">
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <div class="bg-violet-500/10 text-violet-400 p-3 rounded-2xl">
                            <i data-lucide="file-text" class="w-6 h-6"></i>
                        </div>
                        <span class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1 rounded-full">开发中</span>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2">Subtitle Studio</h3>
                    <p class="text-xs text-slate-400 leading-relaxed">网页端字幕编辑、SRT/VTT 格式转换及时间轴统一平移与校准工具。</p>
                </div>
                <div class="mt-6 text-xs text-slate-500 font-medium">敬请期待</div>
            </div>

            <!-- 项目卡片 3 -->
            <div class="bg-slate-800/40 border border-slate-800 rounded-3xl p-6 flex flex-col justify-between opacity-80">
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <div class="bg-pink-500/10 text-pink-400 p-3 rounded-2xl">
                            <i data-lucide="image" class="w-6 h-6"></i>
                        </div>
                        <span class="text-xs font-mono text-amber-400 bg-amber-500/10 border border-amber-500/20 px-2.5 py-1 rounded-full">规划中</span>
                    </div>
                    <h3 class="text-lg font-bold text-white mb-2">HEIC Image Converter</h3>
                    <p class="text-xs text-slate-400 leading-relaxed">纯本地的高性能 iPhone 照片格式转换工具，保护隐私，批量无损导出。</p>
                </div>
                <div class="mt-6 text-xs text-slate-500 font-medium">敬请期待</div>
            </div>
        </div>
    </div>

    <!-- 关于/技术栈区块 -->
    <div id="about" class="w-full bg-slate-950/40 border border-slate-800/80 rounded-3xl p-8 md:p-12 flex flex-col md:flex-row items-center justify-between gap-8">
        <div class="max-w-xl">
            <h3 class="text-xl font-bold text-white mb-3">关于 jd.gg</h3>
            <p class="text-xs md:text-sm text-slate-400 leading-relaxed mb-6">
                这里是个人独立开发与微工具实验室。致力于利用现代前端技术栈（Tailwind CSS, Vite, WebAssembly 等）打造响应迅速、体验优雅、无广告干扰的高效在线服务。
            </p>
            <div class="flex flex-wrap gap-2 text-xs">
                <span class="bg-slate-800 text-slate-300 px-3 py-1 rounded-xl border border-slate-700">前端工程化</span>
                <span class="bg-slate-800 text-slate-300 px-3 py-1 rounded-xl border border-slate-700">Web Tooling</span>
                <span class="bg-slate-800 text-slate-300 px-3 py-1 rounded-xl border border-slate-700">UI/UX 设计</span>
            </div>
        </div>
        <div class="bg-indigo-950/50 border border-indigo-500/20 rounded-2xl p-6 text-center shrink-0 w-full md:w-auto">
            <div class="text-indigo-400 font-bold text-sm mb-1">开放与交流</div>
            <p class="text-xs text-slate-400 mb-4">有好的工具想法或合作建议？欢迎随时联系。</p>
            <a href="mailto:contact@jd.gg" class="inline-block bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold px-5 py-2.5 rounded-xl shadow-md transition-all">发送邮件</a>
        </div>
    </div>

</main>

<!-- 页脚 -->
<footer class="w-full text-center py-8 text-xs text-slate-500 border-t border-slate-800 bg-slate-950/60">
    <div class="max-w-6xl mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4">
        <p>&copy; 2026 jd.gg. All Rights Reserved.</p>
        <div class="flex items-center space-x-4">
            <a href="[https://m3u8.jd.gg](https://m3u8.jd.gg)" target="_blank" class="hover:text-slate-300 transition-colors">m3u8.jd.gg</a>
            <span class="text-slate-700">|</span>
            <span class="text-slate-500">Built with Passion &amp; Tailwind CSS</span>
        </div>
    </div>
</footer>

<!-- 初始化图标 -->
<script>
    lucide.createIcons();
</script>

```