refactor js/html. origin data from https://qupyqupy.blogspot.com/2025/05/2.html

BD2.html

<!-- origin data from https://qupyqupy.blogspot.com/2025/05/2.html -->
<script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>

<style>
body {
	background-color: #dca;
}

* {
	box-sizing: border-box;
}

#form {
	display: flex;
	gap: 1em 2em;
	flex-wrap: wrap;

	& > div {

	}
	& select {
		width: clamp(10rem, 20vw, 15rem);
	}
}

#main {
	color: #333;
	font-size: 1.2rem;
	line-height: 1.5;
	background-color: #eec;
	padding: 1em;

	h2 {
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 1.5em;
		color: white;
		font-weight: bold;
		text-shadow: 0 0 3px white, 0 0 5px black;
		padding: 3px;
		letter-spacing: 3px;
		background:
		radial-gradient(
			circle at bottom left,
			transparent 0,
			transparent 2em,
			beige 2em,
			beige 4em,
			transparent 4em,
			transparent 6em,
			khaki 6em,
			khaki 8em,
			transparent 8em,
			transparent 10em
		),
		radial-gradient(
			circle at top right,
			transparent 0,
			transparent 2em,
			beige 2em,
			beige 4em,
			transparent 4em,
			transparent 6em,
			khaki 6em,
			khaki 8em,
			transparent 8em,
			transparent 10em
		),
		radial-gradient(
			circle at top left,
			transparent 0,
			transparent 2em,
			navajowhite 2em,
			navajowhite 4em,
			transparent 4em,
			transparent 6em,
			peachpuff 6em,
			peachpuff 8em,
			transparent 8em,
			transparent 10em
		),
		radial-gradient(
			circle at bottom right,
			transparent 0,
			transparent 2em,
			palegoldenrod 2em,
			palegoldenrod 4em,
			transparent 4em,
			transparent 6em,
			peachpuff 6em,
			peachpuff 8em,
			transparent 8em,
			transparent 10em
		), blanchedalmond;

		background-blend-mode: multiply;
		background-size: 10em 10em;
		background-position: 0 0, 0 0, 5em 5em, 5em 5em;
	}

	em {
		font-style: normal;
		display: inline-flex;
		background-color: #0003;
		background-color: #d5d5d5;
		border: 1px solid #959593;
		padding: 0px 5px;
		border-radius: 5px;
		margin: 2px 0;
	}

	iframe {
		display: none;
		width: 100%;
		aspect-ratio: 16 / 9;
		background-color: inherit;
		margin-bottom: 2em;
	}

	blockquote {
		position: relative;
		width: 95%;
		border-radius: 2em 1em;
		border: 4px solid #F66;
		font-weight: bold;
		color: #F66;
		padding-left: 1em;
		padding-right: 2em;
		margin: 0;

		em {
			color: #444;
		}

		&::after {
			content: url('https://pic.pimg.tw/qupyqupy/1556037572-2117524936.png');
			position: absolute;
			right: .5em;
			top: .4em;
		}
	}
}

hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border: none;
	border-top: 5px solid #F99;
	border-bottom: 5px solid #FCC;
}
</style>

<hr />

<header id="header">
	<form id="form"></form>
</header>

<hr />

<main id="main"></main>

<script>
let cates = [
	{
		title: '主線劇情',
		sections: [
			'CH01 血騎士',
			'CH02 蒼藍魔女',
			'CH03 迷霧神射手',
			'CH04 眼鏡與貓',
		],
	},
	{
		title: '角色劇情',
		sections: [],
	},
	{
		title: '聯動劇情',
		sections: [
			'哥布林殺手II',
		],
	},
	{
		title: '活動劇情',
		sections: [
			'SUMMER_KNIGHT',
			'MIDSUMMER DREAM',
		],
	},
	{
		title: '　　其他',
		sections: [
			'公會戰',
			'末日之書',
			'冒險航路',
			'鏡中之戰',
			'惡魔城',
			'格魯菲餐廳',
			'格魯菲餐廳(有緣之客)',
		],
	},
];

