zhuo/Doomsday_Survival_Manual
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成任务16：编写 04_长期发展/环境保护.md

Browse Source
This commit is contained in:
root
2026-05-23 16:51:48 +00:00
parent 33ea0114ea
commit c8cd92ba7c
734 changed files with 188060 additions and 604 deletions
Download Patch File Download Diff File Expand all files Collapse all files

541
out_app_html/profile/index.html Normal file
View File

@@ -0,0 +1,541 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>末日求生 - 个人信息</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
background: linear-gradient(135deg, #2d1b0e 0%, #4a2c18 50%, #6b390f 100%);
min-height: 100vh;
color: #fff;
}
/* 顶部导航栏 */
.top-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: rgba(255, 86, 0, 0.3);
backdrop-filter: blur(10px);
border-bottom: 2px solid #ff8c3a;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
z-index: 1000;
}
.nav-logo {
font-size: 20px;
font-weight: bold;
color: #ffcc99;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
/* 内容区域 */
.content-container {
padding-top: 70px;
padding-bottom: 30px;
}
/* 用户信息卡片 */
.profile-card {
background: rgba(255, 86, 0, 0.1);
border: 3px solid #ff8c3a;
border-radius: 20px;
margin: 20px;
padding: 30px;
text-align: center;
box-shadow:
0 4px 20px rgba(255, 94, 0, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.avatar-container {
width: 100px;
height: 100px;
margin: 0 auto 20px;
position: relative;
}
.avatar {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ff8c3a 0%, #ff5e00 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
color: #fff;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
box-shadow:
0 4px 15px rgba(255, 94, 0, 0.8),
inset 0 2px 5px rgba(255, 255, 255, 0.3);
}
.avatar::before {
content: '🧔';
animation: breathe 2s ease-in-out infinite;
}
@keyframes breathe {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.avatar-level {
position: absolute;
bottom: -5px;
right: -5px;
background: #ff3a00;
color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
box-shadow: 0 3px 10px rgba(255, 50, 0, 0.6);
}
.profile-name {
font-size: 24px;
font-weight: bold;
color: #ffcc99;
margin-bottom: 10px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}
.profile-id {
font-size: 14px;
color: #ff8c3a;
margin-bottom: 20px;
}
/* 统计信息 */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 20px;
}
.stat-item {
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 107, 0, 0.3);
border-radius: 10px;
padding: 15px;
}
.stat-label {
font-size: 12px;
color: #ff8c3a;
margin-bottom: 5px;
}
.stat-value {
font-size: 18px;
font-weight: bold;
color: #ffcc99;
}
/* 成就卡片 */
.achievement-card {
background: rgba(255, 86, 0, 0.1);
border: 3px solid #ff8c3a;
border-radius: 15px;
margin: 20px;
padding: 20px;
box-shadow:
0 4px 20px rgba(255, 94, 0, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.achievement-title {
font-size: 18px;
font-weight: bold;
color: #ffcc99;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}
.achievement-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.achievement-item {
background: rgba(0, 0, 0, 0.3);
border: 2px solid rgba(255, 107, 0, 0.3);
border-radius: 10px;
padding: 12px;
display: flex;
align-items: center;
gap: 10px;
}
.achievement-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #ff8c3a 0%, #ff5e00 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 3px 10px rgba(255, 94, 0, 0.6);
}
.achievement-info {
flex: 1;
}
.achievement-name {
font-size: 14px;
font-weight: bold;
color: #ffcc99;
margin-bottom: 5px;
}
.achievement-desc {
font-size: 11px;
color: #ff8c3a;
}
/* 设置卡片 */
.settings-card {
background: rgba(255, 86, 0, 0.1);
border: 3px solid #ff8c3a;
border-radius: 15px;
margin: 20px;
overflow: hidden;
box-shadow:
0 4px 20px rgba(255, 94, 0, 0.4),
inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.settings-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(255, 107, 0, 0.2);
cursor: pointer;
transition: all 0.3s ease;
}
.settings-item:hover {
background: rgba(255, 107, 0, 0.1);
}
.settings-label {
color: #ffcc99;
display: flex;
align-items: center;
gap: 10px;
}
.settings-icon {
width: 30px;
height: 30px;
background: rgba(255, 107, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.settings-value {
color: #ff8c3a;
font-size: 14px;
}
.settings-switch {
width: 50px;
height: 26px;
background: rgba(255, 107, 0, 0.3);
border-radius: 13px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}
.settings-switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
background: #ff8c3a;
border-radius: 50%;
transition: all 0.3s ease;
}
.settings-switch.active {
background: rgba(255, 107, 0, 0.6);
}
.settings-switch.active::after {
left: 27px;
}
/* 底部标签页 */
.bottom-tabs {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 70px;
background: rgba(255, 86, 0, 0.3);
backdrop-filter: blur(10px);
border-top: 2px solid #ff8c3a;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
}
.tab-item {
padding: 15px 20px;
background: rgba(255, 86, 0, 0.3);
border: 2px solid #ff8c3a;
border-radius: 25px;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-item.active {
background: linear-gradient(180deg, #ff8c3a 0%, #ff5e00 100%);
box-shadow:
0 4px 15px rgba(255, 94, 0, 0.6),
inset 0 2px 5px rgba(255, 255, 255, 0.3);
}
.tab-item:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px rgba(255, 94, 0, 0.8),
inset 0 2px 5px rgba(255, 255, 255, 0.4);
}
/* 按钮 */
.action-button {
display: block;
width: calc(100% - 40px);
margin: 20px;
padding: 15px;
background: linear-gradient(180deg, #ff8c3a 0%, #ff5e00 100%);
border: none;
border-radius: 25px;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
box-shadow:
0 4px 15px rgba(255, 94, 0, 0.6),
inset 0 2px 5px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
}
.action-button:hover {
transform: translateY(-2px);
box-shadow:
0 6px 20px rgba(255, 94, 0, 0.8),
inset 0 2px 5px rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<nav class="top-nav">
<div class="nav-logo">👤末日求生 - 个人信息</div>
</nav>
<!-- 内容区域 -->
<div class="content-container">
<!-- 用户信息卡片 -->
<div class="profile-card">
<div class="avatar-container">
<div class="avatar"></div>
<div class="avatar-level">15</div>
</div>
<div class="profile-name">生存者：铁血战士</div>
<div class="profile-id">ID: SURV-2026-007</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-label">生存天数</div>
<div class="stat-value">127</div>
</div>
<div class="stat-item">
<div class="stat-label">技能掌握</div>
<div class="stat-value">18</div>
</div>
<div class="stat-item">
<div class="stat-label">救援成功</div>
<div class="stat-value">7</div>
</div>
</div>
</div>
<!-- 成就卡片 -->
<div class="achievement-card">
<div class="achievement-title">🏆 已获得成就</div>
<div class="achievement-grid">
<div class="achievement-item">
<div class="achievement-icon">🔥</div>
<div class="achievement-info">
<div class="achievement-name">火焰使者</div>
<div class="achievement-desc">成功点燃100次火源</div>
</div>
</div>
<div class="achievement-item">
<div class="achievement-icon">🏠</div>
<div class="achievement-info">
<div class="achievement-name">家园建筑师</div>
<div class="achievement-desc">建造3座安全庇护所</div>
</div>
</div>
<div class="achievement-item">
<div class="achievement-icon">💧</div>
<div class="achievement-info">
<div class="achievement-name">水源专家</div>
<div class="achievement-desc">净化500升水源</div>
</div>
</div>
<div class="achievement-item">
<div class="achievement-icon">⚕️</div>
<div class="achievement-info">
<div class="achievement-name">急救先锋</div>
<div class="achievement-desc">成功救治10次伤病</div>
</div>
</div>
</div>
</div>
<!-- 设置卡片 -->
<div class="settings-card">
<div class="settings-item">
<div class="settings-label">
<div class="settings-icon">🌙</div>
夜间模式
</div>
<div class="settings-switch active"></div>
</div>
<div class="settings-item">
<div class="settings-label">
<div class="settings-icon">🔔</div>
过期提醒
</div>
<div class="settings-switch active"></div>
</div>
<div class="settings-item">
<div class="settings-label">
<div class="settings-icon">📍</div>
位置共享
</div>
<div class="settings-switch"></div>
</div>
<div class="settings-item">
<div class="settings-label">
<div class="settings-icon">📱</div>
新消息通知
</div>
<div class="settings-switch active"></div>
</div>
<div class="settings-item">
<div class="settings-label">
<div class="settings-icon">🗑️</div>
清除缓存
</div>
<div class="settings-value">15.2 MB</div>
</div>
<div class="settings-item">
<div class="settings-label">
<div class="settings-icon">📄</div>
版本信息
</div>
<div class="settings-value">v3.6.0</div>
</div>
</div>
<!-- 操作按钮 -->
<button class="action-button" id="logoutBtn">退出登录</button>
</div>
<!-- 底部标签页 -->
<div class="bottom-tabs">
<div class="tab-item">首页</div>
<div class="tab-item">背包</div>
<div class="tab-item active">我的</div>
</div>
<script>
$(document).ready(function() {
// 标签页切换效果
$('.tab-item').on('click', function() {
$('.tab-item').removeClass('active');
$(this).addClass('active');
const tabName = $(this).text();
if (tabName === '首页') {
window.location.href = '../home/index.html';
} else if (tabName === '背包') {
window.location.href = '../bag/index.html';
} else if (tabName === '我的') {
// 已经在当前页面
}
});
// 开关切换效果
$('.settings-switch').on('click', function() {
$(this).toggleClass('active');
const settingLabel = $(this).closest('.settings-item').find('.settings-label').text();
console.log('设置项更新：', settingLabel, '状态：', $(this).hasClass('active'));
});
// 退出登录按钮
$('#logoutBtn').on('click', function() {
if (confirm('确定要退出登录吗？')) {
alert('正在退出登录...');
window.location.href = '../login/index.html';
}
});
// 清除缓存
$('.settings-item').eq(4).on('click', function() {
if (confirm('确定要清除缓存吗？')) {
$(this).find('.settings-value').text('0 MB');
alert('缓存已清除！');
}
});
// 版本信息点击
$('.settings-item').eq(5).on('click', function() {
alert('末日求生 App\n版本：v3.6.0\n发布日期：2026-03-25\n生存者协议：本应用仅供模拟生存训练使用');
});
});
</script>
</body>
</html>