From 0bb77676d6d423a2fa35af898b0526c2e16b6605 Mon Sep 17 00:00:00 2001
From: Henry Wu <its@henrywu.tw>
Date: Sat, 28 Oct 2023 14:28:18 +0800
Subject: [PATCH] =?UTF-8?q?[=E8=8B=B1=E6=96=87=E6=AE=B5=E8=80=83]=20?=
 =?UTF-8?q?=E8=AA=BF=E6=95=B4=E4=BB=8B=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 exam/index.html | 418 +++++++++++++++++-------------------------------
 1 file changed, 144 insertions(+), 274 deletions(-)
diff --git a/exam/index.html b/exam/index.html
index f6ac76b..351e555 100644
--- a/exam/index.html
+++ b/exam/index.html
@@ -1,306 +1,176 @@
 <!DOCTYPE html>
-<html>
+<html class="is-large">
 <head>
+	<title>明志科大英文段考考場、考試時間</title>
 	<meta charset="utf-8">
-	<title>英文段考考場、考試時間</title>
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0">
 	<meta property="og:description" content="Powered by MCUT Bot / Henry Wu">
 	<meta property="og:image" content="https://mcut.henrywu.tw/res/logo.png">
 	<link rel="icon" type="image/png" href="../res/logo.png">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.2/tocas.css">
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"/>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"></script>
-	<script>
-		$(function(){
-			let dep = ["管設","環資","電機電子","機械"];
-			let lev = ["初","中","高","菁英"];
-			var sortById = function(a, b) {
-				return ($(a).attr('data-sort') > $(b).attr('data-sort')) ? 1 : -1;
-			}
-			function getSortId(text) {
-				return text.replace(' ','')
-							.replace('管設',1)
-							.replace('環資',2)
-							.replace('電機電子AI',3)
-							.replace('機械',4)
-							.replace('初',1)
-							.replace('中',2)
-							.replace('高',3)
-							.replace('菁英',4)
-							.replace('A',1)
-							.replace('B',2)
-							.replace('C',3)
-							.replace('D',4)
-							.replace('E',5)
-							.replace('F',6)
-			}
-			$.ajax({
-				url: 'https://mcut.henrywu.tw/exam/data.json?v=20231028',
-				dataType: 'json',
-				success: function(res) {
-					$('#menu,.filter,.swiper-container').show();
-					$('#loading').remove();
-					$.each(res, function(b, s) {
-						h = '<div class="ts attached segment" data-sort="'+getSortId(s[0])+'">'+
-							'<div class="ts header">'+s[0]+'<span>　'+s[1]+'</span></div>'+
-							'<i class="user icon"></i>'+s[2]+'　<i class="marker icon"></i>'+s[5]+
-						'</div>';
-						if(s[1] == '生活與職場英文') {
-							$('#s1').append(h);
-							$('.date-1').html('<i class="clock icon"></i>'+s[3]+' '+s[4]);
-						}
-						else if(s[1] == '英語聽講') {
-							$('#s2').append(h);
-							$('.date-2').html('<i class="clock icon"></i>'+s[3]+' '+s[4]);
-						}					
-					});
-					$('#s1 .segment').sort(sortById).appendTo('#s1');
-					$('#s2 .segment').sort(sortById).appendTo('#s2');
-					$('.swiper-scrollbar-outer').show();
-					swiper.update();
-				},
-				error: function() {
-					$('#loading').html('<div class="ts center aligned icon header"><i class="caution circle icon"></i>載入失敗<div class="sub header">讀取時發生錯誤，請稍後再試。</div></div>');
-				}
-			});
-			$('.item').on('click',function(){
-				$('html, body').animate({
-					scrollTop: 0
-				}, 500);
-				updateFilter();
-				$('#s3 .segment').show();
-				swiper.slideTo(parseInt($(this).attr('data-id')));
-			});
-			$('.filter button').on('click',function(){
-				c = $('[data-filter="'+$(this).attr('data-filter')+'"]').hasClass('active');
-				if($(this).parent().hasClass('a')) $('.a.buttons .button').removeClass('active');
-				if($(this).parent().hasClass('b')) $('.b.buttons .button').removeClass('active');
-				if(!c) $('[data-filter="'+$(this).attr('data-filter')+'"]').addClass('active');
-				updateFilter();
-				$('#s3 .segment').show();
-			});
-			function updateFilter() {
-				dep = [];
-				lev = [];
-				$('.filter .a button.active').each(function(){
-					dep.push($(this).attr('data-filter'));
-				});
-				$('.filter .b button.active').each(function(){
-					lev.push($(this).attr('data-filter'));
-				});
-				if(dep.length == 0) dep = ["管設","環資","電機電子AI","機械"];
-				if(lev.length == 0) lev = ["初","中","高","菁英"];
-				$('.swiper-slide .segment:not(.filter)').hide();
-				$('.swiper-slide .segment:not(.filter)').each(function(){
-					el = $(this);
-					t = $(this).find('.header').text();
-					$.each(dep, function(i,j) {
-						$.each(lev, function(ii,k) {
-							console.log(t,j,k)
-							if(t.includes(j) && t.includes(k)) el.show();
-						});
-					});
-				});
-				swiper.update();
-			}
-			var swiper = new Swiper('.swiper-container', {
-				scrollbar: {el: '.swiper-scrollbar'},
-				autoHeight: true
-			});
-			if (navigator.share) { $('#share').show(); }
-			$('#share a').on('click', function() {
-				navigator.share({
-					title: '明志科大英文段考考場、考試時間',
-					text: '',
-					url: 'https://mcut.henrywu.tw/exam',
-				}).then(() => console.log('Successful share'))
-				.catch((error) => console.log('Error sharing', error));
-			});
-		});
-	</script>
-	<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZHZ6VYR7M"></script>
-	<script>
-		window.dataLayer = window.dataLayer || [];
-		function gtag(){dataLayer.push(arguments);}
-		gtag('js', new Date());
-
-		gtag('config', 'G-DZHZ6VYR7M');
-	</script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.2.4/tocas.min.css" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.3/swiper-bundle.min.css" />
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.3/swiper-bundle.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 	<style>
-		.swiper-slide span {
-			display:none
-		}
-		
-		a {
-			color:#e74c3c;
-			text-decoration:none
-		}
-		
-		a:hover,
-		a:active {
-			color:#c0392b;
-			text-decoration:none
-		}
-
-		#menu .item {
-			border-bottom: none
-		}
-
-		#menu .item:hover:before {
-			background:rgb(244, 244, 244)
+		.cell.is-fluid {
+			overflow: hidden;
 		}
 
 		.swiper-slide {
-			min-height: calc(100vh - 73px)
-		}
-
-		.swiper-scrollbar-outer {
-			top:0;
-			z-index:10000;
-			position: fixed;
-			width:600px;
-			max-width:100%;
-			margin: 41px auto 0;
-			display: none
+			height: 100vh;
+			overflow-y: scroll;
+			padding-bottom: 200px;
 		}
 
