17 lines
9.4 KiB
JSON
17 lines
9.4 KiB
JSON
{
|
|
"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>{{ page_title }}</title>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js\"></script>\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Merriweather:wght@400;700&display=swap');\n\n html {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #e0e8f0; \n }\n\n body {\n width: 1280px;\n height: 720px;\n margin: 0;\n padding: 0;\n position: relative;\n overflow: hidden;\n background-color: #fdfaf3;\n background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><filter id=\"n\" x=\"0\" y=\"0\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.7\" numOctaves=\"5\" stitchTiles=\"stitch\"/></filter><rect width=\"100\" height=\"100\" filter=\"url(%23n)\" opacity=\"0.07\"/></svg>');\n font-family: 'Merriweather', 'Georgia', serif;\n flex-shrink: 0; \n box-shadow: 0 8px 25px rgba(0,0,0,0.2);\n border-radius: 8px;\n }\n \n .slide-container {\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n color: #4a443d;\n position: relative;\n }\n\n .slide-container::before {\n content: '';\n position: absolute;\n top: -10px;\n left: -15px;\n width: 150px;\n height: 150px;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><path d=\"M 50,0 C 40,20 20,40 0,50 C 20,60 40,80 50,100 C 60,80 80,60 100,50 C 80,40 60,20 50,0 Z\" fill=\"%23a3b8a1\" transform=\"rotate(-30 50 50) scale(0.8)\" opacity=\"0.6\"/></svg>');\n background-repeat: no-repeat;\n background-size: contain;\n z-index: 0;\n }\n \n .slide-header {\n padding: 50px 70px 20px 70px;\n position: relative;\n border-bottom: 2px solid #e8e2d4;\n }\n \n .slide-title {\n font-family: 'Gochi Hand', cursive;\n font-size: clamp(2.8rem, 4vw, 4rem);\n font-weight: normal;\n color: #2c5d63;\n margin: 0;\n line-height: 1.1;\n z-index: 1;\n position: relative;\n }\n\n .slide-header::after {\n content: none;\n }\n \n .slide-content {\n flex: 1;\n padding: 30px 70px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n max-height: 540px;\n overflow: auto;\n }\n \n .content-main {\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.9;\n color: #4a443d;\n }\n \n .content-points {\n list-style: none;\n padding: 0;\n margin: 20px 0;\n }\n \n .content-points li {\n margin-bottom: 15px;\n padding-left: 35px;\n position: relative;\n font-size: clamp(1.1rem, 2vw, 1.25rem);\n line-height: 1.7;\n }\n \n .content-points li:before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0.4em;\n width: 18px;\n height: 18px;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%237b9e89\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z\"/></svg>');\n background-size: contain;\n background-repeat: no-repeat;\n }\n \n .slide-footer {\n position: absolute;\n bottom: 25px;\n right: 40px;\n color: #8a8174;\n font-size: 16px;\n font-family: 'Merriweather', serif;\n }\n \n .chart-container {\n max-height: 300px;\n margin: 20px 0;\n padding: 15px;\n background: rgba(234, 242, 227, 0.4);\n border-radius: 8px;\n }\n \n .highlight-box {\n background: #eaf2e3;\n border-left: 4px solid #8fbc8f;\n padding: 20px;\n margin: 20px 0;\n border-radius: 6px;\n }\n \n .stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 25px;\n margin: 20px 0;\n }\n \n .stat-card {\n background: #f4f0e9;\n padding: 20px;\n border-radius: 8px;\n text-align: center;\n border: 1px solid #d4cbbd;\n box-shadow: 2px 2px 5px rgba(0,0,0,0.05);\n }\n \n .stat-number {\n font-size: 2.8rem;\n font-weight: bold;\n color: #2c5d63;\n display: block;\n font-family: 'Merriweather', sans-serif;\n }\n \n .stat-label {\n font-size: 1rem;\n color: #8a8174;\n margin-top: 5px;\n }\n \n @media (max-width: 1280px) {\n body {\n width: 100vw;\n height: 56.25vw;\n max-height: 100vh;\n border-radius: 0;\n }\n }\n </style>\n</head>\n<body>\n <div class=\"slide-container\">\n <div class=\"slide-header\">\n <h1 class=\"slide-title\">{{ main_heading }}</h1>\n </div>\n \n <div class=\"slide-content\">\n <div class=\"content-main\">\n <p>在广袤的森林深处，藏着不为人知的秘密。阳光透过树叶的缝隙，洒下金色的光斑，仿佛在诉说着古老的故事。</p>\n\n <div class=\"highlight-box\">\n 这是一个值得记住的瞬间，就像夏日午后的一场微风，带来了青草的芬芳。\n </div>\n\n <ul class=\"content-points\">\n <li>倾听风的声音。</li>\n <li>寻找林中的精灵。</li>\n <li>收集闪亮的星辰。</li>\n </ul>\n\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <span class=\"stat-number\">1,204</span>\n <span class=\"stat-label\">萤火虫</span>\n </div>\n <div class=\"stat-card\">\n <span class=\"stat-number\">32</span>\n <span class=\"stat-label\">条小径</span>\n </div>\n <div class=\"stat-card\">\n <span class=\"stat-number\">7</span>\n <span class=\"stat-label\">个树屋</span>\n </div>\n </div>\n\n <div class=\"chart-container\">\n <canvas id=\"myChart\"></canvas>\n </div> \n\n </div>\n </div>\n \n <div class=\"slide-footer\">\n {{ current_page_number }} / {{ total_page_count }}\n </div>\n </div>\n\n <script>\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, 15, 8],\n backgroundColor: 'rgba(123, 158, 137, 0.6)',\n borderColor: 'rgba(123, 158, 137, 1)',\n borderWidth: 1,\n borderRadius: 4\n }]\n },\n options: {\n scales: {\n y: {\n beginAtZero: true,\n grid: { color: 'rgba(74, 68, 61, 0.1)' },\n ticks: { color: '#8a8174' }\n },\n x: {\n grid: { display: false },\n ticks: { color: '#8a8174' }\n }\n },\n plugins: {\n legend: {\n labels: {\n color: '#4a443d' \n }\n }\n }\n }\n });\n }\n </script>\n</body>\n</html>\n",
|
|
"tags": [
|
|
"吉卜力",
|
|
"手绘",
|
|
"治愈",
|
|
"自然"
|
|
],
|
|
"is_default": false,
|
|
"export_info": {
|
|
"exported_at": "2025-10-04T06:52:17.307Z",
|
|
"original_id": 7,
|
|
"original_created_at": 1752914847.2126725
|
|
}
|
|
} |