From e4f64138ece442af58096bce1a95a3de9fa3d490 Mon Sep 17 00:00:00 2001
From: 13315423919 <13315423919@qq.com>
Date: Fri, 7 Nov 2025 09:05:53 +0800
Subject: [PATCH] Add File

---
 template_examples/速度黄.json | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 template_examples/速度黄.json
diff --git a/template_examples/速度黄.json b/template_examples/速度黄.json
new file mode 100644
index 0000000..18ea752
--- /dev/null
+++ b/template_examples/速度黄.json
@@ -0,0 +1,14 @@
+{
+  "template_name": "速度黄",
+  "description": "速度黄",
+  "html_template": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>速度黄 - PPT母版模板</title>\n\n    <!-- 外部库支持：Font Awesome for icons -->\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css\">\n\n    <!-- 外部库支持：图表库 (按需选择或全部保留) -->\n    <!-- Chart.js -->\n    <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n    <!-- ECharts.js -->\n    <script src=\"https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js\"></script>\n    <!-- D3.js -->\n    <script src=\"https://d3js.org/d3.v7.min.js\"></script>\n\n</head>\n<body style=\"margin: 0; padding: 0; box-sizing: border-box; background-color: #2d2d2d; display: flex; justify-content: center; align-items: center; min-height: 100vh;\">\n\n    <!-- \n        响应式容器：\n        - 这是一个外层容器，用于在不同屏幕上保持16:9的宽高比。\n        - 它通过 `max-width` 和 `aspect-ratio` 属性实现缩放。\n        - 内部的 slide-canvas 才是我们真正的1280x720设计区域。\n    -->\n    <div class=\"responsive-wrapper\" style=\"width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; box-shadow: 0 10px 30px rgba(0,0,0,0.5);\">\n\n        <!-- \n            PPT页面画布 (1280x720)\n            - 所有内容都在这个div内，确保视觉尺寸统一。\n            - `overflow: hidden;` 是关键，它能确保任何情况下都不会出现滚动条。\n            - `position: relative;` 用于内部元素的绝对定位。\n        -->\n        <div class=\"slide-canvas\" style=\"width: 100%; height: 100%; background-color: #1a1a1a; color: #ffffff; font-family: 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif; display: flex; flex-direction: column; position: relative; overflow: hidden;\">\n\n            <!-- 背景装饰元素：增加动感和设计感 -->\n            <div class=\"background-decoration\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.03) 75%, transparent 75%, transparent); background-size: 60px 60px;\"></div>\n            \n            <!-- 左侧速度黄装饰线 -->\n            <div class=\"speed-line\" style=\"position: absolute; top: 0; left: 0; width: 12px; height: 100%; background-color: #FFC700; z-index: 2;\"></div>\n\n            <!-- 页面主要内容容器 (Flex布局) -->\n            <div class=\"slide-content-wrapper\" style=\"flex-grow: 1; display: flex; flex-direction: column; z-index: 1; padding: 40px 60px 40px 80px;\">\n\n                <!-- 1. 页面标题区域 -->\n                <header class=\"page-header\" style=\"flex-shrink: 0;\">\n                    <h1 class=\"page-title\" style=\"font-size: 48px; font-weight: bold; margin: 0 0 15px 0; padding-bottom: 10px; border-bottom: 4px solid #FFC700; display: inline-block;\">\n                        {{ page_title }}\n                    </h1>\n                </header>\n\n                <!-- 2. 页面核心内容区域 -->\n                <main class=\"page-main-content\" style=\"flex-grow: 1; font-size: 20px; line-height: 1.6; color: #e0e0e0; padding-top: 20px;\">\n                    <!-- \n                        内容占位符:\n                        在这里填入文本、列表、图片、图表等。\n                        为了演示，下方提供了一个文本+图表的示例结构。\n                    -->\n                    {{ page_content }}\n\n                    <!-- 示例内容结构 (可替换) -->\n                    <div style=\"display: flex; gap: 30px; height: 100%;\">\n                        <!-- 左侧文本区 -->\n                        <div style=\"flex: 1;\">\n                            <p>这里是页面的主要内容区域，您可以自由地添加文本、列表和图标。</p>\n                            <ul style=\"padding-left: 25px;\">\n                                <li style=\"margin-bottom: 10px;\"> <i class=\"fa-solid fa-check\" style=\"color: #FFC700; margin-right: 10px;\"></i> 严格遵守1280x720像素尺寸。</li>\n                                <li style=\"margin-bottom: 10px;\"> <i class=\"fa-solid fa-check\" style=\"color: #FFC700; margin-right: 10px;\"></i> 所有样式内联，确保自包含性。</li>\n                                <li style=\"margin-bottom: 10px;\"> <i class=\"fa-solid fa-check\" style=\"color: #FFC700; margin-right: 10px;\"></i> 支持Font Awesome, Chart.js等库。</li>\n                            </ul>\n                        </div>\n                        <!-- 右侧图表区 -->\n                        <div style=\"flex: 1; display: flex; justify-content: center; align-items: center;\">\n                            <!-- \n                                图表容器:\n                                为 Chart.js, ECharts.js 或 D3.js 准备的容器。\n                                ECharts.js 使用 div, Chart.js 使用 canvas。\n                            -->\n                            <div id=\"chart-container\" style=\"width: 100%; height: 320px;\"></div>\n                            <!-- <canvas id=\"myChart\" style=\"max-width: 100%; max-height: 320px;\"></canvas> -->\n                        </div>\n                    </div>\n                    <!-- 示例内容结束 -->\n\n                </main>\n\n                <!-- 3. 页面页脚区域 -->\n                <footer class=\"page-footer\" style=\"flex-shrink: 0; text-align: right; padding-top: 20px;\">\n                    <span class=\"page-number\" style=\"font-size: 18px; color: #a0a0a0; font-weight: bold;\">\n                        {{ current_page_number }} / {{ total_page_count }}\n                    </span>\n                </footer>\n\n            </div>\n        </div>\n    </div>\n\n    <!-- \n        示例脚本: \n        演示如何在一个ECharts图表容器中初始化一个简单的图表。\n        实际使用时，您可以根据需要替换为自己的数据和图表类型。\n    -->\n    <script>\n        // 等待DOM加载完成\n        document.addEventListener('DOMContentLoaded', function () {\n            // 基于准备好的dom，初始化echarts实例\n            var myChart = echarts.init(document.getElementById('chart-container'));\n\n            // 指定图表的配置项和数据\n            var option = {\n                tooltip: {},\n                legend: {\n                    data: ['销量'],\n                    textStyle: {\n                        color: '#ffffff'\n                    }\n                },\n                xAxis: {\n                    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],\n                    axisLine: {\n                        lineStyle: {\n                            color: '#a0a0a0'\n                        }\n                    }\n                },\n                yAxis: {\n                    axisLine: {\n                        lineStyle: {\n                            color: '#a0a0a0'\n                        }\n                    },\n                    splitLine: {\n                        lineStyle: {\n                            color: 'rgba(255, 255, 255, 0.1)'\n                        }\n                    }\n                },\n                series: [{\n                    name: '销量',\n                    type: 'bar',\n                    data: [5, 20, 36, 10, 10, 20],\n                    itemStyle: {\n                        color: '#FFC700'\n                    }\n                }]\n            };\n\n            // 使用刚指定的配置项和数据显示图表。\n            myChart.setOption(option);\n\n            // 监听窗口大小变化，使图表自适应\n            window.addEventListener('resize', function() {\n                myChart.resize();\n            });\n        });\n    </script>\n\n</body>\n</html>",
+  "tags": [
+    "速度黄"
+  ],
+  "is_default": false,
+  "export_info": {
+    "exported_at": "2025-10-04T06:53:01.960Z",
+    "original_id": 12,
+    "original_created_at": 1755852075.756903
+  }
+}
\ No newline at end of file
