From 72905350083cb324c43fbc21c1ce1d6211deda81 Mon Sep 17 00:00:00 2001
From: 13315423919 <13315423919@qq.com>
Date: Fri, 7 Nov 2025 09:05:49 +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..150f09d
--- /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    <!-- 字体与图标库 (CDN) -->\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap\" rel=\"stylesheet\">\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css\">\n\n    <!-- 图表库 (CDN) - 按需引入 -->\n    <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js\"></script>\n    <script src=\"https://d3js.org/d3.v7.min.js\"></script>\n\n    <style>\n        /* --- 基础与布局 --- */\n        html, body {\n            margin: 0;\n            padding: 0;\n            width: 100%;\n            height: 100%;\n            background-color: #333; /* 模拟PPT放映时的深色背景 */\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-family: 'Noto Sans SC', sans-serif;\n        }\n\n        /* 响应式容器，严格控制16:9比例 */\n        .slide-container {\n            width: 100%;\n            max-width: 1280px;\n            aspect-ratio: 16 / 9; /* 现代CSS方法保持宽高比 */\n            position: relative;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n        }\n\n        /* 幻灯片主画布 (1280x720) */\n        .slide {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: #F5EFE6; /* 温暖的米白色，像面皮 */\n            overflow: hidden; /* 核心要求：绝对不允许出现滚动条 */\n            display: flex;\n            flex-direction: column;\n            color: #4A4A4A; /* 主要文字颜色 */\n            box-sizing: border-box; /* 确保padding在尺寸内 */\n        }\n\n        /* --- 装饰元素 --- */\n        /* 顶部装饰：模拟饺子褶皱的柔和波浪 */\n        .header-wave {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            z-index: 1;\n        }\n        \n        /* 背景点缀：模拟酱油碟或水渍的圆形 */\n        .slide::before {\n            content: '';\n            position: absolute;\n            bottom: -80px;\n            right: -80px;\n            width: 300px;\n            height: 300px;\n            background-color: #E8C8A0; /* 饺子皮煮熟后的淡黄色 */\n            border-radius: 50%;\n            opacity: 0.3;\n            z-index: 0;\n        }\n\n        /* --- 内容区域 --- */\n        /* 页面标题 */\n        .page-title-container {\n            padding: 40px 60px 20px 60px;\n            z-index: 2;\n        }\n        .page-title {\n            font-size: 48px;\n            font-weight: 700;\n            color: #A97155; /* 酱油棕色，突出标题 */\n            margin: 0;\n            border-left: 8px solid #D24545; /* 辣椒油红色，作为点缀 */\n            padding-left: 20px;\n        }\n\n        /* 页面主要内容 */\n        .page-content-container {\n            flex-grow: 1;\n            padding: 10px 60px 60px 60px;\n            z-index: 2;\n            line-height: 1.8;\n            font-size: 24px;\n            overflow: hidden; /* 内容区自身也不能滚动 */\n        }\n        \n        /* 内容区样式示例 */\n        .page-content-container ul {\n            list-style-type: none;\n            padding-left: 20px;\n        }\n        .page-content-container ul li {\n            padding-left: 1.5em;\n            text-indent: -1.5em;\n            margin-bottom: 12px;\n        }\n        .page-content-container ul li::before {\n            content: '\\f105'; /* Font Awesome 右箭头图标 */\n            font-family: 'Font Awesome 6 Free';\n            font-weight: 900;\n            color: #5C8374; /* 葱花的绿色 */\n            margin-right: 10px;\n        }\n        .page-content-container a {\n            color: #A97155;\n            text-decoration: none;\n            border-bottom: 2px solid #E8C8A0;\n            transition: all 0.2s ease;\n        }\n        .page-content-container a:hover {\n            color: #D24545;\n            border-bottom-color: #D24545;\n        }\n\n        /* --- 页脚与页码 --- */\n        .page-footer {\n            position: absolute;\n            bottom: 25px;\n            right: 60px;\n            display: flex;\n            align-items: center;\n            font-size: 18px;\n            color: #A97155;\n            z-index: 2;\n        }\n        \n        /* 页脚饺子图标 */\n        .dumpling-icon {\n            width: 32px;\n            height: 32px;\n            margin-right: 15px;\n        }\n\n        /* 页码 */\n        .page-number {\n            font-weight: bold;\n        }\n    </style>\n</head>\n<body>\n\n    <div class=\"slide-container\">\n        <div class=\"slide\">\n            \n            <!-- 顶部装饰波浪SVG (内联，确保自包含) -->\n            <svg class=\"header-wave\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1280 80\" preserveAspectRatio=\"none\">\n                <path d=\"M1280 0 C1000 60, 800 20, 500 70 C300 90, 100 30, 0 50 L0 0 Z\" fill=\"#E8C8A0\" opacity=\"0.6\"/>\n                <path d=\"M1280 0 C1100 40, 900 10, 600 50 C400 70, 200 20, 0 40 L0 0 Z\" fill=\"#E8C8A0\" opacity=\"0.4\"/>\n            </svg>\n\n            <!-- 1. 页面标题 -->\n            <div class=\"page-title-container\">\n                <h1 class=\"page-title\">{{ page_title }}</h1>\n            </div>\n\n            <!-- 2. 页面内容 -->\n            <div class=\"page-content-container\">\n                <!-- \n                  这是主要内容区域。\n                  文本、列表、图片和图表都应放置在此处。\n                  例如，要插入一个Chart.js图表，可以在这里放置一个 <canvas> 元素。\n                  <canvas id=\"myChart\" style=\"width:100%;max-width:800px;max-height:400px;\"></canvas>\n                -->\n                <div id=\"page-content-wrapper\">\n                    {{ page_content }}\n                </div>\n            </div>\n\n            <!-- 3. 页脚与页码 -->\n            <div class=\"page-footer\">\n                <!-- 页脚装饰图标SVG (内联) -->\n                <svg class=\"dumpling-icon\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M 10 50 C 10 22, 40 10, 50 10 C 60 10, 90 22, 90 50 C 90 78, 60 90, 50 90 C 40 90, 10 78, 10 50 Z\" fill=\"#F5EFE6\" stroke=\"#A97155\" stroke-width=\"5\"/>\n                    <path d=\"M 50 10 C 55 18, 60 12, 65 18 C 70 12, 75 18, 80 14\" fill=\"none\" stroke=\"#A97155\" stroke-width=\"4\" stroke-linecap=\"round\"/>\n                </svg>\n                <div class=\"page-number\">\n                    <span>{{ current_page_number }}</span> / <span>{{ total_page_count }}</span>\n                </div>\n            </div>\n\n        </div>\n    </div>\n\n    <!-- \n        使用示例:\n        您可以将 {{ page_content }} 占位符替换为实际的HTML内容。\n        比如下面的示例内容：\n    -->\n    <script>\n        // 这是一个示例，用于演示如何动态填充内容\n        const sampleContent = `\n            <p>这里是您的主要内容区域，支持富文本格式。</p>\n            <ul>\n                <li><i class=\"fa-solid fa-utensils\" style=\"color: #5C8374;\"></i> <b>主题明确</b>：设计灵感源自传统美食饺子。</li>\n                <li><i class=\"fa-solid fa-chart-pie\" style=\"color: #5C8374;\"></i> <b>图表支持</b>：完美兼容 Chart.js, ECharts, D3.js。</li>\n                <li><i class=\"fa-solid fa-mobile-screen-button\" style=\"color: #5C8374;\"></i> <b>响应式设计</b>：在任何屏幕上都能保持完美的16:9比例。</li>\n            </ul>\n            <p>您可以自由插入图片、表格，或者像这样<a href=\"#\">添加一个链接</a>。</p>\n        `;\n\n        // 实际使用时，您的模板引擎会处理占位符替换\n        document.getElementById('page-content-wrapper').innerHTML = sampleContent;\n        document.querySelector('.page-title').textContent = '饺子风主题介绍';\n        document.querySelector('.page-number span:first-child').textContent = '1';\n        document.querySelector('.page-number span:last-child').textContent = '10';\n    </script>\n\n</body>\n</html>",
+  "tags": [
+    "饺子风"
+  ],
+  "is_default": false,
+  "export_info": {
+    "exported_at": "2025-10-04T06:53:24.510Z",
+    "original_id": 17,
+    "original_created_at": 1755856369.830841
+  }
+}
\ No newline at end of file
