Spaces:
Running
Running
| <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.0.0-beta3/css/all.min.css"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: #f8f5f0; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 40px 20px; | |
| background: linear-gradient(135deg, #d4b996 0%, #a67c52 100%); | |
| color: #fff; | |
| border-radius: 0 0 20px 20px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| margin-bottom: 30px; | |
| } | |
| h1 { | |
| font-size: 2.8rem; | |
| letter-spacing: 2px; | |
| margin-bottom: 15px; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.2); | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| opacity: 0.9; | |
| } | |
| .tabs { | |
| display: flex; | |
| justify-content: center; | |
| margin: 30px 0; | |
| flex-wrap: wrap; | |
| } | |
| .tab { | |
| padding: 12px 25px; | |
| margin: 5px 10px; | |
| background: #e9e0d5; | |
| border: none; | |
| border-radius: 30px; | |
| cursor: pointer; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| color: #5d4037; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
| } | |
| .tab:hover, .tab.active { | |
| background: #a67c52; | |
| color: white; | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.15); | |
| } | |
| .gallery { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 25px; | |
| margin-top: 20px; | |
| } | |
| .gallery-item { | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.08); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| cursor: pointer; | |
| } | |
| .gallery-item:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 12px 20px rgba(0,0,0,0.15); | |
| } | |
| .image-container { | |
| position: relative; | |
| width: 100%; | |
| padding-top: 100%; /* 1:1 Aspect Ratio */ | |
| overflow: hidden; | |
| } | |
| .image-container img { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s ease; | |
| } | |
| .gallery-item:hover img { | |
| transform: scale(1.05); | |
| } | |
| .caption { | |
| padding: 15px 10px; | |
| text-align: center; | |
| font-size: 0.95rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| color: #5d4037; | |
| background: white; | |
| font-weight: 500; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.9); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| max-width: 90%; | |
| max-height: 90%; | |
| position: relative; | |
| } | |
| .modal img { | |
| max-width: 100%; | |
| max-height: 80vh; | |
| border-radius: 8px; | |
| box-shadow: 0 5px 25px rgba(0,0,0,0.5); | |
| } | |
| .modal-text { | |
| color: white; | |
| text-align: center; | |
| padding: 15px 0; | |
| font-size: 1.1rem; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .close { | |
| position: absolute; | |
| top: 20px; | |
| right: 30px; | |
| color: white; | |
| font-size: 40px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: color 0.3s; | |
| } | |
| .close:hover { | |
| color: #d4b996; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 30px; | |
| margin-top: 40px; | |
| color: #7a6a5a; | |
| font-size: 0.9rem; | |
| border-top: 1px solid #e0d6c9; | |
| } | |
| @media (max-width: 768px) { | |
| .gallery { | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 15px; | |
| } | |
| h1 { | |
| font-size: 2.2rem; | |
| } | |
| .tab { | |
| padding: 10px 15px; | |
| font-size: 1rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .gallery { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| h1 { | |
| font-size: 1.8rem; | |
| } | |
| .tabs { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .tab { | |
| width: 80%; | |
| margin: 5px 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <h1>黎锦纹藏</h1> | |
| <p class="subtitle">探索黎族五大方言区的独特纹样与文化传承</p> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <div class="tabs"> | |
| <button class="tab active" data-tab="ha">哈方言</button> | |
| <button class="tab" data-tab="qi">杞方言</button> | |
| <button class="tab" data-tab="run">润方言</button> | |
| <button class="tab" data-tab="sai">赛方言</button> | |
| <button class="tab" data-tab="meifu">美孚方言</button> | |
| </div> | |
| <div class="gallery" id="ha-gallery"> | |
| <!-- 哈方言内容 --> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha1.jpg" alt="哈方言纹样1"> | |
| </div> | |
| <div class="caption">哈方言传统几何纹样，象征大地与丰收</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha2.jpg" alt="哈方言纹样2"> | |
| </div> | |
| <div class="caption">哈方言特色人形纹，表达祖先崇拜</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha3.jpg" alt="哈方言纹样3"> | |
| </div> | |
| <div class="caption">哈方言植物纹样，描绘热带雨林植物</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha4.jpg" alt="哈方言纹样4"> | |
| </div> | |
| <div class="caption">哈方言动物纹样，代表当地特有动物</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha5.jpg" alt="哈方言纹样5"> | |
| </div> | |
| <div class="caption">哈方言祭祀纹样，用于宗教仪式</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha6.jpg" alt="哈方言纹样6"> | |
| </div> | |
| <div class="caption">哈方言祭祀纹样，用于宗教仪式</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha7.jpg" alt="哈方言纹样7"> | |
| </div> | |
| <div class="caption">哈方言祭祀纹样，用于宗教仪式</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha8.jpg" alt="哈方言纹样8"> | |
| </div> | |
| <div class="caption">哈方言祭祀纹样，用于宗教仪式</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha9.jpg" alt="哈方言纹样9"> | |
| </div> | |
| <div class="caption">哈方言祭祀纹样，用于宗教仪式</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/ha/ha10.jpg" alt="哈方言纹样10"> | |
| </div> | |
| <div class="caption">哈方言祭祀纹样，用于宗教仪式</div> | |
| </div> | |
| </div> | |
| <div class="gallery" id="qi-gallery" style="display:none;"> | |
| <!-- 杞方言内容 --> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi1.jpg" alt="杞方言纹样1"> | |
| </div> | |
| <div class="caption">杞方言水波纹，象征河流与生命</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi2.jpg" alt="杞方言纹样2"> | |
| </div> | |
| <div class="caption">杞方言太阳纹，代表光明与希望</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi3.jpg" alt="杞方言纹样3"> | |
| </div> | |
| <div class="caption">杞方言菱形纹，表达天地和谐</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi4.jpg" alt="杞方言纹样4"> | |
| </div> | |
| <div class="caption">杞方言鱼纹，象征丰收与富足</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi5.jpg" alt="杞方言纹样5"> | |
| </div> | |
| <div class="caption">杞方言蝴蝶纹，代表美丽与蜕变</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi6.jpg" alt="杞方言纹样6"> | |
| </div> | |
| <div class="caption">杞方言蝴蝶纹，代表美丽与蜕变</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi7.jpg" alt="杞方言纹样7"> | |
| </div> | |
| <div class="caption">杞方言蝴蝶纹，代表美丽与蜕变</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi8.jpg" alt="杞方言纹样8"> | |
| </div> | |
| <div class="caption">杞方言蝴蝶纹，代表美丽与蜕变</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi9.jpg" alt="杞方言纹样9"> | |
| </div> | |
| <div class="caption">杞方言蝴蝶纹，代表美丽与蜕变</div> | |
| </div> | |
| <div class="gallery-item"> | |
| <div class="image-container"> | |
| <img src="images/qi/qi10.jpg" alt="杞方言纹样10"> | |
| </div> | |
| <div class="caption">杞方言蝴蝶纹，代表美丽与蜕变</div> | |
| </div> | |
| </div> | |
| <!-- 其他方言区类似，为节省篇幅省略 --> | |
| </div> | |
| <div id="imageModal" class="modal"> | |
| <span class="close">×</span> | |
| <div class="modal-content"> | |
| <img id="expandedImg" src="" alt="Expanded Image"> | |
| <div class="modal-text" id="imgCaption"></div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="container"> | |
| <p>黎锦纹藏 © 2023 - 传承黎族非物质文化遗产</p> | |
| <p>哈方言 | 杞方言 | 润方言 | 赛方言 | 美孚方言</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // 标签切换功能 | |
| const tabs = document.querySelectorAll('.tab'); | |
| const galleries = { | |
| 'ha': document.getElementById('ha-gallery'), | |
| 'qi': document.getElementById('qi-gallery'), | |
| 'run': document.getElementById('run-gallery'), | |
| 'sai': document.getElementById('sai-gallery'), | |
| 'meifu': document.getElementById('meifu-gallery') | |
| }; | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| // 移除所有活动标签 | |
| tabs.forEach(t => t.classList.remove('active')); | |
| // 添加活动类到当前标签 | |
| tab.classList.add('active'); | |
| // 隐藏所有图库 | |
| Object.values(galleries).forEach(gallery => { | |
| if(gallery) gallery.style.display = 'none'; | |
| }); | |
| // 显示当前图库 | |
| const tabId = tab.getAttribute('data-tab'); | |
| if(galleries[tabId]) { | |
| galleries[tabId].style.display = 'grid'; | |
| } | |
| }); | |
| }); | |
| // 图片模态框功能 | |
| const modal = document.getElementById('imageModal'); | |
| const expandedImg = document.getElementById('expandedImg'); | |
| const imgCaption = document.getElementById('imgCaption'); | |
| document.querySelectorAll('.gallery-item').forEach(item => { | |
| item.addEventListener('click', function() { | |
| const imgSrc = this.querySelector('img').src; | |
| const captionText = this.querySelector('.caption').textContent; | |
| expandedImg.src = imgSrc; | |
| imgCaption.textContent = captionText; | |
| modal.style.display = 'flex'; | |
| }); | |
| }); | |
| // 关闭模态框 | |
| document.querySelector('.close').addEventListener('click', () => { | |
| modal.style.display = 'none'; | |
| }); | |
| // 点击模态框背景关闭 | |
| modal.addEventListener('click', (e) => { | |
| if(e.target === modal) { | |
| modal.style.display = 'none'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |