{
  "template_name": "日落大道",
  "description": "日落大道",
  "html_template": "<!DOCTYPE html>\n<html lang=\"zh-CN\" style=\"margin: 0; padding: 0; height: 100%; width: 100%;\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>日落大道 - HTML 母版模板</title>\n    \n    <!-- Font Awesome (图标库) -->\n    <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css\">\n\n</head>\n<body style=\"margin: 0; padding: 0; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; background-color: #0d0f12; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;\">\n\n    <!-- 幻灯片容器（保持宽高比） -->\n    <div id=\"presentation-container\" style=\"width: 1280px; height: 720px; transform-origin: center center; box-shadow: 0 10px 30px rgba(0,0,0,0.5);\">\n\n        <!-- 幻灯片主体 -->\n        <div id=\"slide\" style=\"width: 100%; height: 100%; position: relative; overflow: hidden; color: #F1F5F9; background: radial-gradient(circle at 90% 20%, #4c3228 0%, #1a1d24 60%);\">\n\n            <!-- 左侧高光条 -->\n            <div style=\"position: absolute; left: 0; top: 0; width: 6px; height: 100%; background: linear-gradient(180deg, #F59E0B 0%, rgba(245, 158, 11, 0) 70%);\"></div>\n\n            <!-- 底部山脉轮廓（SVG 已 URL 编码） -->\n            <div style=\"position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;\n                background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1280 80%22><path d=%22M0,80 L0,70 Q160,50 320,70 T640,60 T960,75 T1280,65 L1280,80 Z%22 fill=%22rgba(26,29,36,0.3)%22></path><path d=%22M0,80 L0,75 Q200,60 400,75 T800,65 T1280,72 L1280,80 Z%22 fill=%22rgba(26,29,36,0.5)%22></path></svg>'); \n                background-repeat: no-repeat; background-size: cover;\">\n            </div>\n\n            <!-- 页面标题 -->\n            <div id=\"page-title-container\" style=\"position: absolute; top: 30px; left: 60px; right: 60px;\">\n                <h1 style=\"font-size: 48px; font-weight: 700; color: #F59E0B; margin: 0; letter-spacing: 1.5px; line-height: 1.2;\">\n                    {{ page_title }}\n                </h1>\n            </div>\n\n            <!-- 内容区域 -->\n            <div id=\"page-content-container\" style=\"position: absolute; top: 160px; left: 60px; right: 60px; bottom: 80px;\">\n                <div style=\"font-size: 22px; line-height: 1.7; color: #F1F5F9; letter-spacing: 0.5px;\">\n                    {{ page_content }}\n                </div>\n            </div>\n\n            <!-- 页码区域 -->\n            <div id=\"page-number-container\" style=\"position: absolute; bottom: 40px; right: 60px; font-size: 16px; color: #94A3B8; letter-spacing: 1px;\">\n                <span>{{ current_page_number }}</span> / <span>{{ total_page_count }}</span>\n            </div>\n\n        </div>\n    </div>\n\n    <!-- 响应式缩放保持16:9比例 -->\n    <script>\n        function scalePresentation() {\n            const container = document.getElementById('presentation-container');\n            const targetWidth = 1280;\n            const targetHeight = 720;\n\n            const windowWidth = window.innerWidth;\n            const windowHeight = window.innerHeight;\n\n            const scaleX = windowWidth / targetWidth;\n            const scaleY = windowHeight / targetHeight;\n\n            const scale = Math.min(scaleX, scaleY);\n            container.style.transform = 'scale(' + scale + ')';\n        }\n\n        window.addEventListener('load', scalePresentation);\n        window.addEventListener('resize', scalePresentation);\n    </script>\n\n</body>\n</html>\n",
  "tags": [
    "日落",
    "橙黄",
    "渐变"
  ],
  "is_default": false,
  "export_info": {
    "exported_at": "2025-10-15T13:34:04.008Z",
    "original_id": 11,
    "original_created_at": 1760185063.7941372
  }
}