Spaces:
Paused
Paused
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>和平 - Peace</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #e6f7ff 0%, #f0f9ff 100%); | |
| color: #333; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| header { | |
| background-color: rgba(255, 255, 255, 0.9); | |
| padding: 1rem 2rem; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .dove-icon { | |
| font-size: 2rem; | |
| color: #4a90e2; | |
| } | |
| h1 { | |
| font-size: 1.8rem; | |
| color: #2c3e50; | |
| } | |
| .lang-switch { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .lang-btn { | |
| padding: 8px 15px; | |
| border: none; | |
| border-radius: 20px; | |
| background-color: #f1f8ff; | |
| color: #4a90e2; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .lang-btn.active { | |
| background-color: #4a90e2; | |
| color: white; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M50,20 C60,20 70,30 70,40 C70,50 60,60 50,60 C40,60 30,50 30,40 C30,30 40,20 50,20 Z" fill="none" stroke="%234a90e2" stroke-width="2"/><path d="M40,35 L45,40 L60,25" fill="none" stroke="%234a90e2" stroke-width="2"/></svg>'); | |
| background-size: 200px; | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .hero h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1.5rem; | |
| color: #2c3e50; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2rem; | |
| color: #555; | |
| } | |
| .content-section { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 3rem 2rem; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| color: #2c3e50; | |
| position: relative; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| display: block; | |
| width: 80px; | |
| height: 3px; | |
| background-color: #4a90e2; | |
| margin: 10px auto; | |
| } | |
| .cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: 10px; | |
| padding: 2rem; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .card-icon { | |
| font-size: 2.5rem; | |
| color: #4a90e2; | |
| margin-bottom: 1rem; | |
| } | |
| .card h3 { | |
| margin-bottom: 1rem; | |
| color: #2c3e50; | |
| } | |
| .quote-section { | |
| background-color: #4a90e2; | |
| color: white; | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| } | |
| .quote { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| font-size: 1.5rem; | |
| font-style: italic; | |
| } | |
| .quote-author { | |
| margin-top: 1rem; | |
| font-weight: bold; | |
| } | |
| .action-section { | |
| text-align: center; | |
| padding: 3rem 2rem; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| padding: 12px 30px; | |
| background-color: #4a90e2; | |
| color: white; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| border: 2px solid #4a90e2; | |
| } | |
| .cta-button:hover { | |
| background-color: white; | |
| color: #4a90e2; | |
| } | |
| footer { | |
| background-color: #2c3e50; | |
| color: white; | |
| text-align: center; | |
| padding: 2rem; | |
| margin-top: auto; | |
| } | |
| .footer-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| /* 语言切换样式 */ | |
| .lang-en { | |
| display: none; | |
| } | |
| /* 响应式设计 */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .hero h2 { | |
| font-size: 2rem; | |
| } | |
| .cards { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <div class="dove-icon">🕊️</div> | |
| <h1 class="lang-zh">和平</h1> | |
| <h1 class="lang-en">Peace</h1> | |
| </div> | |
| <div class="lang-switch"> | |
| <button class="lang-btn active" data-lang="zh">中文</button> | |
| <button class="lang-btn" data-lang="en">English</button> | |
| </div> | |
| </div> | |
| </header> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h2 class="lang-zh">和平 - 人类共同的梦想</h2> | |
| <h2 class="lang-en">Peace - A Shared Dream of Humanity</h2> | |
| <p class="lang-zh">和平不仅仅是没有战争，更是人类尊严、合作与繁荣的基石。</p> | |
| <p class="lang-en">Peace is not just the absence of war, but the foundation of human dignity, cooperation, and prosperity.</p> | |
| </div> | |
| </section> | |
| <section class="content-section"> | |
| <h2 class="section-title lang-zh">和平的重要性</h2> | |
| <h2 class="section-title lang-en">The Importance of Peace</h2> | |
| <div class="cards"> | |
| <div class="card"> | |
| <div class="card-icon">🌍</div> | |
| <h3 class="lang-zh">全球稳定</h3> | |
| <h3 class="lang-en">Global Stability</h3> | |
| <p class="lang-zh">和平为各国发展提供了稳定的环境，促进经济增长和文化交流。</p> | |
| <p class="lang-en">Peace provides a stable environment for national development, promoting economic growth and cultural exchange.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">👨👩👧👦</div> | |
| <h3 class="lang-zh">人类福祉</h3> | |
| <h3 class="lang-en">Human Well-being</h3> | |
| <p class="lang-zh">在和平的环境中，人们能够追求教育、健康和幸福生活。</p> | |
| <p class="lang-en">In peaceful environments, people can pursue education, health, and a happy life.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">🌱</div> | |
| <h3 class="lang-zh">可持续发展</h3> | |
| <h3 class="lang-en">Sustainable Development</h3> | |
| <p class="lang-zh">和平是实现可持续发展目标的前提，确保资源的公平分配。</p> | |
| <p class="lang-en">Peace is a prerequisite for achieving sustainable development goals, ensuring equitable distribution of resources.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="quote-section"> | |
| <div class="quote lang-zh"> | |
| "和平不能靠武力来维持，它只能通过理解来实现。" | |
| </div> | |
| <div class="quote lang-en"> | |
| "Peace cannot be kept by force; it can only be achieved by understanding." | |
| </div> | |
| <div class="quote-author lang-zh">- 阿尔伯特·爱因斯坦</div> | |
| <div class="quote-author lang-en">- Albert Einstein</div> | |
| </section> | |
| <section class="content-section"> | |
| <h2 class="section-title lang-zh">如何促进和平</h2> | |
| <h2 class="section-title lang-en">How to Promote Peace</h2> | |
| <div class="cards"> | |
| <div class="card"> | |
| <div class="card-icon">🤝</div> | |
| <h3 class="lang-zh">对话与理解</h3> | |
| <h3 class="lang-en">Dialogue & Understanding</h3> | |
| <p class="lang-zh">通过跨文化对话增进相互理解，减少误解和偏见。</p> | |
| <p class="lang-en">Promote mutual understanding through cross-cultural dialogue to reduce misunderstandings and prejudices.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">📚</div> | |
| <h3 class="lang-zh">和平教育</h3> | |
| <h3 class="lang-en">Peace Education</h3> | |
| <p class="lang-zh">在学校和社区推广和平教育，培养下一代的和平价值观。</p> | |
| <p class="lang-en">Promote peace education in schools and communities to cultivate peace values in the next generation.</p> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">⚖️</div> | |
| <h3 class="lang-zh">公正与平等</h3> | |
| <h3 class="lang-en">Justice & Equality</h3> | |
| <p class="lang-zh">建立公正的社会制度，确保所有人的权利和尊严得到尊重。</p> | |
| <p class="lang-en">Establish just social systems to ensure that everyone's rights and dignity are respected.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="action-section"> | |
| <h2 class="lang-zh" style="margin-bottom: 1.5rem;">加入和平行动</h2> | |
| <h2 class="lang-en" style="margin-bottom: 1.5rem;">Join the Peace Movement</h2> | |
| <p class="lang-zh" style="margin-bottom: 2rem;">每个人都可以为和平做出贡献，从小事做起，从身边做起。</p> | |
| <p class="lang-en" style="margin-bottom: 2rem;">Everyone can contribute to peace, starting with small actions in their own communities.</p> | |
| <a href="#" class="cta-button lang-zh">了解更多</a> | |
| <a href="#" class="cta-button lang-en">Learn More</a> | |
| </section> | |
| <footer> | |
| <div class="footer-content"> | |
| <p class="lang-zh">© 2023 和平倡议 - 共创美好未来</p> | |
| <p class="lang-en">© 2023 Peace Initiative - Creating a Better Future Together</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // 语言切换功能 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const langButtons = document.querySelectorAll('.lang-btn'); | |
| langButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // 移除所有按钮的active类 | |
| langButtons.forEach(btn => btn.classList.remove('active')); | |
| // 为当前点击的按钮添加active类 | |
| this.classList.add('active'); | |
| // 获取选择的语言 | |
| const selectedLang = this.getAttribute('data-lang'); | |
| // 显示/隐藏对应语言的内容 | |
| const zhElements = document.querySelectorAll('.lang-zh'); | |
| const enElements = document.querySelectorAll('.lang-en'); | |
| if (selectedLang === 'zh') { | |
| zhElements.forEach(el => el.style.display = 'block'); | |
| enElements.forEach(el => el.style.display = 'none'); | |
| } else { | |
| zhElements.forEach(el => el.style.display = 'none'); | |
| enElements.forEach(el => el.style.display = 'block'); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |