html制作的PPT（各种风格）提示词

a1117762026-05-29 9:52

「39 html制作的PPT（各种风格）提示词」

/~c2653YlhoP~:/

链接：https://pan.quark.cn/s/d1c14664c484


网页当PPT用



Lieflat HTML Design 模板提示词使用指南

本目录包含Lieflat HTML Design项目的所有模板生成提示词，可以直接提供给AI生成对应内容。

目录结构

复制代码 
模板提示词/
├── 00-使用指南.md (本文件)
├── 01-Deck模板总览.md
├── 02-小红书长文模板总览.md
├── 03-小红书封面模板总览.md
├── [各Deck模板].md (12个)
├── [各长文模板].md (8个)
└── [各封面模板].md (11个)

模板分类

1. Deck 模板 (横向演示文稿)

  • 用途: 投资路演、产品发布、技术分享

  • 比例: 16:9 横向

  • 格式: HTML单文件

  • 数量: 12个模板

模板列表:

2. 小红书长文模板 (3:5竖向长图)

  • 用途: 小红书长图笔记

  • 比例: 3:5 竖向

  • 尺寸: 600x1000px (CSS) / 1200x2000px (导出)

  • 数量: 8个详细模板

模板列表:

3. 小红书封面模板 (3:4竖向封面)

  • 用途: 小红书笔记封面图

  • 比例: 3:4 竖向

  • 尺寸: 600x800px (CSS) / 1200x1600px (导出)

  • 数量: 11个模板

模板列表:

快速选择指南

按内容类型选择

产品测评类

  • Deck: Clean-Review, Geek-Report, Pixel-Report

  • 长文: XHS-Clean-Review-长文, XHS-Geek-Report-长文

  • 封面: XHS-Cover-Clean-Review, XHS-Cover-Pixel-Report

技术分析类

  • Deck: Geek-Report, Dot-Matrix-Light-Dark, Pixel-Report

  • 长文: XHS-Geek-Report-长文, XHS-Terminal-长文

  • 封面: XHS-Cover-Geek-Report, XHS-Cover-Terminal, XHS-Cover-Dot-Matrix

品牌故事类

  • Deck: Editorial, Story-Field, Sunrise

  • 长文: XHS-Editorial-长文

  • 封面: XHS-Cover-Editorial, XHS-Cover-Sunrise

商业分析类

  • Deck: Consulting-Report

  • 长文: XHS-Consulting-Report-长文

  • 封面: XHS-Cover-Consulting-Report

个人思考类

  • Deck: Rain-Notes

  • 长文: XHS-Rain-Notes-长文

  • 封面: XHS-Cover-Rain-Notes

按风格选择

专业/商务

  • Consulting-Report (咨询报告)

  • Clean-Review (极简评测)

  • Editorial (杂志风格)

技术/极客

  • Geek-Report (极客报告)

  • Pixel-Report (像素风格)

  • Dot-Matrix (点阵技术)

  • Terminal (终端风格)

创意/艺术

  • Y2K-Brand-Manual (Y2K风格)

  • Story-Field (故事田野)

  • Studio-Photo (摄影工作室)

情感/氛围

  • Rain-Notes (雨天笔记)

  • Sunrise (日出奢华)

  • Shiny-Tiles (光泽科技)

使用方法

1. 选择合适的模板

根据内容类型和风格偏好，从总览文件中选择合适的模板。

2. 复制提示词

打开对应的MD文件，复制"完整生成提示词"部分的代码块。

3. 填写内容

将提示词中的[填写你的...]占位符替换为实际内容。

4. 提交给AI

将完整的提示词提交给AI，生成HTML文件。

5. 导出使用

将生成的HTML在浏览器中打开，截图或导出为图片使用。

提示词结构说明

每个模板的提示词包含以下部分：

1. 模板概述

  • ID、名称、语言、格式等基本信息

2. 设计风格

  • 核心特征、色彩方案、设计元素

3. 使用场景

  • 最佳使用场景和避免使用场景

4. 目标受众

  • 适合的受众群体

5. 完整生成提示词

  • 可直接使用的代码块提示词

6. 内容建议

  • 示例内容和使用建议

7. 注意事项

  • 重要的注意事项

技术规格

Deck模板

  • 比例: 16:9

  • 推荐分辨率: 1920x1080

  • 交互: 横向滚动

  • 导航: 键盘方向键

长文模板

  • 比例: 3:5

  • CSS尺寸: 600x1000px

  • 导出尺寸: 1200x2000px

  • 格式: 竖向长图

封面模板

  • 比例: 3:4

  • CSS尺寸: 600x800px

  • 导出尺寸: 1200x1600px

  • 格式: 封面图

常见问题

Q: 如何选择合适的模板？

A: 根据内容类型和目标受众选择。参考"快速选择指南"部分。

Q: 可以修改模板吗？

A: 可以，提示词只是参考，可以根据需要调整。

Q: 导出的图片怎么用？

A: 可以直接发布到小红书、朋友圈等平台。

Q: HTML文件怎么打开？

A: 用浏览器打开即可，建议使用Chrome。

Q: 如何保证最佳效果？

A: 确保内容与模板风格匹配，遵循模板的设计规范。

更新日志

  • 2026-05-27: 初始版本，包含34个模板的提示词

联系方式

如有问题或建议，请参考原项目文档。

注意: 本提示词集基于Lieflat HTML Design项目整理，遵循原项目的使用规范和设计理念。
生成代码示例：

