html_ppt/slide_04.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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!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;
        }
        /* Add specific styles for this slide here */
        .content {
            flex: 1;
            padding: 0 80px;
            display: flex;
            flex-direction: row; /* Arrange image and text horizontally */
            align-items: center; /* Vertically center items */
            justify-content: center; /* Horizontally center the flex container */
        }
        .image-container {
            margin-right: 40px; /* Space between image and text */
            margin-bottom: 0; /* Remove bottom margin */
        }
        .image-placeholder {
            width: 400px; /* Adjust size as needed */
            height: 300px; /* Adjust size as needed */
            background-color: rgba(255, 107, 0, 0.1);
            border: 2px dashed #FF6B00;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            color: #FF6B00;
            border-radius: 12px;
        }
        .text-container {
            max-width: 800px; /* Limit text width */
            text-align: left; /* Align text left */
        }
        .intro-list {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 1.5rem;
            line-height: 2;
        }
        .intro-list li {
            color: #4A5568;
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
        }
        .intro-list li:before {
            content: '\2022'; /* Bullet point */
            color: #FF6B00;
            position: absolute;
            left: 0;
            font-size: 2rem;
            line-height: 1;
        }
        .footer {
            padding: 20px 80px 40px 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </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-eye text-2xl accent mr-4"></i>
                <h1 class="title text-4xl">引言 <span class="text-3xl text-gray-500">(2/2)</span> - 计算机视觉：赋能智慧之眼</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">
            <div class="image-container">
                <!-- SVG placeholder: 抽象眼睛图标，结合电路和AI元素，旁边有图像识别流程示意 -->
                <!-- SVG: 抽象眼睛图标，结合电路和AI元素，旁边有图像识别流程示意 -->
                <svg width="400" height="300" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
                    <rect width="400" height="300" fill="#F5F5F5"/>

                    <!-- Abstract Eye -->
                    <circle cx="150" cy="150" r="80" fill="none" stroke="#FF6B00" stroke-width="8"/>
                    <circle cx="150" cy="150" r="30" fill="#FF6B00"/>
                    <path d="M 50 150 Q 150 50 250 150 Q 150 250 50 150 Z" fill="none" stroke="#FF6B00" stroke-width="4"/>

                    <!-- Circuit/AI elements -->
                    <line x1="150" y1="70" x2="150" y2="120" stroke="#1A1A1A" stroke-width="2"/>
                    <line x1="150" y1="180" x2="150" y2="230" stroke="#1A1A1A" stroke-width="2"/>
                    <line x1="70" y1="150" x2="120" y2="150" stroke="#1A1A1A" stroke-width="2"/>
                    <line x1="180" y1="150" x2="230" y2="150" stroke="#1A1A1A" stroke-width="2"/>

                    <circle cx="150" cy="70" r="5" fill="#1A1A1A"/>
                    <circle cx="150" cy="230" r="5" fill="#1A1A1A"/>
                    <circle cx="70" cy="150" r="5" fill="#1A1A1A"/>
                    <circle cx="230" cy="150" r="5" fill="#1A1A1A"/>

                    <!-- Image Recognition Flow -->
                    <rect x="280" y="80" width="100" height="40" fill="#FF6B00" rx="5" ry="5"/>
                    <text x="330" y="105" font-family="Open Sans, Noto Sans SC, sans-serif" font-size="14" fill="#F5F5F5" text-anchor="middle">图像输入</text>

                    <line x1="330" y1="120" x2="330" y2="160" stroke="#1A1A1A" stroke-width="2" marker-end="url(#arrowhead)"/>

                    <rect x="280" y="160" width="100" height="40" fill="#FF6B00" rx="5" ry="5"/>
                    <text x="330" y="185" font-family="Open Sans, Noto Sans SC, sans-serif" font-size="14" fill="#F5F5F5" text-anchor="middle">特征提取</text>

                    <line x1="330" y1="200" x2="330" y2="240" stroke="#1A1A1A" stroke-width="2" marker-end="url(#arrowhead)"/>

                    <rect x="280" y="240" width="100" height="40" fill="#FF6B00" rx="5" ry="5"/>
                    <text x="330" y="265" font-family="Open Sans, Noto Sans SC, sans-serif" font-size="14" fill="#F5F5F5" text-anchor="middle">识别结果</text>

                    <!-- Arrowhead marker -->
                    <defs>
                        <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                            <polygon points="0 0, 10 3.5, 0 7" fill="#1A1A1A"/>
                        </marker>
                    </defs>
                </svg>
            </div>
            <div class="text-container">
                <ul class="intro-list">
                    <li>计算机视觉 (CV)：让机器"看懂"世界</li>
                    <li>AI重要分支，智慧仓储核心技术</li>
                    <li>CV潜力：与多技术融合创新</li>
                    <li>焦点：CV在智慧仓储的应用</li>
                </ul>
            </div>
        </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">4 / 18</div>
        </div>
    </div>
    <script src="navigation.js"></script>
</body>
</html>