Update index.html

index.html

@@ -6,10 +6,11 @@
     <title>团课展示汇报</title>
     <style>
         body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
+            font-family: 'Arial', sans-serif;
+            background-color: #f8f8f8;
             margin: 0;
             padding: 0;
+            color: #333;
         }
 
         .container {
@@ -18,38 +19,56 @@
             padding: 20px;
             background: white;
             border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+            box-shadow: 0 0 20px rgba(0,0,0,0.2);
+            overflow: hidden;
         }
 
         .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: #333;
+            color: #c0392b;
+            text-align: center;
+            margin-bottom: 20px;
         }
 
         p, ul, ol {
             line-height: 1.6;
+            font-size: 1.1em;
+            margin-bottom: 15px;
         }
 
         button {
             margin-top: 20px;
-            padding: 10px 15px;
+            padding: 10px 20px;
             border: none;
-            background-color: #5cb85c;
+            background-color: #c0392b;
             color: white;
             cursor: pointer;
             border-radius: 5px;
             font-size: 16px;
+            transition: background-color 0.3s;
         }
 
         button:hover {
-            background-color: #4cae4c;
+            background-color: #a52a2a;
+        }
+
+        .footer {
+            text-align: center;
+            margin-top: 30px;
+            font-size: 0.9em;
+            color: #777;
         }
     </style>
 </head>
@@ -92,14 +111,21 @@
         </div>
     </div>
 
+    <div class="footer">
+        <p>&copy; 2024 团队展示</p>
+    </div>
+
     <script>
         let currentPage = 1;
         showPage(currentPage);
 
         function showPage(page) {
             const pages = document.querySelectorAll('.page');
-            pages.forEach(p => p.classList.remove('active')); // 隐藏所有页面
-            document.getElementById(`page${page}`).classList.add('active'); // 显示当前页面
+            pages.forEach(p => {
+                p.classList.remove('active'); // 隐藏所有页面
+            });
+            const activePage = document.getElementById(`page${page}`);
+            activePage.classList.add('active'); // 显示当前页面
         }
 
         function nextPage(page) {
@@ -114,4 +140,3 @@
     </script>
 </body>
 </html>
-