assets/hero.html
5.6 KB| 1 | html |
| 2 | <html lang="zh-CN"><head><meta charset="utf-8"><title>gongwen-dna hero</title><style> |
| 3 | :root{ |
| 4 | --ink:#221f1f; --ink-soft:#4f4948; --ink-faint:#867e7b; |
| 5 | --paper-deep:#dbd6d3; --rule:rgba(44,38,38,.16); |
| 6 | --red:#e2000f; --red-deep:#c8000d; --red-soft:rgba(226,0,15,.52); |
| 7 | --serif:"Songti SC","STSong","Noto Serif SC","SimSun",serif; |
| 8 | --sans:"PingFang SC","Noto Sans SC","Microsoft YaHei",Arial,sans-serif; |
| 9 | --mono:"SFMono-Regular","Menlo","Consolas",monospace; |
| 10 | } |
| 11 | *{box-sizing:border-box;margin:0;padding:0} |
| 12 | html,body{min-height:100%} |
| 13 | body{display:grid;justify-content:center;align-content:center;padding:40px; |
| 14 | color:var(--ink);font-family:var(--sans);background:#eceae8; |
| 15 | -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} |
| 16 | |
| 17 | .scene{position:relative;width:1200px;height:560px;overflow:hidden; |
| 18 | background-color:var(--paper-deep)} |
| 19 | .rain{position:absolute;inset:0;z-index:5;width:100%;height:100%; |
| 20 | pointer-events:none;mix-blend-mode:multiply;filter:saturate(.26);opacity:.48} |
| 21 | .mist{position:absolute;inset:0;z-index:4;pointer-events:none; |
| 22 | background: |
| 23 | radial-gradient(760px 300px at 52% 0%,rgba(255,252,244,.23),transparent 70%), |
| 24 | radial-gradient(760px 420px at 44% 100%,rgba(116,94,60,.10),transparent 64%)} |
| 25 | |
| 26 | .article{position:relative;z-index:2;width:100%;height:100%; |
| 27 | padding:104px 64px 52px;overflow:hidden; |
| 28 | background-color:rgba(253,252,251,.90); |
| 29 | background-image: |
| 30 | url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)' opacity='0.18'/%3E%3C/svg%3E"), |
| 31 | linear-gradient(168deg,rgba(255,255,254,.88) 0%,rgba(244,241,239,.86) 52%,rgba(227,222,219,.86) 100%); |
| 32 | display:flex;flex-direction:column} |
| 33 | .article::before{content:"";position:absolute;inset:26px; |
| 34 | border:1px solid rgba(42,42,40,.10);pointer-events:none} |
| 35 | .corner{position:absolute;z-index:3;width:14px;height:14px; |
| 36 | border:1px solid rgba(42,42,40,.24);pointer-events:none} |
| 37 | .corner.tl{top:26px;left:26px;border-right:0;border-bottom:0} |
| 38 | .corner.tr{top:26px;right:26px;border-left:0;border-bottom:0} |
| 39 | .corner.bl{bottom:26px;left:26px;border-right:0;border-top:0} |
| 40 | .corner.br{bottom:26px;right:26px;border-left:0;border-top:0} |
| 41 | |
| 42 | .left{position:relative;z-index:3;display:flex;flex-direction:column; |
| 43 | justify-content:center} |
| 44 | .meta{position:absolute;top:50px;left:64px;right:150px; |
| 45 | display:flex;justify-content:space-between;gap:18px; |
| 46 | padding-bottom:12px;border-bottom:2px solid var(--red); |
| 47 | color:var(--ink-faint);font-family:var(--mono);font-size:11px; |
| 48 | letter-spacing:.22em} |
| 49 | .kicker{margin-bottom:16px;color:var(--red);font-size:12px; |
| 50 | font-weight:300;letter-spacing:.30em} |
| 51 | h1{max-width:760px} |
| 52 | h1 .ctx{display:block;white-space:nowrap;font-size:30px;line-height:1.35; |
| 53 | font-weight:300;letter-spacing:.04em;color:var(--ink-soft)} |
| 54 | h1 .product{display:block;white-space:nowrap;margin-top:14px; |
| 55 | font-family:var(--serif);font-size:72px;line-height:1.1;font-weight:500; |
| 56 | letter-spacing:.025em;color:var(--red-deep)} |
| 57 | .rule{width:54px;height:1px;margin:22px 0 0;background:var(--ink-soft);opacity:.42} |
| 58 | .lead{max-width:660px;margin-top:26px;color:var(--ink-soft); |
| 59 | font-family:var(--serif);font-size:22px;line-height:1.72;font-weight:300} |
| 60 | |
| 61 | .foot{display:flex;align-items:flex-start;gap:56px;margin-top:52px} |
| 62 | .stats{display:grid;grid-template-columns:repeat(3,minmax(0,140px));gap:22px} |
| 63 | .stat{border-top:1px solid var(--rule);padding-top:14px} |
| 64 | .stat b{display:block;font-family:var(--serif);font-size:34px; |
| 65 | font-weight:300;color:var(--red)} |
| 66 | .stat span{display:block;margin-top:5px;font-size:14px;color:var(--ink-soft)} |
| 67 | |
| 68 | .made{border-top:1px solid var(--rule);padding-top:14px;padding-left:56px; |
| 69 | border-left:1px solid var(--rule);margin-left:4px} |
| 70 | .stamp{position:absolute;top:44px;right:64px;z-index:3; |
| 71 | display:flex;width:56px;height:56px;align-items:center; |
| 72 | justify-content:center;border:1px solid var(--red);color:var(--red); |
| 73 | font-family:var(--serif);font-size:14px;line-height:1.25;letter-spacing:.14em} |
| 74 | .made .label{color:var(--ink-faint);font-family:var(--mono);font-size:10px; |
| 75 | letter-spacing:.26em} |
| 76 | .made .row{display:flex;align-items:center;gap:14px;margin-top:9px} |
| 77 | .made img{display:block;height:26px;width:auto} |
| 78 | .made .url{color:var(--ink-soft);font-size:13px;letter-spacing:.04em} |
| 79 | </style></head><body> |
| 80 | <main class="scene"><canvas class="rain" aria-hidden="true"></canvas><div class="mist"></div> |
| 81 | <article class="article"> |
| 82 | <span class="corner tl"></span><span class="corner tr"></span> |
| 83 | <span class="corner bl"></span><span class="corner br"></span> |
| 84 | |
| 85 | <div class="meta"><span>GONGWEN DNA · AGENT SKILL</span><span>103 万字 · 全量统计</span></div> |
| 86 | |
| 87 | <div class="left"> |
| 88 | <div class="kicker">语料实测</div> |
| 89 | <h1><span class="ctx">基于 103 万字语料统计的</span><span class="product">公文写作 skill</span></h1> |
| 90 | <div class="rule"></div> |
| 91 | <p class="lead">把公文的“像不像”变成可测量、可验收的数值。</p> |
| 92 | <div class="foot"> |
| 93 | <div class="stats"> |
| 94 | <div class="stat"><b>306</b><span>篇全量统计</span></div> |
| 95 | <div class="stat"><b>7</b><span>类文体参数</span></div> |
| 96 | <div class="stat"><b>12</b><span>项可验收指标</span></div> |
| 97 | </div> |
| 98 | <div class="made"> |
| 99 | <div class="label">MADE ON</div> |
| 100 | <div class="row"><img src=".moxt-logo.png" alt="Moxt"><span class="url">moxt.ai</span></div> |
| 101 | </div> |
| 102 | </div> |
| 103 | </div> |
| 104 | |
| 105 | <div class="stamp">公<br>文</div> |
| 106 | </article></main> |
| 107 | <script src="rain.js"></script> |
| 108 | </body></html> |
文件内容是平台检查时读出的文本,只供查看。平台不会运行包里的任何脚本或程序。