-		.swiper-scrollbar {
+		.swiper-scrollbar.swiper-scrollbar-horizontal {
+			background: transparent;
 			width: 100%;
-			height: 2px
-		}
-		
-		.date {
-			font-size: 120%;
-			padding: 5px 0
+			left: 0;
+			bottom: auto;
+			margin-top: -3px;
 		}
 
-		.ts.button:not(.visible):not(.hidden):not(.active):not(:active):not(.opinion):hover {
-			background-color: #eee !important
+		.swiper-scrollbar-drag {
+			background: var(--ts-gray-900);
+			border-radius: 0;
 		}
 
-		#loading {
-			padding: 40vh 0 38vh;
+		.ts-box {
+			border-right: none;
+			border-left: none;
 		}
 
-		@media (prefers-color-scheme: dark) {
-			* {
-				color: #FFF !important;
-			}
-
-			body {
-				background: #111;
-			}
-
-			.ts.segment {
-				background: #222;
-				border-color: #000 !important;
-			}
-
-			.ts.segment.secondary {
-				background: #333;
-			}
-
-			#menu {
-				background: #444 !important;
-			}
-
-			button {
-				background: #444 !important;
-				border: none !important;
-			}
-
-			.ts.button:not(.visible):not(.hidden):not(.active):not(:active):not(.opinion):hover,
-			button.active {
-				background: #222 !important;
-				color: #FFF !important;
-			}
-
-			footer {
-				background: #222 !important;
-				color: #FFF !important;
-			}
-
-			.swiper-scrollbar {
-				background: #333 !important;
-			}
-
-			.swiper-scrollbar-drag {
-				background: #FFF !important;
-			}
-
-			.ts.menu.pointing.secondary {
-				border-bottom: none !important;
-			}
-
-			a {
-				text-decoration: underline;
-			}
+		.footer {
+			padding: 5px 0;
+			text-align: center;
 		}
 	</style>
+	<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZHZ6VYR7M"></script>
+	<script>
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+		gtag('config', 'G-DZHZ6VYR7M');
+	</script>
 </head>
 <body>
-	<div id="main" style="width:600px;max-width:100%;margin:43px auto 30px">
-		<div id="menu" class="ts large pointing secondary evenly divided top fixed menu" style="width:600px;max-width:100%;margin:0 auto;background:#F4F4F4;display:none;border-bottom-color:rgb(244, 244, 244)">
-			<a data-id="0" class="item">大一生活與職場英文</a>
-			<a data-id="1" class="item">大二英語聽講</a>
-		</div>
-		<div id="loading">
-			<div class="ts active inverted dimmer">
-				<div class="ts text loader">讀取中</div>
-			</div>
-			<br><br><br><br>
-		</div>
-		<div class="swiper-container" style="display:none;">
-			<div class="swiper-scrollbar-outer">
+	<div class="ts-app-layout is-full is-vertical">
+		<div class="cell is-secondary">
+			<div class="ts-container is-very-narrow is-fitted">
+				<div class="ts-tab is-fluid">
+					<a class="item" data-view="0">大一生活與職場英文</a>
+					<a class="item" data-view="1">大二英文聽講</a>
+				</div>
 				<div class="swiper-scrollbar"></div>
 			</div>
-			<div class="swiper-wrapper">
-				<div id="s1" class="swiper-slide">
-					<div data-sort="0" class="filter ts secondary segment attached" style="text-align:center;padding-top:8px;padding-bottom:8px;display:none">
-						<div class="date date-1"></div>
-						<div class="a ts small very compact buttons" style="margin:5px 0;">
-							<button class="ts button" data-filter="管設">管設</button>
-							<button class="ts button" data-filter="環資">環資</button>
-							<button class="ts button" data-filter="電機電子AI">電機電子 AI</button>
-							<button class="ts button" data-filter="機械">機械</button>
-						</div>
-						<div style="display:block">
-							<div class="b ts small very compact buttons">
-								<button class="ts button" data-filter="初">初級</button>
-								<button class="ts button" data-filter="中">中級</button>
-								<button class="ts button high"  data-filter="高">高級</button>
-								<button class="ts button legend"  data-filter="菁英">菁英</button>
-							</div>
-						</div>
+		</div>
+		<div class="cell">
+			<div class="ts-segment is-secondary  is-center-aligned" style="border:none;">
+				<div class="ts-container is-very-narrow">
+					<div class="ts-selection is-dense is-small">
+						<label class="item"><input type="radio" name="dept" value="管設" /><div class="text">管設</div>
+						</label>
+						<label class="item"><input type="radio" name="dept" value="環資" /><div class="text">環資</div>
+						</label>
+						<label class="item"><input type="radio" name="dept" value="電機電子" /><div class="text">電機電子 AI</div>
+						</label>
+						<label class="item"><input type="radio" name="dept" value="機械" /><div class="text">機械</div>
+						</label>
 					</div>
-				</div>
-				<div id="s2" class="swiper-slide">
-					<div data-sort="0" class="filter ts secondary segment attached" style="text-align:center;padding-top:8px;padding-bottom:8px;display:none">
-						<div class="date date-2"></div>
-						<div class="a ts small very compact buttons" style="margin:5px 0;">
-							<button class="ts button" data-filter="管設">管設</button>
-							<button class="ts button" data-filter="環資">環資</button>
-							<button class="ts button" data-filter="電機電子AI">電機電子 AI</button>
-							<button class="ts button" data-filter="機械">機械</button>
-						</div>
-						<div style="display:block">
-							<div class="b ts small very compact buttons">
-								<button class="ts button" data-filter="初">初級</button>
-								<button class="ts button" data-filter="中">中級</button>
-								<button class="ts button high"  data-filter="高">高級</button>
-								<button class="ts button legend"  data-filter="菁英">菁英</button>
-							</div>
-						</div>
+					<div class="ts-space is-small"></div>
+					<div class="ts-selection is-dense is-small">
+						<label class="item"><input type="radio" name="level" value="初" /><div class="text">初級</div>
+						</label>
+						<label class="item"><input type="radio" name="level" value="中" /><div class="text">中級</div>
+						</label>
+						<label class="item"><input type="radio" name="level" value="高" /><div class="text">高級</div>
+						</label>
+						<label class="item"><input type="radio" name="level" value="菁英" /><div class="text">菁英</div>
+						</label>
 					</div>
 				</div>
 			</div>
 		</div>
-	</div>
-	<footer style="position:fixed;z-index:10000;width:100%;padding:5px;bottom:0;background:#FFF;text-align:center;box-shadow:0 0 5px 5px rgba(0,0,0,.05)">
-		<div style="width:600px;max-width:100%;margin:0 auto">
-			Powered by <a href="https://line.me/R/ti/p/%40ptq1966v" target="_blank">MCUT Bot</a> / <a href="https://henrywu.tw" target="_blank">Henry Wu</a><span id="share" style="display:none">・<a>分享</a></span>
+		<div class="cell is-fluid">			
+			<div class="swiper">
+				<div class="swiper-wrapper">
+					<div class="swiper-slide" data-list="生活與職場英文"></div>
+					<div class="swiper-slide" data-list="英語聽講"></div>
+				</div>
+			</div>
 		</div>
-	</footer>
+		<div class="cell footer">
+			Powered by <a href="https://line.me/R/ti/p/%40ptq1966v" target="_blank">MCUT Bot</a> / <a href="https://henrywu.tw" target="_blank">Henry Wu</a> | <a href="https://line.me/R/ti/p/%40221oslxd" target="_blank">問題回報</a><span id="share" style="display:none"> | <a href="#!">分享</a></span>
+		</div>
+	</div>
+	<script>
+		var swiper = new Swiper('.swiper', {
+			scrollbar: {el: '.swiper-scrollbar'}
+		});
+
+		function sortById(a, b) {
+			return ($(a).attr('data-sort') > $(b).attr('data-sort')) ? 1 : -1;
+		}
+
+		function getSortId(text) {
+			return text.replace(' ','').replace('管設',1).replace('環資',2).replace('電機電子AI',3).replace('機械',4).replace('初',1).replace('中',2).replace('高',3).replace('菁英',4).replace('A',1).replace('B',2).replace('C',3).replace('D',4).replace('E',5).replace('F',6);
+		}
+
+		$.ajax({
+			url: 'https://mcut.henrywu.tw/exam/data.json?v=20231028',
+			dataType: 'json',
+			success: function(res) {
+				$.each(res, function(i, v) {
+					$('[data-list="'+v[1]+'"]').append('<div class="ts-box is-squared" data-sort="'+getSortId(v[0])+'" data-name="'+v[0]+'"><div class="ts-container is-very-narrow is-fitted"><div class="ts-content"><div class="ts-header">'+v[0].replace(/([\x00-\xFF]+)/g, " $1 ")+'</div><p><span class="ts-icon is-user-icon is-end-spaced"></span>'+v[2]+'　<span class="ts-icon is-location-dot-icon is-end-spaced"></span>'+v[5]+'</p></div></div></div>');
+				});
+				$('[data-list="生活與職場英文"] .ts-box').sort(sortById).appendTo('[data-list="生活與職場英文"]');
+				$('[data-list="英語聽講"] .ts-box').sort(sortById).appendTo('[data-list="英語聽講"]');
+			}
+		});
+
+		$('input[type="radio"]').on('click',function(){
+			if($(this).hasClass('clicked')) {
+				$(this).removeClass('clicked').prop('checked', false);
+				$('.ts-box').hide();
+				$('.ts-box').each(function(i,e){
+					if(
+						$(this).attr('data-name').includes($('[name="dept"]:checked').val() || '') &&
+						$(this).attr('data-name').includes($('[name="level"]:checked').val() || '')
+					) {
+						$(e).show();
+					}
+				});
+			}
+		})
+
+		$('input[type="radio"]').on('change',function(){
+			$(this).parent().parent().find('input').removeClass('clicked');
+			$(this).addClass('clicked');
+			$('.ts-box').hide();
+			$('.ts-box').each(function(i,e){
+				if(
+					$(this).attr('data-name').includes($('[name="dept"]:checked').val() || '') &&
+					$(this).attr('data-name').includes($('[name="level"]:checked').val() || '')
+				) {
+					$(e).show();
+				}
+			});
+		});
+
+		$('.ts-tab .item').on('click',function(){
+			$('.swiper-slide').animate({scrollTop: 0}, 500);
+			swiper.slideTo(parseInt($(this).attr('data-view')));
+		});
+
+		if (navigator.share) { $('#share').show(); }
+		$('#share a').on('click', function() {
+			navigator.share({
+				title: '明志科大英文段考考場、考試時間',
+				text: '',
+				url: 'https://mcut.henrywu.tw/exam',
+			}).then(() => console.log('Successful share'))
+			.catch((error) => console.log('Error sharing', error));
+		});
+	</script>
 </body>
-</html>
\ No newline at end of file
+</html>
