From b07cd37a16974aa1bf3154cd92266c029d7dc089 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 18 Feb 2019 20:48:39 +0900
Subject: [PATCH] :art:

---
 locales/ja-JP.yml                             |  2 +
 src/client/app/common/views/pages/explore.vue | 47 +++++++++++++++++++
 2 files changed, 49 insertions(+)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index b0ad7f496..7cd1f4d3c 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -231,6 +231,8 @@ common/views/pages/explore.vue:
   recently-registered-users: "新規ユーザー"
   popular-tags: "人気のタグ"
   federated: "連合"
+  explore: "{host}を探索"
+  users-info: "現在{users}ユーザーが登録されています"
 
 common/views/components/user-list.vue:
   no-users: "ユーザーがいません"
diff --git a/src/client/app/common/views/pages/explore.vue b/src/client/app/common/views/pages/explore.vue
index 63a9a4703..c627c0a6d 100644
--- a/src/client/app/common/views/pages/explore.vue
+++ b/src/client/app/common/views/pages/explore.vue
@@ -1,5 +1,14 @@
 <template>
 <div>
+	<ui-container :show-header="false">
+		<div class="kpdsmpnk" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
+			<div>
+				<b>{{ $t('explore', { host: meta.name }) }}</b>
+				<span>{{ $t('users-info', { users: num(stats.originalUsersCount) }) }}</span>
+			</div>
+		</div>
+	</ui-container>
+
 	<mk-user-list v-if="tag != null" :make-promise="tagUsers" :key="`${tag}-local`">
 		<fa :icon="faHashtag" fixed-width/>{{ tag }}
 	</mk-user-list>
@@ -76,6 +85,9 @@ export default Vue.extend({
 			}),
 			tagsLocal: [],
 			tagsRemote: [],
+			stats: null,
+			meta: null,
+			num: Vue.filter('number'),
 			faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag
 		};
 	},
@@ -117,6 +129,12 @@ export default Vue.extend({
 		}).then(tags => {
 			this.tagsRemote = tags;
 		});
+		this.$root.api('stats').then(stats => {
+			this.stats = stats;
+		});
+		this.$root.getMeta().then(meta => {
+			this.meta = meta;
+		});
 	}
 });
 </script>
@@ -131,4 +149,33 @@ export default Vue.extend({
 		&.local
 			font-weight bold
 
+.kpdsmpnk
+	min-height 100px
+	padding 16px
+	background-position center
+	background-size cover
+
+	&:before
+		content ""
+		display block
+		position absolute
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(0, 0, 0, 0.3)
+
+	> div
+		color #fff
+		text-shadow 0 0 8px #00
+
+		> b
+			display block
+			font-size 20px
+			font-weight bold
+
+		> span
+			font-size 14px
+			opacity 0.8
+
 </style>