tailwind布局实现大气简洁ai提示词库网站ui布局代码-html代码-BFW代码库

tailwind布局实现大气简洁ai提示词库网站ui布局代码

代码语言：html

代码描述：tailwind布局实现大气简洁ai提示词库网站ui布局代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AETHER | 全模型 AI 提示词库</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'] },
                    colors: {
                        dark: '#050505',
                        card: '#161b22', // 更深的卡片背景
                        border: '#30363d',
                        primary: '#6366f1', // Indigo
                        'neon-cyan': '#00f2ea',
                        'neon-pink': '#ff0055',
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #050505;
            /* 更加深邃、科技感的背景光晕 */
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(255, 0, 85, 0.05) 0%, transparent 25%);
            color: #e2e8f0;
            min-height: 100vh;
        }
        
        /* 玻璃拟态导航栏 */
        .glass-panel {
            background: rgba(22, 27, 34, 0.6);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* 隐藏滚动条 */
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

        /* 模型标签的过渡动画 */
        .model-tag-container {
            transition: all 0.3s ease;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
        }
        .model-tag-container.active {
            max-height: 100px;
            opacity: 1;
            margin-top: 1rem;
        }

        /* 卡片悬停光效 */
        .prompt-card {
            border: 1px solid transparent;
            background: linear-gradient(#161b22, #161b22) padding-box,
                        linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)) border-box;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .prompt-card:hover {
            transform: translateY(-4px);
            border-color: rgba(99, 102, 241, 0.4);
            box-shadow: 0 0 30px -10px rgba(99, 102, 241, 0.2);
        }

        .gradient-text {
            background: linear-gradient(to right, #818cf8, #c084fc, #2dd4bf);
            -webkit-ba.........完整代码请登录后点击上方下载按钮下载查看