html-anything/next/src/lib/templates/skills/mockup-device-3d/example.html at main · chenmofei/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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Device 3D Showcase · HTML-in-Canvas</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;800&family=Inter:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />
<style>
  body {
    font-family:'Inter','Noto Sans SC',system-ui,sans-serif;
    background: radial-gradient(ellipse at 50% 40%, #1a1a22 0%, #08080c 70%);
    color:#f5f5f7;
    min-height:100vh;
    margin:0;
  }
  .stage { perspective: 1800px; }
  .iphone {
    width:280px; height:580px;
    border-radius:46px;
    background:linear-gradient(140deg,#3a3a40 0%,#a8a8ad 35%,#1f1f24 60%,#5a5a60 100%);
    padding:7px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 60px 80px -20px rgba(0,0,0,0.7);
    transform: rotateY(-14deg) rotateX(4deg) translateZ(40px);
    transform-style: preserve-3d;
  }
  .iphone-screen {
    width:100%; height:100%; border-radius:40px;
    background:#0a0a0e;
    overflow:hidden; position:relative;
    color:#f5f5f7;
  }
  .notch { position:absolute; top:6px; left:50%; transform:translateX(-50%); width:108px; height:28px; background:#000; border-radius:18px; z-index:5; }
  .lens {
    position:absolute; pointer-events:none;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%, transparent 60%);
    mix-blend-mode: screen;
  }
  .mbp {
    width:520px;
    transform: rotateY(10deg) rotateX(-2deg) translateZ(-20px);
    transform-style: preserve-3d;
  }
  .mbp-screen {
    width:100%; height:320px;
    border-radius:14px 14px 4px 4px;
    background:linear-gradient(135deg,#222229 0%,#0a0a0e 100%);
    border: 12px solid #1a1a1f;
    border-bottom: 16px solid #1a1a1f;
    box-shadow: 0 30px 60px -10px rgba(0,0,0,0.7);
    overflow:hidden;
    position:relative;
    color:#f5f5f7;
  }
  .mbp-base {
    width:560px;
    height:14px;
    margin:-2px auto 0;
    background:linear-gradient(180deg,#3a3a40 0%,#1a1a1f 80%);
    border-radius:0 0 14px 14px;
    box-shadow: 0 30px 40px -20px rgba(0,0,0,0.8);
  }
  .mbp-notch {
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:90px; height:8px; background:#000; border-radius:0 0 8px 8px; z-index:5;
  }
  .ground {
    position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:1100px; height:140px;
    background: radial-gradient(ellipse at center top, rgba(0,0,0,0.6) 0%, transparent 70%);
  }
  .chip { font-size:10px; letter-spacing:0.16em; text-transform:uppercase; }
</style>
</head>
<body class="flex flex-col items-center justify-center p-14 min-h-screen relative overflow-hidden">

  <!-- caption -->
  <header class="absolute top-10 left-12 right-12 flex items-baseline justify-between chip opacity-60">
    <span>HTML ANYTHING — CODENAME ATLAS — v0.4</span>
    <span>2026 SPRING</span>
    <span>HTML-IN-CANVAS</span>
  </header>

  <!-- devices -->
  <div class="stage relative flex items-end gap-20" style="z-index:2">

    <!-- iPhone -->
    <div class="iphone relative">
      <div class="iphone-screen">
        <div class="notch"></div>
        <!-- status bar -->
        <div class="flex items-center justify-between px-7 pt-3 text-[10px] font-semibold relative" style="z-index:6">
          <span>9:41</span>
          <span class="flex items-center gap-1">▮▮▮▮ 5G</span>
        </div>
        <!-- header -->
        <div class="px-6 pt-10">
          <div class="chip opacity-60">新建任务</div>
          <h2 class="text-[22px] font-bold mt-1 leading-tight">杂志风网页<br/>PPT</h2>
        </div>
        <!-- template tile -->
        <div class="mx-6 mt-5 rounded-xl p-3 flex items-center gap-2.5" style="background:linear-gradient(135deg,#1a1a22,#222229);border:1px solid rgba(255,255,255,0.06)">
          <span class="text-xl">📰</span>
          <div class="flex-1">
            <div class="text-[12px] font-semibold">杂志风网页 PPT</div>
            <div class="text-[10px] opacity-60">16:9 横向翻页 · 9 帧</div>
          </div>
          <span class="text-[10px] opacity-50">✓</span>
        </div>
        <!-- input -->
        <div class="mx-6 mt-3 rounded-xl p-3" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);min-height:140px">
          <div class="text-[12px] opacity-90">// 公司 2026 Q1 路线图</div>
          <div class="text-[11px] opacity-60 mt-1">- 推出 200 个新模板</div>
          <div class="text-[11px] opacity-60">- 接入 28 个本地 agent</div>
          <div class="text-[11px] opacity-60">- 周活 12K → 80K</div>
        </div>
        <!-- CTA -->
        <div class="mx-6 mt-3 rounded-full py-3 text-center text-[13px] font-semibold" style="background:linear-gradient(135deg,#ff7849,#d97757);color:#08080c">⌘ + Enter 转换</div>
        <!-- tab bar -->
        <div class="absolute bottom-0 left-0 right-0 flex items-center justify-around py-3 backdrop-blur" style="background:rgba(10,10,14,0.85);border-top:1px solid rgba(255,255,255,0.06)">
          <span class="text-[10px] flex flex-col items-center gap-0.5" style="color:#ff7849">■<span>任务</span></span>
          <span class="text-[10px] flex flex-col items-center gap-0.5 opacity-60">▤<span>模板</span></span>
          <span class="text-[10px] flex flex-col items-center gap-0.5 opacity-60">◌<span>设置</span></span>
        </div>
      </div>
      <!-- lens flares -->
      <div class="lens" style="top:-30px;left:-20px;width:160px;height:200px;transform:rotate(-20deg)"></div>
      <div class="lens" style="bottom:50px;right:-30px;width:120px;height:160px"></div>
    </div>

    <!-- MacBook -->
    <div class="mbp relative">
      <div class="mbp-screen">
        <div class="mbp-notch"></div>
        <!-- top bar -->
        <div class="flex items-center gap-1.5 px-3 py-1.5" style="background:#161620;border-bottom:1px solid rgba(255,255,255,0.06)">
          <span class="w-2 h-2 rounded-full bg-red-500"></span>
          <span class="w-2 h-2 rounded-full bg-amber-400"></span>
          <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
          <span class="ml-3 chip opacity-50">localhost:3456 — HTML Anything</span>
        </div>
        <!-- 3-pane layout mini -->
        <div class="grid grid-cols-[1fr_1.4fr_1.4fr] gap-2 p-2 h-[260px]">
          <!-- sidebar -->
          <div class="rounded-md p-2 text-[10px] opacity-80" style="background:#1a1a25;border:1px solid rgba(255,255,255,0.04)">
            <div class="opacity-50 mb-1.5">任务 / 11</div>
            <div class="space-y-1">
              <div class="rounded px-1.5 py-1 truncate" style="background:rgba(255,120,73,0.18);color:#ff7849">● 杂志风网页 PPT</div>
              <div class="rounded px-1.5 py-1 truncate opacity-60">小红书图文卡</div>
              <div class="rounded px-1.5 py-1 truncate opacity-60">Hyperframes 视频</div>
              <div class="rounded px-1.5 py-1 truncate opacity-60">Keynote PPT · 产品介绍</div>
            </div>
          </div>
          <!-- editor -->
          <div class="rounded-md p-2 text-[10px] opacity-90" style="background:#10101a;border:1px solid rgba(255,255,255,0.04);font-family:'JetBrains Mono',monospace">
            <div class="opacity-50">// 输入</div>
            <div class="mt-1"># Open Design — 2026</div>
            <div class="opacity-70">## Q1-Q4 关键指标</div>
            <div class="opacity-70">- 模板: 75 → 200</div>
            <div class="opacity-70">- WAU: 12K → 80K</div>
            <div class="opacity-70">- Agents: 17 → 28</div>
            <div class="opacity-70">- Stars: 4.2K → 25K</div>
            <div class="mt-2 opacity-50">▍</div>
          </div>
          <!-- preview -->
          <div class="rounded-md overflow-hidden relative" style="background:#002FA7">
            <div class="absolute inset-0 p-3 text-white">
              <div class="chip opacity-80">№01 / 22</div>
              <div class="mt-2 font-black text-[16px] leading-tight">Designing<br/>intelligence on<br/>warm paper.</div>
              <div class="absolute bottom-2 left-3 right-3 flex justify-between chip opacity-70">
                <span>OPEN-DESIGN</span><span>BERLIN</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mbp-base"></div>
      <!-- lens flares -->
      <div class="lens" style="top:-40px;right:60px;width:200px;height:140px;transform:rotate(10deg)"></div>
    </div>

  </div>

  <!-- ground reflection -->
  <div class="ground"></div>

  <!-- bottom slug -->
  <footer class="absolute bottom-10 left-12 right-12 flex items-baseline justify-between chip opacity-50">
    <span>HTML-ANYTHING.DEV</span>
    <span>GLTF · LIVE-HTML SCREENS · TURNTABLE</span>
    <span>STAGE — 1920 × 1080</span>
  </footer>
</body>
</html>