From 98b8f17a53bbf562d8e80b9361fa3304a08f12ad 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..911d42d
--- /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    <!-- Font Awesome: 用于图标 -->\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css\">\n    <!-- Chart.js: 用于图表 (可替换为 ECharts, D3.js 等) -->\n    <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n    \n    <!-- \n      所有CSS样式均内联在此处，以确保模板的自包含性。\n      这里未使用Tailwind CSS框架，而是采用原生CSS，以避免额外的构建步骤，\n      但其命名和设计思路借鉴了原子化CSS的思想，易于理解和维护。\n    -->\n    <style>\n        /* --- 基础与重置 --- */\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        html, body {\n            width: 100%;\n            height: 100%;\n            overflow: hidden; /* 核心要求：绝对不允许出现滚动条 */\n            background-color: #f0f2f5; /* 页面背景色，衬托PPT页面 */\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n        }\n\n        /* --- 响应式比例容器 --- */\n        /* 外层容器，使用Flexbox实现垂直和水平居中 */\n        .slide-container {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            width: 100%;\n            height: 100%;\n            padding: 1vw; /* 留出一些边距，让视觉更舒适 */\n        }\n\n        /* 核心！用于保持16:9比例的容器 */\n        .slide-aspect-ratio-box {\n            width: 100%;\n            max-width: 1280px; /* 最大宽度限制 */\n            aspect-ratio: 16 / 9; /* 现代CSS属性，强制保持16:9 */\n            position: relative; /* 为内部绝对定位的slide提供基准 */\n            box-shadow: 0 8px 24px rgba(0, 32, 64, 0.1); /* 增加立体感 */\n            border-radius: 8px; /* 轻微的圆角，更显柔和 */\n        }\n\n        /* --- PPT页面本身 --- */\n        .slide {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            \n            /* 设计风格: 清新风 */\n            background-color: #ffffff;\n            /* 可选用渐变背景增加层次感 */\n            /* background-image: linear-gradient(135deg, #f8fafc 0%, #eef2f5 100%); */\n            \n            color: #374151; /* 主文字颜色，深灰色而非纯黑 */\n            border-radius: 8px; /* 与外层阴影容器保持一致 */\n            \n            /* 使用Flexbox进行内部布局 */\n            display: flex;\n            flex-direction: column;\n            padding: 40px 60px; /* 内部安全边距 (对应720p下的像素) */\n        }\n\n        /* --- 页面元素样式 --- */\n        /* 页面标题 */\n        .slide-title {\n            font-size: 42px; /* 在1280x720分辨率下，这是一个合适的标题大小 */\n            font-weight: 600;\n            color: #0ea5e9; /* 清新的天空蓝作为主题色 */\n            margin-bottom: 24px;\n            flex-shrink: 0; /* 防止标题被压缩 */\n        }\n\n        /* 页面主要内容区域 */\n        .slide-content {\n            flex-grow: 1; /* 占据剩余所有空间 */\n            font-size: 20px;\n            line-height: 1.7;\n            overflow: hidden; /* 确保内容不会溢出此区域 */\n        }\n\n        /* 内容区通用样式 */\n        .slide-content h3 {\n            font-size: 24px;\n            font-weight: 600;\n            color: #1e293b;\n            margin-top: 20px;\n            margin-bottom: 12px;\n            border-left: 4px solid #38bdf8; /* 蓝色装饰条 */\n            padding-left: 12px;\n        }\n\n        .slide-content p {\n            margin-bottom: 16px;\n        }\n\n        .slide-content ul {\n            list-style-type: none;\n            padding-left: 10px;\n        }\n\n        .slide-content li {\n            margin-bottom: 12px;\n            display: flex;\n            align-items: flex-start;\n        }\n\n        /* Font Awesome 图标样式 */\n        .slide-content li i {\n            color: #38bdf8; /* 使用明亮的蓝色 */\n            margin-right: 12px;\n            margin-top: 6px; /* 微调图标位置，使其与文本对齐 */\n            font-size: 18px;\n        }\n\n        /* 图表容器占位符样式 */\n        .chart-placeholder {\n            width: 100%;\n            height: 280px; /* 在720p高度内预留一个合理的高度 */\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            border-radius: 6px;\n            margin-top: 20px;\n        }\n\n        /* --- 页脚与页码 --- */\n        .slide-footer {\n            position: absolute;\n            bottom: 30px;\n            right: 60px;\n            font-size: 16px;\n            color: #94a3b8; /* 页码使用较浅的颜色 */\n            flex-shrink: 0;\n        }\n        \n        /* --- 装饰性元素 --- */\n        .slide-decoration {\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 100%;\n            height: 8px; /* 底部装饰条 */\n            background-image: linear-gradient(to right, #0ea5e9, #67e8f9); /* 清新渐变色 */\n            border-bottom-left-radius: 8px;\n            border-bottom-right-radius: 8px;\n        }\n\n    </style>\n</head>\n<body>\n\n    <div class=\"slide-container\">\n        <div class=\"slide-aspect-ratio-box\">\n            <div class=\"slide\">\n                \n                <!-- 1. 页面标题占位符 -->\n                <header class=\"slide-title\">\n                    {{ page_title }}\n                </header>\n\n                <!-- 2. 页面内容占位符 -->\n                <main class=\"slide-content\">\n                    {{ page_content }}\n                    \n                    <!-- 以下为内容占位符的示例，您可以根据实际需求替换 -->\n                    <!-- \n                    <h3><i class=\"fas fa-lightbulb\"></i> 核心要点</h3>\n                    <ul>\n                        <li><i class=\"fas fa-check-circle\"></i> 严格的尺寸控制与16:9响应式布局。</li>\n                        <li><i class=\"fas fa-check-circle\"></i> 所有样式内联，确保模板的独立与便携。</li>\n                        <li><i class=\"fas fa-check-circle\"></i> 集成Font Awesome图标与图表库支持。</li>\n                    </ul>\n                    <h3><i class=\"fas fa-chart-pie\"></i> 数据可视化</h3>\n                    <p>下方区域可用于集成Chart.js、ECharts等图表库。</p>\n                    <div class=\"chart-placeholder\">\n                         图表将在此处渲染 \n                        <canvas id=\"myChart\"></canvas>\n                    </div>\n                    -->\n                </main>\n\n                <!-- 3. 页脚与页码占位符 -->\n                <footer class=\"slide-footer\">\n                    <span>{{ current_page_number }}</span> / <span>{{ total_page_count }}</span>\n                </footer>\n                \n                <!-- 4. 底部装饰条 -->\n                <div class=\"slide-decoration\"></div>\n\n            </div>\n        </div>\n    </div>\n\n    <script>\n        // 这是一个可选的脚本示例，用于演示如何使用Chart.js\n        // 在实际使用中，图表数据应由您的系统动态生成\n        /*\n        const ctx = document.getElementById('myChart');\n        if (ctx) {\n            new Chart(ctx, {\n                type: 'bar', // 图表类型：条形图\n                data: {\n                    labels: ['一月', '二月', '三月', '四月', '五月', '六月'],\n                    datasets: [{\n                        label: '月度销售额',\n                        data: [12, 19, 3, 5, 2, 3],\n                        backgroundColor: 'rgba(14, 165, 233, 0.6)', // 使用主题色\n                        borderColor: 'rgba(14, 165, 233, 1)',\n                        borderWidth: 1,\n                        borderRadius: 4\n                    }]\n                },\n                options: {\n                    responsive: true,\n                    maintainAspectRatio: false,\n                    scales: {\n                        y: {\n                            beginAtZero: true\n                        }\n                    },\n                    plugins: {\n                        legend: {\n                            display: false // 简洁起见，隐藏图例\n                        }\n                    }\n                }\n            });\n        }\n        */\n    </script>\n\n</body>\n</html>",
+  "tags": [
+    "清新风"
+  ],
+  "is_default": false,
+  "export_info": {
+    "exported_at": "2025-10-04T06:54:40.086Z",
+    "original_id": 15,
+    "original_created_at": 1755855551.7143126
+  }
+}
\ No newline at end of file
