tailwind布局实现带ai聊天助手的日历日程安排排班布局ui效果代码-html代码-BFW代码库

代码语言：html

代码描述：tailwind布局实现带ai聊天助手的日历日程安排排班布局ui效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自然背景日历应用</title>
  <!-- Tailwind CSS v3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <!-- Font Awesome -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- 统一的 Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0065FD',
            secondary: '#60a5fa',
            event1: 'rgba(16,185,129,0.6)', // 绿色
            event2: 'rgba(139,92,246,0.6)', // 紫色
            event3: 'rgba(245,158,11,0.6)', // 黄色
            event4: 'rgba(236,72,153,0.6)', // 粉色
            event5: 'rgba(6,182,212,0.6)', // 青色
            event6: 'rgba(239,68,68,0.6)', // 红色
            event7: 'rgba(132,204,22,0.6)', // 浅绿色
            event8: 'rgba(99,102,241,0.6)', // 靛蓝色
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'fade-in': 'fadeIn 0.5s ease-in-out',
            'fade-in-delay-1': 'fadeIn 0.5s ease-in-out 0.1s forwards',
            'fade-in-delay-2': 'fadeIn 0.5s ease-in-out 0.2s forwards',
            'fade-in-delay-3': 'fadeIn 0.5s ease-in-out 0.3s forwards',
            'fade-in-delay-4': 'fadeIn 0.5s ease-in-out 0.4s forwards',
            'fade-in-delay-5': 'fadeIn 0.5s ease-in-out 0.5s forwards',
            'typing': 'typing 1.5s steps(30, end)',
            'blink': 'blink 1s infinite',
          },
          keyframes: {
            fadeIn: {
              '0%': { opacity: '0', transform: 'translateY(10px)' },
              '100%': { opacity: '1', transform: 'translateY(0)' },
            },
            typing: {
              'from': { width: '0' },
              'to': { width: '100%' },
            },
            blink: {
              'from, to': { borderColor: 'transparent' },
              '50%': { borderColor: 'white' },
            },
          },
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .glass {
        @apply bg-white/10 backdrop-blur-md border border-white/20 shadow-lg;
      }
      .glass-dark {
        @apply bg-black/10 backdrop-blur-md border border-white/10 shadow-lg;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .transition-all-300 {
        @apply transition-all duration-300 ease-in-out;
      }
    }
  </style>
  <style>
    body {
      background-image: url('//repo.bfw.wiki/bfwrepo/image/5d653d54ed035.png');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      min-height: 100vh;
    }
    
    .event {
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .event:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    
    .calendar-day {
      min-height: 120px;
    }
    
    .sidebar-calendar .day {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.2s ease;
    }
    
    .sidebar-calendar .day:hover:not(.empty) {
      background-color: rgba(255, 255, 255, 0.2);
    }
    
    .sidebar-calendar .day.active {
      background-color: #3b82f6;
      color: white;
    }
    
    .sidebar-calendar .day.today {
      border: 2px solid #3b82f6;
    }
    
    .ai-assistant-container {
      position: fixed;
      bottom: 4px;
      right: 4px;
      z-index: 100;
    }
    
    .ai-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      transition: all 0.3s ease;
      border: 2px solid rgba(255, 255, 255, 0.2);
    }
    
    .ai-avatar:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    }
    
    .ai-avatar img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .ai-assistant-popup {
      position: absolute;
      bottom: 70px;
      right: 0;
      width: 350px;
      border-radius: 16px;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transform-origin: bottom right;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0;
      transform: scale(0.9);
      pointer-events: none;
    }
    
    .ai-assistant-popup.show {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
    }
    
    .ai-header {
      background-color: '#0065FD';
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .ai-header-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .ai-header-info {
      flex: 1;
    }
    
    .ai-header-name {
      font-weight: 600;
      font-size: 16px;
      color: white;
    }
    
    .ai-header-status {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .ai-status-indicator {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #10b981;
    }
    
    .ai-chat-container {
      padding: 16px;
      height: 250px;
      overflow-y: auto;
    }
    
    .ai-message {
      margin-bottom: 16px;
      display: flex;
      gap: 10px;
    }
    
    .ai-message-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .ai-message-bubble {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 18px;
      padding: 12px 16px;
      max-width: 80%;
      color: white;
      font-size: 14px;
      line-height: 1.4;
    }
    
    .user-message {
      margin-bottom: 16px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
    
    .user-message-bubble {
      background: #3b82f6;
      border-radius: 18px 18px 0 18px;
      padding: 12px 16px;
      max-width: 80%;
      color: white;
      font-size: 14px;
      line-height: 1.4;
    }
    
    .ai-input-container {
      padding: 12px 16px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .ai-input {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 10px 16px;
      color: white;
      font-size: 14px;
      outline: none;
      transition: all 0.2s ease;
    }
    
    .ai-input:focus {
      border-color: #3b82f6;
      background: rgba(255, 255, 255, 0.1);
    }
    
    .ai-send-button {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .ai-send-button:hover {
      background: #2563eb;
      transform: scale(1.05);
    }
    
    .ai-features {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      flex-wrap: wrap;
    }
    
    .ai-feature-button {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      padding: 6px 12px;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .ai-feature-button:hover {
      background: rg.........完整代码请登录后点击上方下载按钮下载查看