html_ppt/slide_02.html at main · Haaaiawd/html_ppt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报告议程 - 视觉融合新力量</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="navigation.css">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .slide {
            width: 100vw;
            height: 100vh;
            background-color: #F5F5F5;
            position: relative;
            overflow: hidden;
            font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
            display: flex;
            flex-direction: column;
        }
        .title {
            font-family: 'Montserrat', 'Noto Sans SC', sans-serif;
            font-weight: 700;
            color: #1A1A1A;
        }
        .accent {
            color: #FF6B00;
        }
        .background-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.07;
            background-image: radial-gradient(circle, #FF6B00 1px, transparent 1px);
            background-size: 30px 30px;
        }
        .header {
            padding: 40px 80px 20px 80px;
        }
        .content {
            flex: 1;
            padding: 0 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .agenda-list {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 1.8rem;
            line-height: 2.5;
            text-align: left;
        }
        .agenda-item {
            color: #4A5568;
            position: relative;
            padding-left: 40px;
        }
        .agenda-item:before {
            content: '\2022'; /* Bullet point */
            color: #FF6B00;
            position: absolute;
            left: 0;
            font-size: 2.5rem;
            line-height: 1;
        }
        .footer {
            padding: 20px 80px 40px 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /* 添加 .footer-placeholder 样式以匹配 slide_01.html (如果需要，但tailwindcss的类可能足够) */
        /* .footer-placeholder {
            color: #A0A0A0;
        } */
    </style>
</head>
<body>
    <div class="slide">
        <!-- Background pattern -->
        <div class="background-pattern"></div>

        <!-- Header -->
        <div class="header">
            <div class="flex items-center">
                <i class="fas fa-list-alt text-2xl accent mr-4"></i>
                <h1 class="title text-4xl">报告议程</h1>
            </div>
            <div class="h-1 w-32 bg-gradient-to-r from-transparent via-orange-500 to-transparent mt-2"></div>
        </div>

        <!-- Main content -->
        <div class="content">
            <!-- SVG placeholder for Agenda illustration: 简洁的圆形或方块图标（带数字），排列成目录样式 -->
            <ul class="agenda-list">
                <li class="agenda-item">引言：智慧仓储与计算机视觉的兴起</li>
                <li class="agenda-item">核心技术：智能之眼及其协同伙伴</li>
                <li class="agenda-item">实践探索：典型案例分析</li>
                <li class="agenda-item">专业启示：对物流管理人才的影响</li>
                <li class="agenda-item">未来展望：智慧仓储的发展趋势</li>
                <li class="agenda-item">结论与思考</li>
            </ul>
        </div>

        <!-- Footer with page number -->
        <div class="footer">
            <div class="flex items-center">
                <div class="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center mr-2">
                    <i class="fas fa-microchip text-xs text-gray-600"></i>
                </div>
                <span class="text-sm text-gray-500">视觉融合新力量</span>
            </div>
            <div class="footer-placeholder text-sm text-gray-500">2 / 18</div>
        </div>
    </div>
    <script src="navigation.js"></script>
</body>
</html>