心情树洞吗-分享内心世界的官网代码【HTML+CSS+JS】

<!-- 统计数据 -->
  <section class="py-12 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
        <div class="p-6 rounded-xl bg-neutral-100">
          <div class="text-4xl font-bold text-primary mb-2" id="stat-shares">0</div>
          <div class="text-neutral-600">分享心情</div>
        </div>
        <div class="p-6 rounded-xl bg-neutral-100">
          <div class="text-4xl font-bold text-primary mb-2" id="stat-comments">0</div>
          <div class="text-neutral-600">暖心回应</div>
        </div>
        <div class="p-6 rounded-xl bg-neutral-100">
          <div class="text-4xl font-bold text-primary mb-2" id="stat-likes">0</div>
          <div class="text-neutral-600">收到点赞</div>
        </div>
        <div class="p-6 rounded-xl bg-neutral-100">
          <div class="text-4xl font-bold text-primary mb-2" id="stat-users">0</div>
          <div class="text-neutral-600">匿名用户</div>
        </div>
      </div>
    </div>
  </section>

  <!-- 分享心情区域 -->
  <section id="share" class="py-16 bg-neutral-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800 mb-4">分享你的心情</h2>
        <p class="text-neutral-600 max-w-2xl mx-auto">在这里，你可以匿名表达自己的感受。每一次分享都是一种释放，也许还能找到共鸣。</p>
      </div>
      
      <div class="max-w-3xl mx-auto">
        <div class="bg-white rounded-2xl shadow-card p-6 md:p-8">
          <form id="share-form" class="space-y-6">
            <div>
              <label for="mood" class="block text-sm font-medium text-neutral-700 mb-1">今日心情</label>
              <div class="flex items-center space-x-4">
                <label class="cursor-pointer">
                  <input type="radio" name="mood" value="happy" class="sr-only peer">
                  <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 peer-checked:ring-2 peer-checked:ring-green-500 transition-all">
                    <i class="fa-regular fa-face-smile text-xl"></i>
                  </div>
                </label>
                <label class="cursor-pointer">
                  <input type="radio" name="mood" value="neutral" class="sr-only peer" checked>
                  <div class="w-12 h-12 rounded-full bg-neutral-100 flex items-center justify-center text-neutral-600 peer-checked:ring-2 peer-checked:ring-neutral-500 transition-all">
                    <i class="fa-regular fa-face-meh text-xl"></i>
                  </div>
                </label>
                <label class="cursor-pointer">
                  <input type="radio" name="mood" value="sad" class="sr-only peer">
                  <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 peer-checked:ring-2 peer-checked:ring-blue-500 transition-all">
                    <i class="fa-regular fa-face-sad-tear text-xl"></i>
                  </div>
                </label>
                <label class="cursor-pointer">
                  <input type="radio" name="mood" value="angry" class="sr-only peer">
                  <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600 peer-checked:ring-2 peer-checked:ring-red-500 transition-all">
                    <i class="fa-regular fa-face-angry text-xl"></i>
                  </div>
                </label>
                <label class="cursor-pointer">
                  <input type="radio" name="mood" value="anxious" class="sr-only peer">
                  <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 peer-checked:ring-2 peer-checked:ring-purple-500 transition-all">
                    <i class="fa-regular fa-face-worried text-xl"></i>
                  </div>
                </label>
              </div>
            </div>
            
            <div>
              <label for="content" class="block text-sm font-medium text-neutral-700 mb-1">想倾诉什么？</label>
              <textarea id="content" rows="6" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all resize-none" placeholder="在这里写下你的心事..."></textarea>
            </div>
            
            <div>
              <label class="flex items-center">
                <input type="checkbox" class="w-4 h-4 text-primary focus:ring-primary border-neutral-300 rounded" checked>
                <span class="ml-2 text-sm text-neutral-600">允许他人回应我的分享</span>
              </label>
            </div>
            
            <div class="pt-4">
              <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg flex items-center justify-center">
                <i class="fa-solid fa-paper-plane mr-2"></i>
                匿名分享
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- 探索树洞区域 -->
  <section id="explore" class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-800 mb-4">探索树洞</h2>
        <p class="text-neutral-600 max-w-2xl mx-auto">看看其他人的分享，也许你会找到共鸣，或者给予一些温暖的回应。</p>
      </div>
      
      <div class="flex flex-col md:flex-row gap-6 mb-8">
        <div class="relative w-full md:w-1/3">
          <input type="text" id="search-input" placeholder="搜索心情分享..." class="w-full pl-10 pr-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all">
          <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
        </div>
        
        <div class="w-full md:w-2/3 flex flex-col sm:flex-row gap-4">
          <select id="filter-mood" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all">
            <option value="all">所有心情</option>
            <option value="happy">开心</option>
            <option value="neutral">平静</option>
            <option value="sad">难过</option>
            <option value="angry">愤怒</option>
            <option value="anxious">焦虑</option>
          </select>
          
          <select id="sort-options" class="w-full px-4 py-3 rounded-lg border border-neutral-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all">
            <option value="newest">最新发布</option>
            <option value="popular">最受欢迎</option>
            <option value="discussed">最多回应</option>
          </select>
        </div>
      </div>
      
      <!-- 树洞卡片容器 -->
      <div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- 加载中状态 -->
        <div class="col-span-full text-center py-12" id="loading-indicator">
          <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-t-transparent"></div>
          <p class="mt-2 text-neutral-500">加载中...</p>
        </div>
      </div>
      
      <!-- 加载更多按钮 -->
      <div class="text-center mt-12">
        <button id="load-more" class="px-6 py-3 bg-white border border-neutral-300 rounded-lg text-neutral-700 hover:bg-neutral-50 transition-all duration-300">
          加载更多
        </button>
      </div>
    </div>
  </section>

  <!-- 关于我们 -->
  <section id="about" class="py-16 bg-gradient-mood text-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">关于心情树洞</h2>
        <p class="text-white/90 max-w-2xl mx-auto">我们致力于创建一个安全、匿名的空间，让每个人都能自由表达自己的感受。</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 transform transition-all duration-300 hover:scale-105">
          <div class="text-4xl mb-4">
            <i class="fa-solid fa-shield-heart"></i>
          </div>
          <h3 class="text-xl font-bold mb-3">匿名保护</h3>
          <p class="text-white/80">我们严格保护你的隐私，所有分享都是匿名的，不会追踪你的个人信息。</p>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 transform transition-all duration-300 hover:scale-105">
          <div class="text-4xl mb-4">
            <i class="fa-solid fa-hand-holding-heart"></i>
          </div>
          <h3 class="text-xl font-bold mb-3">互相支持</h3>
          <p class="text-white/80">在这里，你可以得到他人的理解和支持，也可以给予他人温暖和鼓励。</p>
        </div>
        
        <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 transform transition-all duration-300 hover:scale-105">
          <div class="text-4xl mb-4">
            <i class="fa-solid fa-brain"></i>
          </div>
          <h3 class="text-xl font-bold mb-3">心理健康</h3>
          <p class="text-white/80">分享和倾听是维护心理健康的重要方式，我们希望成为你心灵的避风港。</p>
        </div>
      </div>
      
      <div class="mt-16 text-center">
        <h3 class="text-2xl font-bold mb-6">专业支持</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
          <a href="#" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-lg p-4 transition-all duration-300 flex flex-col items-center">
            <i class="fa-solid fa-user-doctor text-2xl mb-2"></i>
            <span>心理咨询</span>
          </a>
          <a href="#" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-lg p-4 transition-all duration-300 flex flex-col items-center">
            <i class="fa-solid fa-book-open text-2xl mb-2"></i>
            <span>心理知识</span>
          </a>
          <a href="#" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-lg p-4 transition-all duration-300 flex flex-col items-center">
            <i class="fa-solid fa-users text-2xl mb-2"></i>
            <span>互助小组</span>
          </a>
          <a href="#" class="bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-lg p-4 transition-all duration-300 flex flex-col items-center">
            <i class="fa-solid fa-phone text-2xl mb-2"></i>
            <span>热线电话</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="bg-neutral-900 text-white py-12">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center mb-4">
            <i class="fa-solid fa-tree text-primary text-2xl mr-2"></i>
            <span class="text-xl font-bold">心情树洞</span>
          </div>
          <p class="text-neutral-400 mb-4">一个匿名分享心情的安全空间</p>
          <div class="flex space-x-4">
            <a href="#" class="text-neutral-400 hover:text-white transition-colors">
              <i class="fa-brands fa-weibo"></i>
            </a>
            <a href="#" class="text-neutral-400 hover:text-white transition-colors">
              <i class="fa-brands fa-wechat"></i>
            </a>
            <a href="#" class="text-neutral-400 hover:text-white transition-colors">
              <i class="fa-brands fa-qq"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><a href="#home" class="text-neutral-400 hover:text-white transition-colors">首页</a></li>
            <li><a href="#share" class="text-neutral-400 hover:text-white transition-colors">分享心情</a></li>
            <li><a href="#explore" class="text-neutral-400 hover:text-white transition-colors">探索树洞</a></li>
            <li><a href="#about" class="text-neutral-400 hover:text-white transition-colors">关于我们</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">支持</h4>
          <ul class="space-y-2">
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">常见问题</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">使用条款</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">隐私政策</a></li>
            <li><a href="#" class="text-neutral-400 hover:text-white transition-colors">联系我们</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-lg font-semibold mb-4">订阅更新</h4>
          <p class="text-neutral-400 mb-4">获取关于心理健康的最新资讯和资源</p>
          <form class="flex">
            <input type="email" placeholder="你的邮箱地址" class="px-4 py-2 rounded-l-lg focus:outline-none text-neutral-800 w-full">
            <button type="submit" class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
              <i class="fa-solid fa-paper-plane"></i>
            </button>
          </form>
        </div>
      </div>
      
      <div class="border-t border-neutral-800 mt-12 pt-8 text-center text-neutral-500">
        <p>&copy; 2025 心情树洞. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- 分享成功模态框 -->
  <div id="success-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
      <div class="text-center">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fa-solid fa-check text-green-500 text-2xl"></i>
        </div>
        <h3 class="text-xl font-bold text-neutral-800 mb-2">分享成功！</h3>
        <p class="text-neutral-600 mb-6">你的心情已经匿名发布到树洞，感谢你的勇敢表达。</p>
        <button id="close-modal" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all">
          知道了
        </button>
      </div>
    </div>
  </div>