-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathpose.html
More file actions
505 lines (503 loc) · 28.3 KB
/
pose.html
File metadata and controls
505 lines (503 loc) · 28.3 KB
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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<!DOCTYPE html>
<html>
<head>
<title>羽球比賽辨識系統</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="keywords" content="ecommerce,herbal tea,shop">
<meta name="description" content="Bootstrap 5 Tea Shop HTML CSS Template">
<!--Icon-->
<link rel="icon" href="images/icons/badminton_icon.ico" type="image/x-icon" />
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/10.3.1/swiper-bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/vendor.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
<!-- script
================================================== -->
<script src="js/modernizr.js"></script>
<!-- GA -->
<script src="google-analytics.js" defer></script>
</head>
<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<!--Bootstrap Icons-->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<!--navbar icon -->
<symbol xmlns="http://www.w3.org/2000/svg" id="navbar-icon" viewBox="0 0 16 16">
<path d="M14 10.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-7a.5.5 0 0 0 0 1h7a.5.5 0 0 0 .5-.5zm0-3a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0 0 1h11a.5.5 0 0 0 .5-.5z" />
</symbol>
<!--container icon-->
<symbol xmlns="http://www.w3.org/2000/svg" id="container_arrow-right" viewBox="0 0 16 16">
<path fill="currentColor" d="M6.776 1.553a.5.5 0 0 1 .671.223l3 6a.5.5 0 0 1 0 .448l-3 6a.5.5 0 1 1-.894-.448L9.44 8 6.553 2.224a.5.5 0 0 1 .223-.671"/>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="container_arrow-left" viewBox="0 0 16 16">
<path fill="currentColor" d="M9.224 1.553a.5.5 0 0 1 .223.67L6.56 8l2.888 5.776a.5.5 0 1 1-.894.448l-3-6a.5.5 0 0 1 0-.448l3-6a.5.5 0 0 1 .67-.223"/>
</symbol>
<!--Footer Icons-->
<symbol xmlns="http://www.w3.org/2000/svg" id="footer_arrow-right" viewBox="0 0 16 16">
<path fill="currentColor" d="M6 12.796V3.204L11.481 8zm.659.753 5.48-4.796a1 1 0 0 0 0-1.506L6.66 2.451C6.011 1.885 5 2.345 5 3.204v9.592a1 1 0 0 0 1.659.753"/>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="footer_arrow-end" viewBox="0 0 16 16">
<path fill="currentColor" d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.713 3.31 4 3.655 4 4.308v7.384c0 .653.713.998 1.233.696L11.5 8.752V12a.5.5 0 0 0 1 0zM5 4.633 10.804 8 5 11.367z"/>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="footer_arrow-left" viewBox="0 0 16 16">
<path file="currentColor" d="M10 12.796V3.204L4.519 8zm-.659.753-5.48-4.796a1 1 0 0 1 0-1.506l5.48-4.796A1 1 0 0 1 11 3.204v9.592a1 1 0 0 1-1.659.753"/>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="footer_arrow-start" viewBox="0 0 16 16">
<path fill="currentColor" d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.52-.302 1.233.043 1.233.696v7.384c0 .653-.713.998-1.233.696L5 8.752V12a.5.5 0 0 1-1 0zm7.5.633L5.696 8l5.804 3.367z"/>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="footer_arrow-up" viewBox="0 0 16 16">
<path fill="currentColor" d="M3.204 11h9.592L8 5.519zm-.753-.659 4.796-5.48a1 1 0 0 1 1.506 0l4.796 5.48c.566.647.106 1.659-.753 1.659H3.204a1 1 0 0 1-.753-1.659"/>
</symbol>
</svg>
<!--Preloader-->
<div class="preloader" style="background-color: #87A9BC;">
<div class="loader">
<div class="dot">
<img src="images/icons/preloader_img01.png" width="100px">
</div>
<div class="dot">
<img src="images/icons/preloader_img02.png" width="100px">
</div>
<div class="dot">
<img src="images/icons/preloader_img03.png" width="80px">
</div>
</div>
</div>
<!--Navbar Menu-->
<header id="header" class="site-header fixed-top border-bottom">
<div class="container-lg">
<div class="row">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler d-flex d-lg-none order-3 p-2 border-0 shadow-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
<svg class="navbar-icon svg-white" width="40" height="40">
<use xlink:href="#navbar-icon"></use>
</svg>
</button>
<!--Mobile Logo-->
<a href="index.html" class="navbar-brand order-2 order-lg-2 d-flex d-lg-none">
<img src="images/logo/pose_logo.png" alt="Logo" style="width: 80vw; height: 10vh;">
</a>
<div class="offcanvas offcanvas-end order-3" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
<div class="offcanvas-body">
<div class="offcanvas-header px-4 pb-0">
<button type="button" class="btn-close btn-close-black" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
</div>
<!--Menu-->
<div class="navbar-collapse order-1 order-lg-1" id="navbarMenu">
<ul class="navbar-nav mr-auto nav-menu">
<li class="btn btn-link btn-sm">
<button type="button" class="btn btn-link btn-sm btn-outline-light" style="text-decoration: none;">
<a href="index.html">首頁</a>
</button>
</li>
<li class="btn btn-link btn-sm">
<button type="button" class="btn btn-link btn-sm btn-outline-light" style="text-decoration: none;">
<a href="data.html">資料介紹</a>
</button>
</li>
<li class="btn btn-group btn-sm" role="group">
<button type="button" class="btn btn-link btn-sm btn-outline-light" style="text-decoration: none;">
<a href="method.html">流程與方法</a>
</button>
<button type="button" class="btn btn-link btn-sm btn-black dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" style="color: black;">
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="edge_detection.html">邊線偵測</a>
</li>
<li>
<a class="dropdown-item" href="ball_tracking.html">羽球軌跡</a>
</li>
<li>
<a class="dropdown-item" href="pose.html">人體節點</a>
</li>
<li>
<a class="dropdown-item" href="hitter_and_hitting_point.html#hitter">擊球方</a>
</li>
<li>
<a class="dropdown-item" href="hitter_and_hitting_point.html#hitting_point">擊球點</a>
</li>
<li>
<a class="dropdown-item" href="winner_and_ball_trajectory.html#winner">得分方</a>
</li>
<li>
<a class="dropdown-item" href="winner_and_ball_trajectory.html#ball_trajectory">球路</a>
</li>
</ul>
</li>
<li class="btn btn-link btn-sm">
<button type="button" class="btn btn-link btn-sm btn-outline-light" style="text-decoration: none;">
<a href="demo.html">成果展示</a>
</button>
</li>
<li class="btn btn-link btn-sm">
<button type="button" class="btn btn-link btn-sm btn-outline-light" style="text-decoration: none;">
<a href="conclusion.html">結論</a>
</button>
</li>
<li class="btn btn-link btn-sm">
<button type="button" class="btn btn-link btn-sm btn-outline-light" style="text-decoration: none;">
<a href="reference.html">參考文獻</a>
</button>
</li>
</ul>
</div>
<!--Desktop Logo-->
<a href="index.html" class="navbar-brand order-2 order-lg-2 d-none d-lg-flex">
<img src="images/logo/pose_logo.png" alt="Logo" style="width: 20vw; height: 12vh;">
</a>
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="justify-content-center" style="display: flex; flex-direction: row;">
<div class="flex-shrink-0 p-3 bg-white aside_chart_flow">
<ul class="list-group" style="padding-left: 100px;">
<li class="list-group-item">
<div class="aside_1">
<a href="index.html">首頁</a>
</div>
</li>
<li class="list-group-item">
<div class="aside_1">
<a href="data.html">資料介紹</a>
</div>
</li>
<li class="list-group-item">
<div class="aside_1">
<a href="method.html">流程與方法</a>
</div>
<ul class="list-group aside_2">
<li>
<a href="edge_detection.html">邊線偵測</a>
</li>
<li>
<a href="ball_tracking.html">羽球軌跡</a>
</li>
<li>
<a href="pose.html">人體節點</a>
</li>
<li>
<a href="hitter_and_hitting_point.html#hitter">擊球方</a>
</li>
<li>
<a href="hitter_and_hitting_point.html#hitting_point">擊球點</a>
</li>
<li>
<a href="winner_and_ball_trajectory.html#winner">得分方</a>
</li>
<li>
<a href="winner_and_ball_trajectory.html#ball_trajectory">球路</a>
</li>
</ul>
</li>
<li class="list-group-item">
<div class="aside_1">
<a href="demo.html">成果展示</a>
</div>
</li>
<li class="list-group-item">
<div class="aside_1">
<a href="conclusion.html">結論</a>
</div>
</li>
<li class="list-group-item">
<div class="aside_1">
<a href="reference.html">參考文獻</a>
</div>
</li>
</ul>
</div>
<div class="post-wrap aside_height">
<div class="container">
<div class="row">
<main class="post-list">
<div class="row">
<article class="post-item">
<div class="post-content">
<div class="small_flow_chart">
<div class="item"><a href="#sfc01" onclick="location.replace('#sfc01')">偵測人物節點</a></div>
<div class="arrow_right">
<svg class="arrow-right svg-primary" width="50" height="50">
<use xlink:href="#footer_arrow-right"></use>
</svg>
</div>
<div class="item"><a href="#sfc02" onclick="location.replace('#sfc02')">整理資料</a></div>
<div class="arrow_right">
<svg class="arrow-right svg-primary" width="50" height="50">
<use xlink:href="#footer_arrow-right"></use>
</svg>
</div>
<div class="item" id="sfc01"><a href="#sfc03" onclick="location.replace('#sfc03')">資料處理</a></div>
</div>
<section>
<h2 class="fs-1 text-capitalize fst-italic"><strong>建立選手基礎節點座標檔</strong></h2>
<div class="post-description">
<p>  使用CMU - Panoptic Studio（卡內基·梅隆大學的研究單位）在GitHub所提供的OpenPose<sup><a href="reference.html#heading15">[16]</a></sup>執行檔，輸出影片中所有人的25個身體節點json檔。</p>
</div>
<div class="align-items-center">
<div class="row align-items-center" style="display: flex; flex-direction: row; align-items: center;">
<div class="col-lg-6" style="text-align: center;">
<div class="image-container">
<img id="smallImage" src="images/method/pose/img1.png">
</div>
<p class="img_text">（25個人體節點位置）</p>
</div>
<div class="col-lg-6" style="text-align: center;">
<table>
<tbody>
<tr>
<th>0</th>
<th>Nose</th>
<th>鼻子</th>
<th>13</th>
<th>LKnee</th>
<th>左膝蓋</th>
</tr>
<tr>
<th>1</th>
<th>Neck</th>
<th>脖子</th>
<th>14</th>
<th>LAnkle</th>
<th>左腳踝</th>
</tr>
<tr>
<th>2</th>
<th>RShoulder</th>
<th>右肩膀</th>
<th>15</th>
<th>REye</th>
<th>右眼睛</th>
</tr>
<tr>
<th>3</th>
<th>RElbow</th>
<th>右手肘</th>
<th>16</th>
<th>LEye</th>
<th>左眼睛</th>
</tr>
<tr>
<th>4</th>
<th>RWrist</th>
<th>右手腕</th>
<th>17</th>
<th>REar</th>
<th>右耳朵</th>
</tr>
<tr>
<th>5</th>
<th>LShoulder</th>
<th>左肩膀</th>
<th>18</th>
<th>LEar</th>
<th>左耳朵</th>
</tr>
<tr>
<th>6</th>
<th>LElbow</th>
<th>左手肘</th>
<th>19</th>
<th>LBigToe</th>
<th>左腳內</th>
</tr>
<tr>
<th>7</th>
<th>LWrist</th>
<th>左手腕</th>
<th>20</th>
<th>LSmallToe</th>
<th>左腳外</th>
</tr>
<tr>
<th>8</th>
<th>MidHip</th>
<th>跨中心</th>
<th>21</th>
<th>LHeel</th>
<th>左腳跟</th>
</tr>
<tr>
<th>9</th>
<th>RHip</th>
<th>右臀</th>
<th>22</th>
<th>RBigToe</th>
<th>右腳內</th>
</tr>
<tr>
<th>10</th>
<th>RKnee</th>
<th>右膝蓋</th>
<th>23</th>
<th>RSmallToe</th>
<th>右腳外</th>
</tr>
<tr>
<th>11</th>
<th>RAnkle</th>
<th>右腳踝</th>
<th>24</th>
<th>RHeel</th>
<th>右腳跟</th>
</tr>
<tr>
<th>12</th>
<th>LHip</th>
<th>左跨</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>  其執行檔的安裝流程和使用方式均有放置在GitHub上。</p>
<p>  將須判斷之影片輸入後，其會輸出標示人體關節點的影片，及下圖的json檔樣式。因我們僅需人體關節點的數據檔，因此僅輸出json檔以利後續研究。</p>
<div class="align-items-center">
<img id="myImage" src="images/method/pose/img2.png">
<p class="img_text">（OpenPose 輸出的json檔）</p>
</div>
<div class="video-container">
<video id="myVideo" controls autoplay>
<source id="videoSource" src="images/method/pose/pose.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p class="img_text">(OpenPose輸出的人物節點影片)</p>
</div>
<p id="sfc02">  Openpose<sup><a href="reference.html#heading15">[16]</a></sup>所輸出的json檔，為了後續使用便利，因此將其輸出的檔案，使用多個自訂義的程式去校正，並輸出CSV檔，主要執行流程如下圖</p>
<h2 class="fs-1 text-capitalize fst-italic"><strong>資料整理</strong></h2>
<h2 id="json" class="fs-1 text-capitalize fst-italic"><strong>1. 讀取第一個json檔</strong></h2>
<p>  將json檔中的每個人單獨整理成一個list檔，並利用第一幀的照片套用場地線去辨識兩位選手的座標範圍，並將偵測出的座標當作人物初始座標。</p>
<div class="align-items-center">
<img id="myImage" src="images/method/pose/img3.png">
<p class="img_text">（第一幀所有人25個節點的list）</p>
</div>
<div class="align-items-center">
<img id="myImage" src="images/method/pose/img4.png">
<p class="img_text">（偵測出的兩位選手的第一幀座標）</p>
</div>
<h2 id="coordinate" class="fs-1 text-capitalize fst-italic"><strong>2. 座標比對</strong></h2>
<p>  利用後減前的X、Y座標距離差，判斷是否為該選手，並用此方式將選手在每一幀的坐標點找出，將每一個節點都單獨整理成一個list檔，所以每位選手都會有25個list去分別對應其節點(請參考人物節點介紹中的25個人體節點位置圖<sup><a href="reference.html#heading14">[15]</a></sup>)。</p>
<h2 id="adjust01" class="fs-1 text-capitalize fst-italic"><strong>3. 資料筆數矯正</strong></h2>
<p>  會有幾幀因為偵測誤差或是其他干擾因素而導致資料有誤差，所以需要確認資料筆數是否和其幀數一致，若不一致，找出缺少的幀數並將該幀補0，讓資料筆數一致。</p>
<div class="align-items-center">
<img id="myImage" src="images/method/pose/img6.png">
<p class="img_text" id = "sfc03">（檢查資料筆數是否正確）</p>
</div>
</section>
<section>
<h1 id="processing" class="fs-1 text-capitalize fst-italic"><strong>資料前處理</strong></h1>
<h2 class="fs-1 text-capitalize fst-italic"><strong>1. KNN遺失值插補</strong></h2>
<div class="post-description">
<p>  將節點檔中的遺失值進行插補，但為了維持資料的可用性，也為了降低資料的偏誤，遺失的幀數只要大於等於10幀，便不進行插補。</p>
</div>
<div class="align-items-center">
<img id="smallImage" src="images/method/pose/img8.jpg">
<p class="img_text">（偵測哪一幀需要插補）</p>
</div>
<h2 id="arima" class="fs-1 text-capitalize fst-italic"><strong>2. ARIMA檢查軌跡 & 資料插補</strong></h2>
<div class="post-description">
<p>  因OpenPose<sup><a href="reference.html#heading15">[16]</a></sup>偵測時有可能會因姿勢或是攝影角度……等各項因素，而產生偵測的節點位置誤差，所以導致其運動軌跡不連貫。為避免此情況，故使用ARIMA<sup><a href="reference.html#heading12">[13]</a></sup>檢查各點的運動軌跡，並將軌跡異常點列出後歸0，並再次使用KNN進行插補，插補條件同上一步。</p>
</div>
<div class="align-items-center">
<img id="myImage" src="images/method/pose/img9.png">
<p class="img_text">（使用ARIMA檢測發現的異常點）</p>
</div>
<h2 id="adjust02" class="fs-1 text-capitalize fst-italic"><strong>3. 資料輸出</strong></h2>
<div class="post-description">
<p>  輸出兩位選手在影片中每一幀的25個人體節點CSV檔。</p>
</div>
</section>
</div>
</article>
</div>
</main>
</div>
</div>
<footer id="footer" class="mt-5">
<div class="border-top py-4">
<div class="container-lg">
<div class="row justify-content-center footer-content">
<div class="footer01">
<button onclick="goToTop()" class="btn btn-link footer_btn" data-hover="回到最上面">
<div>
<svg class="arrow-up svg-primary position-absolute" width="20" height="20">
<use xlink:href="#footer_arrow-up"></use>
</svg>
<span class="ps-4">Top</span>
</div>
</button>
<button onclick="goToPrevious()" class="btn btn-link footer_btn" data-hover="羽球軌跡">
<div>
<svg class="arrow-right svg-primary position-absolute" width="20" height="20">
<use xlink:href="#footer_arrow-left"></use>
</svg>
<span class="ps-4">Previous</span>
</div>
</button>
<button onclick="goToFirst()" class="btn btn-link footer_btn" data-hover="首頁">
<div>
<svg class="arrow-right svg-primary position-absolute" width="20" height="20">
<use xlink:href="#footer_arrow-start"></use>
</svg>
<span class="ps-4">First</span>
</div>
</button>
</div>
<div class="footer02">
<p style="text-align: center;">Copyright © 2024 靜宜大學資料科學暨大數據分析與應用學系<br>羽球比賽辨識系統專題團隊。All Rights Reserved.</p>
<p style="text-align: center;">⚠️⚠️請使用電腦觀看以免損害用戶體驗⚠️⚠️</p>
<p id="lastModified" style="text-align: center;"></p>
<script src="js/last_modified.js"></script>
<p>瀏覽人次：<span id="visitorCount">0</span></p>
<script src="js/visitorCounter.js"></script>
</div>
<div class="footer03">
<button onclick="goToTop()" class="btn btn-link footer_btn" data-hover="回到最上面">
<div>
<svg class="arrow-up svg-primary position-absolute" width="20" height="20">
<use xlink:href="#footer_arrow-up"></use>
</svg>
<span class="ps-4">Top</span>
</div>
</button>
<button onclick="goToNext()" class="btn btn-link footer_btn" data-hover="擊球方與擊球點">
<div>
<svg class="arrow-right svg-primary position-absolute" width="20" height="20">
<use xlink:href="#footer_arrow-right"></use>
</svg>
<span class="ps-4">Next</span>
</div>
</button>
<button onclick="goToLast()" class="btn btn-link footer_btn" data-hover="參考文獻">
<div>
<svg class="arrow-right svg-primary position-absolute" width="20" height="20">
<use xlink:href="#footer_arrow-end"></use>
</svg>
<span class="ps-4">Last</span>
</div>
</button>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="js/footer.js"></script>
<script src="js/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0-alpha3/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
</body>
</html>