From 1bea050796f9e6d76dddc46846af97911e94e282 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Fri, 15 Jun 2018 19:56:18 +0900
Subject: [PATCH] :art:

---
 locales/ja.yml                                |   2 +-
 .../app/common/views/components/forkit.vue    |   3 -
 .../app/common/views/components/signin.vue    |  26 +-
 .../app/common/views/components/ui/input.vue  |   5 +-
 src/client/app/config.ts                      |   2 +
 .../app/desktop/views/pages/welcome.vue       | 293 +++++++++---------
 src/client/assets/pointer.png                 |   3 +
 src/config/types.ts                           |   1 +
 webpack.config.ts                             |   3 +-
 9 files changed, 172 insertions(+), 166 deletions(-)
 create mode 100644 src/client/assets/pointer.png

diff --git a/locales/ja.yml b/locales/ja.yml
index ed0691ea5..86b16adaa 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -3,7 +3,7 @@ meta:
   divider: ""
 
 common:
-  misskey: "A planet of fediverse"
+  misskey: "A ⭐ of fediverse"
   about-title: "A ⭐ of fediverse."
   about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
 
diff --git a/src/client/app/common/views/components/forkit.vue b/src/client/app/common/views/components/forkit.vue
index bb71db19d..de627181e 100644
--- a/src/client/app/common/views/components/forkit.vue
+++ b/src/client/app/common/views/components/forkit.vue
@@ -13,9 +13,6 @@
 
 .a
 	display block
-	position fixed
-	top 0
-	right 0
 
 	> svg
 		display block
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 6b9d58e0a..66e0c68e3 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -1,22 +1,23 @@
 <template>
 <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
-	<label class="user-name">
-		<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="%i18n:@username%" autofocus required @change="onUsernameChange"/>%fa:at%
-	</label>
-	<label class="password">
-		<input v-model="password" type="password" placeholder="%i18n:@password%" required/>%fa:lock%
-	</label>
-	<label class="token" v-if="user && user.twoFactorEnabled">
-		<input v-model="token" type="number" placeholder="%i18n:@token%" required/>%fa:lock%
-	</label>
-	<button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</button>
-	もしくは <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
+	<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
+		<span>%i18n:@username%</span>
+		<span slot="prefix">@</span>
+		<span slot="suffix">@{{ host }}</span>
+	</ui-input>
+	<ui-input v-model="password" type="password" required>
+		<span>%i18n:@password%</span>
+		<span slot="prefix">%fa:lock%</span>
+	</ui-input>
+	<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
+	<ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
+	<p style="margin: 8px 0;">または<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a></p>
 </form>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { apiUrl } from '../../../config';