let contents = [
	// title: '主線劇情',
	[
`
## CH01 血騎士
主角 _拉德爾_ 是［盧戈鎮］的採藥人，為了替義妹 _米莎_ 尋找母親的遺物項鍊，被黑魔法師襲擊，還好遇到外號［皎潔死神］的騎士 _悠絲緹亞_ 解圍而因此得救。
_悠絲緹亞_ 此行是因為聽聞［盧戈鎮］有治百病的草藥，或許與黑魔法師有關，而 _悠絲緹亞_ 的目的就是剿滅這些禍害。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH01%EF%BC%BB%E8%A1%80%E9%A8%8E%E5%A3%AB01%EF%BC%BD%3A1?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

找尋黑魔法師的過程中，發現所謂治百病的草藥其實含有黑魔法的詛咒，吃下去的人會變成不死生物，許多冒險者都因此中招犧牲，而這一切都是 _拉德爾_ 的養父也就是［盧戈鎮］的村長所為，他不僅設下詛咒陷害尋找草藥的冒險者，而對自己的女兒 _米莎_ 下毒手， _米莎_ 的怪病就是黑魔法的詛咒， _拉德爾_ 身上的［血刻印］則是村長想要完成的目標。
最終村長被眾人擊敗化為灰燼，可惜 _米莎_ 因為被抽取［泰拉］而失去生命，為了防止類似悲劇再度發生， _拉德爾_ 決定跟著 _悠絲緹亞_ 踏上討伐黑魔法師的旅途。
> _拉德爾_ 的［血刻印］擁有強大的癒合能力， _悠絲緹亞_ 頭上生角，有吸血的衝動，似乎可以透過吸食 _拉德爾_ 的血液獲得強大的力量。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH01%EF%BC%BB%E8%A1%80%E9%A8%8E%E5%A3%AB02%EF%BC%BD%3Ad?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

![](https://drive.google.com/thumbnail?id=1g6nwKZ587ahGySRJJk5pwAaSx7mWzuIu&sz=w500)

## 褐炭傳說
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH01%E6%94%AF%E7%B7%9A%EF%BC%BB%E8%A4%90%E7%82%AD%E5%82%B3%E8%AA%AA%EF%BC%BD%3Ab?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

## 盧戈鎮懸案
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH01%E6%94%AF%E7%B7%9A%EF%BC%BB%E7%9B%A7%E6%88%88%E9%8E%AE%E6%87%B8%E6%A1%88%EF%BC%BD%3A2?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`
## CH02 蒼藍魔女

 _悠絲緹亞_ 與 _拉德爾_ 來到礦山鎮［達雷普］尋找被稱為［蒼藍魔女］的 _莎赫拉查德_ ，不過鎮上的村民對她的印象可不太好，好不容易才得知她在封鎖的礦山。

進入礦山後，一群來歷不明的士兵與不死生物在裡面把守，探索過程中意外收服了不死生物 _威格_ ，祂可是爆破專家，在祂的協助下終於找到 _莎赫拉查德_ 。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH02%EF%BC%BB%E8%92%BC%E8%97%8D%E9%AD%94%E5%A5%B301%EF%BC%BD%3A6?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

既然出現［不死生物］，鎮上發生的事情肯定與黑魔法師有關，在調查的過程中，眾人揭發高利貸挪用物資的惡行，接著進入礦山尋找被士兵帶走的醫生 _雷南特_ ，一路抵達礦山深處，發現 _德溫貴族_ 、 _羅坦軍閥_ 、［貝克王族］的兩位公主 _米沃什_ 、 _米拉耶_ 正在進行密談，雖然沒聽到重要內容，但一定是見不得光的事情，眾人隨即遭到攻擊。

就在處理完第一波敵人時，一個弓箭手突然闖入向 _悠絲緹亞_ 發出毒箭，權貴們則趁隙逃跑，眾人回到鎮上後， _悠絲緹亞_ 一直昏迷不醒， _拉德爾_ 想到之前 _悠絲緹亞_ 喝了自己的血突然獲得強大力量，於是抱著死馬當活馬醫的心態，將自己的血餵給她，果然成功讓 _悠絲緹亞_ 甦醒。

在 _雷南特_ 醫生的分析下，得知毒箭使用名叫［阿德林］的毒藥，中毒者將轉化為不死生物，這樣的藥肯定有專屬的銷售渠道，循線或許能找到幕後黑手，於是 _悠絲緹亞_ 一行人準備前往傭兵城市［布倫］調查，而 _莎赫拉查德_ 失蹤的姊姊 _泰瑞絲_ 可能與黑魔法師有關，因為目的相同，所以 _莎赫拉查德_ 也加入隊伍。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH02%EF%BC%BB%E8%92%BC%E8%97%8D%E9%AD%94%E5%A5%B302%EF%BC%BD%3Af?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

## 威格

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH02%E6%94%AF%E7%B7%9A%EF%BC%BB%E5%A8%81%E6%A0%BC%EF%BC%BD%3A9?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`
## CH03 迷霧神射手

到了傭兵城市［布倫］後，發現商店正在出售 _莎赫拉查德_ 遺失的魔石，循著這條線索推測之前使用毒箭的弓箭手叫做 _格雷_ ，人稱［迷霧神射手］。

在城鎮四處打探，找到 _格雷_ 的妹妹 _維尼爾_ ，她是個盜賊，從她對哥哥的認識， _格雷_ 是絕對不會跟黑魔法師合作，要知道事情的原委，還是得先找到本人。

在 _維尼爾_ 的協助下，終於在下水道找到 _格雷_ ，他也正在找販賣［阿德林］的商人，之前會對 _悠絲緹亞_ 攻擊，純粹是受到別人的委託，而那時他以為手中毒藥只是普通的安眠藥。

雖然曾經是敵人，但如今目標都是幕後的黑魔法師，於是 _格雷_ 加入隊伍，在下水道深處找到［阿德林］的實驗區域，還看見 _格雷_ 的朋友 _克勞_ 被變成［不死生物］，親手結束摯友的痛苦後，眾人決定先將此處倖存的傷者帶回城鎮，準備充足之後再次探索。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH03%EF%BC%BB%E8%BF%B7%E9%9C%A7%E7%A5%9E%E5%B0%84%E6%89%8B01%EF%BC%BD%3A3?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

到了下水道深處，終於找到罪魁禍首 _巫妖克雷德曼_ ，他認為［不死生物］是種進化，於是將［阿德林］改良，以便於散播出去，擊敗他後，整件事情由傭兵公會接手，開始回收被當作安眠藥的［阿德林］。

而之前委託 _格雷_ 攻擊 _悠絲緹亞_ 的報酬已經送來公會，聽櫃台說才剛送來不久，眾人隨即追了上去，但對方是個身手敏捷的獸人女孩，一溜煙就消失的無影無蹤，眾人決定追上去，與委託人當面對質，解開他襲擊 _悠絲緹亞_ 的動機之謎。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH03%EF%BC%BB%E8%BF%B7%E9%9C%A7%E7%A5%9E%E5%B0%84%E6%89%8B02%EF%BC%BD%3Ac?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

## 和蝴蝶結一起消失

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH03%E6%94%AF%E7%B7%9A%EF%BC%BB%E5%92%8C%E8%9D%B4%E8%9D%B6%E7%B5%90%E4%B8%80%E8%B5%B7%E6%B6%88%E5%A4%B1%EF%BC%BD%3A9?r=9ciUzmJiVS1PVirDyZvb38HDaHahdDkb" allowfullscreen></iframe>
`,


`
## CH04 眼鏡與貓

開頭是一段 _格雷_ 回憶過去的片段，他的父親與弟弟正在屠殺居民，厭惡這種行為的他，因為年幼無力，只能趁亂救走兩個少女。

回說現在，一行人追著獸人少女來到峽谷鎮［凱洛］，一隻會說話的貓突然出現留下訊息，眾人還沒搞清楚狀況，貓就消失了，追蹤貓的蹤跡發現一個正在哭泣的小孩，旁邊是個穿紅色斗篷的男人，因為他把小孩手中的藥瓶撞碎，現在正在苦惱怎麼安撫，還好遇到 _拉德爾_ 這個採藥人，聞了下地下殘留的藥液，隨即又做出同款藥品，紅色斗篷的男人為了感謝，就將逃跑貓的蹤跡告訴眾人，並且表示有恩必報。

循著線索，一行人來到山上的空屋，發現屋主正進行抑制黑魔法的研究，同時發現被魔獸襲擊的獸人少女，救下少女並且給她好吃好喝後，得知她叫做 _魯_ ，而那屋子的主人 _奧爾施塔因_ 因為生病危在旦夕， _魯_ 便請求眾人幫忙救救他。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH04%EF%BC%BB%E7%9C%BC%E9%8F%A1%E8%88%87%E8%B2%9301%EF%BC%BD%3A0?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

再次上山，路上已經啟動許多防禦用的魔力牆，在 _魯_ 的幫助下，終於解開所有裝置，然而屋子前站著的 _奧爾施塔因_ 明顯已經不死生物化，戰鬥過程中發現他仍然保有意識，於是 _拉德爾_ 決定餵他自己的血試試，結果奇蹟地將 _奧爾施塔因_ 恢復成正常人。

恢復體力後， _奧爾施塔因_ 開始敘述整件事情，他長期以來都在跟魔法師對抗，遭到各種詛咒攻擊，直到最近他發現黑魔法師們盯上了有［血刻印］的 _拉德爾_ ，他的血有神奇的力量，能增強受詛咒人的力量，甚至去除［阿德林］這種毒，為了驗證真實性，才會委託 _格雷_ 將沾有［阿德林］的毒箭射向 _悠絲緹亞_ ，雖然聽起來有點胡來，但 _奧爾施塔因_ 本人相信事情的發展會如自己預想一樣，眾人皆能安然無恙。

為了補償， _奧爾施塔因_ 今後會與眾人共享情報，並且提議擊退如今潛藏在山上的黑魔法師組織［科庫托斯］。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH04%EF%BC%BB%E7%9C%BC%E9%8F%A1%E8%88%87%E8%B2%9302%EF%BC%BD%3A5?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

上山的路上， _奧爾施塔因_ 說出 _魯_ 的身世，她是［科庫托斯］的實驗體，被逼喝下［阿德林］來進行實驗， _奧爾施塔因_ 為了救她強行將［阿德林］吸出，這才會中了毒。

現在想起來，［科庫托斯］肯定是為了回收 _魯_ 才會派人來到這，在敵人據點遇到跟 _魯_ 一樣遭遇的 _安柏_ ，她忠於組織並且固執地要用武力將 _魯_ 奪回，這一切都是因為組織有力量強大的五位［使者］，只有成為［使者候補］進而成為［使者］才是脫離實驗體悲劇的唯一方法，就在 _安柏_ 戰敗岌岌可危之時，［使者］之一的 _布萊德_ 透過［次元門］現身，強大的實力瞬間壓制在場眾人，眼看就要團滅時，之前遇到的紅色斗篷男人出手擋住 _布萊德_ ，給眾人製造逃跑的機會。

逃回鎮上的一行人推測［科庫托斯］竟然出動［使者］，目的顯然不是 _魯_ ，而是有［血刻印］的 _拉德爾_ ，要對付這麼強大的組織，必須集結更多的力量，於是 _奧爾施塔因_ 提議聯手，並且請一行人前往［沙漠城市亞拉里克］，與大陸最強傭兵團［阿爾德巴倫］結盟。

另一邊，紅色斗篷男人與 _布萊德_ 仍戰的不分勝負，他狂態畢現，脫口而出自己的名字 _艾瑞克_ 。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_CH04%EF%BC%BB%E7%9C%BC%E9%8F%A1%E8%88%87%E8%B2%9303%EF%BC%BD%3A1?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,


``,

	],

	// title: '角色劇情',
	[
		'',
	],

	// title: '聯動劇情',
	[
		`
## 哥布林殺手II

_莎赫拉查德_ 一行人來到［哥布林遺跡］，對於這弱小的魔獸 _格雷_ 顯得有些輕敵，這讓 _莎赫拉查德_ 回想起幾年前發生的事情。

那時 ˍ莎赫拉查德為了［古代遺物］來到［哥布林遺跡］，卻因為輕敵差點遭到［哥布林］侵犯，還好被來自異世界的［哥殺三人組］所救。

_哥布林殺手_ 注意到逃走的［哥布林］似乎抱著將他們轉移過來的［鏡子］也就是 _莎赫拉查德_ 口中的［古代遺物］，為了奪回［鏡子］，眾人決定先回據點休整，順便治療 _莎赫拉查德_ 的傷口。

再次進軍［哥布林遺跡］，_莎赫拉查德_ 顯然沒有吸取之前的教訓，又一次因為輕敵被［哥布林］重傷，這次差點就去見太奶了。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_%E8%81%AF%E5%8B%95%EF%BC%BB%E5%93%A5%E5%B8%83%E6%9E%97%E6%AE%BA%E6%89%8B01%EF%BC%BD%3Ab" allowfullscreen></iframe>

因為恐懼，_莎赫拉查德_ 不敢再踏入［哥布林遺跡］，但在跟 _女神官_ 與營地的成員交談後，決定相信自己重拾信心，這時她已經不再輕敵，更在危急時刻幫助 _哥布林殺手_ 一行人。

最後成功奪回鏡子的 _哥布林殺手_ 一行人回到自己的世界，這場如夢般冒險就此深刻在 _莎赫拉查德_ 的記憶中。

<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_%E8%81%AF%E5%8B%95%EF%BC%BB%E5%93%A5%E5%B8%83%E6%9E%97%E6%AE%BA%E6%89%8B02%EF%BC%BD%3A1?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
		`,
	],

	// title: '活動劇情',
	[
		// SUMMER_KNIGHT
`
## 派對結束了然而、這是誤會傑尼斯、必須解開誤會
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2FSUMMER_KNIGHT01%EF%BC%BB%E6%B4%BE%E5%B0%8D%E7%B5%90%E6%9D%9F%E4%BA%86%E7%84%B6%E8%80%8C%E3%80%81%E9%80%99%E6%98%AF%E8%AA%A4%E6%9C%83%E5%82%91%E5%B0%BC%E6%96%AF%E3%80%81%E5%BF%85%E9%A0%88%E8%A7%A3%E9%96%8B%E8%AA%A4%E6%9C%83%EF%BC%BD%3Ac?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

## 狐狸般的女子、把我的章魚還來、引誘奧克托比烏斯大作戰
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2FSUMMER_KNIGHT02%EF%BC%BB%E7%8B%90%E7%8B%B8%E8%88%AC%E7%9A%84%E5%A5%B3%E5%AD%90%E3%80%81%E6%8A%8A%E6%88%91%E7%9A%84%E7%AB%A0%E9%AD%9A%E9%82%84%E4%BE%86%E3%80%81%E5%BC%95%E8%AA%98%E5%A5%A7%E5%85%8B%E6%89%98%E6%AF%94%E7%83%8F%E6%96%AF%E5%A4%A7%E4%BD%9C%E6%88%B0%EF%BC%BD%3A1?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

## 讓我來解決、拜託再多拿點走
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2FSUMMER_KNIGHT03%EF%BC%BB%E8%AE%93%E6%88%91%E4%BE%86%E8%A7%A3%E6%B1%BA%E3%80%81%E6%8B%9C%E8%A8%97%E5%86%8D%E5%A4%9A%E6%8B%BF%E9%BB%9E%E8%B5%B0%EF%BC%BD%3Ad?r=3hmZA94HpFeDm1kk9EMY19J1AY7ny9uR" allowfullscreen></iframe>
`,

		// MIDSUMMER DREAM
`
## MIDSUMMER DREAM
<iframe loading="lazy"src="https://odysee.com/%24/embed/%40%E7%A9%BF%E8%B6%8A%E6%99%82%E7%A9%BA%E7%9A%84%E8%B2%93%E6%94%AF%E7%B7%9A%E5%8A%87%E6%83%85%3Ad%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832%EF%BC%BBMIDSUMMER-DREAM01%EF%BC%BD%3A5?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

<iframe loading="lazy"src="https://odysee.com/%24/embed/%40%E7%A9%BF%E8%B6%8A%E6%99%82%E7%A9%BA%E7%9A%84%E8%B2%93%E6%94%AF%E7%B7%9A%E5%8A%87%E6%83%85%3Ad%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832%EF%BC%BBMIDSUMMER-DREAM02%EF%BC%BD%3Af?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,
	],

	// title: '　　其他',
	[
`## 公會聯合戰開啟
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832%EF%BC%BB%E5%85%AC%E6%9C%83%E8%81%AF%E5%90%88%E6%88%B0%E9%96%8B%E5%95%9F%EF%BC%BD%3A9?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`## 末日之書開啟
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832%EF%BC%BB%E6%9C%AB%E6%97%A5%E4%B9%8B%E6%9B%B8%E9%96%8B%E5%95%9F%EF%BC%BD%3A9?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`## 冒險航線開啟
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832%EF%BC%BB%E5%86%92%E9%9A%AA%E8%88%AA%E7%B7%9A%E9%96%8B%E5%95%9F%EF%BC%BD%3Aa?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`
## 鏡中之戰開啟
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832%EF%BC%BB%E9%8F%A1%E4%B8%AD%E4%B9%8B%E6%88%B0%E9%96%8B%E5%95%9F%EF%BC%BD%3Ae?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`
## 惡魔城開啟
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832%EF%BC%BB%E6%83%A1%E9%AD%94%E5%9F%8E%E9%96%8B%E5%95%9F%EF%BC%BD%3Aa?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`
## 格魯菲餐廳開啟
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_%E7%B6%93%E7%87%9F%EF%BC%BB%E6%A0%BC%E9%AD%AF%E8%8F%B2%E9%A4%90%E5%BB%B3%EF%BC%BD%3Ad?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,

`
## 墨菲亞
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40W%E6%B3%95%E5%A5%87%E7%9A%84%E5%B8%9D%E7%AA%A9W%3A7%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_%E6%9C%89%E7%B7%A3%E4%B9%8B%E5%AE%A2%EF%BC%BB%E5%A2%A8%E8%8F%B2%E4%BA%9E%EF%BC%BD%3Aa?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

## 內布利斯
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40%E7%A9%BF%E8%B6%8A%E6%99%82%E7%A9%BA%E7%9A%84%E8%B2%93%E6%94%AF%E7%B7%9A%E5%8A%87%E6%83%85%3Ad%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_%E6%9C%89%E7%B7%A3%E4%B9%8B%E5%AE%A2%EF%BC%BB%E5%85%A7%E5%B8%83%E5%88%A9%E6%96%AF%EF%BC%BD%3Ae?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>

## 威廉明娜
<iframe loading="lazy" src="https://odysee.com/%24/embed/%40%E7%A9%BF%E8%B6%8A%E6%99%82%E7%A9%BA%E7%9A%84%E8%B2%93%E6%94%AF%E7%B7%9A%E5%8A%87%E6%83%85%3Ad%2F%E6%A3%95%E8%89%B2%E5%A1%B5%E5%9F%832_%E6%9C%89%E7%B7%A3%E4%B9%8B%E5%AE%A2%EF%BC%BB%E5%A8%81%E5%BB%89%E6%98%8E%E5%A8%9C%EF%BC%BD%3Ad?r=fmAkDE97HYuQUZFcjDdDgK3N3jtoSfmB" allowfullscreen></iframe>
`,
	],

];

form.innerHTML = cates.map((cate, i) => {
	return `<div><label>${cate.title}：</label>
		<select id="select_cate_${i}" data-idx="${i}"><option value="-1"></option>${cate.sections.map((section, j) => `<option value="${j}">${section}</option>`)}</select></div>`;
}).join('') + `<input type="reset" />`;

form.onchange = (e,) => {
	const target = e.target;
	const value = +target.value;
	const cate = +target.dataset.idx;

	console.log(`selected: ${cate}, ${value}`);

	if (value === -1) {
		main.innerHTML = '';
		return;
	}

	main.innerHTML = marked.parse(contents[cate][value] || '');

	// reset options
	form.querySelectorAll('select').forEach(s => {
		if (s === target) {
			return;
		}
		s.value = '-1';
	})
}

// init:
form.querySelectorAll('select')[0].value = 0;
main.innerHTML = marked.parse(contents[0][0]);

</script>