| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="warmBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 4 | <stop offset="0%" stop-color="#F5EDE0"/> |
| 5 | <stop offset="100%" stop-color="#EDE0D0"/> |
| 6 | </linearGradient> |
| 7 | <linearGradient id="imgBottomFade" x1="0%" y1="0%" x2="0%" y2="100%"> |
| 8 | <stop offset="0%" stop-color="#F5EDE0" stop-opacity="0"/> |
| 9 | <stop offset="70%" stop-color="#F5EDE0" stop-opacity="0"/> |
| 10 | <stop offset="100%" stop-color="#F5EDE0" stop-opacity="1"/> |
| 11 | </linearGradient> |
| 12 | <linearGradient id="warmAccent" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 13 | <stop offset="0%" stop-color="#C4704A"/> |
| 14 | <stop offset="100%" stop-color="#D4A96A"/> |
| 15 | </linearGradient> |
| 16 | </defs> |
| 17 | |
| 18 | <!-- Background warm earth --> |
| 19 | <rect width="1280" height="720" fill="url(#warmBg)"/> |
| 20 | |
| 21 | <!-- Top image — watercolor × warm-earth — full width, top half --> |
| 22 | <image href="../images/p05_top_img.png" x="0" y="0" width="1280" height="380" |
| 23 | preserveAspectRatio="xMidYMid slice"/> |
| 24 | |
| 25 | <!-- Smooth fade at bottom of image --> |
| 26 | <rect x="0" y="0" width="1280" height="380" fill="url(#imgBottomFade)"/> |
| 27 | |
| 28 | <!-- Thin separator line --> |
| 29 | <line x1="60" y1="395" x2="1220" y2="395" stroke="#C4704A" stroke-opacity="0.3" stroke-width="1"/> |
| 30 | |
| 31 | <!-- Page info row --> |
| 32 | <text x="60" y="378" font-family="Consolas, monospace" font-size="13" fill="#8A6A4A">P05 · watercolor × warm-earth · 顶图三栏</text> |
| 33 | |
| 34 | <!-- Three-column text layout — y starts at 415 --> |
| 35 | <!-- Column 1 --> |
| 36 | <text x="80" y="445" font-family="Georgia, 'Microsoft YaHei', serif" |
| 37 | font-size="22" font-weight="bold" fill="#3A2010">水彩渲染</text> |
| 38 | <text x="80" y="468" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 39 | font-size="13" fill="#8A6A4A" letter-spacing="1">Watercolor Rendering</text> |
| 40 | <rect x="80" y="478" width="60" height="2" rx="1" fill="url(#warmAccent)"/> |
| 41 | <text x="80" y="504" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 42 | font-size="17" fill="#5A3A20">水彩颜料在纸面上</text> |
| 43 | <text x="80" y="526" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 44 | font-size="17" fill="#5A3A20">晕染渗透，边缘</text> |
| 45 | <text x="80" y="548" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 46 | font-size="17" fill="#5A3A20">自然柔化。</text> |
| 47 | <text x="80" y="586" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 48 | font-size="15" fill="#8A6A4A">湿润感，有机质地，</text> |
| 49 | <text x="80" y="606" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 50 | font-size="15" fill="#8A6A4A">适合情感型叙事。</text> |
| 51 | |
| 52 | <!-- Column separator --> |
| 53 | <line x1="453" y1="425" x2="453" y2="660" stroke="#C4704A" stroke-opacity="0.2" stroke-width="1"/> |
| 54 | |
| 55 | <!-- Column 2 --> |
| 56 | <text x="480" y="445" font-family="Georgia, 'Microsoft YaHei', serif" |
| 57 | font-size="22" font-weight="bold" fill="#3A2010">暖土调色板</text> |
| 58 | <text x="480" y="468" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 59 | font-size="13" fill="#8A6A4A" letter-spacing="1">Warm-Earth Palette</text> |
| 60 | <rect x="480" y="478" width="60" height="2" rx="1" fill="url(#warmAccent)"/> |
| 61 | <text x="480" y="504" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 62 | font-size="17" fill="#5A3A20">赤土、沙黄、暮橙</text> |
| 63 | <text x="480" y="526" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 64 | font-size="17" fill="#5A3A20">构成温暖基调，</text> |
| 65 | <text x="480" y="548" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 66 | font-size="17" fill="#5A3A20">贴近自然与人文。</text> |
| 67 | <text x="480" y="586" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 68 | font-size="15" fill="#8A6A4A">色温偏高，营造温度感，</text> |
| 69 | <text x="480" y="606" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 70 | font-size="15" fill="#8A6A4A">避免冷漠疏离。</text> |
| 71 | |
| 72 | <!-- Column separator --> |
| 73 | <line x1="853" y1="425" x2="853" y2="660" stroke="#C4704A" stroke-opacity="0.2" stroke-width="1"/> |
| 74 | |
| 75 | <!-- Column 3 --> |
| 76 | <text x="880" y="445" font-family="Georgia, 'Microsoft YaHei', serif" |
| 77 | font-size="22" font-weight="bold" fill="#3A2010">顶图三栏布局</text> |
| 78 | <text x="880" y="468" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 79 | font-size="13" fill="#8A6A4A" letter-spacing="1">Top Image + 3-Column Text</text> |
| 80 | <rect x="880" y="478" width="60" height="2" rx="1" fill="url(#warmAccent)"/> |
| 81 | <text x="880" y="504" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 82 | font-size="17" fill="#5A3A20">全幅图像占上方</text> |
| 83 | <text x="880" y="526" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 84 | font-size="17" fill="#5A3A20">约 53% 画面，</text> |
| 85 | <text x="880" y="548" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 86 | font-size="17" fill="#5A3A20">下方三列等宽注释。</text> |
| 87 | <text x="880" y="586" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 88 | font-size="15" fill="#8A6A4A">图像如页眉，文字如脚注，</text> |
| 89 | <text x="880" y="606" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 90 | font-size="15" fill="#8A6A4A">逻辑自上而下流动。</text> |
| 91 | |
| 92 | <!-- Bottom page number --> |
| 93 | <text x="1220" y="700" text-anchor="end" font-family="Arial, sans-serif" font-size="13" fill="#8A6A4A">05</text> |
| 94 | </svg> |
| 95 |