复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jetson Edge 3DGS-SLAM - Clean Review</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --color-black: #111110;
            --color-light-gray: #F2F0EC;
            --color-dark-gray: #E6E4E0;
            --color-text: #1A1A18;
            --color-muted: #7A7A72;
            --color-accent: #F05A3E;
            --color-white: #FFFFFF;
            --gradient-red: linear-gradient(135deg, #E83028, #F05540, #F0834A, #F4A96A);
            --max-width: 1180px;
            --slide-padding: 80px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--color-light-gray);
            color: var(--color-text);
            -webkit-font-smoothing: antialiased;
        }

        /* Scroll Container */
        .presentation {
            display: flex;
            width: 1000vw; /* 10 slides */
            height: 100vh;
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
        }

        /* Slide Base */
        .slide {
            width: 100vw;
            height: 100vh;
            min-width: 100vw;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--slide-padding);
            position: relative;
            overflow: hidden;
        }

        .slide-content {
            width: 100%;
            max-width: var(--max-width);
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
        }

        /* Backgrounds */
        .bg-gradient-red {
            background: var(--gradient-red);
        }

        .bg-black {
            background: var(--color-black);
        }

        .bg-light-gray {
            background: var(--color-light-gray);
        }

        .bg-white {
            background: var(--color-white);
        }

        .bg-dark-gray {
            background: var(--color-dark-gray);
        }

        /* Typography */
        .text-white { color: var(--color-white); }
        .text-black { color: var(--color-black); }
        .text-muted { color: var(--color-muted); }
        .text-accent { color: var(--color-accent); }

        .heading-xl {
            font-size: clamp(48px, 5vw, 72px);
            font-weight: 800;
            line-height: 1.05;
            letter-spacing: -0.02em;
        }

        .heading-lg {
            font-size: clamp(36px, 3.5vw, 56px);
            font-weight: 700;
            line-height: 1.1;
            letter-spacing: -0.01em;
        }

        .heading-md {
            font-size: clamp(24px, 2.5vw, 36px);
            font-weight: 700;
            line-height: 1.2;
        }

        .heading-sm {
            font-size: clamp(18px, 1.5vw, 24px);
            font-weight: 600;
            line-height: 1.3;
        }

        .body-lg {
            font-size: clamp(16px, 1.2vw, 20px);
            font-weight: 400;
            line-height: 1.6;
        }

        .body-md {
            font-size: clamp(14px, 1vw, 16px);
            font-weight: 400;
            line-height: 1.6;
        }

        .label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        /* Animations */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), 
                        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .anim-d1 { transition-delay: 0.1s; }
        .anim-d2 { transition-delay: 0.2s; }
        .anim-d3 { transition-delay: 0.3s; }
        .anim-d4 { transition-delay: 0.4s; }
        .anim-d5 { transition-delay: 0.5s; }

        /* Cards */
        .card {
            border-radius: 12px;
            padding: 32px;
            background: var(--color-white);
            border: 2px solid var(--color-dark-gray);
        }

        .card-dark {
            background: var(--color-black);
            border-color: #333;
            color: var(--color-white);
        }

        .card-stat {
            background: var(--color-white);
            border: 2px solid var(--color-dark-gray);
            border-radius: 12px;
            padding: 40px 32px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-stat:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.08);
        }

        /* Grid System */
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .grid-4 {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        /* Navigation */
        .nav-dots {
            position: fixed;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 12px;
            z-index: 1000;
            background: rgba(255,255,255,0.9);
            padding: 12px 24px;
            border-radius: 100px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }

        .nav-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--color-dark-gray);
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .nav-dot.active {
            background: var(--color-accent);
            transform: scale(1.3);
        }

        .nav-dot:hover {
            background: var(--color-muted);
        }

        /* Arrow Controls */
        .nav-arrow {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--color-white);
            border: 2px solid var(--color-dark-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .nav-arrow:hover {
            background: var(--color-black);
            border-color: var(--color-black);
        }

        .nav-arrow:hover svg {
            stroke: var(--color-white);
        }

        .nav-arrow.prev { left: 24px; }
        .nav-arrow.next { right: 24px; }

        .nav-arrow.hidden {
            opacity: 0;
            pointer-events: none;
        }

        /* Progress Bar */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: var(--color-accent);
            z-index: 1000;
            transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Slide Number */
        .slide-number {
            position: absolute;
            top: 40px;
            left: 0;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.1em;
            opacity: 0.4;
        }

        /* Specific Slide Styles */

        /* Slide 1: Cover */
        .slide-cover .slide-content {
            align-items: flex-start;
            justify-content: center;
        }

        .slide-cover .label {
            color: rgba(255,255,255,0.7);
            margin-bottom: 24px;
        }

        .slide-cover .heading-xl {
            color: var(--color-white);
            margin-bottom: 24px;
            max-width: 800px;
        }

        .slide-cover .body-lg {
            color: rgba(255,255,255,0.85);
            max-width: 600px;
        }

        /* Slide 2: Problem */
        .slide-problem .card-dark {
            padding: 48px;
        }

        .problem-list {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 32px;
        }

        .problem-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }

        .problem-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: var(--gradient-red);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        /* Slide 3: Opportunity */
        .stat-number {
            font-size: clamp(36px, 3vw, 48px);
            font-weight: 800;
            color: var(--color-accent);
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-text);
            margin-bottom: 8px;
        }

        .stat-desc {
            font-size: 13px;
            color: var(--color-muted);
            line-height: 1.5;
        }

        /* Slide 5: Process */
        .process-flow {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 48px;
        }

        .process-step {
            flex: 1;
            background: var(--color-white);
            border: 2px solid var(--color-dark-gray);
            border-radius: 12px;
            padding: 32px 24px;
            text-align: center;
            position: relative;
        }

        .process-step-num {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--color-black);
            color: var(--color-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            margin: 0 auto 16px;
        }

        .process-arrow {
            color: var(--color-muted);
            flex-shrink: 0;
        }

        /* Slide 6: Results */
        .result-card {
            background: var(--color-white);
            border: 2px solid var(--color-dark-gray);
            border-radius: 12px;
            padding: 32px;
            text-align: center;
        }

        .result-value {
            font-size: clamp(32px, 2.5vw, 44px);
            font-weight: 800;
            color: var(--color-accent);
            margin-bottom: 8px;
        }

        .result-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--color-text);
        }

        .quote-box {
            margin-top: 48px;
            padding: 32px 40px;
            border-left: 4px solid var(--color-accent);
            background: var(--color-light-gray);
            border-radius: 0 12px 12px 0;
        }

        .quote-text {
            font-size: clamp(18px, 1.5vw, 24px);
            font-weight: 500;
            font-style: italic;
            color: var(--color-text);
            line-height: 1.5;
        }

        /* Slide 8: Comparison Table */
        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 32px;
        }

        .comparison-table th,
        .comparison-table td {
            padding: 20px 24px;
            text-align: left;
            border-bottom: 2px solid var(--color-dark-gray);
        }

        .comparison-table th {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-muted);
            background: transparent;
        }

        .comparison-table td {
            font-size: 15px;
            font-weight: 500;
        }

        .comparison-table tr:last-child td {
            border-bottom: none;
        }

        .comparison-table .highlight-row {
            background: var(--color-white);
            border-radius: 12px;
        }

        .comparison-table .highlight-row td {
            border-bottom: none;
            font-weight: 700;
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 700;
        }

        .badge-success {
            background: rgba(240, 90, 62, 0.1);
            color: var(--color-accent);
        }

        .badge-warn {
            background: rgba(26, 26, 24, 0.06);
            color: var(--color-muted);
        }

        /* Slide 9: Team */
        .team-card {
            background: var(--color-white);
            border: 2px solid var(--color-dark-gray);
            border-radius: 12px;
            padding: 32px;
        }

        .team-role {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-accent);
            margin-bottom: 8px;
        }

        .team-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--color-text);
            margin-bottom: 8px;
        }

        .team-desc {
            font-size: 14px;
            color: var(--color-muted);
            line-height: 1.5;
        }

        .advice-card {
            background: var(--color-black);
            border-radius: 12px;
            padding: 32px;
            color: var(--color-white);
        }

        /* Slide 10: Conclusion */
        .verdict-box {
            background: var(--color-white);
            border: 2px solid var(--color-dark-gray);
            border-radius: 16px;
            padding: 48px;
            text-align: center;
            margin-bottom: 48px;
        }

        .verdict-label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--color-muted);
            margin-bottom: 16px;
        }

        .verdict-text {
            font-size: clamp(28px, 2.5vw, 40px);
            font-weight: 800;
            color: var(--color-text);
            line-height: 1.2;
        }

        .data-bar-container {
            background: var(--color-white);
            border-radius: 12px;
            padding: 40px 48px;
        }

        .data-bar-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
            font-weight: 600;
        }

        .data-bar-track {
            width: 100%;
            height: 12px;
            background: var(--color-dark-gray);
            border-radius: 100px;
            overflow: hidden;
        }

        .data-bar-fill {
            height: 100%;
            background: var(--gradient-red);
            border-radius: 100px;
            width: 0%;
            transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .data-bar-fill.animate {
            width: 100%;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .grid-4 { grid-template-columns: repeat(2, 1fr); }
            .process-flow { flex-wrap: wrap; }
            .process-arrow { display: none; }
        }

        @media (max-width: 768px) {
            .grid-3, .grid-2 { grid-template-columns: 1fr; }
            .slide { padding: 40px 24px; }
            .nav-arrow { display: none; }
        }

        /* Scrollbar hide */
        ::-webkit-scrollbar { display: none; }
        body { -ms-overflow-style: none; scrollbar-width: none; }
    </style>
</head>
<body>
    <!-- Progress Bar -->
    <div class="progress-bar" id="progressBar"></div>

    <!-- Navigation Arrows -->
    <button class="nav-arrow prev" id="prevBtn" onclick="goToSlide(currentSlide - 1)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A1A18" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
    </button>
    <button class="nav-arrow next" id="nextBtn" onclick="goToSlide(currentSlide + 1)">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#1A1A18" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
    </button>

    <!-- Presentation -->
    <div class="presentation" id="presentation">

        <!-- Slide 1: Cover -->
        <section class="slide bg-gradient-red slide-cover" data-slide="0">
            <div class="slide-content">
                <div class="slide-number text-white">01 / 10</div>
                <div class="label fade-up">Clean Review / System Architecture</div>
                <h1 class="heading-xl fade-up anim-d1">Jetson Edge<br>3DGS-SLAM</h1>
                <p class="body-lg fade-up anim-d2">轻量化实时三维高斯泼溅定位与重建系统</p>
                <div style="margin-top: 48px; display: flex; gap: 32px;" class="fade-up anim-d3">
                    <div>
                        <div style="font-size: 32px; font-weight: 800; color: #fff;">45+</div>
                        <div style="font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px;">FPS 实时帧率</div>
                    </div>
                    <div style="width: 1px; background: rgba(255,255,255,0.3);"></div>
                    <div>
                        <div style="font-size: 32px; font-weight: 800; color: #fff;">&lt;4GB</div>
                        <div style="font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px;">显存占用</div>
                    </div>
                    <div style="width: 1px; background: rgba(255,255,255,0.3);"></div>
                    <div>
                        <div style="font-size: 32px; font-weight: 800; color: #fff;">15W</div>
                        <div style="font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px;">TDP 功耗</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Slide 2: Problem Statement -->
        <section class="slide bg-gradient-red slide-problem" data-slide="1">
            <div class="slide-content">
                <div class="slide-number text-white">02 / 10</div>
                <div class="label text-white fade-up" style="margin-bottom: 16px;">Problem Statement</div>
                <h2 class="heading-lg text-white fade-up anim-d1" style="margin-bottom: 40px;">核心痛点</h2>

                <div class="card-dark fade-up anim-d2">
                    <div class="problem-list">
                        <div class="problem-item fade-up anim-d3">
                            <div class="problem-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
                                    <rect x="6" y="4" width="12" height="16" rx="2"></rect>
                                    <line x1="12" y1="8" x2="12" y2="8.01"></line>
                                </svg>
                            </div>
                            <div>
                                <div class="heading-sm" style="color: #fff; margin-bottom: 4px;">嵌入式算力不足</div>
                                <div class="body-md" style="color: rgba(255,255,255,0.6);">现有 NeRF / 3DGS 方法依赖高端 GPU，无法在 Jetson Orin Nano 等边缘设备上实时运行</div>
                            </div>
                        </div>
                        <div class="problem-item fade-up anim-d4">
                            <div class="problem-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
                                    <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
                                    <path d="M2 17l10 5 10-5"></path>
                                    <path d="M2 12l10 5 10-5"></path>
                                </svg>
                            </div>
                            <div>
                                <div class="heading-sm" style="color: #fff; margin-bottom: 4px;">传统 SLAM 渲染缺陷</div>
                                <div class="body-md" style="color: rgba(255,255,255,0.6);">ORB-SLAM3 / LIO-SAM 仅输出稀疏点云，缺乏照片级真实感的新视角渲染能力</div>
                            </div>
                        </div>
                        <div class="problem-item fade-up anim-d5">
                            <div class="problem-icon">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5">
                                    <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                    <polyline points="13 2 13 9 20 9"></polyline>
                                </svg>
                            </div>
                            <div>
                                <div class="heading-sm" style="color: #fff; margin-bottom: 4px;">边缘设备内存瓶颈</div>
                                <div class="body-md" style="color: rgba(255,255,255,0.6);">3D Gaussian 显存占用随场景规模线性增长，8GB 共享内存成为关键约束</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Slide 3: Opportunity -->
        <section class="slide bg-light-gray" data-slide="2">
            <div class="slide-content">
                <div class="slide-number">03 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Market Opportunity</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 48px;">机会分析</h2>

                <div class="grid-4">
                    <div class="card-stat fade-up anim-d2">
                        <div class="stat-number">35%</div>
                        <div class="stat-label">算力下沉</div>
                        <div class="stat-desc">Edge AI 市场年增长率，端侧推理需求爆发</div>
                    </div>
                    <div class="card-stat fade-up anim-d3">
                        <div class="stat-number">$12B</div>
                        <div class="stat-label">数字孪生</div>
                        <div class="stat-desc">实时仿真与数字孪生市场规模 2026 预测</div>
                    </div>
                    <div class="card-stat fade-up anim-d4">
                        <div class="stat-number">&lt;50ms</div>
                        <div class="stat-label">低延迟交互</div>
                        <div class="stat-desc">机器人导航与 AR 空间计算延迟阈值</div>
                    </div>
                    <div class="card-stat fade-up anim-d5">
                        <div class="stat-number">100%</div>
                        <div class="stat-label">端侧隐私</div>
                        <div class="stat-desc">数据不出域，满足医疗与工业隐私合规</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Slide 4: Core Solution -->
        <section class="slide bg-white" data-slide="3">
            <div class="slide-content">
                <div class="slide-number">04 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Core Solution</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 48px;">核心方案</h2>

                <div class="grid-3">
                    <div class="card fade-up anim-d2">
                        <div style="width: 48px; height: 48px; background: var(--gradient-red); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                                <circle cx="12" cy="12" r="3"></circle>
                                <path d="M12 2v4m0 12v4m10-10h-4M6 12H2m15.364-6.364l-2.828 2.828M8.464 15.536l-2.828 2.828m12.728 0l-2.828-2.828M8.464 8.464L5.636 5.636"></path>
                            </svg>
                        </div>
                        <div class="heading-sm" style="margin-bottom: 12px;">自适应高斯分块</div>
                        <div class="body-md" style="color: var(--color-muted);">基于空间哈希的 Gaussian 分块管理，视锥剔除与细节层次自适应，降低 60% 显存占用</div>
                    </div>
                    <div class="card fade-up anim-d3">
                        <div style="width: 48px; height: 48px; background: var(--gradient-red); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                                <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path>
                            </svg>
                        </div>
                        <div class="heading-sm" style="margin-bottom: 12px;">边缘-云端协同</div>
                        <div class="body-md" style="color: var(--color-muted);">关键帧上传云端进行全局 BA 优化，本地维持低延迟追踪，带宽占用 &lt; 2MB/min</div>
                    </div>
                    <div class="card card-dark fade-up anim-d4">
                        <div style="width: 48px; height: 48px; background: rgba(255,255,255,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px;">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                                <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
                                <polyline points="13 2 13 9 20 9"></polyline>
                            </svg>
                        </div>
                        <div class="heading-sm" style="margin-bottom: 12px; color: var(--color-white);">显存限制与散热约束</div>
                        <div class="body-md" style="color: rgba(255,255,255,0.6);">Orin Nano 8GB 共享内存 + 15W TDP 热设计功耗，需定制 CUDA Kernel 与内存池管理</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Slide 5: Execution Process -->
        <section class="slide bg-light-gray" data-slide="4">
            <div class="slide-content">
                <div class="slide-number">05 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Execution Flow</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 24px;">执行流程</h2>

                <div class="process-flow fade-up anim-d2">
                    <div class="process-step">
                        <div class="process-step-num">1</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">传感器输入</div>
                        <div class="body-md" style="color: var(--color-muted);">RGB-D / LiDAR / IMU 多模态数据同步采集</div>
                    </div>
                    <div class="process-arrow">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#7A7A72" stroke-width="2">
                            <polyline points="9 18 15 12 9 6"></polyline>
                        </svg>
                    </div>
                    <div class="process-step">
                        <div class="process-step-num">2</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">位姿追踪</div>
                        <div class="body-md" style="color: var(--color-muted);">帧到地图的光度误差优化，实时估计相机位姿</div>
                    </div>
                    <div class="process-arrow">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#7A7A72" stroke-width="2">
                            <polyline points="9 18 15 12 9 6"></polyline>
                        </svg>
                    </div>
                    <div class="process-step">
                        <div class="process-step-num">3</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">高斯地图优化</div>
                        <div class="body-md" style="color: var(--color-muted);">可微分高斯参数更新，几何与外观联合优化</div>
                    </div>
                    <div class="process-arrow">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#7A7A72" stroke-width="2">
                            <polyline points="9 18 15 12 9 6"></polyline>
                        </svg>
                    </div>
                    <div class="process-step">
                        <div class="process-step-num">4</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">实时渲染输出</div>
                        <div class="body-md" style="color: var(--color-muted);">光栅化高斯泼溅，照片级新视角合成</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Slide 6: Results -->
        <section class="slide bg-white" data-slide="5">
            <div class="slide-content">
                <div class="slide-number">06 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Performance Results</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 48px;">结果展示</h2>

                <div class="grid-4">
                    <div class="result-card fade-up anim-d2">
                        <div class="result-value">45+</div>
                        <div class="result-label">FPS 实时帧率</div>
                    </div>
                    <div class="result-card fade-up anim-d3">
                        <div class="result-value">&lt;4GB</div>
                        <div class="result-label">内存占用峰值</div>
                    </div>
                    <div class="result-card fade-up anim-d4">
                        <div class="result-value">2cm</div>
                        <div class="result-label">重建精度 RMSE</div>
                    </div>
                    <div class="result-card fade-up anim-d5">
                        <div class="result-value">15W</div>
                        <div class="result-label">TDP 功耗</div>
                    </div>
                </div>

                <div class="quote-box fade-up anim-d5">
                    <div class="quote-text">"首次在 Orin Nano 上实现实时 3DGS 闭环重建，性能超越传统 SLAM 方案 300%。"</div>
                </div>
            </div>
        </section>

        <!-- Slide 7: Use Cases -->
        <section class="slide bg-white" data-slide="6">
            <div class="slide-content">
                <div class="slide-number">07 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Use Cases</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 48px;">使用建议</h2>

                <div class="grid-4">
                    <div class="card fade-up anim-d2">
                        <div style="font-size: 36px; margin-bottom: 16px;">🤖</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">室内机器人导航</div>
                        <div class="body-md" style="color: var(--color-muted);">实时语义地图构建，支持动态障碍物避障与路径规划</div>
                    </div>
                    <div class="card fade-up anim-d3">
                        <div style="font-size: 36px; margin-bottom: 16px;">👓</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">AR 眼镜空间锚点</div>
                        <div class="body-md" style="color: var(--color-muted);">轻量级空间计算，持久化虚拟内容锚定与共享</div>
                    </div>
                    <div class="card fade-up anim-d4">
                        <div style="font-size: 36px; margin-bottom: 16px;">🚁</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">无人机自主避障</div>
                        <div class="body-md" style="color: var(--color-muted);">机载实时三维重建，GNSS 拒止环境下视觉导航</div>
                    </div>
                    <div class="card fade-up anim-d5">
                        <div style="font-size: 36px; margin-bottom: 16px;">🏭</div>
                        <div class="heading-sm" style="margin-bottom: 8px;">工业数字孪生巡检</div>
                        <div class="body-md" style="color: var(--color-muted);">设备状态可视化，远程专家 AR 协作与预测性维护</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Slide 8: Competition -->
        <section class="slide bg-light-gray" data-slide="7">
            <div class="slide-content">
                <div class="slide-number">08 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Competitive Analysis</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 32px;">竞争对比</h2>

                <div class="fade-up anim-d2">
                    <table class="comparison-table">
                        <thead>
                            <tr>
                                <th style="width: 25%;">方案</th>
                                <th style="width: 20%;">实时性</th>
                                <th style="width: 20%;">渲染质量</th>
                                <th style="width: 20%;">资源消耗</th>
                                <th style="width: 15%;">硬件成本</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>ORB-SLAM3</strong></td>
                                <td><span class="badge badge-success">30 FPS</span></td>
                                <td><span class="badge badge-warn">稀疏点云</span></td>
                                <td><span class="badge badge-success">&lt;2GB</span></td>
                                <td><span class="badge badge-success">$199</span></td>
                            </tr>
                            <tr>
                                <td><strong>LIO-SAM</strong></td>
                                <td><span class="badge badge-success">20 FPS</span></td>
                                <td><span class="badge badge-warn">几何网格</span></td>
                                <td><span class="badge badge-success">&lt;1GB</span></td>
                                <td><span class="badge badge-warn">$2,000+</span></td>
                            </tr>
                            <tr>
                                <td><strong>Instant-NGP</strong></td>
                                <td><span class="badge badge-warn">&lt;5 FPS</span></td>
                                <td><span class="badge badge-success">照片级</span></td>
                                <td><span class="badge badge-warn">&gt;8GB</span></td>
                                <td><span class="badge badge-warn">$1,500+</span></td>
                            </tr>
                            <tr class="highlight-row">
                                <td><strong style="color: var(--color-accent);">本方案</strong></td>
                                <td><span class="badge badge-success">45+ FPS</span></td>
                                <td><span class="badge badge-success">照片级</span></td>
                                <td><span class="badge badge-success">&lt;4GB</span></td>
                                <td><span class="badge badge-success">$499</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- Slide 9: Team & Advice -->
        <section class="slide bg-white" data-slide="8">
            <div class="slide-content">
                <div class="slide-number">09 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Team & Recommendations</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 32px;">团队与建议</h2>

                <div class="grid-4" style="margin-bottom: 32px;">
                    <div class="team-card fade-up anim-d2">
                        <div class="team-role">算法架构师</div>
                        <div class="team-name">CUDA 优化专家</div>
                        <div class="team-desc">Gaussian 光栅化 Kernel 定制，TensorRT 推理加速</div>
                    </div>
                    <div class="team-card fade-up anim-d3">
                        <div class="team-role">嵌入式工程师</div>
                        <div class="team-name">Jetson 部署专家</div>
                        <div class="team-desc">Orin 平台 BSP 适配，功耗墙与散热管理</div>
                    </div>
                    <div class="team-card fade-up anim-d4">
                        <div class="team-role">SLAM 研究员</div>
                        <div class="team-name">多视角几何专家</div>
                        <div class="team-desc">位姿图优化，回环检测，不确定性建模</div>
                    </div>
                    <div class="team-card fade-up anim-d5">
                        <div class="team-role">全栈开发</div>
                        <div class="team-name">可视化界面工程师</div>
                        <div class="team-desc">WebGL 实时预览，ROS2 通信中间件</div>
                    </div>
                </div>

                <div class="grid-3">
                    <div class="advice-card fade-up anim-d3">
                        <div style="font-size: 24px; margin-bottom: 12px;">⚡</div>
                        <div class="heading-sm" style="color: #fff; margin-bottom: 8px;">量化感知训练</div>
                        <div style="font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5;">INT8 权重量化与动态范围校准，保持渲染质量同时降低 50% 显存</div>
                    </div>
                    <div class="advice-card fade-up anim-d4">
                        <div style="font-size: 24px; margin-bottom: 12px;">🚀</div>
                        <div class="heading-sm" style="color: #fff; margin-bottom: 8px;">TensorRT 加速</div>
                        <div style="font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5;">利用 TensorRT 8.6 的显存优化与层融合，提升 40% 推理吞吐</div>
                    </div>
                    <div class="advice-card fade-up anim-d5">
                        <div style="font-size: 24px; margin-bottom: 12px;">📊</div>
                        <div class="heading-sm" style="color: #fff; margin-bottom: 8px;">混合精度训练</div>
                        <div style="font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.5;">FP16 前向 + FP32 反向，平衡数值稳定性与计算效率</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Slide 10: Conclusion -->
        <section class="slide bg-light-gray" data-slide="9">
            <div class="slide-content">
                <div class="slide-number">10 / 10</div>
                <div class="label fade-up" style="margin-bottom: 16px; color: var(--color-muted);">Final Verdict</div>
                <h2 class="heading-lg fade-up anim-d1" style="margin-bottom: 48px;">最终结论</h2>

                <div class="verdict-box fade-up anim-d2">
                    <div class="verdict-label">核心判定</div>
                    <div class="verdict-text">具备边缘端落地可行性</div>
                    <div class="body-lg" style="color: var(--color-muted); margin-top: 16px; max-width: 600px; margin-left: auto; margin-right: auto;">
                        在 Jetson Orin Nano 8GB 平台上实现 45+ FPS 实时 3D Gaussian Splatting SLAM，验证了边缘设备运行照片级实时重建的技术可行性
                    </div>
                </div>

                <div class="data-bar-container fade-up anim-d4">
                    <div class="data-bar-label">
                        <span style="font-size: 16px;">性能超越传统方案</span>
                        <span style="font-size: 24px; font-weight: 800; color: var(--color-accent);">300%</span>
                    </div>
                    <div class="data-bar-track">
                        <div class="data-bar-fill" id="dataBarFill"></div>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--color-muted);">
                        <span>ORB-SLAM3 基准</span>
                        <span>本方案峰值性能</span>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Navigation Dots -->
    <div class="nav-dots" id="navDots"></div>

    <script>
        const totalSlides = 10;
        let currentSlide = 0;
        const presentation = document.getElementById('presentation');
        const progressBar = document.getElementById('progressBar');
        const navDotsContainer = document.getElementById('navDots');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const dataBarFill = document.getElementById('dataBarFill');

        // Create dots
        for (let i = 0; i < totalSlides; i++) {
            const dot = document.createElement('div');
            dot.className = 'nav-dot' + (i === 0 ? ' active' : '');
            dot.onclick = () => goToSlide(i);
            navDotsContainer.appendChild(dot);
        }

        const dots = document.querySelectorAll('.nav-dot');

        function goToSlide(index) {
            if (index < 0 || index >= totalSlides) return;
            currentSlide = index;
            presentation.style.transform = `translateX(-${currentSlide * 100}vw)`;

            // Update dots
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === currentSlide);
            });

            // Update progress bar
            progressBar.style.width = `${((currentSlide + 1) / totalSlides) * 100}%`;

            // Update arrows
            prevBtn.classList.toggle('hidden', currentSlide === 0);
            nextBtn.classList.toggle('hidden', currentSlide === totalSlides - 1);

            // Trigger animations
            triggerAnimations();

            // Trigger data bar animation on last slide
            if (currentSlide === 9 && dataBarFill) {
                setTimeout(() => {
                    dataBarFill.classList.add('animate');
                }, 500);
            } else if (dataBarFill) {
                dataBarFill.classList.remove('animate');
            }
        }

        function triggerAnimations() {
            const currentSlideEl = document.querySelector(`[data-slide="${currentSlide}"]`);
            if (!currentSlideEl) return;

            const fadeElements = currentSlideEl.querySelectorAll('.fade-up');
            fadeElements.forEach(el => {
                el.classList.remove('visible');
            });

            // Force reflow
            void currentSlideEl.offsetWidth;

            fadeElements.forEach(el => {
                el.classList.add('visible');
            });
        }

        // Wheel event for horizontal scroll
        let wheelTimeout;
        let accumulatedDelta = 0;
        const WHEEL_THRESHOLD = 50;

        window.addEventListener('wheel', (e) => {
            e.preventDefault();
            accumulatedDelta += e.deltaY;

            clearTimeout(wheelTimeout);
            wheelTimeout = setTimeout(() => {
                if (Math.abs(accumulatedDelta) > WHEEL_THRESHOLD) {
                    if (accumulatedDelta > 0) {
                        goToSlide(currentSlide + 1);
                    } else {
                        goToSlide(currentSlide - 1);
                    }
                }
                accumulatedDelta = 0;
            }, 50);
        }, { passive: false });

        // Keyboard navigation
        window.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
                e.preventDefault();
                goToSlide(currentSlide + 1);
            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
                e.preventDefault();
                goToSlide(currentSlide - 1);
            } else if (e.key === 'Home') {
                e.preventDefault();
                goToSlide(0);
            } else if (e.key === 'End') {
                e.preventDefault();
                goToSlide(totalSlides - 1);
            }
        });

        // Touch support
        let touchStartX = 0;
        let touchEndX = 0;

        window.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        }, { passive: true });

        window.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        }, { passive: true });

        function handleSwipe() {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;
            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    goToSlide(currentSlide + 1);
                } else {
                    goToSlide(currentSlide - 1);
                }
            }
        }

        // Initialize
        goToSlide(0);

        // Intersection Observer for scroll-triggered animations (fallback)
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.3
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const fadeElements = entry.target.querySelectorAll('.fade-up');
                    fadeElements.forEach((el, i) => {
                        setTimeout(() => {
                            el.classList.add('visible');
                        }, i * 100);
                    });
                }
            });
        }, observerOptions);

        document.querySelectorAll('.slide').forEach(slide => {
            observer.observe(slide);
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Geek Report - Cover</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --paper: #e2deda;
            --text-main: #292929;
            --text-muted: #6b6b6b;
            --accent-red: #eb4e3d;
            --accent-blue: #8ba5ba;
            --terminal-bg: #f5f2ef;
            --terminal-border: #c8c4c0;
            --shadow: rgba(0, 0, 0, 0.08);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #d5d0cb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Courier New', monospace;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* 主画布 */
        .canvas {
            width: 600px;
            height: 800px;
            background: var(--paper);
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 1px 1px rgba(0,0,0,0.05),
                0 4px 8px rgba(0,0,0,0.06),
                0 12px 24px rgba(0,0,0,0.08),
                0 24px 48px rgba(0,0,0,0.10);
        }

        /* 纸张纹理 */
        .canvas::before {
            content: '';
            position: absolute;
            inset: 0;
            background: 
                repeating-linear-gradient(
                    0deg,
                    transparent,
                    transparent 31px,
                    rgba(0,0,0,0.015) 31px,
                    rgba(0,0,0,0.015) 32px
                );
            pointer-events: none;
            z-index: 1;
        }

        /* 顶部装饰线 */
        .top-rule {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--text-main);
            z-index: 10;
        }

        .top-rule::after {
            content: '';
            position: absolute;
            top: 8px;
            left: 48px;
            right: 48px;
            height: 1px;
            background: var(--terminal-border);
        }

        /* 内容区域 */
        .content {
            position: relative;
            z-index: 5;
            padding: 52px 48px 40px 48px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 终端窗口 */
        .terminal {
            background: var(--terminal-bg);
            border: 1.5px solid var(--terminal-border);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 
                0 2px 4px var(--shadow),
                inset 0 1px 0 rgba(255,255,255,0.8);
        }

        /* 终端标题栏 */
        .terminal-header {
            background: linear-gradient(180deg, #eae7e3, #ddd9d4);
            border-bottom: 1.5px solid var(--terminal-border);
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .terminal-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 1px solid rgba(0,0,0,0.12);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
        }

        .btn-red { background: #ff5f57; }
        .btn-yellow { background: #febc2e; }
        .btn-green { background: #28c840; }

        .terminal-title {
            flex: 1;
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            color: var(--text-muted);
            letter-spacing: 0.05em;
        }

        /* 终端主体 */
        .terminal-body {
            padding: 24px 28px 28px 28px;
        }

        /* 命令提示行 */
        .prompt-line {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            font-size: 13px;
        }

        .prompt-user {
            color: var(--accent-blue);
            font-weight: 600;
        }

        .prompt-sep {
            color: var(--text-muted);
        }

        .prompt-host {
            color: var(--accent-red);
            font-weight: 600;
        }

        .prompt-path {
            color: var(--text-muted);
        }

        .prompt-dollar {
            color: var(--text-main);
            font-weight: 700;
            margin-left: 4px;
        }

        .command {
            color: var(--text-main);
            font-weight: 500;
        }

        .command-arg {
            color: var(--accent-blue);
        }

        /* 光标 */
        .cursor {
            display: inline-block;
            width: 8px;
            height: 16px;
            background: var(--accent-red);
            margin-left: 2px;
            animation: blink 1s step-end infinite;
            vertical-align: text-bottom;
        }

        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        /* 分隔线 */
        .divider {
            height: 1px;
            background: var(--terminal-border);
            margin: 20px 0;
            position: relative;
        }

        .divider::before {
            content: '//';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: var(--terminal-bg);
            padding: 0 12px;
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 0.1em;
        }

        /* 主标题区 */
        .hero {
            margin-top: 4px;
        }

        .hero-title {
            font-size: 36px;
            font-weight: 800;
            color: var(--text-main);
            line-height: 1.15;
            letter-spacing: -0.02em;
            margin-bottom: 12px;
        }

        .hero-subtitle {
            font-size: 18px;
            font-weight: 400;
            color: var(--text-muted);
            line-height: 1.5;
        }

        /* 输出列表 */
        .output-section {
            margin-top: 20px;
        }

        .section-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-label::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 2px;
            background: var(--accent-red);
        }

        .output-list {
            list-style: none;
        }

        .output-list li {
            font-size: 14px;
            line-height: 2.2;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .output-list li::before {
            content: '>';
            color: var(--accent-blue);
            font-weight: 700;
            font-size: 12px;
        }

        .status-ok {
            color: var(--accent-red);
            font-weight: 700;
        }

        .status-wip {
            color: var(--accent-blue);
            font-weight: 600;
        }

        /* 技术参数区 */
        .tech-section {
            margin-top: 20px;
        }

        .tech-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px 24px;
        }

        .tech-item {
            font-size: 13px;
            line-height: 1.6;
        }

        .tech-key {
            color: var(--text-muted);
            font-size: 11px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 2px;
        }

        .tech-value {
            color: var(--text-main);
            font-weight: 600;
        }

        /* 星级评分 */
        .stars {
            color: var(--accent-red);
            font-size: 13px;
            letter-spacing: 1px;
        }

        .stars-dim {
            color: var(--terminal-border);
        }

        /* 底部状态 */
        .status-bar {
            margin-top: auto;
            padding-top: 24px;
        }

        .status-line {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            margin-bottom: 8px;
        }

        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-red);
            animation: pulse 2s ease-in-out infinite;
            box-shadow: 0 0 0 3px rgba(235, 78, 61, 0.15);
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.85); }
        }

        .status-text {
            color: var(--accent-red);
            font-weight: 700;
        }

        .date-line {
            font-size: 13px;
            color: var(--text-muted);
            padding-left: 18px;
        }

        /* 底部装饰 */
        .bottom-deco {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--text-main);
        }

        .bottom-deco::before {
            content: '';
            position: absolute;
            bottom: 10px;
            left: 48px;
            right: 48px;
            height: 1px;
            background: var(--terminal-border);
        }

        /* 角落标记 */
        .corner-mark {
            position: absolute;
            font-size: 10px;
            font-weight: 700;
            color: var(--text-muted);
            opacity: 0.4;
            letter-spacing: 0.1em;
        }

        .corner-tl { top: 16px; left: 16px; }
        .corner-tr { top: 16px; right: 16px; }
        .corner-bl { bottom: 16px; left: 16px; }
        .corner-br { bottom: 16px; right: 16px; }

        /* 打印点阵装饰 */
        .dot-matrix {
            position: absolute;
            right: 48px;
            top: 160px;
            display: grid;
            grid-template-columns: repeat(4, 4px);
            gap: 6px;
            opacity: 0.15;
        }

        .dot-matrix span {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--text-main);
        }

        /* 纸张边缘阴影 */
        .paper-edge-left {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.04) 80%, transparent);
        }

        .paper-edge-right {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04) 20%, rgba(0,0,0,0.04) 80%, transparent);
        }
    </style>
