| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>复古电视 / Retro TV</title> |
| 7 | <style> |
| 8 | *{margin:0;padding:0;box-sizing:border-box} |
| 9 | html,body{width:100%;height:100%;overflow:hidden} |
| 10 | html{display:grid;place-items:center;background:#0f1117} |
| 11 | body{display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#0f1117} |
| 12 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#78350f;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;padding:clamp(14px,2.5vw,32px)} |
| 13 | .bezel{width:100%;height:100%;background:#92400e;border-radius:clamp(14px,2.5vw,30px);padding:clamp(8px,1.5vw,20px);display:flex;align-items:center;justify-content:center;position:relative} |
| 14 | .screen{width:100%;height:100%;background:#fef3c7;border-radius:clamp(10px,2vw,24px);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,2.5vw,36px)} |
| 15 | .scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(120,53,15,.05) 2px,rgba(120,53,15,.05) 4px);pointer-events:none;border-radius:inherit} |
| 16 | .glow{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(245,158,11,.1) 0%,transparent 70%);pointer-events:none;border-radius:inherit} |
| 17 | .tag{font-family:"SFMono-Regular",Consolas,monospace;font-size:clamp(7px,.95vw,10px);color:#d97706;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:clamp(4px,.8vw,10px);position:relative;z-index:1} |
| 18 | .title{font-family:Georgia,"Songti SC",serif;font-size:clamp(24px,5vw,60px);color:#451a03;font-weight:bold;line-height:1.2;margin-bottom:clamp(4px,.8vw,10px);position:relative;z-index:1;text-align:center} |
| 19 | .desc{font-size:clamp(9px,1.2vw,14px);color:#78350f;line-height:1.6;text-align:center;max-width:clamp(160px,32vw,400px);position:relative;z-index:1} |
| 20 | .palette{display:flex;gap:clamp(4px,.5vw,6px);margin-top:clamp(6px,1.2vw,16px);position:relative;z-index:1} |
| 21 | .sw{width:clamp(10px,1.5vw,18px);height:clamp(10px,1.5vw,18px);border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.1)} |
| 22 | .knobs{position:absolute;bottom:clamp(2px,.5vw,6px);left:50%;transform:translateX(-50%);display:flex;gap:clamp(4px,.8vw,12px)} |
| 23 | .knob{width:clamp(6px,1vw,12px);height:clamp(6px,1vw,12px);background:#78350f;border-radius:50%;border:1.5px solid #92400e} |
| 24 | </style> |
| 25 | </head> |
| 26 | <body> |
| 27 | <div class="slide"> |
| 28 | <div class="bezel"> |
| 29 | <div class="screen"> |
| 30 | <div class="scanlines"></div> |
| 31 | <div class="glow"></div> |
| 32 | <div class="tag">Retro TV</div> |
| 33 | <div class="title">复古电视</div> |
| 34 | <div class="desc">暖黄屏幕闪烁琥珀光，时间倒流回客厅里的CRT</div> |
| 35 | <div class="palette"> |
| 36 | <i class="sw" style="--c:#78350f"></i> |
| 37 | <i class="sw" style="--c:#92400e"></i> |
| 38 | <i class="sw" style="--c:#f59e0b"></i> |
| 39 | <i class="sw" style="--c:#d97706"></i> |
| 40 | <i class="sw" style="--c:#fef3c7"></i> |
| 41 | </div> |
| 42 | </div> |
| 43 | <div class="knobs"><div class="knob"></div><div class="knob"></div><div class="knob"></div></div> |
| 44 | </div> |
| 45 | </div> |
| 46 | </body> |
| 47 | </html> |
| 48 |