CCSWebsite/temp.html

<!-- 活动日历 -->
    <section id="events" class="min-h-screen flex items-center justify-center relative py-24">
      <div class="absolute inset-0 bg-gradient-to-b from-wa-dark/30 to-wa-dark/40"></div>
      <div class="container mx-auto px-4 relative z-10">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(2rem,6vw,4rem)] font-bold text-white mb-4 text-shadow">
            服务器<span class="wa-title">活动日历</span>
          </h2>
          <p class="text-white/70 max-w-2xl mx-auto text-lg">
            查看即将到来的服务器活动和特殊事件，参与赢取丰厚奖励
          </p>
        </div>
        
        <div class="wa-card p-8 max-w-6xl mx-auto">
          <div class="flex flex-col md:flex-row gap-8">
            <!-- 日历视图 -->
            <div class="md:w-3/5">
              <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-bold text-white">2025年6月</h3>
                <div class="flex space-x-2">
                  <button class="w-8 h-8 bg-dark/50 hover:bg-dark text-white rounded-full flex items-center justify-center">
                    <i class="fa fa-chevron-left"></i>
                  </button>
                  <button class="w-8 h-8 bg-dark/50 hover:bg-dark text-white rounded-full flex items-center justify-center">
                    <i class="fa fa-chevron-right"></i>
                  </button>
                </div>
              </div>
              
              <div class="grid grid-cols-7 gap-2 mb-2">
                <div class="text-center text-white/60 text-sm">日</div>
                <div class="text-center text-white/60 text-sm">一</div>
                <div class="text-center text-white/60 text-sm">二</div>
                <div class="text-center text-white/60 text-sm">三</div>
                <div class="text-center text-white/60 text-sm">四</div>
                <div class="text-center text-white/60 text-sm">五</div>
                <div class="text-center text-white/60 text-sm">六</div>
              </div>
              
              <div class="grid grid-cols-7 gap-2">
                <!-- 上个月 -->
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white/40">28</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white/40">29</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white/40">30</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white/40">31</div>
                
                <!-- 当月 -->
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">1</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">2</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">3</div>
                
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">4</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">5</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">6</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">7</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">8</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">9</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">10</div>
                
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">11</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">12</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">13</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">14</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">15</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">16</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">17</div>
                
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">18</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">19</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">20</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">21</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">22</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">23</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">24</div>
                
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">25</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">26</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">27</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">28</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">29</div>
                <div class="h-16 bg-dark/30 rounded-lg flex flex-col items-center justify-center text-white hover:bg-dark/50 transition-colors cursor-pointer">30</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>