WIP support me

app/view/ja/index.html

@@ -681,7 +681,7 @@
 				Pixiv Fanboxでは支援者様限定で様々なTheDeskに関する記事をご覧いただけます。最低月一更新。<br>
 				困ったときは、<a href="https://docs.thedesk.top">TheDesk Docs</a>をご覧ください。
 				<h5>Release Note Usamin (18.5.0)</h5>
-				・macOSでのアップデータについて修正。<br>
+				・アップデータについて修正。<br>
 				・本来不要なところにフォロリク許可画面が出るようになっていたのを修正。<br>
 				・不明なメディアに対するリンクを表示します。<br>
 				・PleromaでのVideoの挙動について修正しました。<br>
@@ -707,8 +707,8 @@
 				href="https://www.pixiv.net/fanbox/creator/28105985" target="_blank">
 				Pixiv FANBOXで支援
 			</a>
-			<a class="btn-share btn waves-effect waves-light red darken-2"
-				href="https://www.patreon.com/cutls" target="_blank">
+			<a class="btn-share btn waves-effect waves-light red darken-2" href="https://www.patreon.com/cutls"
+				target="_blank">
 				Patreonで支援
 			</a>
 			<a class="btn-share btn waves-effect waves-light blue"
@@ -990,6 +990,56 @@
 			</div>
 		</div>
 	</div>
+	<!--Support me-->
+	<div id="support-btm" class="z-depth-4">
+		<div id="support-btm-ja">
+			<h5>ご支援いただけませんか？</h5>
+			(これは支援の有無に関わらず定期的に出ます。)<br>
+			あなたのMastodon, Misskeyライフを邪魔してしまって申し訳ありません。<br>
+			乞食のようなマネをしてご支援をお願いするのもどうかと思いますが、少々お時間をください。<br>
+			<br>
+			あなたはMastodon, MisskeyクライアントにTheDeskを選びました。これは奇跡的なことです。今考えればブラウザからアクセスした方が良かったのではと感じることかと存じます。<br>
+			それでも、あなたはTheDeskを使っています。<br>
+			TheDeskは2018年1月13日に最初のバージョンが出ました。それから圧倒的な機能数でゴリ押しするクライアントになっています。<br>
+			新機能に追従を図るためのモチベーションもさることながら、安全対策上TheDeskは開発者の緊急メッセージを表示できる機能が備わっており、開発者が送信ボタンを押すとすべてのTheDeskユーザーに通知が行くようになっています。<br>
+			かつてこれによってバグ報告を行い、使用を自粛していただくこともありました。<br>
+			そのような機能を実装するために、Mastodonなどのインスタンスを運営するのと同じく有料のサーバーを運用しています。<br>
+			<b>全てのユーザーが安心してTheDeskを使っていただける環境のため</b>にも、ぜひご支援をご検討ください。<br>
+			<b>TheDeskは営利目的ではないため、有料機能や広告は一切ありません。<br>皆様のあたたかいご支援のもとで製作されています。</b>
+		</div>
+		<div id="support-btm-en" class="hide">
+			<h5>Support me</h5>
+			It may disturb your Mastodon life, but your support is required to keep TheDesk awesome!<br>
+			<b>TheDeskは営利目的ではないため、有料機能や広告は一切ありません。<br>皆様のあたたかいご支援のもとで製作されています。</b>
+		</div>
+		<div id="support-btm-middle">
+			<h5>月額支援(大歓迎)</h5>
+			<a class="btn-share btn waves-effect waves-light red lighten-2"
+				href="https://www.pixiv.net/fanbox/creator/28105985" target="_blank">
+				Pixiv FANBOXで支援
+			</a>
+			<a class="btn-share btn waves-effect waves-light red darken-2" href="https://www.patreon.com/cutls"
+				target="_blank">
+				Patreonで支援
+			</a>
+		</div>
+		<div id="support-btm-right">
+			<h5>一度限りの支援(もちろん歓迎)</h5>
+			<a class="btn-share btn waves-effect waves-light blue"
+				href="https://www.amazon.co.jp/registry/wishlist/2TV35ZHHJPDSB" target="_blank">
+				Amazonほしいものリスト
+			</a>
+			<br>
+			<a href="mailto:web-pro@cutls.com"
+				target="_blank">web-pro@cutls.com</a>にAmazonギフトカードを送る<br>
+			Kyash<br>
+			<img src="../../img/kyash.png" width="100"><br>
+		</div>
+		<div id="support-btm-close">
+				<button class="btn waves-effect" style="width:100%;" onclick="closeSupport()"
+				id="add-filter-btn">Close</button>
+		</div>
+	</div>
 	<!--左下メッセージ-->
 	<div id="message">
 	</div>