main

分支 (1)

管理

管理

main

Dialogues-on-Bamboo-Slips
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青简问对 - AI文化对话</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="JavaScript/common.js"></script>
    <link href="styles/theme.css" rel="stylesheet">
</head>
<body class="bg-light min-h-screen flex flex-col font-sans">
    <!-- 顶部导航 -->
<div id="navbar-container"></div>

    <section class="relative bg-paper py-20 md:py-32">
        <div class="absolute inset-0 bg-dark/30"></div>
        <div class="container mx-auto px-4 relative z-10 text-center" style="background-image: url('图片地址待定'); background-size: cover; background-position: center;">
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-ancient text-light mb-6 leading-tight text-shadow">
                青简问对 · 文脉千年待君询
            </h1>
            <p class="text-[clamp(1rem,2vw,1.25rem)] text-light/90 mb-10 max-w-2xl mx-auto">
                与AI共探千年文化，解读竹简帛书，对话古今圣贤
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#chat" class="bg-primary hover:bg-primary/90 text-light px-8 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 font-medium">
                    开始对话
                </a>
                <a href="#features" class="bg-transparent border-2 border-light hover:bg-light/10 text-light px-8 py-3 rounded-lg transition-all duration-300 font-medium">
                    了解功能
                </a>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 w-full h-16 bg-gradient-to-t from-light to-transparent"></div>
    </section>

    <!-- 功能介绍 -->
    <section id="features" class="py-16 bg-light">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-ancient text-primary text-center mb-16">核心功能</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片1 -->
                <div class="bamboo-card rounded-lg p-6 shadow-md card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fa fa-book text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-ancient text-primary text-center mb-4">古籍解析</h3>
                    <p class="text-dark text-center">深入解析《论语》《道德经》《孙子兵法》等经典古籍，解读古代智慧。</p>
                </div>

                <!-- 功能卡片2 -->
                <div class="bamboo-card rounded-lg p-6 shadow-md card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fa fa-comments text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-ancient text-primary text-center mb-4">圣贤对话</h3>
                    <p class="text-dark text-center">与孔子、老子、庄子等古代圣贤进行模拟对话，感受思想碰撞。</p>
                </div>

                <!-- 功能卡片3 -->
                <div class="bamboo-card rounded-lg p-6 shadow-md card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fa fa-pencil-square-o text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-ancient text-primary text-center mb-4">文言创作</h3>
                    <p class="text-dark text-center">根据主题和风格要求，创作典雅的文言文，体验古人的表达方式。</p>
                </div>

                <!-- 功能卡片4 -->
                <div class="bamboo-card rounded-lg p-6 shadow-md card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fa fa-search text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-ancient text-primary text-center mb-4">文化溯源</h3>
                    <p class="text-dark text-center">追溯汉字、礼仪、节日等文化符号的起源与演变，了解文化脉络。</p>
                </div>

                <!-- 功能卡片5 -->
                <div class="bamboo-card rounded-lg p-6 shadow-md card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fa fa-lightbulb-o text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-ancient text-primary text-center mb-4">智慧问答</h3>
                    <p class="text-dark text-center">解答关于古代哲学、历史、艺术等方面的疑问，获取专业解读。</p>
                </div>

                <!-- 功能卡片6 -->
                <div class="bamboo-card rounded-lg p-6 shadow-md card-hover">
                    <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mb-6 mx-auto">
                        <i class="fa fa-users text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-ancient text-primary text-center mb-4">心理评估</h3>
                    <p class="text-dark text-center">根据对话聊天内容综合评估用户心理健康程度，提供专业建议。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 经典对话 -->
    <section id="classic" class="py-16 bg-ancient-pattern">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-ancient text-primary text-center mb-16">经典对话</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <!-- 对话卡片1 -->
                <div class="bg-light rounded-lg p-6 shadow-md card-hover bamboo-card">
                    <div class="flex justify-between items-start mb-4">
                        <h3 class="text-2xl font-ancient text-primary">子曰："学而时习之"</h3>
                        <span class="text-dark/70 text-sm">《论语·学而》</span>
                    </div>
                    <div class="pl-6 border-l-2 border-primary/30 mb-4">
                        <p class="text-dark text-lg leading-relaxed mb-4">
                            <span class="font-ancient text-primary">用户：</span> 请问"学而时习之，不亦说乎"作何解？<br>
                            <span class="font-ancient text-dark">AI：</span> 此句乃孔子劝学之语。"学"者，闻见觉知也；"习"者，践履纯熟也。学而不习，则所学者悬空无用；习而不学，则所习者拘守一隅。时习之，则所学渐化为己有，心体充悦，故曰"不亦说乎"。譬之如种树，学如播撒种子，习如灌溉培养，时习则种子发芽生长，终成参天大树。
                        </p>
                    </div>
                </div>

                <!-- 对话卡片2 -->
                <div class="bg-light rounded-lg p-6 shadow-md card-hover bamboo-card">
                    <div class="flex justify-between items-start mb-4">
                        <h3 class="text-2xl font-ancient text-primary">老子曰："道可道"</h3>
                        <span class="text-dark/70 text-sm">《道德经·第一章》</span>
                    </div>
                    <div class="pl-6 border-l-2 border-primary/30 mb-4">
                        <p class="text-dark text-lg leading-relaxed mb-4">
                            <span class="font-ancient text-primary">用户：</span> "道可道，非常道"该如何理解？<br>
                            <span class="font-ancient text-dark">AI：</span> 老子开篇即揭示"道"之玄妙。首句"道可道"，前一"道"乃宇宙本体，后一"道"为言说之意。次句"非常道"，言真正之道，若以语言表述，则非永恒常在之道。盖道本无名无形，不可言说，可言说者，皆道之表象而非本质。譬如以手指月，手指非月，言语亦如手指，可指向道，然非道本身。故读《道德经》，当于言外求道，不可执于文字。
                        </p>
                    </div>
                </div>
            </div>

            <div class="text-center">
                <a href="#" class="inline-block bg-primary/80 hover:bg-primary text-light px-6 py-2 rounded-lg transition-all duration-300 font-medium">
                    查看更多对话 <i class="fa fa-long-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 对话区入口 -->
    <section id="chat" class="py-16 bg-light">
        <div class="container mx-auto px-4">
            <div class="bg-primary rounded-xl shadow-xl overflow-hidden relative">
                <div class="absolute inset-0 bg-dark/20"></div>
                <div class="relative z-10 p-8 md:p-12 flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
                        <h2 class="text-3xl md:text-4xl font-ancient text-light mb-6">与AI对话圣贤</h2>
                        <p class="text-light/90 mb-8">
                            开启您的文化探索之旅，与AI共同解读千年智慧，感受传统文化的博大精深。无论是探讨人生哲理，还是解析经典著作，青简问对都能为您提供专业的解答与深入的思考。
                        </p>
                        <a href="chat.html" class="bg-secondary hover:bg-secondary/90 text-dark px-8 py-3 rounded-lg transition-all duration-300 transform hover:scale-105 font-medium inline-flex items-center">
                            开始对话 <i class="fa fa-comments ml-2"></i>
                        </a>
                    </div>
                    <div class="md:w-1/2">
                        <div class="bg-light/90 rounded-lg shadow-lg p-6 backdrop-blur-sm bamboo-card">
                            <h3 class="text-xl font-ancient text-primary mb-4 flex items-center">
                                <i class="fa fa-robot text-primary mr-2"></i> 青简问对AI
                            </h3>
                            <p class="text-dark italic">"有朋自远方来，不亦乐乎？今有AI与君共论古今，畅叙幽情。君欲问何事？"</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-16 bg-secondary/20">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl md:text-4xl font-ancient text-primary text-center mb-16">关于青简问对</h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div>
                    <p class="text-dark mb-6">
                        青简问对是一个致力于传承和弘扬中国传统文化的AI对话平台。我们依托先进的人工智能技术，结合深厚的文化底蕴，打造了能够深入理解和解读传统文化的智能助手。
                    </p>
                    <p class="text-dark mb-6">
                        平台以"让传统文化活起来"为使命，通过智能对话的形式，帮助用户跨越时空，与古代圣贤进行思想交流，感受传统文化的魅力。无论您是文化爱好者、学者，还是对传统文化感兴趣的普通用户，都能在这里找到属于自己的文化体验。
                    </p>
                    <div class="flex flex-wrap gap-4 mt-8">
                        <a href="#" class="bg-primary hover:bg-primary/90 text-light px-4 py-2 rounded-lg transition-all duration-300">
                            <i class="fa fa-wechat mr-2"></i> 微信
                        </a>
                        <a href="#" class="bg-primary hover:bg-primary/90 text-light px-4 py-2 rounded-lg transition-all duration-300">
                            <i class="fa fa-github mr-2"></i> Github
                        </a>
                    </div>
                </div>
                <div class="relative">
                    <div class="w-full h-80 md:h-96 bg-primary/10 rounded-lg overflow-hidden shadow-lg">
                        <img src="characters/孔子/kongzi.png" alt="古代书房场景" class="w-full h-full object-cover">
                    </div>
                    <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-primary/30 rounded-lg flex items-center justify-center shadow-lg">
                        <div class="text-center">
                            <p class="text-primary font-ancient text-xl">青简问对</p>
                            <p class="text-dark text-xs">AI文化助手</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="footer-container"></div>

    <script type="module">
        import { renderFooter } from './JavaScript/components/Footer.js';
        document.getElementById('footer-container').innerHTML = renderFooter();
    </script>

    <script type="module">
        import { renderNavbar } from './JavaScript/components/Navbar.js';
        document.getElementById('navbar-container').innerHTML = renderNavbar();
    </script>
</body>