16 lines
4.1 KiB
JSON
16 lines
4.1 KiB
JSON
|
{
|
|||
|
|
"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
|
|||
|
|
}
|
|||
|
|
}
|