Spaces:

mistpe
/

show

Running

App Files Files Community

mistpe commited on Oct 26, 2024

Commit

8381413

verified ·

1 Parent(s): 743c3e6

Update index.html

Browse files

Files changed (1) hide show

index.html +1046 -18

index.html CHANGED Viewed

@@ -1,19 +1,1047 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>团日初绽映初心，菁英思政铸辉煌</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: "Microsoft YaHei", sans-serif;
+            overflow: hidden;
+            background: #fff;
+        }
+        .slide {
+            position: absolute;
+            width: 100vw;
+            height: 100vh;
+            display: none;
+            opacity: 0;
+            transition: opacity 0.8s ease-in-out;
+        }
+        .slide.active {
+            display: flex;
+            opacity: 1;
+            flex-direction: column;
+        }
+        /* 封面页特殊样式 */
+        #cover {
+            background: linear-gradient(135deg, #e74c3c, #c0392b);
+            color: white;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+        }
+        #cover::before {
+            content: '';
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            background: rgba(255,255,255,0.1);
+            transform: translateX(-50%) translateY(-50%) rotate(-45deg);
+            animation: shine 4s infinite linear;
+        }
+        @keyframes shine {
+            0% { transform: translateX(-50%) translateY(-50%) rotate(-45deg); }
+            100% { transform: translateX(50%) translateY(50%) rotate(-45deg); }
+        }
+        #cover h1 {
+            font-size: 5.5vw;
+            font-weight: bold;
+            margin-bottom: 2rem;
+            text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
+            animation: fadeInDown 1.5s ease;
+            position: relative;
+            z-index: 1;
+            letter-spacing: 0.1em;
+            background: linear-gradient(to right, #ffffff, #f8f9fa);
+            -webkit-background-clip: text;
+            color: transparent;
+            text-stroke: 2px rgba(255,255,255,0.5);
+            -webkit-text-stroke: 2px rgba(255,255,255,0.5);
+        }
+        #cover h2 {
+            font-size: 3.5vw;
+            margin-bottom: 4rem;
+            animation: fadeInUp 1.5s ease 0.5s both;
+            position: relative;
+            z-index: 1;
+            letter-spacing: 0.05em;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .presenter {
+            animation: fadeInUp 1.5s ease 1s both;
+            position: relative;
+            z-index: 1;
+            background: rgba(255,255,255,0.1);
+            padding: 2rem 4rem;
+            border-radius: 15px;
+            backdrop-filter: blur(5px);
+        }
+        /* 目录页样式 */
+        #contents {
+            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+            padding: 4rem;
+            position: relative;
+            overflow: hidden;
+        }
+        #contents::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 50% 50%, rgba(231, 76, 60, 0.1) 0%, transparent 70%);
+            animation: pulse 4s infinite;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 0.5; }
+            50% { transform: scale(1.2); opacity: 0.3; }
+            100% { transform: scale(1); opacity: 0.5; }
+        }
+        .content-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 2.5rem;
+            max-width: 1200px;
+            margin: 0 auto;
+            position: relative;
+            z-index: 1;
+            padding: 2rem;
+        }
+        .content-card {
+            background: rgba(255,255,255,0.9);
+            padding: 2rem;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        .content-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), transparent);
+            opacity: 0;
+            transition: opacity 0.4s ease;
+        }
+        .content-card:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
+        }
+        .content-card:hover::before {
+            opacity: 1;
+        }
+        .content-card h3 {
+            font-size: 1.5rem;
+            color: #e74c3c;
+            margin-bottom: 0.5rem;
+        }
+        .content-card p {
+            color: #666;
+            font-size: 1.1rem;
+        }
+        .icon {
+            width: 48px;
+            height: 48px;
+            margin-right: 1.5rem;
+            fill: #e74c3c;
+        }
+        .page-title {
+            font-size: 3rem;
+            color: #e74c3c;
+            margin-bottom: 3rem;
+            text-align: center;
+            font-weight: bold;
+            position: relative;
+            z-index: 1;
+        }
+        .page-title::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100px;
+            height: 3px;
+            background: linear-gradient(to right, #e74c3c, transparent);
+        }
+        @keyframes fadeInDown {
+            from { opacity: 0; transform: translateY(-50px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        @keyframes fadeInUp {
+            from { opacity: 0; transform: translateY(50px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+ /* 开场白页面样式 */
+        .opening-container {
+            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+            padding: 4rem;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+        }
+        .opening-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: radial-gradient(circle at 30% 30%, rgba(231, 76, 60, 0.1) 0%, transparent 70%);
+        }
+        .opening-content {
+            max-width: 1200px;
+            width: 100%;
+            position: relative;
+            z-index: 1;
+        }
+        .quote-card {
+            background: white;
+            padding: 3rem;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            margin: 2rem 0;
+            position: relative;
+            animation: slideIn 1s ease;
+        }
+        .quote-icon {
+            width: 48px;
+            height: 48px;
+            fill: #e74c3c;
+            opacity: 0.2;
+            position: absolute;
+            top: 2rem;
+            left: 2rem;
+        }
+        .opening-text {
+            font-size: 1.2rem;
+            line-height: 2;
+            color: #333;
+            padding-left: 4rem;
+        }
+        .opening-text p {
+            margin-bottom: 1.5rem;
+            text-indent: 2em;
+        }
+        .journey-preview {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 3rem;
+            gap: 2rem;
+        }
+        .journey-item {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            background: rgba(255,255,255,0.9);
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease;
+        }
+        .journey-item:hover {
+            transform: translateY(-5px);
+        }
+        .journey-icon {
+            width: 40px;
+            height: 40px;
+            background: #e74c3c;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 1.2rem;
+            font-weight: bold;
+        }
+        /* 第一次经历页面样式 */
+        .experience-container {
+            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+            padding: 4rem;
+            height: 100%;
+            overflow-y: auto;
+        }
+        .experience-content {
+            max-width: 1000px;
+            margin: 0 auto;
+        }
+        .experience-timeline {
+            position: relative;
+            padding: 2rem 0;
+        }
+        .experience-timeline::before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 2px;
+            height: 100%;
+            background: linear-gradient(to bottom, #e74c3c 0%, rgba(231, 76, 60, 0.3) 100%);
+        }
+        .timeline-item {
+            display: flex;
+            justify-content: flex-end;
+            padding-left: 50%;
+            position: relative;
+            margin: 2rem 0;
+        }
+        .timeline-item:nth-child(odd) {
+            justify-content: flex-start;
+            padding-right: 50%;
+            padding-left: 0;
+        }
+        .timeline-icon {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 40px;
+            height: 40px;
+            background: white;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.2);
+        }
+        .timeline-icon svg {
+            width: 24px;
+            height: 24px;
+            fill: #e74c3c;
+        }
+        .timeline-content {
+            background: white;
+            padding: 1.5rem;
+            border-radius: 15px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            width: 80%;
+            margin: 0 2rem;
+            animation: slideIn 1s ease;
+        }
+        .timeline-content h3 {
+            color: #e74c3c;
+            margin-bottom: 0.5rem;
+            font-size: 1.2rem;
+        }
+        .timeline-item.highlight .timeline-content {
+            background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
+            border: 2px solid rgba(231, 76, 60, 0.2);
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateX(-30px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+    /* 第二次经历页面样式 - 菁英班 */
+    .elite-container {
+        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+        padding: 4rem;
+        height: 100%;
+        overflow-y: auto;
+        position: relative;
+    }
+    .elite-container::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: radial-gradient(circle at 70% 30%, rgba(231, 76, 60, 0.1) 0%, transparent 70%);
+    }
+    .elite-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        position: relative;
+        z-index: 1;
+    }
+    .elite-card {
+        background: white;
+        padding: 2rem;
+        border-radius: 20px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        margin-bottom: 2rem;
+        position: relative;
+        transition: all 0.3s ease;
+    }
+    .elite-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+    }
+    .main-card {
+        background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
+        border: 2px solid rgba(231, 76, 60, 0.2);
+        padding: 3rem;
+        margin-bottom: 3rem;
+    }
+    .elite-icon {
+        width: 48px;
+        height: 48px;
+        fill: #e74c3c;
+        margin-bottom: 1rem;
+    }
+    .elite-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2rem;
+    }
+    .elite-step {
+        width: 40px;
+        height: 40px;
+        background: #e74c3c;
+        color: white;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin-bottom: 1rem;
+    }
+    /* 第三次经历页面样式 - 大舞台 */
+    .competition-container {
+        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+        padding: 4rem;
+        height: 100%;
+        position: relative;
+    }
+    .competition-content {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+    .stage-info {
+        background: white;
+        padding: 3rem;
+        border-radius: 20px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        margin-bottom: 3rem;
+        text-align: center;
+    }
+    .stage-numbers {
+        display: flex;
+        justify-content: center;
+        gap: 4rem;
+        margin-bottom: 2rem;
+    }
+    .number-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .number {
+        font-size: 3rem;
+        font-weight: bold;
+        color: #e74c3c;
+        margin-bottom: 0.5rem;
+    }
+    .label {
+        color: #666;
+        font-size: 1.2rem;
+    }
+    .competition-title {
+        font-size: 1.5rem;
+        color: #333;
+        font-weight: bold;
+    }
+    .journey-stages {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 4rem;
+        position: relative;
+    }
+    .journey-stages::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: linear-gradient(to right, #e74c3c, #e74c3c);
+        z-index: 0;
+    }
+    .stage-card {
+        background: white;
+        padding: 1.5rem;
+        border-radius: 15px;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        position: relative;
+        z-index: 1;
+        flex: 1;
+        margin: 0 1rem;
+        text-align: center;
+        transition: all 0.3s ease;
+    }
+    .stage-card:hover {
+        transform: translateY(-5px);
+    }
+    .stage-card.highlight {
+        background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
+        border: 2px solid rgba(231, 76, 60, 0.2);
+    }
+    /* 能力提升页面样式 */
+    .skills-container {
+        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+        padding: 4rem;
+        height: 100%;
+        position: relative;
+    }
+    .skills-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2rem;
+        max-width: 1200px;
+        margin: 0 auto 3rem auto;
+    }
+    .skill-card {
+        background: white;
+        padding: 2rem;
+        border-radius: 20px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        transition: all 0.3s ease;
+    }
+    .skill-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+    }
+    .skill-icon {
+        width: 48px;
+        height: 48px;
+        fill: #e74c3c;
+        margin-bottom: 1rem;
+    }
+    .team-quote {
+        text-align: center;
+        font-size: 1.5rem;
+        color: #e74c3c;
+        font-style: italic;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 2rem;
+        background: white;
+        border-radius: 20px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    }
+    /* 思政感悟页面样式 */
+    .reflection-container {
+        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
+        padding: 4rem;
+        height: 100%;
+        position: relative;
+    }
+    .reflection-content {
+        max-width: 1000px;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 2rem;
+    }
+    .insight-card, .vision-card {
+        background: white;
+        padding: 2rem;
+        border-radius: 20px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        transition: all 0.3s ease;
+    }
+    .insight-card:hover, .vision-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
+    }
+    .vision-card {
+        grid-column: 1 / -1;
+        background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
+        border: 2px solid rgba(231, 76, 60, 0.2);
+    }
+    /* 结束致谢页面样式 */
+    .thanks-container {
+        background: linear-gradient(135deg, #e74c3c, #c0392b);
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+    }
+    .thanks-container::before {
+        content: '';
+        position: absolute;
+        width: 200%;
+        height: 200%;
+        background: rgba(255,255,255,0.1);
+        transform: translateX(-50%) translateY(-50%) rotate(-45deg);
+        animation: shine 4s infinite linear;
+    }
+    .thanks-content {
+        text-align: center;
+        color: white;
+        position: relative;
+        z-index: 1;
+        padding: 2rem;
+    }
+    .thanks-icon {
+        width: 80px;
+        height: 80px;
+        fill: white;
+        margin-bottom: 2rem;
+        animation: pulse 2s infinite;
+    }
+    .thanks-content h2 {
+        font-size: 4rem;
+        margin-bottom: 2rem;
+        font-weight: bold;
+    }
+    .final-words {
+        font-size: 1.5rem;
+        opacity: 0.9;
+    }
+    @keyframes pulse {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.1); }
+        100% { transform: scale(1); }
+    }
+    </style>
+</head>
+<body>
+    <!-- 封面页 -->
+    <div id="cover" class="slide active">
+        <h1>团日初绽映初心</h1>
+        <h2>菁英思政铸辉煌</h2>
+        <div class="presenter">
+            <p style="font-size: 1.5rem; margin-bottom: 1rem;">讲述人：XXX</p>
+            <p style="font-size: 1.2rem;">XX学院 XX班</p>
+        </div>
+    </div>
+    <!-- 目录页 -->
+    <div id="contents" class="slide">
+        <h2 class="page-title">目 录</h2>
+        <div class="content-grid">
+            <div class="content-card">
+                <svg class="icon" viewBox="0 0 24 24">
+                    <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                </svg>
+                <div>
+                    <h3>开场白</h3>
+                    <p>从听众到分享者的蜕变</p>
+                </div>
+            </div>
+            <div class="content-card">
+                <svg class="icon" viewBox="0 0 24 24">
+                    <path d="M12 14l9-5-9-5-9 5 9 5z"/>
+                    <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
+                </svg>
+                <div>
+                    <h3>三个第一次</h3>
+                    <p>成长历程的重要时刻</p>
+                </div>
+            </div>
+            <div class="content-card">
+                <svg class="icon" viewBox="0 0 24 24">
+                    <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                </svg>
+                <div>
+                    <h3>能力提升</h3>
+                    <p>团支书的能力培养</p>
+                </div>
+            </div>
+            <div class="content-card">
+                <svg class="icon" viewBox="0 0 24 24">
+                    <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+                </svg>
+                <div>
+                    <h3>思政感悟</h3>
+                    <p>教育体会与未来展望</p>
+                </div>
+            </div>
+        </div>
+    </div>
+<!-- 开场白页面 -->
+    <div id="opening" class="slide">
+        <div class="opening-container">
+            <div class="opening-content">
+                <h2 class="page-title">开场白</h2>
+                <div class="quote-card">
+                    <svg class="quote-icon" viewBox="0 0 24 24">
+                        <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
+                    </svg>
+                    <div class="opening-text">
+                        <p>尊敬的各位领导、老师，亲爱的同学们：</p>
+                        <p>很荣幸能再次来到这个舞台和大家分享。我仍记得去年的这个时候，我也作为一名新生团支书，带着懵懂与好奇来到这个地方，当时我的身份是听众，是学习者，但这一次，我是分享者。</p>
+                        <p>接下来，我将通过三个"第一次"来展开我的分享"团日初绽映初心，菁英思政铸辉煌"。</p>
+                    </div>
+                </div>
+                <div class="journey-preview">
+                    <div class="journey-item">
+                        <div class="journey-icon">1</div>
+                        <p>团日活动登上校月展播</p>
+                    </div>
+                    <div class="journey-item">
+                        <div class="journey-icon">2</div>
+                        <p>加入菁英班的经历</p>
+                    </div>
+                    <div class="journey-item">
+                        <div class="journey-icon">3</div>
+                        <p>思政技能大比武</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 第一次经历页面 -->
+    <div id="first-experience" class="slide">
+        <div class="experience-container">
+            <h2 class="page-title">团日活动第一次登上校月展播</h2>
+            <div class="experience-content">
+                <div class="experience-timeline">
+                    <div class="timeline-item">
+                        <div class="timeline-icon">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                            </svg>
+                        </div>
+                        <div class="timeline-content">
+                            <h3>初期思考</h3>
+                            <p>如何主持好一次团日活动？带着这个问题，开始思考、学习、模仿。</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-icon">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+                            </svg>
+                        </div>
+                        <div class="timeline-content">
+                            <h3>学习探索</h3>
+                            <p>每个月观察"南通大学共青团"公众号的优秀展播活动，学习其特色。</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-icon">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                            </svg>
+                        </div>
+                        <div class="timeline-content">
+                            <h3>创新实践</h3>
+                            <p>将专业与主题结合，走出教室，通过游戏和分享，让活动更有意义。</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item highlight">
+                        <div class="timeline-icon">
+                            <svg viewBox="0 0 24 24">
+                                <path d="M12 15V3m0 12l-4-4m4 4l4-4M2 17l.621 2.485A2 2 0 0 0 4.561 21h14.878a2 2 0 0 0 1.94-1.515L22 17"/>
+                            </svg>
+                        </div>
+                        <div class="timeline-content">
+                            <h3>成功突破</h3>
+                            <p>开展"劳模精神"团日活动，探寻机械领域的劳模，最终登上校优秀展播。</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<!-- 第二次经历页面 -->
+    <div id="second-experience" class="slide">
+        <div class="elite-container">
+            <h2 class="page-title">第一次加入菁英班</h2>
+            <div class="elite-content">
+                <div class="elite-card main-card">
+                    <svg class="elite-icon" viewBox="0 0 24 24">
+                        <path d="M12 14l9-5-9-5-9 5 9 5z"/>
+                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
+                    </svg>
+                    <h3>菁英班的意义</h3>
+                    <p>菁英班全称南通大学大学生菁英人才学校，是为提高学生干部的理论素养、研究能力和实践能力的学习平台。</p>
+                </div>
+                <div class="elite-grid">
+                    <div class="elite-card">
+                        <div class="elite-step">1</div>
+                        <h4>选拔过程</h4>
+                        <p>通过笔试和面试层层选拔，以团支书身份进入菁英班</p>
+                    </div>
+                    <div class="elite-card">
+                        <div class="elite-step">2</div>
+                        <h4>延安实践</h4>
+                        <p>暑假期间代表菁英班赴延安进行为期10天的社会实践</p>
+                    </div>
+                    <div class="elite-card">
+                        <div class="elite-step">3</div>
+                        <h4>精神传承</h4>
+                        <p>将延安精神传播到班级每一位团员青年</p>
+                    </div>
+                    <div class="elite-card highlight">
+                        <div class="elite-step">4</div>
+                        <h4>收获成长</h4>
+                        <p>全方面提升政治素养，收获深厚友谊</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 第三次经历页面 -->
+    <div id="third-experience" class="slide">
+        <div class="competition-container">
+            <h2 class="page-title">第一次走上"大舞台"</h2>
+            <div class="competition-content">
+                <div class="stage-info">
+                    <div class="stage-numbers">
+                        <div class="number-card">
+                            <span class="number">140</span>
+                            <span class="label">参赛高校</span>
+                        </div>
+                        <div class="number-card">
+                            <span class="number">658</span>
+                            <span class="label">入围师生</span>
+                        </div>
+                    </div>
+                    <div class="competition-title">
+                        第四届江苏高校百校万名团干部思政技能大比武
+                    </div>
+                </div>
+                <div class="journey-stages">
+                    <div class="stage-card">
+                        <h3>校初赛</h3>
+                        <div class="stage-line"></div>
+                    </div>
+                    <div class="stage-card">
+                        <h3>校决赛</h3>
+                        <div class="stage-line"></div>
+                    </div>
+                    <div class="stage-card">
+                        <h3>省初赛</h3>
+                        <div class="stage-line"></div>
+                    </div>
+                    <div class="stage-card highlight">
+                        <h3>省决赛</h3>
+                        <div class="stage-line"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 能力提升页面 -->
+    <div id="skills-improvement" class="slide">
+        <div class="skills-container">
+            <h2 class="page-title">���力提升与收获</h2>
+            <div class="skills-grid">
+                <div class="skill-card">
+                    <svg class="skill-icon" viewBox="0 0 24 24">
+                        <path d="M12 14l9-5-9-5-9 5 9 5z"/>
+                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
+                    </svg>
+                    <h3>语言表达</h3>
+                    <p>通过比赛磨练，提升表达技巧和演讲能力</p>
+                </div>
+                <div class="skill-card">
+                    <svg class="skill-icon" viewBox="0 0 24 24">
+                        <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+                    </svg>
+                    <h3>文稿撰写</h3>
+                    <p>学会撰写有温度、有深度的文稿</p>
+                </div>
+                <div class="skill-card">
+                    <svg class="skill-icon" viewBox="0 0 24 24">
+                        <path d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                    </svg>
+                    <h3>视频制作</h3>
+                    <p>掌握视频拍摄和剪辑技能</p>
+                </div>
+                <div class="skill-card">
+                    <svg class="skill-icon" viewBox="0 0 24 24">
+                        <path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+                    </svg>
+                    <h3>团队协作</h3>
+                    <p>培养团队精神，共同进步</p>
+                </div>
+            </div>
+            <div class="team-quote">
+                <p>"一个人可以走得很快，但一群人可以走得很远。"</p>
+            </div>
+        </div>
+    </div>
+    <!-- 思政感悟页面 -->
+    <div id="reflection" class="slide">
+        <div class="reflection-container">
+            <h2 class="page-title">思政感悟</h2>
+            <div class="reflection-content">
+                <div class="insight-card">
+                    <h3>思政教育的真谛</h3>
+                    <p>思政教育不是简单的说教和灌输，而是需要用心去感知、用情去感染、用理去说服。</p>
+                </div>
+                <div class="insight-card">
+                    <h3>团支书的使命</h3>
+                    <p>作为团支书，要勇于突破"第一次"，秉持"学无止境、勇攀高峰"的精神。</p>
+                </div>
+                <div class="vision-card">
+                    <h3>未来展望</h3>
+                    <p>不断提升自己的思政素养和能力，努力成为"有理想、敢担当、能吃苦、肯奋斗"的新时代青年。</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 结束致谢页面 -->
+    <div id="thanks" class="slide">
+        <div class="thanks-container">
+            <div class="thanks-content">
+                <svg class="thanks-icon" viewBox="0 0 24 24">
+                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+                </svg>
+                <h2>感谢聆听</h2>
+                <p class="final-words">愿我们携手共进，在青春的道路上留下属于我们的印记</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        let currentSlide = 0;
+        const slides = document.querySelectorAll('.slide');
+        const totalSlides = slides.length;
+        function showSlide(index) {
+            slides[currentSlide].classList.remove('active');
+            currentSlide = index;
+            slides[currentSlide].classList.add('active');
+        }
+        function nextSlide() {
+            if (currentSlide < totalSlides - 1) {
+                showSlide(currentSlide + 1);
+            }
+        }
+        function prevSlide() {
+            if (currentSlide > 0) {
+                showSlide(currentSlide - 1);
+            }
+        }
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') {
+                nextSlide();
+                e.preventDefault();
+            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                prevSlide();
+                e.preventDefault();
+            }
+        });
+        document.addEventListener('click', (e) => {
+            if (e.clientX > window.innerWidth / 2) {
+                nextSlide();
+            } else {
+                prevSlide();
+            }
+        });
+    </script>
+</body>
 </html>