| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="cinemaBg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 4 | <stop offset="0%" stop-color="#080A0F"/> |
| 5 | <stop offset="100%" stop-color="#0A080F"/> |
| 6 | </linearGradient> |
| 7 | <linearGradient id="bigTextGrad" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 8 | <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/> |
| 9 | <stop offset="20%" stop-color="#FFFFFF" stop-opacity="1"/> |
| 10 | <stop offset="80%" stop-color="#FFFFFF" stop-opacity="1"/> |
| 11 | <stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/> |
| 12 | </linearGradient> |
| 13 | <linearGradient id="gapFade1" x1="0%" y1="0%" x2="100%" y2="0%"> |
| 14 | <stop offset="0%" stop-color="#080A0F" stop-opacity="0"/> |
| 15 | <stop offset="100%" stop-color="#080A0F" stop-opacity="1"/> |
| 16 | </linearGradient> |
| 17 | <linearGradient id="gapFade2" x1="100%" y1="0%" x2="0%" y2="0%"> |
| 18 | <stop offset="0%" stop-color="#080A0F" stop-opacity="0"/> |
| 19 | <stop offset="100%" stop-color="#080A0F" stop-opacity="1"/> |
| 20 | </linearGradient> |
| 21 | </defs> |
| 22 | |
| 23 | <!-- Background dark cinema --> |
| 24 | <rect width="1280" height="720" fill="url(#cinemaBg)"/> |
| 25 | |
| 26 | <!-- THREE IMAGES — montage tiled full canvas with 2px gaps --> |
| 27 | <!-- Image 1 — left (arch/urban): 0 to 393px --> |
| 28 | <image href="../images/p19_collage1.png" x="0" y="0" width="393" height="720" |
| 29 | preserveAspectRatio="xMidYMid slice"/> |
| 30 | |
| 31 | <!-- Image 2 — center (texture): 395 to 787px --> |
| 32 | <image href="../images/p19_collage2.png" x="395" y="0" width="392" height="720" |
| 33 | preserveAspectRatio="xMidYMid slice"/> |
| 34 | |
| 35 | <!-- Image 3 — right (motion blur): 789 to 1280px --> |
| 36 | <image href="../images/p19_collage3.png" x="789" y="0" width="491" height="720" |
| 37 | preserveAspectRatio="xMidYMid slice"/> |
| 38 | |
| 39 | <!-- Dark gap lines between images --> |
| 40 | <rect x="393" y="0" width="2" height="720" fill="#080A0F"/> |
| 41 | <rect x="787" y="0" width="2" height="720" fill="#080A0F"/> |
| 42 | |
| 43 | <!-- Overall dark overlay to push images back --> |
| 44 | <rect width="1280" height="720" fill="#080A0F" fill-opacity="0.4"/> |
| 45 | |
| 46 | <!-- ===== OVERLAID GIANT TEXT SPANNING ALL THREE IMAGES ===== --> |
| 47 | <!-- Dark band behind text for legibility --> |
| 48 | <rect x="0" y="268" width="1280" height="184" fill="#080A0F" fill-opacity="0.55"/> |
| 49 | |
| 50 | <!-- Main headline — spans full width --> |
| 51 | <text x="60" y="365" font-family="Georgia, 'Microsoft YaHei', serif" |
| 52 | font-size="88" font-weight="bold" fill="#E8E8F0" letter-spacing="-3">蒙太奇</text> |
| 53 | <text x="600" y="365" font-family="Georgia, serif" font-size="88" font-weight="bold" |
| 54 | fill="#E8E8F0" fill-opacity="0.15" letter-spacing="-3">蒙太奇</text> |
| 55 | |
| 56 | <!-- Subtitle spanning images --> |
| 57 | <text x="60" y="420" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 58 | font-size="22" fill="#9090A0" letter-spacing="4">MONTAGE COLLAGE</text> |
| 59 | |
| 60 | <!-- Thin accent line --> |
| 61 | <rect x="60" y="436" width="800" height="1" fill="#7C6FF7" fill-opacity="0.4"/> |
| 62 | |
| 63 | <!-- Top meta --> |
| 64 | <text x="60" y="36" font-family="Consolas, monospace" font-size="12" fill="#5A5A72" letter-spacing="2">P19 · editorial × dark-cinematic · 多图拼贴蒙太奇</text> |
| 65 | |
| 66 | <!-- Per-image labels at bottom --> |
| 67 | <rect x="0" y="660" width="393" height="60" fill="#080A0F" fill-opacity="0.7"/> |
| 68 | <text x="30" y="683" font-family="Consolas, monospace" font-size="11" fill="#F5A623">01 architecture</text> |
| 69 | <text x="30" y="700" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="13" fill="#9090A0">都市建筑 · 戏剧阴影</text> |
| 70 | |
| 71 | <rect x="395" y="660" width="392" height="60" fill="#080A0F" fill-opacity="0.7"/> |
| 72 | <text x="425" y="683" font-family="Consolas, monospace" font-size="11" fill="#4ECDC4">02 texture</text> |
| 73 | <text x="425" y="700" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="13" fill="#9090A0">材质特写 · 抽象纹理</text> |
| 74 | |
| 75 | <rect x="789" y="660" width="491" height="60" fill="#080A0F" fill-opacity="0.7"/> |
| 76 | <text x="819" y="683" font-family="Consolas, monospace" font-size="11" fill="#7C6FF7">03 motion</text> |
| 77 | <text x="819" y="700" font-family="Arial, 'Microsoft YaHei', sans-serif" font-size="13" fill="#9090A0">运动模糊 · 光轨夜景</text> |
| 78 | |
| 79 | <!-- Right side info --> |
| 80 | <text x="1240" y="260" text-anchor="end" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 81 | font-size="15" fill="#E8E8F0" fill-opacity="0.5">三图并置</text> |
| 82 | <text x="1240" y="284" text-anchor="end" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 83 | font-size="15" fill="#E8E8F0" fill-opacity="0.5">大字横压</text> |
| 84 | </svg> |
| 85 |