209 lines
6.7 KiB
HTML
209 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="theme-color" content="#1a1a2e">
|
||
<title>深空战机 - 移动端原型入口</title>
|
||
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
-webkit-user-select: none;
|
||
-webkit-touch-callout: none;
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
body {
|
||
font-family: 'PingFang SC', 'Helvetica Neue', 'Arial', sans-serif;
|
||
background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 30%, #16213e 70%, #0f3460 100%);
|
||
color: #ffffff;
|
||
min-height: 100vh;
|
||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.container {
|
||
max-width: 400px;
|
||
width: 90%;
|
||
padding: 20px;
|
||
}
|
||
|
||
.title {
|
||
text-align: center;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #40e0d0;
|
||
margin-bottom: 10px;
|
||
text-shadow: 0 0 20px rgba(64, 224, 208, 0.5);
|
||
}
|
||
|
||
.subtitle {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.prototype-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.prototype-item {
|
||
background: rgba(22, 33, 62, 0.8);
|
||
border: 1px solid rgba(64, 224, 208, 0.3);
|
||
border-radius: 15px;
|
||
padding: 20px;
|
||
backdrop-filter: blur(10px);
|
||
transition: all 0.3s ease;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
display: block;
|
||
}
|
||
|
||
.prototype-item:active {
|
||
transform: scale(0.98);
|
||
background: rgba(64, 224, 208, 0.1);
|
||
border-color: #40e0d0;
|
||
}
|
||
|
||
.prototype-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #40e0d0;
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.prototype-desc {
|
||
font-size: 14px;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.prototype-features {
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.status-indicator {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: rgba(40, 167, 69, 0.9);
|
||
color: white;
|
||
padding: 8px 16px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.footer {
|
||
margin-top: 40px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="status-indicator">
|
||
✅ 4个原型已完成
|
||
</div>
|
||
|
||
<div class="container">
|
||
<h1 class="title">深空战机</h1>
|
||
<p class="subtitle">移动端高可用性原型演示</p>
|
||
|
||
<div class="prototype-list">
|
||
<a href="mobile_main_menu_1.html" class="prototype-item">
|
||
<div class="prototype-title">
|
||
🏠 主菜单界面
|
||
</div>
|
||
<div class="prototype-desc">
|
||
游戏主界面，包含完整的导航菜单和设置选项
|
||
</div>
|
||
<div class="prototype-features">
|
||
PWA支持 • 星空动画 • 音效控制 • 安全区适配
|
||
</div>
|
||
</a>
|
||
|
||
<a href="mobile_plane_placement_1.html" class="prototype-item">
|
||
<div class="prototype-title">
|
||
✈️ 飞机放置界面
|
||
</div>
|
||
<div class="prototype-desc">
|
||
十字形战机布置界面，支持拖拽放置和旋转操作
|
||
</div>
|
||
<div class="prototype-features">
|
||
触屏拖拽 • 碰撞检测 • 自动布置 • 实时验证
|
||
</div>
|
||
</a>
|
||
|
||
<a href="mobile_battle_1.html" class="prototype-item">
|
||
<div class="prototype-title">
|
||
⚔️ 战斗界面
|
||
</div>
|
||
<div class="prototype-desc">
|
||
双棋盘战斗系统，包含计时器和AI对手
|
||
</div>
|
||
<div class="prototype-features">
|
||
回合制战斗 • 攻击动画 • 战斗统计 • 触觉反馈
|
||
</div>
|
||
</a>
|
||
|
||
<a href="mobile_leaderboard_1.html" class="prototype-item">
|
||
<div class="prototype-title">
|
||
🏆 排行榜界面
|
||
</div>
|
||
<div class="prototype-desc">
|
||
多维度排行榜展示，包含个人统计信息
|
||
</div>
|
||
<div class="prototype-features">
|
||
三级榜单 • 数据动画 • 下拉刷新 • 个人卡片
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>移动端原型 v1.0 | 支持PWA离线访问</p>
|
||
<p>建议在移动设备上体验完整功能</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 防止双指缩放
|
||
document.addEventListener('touchmove', function(event) {
|
||
if (event.scale !== 1) {
|
||
event.preventDefault();
|
||
}
|
||
}, { passive: false });
|
||
|
||
document.addEventListener('gesturestart', function(event) {
|
||
event.preventDefault();
|
||
});
|
||
|
||
// 简单的点击反馈
|
||
document.querySelectorAll('.prototype-item').forEach(item => {
|
||
item.addEventListener('touchstart', function() {
|
||
if ('vibrate' in navigator) {
|
||
navigator.vibrate(10);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |