diff --git a/README.md b/README.md index 153625b..647e2b5 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ python -m http.server 8000 现有页面: - `page1.html`:完整日落城市文字画,空白处铺淡色「天」。 -- `page3.html`:无「天」背景的演职员表;前景标题「演职员表」,背景为电线、麻雀、枪、草、消防栓与下半屏火山。 +- `page3.html`:无「天」背景的演职员表;含 35 个演职员 nametag、电线、麻雀、草、消防栓与下半屏火山。 共用与专属: diff --git a/assets/css/page3.css b/assets/css/page3.css index 551ab2c..08975db 100644 --- a/assets/css/page3.css +++ b/assets/css/page3.css @@ -1,14 +1,13 @@ -/* 第 3 页:无「天」背景;只保留电线、麻雀、枪、草与前景标题 */ +/* 第 3 页:无「天」背景;只保留电线、麻雀、草与前景标题 */ .wire { color: #8794a5; } .sparrow { color: #ff7a3f; } -.gun { color: #8b6f55; } .grass { color: #4fc353; } .hydrant { color: #a93b43; } -/* 火山岩 / 熔岩参考色,按暗度 70% 压暗(保留 30% 明度) */ -.rock { color: color-mix(in srgb, #d07a38 30%, #000); } -.lava-a { color: color-mix(in srgb, #ff8f3f 30%, #000); } -.lava-b { color: color-mix(in srgb, #ff5a2a 30%, #000); } +/* 火山岩 / 熔岩参考色,按明度 50% 处理 */ +.rock { color: color-mix(in srgb, #d07a38 50%, #000); } +.lava-a { color: color-mix(in srgb, #ff8f3f 50%, #000); } +.lava-b { color: color-mix(in srgb, #ff5a2a 50%, #000); } /* 前景标题:不参与网格,字号与位置自由; top 的 em 相对自身 1.6em 字号,3.125em = 距顶部 5 个背景格 */ @@ -26,3 +25,24 @@ white-space: nowrap; z-index: 1; } + +/* 演职员表 nametag:5 × 2 格,格内居中 */ +.nametag { + position: absolute; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + width: 5em; + height: 2em; + background: rgba(10, 8, 6, 0.54); +} + +.nametag-name { + color: #e6dac6; + font-size: 1em; + font-weight: 400; + line-height: 1; + letter-spacing: 0; + white-space: nowrap; +} diff --git a/assets/js/page3.js b/assets/js/page3.js index d8b7f09..291514f 100644 --- a/assets/js/page3.js +++ b/assets/js/page3.js @@ -1,5 +1,5 @@ /* 第 3 页场景数据 - 前景:演职员表;背景:电线、麻雀、枪、草。 + 前景:演职员表;背景:电线、麻雀、草。 本页不铺「天」,空白格保持为空。 */ (() => { @@ -102,17 +102,8 @@ { text: '电线'.repeat(14), x: 0, y: 8, cls: 'wire' }, /* 麻雀:竖排于从左到右第四格,落在电线上方 */ { text: '麻雀', x: 3, y: 6, cls: 'sparrow', vertical: true }, - /* 火山铺在底部背景,枪、草、消防栓在其上层 */ + /* 火山铺在底部背景,草、消防栓在其上层 */ ...volcano, - /* 枪:多个「枪」拼出枪形,占最右 4 列,枪口指向左上方的麻雀 */ - { text: '枪', x: 24, y: 20, cls: 'gun' }, - { text: '枪', x: 25, y: 20, cls: 'gun' }, - { text: '枪', x: 25, y: 21, cls: 'gun' }, - { text: '枪', x: 26, y: 21, cls: 'gun' }, - { text: '枪', x: 26, y: 22, cls: 'gun' }, - { text: '枪', x: 27, y: 22, cls: 'gun' }, - { text: '枪', x: 27, y: 23, cls: 'gun' }, - { text: '枪', x: 27, y: 24, cls: 'gun' }, /* 草:最底部一排 */ { text: '草'.repeat(28), x: 0, y: 43, cls: 'grass' }, /* 消防栓:最后三行分散竖排九根,左侧留 2 格 */ @@ -131,4 +122,45 @@ credits.className = 'credits'; credits.textContent = '演职员表'; scene.append(credits); + + /* 36 个 nametag:4 列 × 9 行,补满 */ + const NAMES = [ + '郑滕飞', '秦雪莹', '关宸宇', '王天晓', '谢雨舟', '储明威', '庞熙若', + '刘婉莹', '陈彦淇', '古雅文', '周胤伯', '郑佳欣', '娄敬庭', '张加弛', + '李昀芷', '吴红霓', '鲍馨仪', '刘润泽', '李若熙', '马希予', '袁立桓', + '蒋子模', '李有睿', '王海心', '朱丽烨', '朱彦阳', '汪楚钧', '吴玥', + '张梓轩', '罗午阳', '郭柯言', '王之饶', '应玥', '湛茜茜', '黄钰涵', + '虞韫嘉', + ]; + + const TAG = { + cols: 4, + rows: 9, + width: 5, + height: 2, + gapX: 1, + gapY: 1, + left: 2, + top: 12, + }; + + let nameIndex = 0; + for (let row = 0; row < TAG.rows; row++) { + for (let col = 0; col < TAG.cols; col++) { + const name = NAMES[nameIndex++]; + if (!name) break; + + const tag = document.createElement('div'); + tag.className = 'nametag'; + tag.style.left = `${TAG.left + col * (TAG.width + TAG.gapX)}em`; + tag.style.top = `${TAG.top + row * (TAG.height + TAG.gapY)}em`; + + const label = document.createElement('span'); + label.className = 'nametag-name'; + label.textContent = name; + + tag.append(label); + scene.append(tag); + } + } })();