Spaces:

zdwalter
/

w

Running

App Files Files Community

zdwalter commited on 9 days ago

Commit

6dd2ba0

verified ·

1 Parent(s): ee73f22

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1244 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: W
-emoji: 💻
-colorFrom: yellow
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: w
+emoji: 🐳
+colorFrom: red
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1244 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ 改进