WIP

src/frontend/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BrowserRouter, Route, Switch, useLocation } from 'react-router-dom';
+import { BrowserRouter, Link, Route, Switch, useLocation } from 'react-router-dom';
 
 import { IndexPage } from './pages';
 import { RankingPage } from './pages/ranking';
@@ -7,6 +7,7 @@ import { Header } from './components/Header';
 
 import 'xeltica-ui/dist/css/xeltica-ui.min.css';
 import './style.scss';
+import { TermPage } from './pages/term';
 
 const AppInner : React.VFC = () => {
 	const $location = useLocation();
@@ -17,9 +18,11 @@ const AppInner : React.VFC = () => {
 				<Switch>
 					<Route exact path="/" component={IndexPage} />
 					<Route exact path="/ranking" component={RankingPage} />
+					<Route exact path="/term" component={TermPage} />
 				</Switch>
 				<footer className="text-center pa-5">
-					(C)2020-2021 Xeltica
+					<p>(C)2020-2021 Xeltica</p>
+					<p><Link to="/term">利用規約</Link></p>
 				</footer>
 			</div>
 		</>

src/frontend/pages/index.tsx

@@ -8,7 +8,6 @@ import { HashtagTimeline } from '../components/HashtagTimeline';
 import { Header } from '../components/Header';
 
 export const IndexPage: React.VFC = () => {
-
 	return (
 		<>
 			<Header>
@@ -37,9 +36,6 @@ export const IndexPage: React.VFC = () => {
 					<div className="body"><HashtagTimeline hashtag="misshaialert"/></div>
 				</div>
 			</article>
-			<footer className="text-center pa-5">
-				(C)2020-2021 Xeltica
-			</footer>
 		</>
 	);
 };

src/frontend/pages/ranking.tsx

@@ -5,9 +5,12 @@ import { Ranking } from '../components/Ranking';
 export const RankingPage: React.VFC = () => {
 	return (
 		<article className="xarticle">
-			<h2>ミス廃ランキング</h2>
+			<h2>みす廃ランキング</h2>
 			<section>
-				<p>ユーザーの「ミス廃レート」を算出し、高い順にランキング表示しています。ミス廃レートは、次のような条件で算出されます。</p>
+				<p>
+					ユーザーの「みす廃レート」を算出し、高い順にランキング表示しています。
+					みす廃レートは、次のような条件で算出されます。
+				</p>
 				<p><strong>(ノート数) / (アカウント登録からの経過日数)</strong></p>
 				<p>廃人を極めるか、ノート数を控えるか、全てあなた次第！</p>
 			</section>

src/frontend/pages/term.tsx

@@ -0,0 +1,34 @@
+import React  from 'react';
+
+export const TermPage: React.VFC = () => {
+	return (
+		<article className="xarticle">
+			<h2>利用規約</h2>
+			<ul>
+				<li>
+					本サービスは「現状のまま」「無保証」で提供されます。本サービスを利用したことによる損害など
+					について、管理人は一切責任を負わないものとします。
+				</li>
+				<li>
+					本サービスは、Misskey プロジェクトとは無関係です。
+					本サービスに関して Misskey プロジェクトに問い合わせる行為はお控え下さい。
+				</li>
+				<li>
+					ユーザーはインスタンスの諸規約に従った上で本サービスを使うものとします。
+					インスタンスの規約により自動投稿が禁止されている場合は本サービスを使用しないでください。
+				</li>
+				<li>
+					本サービスでは、接続先のアカウントが存在しない、トークンが失効してしまったなどの場合に、
+					自動的にユーザーアカウントを削除します。
+				</li>
+				<li>
+					運営は、正当な理由がある場合に限り、本サービスを特定のインスタンスで利用できないよう
+					ブロックする可能性があります。
+				</li>
+				<li>本サービスの仕様は、事前の予告無しに変更される可能性があります。</li>
+				<li>本サービスは、事前の予告無しに突然閉鎖される可能性があります。</li>
+				<li>本規約は、事前の予告無しに変更される可能性があります。</li>
+			</ul>
+		</article>
+	);
+};