| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <linearGradient id="darkOverlay" x1="0%" y1="0%" x2="0%" y2="100%"> |
| 4 | <stop offset="0%" stop-color="#0F1117" stop-opacity="0.55"/> |
| 5 | <stop offset="100%" stop-color="#0F1117" stop-opacity="0.75"/> |
| 6 | </linearGradient> |
| 7 | <linearGradient id="card1Bg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 8 | <stop offset="0%" stop-color="#7C6FF7" stop-opacity="0.85"/> |
| 9 | <stop offset="100%" stop-color="#5A4FCC" stop-opacity="0.9"/> |
| 10 | </linearGradient> |
| 11 | <linearGradient id="card2Bg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 12 | <stop offset="0%" stop-color="#F5A623" stop-opacity="0.85"/> |
| 13 | <stop offset="100%" stop-color="#CC7A0A" stop-opacity="0.9"/> |
| 14 | </linearGradient> |
| 15 | <linearGradient id="card3Bg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 16 | <stop offset="0%" stop-color="#4ECDC4" stop-opacity="0.85"/> |
| 17 | <stop offset="100%" stop-color="#2AA89E" stop-opacity="0.9"/> |
| 18 | </linearGradient> |
| 19 | <linearGradient id="card4Bg" x1="0%" y1="0%" x2="100%" y2="100%"> |
| 20 | <stop offset="0%" stop-color="#1A1D2E" stop-opacity="0.9"/> |
| 21 | <stop offset="100%" stop-color="#0F1117" stop-opacity="0.95"/> |
| 22 | </linearGradient> |
| 23 | </defs> |
| 24 | |
| 25 | <!-- Full-bleed pixel art background --> |
| 26 | <image href="../images/p10_bg_texture.png" x="0" y="0" width="1280" height="720" |
| 27 | preserveAspectRatio="xMidYMid slice"/> |
| 28 | |
| 29 | <!-- Dark overlay for legibility --> |
| 30 | <rect width="1280" height="720" fill="url(#darkOverlay)"/> |
| 31 | |
| 32 | <!-- Top label --> |
| 33 | <text x="640" y="36" text-anchor="middle" font-family="Consolas, monospace" |
| 34 | font-size="13" fill="#E8E8F0" fill-opacity="0.6" letter-spacing="3">P10 · pixel-art × vivid-launch · 底纹密铺</text> |
| 35 | |
| 36 | <!-- Four info cards overlaying pixel background --> |
| 37 | <!-- Card 1 — top left --> |
| 38 | <rect x="60" y="60" width="540" height="280" rx="4" fill="url(#card1Bg)"/> |
| 39 | <!-- Pixel-style border accent --> |
| 40 | <rect x="60" y="60" width="540" height="4" fill="#E8E8F0" fill-opacity="0.3"/> |
| 41 | <text x="80" y="100" font-family="Consolas, monospace" font-size="13" fill="#E8E8F0" fill-opacity="0.7">[RENDERING]</text> |
| 42 | <text x="80" y="140" font-family="Georgia, 'Microsoft YaHei', serif" |
| 43 | font-size="34" font-weight="bold" fill="#FFFFFF">像素复古</text> |
| 44 | <text x="80" y="170" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 45 | font-size="17" fill="#E8E8F0" fill-opacity="0.9">pixel-art</text> |
| 46 | <text x="80" y="206" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 47 | font-size="17" fill="#E8E8F0" fill-opacity="0.8">8-bit 像素网格，严格对齐，</text> |
| 48 | <text x="80" y="228" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 49 | font-size="17" fill="#E8E8F0" fill-opacity="0.8">无抗锯齿，色彩鲜明饱和。</text> |
| 50 | <text x="80" y="270" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 51 | font-size="15" fill="#E8E8F0" fill-opacity="0.7">游戏 / 复古科技 / 怀旧感场景</text> |
| 52 | <!-- Pixel decoration --> |
| 53 | <rect x="480" y="70" width="12" height="12" fill="#FFFFFF" fill-opacity="0.4"/> |
| 54 | <rect x="494" y="70" width="12" height="12" fill="#FFFFFF" fill-opacity="0.2"/> |
| 55 | <rect x="508" y="70" width="12" height="12" fill="#FFFFFF" fill-opacity="0.1"/> |
| 56 | |
| 57 | <!-- Card 2 — top right --> |
| 58 | <rect x="620" y="60" width="600" height="280" rx="4" fill="url(#card2Bg)"/> |
| 59 | <rect x="620" y="60" width="600" height="4" fill="#E8E8F0" fill-opacity="0.3"/> |
| 60 | <text x="640" y="100" font-family="Consolas, monospace" font-size="13" fill="#3A2010" fill-opacity="0.9">[PALETTE]</text> |
| 61 | <text x="640" y="140" font-family="Georgia, 'Microsoft YaHei', serif" |
| 62 | font-size="34" font-weight="bold" fill="#3A1A00">活力发射</text> |
| 63 | <text x="640" y="170" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 64 | font-size="17" fill="#3A2010">vivid-launch</text> |
| 65 | <text x="640" y="206" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 66 | font-size="17" fill="#3A2010">高饱和度色彩，抓人眼球，</text> |
| 67 | <text x="640" y="228" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 68 | font-size="17" fill="#3A2010">产品发布、营销活动首选。</text> |
| 69 | <text x="640" y="270" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 70 | font-size="15" fill="#3A2010" fill-opacity="0.8">大胆 / 饱和 / 引人注目</text> |
| 71 | |
| 72 | <!-- Card 3 — bottom left --> |
| 73 | <rect x="60" y="360" width="540" height="300" rx="4" fill="url(#card3Bg)"/> |
| 74 | <rect x="60" y="360" width="540" height="4" fill="#E8E8F0" fill-opacity="0.3"/> |
| 75 | <text x="80" y="400" font-family="Consolas, monospace" font-size="13" fill="#0A3A38" fill-opacity="0.9">[LAYOUT]</text> |
| 76 | <text x="80" y="440" font-family="Georgia, 'Microsoft YaHei', serif" |
| 77 | font-size="34" font-weight="bold" fill="#0A2A28">底纹密铺</text> |
| 78 | <text x="80" y="470" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 79 | font-size="17" fill="#0A3A38">图作全幅底纹</text> |
| 80 | <text x="80" y="506" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 81 | font-size="17" fill="#0A3A38">信息卡片覆盖其上，</text> |
| 82 | <text x="80" y="528" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 83 | font-size="17" fill="#0A3A38">图像与信息融为一体。</text> |
| 84 | <text x="80" y="570" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 85 | font-size="15" fill="#0A3A38" fill-opacity="0.8">图 → 氛围载体 · 文 → 信息主体</text> |
| 86 | <text x="80" y="630" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 87 | font-size="15" fill="#0A3A38" fill-opacity="0.7">遮罩层控制透明度确保可读性</text> |
| 88 | |
| 89 | <!-- Card 4 — bottom right — dark --> |
| 90 | <rect x="620" y="360" width="600" height="300" rx="4" fill="url(#card4Bg)" stroke="#7C6FF7" stroke-opacity="0.4" stroke-width="1"/> |
| 91 | <rect x="620" y="360" width="600" height="4" fill="#7C6FF7" fill-opacity="0.5"/> |
| 92 | <text x="640" y="400" font-family="Consolas, monospace" font-size="13" fill="#7C6FF7">[TECHNIQUE]</text> |
| 93 | <text x="640" y="440" font-family="Georgia, 'Microsoft YaHei', serif" |
| 94 | font-size="34" font-weight="bold" fill="#E8E8F0">技术要点</text> |
| 95 | <text x="640" y="480" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 96 | font-size="17" fill="#9090A0">· 全出血图像 (hero_page)</text> |
| 97 | <text x="640" y="506" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 98 | font-size="17" fill="#9090A0">· 暗色遮罩叠加层</text> |
| 99 | <text x="640" y="532" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 100 | font-size="17" fill="#9090A0">· 高对比度信息卡片</text> |
| 101 | <text x="640" y="558" font-family="Arial, 'Microsoft YaHei', sans-serif" |
| 102 | font-size="17" fill="#9090A0">· 强调色标题确保视觉层次</text> |
| 103 | <!-- Pixel-art badge --> |
| 104 | <rect x="840" y="620" width="160" height="28" rx="2" fill="#7C6FF7" fill-opacity="0.2" stroke="#7C6FF7" stroke-opacity="0.4" stroke-width="1"/> |
| 105 | <text x="920" y="639" text-anchor="middle" font-family="Consolas, monospace" font-size="12" fill="#7C6FF7">8-BIT MODE</text> |
| 106 | |
| 107 | <!-- Page number --> |
| 108 | <text x="1240" y="700" text-anchor="end" font-family="Consolas, monospace" font-size="13" fill="#E8E8F0" fill-opacity="0.5">10</text> |
| 109 | </svg> |
| 110 |