</head>
<body>
    <div class="canvas">
        <!-- 纸张边缘 -->
        <div class="paper-edge-left"></div>
        <div class="paper-edge-right"></div>

        <!-- 顶部装饰 -->
        <div class="top-rule"></div>

        <!-- 角落标记 -->
        <div class="corner-mark corner-tl">PY-2026-001</div>
        <div class="corner-mark corner-tr">GEEK REPORT</div>
        <div class="corner-mark corner-bl">v1.0.0</div>
        <div class="corner-mark corner-br">◼ ◼ ◼</div>

        <!-- 点阵装饰 -->
        <div class="dot-matrix">
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
            <span></span><span></span><span></span><span></span>
        </div>

        <!-- 内容 -->
        <div class="content">

            <!-- 终端窗口 -->
            <div class="terminal">
                <div class="terminal-header">
                    <div class="terminal-btn btn-red"></div>
                    <div class="terminal-btn btn-yellow"></div>
                    <div class="terminal-btn btn-green"></div>
                    <div class="terminal-title">python@dev --- learn.py</div>
                </div>
                <div class="terminal-body">

                    <!-- 命令行 -->
                    <div class="prompt-line">
                        <span class="prompt-user">coder</span>
                        <span class="prompt-sep">@</span>
                        <span class="prompt-host">macbook</span>
                        <span class="prompt-path">~/python-journey</span>
                        <span class="prompt-dollar">$</span>
                        <span class="command">python learn.py</span>
                        <span class="command-arg">--track=backend</span>
                        <span class="cursor"></span>
                    </div>

                    <!-- 分隔线 -->
                    <div class="divider"></div>

                    <!-- 主标题 -->
                    <div class="hero">
                        <div class="hero-title">Python<br>学习路线图</div>
                        <div class="hero-subtitle">从入门到工程化 // 后端开发方向</div>
                    </div>

                    <!-- 学习阶段输出 -->
                    <div class="output-section">
                        <div class="section-label">Learning Stages</div>
                        <ul class="output-list">
                            <li>基础语法与数据结构 <span class="status-ok">✓</span></li>
                            <li>面向对象与函数式编程 <span class="status-ok">✓</span></li>
                            <li>并发编程 (asyncio / multiprocessing) <span class="status-wip">...</span></li>
                            <li>Web 框架 (Flask / FastAPI) <span class="status-wip">...</span></li>
                            <li>数据库与 ORM (SQLAlchemy) <span class="status-wip">...</span></li>
                            <li>系统设计与工程化 <span class="status-wip">...</span></li>
                        </ul>
                    </div>

                    <!-- 技术参数 -->
                    <div class="tech-section">
                        <div class="section-label">Tech Stack</div>
                        <div class="tech-grid">
                            <div class="tech-item">
                                <div class="tech-key">Version</div>
                                <div class="tech-value">Python 3.12</div>
                            </div>
                            <div class="tech-item">
                                <div class="tech-key">Level</div>
                                <div class="tech-value">Intermediate → Advanced</div>
                            </div>
                            <div class="tech-item">
                                <div class="tech-key">NumPy</div>
                                <div class="stars">★★★★<span class="stars-dim">☆</span></div>
                            </div>
                            <div class="tech-item">
                                <div class="tech-key">Flask</div>
                                <div class="stars">★★★★<span class="stars-dim">☆</span></div>
                            </div>
                            <div class="tech-item">
                                <div class="tech-key">Pandas</div>
                                <div class="stars">★★★<span class="stars-dim">☆☆</span></div>
                            </div>
                            <div class="tech-item">
                                <div class="tech-key">FastAPI</div>
                                <div class="stars">★★<span class="stars-dim">☆☆☆</span></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 底部状态栏 -->
            <div class="status-bar">
                <div class="status-line">
                    <div class="status-indicator"></div>
                    <span class="status-text">Learning in Progress...</span>
                </div>
                <div class="date-line">2026.05.27 // 持续更新中</div>
            </div>

        </div>

        <!-- 底部装饰 -->
        <div class="bottom-deco"></div>
    </div>
