| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <!-- P05 Chapter 2 WHO · breathing · hero_page with ch2_who.png --> |
| 3 | |
| 4 | <g id="bg-image"> |
| 5 | <image href="../images/ch2_who.png" x="0" y="0" width="1280" height="720" preserveAspectRatio="xMidYMid slice"/> |
| 6 | </g> |
| 7 | |
| 8 | <!-- Black bar with chapter number --> |
| 9 | <g id="chapter-tag"> |
| 10 | <rect x="60" y="50" width="180" height="48" fill="#1A1A2E"/> |
| 11 | <rect x="60" y="50" width="14" height="48" fill="#FF3DA5"/> |
| 12 | <text x="92" y="83" font-family="Impact, "Arial Black", sans-serif" font-size="22" font-weight="900" fill="#FFF8EE" letter-spacing="6">CH · 02</text> |
| 13 | </g> |
| 14 | |
| 15 | <!-- Hero chapter title --> |
| 16 | <g id="chapter-title"> |
| 17 | <text x="640" y="240" text-anchor="middle" font-family="Impact, "Arial Black", sans-serif" font-size="180" font-weight="900" fill="#FFF8EE" letter-spacing="-2">WHO.</text> |
| 18 | <!-- Yellow underline accent --> |
| 19 | <rect x="430" y="255" width="420" height="14" fill="#FFD93D"/> |
| 20 | </g> |
| 21 | |
| 22 | <!-- Subtitle band --> |
| 23 | <g id="subtitle-band"> |
| 24 | <rect x="160" y="320" width="960" height="80" rx="12" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="4"/> |
| 25 | <text x="640" y="372" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="26" font-weight="700" fill="#1A1A2E">80 组艺人 · 5 个风格阵营 · <tspan fill="#FF3DA5" font-weight="900">1 张你忘不掉的脸</tspan></text> |
| 26 | </g> |
| 27 | |
| 28 | <!-- Annotation cards (image-as-canvas + native overlay #38) --> |
| 29 | <g id="annotation-rock"> |
| 30 | <rect x="80" y="450" width="140" height="60" rx="12" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="3"/> |
| 31 | <rect x="80" y="450" width="10" height="60" fill="#FF3DA5"/> |
| 32 | <text x="100" y="478" font-family="Impact, sans-serif" font-size="14" font-weight="900" fill="#1A1A2E" letter-spacing="2">ROCK · 25</text> |
| 33 | <text x="100" y="498" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" font-weight="700" fill="#5C5C7A">摇滚 25 组</text> |
| 34 | </g> |
| 35 | <g id="annotation-electronic"> |
| 36 | <rect x="240" y="450" width="140" height="60" rx="12" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="3"/> |
| 37 | <rect x="240" y="450" width="10" height="60" fill="#00B8D9"/> |
| 38 | <text x="260" y="478" font-family="Impact, sans-serif" font-size="14" font-weight="900" fill="#1A1A2E" letter-spacing="2">ELECTRO · 30</text> |
| 39 | <text x="260" y="498" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" font-weight="700" fill="#5C5C7A">电子 30 组</text> |
| 40 | </g> |
| 41 | <g id="annotation-folk"> |
| 42 | <rect x="400" y="450" width="140" height="60" rx="12" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="3"/> |
| 43 | <rect x="400" y="450" width="10" height="60" fill="#00C896"/> |
| 44 | <text x="420" y="478" font-family="Impact, sans-serif" font-size="14" font-weight="900" fill="#1A1A2E" letter-spacing="2">FOLK · 15</text> |
| 45 | <text x="420" y="498" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" font-weight="700" fill="#5C5C7A">民谣 15 组</text> |
| 46 | </g> |
| 47 | <g id="annotation-hiphop"> |
| 48 | <rect x="560" y="450" width="140" height="60" rx="12" fill="#FFF8EE" stroke="#1A1A2E" stroke-width="3"/> |
| 49 | <rect x="560" y="450" width="10" height="60" fill="#FFD93D"/> |
| 50 | <text x="580" y="478" font-family="Impact, sans-serif" font-size="14" font-weight="900" fill="#1A1A2E" letter-spacing="2">HIPHOP · 10</text> |
| 51 | <text x="580" y="498" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" font-weight="700" fill="#5C5C7A">嘻哈 10 组</text> |
| 52 | </g> |
| 53 | |
| 54 | <!-- Highlight tag right side --> |
| 55 | <g id="tag-cta"> |
| 56 | <rect x="900" y="450" width="300" height="60" rx="30" fill="#FF3DA5" stroke="#1A1A2E" stroke-width="4"/> |
| 57 | <text x="1050" y="488" text-anchor="middle" font-family="Impact, "Arial Black", sans-serif" font-size="22" font-weight="900" fill="#FFF8EE" letter-spacing="3">MEET THE LINEUP →</text> |
| 58 | </g> |
| 59 | |
| 60 | <!-- Bottom decoration --> |
| 61 | <g id="decor-bottom"> |
| 62 | <circle cx="80" cy="660" r="10" fill="#FF3DA5" stroke="#FFF8EE" stroke-width="2"/> |
| 63 | <circle cx="105" cy="660" r="10" fill="#00B8D9" stroke="#FFF8EE" stroke-width="2"/> |
| 64 | <circle cx="130" cy="660" r="10" fill="#FFD93D" stroke="#FFF8EE" stroke-width="2"/> |
| 65 | <circle cx="155" cy="660" r="10" fill="#00C896" stroke="#FFF8EE" stroke-width="2"/> |
| 66 | <path d="M 220 670 L 240 650 L 240 670 L 260 650" stroke="#FFF8EE" stroke-width="3" fill="none" stroke-linecap="round"/> |
| 67 | </g> |
| 68 | |
| 69 | <!-- Footer --> |
| 70 | <g id="footer"> |
| 71 | <text x="1220" y="700" text-anchor="end" font-family="Impact, sans-serif" font-size="14" font-weight="900" fill="#FFF8EE" letter-spacing="3">05 / 14 · SUGAR RUSH</text> |
| 72 | </g> |
| 73 | </svg> |
| 74 |