+import { apiUrl, host } from '../../../config';
 
 export default Vue.extend({
 	data() {
@@ -27,6 +28,7 @@ export default Vue.extend({
 			password: '',
 			token: '',
 			apiUrl,
+			host
 		};
 	},
 	methods: {
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 504f1e32d..525ff71c0 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -10,13 +10,12 @@
 		<template v-if="type != 'file'">
 			<input ref="input"
 					:type="type"
-					:value="v"
+					v-model="v"
 					:required="required"
 					:readonly="readonly"
 					:pattern="pattern"
 					:autocomplete="autocomplete"
 					:spellcheck="spellcheck"
-					@input="$emit('input', $event.target.value)"
 					@focus="focused = true"
 					@blur="focused = false">
 		</template>
@@ -104,6 +103,8 @@ export default Vue.extend({
 			this.v = v;
 		},
 		v(v) {
+			this.$emit('input', v);
+
 			if (this.withPasswordMeter) {
 				if (v == '') {
 					this.passwordStrength = '';
diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index e4a7ff6d3..c6efe26cd 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -19,6 +19,7 @@ declare const _VERSION_: string;
 declare const _CODENAME_: string;
 declare const _LICENSE_: string;
 declare const _GOOGLE_MAPS_API_KEY_: string;
+declare const _WELCOME_BG_URL_: string;
 
 export const host = _HOST_;
 export const hostname = _HOSTNAME_;
@@ -41,3 +42,4 @@ export const version = _VERSION_;
 export const codename = _CODENAME_;
 export const license = _LICENSE_;
 export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;
+export const welcomeBgUrl = _WELCOME_BG_URL_;
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 688d3e21c..a3ca98eb6 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -1,36 +1,39 @@
 <template>
 <div class="mk-welcome">
+	<img ref="pointer" class="pointer" src="/assets/pointer.png" alt="">
 	<button @click="dark">
 		<template v-if="$store.state.device.darkmode">%fa:moon%</template>
 		<template v-else>%fa:R moon%</template>
 	</button>
-	<main v-if="about" class="about">
-		<article>
-			<h1>%i18n:common.about-title%</h1>
-			<p v-html="'%i18n:common.about%'"></p>
-			<span class="gotit" @click="about = false">%i18n:@gotit%</span>
-		</article>
-	</main>
-	<main v-else class="index">
-		<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
-		<p class="desc"><b>%i18n:common.misskey%</b> - <span @click="about = true">%i18n:@about%</span></p>
-		<p class="account">
-			<button class="signup" @click="signup">%i18n:@signup-button%</button>
-			<button class="signin" @click="signin">%i18n:@signin-button%</button>
-		</p>
-
-		<div class="tl">
-			<header>%fa:comments R% %i18n:@timeline%<div><span></span><span></span><span></span></div></header>
-			<mk-welcome-timeline/>
+	<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
+		<div class="container">
+			<div class="info">
+				<span>%i18n:common.misskey% <b>{{ host }}</b></span>
+				<span class="stats" v-if="stats">
+					<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
+					<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
+				</span>
+			</div>
+			<main>
+				<div class="about">
+					<h1 v-if="name">{{ name }}</h1>
+					<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"></h1>
+					<p class="powerd-by" v-if="name">powerd by <b>Misskey</b></p>
+					<p class="desc" v-html="description || '%i18n:common.about%'"></p>
+					<a ref="signup" @click="signup">%i18n:@signup%</a>
+				</div>
+				<div class="login">
+					<mk-signin/>
+				</div>
+			</main>
+			<mk-nav class="nav"/>
 		</div>
-	</main>
-	<mk-forkit/>
-	<footer>
-		<div>
-			<mk-nav :class="$style.nav"/>
-			<p class="c">{{ copyright }}</p>
-		</div>
-	</footer>
+		<mk-forkit class="forkit"/>
+		<img src="assets/title.dark.svg" alt="Misskey">
+	</div>
+	<div class="tl">
+		<mk-welcome-timeline/>
+	</div>
 	<modal name="signup" width="500px" height="auto" scrollable>
 		<header :class="$style.signupFormHeader">%i18n:@signup%</header>
 		<mk-signup :class="$style.signupForm"/>
@@ -44,15 +47,27 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { copyright } from '../../../config';
+import { host, copyright, welcomeBgUrl } from '../../../config';
 
 export default Vue.extend({
 	data() {
 		return {
-			about: false,
-			copyright
+			stats: null,
+			copyright,
+			welcomeBgUrl,
+			host
 		};
 	},
+	created() {
+		(this as any).api('stats').then(stats => {
+			this.stats = stats;
+		});
+	},
+	mounted() {
+		const x = this.$refs.signup.getBoundingClientRect();
+		this.$refs.pointer.style.top = x.top + x.height + 'px';
+		this.$refs.pointer.style.left = x.left + 'px';
+	},
 	methods: {
 		signup() {
 			this.$modal.show('signup');
@@ -80,13 +95,20 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 @import '~const.styl'
 
-@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
-
 root(isDark)
+	display flex
 	min-height 100vh
-	background-image isDark ? url('/assets/welcome-bg.dark.svg') : url('/assets/welcome-bg.light.svg')
-	background-size cover
-	background-position center
+
+	> .pointer
+		display block
+		position absolute
+		z-index 1
+		top 0
+		right 0
+		width 180px
+		margin 0 0 0 -180px
+		transform rotateY(180deg) translateX(-10px) translateY(-25px)
+		pointer-events none
 
 	> button
 		position fixed
@@ -95,140 +117,117 @@ root(isDark)
 		left 0
 		padding 16px
 		font-size 18px
-		color isDark ? #fff : #555
+		color #fff
 
-	> main
+		display none // TODO
+
+	> .body
 		flex 1
 		padding 64px 0 0 0
 		text-align center
+		background #578394
+		background-position center
+		background-size cover
 
-		&.about
-			font-family 'Noto Sans JP'
-			color isDark ? #fff : #627574
+		&:before
+			content ''
+			display block
+			position absolute
+			top 0
+			left 0
+			right 0
+			bottom 0
+			background rgba(#000, 0.5)
 
-			> article
-				max-width 700px
-				margin 42px auto 0 auto
-				padding 64px 82px
-				background isDark ? #282C37 : #fff
-				box-shadow 0 8px 32px rgba(#000, 0.15)
+		> .forkit
+			position absolute
+			top 0
+			right 0
 
-				> h1
-					margin 0
-					font-weight 900
+		> img
+			position absolute
+			bottom 16px
+			right 16px
+			width 150px
 
-				> p
-					margin 20px 0
-					line-height 2em
+		> .container
+			$aboutWidth = 380px
+			$loginWidth = 340px
+			$width = $aboutWidth + $loginWidth
 
-				> .gotit
-					color $theme-color
-					cursor pointer
-
-					&:hover
-						text-decoration underline
-
-		&.index
-			color isDark ? #9aa4b3 : #555
-
-			> img
-				width 350px
-
-			> .desc
-				margin -12px 0 24px 0
-				color isDark ? #fff : #555
-
-				> span
-					color $theme-color
-					cursor pointer
-
-					&:hover
-						text-decoration underline
-
-			> .account
-				margin 8px 0
-				line-height 2em
-
-				button
-					padding 8px 16px
-					font-size inherit
-
-				.signup
-					color $theme-color
-					border solid 2px $theme-color
-					border-radius 4px
-
-					&:focus
-						box-shadow 0 0 0 3px rgba($theme-color, 0.2)
-
-					&:hover
-						color $theme-color-foreground
-						background $theme-color
-
-					&:active
-						color $theme-color-foreground
-						background darken($theme-color, 10%)
-						border-color darken($theme-color, 10%)
-
-				.signin
-					&:hover
-						color isDark ? #fff : #000
-
-			> .tl
-				margin 32px auto 0 auto
-				width 410px
-				text-align left
-				background isDark ? #313543 : #fff
+			> .info
+				margin 0 auto 16px auto
+				padding 12px
+				width $width
+				font-size 14px
+				color #fff
+				background rgba(#000, 0.2)
+				border-radius 8px
+
+				> .stats
+					margin-left 16px
+					padding-left 16px
+					border-left solid 1px #fff
+
+					> *
+						margin-right 16px
+
+			> main
+				display flex
+				margin auto
+				width $width
 				border-radius 8px
-				box-shadow 0 8px 32px rgba(#000, 0.15)
 				overflow hidden
+				box-shadow 0 2px 8px rgba(#000, 0.3)
 
-				> header
-					z-index 1
-					padding 12px 16px
-					color isDark ? #e3e5e8 : #888d94
-					box-shadow 0 1px 0px rgba(#000, 0.1)
+				> .about
+					width $aboutWidth
+					color #444
+					background #fff
 
-					> div
-						position absolute
-						top 0
-						right 0
-						padding inherit
+					> h1
+						margin 0 0 16px 0
+						padding 32px 32px 0 32px
+						color #444
 
-						> span
-							display inline-block
-							height 11px
-							width 11px
-							margin-left 6px
-							border-radius 100%
-							vertical-align middle
+						> img
+							width 170px
+							vertical-align bottom
 
-							&:nth-child(1)
-								background #5BCC8B
+					> .powerd-by
+						margin 16px
+						opacity 0.7
 
-							&:nth-child(2)
-								background #E6BB46
+					> .desc
+						margin 0
+						padding 0 32px 16px 32px
 
-							&:nth-child(3)
-								background #DF7065
+					> a
+						display inline-block
+						margin 0 0 32px 0
+						font-weight bold
 
-				> .mk-welcome-timeline
-					max-height 350px
-					overflow auto
+				> .login
+					width $loginWidth
+					padding 16px 32px 32px 32px
+					background #f5f5f5
 
-	> footer
-		font-size 12px
-		color isDark ? #949ea5 : #737c82
+			> .nav
+				display block
+				margin 16px 0
+				font-size 14px
+				color #fff
 
-		> div
-			margin 0 auto
-			padding 64px
-			text-align center
+	> .tl
+		margin 0
+		width 410px
+		height 100vh
+		text-align left
+		background isDark ? #313543 : #fff
 
-			> .c
-				margin 16px 0 0 0
-				font-size 10px
-				opacity 0.7
+		> *
+			max-height 100%
+			overflow auto
 
 .mk-welcome[data-darkmode]
 	root(true)
diff --git a/src/client/assets/pointer.png b/src/client/assets/pointer.png
new file mode 100644
index 000000000..c4ce18255
--- /dev/null
+++ b/src/client/assets/pointer.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:00792c304700ebdbb0ed8045f36f4808f27b421ba29c2306d8a275c9e640c546
+size 252860
diff --git a/src/config/types.ts b/src/config/types.ts
index d557f2afd..62f63d4a3 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -17,6 +17,7 @@ export type Source = {
 	};
 	name?: string;
 	description?: string;
+	welcome_bg_url?: string;
 	url: string;
 	port: number;
 	https?: { [x: string]: string };
diff --git a/webpack.config.ts b/webpack.config.ts
index 8376cd9c4..480f5d4a7 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -85,7 +85,8 @@ const consts = {
 	_HOSTNAME_: config.hostname,
 	_URL_: config.url,
 	_LICENSE_: licenseHtml,
-	_GOOGLE_MAPS_API_KEY_: config.google_maps_api_key
+	_GOOGLE_MAPS_API_KEY_: config.google_maps_api_key,
+	_WELCOME_BG_URL_: config.welcome_bg_url
 };
 
 const _consts = {};