9aff7c499c
- 第 22 页右栏换成 iPhone 18 Pro 主屏幕效果图（黑色机身、Black 壁纸、4 行图标，第四行为股市和标博士），旁边是 Apple 连续曲率圆角裁切的两个尺寸图标；邮件签名移到左栏 - 新增 vi/mockup/：iphone-home.html 排版，fetch.sh 获取系统图标和壁纸，build.sh 量机身、生成遮罩并按 3 倍截图 - Apple 素材（机身、壁纸、系统图标）版权归 Apple，放在 mockup/apple/ 不进 git；机身需本人同意 Apple Design Resources 许可后手动放入，使用限制见 mockup/README.md - 重新导出 VI 手册 PDF Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
86 lines
6.4 KiB
HTML
86 lines
6.4 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>iPhone 桌面模拟</title>
|
||
<!--
|
||
VI 手册「应用图标」一页用的 iPhone 桌面模拟。按 iPhone 18 Pro 屏幕 402×874pt 排版（1 CSS px = 1pt），
|
||
用 Apple 的 Product Bezels 机身、iPhone 18 Pro 官方壁纸、iOS 系统应用图标（都在 apple/，由 fetch.sh 获取，不进 git）。
|
||
机身和屏幕的位置尺寸由 build.sh 从机身 PNG 量出，写在 apple/geometry.css。
|
||
导出：运行 build.sh，按 3 倍截图成 apple/iphone-home.png，手册引用这张图。
|
||
-->
|
||
<link rel="stylesheet" href="apple/geometry.css">
|
||
<style>
|
||
:root{
|
||
/* Apple 风格连续曲率圆角（squircle）：iOS 图标遮罩的贝塞尔近似，r = 边长 × 22.37% */
|
||
--squircle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M34.20 0.00L65.80 0.00C75.65 0.00 80.57 0.00 85.87 1.68C91.66 3.78 96.22 8.34 98.32 14.13C100.00 19.43 100.00 24.35 100.00 34.20L100.00 65.80C100.00 75.65 100.00 80.57 98.32 85.87C96.22 91.66 91.66 96.22 85.87 98.32C80.57 100.00 75.65 100.00 65.80 100.00L34.20 100.00C24.35 100.00 19.43 100.00 14.13 98.32C8.34 96.22 3.78 91.66 1.68 85.87C0.00 80.57 0.00 75.65 0.00 65.80L0.00 34.20C0.00 24.35 0.00 19.43 1.68 14.13C3.78 8.34 8.34 3.78 14.13 1.68C19.43 0.00 24.35 0.00 34.20 0.00Z'/%3E%3C/svg%3E");
|
||
--icon:62px;
|
||
}
|
||
html,body{margin:0;background:transparent}
|
||
body{font-family:-apple-system,"SF Pro Text","PingFang SC",sans-serif;-webkit-font-smoothing:antialiased}
|
||
.device{position:relative;width:var(--dev-w);height:var(--dev-h)}
|
||
.screen{position:absolute;left:var(--scr-x);top:var(--scr-y);width:var(--scr-w);height:var(--scr-h);overflow:hidden;color:#fff;
|
||
background:url(apple/wallpaper-black.jpg) center/cover;
|
||
-webkit-mask:url(apple/screen-mask.png) 0 0/100% 100% no-repeat;mask:url(apple/screen-mask.png) 0 0/100% 100% no-repeat}
|
||
.bezel{position:absolute;left:0;top:0;width:var(--dev-w);height:var(--dev-h);pointer-events:none}
|
||
|
||
.status{position:absolute;left:0;right:0;top:0;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 32px 0 48px}
|
||
.status .time{font:600 17px/1 -apple-system,"SF Pro Text",sans-serif;letter-spacing:-.2px}
|
||
.status .right{display:flex;align-items:center;gap:6px}
|
||
|
||
/* 只放 4 行：前三行系统应用，第四行只有股市和标博士，下半屏留空 */
|
||
.grid{position:absolute;left:26px;right:26px;top:72px;display:grid;grid-template-columns:repeat(4,var(--icon));justify-content:space-between;row-gap:28px}
|
||
.app{display:flex;flex-direction:column;align-items:center;gap:6px;width:var(--icon)}
|
||
.app img,.dock img{width:var(--icon);height:var(--icon);display:block;-webkit-mask:var(--squircle) center/100% 100% no-repeat;mask:var(--squircle) center/100% 100% no-repeat}
|
||
.app span{font:500 12px/1.1 -apple-system,"PingFang SC",sans-serif;white-space:nowrap}
|
||
|
||
.search{position:absolute;left:50%;bottom:124px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:7px 13px;border-radius:16px;
|
||
background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 13px/1 -apple-system,"PingFang SC",sans-serif}
|
||
.dock{position:absolute;left:12px;right:12px;bottom:12px;height:92px;border-radius:36px;display:grid;grid-template-columns:repeat(4,var(--icon));justify-content:space-between;align-items:center;padding:0 17px;
|
||
background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
|
||
.homebar{position:absolute;left:50%;bottom:8px;width:140px;height:5px;margin-left:-70px;border-radius:3px;background:rgba(255,255,255,.85)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="device">
|
||
<div class="screen">
|
||
<div class="status">
|
||
<span class="time">9:41</span>
|
||
<span class="right">
|
||
<svg width="19" height="12" viewBox="0 0 19 12"><rect x="0" y="7.5" width="3.2" height="4.5" rx="1" fill="#fff"/><rect x="5.1" y="5" width="3.2" height="7" rx="1" fill="#fff"/><rect x="10.2" y="2.5" width="3.2" height="9.5" rx="1" fill="#fff"/><rect x="15.3" y="0" width="3.2" height="12" rx="1" fill="#fff"/></svg>
|
||
<svg width="17" height="12" viewBox="0 0 17 12"><path d="M8.5 2.4c2.5 0 4.8 1 6.5 2.6l1.3-1.3A11 11 0 0 0 .7 3.7L2 5a9.3 9.3 0 0 1 6.5-2.6Zm0 3.7c1.5 0 2.9.6 4 1.6l1.3-1.3a7.5 7.5 0 0 0-10.6 0l1.3 1.3a5.6 5.6 0 0 1 4-1.6Zm0 3.6c.6 0 1.1.2 1.5.5L8.5 11.7 7 10.2c.4-.3.9-.5 1.5-.5Z" fill="#fff"/></svg>
|
||
<svg width="28" height="13" viewBox="0 0 28 13"><rect x=".5" y=".5" width="24" height="12" rx="3.8" fill="none" stroke="#fff" stroke-opacity=".4"/><rect x="2" y="2" width="21" height="9" rx="2.5" fill="#fff"/><path d="M26 4.5v4a2.2 2.2 0 0 0 0-4Z" fill="#fff" fill-opacity=".4"/></svg>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<div class="app"><img src="apple/icons/facetime.png"><span>FaceTime通话</span></div>
|
||
<div class="app"><img src="apple/icons/calendar.png"><span>日历</span></div>
|
||
<div class="app"><img src="apple/icons/weather.png"><span>天气</span></div>
|
||
<div class="app"><img src="apple/icons/clock.png"><span>时钟</span></div>
|
||
|
||
<div class="app"><img src="apple/icons/maps.png"><span>地图</span></div>
|
||
<div class="app"><img src="apple/icons/notes.png"><span>备忘录</span></div>
|
||
<div class="app"><img src="apple/icons/reminders.png"><span>提醒事项</span></div>
|
||
<div class="app"><img src="apple/icons/files.png"><span>文件</span></div>
|
||
|
||
<div class="app"><img src="apple/icons/books.png"><span>图书</span></div>
|
||
<div class="app"><img src="apple/icons/podcasts.png"><span>播客</span></div>
|
||
<div class="app"><img src="apple/icons/health.png"><span>健康</span></div>
|
||
<div class="app"><img src="apple/icons/wallet.png"><span>钱包</span></div>
|
||
|
||
<div class="app"><img src="apple/icons/stocks.png"><span>股市</span></div>
|
||
<div class="app"><img src="../../logo/png/icon-512.png"><span>标博士</span></div>
|
||
</div>
|
||
|
||
<div class="search"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="7"/><path d="m21 21-5.5-5.5"/></svg>搜索</div>
|
||
<div class="dock">
|
||
<img src="apple/icons/messages.png"><img src="apple/icons/safari.png"><img src="apple/icons/mail.png"><img src="apple/icons/music.png">
|
||
</div>
|
||
<div class="homebar"></div>
|
||
</div>
|
||
<img class="bezel" src="apple/bezel.png" alt="">
|
||
</div>
|
||
</body>
|
||
</html>
|