Spaces:
Running
Running
| <html lang="zh"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>团课展示汇报</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background-color: #f0f0f0; | |
| margin: 0; | |
| padding: 0; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 50px auto; | |
| padding: 20px; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 0 30px rgba(0,0,0,0.3); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .page { | |
| display: none; /* 隐藏所有页面 */ | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| } | |
| .page.active { | |
| display: block; /* 仅显示活动页面 */ | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| h1 { | |
| color: #c0392b; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| animation: fadeIn 0.8s forwards; | |
| } | |
| p, ul, ol { | |
| line-height: 1.6; | |
| font-size: 1.1em; | |
| margin-bottom: 15px; | |
| animation: slideIn 0.8s forwards; | |
| } | |
| button { | |
| margin-top: 20px; | |
| padding: 10px 20px; | |
| border: none; | |
| background-color: #c0392b; | |
| color: white; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| transition: background-color 0.3s, transform 0.3s; | |
| } | |
| button:hover { | |
| background-color: #a52a2a; | |
| transform: scale(1.05); | |
| } | |
| .footer { | |
| text-align: center; | |
| margin-top: 30px; | |
| font-size: 0.9em; | |
| color: #777; | |
| } | |
| /* 动画效果 */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(20px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="page" id="page1" class="active"> | |
| <h1>团课展示汇报</h1> | |
| <p>欢迎大家来到本次团课展示汇报。在这里，我们将一起回顾我们团体的成长历程、所取得的成就以及未来的计划。</p> | |
| <button onclick="nextPage(2)">下一页</button> | |
| </div> | |
| <div class="page" id="page2"> | |
| <h1>团队背景</h1> | |
| <p>我们的团队成立于2022年，旨在通过团体合作、互帮互助，实现共同的学习与成长。</p> | |
| <p>团队成员来自不同的背景和领域，但我们都有一个共同的目标：提升个人能力，增强团队协作。</p> | |
| <button onclick="nextPage(3)">下一页</button> | |
| <button onclick="prevPage(1)">上一页</button> | |
| </div> | |
| <div class="page" id="page3"> | |
| <h1>所取得的成就</h1> | |
| <ul> | |
| <li>成功举办了多次团体活动，包括团队建设、知识分享和志愿服务等。</li> | |
| <li>提升了成员的沟通能力和团队协作能力，收到了积极的反馈。</li> | |
| <li>在各类比赛中获得了优异的成绩，增强了团队的凝聚力和信任感。</li> | |
| </ul> | |
| <button onclick="nextPage(4)">下一页</button> | |
| <button onclick="prevPage(2)">上一页</button> | |
| </div> | |
| <div class="page" id="page4"> | |
| <h1>未来计划</h1> | |
| <p>为了继续提升团队的整体素质，我们计划：</p> | |
| <ol> | |
| <li>定期举办团队培训和工作坊，邀请行业专家进行分享。</li> | |
| <li>加强团队之间的交流与合作，分享成功经验和教训。</li> | |
| <li>参与更多的社会公益活动，提升团队的社会责任感。</li> | |
| </ol> | |
| <button onclick="nextPage(5)">下一页</button> | |
| <button onclick="prevPage(3)">上一页</button> | |
| </div> | |
| <div class="page" id="page5"> | |
| <h1>团队文化</h1> | |
| <p>我们的团队文化强调开放、包容和创新。我们鼓励每位成员分享自己的观点和创意，推动团队不断进步。</p> | |
| <p>我们相信，只有在互相支持和理解的环境中，才能激发出每个人的潜力，实现更大的成就。</p> | |
| <button onclick="nextPage(6)">下一页</button> | |
| <button onclick="prevPage(4)">上一页</button> | |
| </div> | |
| <div class="page" id="page6"> | |
| <h1>成功案例</h1> | |
| <p>在过去的一年里，我们完成了一些重要项目：</p> | |
| <ul> | |
| <li><strong>项目A：</strong>成功举办了一次大型的文化活动，吸引了超过500名参与者。</li> | |
| <li><strong>项目B：</strong>开展了针对青少年的公益培训，帮助了30名学生提升技能。</li> | |
| <li><strong>项目C：</strong>与其他组织合作，共同开展环境保护活动，得到了社会的广泛认可。</li> | |
| </ul> | |
| <button onclick="prevPage(5)">上一页</button> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>© 2024 团队展示</p> | |
| </div> | |
| <script> | |
| let currentPage = 1; | |
| showPage(currentPage); | |
| function showPage(page) { | |
| const pages = document.querySelectorAll('.page'); | |
| pages.forEach(p => { | |
| p.classList.remove('active'); // 隐藏所有页面 | |
| }); | |
| const activePage = document.getElementById(`page${page}`); | |
| activePage.classList.add('active'); // 显示当前页面 | |
| } | |
| function nextPage(page) { | |
| currentPage = page; | |
| showPage(currentPage); | |
| } | |
| function prevPage(page) { | |
| currentPage = page; | |
| showPage(currentPage); | |
| } | |
| </script> | |
| </body> | |
| </html> | |