162 lines
4.6 KiB
HTML
162 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Airhub - iPhone 16 预览</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
min-height: 100vh;
|
||
background: #000000;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 40px 20px;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
.preview-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 24px;
|
||
}
|
||
|
||
.device-label {
|
||
color: white;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* iPhone 16 Frame */
|
||
.iphone-frame {
|
||
position: relative;
|
||
width: 423px;
|
||
/* 393 + 30 for frame padding */
|
||
height: 892px;
|
||
/* 852 + 40 for frame padding */
|
||
background: #1a1a1a;
|
||
border-radius: 55px;
|
||
padding: 15px;
|
||
box-shadow:
|
||
0 0 0 2px #333,
|
||
0 0 0 4px #1a1a1a,
|
||
0 25px 50px rgba(0, 0, 0, 0.4),
|
||
inset 0 0 0 2px rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.iphone-frame::before {
|
||
/* Dynamic Island */
|
||
content: '';
|
||
position: absolute;
|
||
top: 18px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 126px;
|
||
height: 37px;
|
||
background: #000;
|
||
border-radius: 20px;
|
||
z-index: 100;
|
||
}
|
||
|
||
.iphone-screen {
|
||
width: 393px;
|
||
height: 852px;
|
||
border-radius: 42px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
position: relative;
|
||
}
|
||
|
||
.iphone-screen iframe {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
}
|
||
|
||
/* Device selector */
|
||
.device-selector {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.device-btn {
|
||
padding: 10px 20px;
|
||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: white;
|
||
border-radius: 25px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.device-btn:hover,
|
||
.device-btn.active {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
border-color: white;
|
||
}
|
||
|
||
.instructions {
|
||
color: rgba(255, 255, 255, 0.8);
|
||
font-size: 14px;
|
||
text-align: center;
|
||
max-width: 400px;
|
||
line-height: 1.6;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="preview-container">
|
||
<div class="device-label">📱 iPhone 16 (393 × 852)</div>
|
||
|
||
<div class="device-selector">
|
||
<button class="device-btn active" onclick="setDevice(393, 852, 'iPhone 16')">iPhone 16</button>
|
||
<button class="device-btn" onclick="setDevice(402, 874, 'iPhone 16 Pro')">iPhone 16 Pro</button>
|
||
<button class="device-btn" onclick="setDevice(440, 956, 'iPhone 16 Pro Max')">Pro Max</button>
|
||
</div>
|
||
|
||
<div class="iphone-frame" id="phone-frame">
|
||
<div class="iphone-screen" id="phone-screen">
|
||
<iframe src="index.html" id="app-frame"></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="instructions">
|
||
💡 这是 iPhone 真实尺寸预览。<br>
|
||
修改代码后刷新此页面即可看到更新效果。
|
||
</p>
|
||
</div>
|
||
|
||
<script>
|
||
function setDevice(width, height, name) {
|
||
const screen = document.getElementById('phone-screen');
|
||
const frame = document.getElementById('phone-frame');
|
||
const label = document.querySelector('.device-label');
|
||
|
||
screen.style.width = width + 'px';
|
||
screen.style.height = height + 'px';
|
||
frame.style.width = (width + 30) + 'px';
|
||
frame.style.height = (height + 40) + 'px';
|
||
label.textContent = '📱 ' + name + ' (' + width + ' × ' + height + ')';
|
||
|
||
// Update active button
|
||
document.querySelectorAll('.device-btn').forEach(btn => btn.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
|
||
// Reload iframe
|
||
document.getElementById('app-frame').src = 'index.html';
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |