| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>蓝图 · Blueprint</title> |
| 7 | <style> |
| 8 | *{box-sizing:border-box;margin:0} |
| 9 | html,body{width:100%;height:100%;overflow:hidden;background:#0f1117} |
| 10 | body{display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif} |
| 11 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#1e3a5f;border-radius:8px} |
| 12 | .grid-bg{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 39px,rgba(96,165,250,.15) 39px,rgba(96,165,250,.15) 40px),repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(96,165,250,.15) 39px,rgba(96,165,250,.15) 40px)} |
| 13 | .major-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 119px,rgba(96,165,250,.25) 119px,rgba(96,165,250,.25) 120px),repeating-linear-gradient(90deg,transparent,transparent 119px,rgba(96,165,250,.25) 119px,rgba(96,165,250,.25) 120px)} |
| 14 | .drawing{position:absolute;z-index:1} |
| 15 | .rect1{left:12%;top:25%;width:28%;height:35%;border:1.5px solid #60a5fa;border-radius:0} |
| 16 | .rect2{right:12%;top:20%;width:22%;height:25%;border:1.5px dashed #93c5fd} |
| 17 | .rect3{right:15%;bottom:22%;width:30%;height:18%;border:1.5px solid #60a5fa} |
| 18 | .dim-h{position:absolute;left:12%;top:18%;width:28%;height:0;border-top:1px dashed #93c5fd;display:flex;align-items:center;justify-content:center} |
| 19 | .dim-h::before,.dim-h::after{content:"";position:absolute;top:-4px;width:0;height:8px;border-left:1px solid #93c5fd} |
| 20 | .dim-h::before{left:0} |
| 21 | .dim-h::after{right:0} |
| 22 | .dim-label{background:#1e3a5f;color:#93c5fd;font-size:clamp(7px,1vw,11px);padding:0 6px;font-family:"SFMono-Regular",Consolas,monospace;letter-spacing:.05em} |
| 23 | .circle-draw{position:absolute;left:42%;top:40%;width:clamp(60px,10vw,120px);height:clamp(60px,10vw,120px);border:1.5px solid #60a5fa;border-radius:50%} |
| 24 | .circle-draw::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;background:#60a5fa;border-radius:50%;transform:translate(-50%,-50%)} |
| 25 | .content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:2;padding:8%} |
| 26 | h1{font-size:clamp(36px,7vw,80px);font-weight:900;color:#dbeafe;letter-spacing:.04em;font-family:"SFMono-Regular",Consolas,monospace} |
| 27 | .desc{margin-top:3%;font-size:clamp(11px,1.5vw,17px);color:rgba(219,234,254,.7);max-width:65%;line-height:1.6} |
| 28 | .palette{display:flex;gap:clamp(6px,1vw,12px);margin-top:5%} |
| 29 | .palette i{display:block;width:clamp(18px,2.8vw,32px);height:clamp(18px,2.8vw,32px);border-radius:0;background:var(--c);border:1.5px solid rgba(219,234,254,.3)} |
| 30 | .label{margin-top:4%;font-size:clamp(8px,1vw,13px);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#60a5fa;font-family:"SFMono-Regular",Consolas,monospace} |
| 31 | @media(max-aspect-ratio:16/9){.slide{width:min(100vw,calc(100vh*16/9));height:auto}} |
| 32 | @media(min-aspect-ratio:16/9){.slide{height:min(100vh,calc(100vw*9/16));width:auto}} |
| 33 | </style> |
| 34 | </head> |
| 35 | <body> |
| 36 | <div class="slide" aria-label="蓝图 style preview"> |
| 37 | <div class="grid-bg"></div> |
| 38 | <div class="major-grid"></div> |
| 39 | <div class="drawing rect1"></div> |
| 40 | <div class="drawing rect2"></div> |
| 41 | <div class="drawing rect3"></div> |
| 42 | <div class="drawing circle-draw"></div> |
| 43 | <div class="drawing dim-h"><span class="dim-label">1200 px</span></div> |
| 44 | <div class="content"> |
| 45 | <h1>蓝图</h1> |
| 46 | <p class="desc">深蓝底上浅蓝线条织就网格，建筑师的梦想画布</p> |
| 47 | <div class="palette"> |
| 48 | <i style="--c:#dbeafe"></i> |
| 49 | <i style="--c:#93c5fd"></i> |
| 50 | <i style="--c:#60a5fa"></i> |
| 51 | <i style="--c:#3b82f6"></i> |
| 52 | <i style="--c:#1e3a5f"></i> |
| 53 | </div> |
| 54 | <div class="label">blueprint</div> |
| 55 | </div> |
| 56 | </div> |
| 57 | </body> |
| 58 | </html> |
| 59 |