diff --git a/ismism.ts/ui/index.html b/ismism.ts/ui/index.html
index 01b319d..0195412 100644
--- a/ismism.ts/ui/index.html
+++ b/ismism.ts/ui/index.html
@@ -174,6 +174,27 @@
 		width: 100%;
 	}
 
+	iframe {
+		width: 90%;
+		margin-left: 5%;
+		margin-top: 2ch;
+		aspect-ratio: 16/9;
+	}
+
+	.link {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.link img {
+		height: 16px;
+		margin-right: 0.5ch;
+	}
+
+	footer {
+		color: var(--color-purple);
+	}
+
 	.left {
 		float: left;
 		width: 75%;
@@ -224,6 +245,7 @@
 	}
 
 	#shade {
+		display: none;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -231,19 +253,20 @@
 		width: 100%;
 		height: 100%;
 		background: black;
-		transition: var(--transition);
-		opacity: 0.3;
+		transition: opacity 0.5s;
+		opacity: 0;
 	}
 
 	#info {
+		display: none;
 		position: fixed;
 		z-index: 101;
 		padding: var(--interval);
 		border: 2px solid var(--color-black);
 		border-radius: var(--border-radius);
 		box-shadow: var(--color-black) 0 0 32px;
-		top: 20vh;
-		height: 60vh;
+		top: 25vh;
+		max-height: 60vh;
 		left: 20vw;
 		width: 60vw;
 		overflow-y: scroll;
@@ -329,6 +352,27 @@
 
 </style>
 
+<script>
+	function info(s) {
+		console.log(`info(${s})`)
+		const shade = document.getElementById("shade")
+		shade.style.display = "block"
+		setTimeout(() => shade.style.opacity = 0.5, 0.1)
+		const n = document.getElementById("info")
+		n.style.display = "block"
+		for (const d of n.children) d.style.display = "none"
+		document.getElementById(s).style.display = "block"
+	}
+
+	function close_info() {
+		const shade = document.getElementById("shade")
+		shade.style.opacity = 0
+		setTimeout(() => shade.style.display = "none", 0.5)
+		const n = document.getElementById("info")
+		n.style.display = "none"
+	}
+</script>
+
 <body>
 	<article class="banner">
 		<h1><a href="">主义主义 <span style="color: var(--color-red);">活动</span>公示</a></h1>
@@ -352,23 +396,23 @@
 						<span>公示时间： 2022-08-12 12:34:56<br>更新时间： 2022-08-12 12:34:56</span>
 					</div>
 					<div class="stat">
-						<div>
+						<div onclick="info('stage')">
 							<div class="item">活动状态</div>
 							<div class="value">执行中</div>
 						</div>
-						<div>
-							<div class="item">预算</div>
+						<div onclick="info('budget')">
+							<div class=" item">预算</div>
 							<div class="value">6000</div>
 						</div>
-						<div>
-							<div class="item">收到支持</div>
+						<div onclick="info('supporter')">
+							<div class=" item">收到支持</div>
 							<div class="value final">6000</div>
 						</div>
-						<div>
+						<div onclick="info('budget')">
 							<div class="item">当前支出</div>
 							<div class="value">1000</div>
 						</div>
-						<div>
+						<div onclick="info('supporter')">
 							<div class="item">支持者</div>
 							<div class="value final">1000</div>
 						</div>
@@ -379,9 +423,41 @@
 				<section>
 					<img src="./1-0.jpg">
 					<h2>活动介绍</h2>
+					<p>Some text..</p>
+					<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
+						eiusmod
+						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation
+						ullamco.</p>
+					<a href="https://www.bilibili.com/video/BV1xG4y1v7MV" target="_blank" rel="noopener"
+						style="color: var(--color-yellow);">未明子：【现实行动】我们目前的一个行动项目</a>
+					<iframe src="https://player.bilibili.com/player.html?bvid=BV1xG4y1v7MV" scrolling="no" border="0"
+						frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
 					<h2>预算与筹备</h2>
+					<p>Some text..</p>
+					<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
+						eiusmod
+						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation
+						ullamco.</p>
+					<a href="https://www.bilibili.com/video/BV1zT411L7JP" target="_blank" rel="noopener"
+						style="color: var(--color-yellow);">张正午：工人子弟晚托班苏州星星家园环境改造/伙食改善公益项目工作记录</a>
+					<iframe src="https://player.bilibili.com/player.html?bvid=BV1zT411L7JP" scrolling="no" border="0"
+						frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
 					<h2>参与人员</h2>
+					<p>Some text..</p>
+					<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
+						eiusmod
+						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation
+						ullamco.</p>
 					<h2>执行情况</h2>
+					<p>Some text..</p>
+					<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
+						eiusmod
+						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+						exercitation
+						ullamco.</p>
 					<h2><i>后续回访（未开始）</i></h2>
 					<p>Some text..</p>
 					<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do
@@ -394,7 +470,7 @@
 			<article>
 				<header>
 					<div class="title">
-						<code><a href="#0">#1</a></code>
+						<code><a href="#0">#0</a></code>
 						<h1><a href="#0">网站说明</a></h1>
 					</div>
 					<div class="tag">
@@ -426,16 +502,21 @@
 			</article>
 			<article>
 				<h3>相关链接</h3>
-				<p>Some text..</p>
+				<a href="https://space.bilibili.com/23191782" target="_blank" rel="noopener" class="link"><img
+						src="https://www.bilibili.com/favicon.ico">未明子</a><br>
+				<a href="https://space.bilibili.com/19147010" target="_blank" rel="noopener" class="link"><img
+						src="https://www.bilibili.com/favicon.ico">张正午</a>
 			</article>
 		</div>
 	</div>
 
 	<footer>
 		<h2>联系方式</h2>
+		邮寄地址：xxx xxxx XXXX<br>
+		网站维护：<code>seven.two.eight@outlook.com</code>
 	</footer>
 
-	<div id="shade"></div>
+	<div id="shade" onclick="close_info()"></div>
 	<div id="info">
 		<div id="stage">
 			<h3>活动状态</h3>
@@ -463,7 +544,7 @@
 					<td>吊顶</td>
 					<td>500</td>
 					<td>500</td>
-					<td><a href="">查看票据</a></td>
+					<td><a href="https://pan.baidu.com" target="_blank" rel="noopener">查看票据</a></td>
 				</tr>
 				<tr>
 					<td>地板贴</td>
@@ -475,7 +556,7 @@
 					<td>铝塑板</td>
 					<td>500</td>
 					<td>500</td>
-					<td><a href="">查看票据</a></td>
+					<td><a href="https://pan.baidu.com" target="_blank" rel="noopener">查看票据</a></td>
 				</tr>
 				<tr>
 					<td>灯具</td>
