SOURCE

console 命令行工具 X clear

                    
>
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千年秦腔 - 文化遗产数字化展示平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary-dark: #5a3e36;
            --primary-medium: #8b4513;
            --primary-light: #d4a017;
            --background-light: #f5e8d1;
            --background-medium: #e6d4b5;
            --text-dark: #5a3e36;
            --text-medium: #7a5d55;
            --text-light: #f5e8d1;
        }
        
        body {
            font-family: 'Noto Serif SC', serif;
            background:linear-gradient(135deg, var(--background-light) 0%, var(--background-medium) 100%);
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }
        
        .page {
            display: none;
            min-height: calc(100vh - 180px);
            padding: 20px 0 80px;
        }
        
        .page.active {
            display: block;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background: rgba(139, 69, 19, 0.95);
            padding: 15px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            transition: all 0.4s ease;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            display: flex;
            align-items: center;
        }
        
        .logo-text {
            color: var(--text-light);
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 2px;
        }
        
        .logo-text span {
            color: var(--primary-light);
        }
        
        nav ul {
            display: flex;
            list-style: none;
        }
        
        nav ul li {
            margin: 0 10px;
        }
        
        nav ul li a {
            color: var(--text-light);
            text-decoration: none;
            font-size: 18px;
            font-weight: 500;
            padding: 8px 15px;
            border-radius: 4px;
            transition: all 0.3s ease;
            position: relative;
        }
        
        nav ul li a:hover {
            color: var(--primary-light);
            background: rgba(255, 255, 255, 0.1);
        }
        
        nav ul li a.active {
            color: var(--primary-light);
            background: rgba(255, 255, 255, 0.15);
        }
        
        nav ul li a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: var(--primary-light);
            bottom: 0;
            left: 0;
            transition: width 0.3s;
        }
        
        nav ul li a:hover:after, nav ul li a.active:after {
            width: 100%;
        }
        
        .search-container {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            padding: 5px 15px;
            margin-left: 20px;
        }
        
        .search-container input {
            background: transparent;
            border: none;
            color: var(--text-light);
            font-size: 16px;
            padding: 8px 12px;
            width: 180px;
            outline: none;
        }
        
        .search-container input::placeholder {
            color: rgba(245, 232, 209, 0.7);
        }
        
        .search-container button {
            background: transparent;
            border: none;
            color: var(--text-light);
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        .search-container button:hover {
            color: var(--primary-light);
            transform: scale(1.1);
        }
        
        .hero {
            height: 85vh;
            background: linear-gradient(rgba(90, 62, 54, 0.7), rgba(90, 62, 54, 0.7)), 
                        url('https://images.unsplash.com/photo-1588416473588-9ea815a3e6d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            margin-bottom: 60px;
        }
        
        .hero-content {
            text-align: center;
            color: var(--text-light);
            max-width: 800px;
            margin: 0 auto;
            padding: 0 20px;
            z-index: 10;
        }
        
        .hero-content h1 {
            font-size: 4rem;
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            animation: fadeInUp 1s ease;
        }
        
        .hero-content p {
            font-size: 1.5rem;
            margin-bottom: 30px;
            animation: fadeInUp 1s ease 0.2s forwards;
            opacity: 0;
        }
        
        .btn {
            display: inline-block;
            background: var(--primary-light);
            color: var(--text-dark);
            padding: 14px 35px;
            font-size: 18px;
            font-weight: 600;
            border-radius: 50px;
            text-decoration: none;
            transition: all 0.3s ease;
            animation: fadeInUp 1s ease 0.4s forwards;
            opacity: 0;
            border: 2px solid var(--primary-light);
            cursor: pointer;
        }
        
        .btn:hover {
            background: transparent;
            color: var(--text-light);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .btn-outline {
            background: transparent;
            color: var(--text-light);
            border: 2px solid var(--text-light);
        }
        
        .btn-outline:hover {
            background: var(--text-light);
            color: var(--text-dark);
        }
        
        .features {
            padding: 60px 0;
            background: var(--background-light);
        }
        
        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 70px;
            color: var(--text-dark);
            position: relative;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            width: 100px;
            height: 4px;
            background: var(--primary-light);
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 2px;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
        
        .feature-card {
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.4s ease;
            position: relative;
        }
        
        .feature-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }
        
        .feature-img {
            height: 250px;
            overflow: hidden;
        }
        
        .feature-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .feature-card:hover .feature-img img {
            transform: scale(1.1);
        }
        
        .feature-content {
            padding: 25px;
        }
        
        .feature-content h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--text-dark);
        }
        
        .feature-content p {
            color: var(--text-medium);
            margin-bottom: 20px;
        }
        
        .feature-content a {
            color: var(--primary-light);
            text-decoration: none;
            font-weight: 600;
            display: flex;
            align-items: center;
        }
        
        .feature-content a i {
            margin-left: 8px;
            transition: transform 0.3s ease;
        }
        
        .feature-content a:hover i {
            transform: translateX(5px);
        }
        
        .modules {
            padding: 80px 0;
            background: var(--background-medium);
        }
        
        .module-nav {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        
        .module-card {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            padding: 30px 20px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .module-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            border-color: var(--primary-light);
            background: white;
        }
        
        .module-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: var(--primary-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--text-light);
        }
        
        .module-card h3 {
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: var(--text-dark);
        }
        
        .module-card p {
            color: var(--text-medium);
            font-size: 0.95rem;
        }
        
        .virtual-tour {
            padding: 80px 0;
            background: var(--background-light);
        }
        
        .tour-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
        }
        
        .tour-viewer {
            flex: 1;
            min-width: 300px;
            height: 500px;
            background: #2c1a0f;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
            position: relative;
        }
        
        #cave-viewer {
            width: 100%;
            height: 100%;
        }
        
        .tour-controls {
            position: absolute;
            bottom: 20px;
            left: 20px;
            display: flex;
            gap: 10px;
            z-index: 100;
        }
        
        .tour-controls button {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .tour-controls button:hover {
            background: var(--primary-light);
            transform: scale(1.1);
        }
        
        .tour-info {
            flex: 1;
            min-width: 300px;
        }
        
        .tour-info h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: var(--text-dark);
        }
        
        .tour-info p {
            color: var(--text-medium);
            line-height: 1.8;
            margin-bottom: 25px;
        }
        
        .cave-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }
        
        .cave-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .cave-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            background: var(--primary-light);
            color: white;
        }
        
        .cave-item.active {
            background: var(--primary-medium);
            color: white;
        }
        
        .gallery-section {
            padding: 80px 0;
            background: var(--background-medium);
        }
        
        .gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }
        
        .gallery-item {
            height: 300px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }
        
        .gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(139, 69, 19, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--text-light);
            padding: 20px;
            text-align: center;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .gallery-overlay h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }
        
        .gallery-overlay p {
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .search-section {
            padding: 100px 0;
            background: var(--background-light);
        }
        
        .search-container-large {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        
        .search-container-large h2 {
            font-size: 2.5rem;
            margin-bottom: 30px;
            color: var(--text-dark);
        }
        
        .search-box {
            display: flex;
            background: white;
            border-radius: 50px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }
        
        .search-box input {
            flex: 1;
            border: none;
            padding: 20px 30px;
            font-size: 18px;
            outline: none;
        }
        
        .search-box button {
            background: var(--primary-light);
            color: var(--text-dark);
            border: none;
            padding: 0 35px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .search-box button:hover {
            background: var(--primary-medium);
            color: white;
        }
        
        .search-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-top: 30px;
        }
        
        .search-tag {
            background: rgba(139, 69, 19, 0.1);
            color: var(--text-dark);
            padding: 8px 20px;
            border-radius: 30px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .search-tag:hover {
            background: var(--primary-light);
            color: white;
        }
        
        .search-results {
            margin-top: 50px;
            text-align: left;
        }
        
        .result-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .result-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
            transition: all 0.4s ease;
        }
        
        .result-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }
        
        .result-img {
            height: 200px;
        }
        
        .result-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .result-content {
            padding: 20px;
        }
        
        .result-content h3 {
            font-size: 1.5rem;
            margin-bottom: 10px;
            color: var(--text-dark);
        }
        
        .result-content .type {
            color: var(--primary-light);
            font-weight: 600;
            margin-bottom: 10px;
            display: block;
        }
        
        .result-content p {
            color: var(--text-medium);
            margin-bottom: 15px;
        }
        
        .no-results {
            text-align: center;
            padding: 40px;
            color: var(--text-medium);
            font-size: 1.2rem;
            grid-column: 1 / -1;
        }
        
        .relics-section {
            padding: 80px 0;
            background: var(--background-light);
        }
        
        .relics-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 40px;
        }
        
        .relic-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.4s ease;
        }
        
        .relic-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }
        
        .relic-img {
            height: 300px;
            overflow: hidden;
        }
        
        .relic-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .relic-card:hover .relic-img img {
            transform: scale(1.05);
        }
        
        .relic-content {
            padding: 25px;
        }
        
        .relic-content h3 {
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: var(--text-dark);
        }
        
        .relic-content .date {
            color: var(--primary-light);
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .relic-content p {
            color: var(--text-medium);
            margin-bottom: 20px;
        }
        
        .music-control {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 60px;
            height: 60px;
            background: var(--primary-medium);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 999;
            transition: all 0.3s ease;
        }
        
        .music-control:hover {
            transform: scale(1.1);
            background: var(--primary-light);
        }
        
        footer {
            background: var(--primary-dark);
            color: var(--text-light);
            padding: 70px 0 30px;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 50px;
        }
        
        .footer-col h3 {
            font-size: 1.8rem;
            margin-bottom: 25px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-col h3:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            background: var(--primary-light);
        }
        
        .footer-col p {
            margin-bottom: 25px;
            line-height: 1.8;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: var(--text-light);
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background: var(--primary-light);
            transform: translateY(-5px);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 15px;
        }
        
        .footer-links a {
            color: var(--text-light);
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        
        .footer-links a:hover {
            color: var(--primary-light);
            padding-left: 5px;
        }
        
        .footer-links a i {
            margin-right: 10px;
            color: var(--primary-light);
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 15px;
            color: rgba(245, 232, 209, 0.7);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in {
            animation: fadeInUp 1s ease forwards;
        }
        
        .delay-1 {
            animation-delay: 0.1s;
        }
        
        .delay-2 {
            animation-delay: 0.2s;
        }
        
        .delay-3 {
            animation-delay: 0.3s;
        }
        
        @media (max-width: 992px) {
            .hero-content h1 {
                font-size: 3rem;
            }
            
            nav ul {
                display: none;
            }
            
            .search-container {
                margin-left: 10px;
            }
            
            .search-container input {
                width: 150px;
            }
        }
        
        @media (max-width: 768px) {
            .hero {
                height: 70vh;
            }
            
            .hero-content h1 {
                font-size: 2.5rem;
            }
            
            .hero-content p {
                font-size: 1.2rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
            
            .module-nav {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .tour-container {
                flex-direction: column;
            }
            
            .tour-viewer {
                height: 400px;
            }
        }
        
        @media (max-width: 576px) {
            .logo-text {
                font-size: 1.5rem;
            }
            
            .hero {
                height: 60vh;
            }
            
            .hero-content h1 {
                font-size: 2rem;
            }
            
            .search-container {
                display: none;
            }
            
            .module-nav {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container header-content">
            <div class="logo">
                <div class="logo-text">数字<span>秦腔</span></div>
            </div>
            <nav>
                <ul>
                    <li><a href="#" class="nav-link active" data-page="home">首页</a></li>
                    <li><a href="#" class="nav-link" data-page="caves">剧目探索</a></li>
                    <li><a href="#" class="nav-link" data-page="murals">扮相艺术</a></li>
                    <li><a href="#" class="nav-link" data-page="relics">道具数字</a></li>
                    <li><a href="#" class="nav-link" data-page="research">学术研究</a></li>
                    <li><a href="#" class="nav-link" data-page="exhibitions">展览活动</a></li>
                </ul>
            </nav>
            <div class="search-container">
                <input type="text" id="header-search" placeholder="搜索剧目或扮相...">
                <button id="header-search-btn"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </header>

    <div class="music-control">
        <i class="fas fa-music"></i>
        <audio id="background-music" loop>
            <source src="#" type="audio/mpeg">
        </audio>
    </div>

    <div id="home" class="page active">
        <section class="hero">
            <div class="hero-content">
                <h1>千年秦腔 · 数字焕彩</h1>
                <p>解锁秦腔艺术数字化传承与创新密码</p>
                <a href="#" class="btn">踏入秦腔数字时空</a>
            </div>
        </section>

        <section class="features">
            <div class="container">
                <h2 class="section-title">数字敦煌特色</h2>
                <div class="features-grid">
                    <div class="feature-card fade-in">
                        <div class="feature-img">
                            <img src="https://images.unsplash.com/photo-1601992688418-8e228d5e9c1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="洞窟数字化">
                        </div>
                        <div class="feature-content">
                            <h3>洞窟数字化</h3>
                            <p>采用高精度三维扫描技术,完整记录敦煌石窟的空间结构、彩塑和壁画,建立永久性的数字档案。</p>
                            <a href="#" class="nav-link" data-page="caves">了解更多 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    
                    <div class="feature-card fade-in delay-1">
                        <div class="feature-img">
                            <img src="https://images.unsplash.com/photo-1588416473588-9ea815a3e6d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="壁画复原">
                        </div>
                        <div class="feature-content">
                            <h3>壁画复原</h3>
                            <p>通过多光谱成像和数字修复技术,再现壁画原始色彩,还原历史原貌,让千年艺术重焕光彩。</p>
                            <a href="#" class="nav-link" data-page="murals">了解更多 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                    
                    <div class="feature-card fade-in delay-2">
                        <div class="feature-img">
                            <img src="https://images.unsplash.com/photo-1547981609-4b6bf67dbacc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="虚拟体验">
                        </div>
                        <div class="feature-content">
                            <h3>虚拟体验</h3>
                            <p>身临其境的VR技术带你穿越时空,近距离欣赏洞窟艺术,体验千年敦煌的文化魅力。</p>
                            <a href="#" class="nav-link" data-page="caves">了解更多 <i class="fas fa-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="modules">
            <div class="container">
                <h2 class="section-title">探索敦煌文化</h2>
                <div class="module-nav">
                    <div class="module-card nav-link" data-page="caves">
                        <div class="module-icon">
                            <i class="fas fa-mountain"></i>
                        </div>
                        <h3>洞窟探索</h3>
                        <p>虚拟参观敦煌莫高窟、榆林窟等著名洞窟</p>
                    </div>
                    
                    <div class="module-card nav-link" data-page="murals">
                        <div class="module-icon">
                            <i class="fas fa-paint-brush"></i>
                        </div>
                        <h3>壁画艺术</h3>
                        <p>欣赏千年壁画艺术,了解其历史背景</p>
                    </div>
                    
                    <div class="module-card nav-link" data-page="relics">
                        <div class="module-icon">
                            <i class="fas fa-history"></i>
                        </div>
                        <h3>文物数字</h3>
                        <p>数字化展示敦煌珍贵文物及文献</p>
                    </div>
                    
                    <div class="module-card nav-link" data-page="research">
                        <div class="module-icon">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <h3>学术研究</h3>
                        <p>敦煌学研究文献与最新成果</p>
                    </div>
                    
                    <div class="module-card nav-link" data-page="exhibitions">
                        <div class="module-icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <h3>展览活动</h3>
                        <p>国内外敦煌主题展览与文化活动</p>
                    </div>
                    
                    <div class="module-card nav-link" data-page="search">
                        <div class="module-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h3>搜索洞窟</h3>
                        <p>快速查找特定洞窟信息</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div id="caves" class="page">
        <div class="container">
            <div class="virtual-tour">
                <h2 class="section-title">洞窟虚拟探索</h2>
                
                <div class="tour-container">
                    <div class="tour-viewer">
                        <div id="cave-viewer"></div>
                        <div class="tour-controls">
                            <button id="rotate-left"><i class="fas fa-undo"></i></button>
                            <button id="rotate-right"><i class="fas fa-redo"></i></button>
                            <button id="zoom-in"><i class="fas fa-search-plus"></i></button>
                            <button id="zoom-out"><i class="fas fa-search-minus"></i></button>
                        </div>
                    </div>
                    
                    <div class="tour-info">
                        <h2>莫高窟第45窟</h2>
                        <p>莫高窟第45窟开凿于盛唐时期,是敦煌石窟中的代表性洞窟之一。此窟为覆斗形顶,西壁开一龛,龛内塑像保存完好,是莫高窟彩塑艺术的杰作。</p>
                        <p>洞窟内共有七身塑像,包括佛、弟子、菩萨、天王。主尊佛像结跏趺坐,神态庄严;两侧弟子一老一少,神态各异;菩萨体态婀娜,衣饰华丽;天王威武雄壮,气势非凡。</p>
                        <p>壁画内容十分丰富,包括观无量寿经变、法华经变等经变画,以及千佛、飞天等图案。南壁绘制的观音经变是敦煌壁画中的精品,场面宏大,人物众多。</p>
                        
                        <h3>其他洞窟</h3>
                        <div class="cave-list">
                            <div class="cave-item active">莫高窟45</div>
                            <div class="cave-item">莫高窟57</div>
                            <div class="cave-item">莫高窟220</div>
                            <div class="cave-item">莫高窟158</div>
                            <div class="cave-item">榆林窟25</div>
                            <div class="cave-item">榆林窟3</div>
                            <div class="cave-item">西千佛洞9</div>
                            <div class="cave-item">莫高窟217</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="murals" class="page">
        <div class="container">
            <div class="gallery-section">
                <h2 class="section-title">敦煌壁画艺术</h2>
                <p class="section-subtitle" style="text-align: center; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; color: var(--text-medium);">
                    敦煌壁画是敦煌艺术的主要组成部分,规模巨大,技艺精湛。内容丰富多彩,有佛像、佛教故事、佛教史迹、经变、神怪、供养人、装饰图案等题材,是十六国至清代等十多个朝代的艺术瑰宝。
                </p>
                
                <div class="gallery-container">
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1596541223130-8a3d4c79d6a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="飞天壁画">
                        <div class="gallery-overlay">
                            <h3>飞天壁画</h3>
                            <p>莫高窟第320窟 盛唐</p>
                            <a href="#" class="btn btn-outline">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1588416473588-9ea815a3e6d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="佛经故事">
                        <div class="gallery-overlay">
                            <h3>佛经故事画</h3>
                            <p>莫高窟第257窟 北魏</p>
                            <a href="#" class="btn btn-outline">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1547981609-4b6bf67dbacc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="供养人像">
                        <div class="gallery-overlay">
                            <h3>供养人画像</h3>
                            <p>莫高窟第98窟 五代</p>
                            <a href="#" class="btn btn-outline">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1596541223130-8a3d4c79d6a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="西方净土变">
                        <div class="gallery-overlay">
                            <h3>西方净土变</h3>
                            <p>莫高窟第220窟 初唐</p>
                            <a href="#" class="btn btn-outline">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1588416473588-9ea815a3e6d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="反弹琵琶">
                        <div class="gallery-overlay">
                            <h3>反弹琵琶</h3>
                            <p>莫高窟第112窟 中唐</p>
                            <a href="#" class="btn btn-outline">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="gallery-item">
                        <img src="https://images.unsplash.com/photo-1547981609-4b6bf67dbacc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="千手观音">
                        <div class="gallery-overlay">
                            <h3>千手观音</h3>
                            <p>莫高窟第3窟 元代</p>
                            <a href="#" class="btn btn-outline">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="relics" class="page">
        <div class="container">
            <div class="relics-section">
                <h2 class="section-title">敦煌文物数字化</h2>
                <p class="section-subtitle" style="text-align: center; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; color: var(--text-medium);">
                    敦煌文物数字化项目通过先进技术手段,对敦煌石窟中的珍贵文物进行高精度数字化采集,建立永久性数字档案,实现文物的永久保存和共享。
                </p>
                
                <div class="relics-container">
                    <div class="relic-card fade-in">
                        <div class="relic-img">
                            <img src="https://images.unsplash.com/photo-1601992688418-8e228d5e9c1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="敦煌文书">
                        </div>
                        <div class="relic-content">
                            <h3>敦煌文书</h3>
                            <div class="date">唐代 · 公元8世纪</div>
                            <p>藏经洞出土的5万余件古代文献,包括佛经、道经、儒家经典、史籍、诗词、契约等,是研究中国古代社会、宗教、文化的珍贵资料。</p>
                            <a href="#" class="btn">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="relic-card fade-in delay-1">
                        <div class="relic-img">
                            <img src="https://images.unsplash.com/photo-1588416473588-9ea815a3e6d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="彩塑艺术">
                        </div>
                        <div class="relic-content">
                            <h3>彩塑艺术</h3>
                            <div class="date">盛唐 · 公元8世纪</div>
                            <p>敦煌石窟中保存有2000余身彩塑,展现了从十六国到元代千余年间彩塑艺术的发展演变,具有极高的艺术价值和历史价值。</p>
                            <a href="#" class="btn">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="relic-card fade-in delay-2">
                        <div class="relic-img">
                            <img src="https://images.unsplash.com/photo-1547981609-4b6bf67dbacc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80" alt="丝路遗珍">
                        </div>
                        <div class="relic-content">
                            <h3>丝路遗珍</h3>
                            <div class="date">南北朝至元代 · 5-14世纪</div>
                            <p>敦煌作为丝绸之路重镇,出土了大量反映中西文化交流的珍贵文物,包括丝绸、铜器、金银器、玻璃器等,见证了古代丝绸之路的繁荣。</p>
                            <a href="#" class="btn">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="search" class="page">
        <div class="search-section">
            <div class="container">
                <div class="search-container-large">
                    <h2>搜索秦腔剧目与元素</h2>
                    <p>输入剧目名称,经典角色或相关关键词,快速查找您感兴趣的秦腔文化内容</p>
                    
                    <div class="search-box">
                        <input type="text" id="search-input" placeholder="输入剧目名称或角色名(如:<三滴血>,周仁)">
                        <button id="search-btn">搜索 <i class="fas fa-search"></i></button>
                    </div>
                    
                    <div class="search-tags">
                        <div class="search-tag">三滴血</div>
                        <div class="search-tag">火焰驹</div>
                        <div class="search-tag">铡美案</div>
                        <div class="search-tag">秦香莲</div>
                        <div class="search-tag">陈世美</div>
                        <div class="search-tag">周仁</div>
                        <div class="search-tag">李三娘</div>
                        <div class="search-tag">黑虎坐台</div>
                    </div>
                    
                    <div class="search-results">
                        <h3>搜索结果</h3>
                        <div class="result-grid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3>关于数字敦煌</h3>
                    <p>数字敦煌项目致力于利用先进数字技术,永久保存敦煌石窟珍贵文物信息,并通过互联网向全球共享敦煌艺术,促进敦煌文化遗产的保护、研究与弘扬。</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                
                <div class="footer-col">
                    <h3>快速链接</h3>
                    <ul class="footer-links">
                        <li><a href="#" class="nav-link" data-page="home"><i class="fas fa-chevron-right"></i> 首页</a></li>
                        <li><a href="#" class="nav-link" data-page="caves"><i class="fas fa-chevron-right"></i> 剧目探索</a></li>
                        <li><a href="#" class="nav-link" data-page="murals"><i class="fas fa-chevron-right"></i> 扮相艺术</a></li>
                        <li><a href="#" class="nav-link" data-page="relics"><i class="fas fa-chevron-right"></i> 道具数字</a></li>
                        <li><a href="#" class="nav-link" data-page="search"><i class="fas fa-chevron-right"></i> 搜索剧目</a></li>
                    </ul>
                </div>
                
                <div class="footer-col">
                    <h3>联系方式</h3>
                    <ul class="footer-links">
                        <li><a href="#"><i class="fas fa-map-marker-alt"></i> 石家庄邮电职业技术学院东校区</a></li>
                        <li><a href="#"><i class="fas fa-phone-alt"></i> 0311-85998903</a></li>
                        <li><a href="#"><i class="fas fa-envelope"></i> info@qinqiang.com</a></li>
                        <li><a href="#"><i class="fas fa-clock"></i> 周一至周五 8:30-17:30</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="copyright">
                <p>&copy; 石家庄市邮电职业技术学院 版权所有 | ICP备案号:陇ICP备12345678号</p>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const pages = document.querySelectorAll('.page');
            const navLinks = document.querySelectorAll('.nav-link');
            
            showPage('home');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const pageId = this.getAttribute('data-page');
                    showPage(pageId);
                    navLinks.forEach(link => link.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            function showPage(pageId) {
                pages.forEach(page => page.classList.remove('active'));
                document.getElementById(pageId).classList.add('active');
                window.scrollTo(0, 0);
                if (pageId === 'caves') initThreeJS();
                if (pageId === 'search') initSearchPage();
            }
            
            const musicControl = document.querySelector('.music-control');
            const musicPlayer = document.getElementById('background-music');
            let musicPlaying = false;
            
            musicControl.addEventListener('click', function() {
                if (musicPlaying) {
                    musicPlayer.pause();
                    musicControl.innerHTML = '<i class="fas fa-music"></i>';
                } else {
                    musicControl.innerHTML = '<i class="fas fa-pause"></i>';
                }
                musicPlaying = !musicPlaying;
            });
            
            function initSearchPage() {
                const searchInput = document.getElementById('search-input');
                const searchBtn = document.getElementById('search-btn');
                const searchTags = document.querySelectorAll('.search-tag');
                const resultGrid = document.querySelector('.result-grid');
                
                const searchData = [
                    {
                        id: 1,
                        name: "莫高窟第45窟",
                        type: "洞窟",
                        desc: "盛唐时期开凿的代表性洞窟,以保存完好的彩塑群著称",
                        image: "https://images.unsplash.com/photo-1596541223130-8a3d4c79d6a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                    },
                    {
                        id: 2,
                        name: "飞天壁画",
                        type: "壁画",
                        desc: "敦煌艺术的标志性形象,表现佛教中娱乐佛和供养佛的天人",
                        image: "https://images.unsplash.com/photo-1588416473588-9ea815a3e6d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                    },
                    {
                        id: 3,
                        name: "榆林窟第25窟",
                        type: "洞窟",
                        desc: "唐代代表洞窟,以精美的壁画和完整的建筑结构闻名",
                        image: "https://images.unsplash.com/photo-1547981609-4b6bf67dbacc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                    },
                    {
                        id: 4,
                        name: "反弹琵琶",
                        type: "壁画",
                        desc: "敦煌壁画中的经典形象,出自莫高窟第112窟《观无量寿经变》",
                        image: "https://images.unsplash.com/photo-1596541223130-8a3d4c79d6a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                    },
                    {
                        id: 5,
                        name: "藏经洞文物",
                        type: "文物",
                        desc: "莫高窟第17窟发现的5万余件古代文献和艺术品",
                        image: "https://images.unsplash.com/photo-1601992688418-8e228d5e9c1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                    },
                    {
                        id: 6,
                        name: "千手观音像",
                        type: "壁画",
                        desc: "莫高窟第3窟元代绘制的千手千眼观音像,是敦煌晚期壁画的杰作",
                        image: "https://images.unsplash.com/photo-1547981609-4b6bf67dbacc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
                    }
                ];
                
                searchBtn.addEventListener('click', function() {
                    performSearch(searchInput.value.trim());
                });
                
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') performSearch(searchInput.value.trim());
                });
                
                searchTags.forEach(tag => {
                    tag.addEventListener('click', function() {
                        searchInput.value = this.textContent;
                        performSearch(this.textContent);
                    });
                });
                
                function performSearch(term) {
                    const results = searchData.filter(item => 
                        item.name.toLowerCase().includes(term.toLowerCase()) || 
                        item.desc.toLowerCase().includes(term.toLowerCase())
                    );
                    displayResults(results);
                }
                
                function displayResults(results) {
                    resultGrid.innerHTML = '';
                    if (results.length === 0) {
                        resultGrid.innerHTML = '<p class="no-results">没有找到匹配的结果</p>';
                        return;
                    }
                    results.forEach(item => {
                        const card = document.createElement('div');
                        card.className = 'result-card fade-in';
                        card.innerHTML = `
                            <div class="result-img">
                                <img src="${item.image}" alt="${item.name}">
                            </div>
                            <div class="result-content">
                                <span class="type">${item.type}</span>
                                <h3>${item.name}</h3>
                                <p>${item.desc}</p>
                                <a href="#" class="btn">查看详情</a>
                            </div>
                        `;
                        resultGrid.appendChild(card);
                    });
                }
            }
            
            const headerSearchBtn = document.getElementById('header-search-btn');
            const headerSearchInput = document.getElementById('header-search');
            
            headerSearchBtn.addEventListener('click', function() {
                const term = headerSearchInput.value.trim();
                if (term) {
                    showPage('search');
                    setTimeout(() => {
                        const searchInput = document.getElementById('search-input');
                        if (searchInput) {
                            searchInput.value = term;
                            document.getElementById('search-btn').click();
                        }
                    }, 100);
                }
            });
            
            function initThreeJS() {
                const scene = new THREE.Scene();
                scene.background = new THREE.Color(0x2c1a0f);
                
                const camera = new THREE.PerspectiveCamera(75, 
                    document.getElementById('cave-viewer').clientWidth / 
                    document.getElementById('cave-viewer').clientHeight, 
                    0.1, 1000);
                camera.position.z = 5;
                
                const renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setSize(
                    document.getElementById('cave-viewer').clientWidth,
                    document.getElementById('cave-viewer').clientHeight
                );
                document.getElementById('cave-viewer').appendChild(renderer.domElement);
                
                const controls = new THREE.OrbitControls(camera, renderer.domElement);
                controls.enableDamping = true;
                controls.dampingFactor = 0.05;
                
                const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
                scene.add(ambientLight);
                
                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
                directionalLight.position.set(5, 5, 5);
                scene.add(directionalLight);
                
                const caveGeometry = new THREE.SphereGeometry(4, 32, 32);
                const caveMaterial = new THREE.MeshStandardMaterial({ 
                    color: 0xc9b18a,
                    wireframe: false,
                    roughness: 0.8,
                    metalness: 0.2
                });
                const cave = new THREE.Mesh(caveGeometry, caveMaterial);
                scene.add(cave);
                
                const muralTexture = new THREE.TextureLoader().load('https://images.unsplash.com/photo-1588416473588-9ea815a3e6d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80');
                const muralMaterial = new THREE.MeshStandardMaterial({ 
                    map: muralTexture,
                    side: THREE.DoubleSide
                });
                const muralGeometry = new THREE.PlaneGeometry(2, 2);
                const mural = new THREE.Mesh(muralGeometry, muralMaterial);
                mural.position.set(0, 0, 3.9);
                scene.add(mural);
                
                document.getElementById('rotate-left').addEventListener('click', () => cave.rotation.y += 0.2);
                document.getElementById('rotate-right').addEventListener('click', () => cave.rotation.y -= 0.2);
                document.getElementById('zoom-in').addEventListener('click', () => camera.position.z = Math.max(2, camera.position.z - 0.5));
                document.getElementById('zoom-out').addEventListener('click', () => camera.position.z = Math.min(10, camera.position.z + 0.5));
                
                function animate() {
                    requestAnimationFrame(animate);
                    controls.update();
                    renderer.render(scene, camera);
                }
                animate();
                
                window.addEventListener('resize', () => {
                    camera.aspect = document.getElementById('cave-viewer').clientWidth / 
                                    document.getElementById('cave-viewer').clientHeight;
                    camera.updateProjectionMatrix();
                    renderer.setSize(
                        document.getElementById('cave-viewer').clientWidth,
                        document.getElementById('cave-viewer').clientHeight
                    );
                });
            }
        });
    </script>
</body>
</html>