PageSourceSearch

https://www.kl.edu.tw/workshop

html kl.edu.tw collected 2026-09-24 09:30:18 UTC 28,779 bytes, 934 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5
6    <!-- META ============================================= -->
7    <meta charset="utf-8">
8    <meta http-equiv="X-UA-Compatible" content="IE=edge">
9    <meta name="keywords" content="" />
10    <meta name="author" content="" />
11    <meta name="robots" content="" />
12
13    <!-- DESCRIPTION -->
14    <meta name="description" content="基隆教育資源網整合基隆市各類研習與教學資源分享的協作平台,提供基隆老師們藉由平台達到資源共享與交流。" />
15
16    <!-- OG -->
17    <meta property="og:title" content="基隆教育資源網" />
18    <meta property="og:description" content="基隆教育資源網整合基隆市各類研習與教學資源分享的協作平台,提供基隆老師們藉由平台達到資源共享與交流。" />
19    <meta property="og:image" content="https://www.kl.edu.tw/images/logo.png" />
20    <meta name="format-detection" content="telephone=no">
21
22    <!-- FAVICONS ICON ============================================= -->
23    <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
24    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />
25
26    <!-- PAGE TITLE HERE ============================================= -->
27    <title>基隆教育資源網</title>
28
29    <!-- MOBILE SPECIFIC ============================================= -->
30    <meta name="viewport" content="width=device-width, initial-scale=1">
31
32    <!--[if lt IE 9]>
33    
33<script src="/js/html5shiv.min.js"></script>
33
34    
34<script src="/js/respond.min.js"></script>
34
35    <![endif]-->
36
37    <!-- All PLUGINS CSS ============================================= -->
38    <link rel="stylesheet" type="text/css" href="/css/assets.css">
39
40    <!-- TYPOGRAPHY ============================================= -->
41    <link rel="stylesheet" type="text/css" href="/css/typography.css">
42
43    <!-- SHORTCODES ============================================= -->
44    <link rel="stylesheet" type="text/css" href="/css/shortcodes/shortcodes.css">
45
46    <!-- STYLESHEETS ============================================= -->
47    <link rel="stylesheet" type="text/css" href="/css/style.css">
48    <link class="skin" rel="stylesheet" type="text/css" href="/css/color/color-1.css">
49
50    <!-- REVOLUTION SLIDER CSS ============================================= -->
51    <link rel="stylesheet" type="text/css" href="/vendors/revolution/css/layers.css">
52    <link rel="stylesheet" type="text/css" href="/vendors/revolution/css/settings.css">
53    <link rel="stylesheet" type="text/css" href="/vendors/revolution/css/navigation.css">
54    <!-- REVOLUTION SLIDER END -->
55    <style>
56        .header-text-color {
57            color: #48A1B8 !important;
58        }
59
60        .page-content {
61            min-height: 85vh;
62        }
63
64        @media only screen and (max-width: 767px) {
65            .menu-logo, .is-fixed .menu-logo {
66                float: inherit;
67            }
68        }
69
70        .menuicon {
71            position: absolute;
72            right: 20px;
73        }
74
75        div.back-to-top {
76            background-color: #87cfb4 !important;
77        }
78
79        @media (min-width: 992px) {
80            .desktop-mode {
81                display: block !important;
82            }
83
84            .mobile-mode {
85                display: none !important;
86            }
87        }
88
89        @media (max-width: 991px) {
90            .desktop-mode {
91                display: none !important;
92            }
93
94            .mobile-mode {
95                display: block !important;
96            }
97        }
98
99        @media (min-width: 992px) and (max-width: 1199px) {
100            .container {
101                max-width: 95vw;
102            }
103        }
104    </style>
105    <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 105-106
105
106    <script async src="https://www.googletagmanager.com/gtag/js?id=
106G-W73YJZHHL1
vendor: 16 bytes, lines 106-107
106"></script>
107    
107<script>
108        
vendor: 152 bytes, lines 108-112
108window.dataLayer = window.dataLayer || [];
109        function gtag(){dataLayer.push(arguments);}
110        gtag('js', new Date());
111
112        gtag('config', '
112G-W73YJZHHL1
vendor: 8 bytes, lines 112-113
112');
113    
113</script>
113
114</head>
115<body id="bg">
116    <div class="page-wraper">
117        <!-- Header Top ==== -->
118        <header id="header" class="header rs-nav">
119            <div class="sticky-header navbar-expand-lg">
120                <div class="menu-bar clearfix">
121                    <div class="container clearfix">
122                        <!-- Mobile Nav Button ==== -->
123                        <button id="nav-button" class="navbar-toggler collapsed menuicon justify-content-end" type="button"
124                            data-toggle="collapse" data-target="#menuDropdown" aria-controls="menuDropdown"
125                            aria-expanded="false" aria-label="Toggle navigation" style="z-index: 10;">
126                            <span></span>
127                            <span></span>
128                            <span></span>
129                        </button>
130                        <!-- Header Logo ==== -->
131                        <div class="menu-logo">
132                            <a href="/"><img src="/images/logo.svg" alt=""></a>
133                        </div>
134                        <style>
135    .mobile-munu-close {
136        color: black;
137        cursor: pointer;
138        position: absolute;
139        right: 15px;
140    }
141
142    #input_search_text {
143        border-radius: 5px 0 0 5px;
144    }
145
146    #btn_search_submit {
147        border-radius: 0 5px 5px 0;
148        height: 40px;
149    }
150
151    @media only screen and (max-width: 992px) {
152        .li-separator {
153            display: none !important;
154        }
155    }
156</style>
157<script>
158    function menuClose() {
159        document.getElementById("nav-button").click(); 
160    }
161</script>
161
162<!-- Navigation Menu ==== -->
163<div class="menu-links navbar-collapse collapse justify-content-start" id="menuDropdown">
164    <div class="menu-logo">
165        <div onclick="menuClose();" class="mobile-munu-close"><i class="fa fa-times" aria-hidden="true"></i></div>
166    </div>
167    <div class="menu-logo">
168        <a href="/"><img src="/images/logo.svg" alt=""></a>
169    </div>
170    <!-- <ul class="nav navbar-nav">
171        <li class="active"><a class="header-text-color" href="javascript:;">活動 <i class="fa fa-chevron-down"></i></a>
172            <ul class="sub-menu">
173                <li><a href="#">###</a></li>
174                <li><a href="#">###</a></li>
175            </ul>
176        </li>
177    </ul> -->
178    <ul class="nav navbar-nav" style="margin-left: auto!important;">
179        
180            <li><a class="header-text-color" href="https://www.klcg.gov.tw/tw/education" target="_blank">基隆市政府教育處</a></li>
181            <li><a class="header-text-color" href="http://in.kl.edu.tw" target="_blank">教育處內網</a></li>
182        
183        <li><a class="header-text-color" href="/workshop">研習公告</a></li>
184        <li><a class="header-text-color" href="/resource">教學資源</a></li>
185        
186            <li><a class="header-text-color" href="/login">登入</a></li>
187        
188    </ul>
189    
190    <div class="nav-social-link">
191        <a href="javascript:;"><i class="fa fa-facebook"></i></a>
192        <a href="javascript:;"><i class="fa fa-google-plus"></i></a>
193        <a href="javascript:;"><i class="fa fa-linkedin"></i></a>
194    </div>
195</div>
196<!-- Navigation Menu END ==== -->
197                    </div>
198                </div>
199            </div>
200        </header>
201<style>
202	.page-wraper {
203		background-color: #f7fafc !important;
204	}
205
206	.background {
207		background-image: url('/images/workshop/bg.svg');
208		background-size: cover;
209		background-position: center;
210		background-repeat: no-repeat;
211		width: 100vw;
212		height: auto;
213		padding: 0px 20px;
214	}
215
216	.section1-left {
217		padding: 50px 0px;
218	}
219
220	.title {
221		font-size: 3rem;
222		font-weight: bold;
223		color: #385756;
224		text-align: left;
225		margin-top: 80px;
226	}
227
228	.head-input-search {
229		border: none;
230		padding: 24px 12px;
231		border-radius: 5px !important;
232	}
233
234	.head-icon-search {
235		position: absolute;
236		display : flex;
237		align-items : center;
238		float: right;
239		right: 15px;
240		height: 100%;
241		font-size: 20px;
242		color: #999999;
243		cursor: pointer;
244	}
245
246	.head-hot-tag {
247		color: #888888;
248		font-weight: bold;
249	}
250
251	.hot-tag {
252		cursor: pointer;
253	}
254
255	.hot-tag:hover {
256		text-decoration: underline;
257	}
258
259	.info-box {
260		padding: 15px 15px 0px 15px;
261	}
262
263	#list {
264		min-height: 400px;
265	}
266
267	.btn-type {
268		white-space: nowrap;
269		max-height: 30px;
270		padding: 5px 10px;
271		border-radius: 20px;
272		font-weight: bold;
273		border: none;
274		cursor: auto;
275	}
276
277	.btn-type.type1 {
278		background-color: #385756;
279		color: #ffffff;
280	}
281
282	.btn-type.type2 {
283		background-color: #A1A4F4;
284		color: #ffffff;
285	}
286
287	.btn-type.type3 {
288		background-color: #94A5D4;
289		color: #ffffff;
290	}
291
292	.btn-type.type4 {
293		background-color: #F5C12D;
294		color: #ffffff;
295	}
296
297	.btn-type.type5, .btn-type.type6, .btn-type.type7 {
298		background-color: #F5C12D;
299		color: #ffffff;
300	}
301
302	.a-item-title:hover, .a-item-title:focus {
303		text-decoration: underline;
304	}
305
306	.item-title {
307		font-size: 1.5rem;
308		font-weight: bold;
309		color: #385756;
310		text-align: left;
311		margin-top: -2px;
312		margin-left: 10px;
313	}
314
315	.workshop-place {
316		color: #7E9B90;
317	}
318
319	#pagination {
320		align-items: center;
321		justify-content: center;
322	}
323
324	.btn-page {
325		display:block;
326		height: 40px;
327		width: 40px;
328		border-radius: 50%;
329		font-weight: bold;
330		border: #D3D3D3 1px solid;
331		background-color: #fff;
332		color: #5A5A5A;
333		margin: 0px 8px;
334		padding: 8px;
335	}
336
337	.btn-page.active {
338		background-color: #87cfb4;
339		border: #87cfb4 1px solid;
340		color: #ffffff;
341	}
342
343	@media (min-width: 992px) {
344		.desktop-mode {
345			display: block !important;
346		}
347
348		.mobile-mode {
349			display: none !important;
350		}
351
352		.content-area {
353			margin-top: 30px;
354			margin-bottom: 30px;
355		}
356
357        .head-input {
358			width: 75%;
359		}
360
361		.course-detail-bx {
362			margin: 0px 20px;
363		}
364
365		.info-flex {
366			display: flex;
367		}
368
369		.info-box > .secondary {
370			color: #b5b5b5;
371			position: absolute;
372			right: 15px;
373			margin-top: -5px;
374		}
375    }
376
377	@media (max-width: 991px) {
378		.desktop-mode {
379			display: none !important;
380		}
381
382		.mobile-mode {
383			display: block !important;
384		}
385
386        .section1-left {
387			display: none;
388		}
389
390		.title {
391			margin-top: 30px;
392			text-align: center;
393		}
394
395		.filter-div {
396			display: none;
397		}
398
399		/* .list-div {
400			margin-top: -30px;
401		} */
402
403		.info-flex {
404			display: block;
405		}
406
407		.item-title {
408			margin-top: 10px;
409			margin-left: 0px;
410		}
411
412		.info-box > .secondary {
413			color: #b5b5b5;
414			float: right;
415			margin-top: 10px;
416			margin-bottom: 5px;
417		}
418    }
419</style>
420<style>
421	.form-control {
422		border-color: #C3C3C3 !important;
423	}
424
425	.bootstrap-select .dropdown-toggle, .bootstrap-select .dropdown-toggle:hover, .bootstrap-select .dropdown-toggle:focus {
426		border-color: #C3C3C3 !important;
427		padding: 9px 12px;
428		color: #5a5a5a;
429	}
430</style>
431<div class="page-content bg-content">
432	<div class="content-block">
433		<!-- header -->
434		<div class="section-area background">
435			<div class="container">
436				<div class="row">
437					<div class="col-lg-5 section1-left">
438						<img class="img-fluid" src="/images/workshop/icon.svg">
439					</div>
440					<div class="col-lg-7 mb-30">
441						<div class="title">研習公告</div>
442						<div class="mt-30 relative head-input">
443							<span class="head-icon-search" onclick="head_search();"><i class="fa fa-search"></i></span>
444							<input class="form-control head-input-search size1rem" id="search" name="search" type="text" placeholder="請輸入關鍵字" />
445						</div>
446						<div class="mt-3 size1rem head-hot-tag">
447						</div>
448					</div>
449				</div>
450			</div>
451		</div>
452
453		<!-- content -->
454		<div class="section-area content-area">
455			<div class="container">
456				<div class="row d-flex">
457					<div class="col-lg-4 col-md-12 m-b30 filter-div">
458						<div class="course-detail-bx">
459							<div class="size20 bold mb-8">搜尋條件</div>
460							<input class="form-control size14 radius-sm" id="filter_key" name="filter_key" type="text" placeholder="請輸入關鍵字" />
461
462							<div class="mt-30"></div>
463							
464							<div class="size20 bold mb-8">研習類型(主辦單位)</div>
465							<select class="form-control size14 radius-sm" id="filter_type" name="filter_type">
466								<option value="">請選擇研習類型</option>
467								<option value="1">基優教師研習</option>
468								<option value="2">市內一般研習</option>
469								<option value="3">外縣市研習</option>
470								<option value="6">大專研習</option>
471								<option value="7">中央研習</option>
472								<option value="4">學分/二專班</option>
473							</select>
474
475							<div class="mt-30"></div>
476							
477							<div class="size20 bold mb-8">學習階段</div>
478							<select class="form-control size14 radius-sm" id="filter_level" name="filter_level">
479								<option value="">請選擇學習階段</option>
480								<option value="6">學前</option>
481								<option value="1">國小</option>
482								<option value="2">國中</option>
483								<option value="3">高中</option>
484								<option value="4">國中小</option>
485								<option value="5">國高中</option>
486							</select>
487							
488							<div class="mt-30"></div>
489							
490							<div class="size20 bold mb-8">研習時間</div>
491							<input class="form-control size14 radius-sm" id="filter_event_date" name="filter_event_date" type="date" placeholder="請選擇時間" />
492
493							<div class="mt-30"></div>
494							
495							<!-- <div class="size20 bold mb-8">報名時間</div>
496							<input class="form-control size14 radius-sm" id="filter_apply_date" name="filter_apply_date" type="date" placeholder="請選擇時間" /> -->
497
498							<div class="mt-60"></div>
499							<button class="btn btn-main btn-block size14 radius-md mb-60" id="filter_btn" onclick="search();">
500								搜尋 <span class="ml-2"><i class="fa fa-search"></i></span>
501							</button>
502						</div>
503					</div>
504					<div class="col-lg-8 col-md-12 bg-white list-div">
505						<div class="mobile-mode text-right mt-2 mb-2">
506							<span data-toggle="modal" data-target="#searchModal" style="cursor: pointer; margin-right: 25px;">
507								<i class="fa fa-filter" aria-hidden="true"></i> 篩選
508							</span>
509						</div>
510						<div id="list">
511							<div class="data-loading"></div>
512							<!-- 							
513							<div class="padding0 item-div">
514								<div class="info-box mt-1">
515									<div class="info-flex"> 
516										<button class="btn-type type1 size13">基優教師研習</button>
517										<a class="a-item-title" href="#">
518											<div class="item-title size20">[性平教育] 性平教育增能研習:認識數位性別暴力 </div>
519										</a>
520									</div>
521									<div class="mt-3 bold workshop-place">
522										基隆市政府教育處
523										<a href="https://www.google.com/maps/search/基隆市政府教育處" target="_blank">
524											<img src="/images/workshop/googlemap.png" class="ml-1" style="width: 18px; margin-top: -2px;">
525										</a>
526									</div>
527									<div class="mt-2 bold workshop-time">
528										研習時間:2020/01/01
529									</div>
530									<div class="mt-2 bold workshop-time">
531										報名時間:2020/01/01 ~ 2020/01/01
532									</div>
533									<div class="secondary size13">
534										<span><i class="fa fa-eye" aria-hidden="true"></i> 9999</span>
535										<span class="ml-3">2022/01/01</span>
536									</div>
537								</div>
538								<hr class="mb-0" />
539							</div> 
540							-->
541						</div>
542						<div id="pagination" class="text-center mt-3 flex mb-30">
543							<!-- <button class="btn btn-page size15"><i class="fa fa-arrow-left" style="margin-left: -3px;"></i></button>
544							<button class="btn btn-page size15">1</button>
545							<button class="btn btn-page size15 active">2</button>
546							<button class="btn btn-page size15">3</button>
547							<button class="btn btn-page size15"><i class="fa fa-arrow-right" style="margin-left: -3px;"></i></button> -->
548						</div>
549					</div>
550				</div>
551			</div>
552		</div>
553
554		<!-- Mobile Search Modal -->
555		<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true">
556			<div class="modal-dialog modal-lg modal-dialog-centered">
557				<div class="modal-content" style="border-radius: 15px; border: none;">
558					<div class="course-detail-bx" style="padding: 20px 20px 0px 20px; overflow-y: scroll;">
559						<div class="size16 bold mb-8">搜尋條件</div>
560						<input class="form-control size14 radius-sm" id="modal_filter_key" name="modal_filter_key" type="text" placeholder="請輸入關鍵字" />
561	
562						<div class="mt-3"></div>
563						
564						<div class="size16 bold mb-8">研習類型(主辦單位)</div>
565						<select class="form-control size14 radius-sm" id="modal_filter_type" name="modal_filter_type">
566							<option value="">請選擇研習類型</option>
567							<option value="1">基優教師研習</option>
568							<option value="2">市內一般研習</option>
569							<option value="3">外縣市研習</option>
570							<option value="6">大專研習</option>
571							<option value="7">中央研習</option>
572							<option value="4">學分/二專班</option>
573						</select>
574	
575						<div class="mt-3"></div>
576						
577						<div class="size16 bold mb-8">學習階段</div>
578						<select class="form-control size14 radius-sm" id="modal_filter_level" name="modal_filter_level">
579							<option value="">請選擇學習階段</option>
580							<option value="6">學前</option>
581							<option value="1">國小</option>
582							<option value="2">國中</option>
583							<option value="3">高中</option>
584							<option value="4">國中小</option>
585							<option value="5">國高中</option>
586						</select>
587						
588						<div class="mt-3"></div>
589						
590						<div class="size16 bold mb-8">研習時間</div>
591						<input class="form-control size14 radius-sm" id="modal_filter_event_date" name="modal_filter_event_date" type="date" placeholder="請選擇時間" />
592	
593						<div class="mt-3"></div>
594						
595						<!-- <div class="size16 bold mb-8">報名時間</div>
596						<input class="form-control size14 radius-sm" id="modal_filter_apply_date" name="modal_filter_apply_date" type="date" placeholder="請選擇時間" /> -->
597	
598						<div class="mt-30"></div>
599						<button class="btn btn-main btn-block size14 radius-md mb-60" id="modal_filter_btn" onclick="modal_search();">
600							搜尋 <span class="ml-2"><i class="fa fa-search"></i></span>
601						</button>
602					</div>
603					
604				</div>
605			</div>
606		</div>
607	</div>
608</div>
609        <footer id="footer">
610            <div class="footer-bottom">
611                <div class="container">
612                    <div class="desktop-mode">
613                        <div class="row">
614                            <div class="col-md-6 fs14 flex">
615                                <img width="40" height="40" src="/images/logo.png" alt="">
616                                <div class="ml-3">
617                                    地址:基隆市安樂區安樂路二段164號8樓<br>
618                                    電話:(02) 2430-1505
619                                </div>
620                            </div>
621                            <div class="col-md-6 fs14">
622                                <div>
623                                    © 基隆市政府教育處 版權所有<br>
624                                    最佳瀏覽狀態:Chrome 或 Firefox2.0以上‧ 解析度 1920*1080
625                                </div>
626                            </div>
627                        </div>
628                    </div>
629                    <div class="mobile-mode">
630                        <div class="col-lg-12 col-md-12 col-sm-12 text-center fs14" style="justify-content: center;">
631                            <div>
632                                © 基隆市政府教育處 版權所有
633                            </div>
634                            <div class="ml-3">
635                                地址:基隆市安樂區安樂路二段164號8樓
636                                <br>
637                                電話:(02) 2430-1505
638                            </div>
639                        </div>
640                    </div>
641                </div>
642            </div>
643        </footer>
644        <!-- Footer END ==== -->
645        <div class="back-to-top text-center d-flex align-items-center justify-content-center hide" style="z-index: 1000; margin: 0 auto;">
646            <span class="fa fa-chevron-up"></span>
647        </div>
648    </div>
649
650    <!-- External JavaScripts -->
651    
651<script src="/js/jquery.min.js"></script>
651
652    
652<script src="/vendors/bootstrap/js/popper.min.js"></script>
652
653    
653<script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
653
654    
654<script src="/vendors/bootstrap-select/bootstrap-select.min.js"></script>
654
655    
655<script src="/vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.js"></script>
655
656    
656<script src="/vendors/magnific-popup/magnific-popup.js"></script>
656
657    
657<script src="/vendors/counter/waypoints-min.js"></script>
657
658    
658<script src="/vendors/counter/counterup.min.js"></script>
658
659    
659<script src="/vendors/imagesloaded/imagesloaded.js"></script>
659
660    
660<script src="/vendors/masonry/masonry.js"></script>
660
661    
661<script src="/vendors/masonry/filter.js"></script>
661
662    
662<script src="/vendors/owl-carousel/owl.carousel.js"></script>
662
663    
663<script src="/js/moment.min.js"></script>
663
664    
664<script src="/js/functions.js"></script>
664
665    
665<script src="/js/contact.js"></script>
665
666    
666<script src="/js/sweetalert2.all.min.js"></script>
666
667    
667<script>
668        $(window).on('scroll', function () {
669            if($(window).width() < 992) {
670                $("header").css("height", "50px");
671            }
672        });
673    </script>
673
674</body>
675
676</html>
677<script>
678	let count = 10;
679	let now_page = 1;
680	let max_page = 1;
681	const workshop_types = ["", "基優教師研習", "市內一般研習", "外縣市研習", "學分/二專班", "", "大專研習", "中央研習"];
682	$(document).ready(function() {
683		getHotKeys();
684		search(true);
685    });
686
687	function getHotKeys() {
688		$.ajax({
689			type: "GET",
690			headers: {
691				"Authorization": localStorage.getItem("user_token")
692			},
693			url: "/api/workshop/hot/keys",
694			success: function(data) {
695				if(data.success) {
696					let keys = data.keys;
697					setHotKeys(keys);
698				}
699			}
700		});
701	}
702
703	function setHotKeys(keys) {
704		$(".head-hot-tag").empty();
705		if(keys.length > 0) {
706			$(".head-hot-tag").append("熱門:");
707			for(let i = 0; i < keys.length; i++) {
708				let key = keys[i];
709				let tag = `<span class="hot-tag" data-key="${encodeURIComponent(key)}">${key}</span> ${i < keys.length - 1 ? "、" : ""}`;
710				$(".head-hot-tag").append(tag);
711			}
712		}
713	}
714
715	$(document).on('click', '.hot-tag', function() {
716		let key = decodeURIComponent($(this).data("key"));
717		$("#filter_key").val(key);
718		$("#modal_filter_key").val(key);
719		search();
720    });
721	
722	async function search(init = false) {
723		$(".list-div").removeClass("bg-white");
724		$("#list").removeClass("text-center");
725		$("#list").html("<div class='data-loading mt-30'></div>");
726		$("#pagination").empty();
727		let data = await getWorkshops();
728		if(data) {
729			let workshops = data.workshops;
730			max_page = data.max_page;
731			if(workshops.length > 0) {
732				$(".list-div").addClass("bg-white");
733				setList(workshops);
734				setPage();
735			}
736			else {
737				setEmpty();
738			}			
739		}
740		else {
741			setEmpty();
742		}
743		if(!init) {
744			$("html, body").animate({ scrollTop: $(".content-area").offset().top + ($(window).width() < 992 ? 250 : -100) }, "fast");
745		}
746    }
747
748	function getWorkshops() {
749        return new Promise((resolve, reject) => {
750			let key = "";
751			let type = "";
752			let level = "";
753			let event_date = "";
754			let apply_date = "";
755			if($(window).width() >= 992) {
756				key = $("#filter_key").val();
757				type = $("#filter_type").val();
758				level = $("#filter_level").val();
759				event_date = $("#filter_event_date").val();
760				apply_date = $("#filter_apply_date").val();
761			}
762			else {
763				key = $("#modal_filter_key").val();
764				type = $("#modal_filter_type").val();
765				level = $("#modal_filter_level").val();
766				event_date = $("#modal_filter_event_date").val();
767				apply_date = $("#modal_filter_apply_date").val()
768			}
769			key = key ? key : null;
770			type = type ? type : null;
771			level = level ? level : null;
772			event_date = event_date ? event_date : null;
773			apply_date = apply_date ? apply_date : null;
774			let data = {
775				count: count,
776				page: now_page,
777				key: key,
778				type: type,
779				level: level,
780				event_date: event_date,
781				apply_date: null
782			};
783            $.ajax({
784                type: "POST",
785				headers: {
786					"Authorization": localStorage.getItem("user_token")
787				},
788                url: "/api/workshops",
789				data: data,
790                success: function(data) {
791                    if(data.success) {
792                        resolve(data);
793                    }
794                    else {
795                        resolve(null);
796                    }
797                }
798            });
799        });
800    }
801
802	$("#search").on("keydown", function(event) {
803		if(event.which === 13)
804			head_search();
805	});
806
807	function head_search() {
808		let text = $("#search").val();
809		$("#filter_key").val(text);
810		$("#modal_filter_key").val(text);
811		search();
812	}
813
814	function modal_search() {
815		let text = $("#modal_filter_key").val();
816		$("#filter_key").val(text);
817		$("#searchModal").modal("hide");
818		search();
819	}
820
821	function resetSearch() {
822		$("#filter_key").val("");
823		$("#filter_type").val("").change();
824		$("#filter_level").val("").change();
825		$("#filter_event_date").val("");
826		$("#filter_apply_date").val("");
827
828		$("#modal_filter_key").val("");
829		$("#modal_filter_type").val("").change();
830		$("#modal_filter_level").val("").change();
831		$("#modal_filter_event_date").val("");
832		$("#modal_filter_apply_date").val("");
833		search();
834	}
835
836	function setList(workshops) {
837		$("#list").empty();
838		for(let i in workshops) {
839			$("#list").append(getWorkshopHtml(workshops[i]));
840		}
841	}
842
843	function getWorkshopHtml(workshop) {
844		let type = workshop.type;
845		let type_name = type >= 1 && type <= 7 ? workshop_types[type] : "";
846		let event_date = workshop.start_time.slice(0, 10);
847		if(workshop.start_time.slice(0, 10) != workshop.end_time.slice(0, 10)) {
848			event_date += " ~ " + workshop.end_time.slice(0, 10);
849		}
850		// let apply_date = workshop.apply_start_time.slice(0, 10);
851		// if(workshop.apply_start_time.slice(0, 10) != workshop.apply_end_time.slice(0, 10)) {
852		// 	apply_date += " ~ " + workshop.apply_end_time.slice(0, 10);
853		// }
854		return `
855			<div class="padding0 item-div">
856				<div class="info-box mt-1">
857					<div class="info-flex"> 
858						<button class="btn-type type${workshop.type} size13">${type_name}</button>
859						<a class="a-item-title" href="/workshop/${workshop.workshop_code}">
860							<div class="item-title size20">${(workshop.topic ? `[${workshop.topic}] ` : ``) + workshop.name}</div>
861						</a>
862					</div>
863					<div class="mt-2 bold workshop-time">
864						研習時間:${event_date}
865					</div>
866					<div class="mt-2 bold workshop-time">
867						研習時數:${workshop.hour} 小時
868					</div>
869					<div class="secondary size13">
870						<span><i class="fa fa-eye" aria-hidden="true"></i> ${workshop.view_count}</span>
871						<span class="ml-3">${workshop.updated_at.slice(0, 10)}</span>
872					</div>
873				</div>
874				<hr class="mb-0" />
875			</div>
876		`;
877	} 
878
879	function setPage() {
880		let html = ``;
881		if(max_page >= 1) {
882			let start = now_page - 2;
883			let end = now_page + 2;
884			start = start < 1 ? 1 : start;
885			end = end > max_page ? max_page : end;
886			if(end - 5 > 0) {
887				start = end - 4;
888			}
889			if(end - start < 4) {
890				end = start + 4;
891				end = end > max_page ? max_page : end;
892			}
893			for(let i = start; i <= end; i++) {
894				html += `
895					<button class="btn btn-page size15 ${i == now_page ? `active` : ``}" onclick="changePage(${i});">${i}</button>
896				`;
897			}
898			if(start == 2) {
899				html = `<button class="btn btn-page size15 ${now_page == 1 ? `active` : ``}" onclick="changePage(1);">1</button>` + html;
900			}
901			if(start > 2) {
902				html = `
903					<button class="btn btn-page size15 ${now_page == 1 ? `active` : ``}" onclick="changePage(1);">1</button>
904					<div style="margin-top: -7px;">...</div>
905				` + html;
906			}
907		}
908		$("#pagination").html(html);
909	}
910
911	function changePage(page) {
912		if(page != now_page && !isNaN(page) && page >= 1 && page <= max_page) {
913			now_page = page;
914			search();
915		}
916	}
917
918	function setEmpty() {
919		$("#list").empty();
920		$("#pagination").empty();
921		$("#list").addClass("text-center");
922		$(".list-div").removeClass("bg-white");
923		$("#list").html(`
924			<img src="/images/empty.png" class="img-fluid" style="margin-top: 100px; max-width: 200px; opacity: .4;" />
925			<h5 style="color: #888888; margin-top: 30px;">
926				查無結果,點我<a href="javascript:void(0);" style="color: #47A1B7; text-decoration: underline;" onclick="resetSearch();">清除條件</a>
927			</h5>
928		`);
929	}
930
931	function random(min, max) {
932		return Math.floor(Math.random() * (max - min + 1) + min)
933	}
934</script>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.