</body>
</html>
相关推荐
cvcode_study13 小时前
Electron 制作自定义浏览器
前端·javascript·electron
JCJC错别字检测-田春峰13 小时前
字根秀秀 HTML 托管现已支持“用户登录”功能，一键变身 Web App！
前端·html·web app·网页托管
胡楚昊13 小时前
在好靶场的WEB海洋遨游
前端
天机️灵韵13 小时前
Tauri 2.0与Electron的桌面应用技术选型比较
前端·electron·前端框架
之歆13 小时前
Day20_PC 端电商商品详情页前端实战：从布局到放大镜与选项卡
开发语言·前端·javascript·css·less
问心无愧051313 小时前
ctf show web入门259
android·前端·笔记
ct97813 小时前
Object.defineProperty/Proxy与 vue2 + vue3 响应式原理
前端·javascript·vue.js
肉肉不吃 肉13 小时前
watch中为什么不能直接侦听响应式对象的属性
前端·javascript·vue.js
热爱Liunx的丘丘人13 小时前
Dockerfile 构建自定义 Nginx Web 服务镜像
运维·前端·nginx
热门推荐
01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03Codex 接入 DeepSeek API 完整配置文档04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05【AI】2026 年具身智能模型和世界模型总结06CC-Switch & Claude 基于 Linux 服务器安装使用指南07裂开！ChatGPT 居然开始要手机号验证，附详细解决方法08CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）09API Key 登录 Codex 也能用插件了，还支持会话删除和导出102026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot