元神（3）

            <h4 class="text-xl font-bold mb-3">角色介绍</h4>
            <p class="text-gray-300 mb-6">${character.description}</p>
            
            <h4 class="text-xl font-bold mb-3">技能介绍</h4>
            <div class="space-y-4">
      `;
      
      character.skills.forEach(skill => {
        html += `
          <div class="p-4 bg-dark/30 rounded-xl">
            <h5 class="font-bold">${skill.name}</h5>
            <p class="text-sm text-gray-300 mt-1">${skill.description}</p>
          </div>
        `;
      });
      
      html += `
            </div>
          </div>
        </div>
      `;
      
      characterModalContent.innerHTML = html;
    }
  }
  
  // 武器详情模态框
  const viewWeaponBtns = document.querySelectorAll('.view-weapon');
  const weaponModal = document.getElementById('weapon-modal');
  const closeWeaponModal = document.getElementById('close-weapon-modal');
  const weaponModalContent = document.getElementById('weapon-modal-content');
  
  viewWeaponBtns.forEach(btn => {
    btn.addEventListener('click', function() {
      const weaponId = this.getAttribute('data-weapon');
      showWeaponDetails(weaponId);
      weaponModal.classList.remove('hidden');
    });
  });
  
  closeWeaponModal.addEventListener('click', function() {
    weaponModal.classList.add('hidden');
  });
  
  function showWeaponDetails(weaponId) {
    // 武器详情数据
    const weapons = {
      'jadewingedspear': {
        name: '和璞鸢',
        type: 'polearm',
        rarity: 5,
        baseAttack: 46,
        secondaryStat: '暴击伤害 +7.2%',
        description: '武器技能：昭理的鸢之枪 - 攻击力提高5%。此外，元素战技命中敌人后，会使攻击力进一步提高3%，持续6秒，最多叠加7层。',
        lore: '曾属于璃月某位岩神的武器，据说蕴含着山岳的力量。',
        image: 'https://p11-doubao-search-sign.byteimg.com/pgc-image/2940a45c1f624d0aba1fb7ca1745645e~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=6J4HWmYafkJs8%2BZG6OSjprHJT%2Fw%3D'
      },
      'favoniuslance': {
        name: '风信之锋',
        type: 'polearm',
        rarity: 4,
        baseAttack: 42,
        secondaryStat: '元素精通 +36',
        description: '武器技能：破空的风之锋 - 触发元素反应后的10秒内，攻击力提升12%，元素精通提升48点。',
        lore: '由蒙德西风教会制作的武器，蕴含着风的力量。',
        image: 'https://p11-doubao-search-sign.byteimg.com/pgc-image/a0856b4168894da8a43fae9fa29eb6ec~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=AKsFgcm%2BvZaPP1mWWOSoFA21pbw%3D'
      },
      'thunderingpulse': {
        name: '飞雷之弦振',
        type: 'bow',
        rarity: 5,
        baseAttack: 46,
        secondaryStat: '暴击伤害 +7.2%',
        description: '武器技能：飞雷之弦振 - 攻击力提高20%/25%/30%/35%/40%，并能获得"飞雷之巴印"的威势。',
        lore: '稻妻雷暴中诞生的神秘武器，据说蕴含着雷神的力量。',
        image: 'https://p11-doubao-search-sign.byteimg.com/pgc-image/a232e56782f244b0a0395b55514940a2~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=4%2BOu0LfAWG6dFGGFOfx5EoFpuNY%3D'
      },
      'whiteblind': {
        name: '白辰之环',
        type: 'catalyst',
        rarity: 4,
        baseAttack: 42,
        secondaryStat: '元素精通 +36',
        description: '武器技能：白辰结界 - 元素战技命中敌人后，为队伍中所有角色（不包括自己）提供15%雷元素伤害加成，持续6秒。',
        lore: '稻妻传统工艺制作的法器，据说能引导雷电的力量。',
        image: 'https://p3-doubao-search-sign.byteimg.com/labis/3342955004622466000324888410706~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765144910&x-signature=W%2B5W5dJ7cYVqL4c19b%2F3iVv7eY4%3D'
      },
      'mistplitter': {
        name: '雾切之回光',
        type: 'sword',
        rarity: 5,
        baseAttack: 48,
        secondaryStat: '暴击伤害 +44.1%',
        description: '武器技能：雾切之巴印 - 获得12%/15%/18%/21%/24%所有元素伤害加成。在元素战技命中敌人后，获得「雾切之巴印」，使攻击力提升8%/10%/12%/14%/16%，持续5秒，最多叠加3层。',
        lore: '来自稻妻的传说之剑，剑身蕴含着清冽的元素之力，据说能斩断迷雾，照亮真理。',
        image: 'https://p11-doubao-search-sign.byteimg.com/labis/c9a079342cf33613dac15a4b4dc33d4d~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145394&x-signature=3vzy1BPlKT%2BtwETNCIr%2F84AKiRM%3D'
      },
      'homa': {
        name: '护摩之杖',
        type: 'polearm',
        rarity: 5,
        baseAttack: 46,
        secondaryStat: '暴击伤害 +66.2%',
        description: '武器技能：阳华 - 基于装备者的生命值上限，获得攻击力加成（0.8%）。当装备者生命值低于50%时，攻击力进一步提升（1%）。',
        lore: '传说中来自璃月的神秘长柄武器，蕴含着强大的生命力和破坏力。',
        image: 'https://p3-doubao-search-sign.byteimg.com/labis/3b239838c74e069f829aeb900ad1b2c9~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145394&x-signature=jOKlK9mQJbRgtiFFebTov8lt8J0%3D'
      },
      'amos': {
        name: '阿莫斯之弓',
        type: 'bow',
        rarity: 5,
        baseAttack: 46,
        secondaryStat: '攻击力 +10.8%',
        description: '武器技能：矢志不忘 - 普通攻击和瞄准射击伤害提升24%。箭矢发射后每经过0.1秒，伤害还会提升6%，至多提升5次。',
        lore: '古老的蒙德长弓，据说曾属于一位传奇射手，其力量能穿透时空。',
        image: 'https://p3-doubao-search-sign.byteimg.com/labis/68e2857d28888f0b5004eecc08f04379~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1765145394&x-signature=jumdVWIrJU7z5Jy%2FizR8qhooKyg%3D'
      }
    };
    
    const weapon = weapons[weaponId];
    
    if (weapon) {
      // 构建武器详情HTML
      let html = `
        <div class="flex flex-col md:flex-row gap-6">
          <div class="md:w-1/3">
            <div class="relative rounded-xl overflow-hidden bg-gradient-to-br from-secondary/30 to-dark">
              <img src="${weapon.image}" alt="${weapon.name}" class="w-full h-auto object-contain p-4">
              <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark to-transparent p-4">
                <h3 class="text-2xl font-bold">${weapon.name}</h3>
                <div class="flex items-center mt-1">
                  <span class="bg-secondary/30 px-2 py-0.5 rounded text-xs">${getWeaponTypeName(weapon.type)}</span>
                  <div class="ml-2 flex space-x-1">
                    ${getStarsHtml(weapon.rarity)}
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-4 p-4 bg-dark/30 rounded-xl space-y-3">
              <div class="flex justify-between">
                <span class="text-gray-400">基础攻击力</span>
                <span>${weapon.baseAttack}</span>
              </div>
              <div class="flex justify-between">
                <span class="text-gray-400">次要属性</span>
                <span>${weapon.secondaryStat}</span>
              </div>
            </div>
          </div>
          <div class="md:w-2/3">
            <h4 class="text-xl font-bold mb-3">武器技能</h4>
            <div class="p-4 bg-dark/30 rounded-xl mb-6">
              <p class="text-gray-300">${weapon.description}</p>
            </div>
            
            <h4 class="text-xl font-bold mb-3">武器故事</h4>
            <p class="text-gray-300">${weapon.lore}</p>
            
            <h4 class="text-xl font-bold mt-6 mb-3">推荐角色</h4>
            <div class="flex flex-wrap gap-2">
              ${getRecommendedCharacters(weapon.type)}
            </div>
          </div>
        </div>
      `;
      
      weaponModalContent.innerHTML = html;
    }
  }
  
  // 辅助函数
  function getElementName(element) {
    const elementNames = {
      'fire': '火',
      'water': '水',
      'wind': '风',
      'thunder': '雷',
      'grass': '草',
      'ice': '冰',
      'rock': '岩'
    };
    
    return elementNames[element] || element;
  }
  
  function getWeaponTypeName(type) {
    const typeNames = {
      'sword': '单手剑',
      'claymore': '双手剑',
      'polearm': '长柄武器',
      'catalyst': '法器',
      'bow': '弓'
    };
    
    return typeNames[type] || type;
  }
  
  function getStarsHtml(rarity) {
    let html = '';
    
    for (let i = 0; i < 5; i++) {
      if (i < rarity) {
        html += '<i class="fa fa-star text-accent"></i>';
      } else {
        html += '<i class="fa fa-star text-gray-500"></i>';
      }
    }
    
    return html;
  }
  
  function getRecommendedCharacters(weaponType) {
    const recommendations = {
      'sword': [
        { name: '枫原万叶', element: 'wind' },
        { name: '神里绫华', element: 'ice' },
        { name: '刻晴', element: 'thunder' }
      ],
      'claymore': [
        { name: '迪卢克', element: 'fire' },
        { name: '优菈', element: 'ice' },
        { name: '荒泷一斗', element: 'rock' }
      ],
      'polearm': [
        { name: '胡桃', element: 'fire' },
        { name: '雷电将军', element: 'thunder' },
        { name: '魈', element: 'wind' }
      ],
      'catalyst': [
        { name: '八重神子', element: 'thunder' },
        { name: '纳西妲', element: 'grass' },
        { name: '莫娜', element: 'water' }
      ],
      'bow': [
        { name: '甘雨', element: 'ice' },
        { name: '宵宫', element: 'fire' },
        { name: '达达利亚', element: 'water' }
      ]
    };
    
    const chars = recommendations[weaponType] || [];
    let html = '';
    
    chars.forEach(char => {
      html += `
        <span class="element-${char.element} px-2 py-1 rounded text-xs">
          ${char.name}
        </span>
      `;
    });
    
    return html;
  }
  
  // 加载更多角色
  const loadMoreCharactersBtn = document.getElementById('load-more-characters');
  
  loadMoreCharactersBtn.addEventListener('click', function() {
    // 模拟加载更多角色
    this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
    
    setTimeout(() => {
      this.innerHTML = '没有更多角色了';
      this.disabled = true;
      this.classList.add('opacity-50', 'cursor-not-allowed');
    }, 1500);
  });
  
  // 加载更多武器
  const loadMoreWeaponsBtn = document.getElementById('load-more-weapons');
  
  loadMoreWeaponsBtn.addEventListener('click', function() {
    // 模拟加载更多武器
    this.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 加载中...';
    
    setTimeout(() => {
      this.innerHTML = '没有更多武器了';
      this.disabled = true;
      this.classList.add('opacity-50', 'cursor-not-allowed');
    }, 1500);
  });
  
  // 搜索功能
  const searchInput = document.querySelector('input[placeholder="搜索角色、武器..."]');
  
  searchInput.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
      const searchTerm = this.value.toLowerCase().trim();
      
      if (searchTerm) {
        // 模拟搜索结果
        alert(`搜索: ${searchTerm}`);
        // 实际应用中这里会跳转到搜索结果页或显示搜索结果
      }
    }
  });
});

</script>
</body>
</html>