mirror of
https://github.com/nexu-io/open-design.git
synced 2026-09-20 06:15:06 +08:00
pftom
d3d95121f3
- Updated the `sortByVisualAppeal` function to prioritize featured ranks, ensuring that curated plugins are displayed prominently. - Added tests to verify the new sorting logic, ensuring that plugins with numeric featured ranks are sorted correctly ahead of others. - Introduced new example templates for a magazine article layout, a Twitter share card, and a Xiaohongshu card, expanding the available options for users. - Enhanced the overall plugin preview experience by integrating these new templates, providing users with more visually appealing and functional examples. This update significantly improves the plugin sorting mechanism and enriches the template offerings, enhancing user engagement and experience.
102 lines
5.1 KiB
HTML
102 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>NYT Chart · AI Agent MAU 2018–2026</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet" />
|
||
<style>
|
||
body { font-family:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif; background:#f7f5ee; color:#1a1a1a; margin:0; }
|
||
.serif { font-family:'Source Serif Pro',Georgia,serif; }
|
||
.mono { font-family:'IBM Plex Mono',ui-monospace,monospace; }
|
||
.nyt-red { color:#a91d1d; }
|
||
.nyt-red-fill { fill:#a91d1d; }
|
||
.kicker { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; }
|
||
@keyframes draw { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
|
||
.line { stroke-dasharray:1000; animation: draw 1.4s ease-out forwards; animation-delay: .4s; opacity:0; animation-fill-mode: forwards; }
|
||
.line { animation: draw 1.4s ease-out .4s forwards, fadeIn .1s linear .4s forwards; }
|
||
@keyframes fadeIn { to { opacity:1 } }
|
||
</style>
|
||
</head>
|
||
<body class="min-h-screen flex items-center justify-center p-12">
|
||
<article class="w-[1280px] max-w-full">
|
||
<header class="flex items-baseline justify-between">
|
||
<div class="kicker nyt-red font-semibold">GLOBAL · MONTHLY ACTIVE USERS · 2018–2026</div>
|
||
<div class="kicker opacity-60 mono">FRAME 04 · CHART</div>
|
||
</header>
|
||
|
||
<h1 class="serif mt-3 leading-[1.05] font-medium" style="font-size:clamp(36px,4.4vw,68px)">
|
||
AI agent 月活在 <span class="nyt-red italic">2024 之后</span> 进入两段抛物线 ——<br/>
|
||
第一段由云端 Claude / GPT 推动, 第二段由本地 CLI agent 普及。
|
||
</h1>
|
||
|
||
<!-- chart -->
|
||
<svg viewBox="0 0 1100 460" class="mt-8 w-full">
|
||
<!-- y axis hairlines -->
|
||
<g stroke="#1a1a1a" stroke-width="0.5" opacity="0.25">
|
||
<line x1="60" y1="60" x2="1040" y2="60"/>
|
||
<line x1="60" y1="180" x2="1040" y2="180"/>
|
||
<line x1="60" y1="300" x2="1040" y2="300"/>
|
||
<line x1="60" y1="420" x2="1040" y2="420"/>
|
||
</g>
|
||
<!-- y labels -->
|
||
<g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
|
||
<text x="20" y="64">640M</text>
|
||
<text x="20" y="184">420M</text>
|
||
<text x="20" y="304">210M</text>
|
||
<text x="20" y="424">0</text>
|
||
</g>
|
||
<!-- area band -->
|
||
<path d="M 60 410 L 180 405 L 300 395 L 420 380 L 540 355 L 660 320 L 780 270 L 900 195 L 1020 90 L 1020 420 L 60 420 Z" fill="#a91d1d" opacity="0.06"/>
|
||
<!-- main line -->
|
||
<polyline class="line" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"
|
||
points="60,410 180,405 300,395 420,380 540,355 660,320 780,270 900,195 1020,90" />
|
||
<!-- accent inflection -->
|
||
<polyline fill="none" stroke="#a91d1d" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round" stroke-dasharray="6 5"
|
||
points="780,270 900,195 1020,90" />
|
||
<!-- data points -->
|
||
<g>
|
||
<circle cx="60" cy="410" r="4" fill="#1a1a1a"/>
|
||
<circle cx="180" cy="405" r="4" fill="#1a1a1a"/>
|
||
<circle cx="300" cy="395" r="4" fill="#1a1a1a"/>
|
||
<circle cx="420" cy="380" r="4" fill="#1a1a1a"/>
|
||
<circle cx="540" cy="355" r="4" fill="#1a1a1a"/>
|
||
<circle cx="660" cy="320" r="4" fill="#1a1a1a"/>
|
||
<circle cx="780" cy="270" r="6" class="nyt-red-fill"/>
|
||
<circle cx="900" cy="195" r="6" class="nyt-red-fill"/>
|
||
<circle cx="1020" cy="90" r="6" class="nyt-red-fill"/>
|
||
</g>
|
||
<!-- annotations -->
|
||
<g class="mono" font-size="11" fill="#1a1a1a">
|
||
<text x="784" y="250">2024 · 310M</text>
|
||
<text x="894" y="175" class="nyt-red-fill">2025 · 468M</text>
|
||
<text x="1010" y="70" class="nyt-red-fill" text-anchor="end">2026 · 640M</text>
|
||
</g>
|
||
<!-- inflection callout -->
|
||
<g class="serif" font-style="italic" fill="#a91d1d">
|
||
<text x="800" y="380" font-size="14">⤴ Inflection point</text>
|
||
<text x="800" y="398" font-size="14">local CLI agents普及</text>
|
||
</g>
|
||
<!-- x labels -->
|
||
<g class="mono" font-size="11" fill="#1a1a1a" opacity="0.6">
|
||
<text x="60" y="445" text-anchor="middle">'18</text>
|
||
<text x="180" y="445" text-anchor="middle">'19</text>
|
||
<text x="300" y="445" text-anchor="middle">'20</text>
|
||
<text x="420" y="445" text-anchor="middle">'21</text>
|
||
<text x="540" y="445" text-anchor="middle">'22</text>
|
||
<text x="660" y="445" text-anchor="middle">'23</text>
|
||
<text x="780" y="445" text-anchor="middle">'24</text>
|
||
<text x="900" y="445" text-anchor="middle">'25</text>
|
||
<text x="1020" y="445" text-anchor="middle">'26</text>
|
||
</g>
|
||
</svg>
|
||
|
||
<footer class="mt-3 flex items-baseline justify-between mono text-[10.5px] opacity-60">
|
||
<span>Source · Synthesized industry estimates, 2026-05</span>
|
||
<span>Chart by HTML-Anything</span>
|
||
<span>NYT-STYLE · FRAME-DATA-CHART-NYT</span>
|
||
</footer>
|
||
</article>
|
||
</body>
|
||
</html>
|