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.
61 lines
3.3 KiB
HTML
61 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>macOS Notification · 转换完成</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
|
|
<style>
|
|
body {
|
|
font-family: 'Inter','Noto Sans SC','PingFang SC',system-ui,sans-serif;
|
|
background:
|
|
linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%),
|
|
radial-gradient(circle at 80% 20%, rgba(255,200,150,0.3) 0%, transparent 50%);
|
|
background-blend-mode: screen;
|
|
min-height: 100vh;
|
|
}
|
|
.frost {
|
|
background: rgba(28,28,30,0.78);
|
|
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
backdrop-filter: blur(40px) saturate(180%);
|
|
border: 1px solid rgba(255,255,255,0.08);
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
|
|
}
|
|
@keyframes slideIn { from { transform: translateX(120%); opacity:0 } to { transform: translateX(0); opacity:1 } }
|
|
.notif-1 { animation: slideIn .4s ease-out; }
|
|
.notif-2 { transform: translateY(-12px) scale(0.96); opacity: 0.7; }
|
|
.notif-3 { transform: translateY(-24px) scale(0.92); opacity: 0.4; }
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col items-end justify-start gap-3 p-12 text-white">
|
|
<!-- top stacked notifs -->
|
|
<div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-3">
|
|
<div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#1DB954,#0d7a35)">🎵</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Spotify</span><span class="text-[11px] opacity-60">2m ago</span></div>
|
|
<div class="text-[12.5px] truncate opacity-80">Now Playing — Lo-Fi Essentials</div>
|
|
</div>
|
|
</div>
|
|
<div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-2">
|
|
<div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl" style="background:linear-gradient(135deg,#0f0f12,#2a2a35)">⌘</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between"><span class="text-[13px] font-semibold">Cursor</span><span class="text-[11px] opacity-60">1m ago</span></div>
|
|
<div class="text-[12.5px] truncate opacity-80">同步完成 · 8 个文件已上传</div>
|
|
</div>
|
|
</div>
|
|
<!-- main, in-focus notif -->
|
|
<div class="frost rounded-2xl w-[420px] p-3 flex gap-3 items-center notif-1">
|
|
<div class="w-11 h-11 rounded-[10px] flex items-center justify-center text-xl shrink-0" style="background:linear-gradient(135deg,#ff7849,#d97757)">H</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-[13px] font-semibold">HTML Anything</span>
|
|
<span class="text-[11px] opacity-60">now</span>
|
|
</div>
|
|
<div class="text-[14px] font-semibold leading-tight mt-0.5">转换完成 · 杂志风网页 PPT</div>
|
|
<div class="text-[12.5px] opacity-80 leading-snug mt-0.5">31.2 KB · 12 帧 · 已在右侧预览面板渲染。点击复制为公众号 / 推特格式。</div>
|
|
</div>
|
|
<button class="text-[11px] font-semibold px-2.5 py-1 rounded-full ml-1 shrink-0" style="background:rgba(255,255,255,0.12)">Open</button>
|
|
</div>
|
|
</body>
|
|
</html>
|