html-anything/src/lib/templates/skills/frame-macos-notification/example.html at main · nexu-io/html-anything · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!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>