Hugging Face's logo

Spaces:
zdwalter
/
w
Running

App Files Community
w / index.html
zdwalter's picture
zdwalter
Add 3 files
6dd2ba0 verified
raw
history blame contribute delete
63.1 kB
 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>战马与剑刃 - 中世纪冒险</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap');
body {
font-family: 'Cinzel', serif;
background-color: #1a1a1a;
color: #e0e0e0;
overflow-x: hidden;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InRleHR1cmUiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj4KICAgICAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiMxYzFjMWMiLz4KICAgICAgPHBhdGggZD0iTTAgMCBMNDAwIDQwMCIgc3Ryb2tlPSIjMzAzMDMwIiBzdHJva2Utd2lkdGg9IjEiLz4KICAgICAgPHBhdGggZD0iTTQwMCAwIEwwIDQwMCIgc3Ryb2tlPSIjMzAzMDMwIiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCN0ZXh0dXJlKSIgb3BhY2l0eT0iMC4zIi8+Cjwvc3ZnPg==');
background-size: cover;
}
.medieval-font {
font-family: 'MedievalSharp', cursive;
}
.parchment-bg {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InRleHR1cmUiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj4KICAgICAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNlZWQ5YjMiLz4KICAgICAgPHBhdGggZD0iTTAgMCBMNDAwIDQwMCIgc3Ryb2tlPSIjZGRjYzk5IiBzdHJva2Utd2lkdGg9IjEiLz4KICAgICAgPHBhdGggZD0iTTQwMCAwIEwwIDQwMCIgc3Ryb2tlPSIjZGRjYzk5IiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCN0ZXh0dXJlKSIgb3BhY2l0eT0iMC43Ii8+Cjwvc3ZnPg==');
background-size: cover;
border: 8px solid transparent;
border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9ImJvcmRlciIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPgogICAgICA8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idHJhbnNwYXJlbnQiIHN0cm9rZT0iIzc1NTI0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8L3BhdHRlcm4+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYm9yZGVyKSIvPgo8L3N2Zz4=') 10% round;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
position: relative;
}
.parchment-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(238, 217, 179, 0.1) 0%, rgba(238, 217, 179, 0.3) 50%, rgba(238, 217, 179, 0.1) 100%);
pointer-events: none;
}
.metal-bg {
background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 50%, #3a3a3a 100%);
border: 2px solid #555;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
position: relative;
overflow: hidden;
}
.metal-bg::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
transform: rotate(30deg);
animation: metalShine 5s infinite linear;
}
@keyframes metalShine {
0% { transform: translateX(-100%) rotate(30deg); }
100% { transform: translateX(100%) rotate(30deg); }
}
.health-bar {
background: linear-gradient(to right, #8B0000, #FF0000);
height: 20px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(255, 0, 0, 0.7);
position: relative;
overflow: hidden;
}
.health-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 100%);
mix-blend-mode: overlay;
}
.stamina-bar {
background: linear-gradient(to right, #006400, #00FF00);
height: 20px;
border-radius: 10px;
box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
position: relative;
overflow: hidden;
}
.stamina-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 100%);
mix-blend-mode: overlay;
}
.map-container {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MDAgNTAwIj48cmVjdCB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzFjM2M0ZSIvPjxwYXRoIGQ9Ik0xNTAgMTUwIEMxNTAgMjAwLDIwMCAyMDAsMjAwIDE1MCBDMjAwIDEwMCwxNTAgMTAwLDE1MCAxNTAgWiIgZmlsbD0iIzQyODk0MiIvPjxwYXRoIGQ9Ik0zMDAgMzAwIEMzMDAgMzUwLDM1MCAzNTAsMzUwIDMwMCBDMzUwIDI1MCwzMDAgMjUwLDMwMCAzMDAgWiIgZmlsbD0iI2QyYjQ0ZSIvPjxwYXRoIGQ9Ik0xMDAgMzAwIEMxMDAgMzUwLDE1MCAzNTAsMTUwIDMwMCBDMTUwIDI1MCwxMDAgMjUwLDEwMCAzMDAgWiIgZmlsbD0iIzg4NTQzZSIvPjxwYXRoIGQ9Ik0yNTAgMTAwIEMyNTAgMTUwLDMwMCAxNTAsMzAwIDEwMCBDMzAwIDUwLDI1MCA1MCwyNTAgMTAwIFoiIGZpbGw9IiM4ODU0M2UiLz48L3N2Zz4=');
background-size: cover;
border: 4px solid #75524e;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
position: relative;
}
.map-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(28, 60, 78, 0.1) 0%, rgba(28, 60, 78, 0.5) 50%, rgba(28, 60, 78, 0.1) 100%);
pointer-events: none;
}
.map-marker {
width: 12px;
height: 12px;
background-color: #ff0000;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
position: relative;
z-index: 2;
}
.map-marker::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.5);
animation: pulse 2s infinite;
}
.character-portrait {
border: 4px solid #75524e;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
background-color: #2a2a2a;
position: relative;
overflow: hidden;
}
.character-portrait::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
pointer-events: none;
}
.item-slot {
border: 2px solid #75524e;
background-color: #2a2a2a;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.item-slot::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05) 100%);
pointer-events: none;
}
.item-slot:hover {
transform: scale(1.05);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}
.combat-mode {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.9); }
100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.5); }
}
.faction-banner {
height: 60px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
position: relative;
}
.faction-banner::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
pointer-events: none;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 200px;
background-color: rgba(26, 26, 26, 0.9);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -100px;
opacity: 0;
transition: opacity 0.3s;
border: 1px solid #75524e;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
font-family: 'Cinzel', serif;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.modal {
display: none;
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
background-color: #1a1a1a;
margin: 5% auto;
padding: 20px;
border: 4px solid #75524e;
width: 80%;
max-width: 800px;
position: relative;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InRleHR1cmUiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIj4KICAgICAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIGZpbGw9IiNlZWQ5YjMiLz4KICAgICAgPHBhdGggZD0iTTAgMCBMNDAwIDQwMCIgc3Ryb2tlPSIjZGRjYzk5IiBzdHJva2Utd2lkdGg9IjEiLz4KICAgICAgPHBhdGggZD0iTTQwMCAwIEwwIDQwMCIgc3Ryb2tlPSIjZGRjYzk5IiBzdHJva2Utd2lkdGg9IjEiLz4KICAgIDwvcGF0dGVybj4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCN0ZXh0dXJlKSIgb3BhY2l0eT0iMC43Ii8+Cjwvc3ZnPg==');
background-size: cover;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.close:hover {
color: #fff;
transform: rotate(90deg);
}
.skill-progress {
height: 10px;
background-color: #333;
border-radius: 5px;
margin-top: 5px;
position: relative;
overflow: hidden;
}
.skill-progress::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
pointer-events: none;
}
.skill-progress-fill {
height: 100%;
border-radius: 5px;
background: linear-gradient(to right, #8B4513, #CD853F);
position: relative;
overflow: hidden;
}
.skill-progress-fill::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 100%);
mix-blend-mode: overlay;
}
.action-bar {
background: linear-gradient(to bottom, rgba(26,26,26,0.9) 0%, rgba(40,40,40,0.9) 100%);
box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
border-top: 2px solid #75524e;
}
.combat-scene {
position: relative;
width: 100%;
height: 300px;
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
border: 4px solid #75524e;
overflow: hidden;
}
.combat-scene::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+CiAgICAgIDxyZWN0IHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiBvcGFjaXR5PSIwLjIiLz4KPC9zdmc+') repeat;
opacity: 0.3;
pointer-events: none;
}
.combat-character {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
z-index: 2;
}
.combat-character.player {
background: linear-gradient(135deg, #006400, #00FF00);
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
}
.combat-character.enemy {
background: linear-gradient(135deg, #8B0000, #FF0000);
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
}
.combat-character.ally {
background: linear-gradient(135deg, #00008B, #0000FF);
border: 2px solid #fff;
box-shadow: 0 0 10px rgba(0, 0, 255, 0.7);
}
.damage-effect {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 0, 0, 0.3);
z-index: 10;
opacity: 0;
pointer-events: none;
}
.heal-effect {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 255, 0, 0.3);
z-index: 10;
opacity: 0;
pointer-events: none;
}
.quest-active {
border-left: 4px solid #FFD700;
background: linear-gradient(90deg, rgba(255,215,0,0.1) 0%, rgba(255,215,0,0) 100%);
}
.quest-available {
border-left: 4px solid #00FF00;
background: linear-gradient(90deg, rgba(0,255,0,0.1) 0%, rgba(0,255,0,0) 100%);
}
.quest-completed {
border-left: 4px solid #00BFFF;
background: linear-gradient(90deg, rgba(0,191,255,0.1) 0%, rgba(0,191,255,0) 100%);
}
.notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px;
background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
border: 2px solid #75524e;
border-radius: 5px;
box-shadow: 0 0 15px rgba(0,0,0,0.7);
transform: translateX(200%);
transition: transform 0.5s ease;
z-index: 1000;
}
.notification.show {
transform: translateX(0);
}
.notification.success {
border-left: 5px solid #00FF00;
}
.notification.error {
border-left: 5px solid #FF0000;
}
.notification.warning {
border-left: 5px solid #FFD700;
}
.notification.info {
border-left: 5px solid #00BFFF;
}
.fade-in {
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
20%, 80% { transform: translate3d(2px, 0, 0); }
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
40%, 60% { transform: translate3d(4px, 0, 0); }
}
</style>
</head>
<body class="bg-gray-900 text-gray-200">
<!-- 通知区域 -->
<div id="notification" class="notification hidden">
<div class="flex items-center">
<i id="notification-icon" class="fas fa-info-circle mr-3 text-xl"></i>
<div>
<h4 id="notification-title" class="font-bold"></h4>
<p id="notification-message" class="text-sm"></p>
</div>
</div>
</div>
<!-- 主游戏容器 -->
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- 游戏标题 -->
<div class="text-center mb-8">
<h1 class="text-5xl font-bold medieval-font text-yellow-600 mb-2">战马与剑刃</h1>
<p class="text-xl italic">征服卡拉迪亚大陆</p>
<div class="mt-4 flex justify-center space-x-4">
<button id="saveBtn" class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-save mr-2"></i> 保存游戏
</button>
<button id="loadBtn" class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-folder-open mr-2"></i> 加载游戏
</button>
<button id="settingsBtn" class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-cog mr-2"></i> 设置
</button>
</div>
</div>
<!-- 主游戏区域 -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- 左侧边栏 - 角色信息 -->
<div class="lg:col-span-1 parchment-bg p-6 rounded-lg">
<div class="text-center mb-6">
<div class="character-portrait w-32 h-32 mx-auto mb-4 bg-cover bg-center" style="background-image: url('https://via.placeholder.com/200x200')"></div>
<h2 class="text-2xl font-bold mb-1">艾瑞克·铁盾</h2>
<p class="text-sm italic mb-2">北方战士</p>
<div class="flex justify-center space-x-4">
<div class="text-center">
<p class="text-sm">等级</p>
<p class="text-xl font-bold">12</p>
</div>
<div class="text-center">
<p class="text-sm">声望</p>
<p class="text-xl font-bold">450</p>
</div>
<div class="text-center">
<p class="text-sm">金币</p>
<p class="text-xl font-bold">12,450</p>
</div>
</div>
</div>
<!-- 属性栏 -->
<div class="mb-6">
<h3 class="text-lg font-bold mb-2 border-b border-gray-600 pb-1">属性</h3>
<div class="space-y-2">
<div>
<div class="flex justify-between">
<span>力量</span>
<span>24</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 80%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span>敏捷</span>
<span>18</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 60%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span>智力</span>
<span>14</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 47%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span>魅力</span>
<span>16</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 53%"></div>
</div>
</div>
</div>
</div>
<!-- 状态栏 -->
<div class="mb-6">
<h3 class="text-lg font-bold mb-2 border-b border-gray-600 pb-1">状态</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between mb-1">
<span>生命值</span>
<span>120/150</span>
</div>
<div class="health-bar" style="width: 80%"></div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>体力</span>
<span>90/120</span>
</div>
<div class="stamina-bar" style="width: 75%"></div>
</div>
<div>
<div class="flex justify-between mb-1">
<span>经验值</span>
<span>1,250/2,500</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 50%"></div>
</div>
</div>
</div>
</div>
<!-- 派系信息 -->
<div>
<h3 class="text-lg font-bold mb-2 border-b border-gray-600 pb-1">派系</h3>
<div class="faction-banner mb-2" style="background-image: url('https://via.placeholder.com/200x60')"></div>
<p class="text-center">斯特吉亚王国</p>
<p class="text-sm text-center">男爵</p>
<div class="mt-2 flex justify-between">
<span>与国王关系</span>
<span>45/100</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 45%"></div>
</div>
</div>
</div>
<!-- 中间区域 - 游戏内容 -->
<div class="lg:col-span-2">
<!-- 地图区域 -->
<div class="parchment-bg p-4 rounded-lg mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">卡拉迪亚大陆</h2>
<div class="flex space-x-2">
<button id="zoomInBtn" class="metal-bg px-3 py-1 rounded hover:bg-gray-700 transition">
<i class="fas fa-search-plus"></i>
</button>
<button id="zoomOutBtn" class="metal-bg px-3 py-1 rounded hover:bg-gray-700 transition">
<i class="fas fa-search-minus"></i>
</button>
</div>
</div>
<div class="map-container w-full h-64 relative overflow-hidden" id="gameMap">
<!-- 地图标记 -->
<div class="map-marker absolute tooltip" style="top: 30%; left: 40%;" data-location="巴尔加德">
<span class="tooltiptext">巴尔加德<br>斯特吉亚王国<br>繁荣度: 高</span>
</div>
<div class="map-marker absolute bg-blue-500 tooltip" style="top: 60%; left: 70%;" data-location="奥斯特港">
<span class="tooltiptext">奥斯特港<br>瓦兰迪亚王国<br>繁荣度: 非常高</span>
</div>
<div class="map-marker absolute bg-green-500 tooltip" style="top: 45%; left: 25%;" data-location="山贼营地">
<span class="tooltiptext">山贼营地<br>危险区域<br>任务目标</span>
</div>
<div class="map-marker absolute bg-yellow-500 tooltip" style="top: 20%; left: 60%;" data-location="巴旦尼亚">
<span class="tooltiptext">巴旦尼亚<br>巴旦尼亚部落<br>繁荣度: 中</span>
</div>
</div>
<div class="mt-4 flex justify-between">
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-horse mr-2"></i> 快速旅行
</button>
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-scroll mr-2"></i> 查看任务
</button>
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-map mr-2"></i> 王国地图
</button>
</div>
</div>
<!-- 任务日志 -->
<div class="parchment-bg p-4 rounded-lg mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">任务日志</h2>
<button id="newQuestBtn" class="metal-bg px-3 py-1 rounded hover:bg-gray-700 transition">
<i class="fas fa-plus mr-1"></i> 新任务
</button>
</div>
<div class="space-y-3 max-h-96 overflow-y-auto pr-2">
<div class="quest-active p-3 rounded cursor-pointer hover:bg-yellow-800 hover:bg-opacity-30 transition">
<div class="flex justify-between items-center">
<h3 class="font-bold text-lg">剿灭山贼营地</h3>
<span class="text-xs bg-yellow-600 px-2 py-1 rounded">进行中</span>
</div>
<p class="text-sm mt-1">斯特吉亚的商队正受到山贼的威胁，领主希望你清除这些威胁。</p>
<div class="flex justify-between items-center mt-2">
<p class="text-xs italic text-yellow-500">剩余时间: 2天</p>
<div class="flex space-x-2">
<button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600 transition">追踪</button>
<button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600 transition">放弃</button>
</div>
</div>
</div>
<div class="quest-available p-3 rounded cursor-pointer hover:bg-green-800 hover:bg-opacity-30 transition">
<div class="flex justify-between items-center">
<h3 class="font-bold text-lg">护送商队</h3>
<span class="text-xs bg-green-600 px-2 py-1 rounded">可接取</span>
</div>
<p class="text-sm mt-1">护送商队安全到达奥斯特港，报酬丰厚。</p>
<div class="flex justify-between items-center mt-2">
<p class="text-xs italic text-green-500">奖励: 1,200金币</p>
<button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600 transition">接受</button>
</div>
</div>
<div class="quest-available p-3 rounded cursor-pointer hover:bg-green-800 hover:bg-opacity-30 transition">
<div class="flex justify-between items-center">
<h3 class="font-bold text-lg">参加锦标赛</h3>
<span class="text-xs bg-green-600 px-2 py-1 rounded">可接取</span>
</div>
<p class="text-sm mt-1">巴尔加德的领主正在举办锦标赛，胜利者将获得丰厚奖励。</p>
<div class="flex justify-between items-center mt-2">
<p class="text-xs italic text-green-500">奖励: 声望+25, 金币+800</p>
<button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600 transition">接受</button>
</div>
</div>
<div class="p-3 rounded cursor-pointer opacity-70">
<div class="flex justify-between items-center">
<h3 class="font-bold text-lg">收集兽皮</h3>
<span class="text-xs bg-blue-600 px-2 py-1 rounded">已完成</span>
</div>
<p class="text-sm mt-1">为巴尔加德的商人收集20张优质兽皮。</p>
<div class="flex justify-between items-center mt-2">
<p class="text-xs italic text-blue-500">已完成 3天前</p>
<button class="text-xs bg-gray-700 px-2 py-1 rounded hover:bg-gray-600 transition">详情</button>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧边栏 - 装备和技能 -->
<div class="lg:col-span-1">
<!-- 装备栏 -->
<div class="parchment-bg p-4 rounded-lg mb-6">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">装备</h2>
<button id="inventoryBtn" class="metal-bg px-3 py-1 rounded hover:bg-gray-700 transition">
<i class="fas fa-archive mr-1"></i> 物品栏
</button>
</div>
<div class="grid grid-cols-3 gap-2">
<!-- 头部 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="helm">
<i class="fas fa-helmet-battle text-2xl mb-1"></i>
<p class="text-xs">诺德头盔</p>
<span class="tooltiptext">诺德头盔<br>护甲: 32<br>重量: 3.5<br>价值: 450金币</span>
</div>
<!-- 身体 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="armor">
<i class="fas fa-vest text-2xl mb-1"></i>
<p class="text-xs">链甲</p>
<span class="tooltiptext">链甲<br>护甲: 45<br>重量: 12.0<br>价值: 1,200金币</span>
</div>
<!-- 腿部 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="legs">
<i class="fas fa-boot text-2xl mb-1"></i>
<p class="text-xs">板甲护腿</p>
<span class="tooltiptext">板甲护腿<br>护甲: 28<br>重量: 7.5<br>价值: 800金币</span>
</div>
<!-- 主手 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="mainhand">
<i class="fas fa-sword text-2xl mb-1"></i>
<p class="text-xs">双手剑</p>
<span class="tooltiptext">双手剑<br>伤害: 98<br>速度: 0.85<br>价值: 1,500金币</span>
</div>
<!-- 副手 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="offhand">
<i class="fas fa-shield-alt text-2xl mb-1"></i>
<p class="text-xs">圆盾</p>
<span class="tooltiptext">圆盾<br>护甲: 40<br>重量: 4.0<br>价值: 600金币</span>
</div>
<!-- 远程 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="ranged">
<i class="fas fa-bow-arrow text-2xl mb-1"></i>
<p class="text-xs">长弓</p>
<span class="tooltiptext">长弓<br>伤害: 45<br>精度: 90<br>价值: 900金币</span>
</div>
<!-- 马匹 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="horse">
<i class="fas fa-horse text-2xl mb-1"></i>
<p class="text-xs">战马</p>
<span class="tooltiptext">战马<br>速度: 42<br>生命: 120<br>价值: 2,000金币</span>
</div>
<!-- 饰品1 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="accessory1">
<i class="fas fa-ring text-2xl mb-1"></i>
<p class="text-xs">银戒指</p>
<span class="tooltiptext">银戒指<br>魅力+2<br>价值: 350金币</span>
</div>
<!-- 饰品2 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="accessory2">
<i class="fas fa-gem text-2xl mb-1"></i>
<p class="text-xs">红宝石</p>
<span class="tooltiptext">红宝石<br>魅力+3<br>价值: 750金币</span>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="metal-bg py-2 rounded hover:bg-gray-700 transition flex items-center justify-center">
<i class="fas fa-store mr-2"></i> 商店
</button>
<button class="metal-bg py-2 rounded hover:bg-gray-700 transition flex items-center justify-center">
<i class="fas fa-hammer mr-2"></i> 锻造
</button>
</div>
</div>
<!-- 技能栏 -->
<div class="parchment-bg p-4 rounded-lg">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold">技能</h2>
<button id="allSkillsBtn" class="metal-bg px-3 py-1 rounded hover:bg-gray-700 transition">
<i class="fas fa-list mr-1"></i> 全部
</button>
</div>
<div class="space-y-3 max-h-64 overflow-y-auto pr-2">
<div>
<div class="flex justify-between">
<span class="flex items-center">
<i class="fas fa-sword mr-2 text-gray-400"></i> 单手武器
</span>
<span>75</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span class="flex items-center">
<i class="fas fa-swords mr-2 text-gray-400"></i> 双手武器
</span>
<span>120</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 80%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span class="flex items-center">
<i class="fas fa-bow-arrow mr-2 text-gray-400"></i> 弓箭
</span>
<span>65</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 65%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span class="flex items-center">
<i class="fas fa-horse mr-2 text-gray-400"></i> 骑术
</span>
<span>90</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 60%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span class="flex items-center">
<i class="fas fa-chess mr-2 text-gray-400"></i> 战术
</span>
<span>50</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span class="flex items-center">
<i class="fas fa-shield-alt mr-2 text-gray-400"></i> 盾牌
</span>
<span>85</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between">
<span class="flex items-center">
<i class="fas fa-running mr-2 text-gray-400"></i> 跑动
</span>
<span>70</span>
</div>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 70%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 底部行动栏 -->
<div class="action-bar fixed bottom-0 left-0 right-0 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex space-x-4">
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-home mr-2"></i> 营地
</button>
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-users mr-2"></i> 部队
</button>
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-chess-king mr-2"></i> 王国
</button>
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-book mr-2"></i> 日志
</button>
</div>
<button id="combatBtn" class="metal-bg px-6 py-3 rounded-full hover:bg-gray-700 transition flex items-center font-bold">
<i class="fas fa-swords mr-2"></i> 进入战斗
</button>
<div class="flex space-x-4">
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-calendar mr-2"></i> 时间
</button>
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition flex items-center">
<i class="fas fa-question mr-2"></i> 帮助
</button>
</div>
</div>
</div>
</div>
<!-- 战斗模式模态框 -->
<div id="combatModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2 class="text-3xl font-bold mb-6 text-center">战斗模式</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 玩家信息 -->
<div class="parchment-bg p-4 rounded-lg">
<h3 class="text-xl font-bold mb-4 border-b border-gray-600 pb-2">你的状态</h3>
<div class="flex items-center mb-4">
<div class="character-portrait w-16 h-16 mr-4 bg-cover bg-center" style="background-image: url('https://via.placeholder.com/200x200')"></div>
<div>
<p class="font-bold">艾瑞克·铁盾</p>
<div class="health-bar w-32 mt-1" style="width: 80%"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-2 mb-4">
<div class="item-slot p-2 text-center">
<i class="fas fa-sword text-xl mb-1"></i>
<p class="text-xs">双手剑</p>
</div>
<div class="item-slot p-2 text-center">
<i class="fas fa-shield-alt text-xl mb-1"></i>
<p class="text-xs">圆盾</p>
</div>
</div>
<div class="stamina-bar w-full mb-4" style="width: 75%"></div>
<div class="grid grid-cols-4 gap-2">
<button class="combat-action metal-bg p-2 rounded hover:bg-gray-700 transition" data-action="attack">
<i class="fas fa-sword"></i> 攻击
</button>
<button class="combat-action metal-bg p-2 rounded hover:bg-gray-700 transition" data-action="block">
<i class="fas fa-shield-alt"></i> 格挡
</button>
<button class="combat-action metal-bg p-2 rounded hover:bg-gray-700 transition" data-action="kick">
<i class="fas fa-boot"></i> 踢击
</button>
<button class="combat-action metal-bg p-2 rounded hover:bg-gray-700 transition" data-action="special">
<i class="fas fa-star"></i> 特殊
</button>
</div>
</div>
<!-- 战斗场景 -->
<div class="combat-scene rounded-lg flex flex-col items-center justify-center">
<div id="combatPlayer" class="combat-character player" style="top: 50%; left: 20%;">
<i class="fas fa-user text-white"></i>
</div>
<div id="combatEnemy1" class="combat-character enemy" style="top: 30%; left: 60%;">
<i class="fas fa-skull text-white"></i>
</div>
<div id="combatEnemy2" class="combat-character enemy" style="top: 50%; left: 70%;">
<i class="fas fa-sword text-white"></i>
</div>
<div id="combatEnemy3" class="combat-character enemy" style="top: 70%; left: 60%;">
<i class="fas fa-archery text-white"></i>
</div>
<div id="combatAlly1" class="combat-character ally" style="top: 40%; left: 30%;">
<i class="fas fa-user text-white"></i>
</div>
<div id="combatAlly2" class="combat-character ally" style="top: 60%; left: 30%;">
<i class="fas fa-user text-white"></i>
</div>
<div id="damageEffect" class="damage-effect"></div>
<div id="healEffect" class="heal-effect"></div>
</div>
<!-- 部队信息 -->
<div class="parchment-bg p-4 rounded-lg">
<h3 class="text-xl font-bold mb-4 border-b border-gray-600 pb-2">你的部队</h3>
<div class="space-y-3 max-h-48 overflow-y-auto">
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-500 rounded-full mr-2 flex items-center justify-center">
<i class="fas fa-user text-xs"></i>
</div>
<div class="flex-1">
<p>斯特吉亚战士 x5</p>
<div class="health-bar w-full" style="width: 80%"></div>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-500 rounded-full mr-2 flex items-center justify-center">
<i class="fas fa-user text-xs"></i>
</div>
<div class="flex-1">
<p>斯特吉亚弓箭手 x3</p>
<div class="health-bar w-full" style="width: 90%"></div>
</div>
</div>
<div class="flex items-center">
<div class="w-8 h-8 bg-blue-500 rounded-full mr-2 flex items-center justify-center">
<i class="fas fa-horse text-xs"></i>
</div>
<div class="flex-1">
<p>斯特吉亚骑兵 x2</p>
<div class="health-bar w-full" style="width: 70%"></div>
</div>
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-2">
<button class="combat-command metal-bg p-2 rounded hover:bg-gray-700 transition" data-command="charge">
<i class="fas fa-flag"></i> 冲锋
</button>
<button class="combat-command metal-bg p-2 rounded hover:bg-gray-700 transition" data-command="hold">
<i class="fas fa-shield-alt"></i> 坚守
</button>
<button class="combat-command metal-bg p-2 rounded hover:bg-gray-700 transition" data-command="follow">
<i class="fas fa-user-friends"></i> 跟随我
</button>
<button class="combat-command metal-bg p-2 rounded hover:bg-gray-700 transition" data-command="retreat">
<i class="fas fa-running"></i> 撤退
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 物品栏模态框 -->
<div id="inventoryModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2 class="text-3xl font-bold mb-6 text-center">物品栏</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
<!-- 装备栏 -->
<div class="parchment-bg p-4 rounded-lg">
<h3 class="text-xl font-bold mb-4 border-b border-gray-600 pb-2">装备</h3>
<div class="grid grid-cols-2 gap-2">
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="helm">
<i class="fas fa-helmet-battle text-2xl mb-1"></i>
<p class="text-xs">诺德头盔</p>
<span class="tooltiptext">诺德头盔<br>护甲: 32<br>重量: 3.5<br>价值: 450金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="armor">
<i class="fas fa-vest text-2xl mb-1"></i>
<p class="text-xs">链甲</p>
<span class="tooltiptext">链甲<br>护甲: 45<br>重量: 12.0<br>价值: 1,200金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="legs">
<i class="fas fa-boot text-2xl mb-1"></i>
<p class="text-xs">板甲护腿</p>
<span class="tooltiptext">板甲护腿<br>护甲: 28<br>重量: 7.5<br>价值: 800金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="mainhand">
<i class="fas fa-sword text-2xl mb-1"></i>
<p class="text-xs">双手剑</p>
<span class="tooltiptext">双手剑<br>伤害: 98<br>速度: 0.85<br>价值: 1,500金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="offhand">
<i class="fas fa-shield-alt text-2xl mb-1"></i>
<p class="text-xs">圆盾</p>
<span class="tooltiptext">圆盾<br>护甲: 40<br>重量: 4.0<br>价值: 600金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="ranged">
<i class="fas fa-bow-arrow text-2xl mb-1"></i>
<p class="text-xs">长弓</p>
<span class="tooltiptext">长弓<br>伤害: 45<br>精度: 90<br>价值: 900金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="horse">
<i class="fas fa-horse text-2xl mb-1"></i>
<p class="text-xs">战马</p>
<span class="tooltiptext">战马<br>速度: 42<br>生命: 120<br>价值: 2,000金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer" data-item="accessory1">
<i class="fas fa-ring text-2xl mb-1"></i>
<p class="text-xs">银戒指</p>
<span class="tooltiptext">银戒指<br>魅力+2<br>价值: 350金币</span>
</div>
</div>
</div>
<!-- 物品列表 -->
<div class="md:col-span-3 parchment-bg p-4 rounded-lg">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold">物品</h3>
<div class="flex space-x-2">
<button class="metal-bg px-3 py-1 rounded hover:bg-gray-700 transition">
<i class="fas fa-filter mr-1"></i> 筛选
</button>
<button class="metal-bg px-3 py-1 rounded hover:bg-gray-700 transition">
<i class="fas fa-sort mr-1"></i> 排序
</button>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 max-h-96 overflow-y-auto">
<!-- 武器 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-sword text-xl mb-1"></i>
<p class="text-xs">短剑</p>
<span class="tooltiptext">短剑<br>伤害: 45<br>速度: 1.2<br>价值: 250金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-axe text-xl mb-1"></i>
<p class="text-xs">战斧</p>
<span class="tooltiptext">战斧<br>伤害: 65<br>速度: 0.9<br>价值: 400金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-mace text-xl mb-1"></i>
<p class="text-xs">钉头锤</p>
<span class="tooltiptext">钉头锤<br>伤害: 55<br>速度: 1.0<br>价值: 350金币</span>
</div>
<!-- 防具 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-helmet-battle text-xl mb-1"></i>
<p class="text-xs">皮头盔</p>
<span class="tooltiptext">皮头盔<br>护甲: 15<br>重量: 1.5<br>价值: 120金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-vest text-xl mb-1"></i>
<p class="text-xs">皮甲</p>
<span class="tooltiptext">皮甲<br>护甲: 25<br>重量: 5.0<br>价值: 200金币</span>
</div>
<!-- 消耗品 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-wine-bottle text-xl mb-1"></i>
<p class="text-xs">治疗药水</p>
<span class="tooltiptext">治疗药水<br>恢复: 50生命<br>价值: 100金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-flask text-xl mb-1"></i>
<p class="text-xs">体力药水</p>
<span class="tooltiptext">体力药水<br>恢复: 50体力<br>价值: 80金币</span>
</div>
<!-- 材料 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-feather text-xl mb-1"></i>
<p class="text-xs">羽毛</p>
<span class="tooltiptext">羽毛<br>制作材料<br>价值: 5金币</span>
</div>
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-hide text-xl mb-1"></i>
<p class="text-xs">兽皮</p>
<span class="tooltiptext">兽皮<br>制作材料<br>价值: 15金币</span>
</div>
<!-- 任务物品 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-scroll text-xl mb-1"></i>
<p class="text-xs">古老卷轴</p>
<span class="tooltiptext">古老卷轴<br>任务物品<br>价值: 无</span>
</div>
<!-- 马匹 -->
<div class="item-slot p-2 text-center tooltip cursor-pointer">
<i class="fas fa-horse text-xl mb-1"></i>
<p class="text-xs">旅行马</p>
<span class="tooltiptext">旅行马<br>速度: 35<br>生命: 100<br>价值: 1,200金币</span>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<div>
<p class="text-sm">负重: 45/120</p>
<div class="skill-progress">
<div class="skill-progress-fill" style="width: 37.5%"></div>
</div>
</div>
<button class="metal-bg px-4 py-2 rounded hover:bg-gray-700 transition">
<i class="fas fa-coins mr-2"></i> 出售物品
</button>
</div>
</div>
</div>
</div>
</div>
<script>
// 通知系统
function showNotification(type, title, message) {
const notification = document.getElementById('notification');
const icon = document.getElementById('notification-icon');
const notificationTitle = document.getElementById('notification-title');
const notificationMessage = document.getElementById('notification-message');
// 设置通知内容
notificationTitle.textContent = title;
notificationMessage.textContent = message;
// 设置图标和样式
notification.className = 'notification fade-in';
notification.classList.add(type);
switch(type) {
case 'success':
icon.className = 'fas fa-check-circle mr-3 text-xl';
break;
case 'error':
icon.className = 'fas fa-times-circle mr-3 text-xl';
break;
case 'warning':
icon.className = 'fas fa-exclamation-triangle mr-3 text-xl';
break;
case 'info':
icon.className = 'fas fa-info-circle mr-3 text-xl';
break;
}
// 显示通知
notification.classList.add('show');
// 3秒后隐藏通知
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => {
notification.className = 'notification hidden';
}, 500);
}, 3000);
}
// 战斗按钮交互
const combatBtn = document.getElementById('combatBtn');
const combatModal = document.getElementById('combatModal');
const closeBtns = document.querySelectorAll('.close');
</html>