Initial commit
This commit is contained in:
史悦
209
mobile_index.html
Normal file
209
mobile_index.html
Normal file
@@ -0,0 +1,209 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user