New welcome page

locales/ja.yml

@@ -612,6 +612,13 @@ desktop/views/components/window.vue:
   popout: "ポップアウト"
   close: "閉じる"
 
+desktop/views/pages/welcome.vue:
+  signin: "ログイン"
+  signup: "新規登録"
+  signin-button: "やってる"
+  signup-button: "やる"
+  timeline: "タイムライン"
+
 desktop/views/pages/drive.vue:
   title: "Misskey Drive"
 

src/client/app/desktop/views/pages/welcome.vue

@@ -1,24 +1,13 @@
 <template>
 <div class="mk-welcome">
 	<main>
-		<div class="top">
-			<div>
-				<div>
-					<h1>Share<br><span ref="share">Everything!</span><span class="cursor">_</span></h1>
-					<p>ようこそ！ <b>Misskey</b>はTwitter風ミニブログSNSです。思ったことや皆と共有したいことを投稿しましょう。タイムラインを見れば、皆の関心事をすぐにチェックすることもできます。<a :href="aboutUrl">詳しく...</a></p>
-					<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
-					<div class="users">
-						<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
-					</div>
-				</div>
-				<div>
-					<div>
-						<header>%fa:comments R% タイムライン<div><span></span><span></span><span></span></div></header>
+		<img src="assets/title.svg" alt="Misskey">
+		<p><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>
-				</div>
-			</div>
-		</div>
 	</main>
 	<mk-forkit/>
 	<footer>
@@ -28,11 +17,11 @@
 		</div>
 	</footer>
 	<modal name="signup" width="500px" height="auto" scrollable>
-		<header :class="$style.signupFormHeader">新規登録</header>
+		<header :class="$style.signupFormHeader">%i18n:@signup%</header>
 		<mk-signup :class="$style.signupForm"/>
 	</modal>
 	<modal name="signin" width="500px" height="auto" scrollable>
-		<header :class="$style.signinFormHeader">ログイン</header>
+		<header :class="$style.signinFormHeader">%i18n:@signin%</header>
 		<mk-signin :class="$style.signinForm"/>
 	</modal>
 </div>
@@ -42,58 +31,13 @@
 import Vue from 'vue';
 import { docsUrl, copyright, lang } from '../../../config';
 
-const shares = [
-	'Everything!',
-	'Webpages',
-	'Photos',
-	'Interests',
-	'Favorites'
-];
-
 export default Vue.extend({
 	data() {
 		return {
 			aboutUrl: `${docsUrl}/${lang}/about`,
-			copyright,
-			users: [],
-			clock: null,
-			i: 0
+			copyright
 		};
 	},
-	mounted() {
-		(this as any).api('users', {
-			sort: '+follower',
-			limit: 20
-		}).then(users => {
-			this.users = users;
-		});
-
-		this.clock = setInterval(() => {
-			if (++this.i == shares.length) this.i = 0;
-			const speed = 70;
-			const text = (this.$refs.share as any).innerText;
-			for (let i = 0; i < text.length; i++) {
-				setTimeout(() => {
-					if (this.$refs.share) {
-						(this.$refs.share as any).innerText = text.substr(0, text.length - i);
-					}
-				}, i * speed)
-			}
-			setTimeout(() => {
-				const newText = shares[this.i];
-				for (let i = 0; i <= newText.length; i++) {
-					setTimeout(() => {
-						if (this.$refs.share) {
-							(this.$refs.share as any).innerText = newText.substr(0, i);
-						}
-					}, i * speed)
-				}
-			}, text.length * speed);
-		}, 4000);
-	},
-	beforeDestroy() {
-		clearInterval(this.clock);
-	},
 	methods: {
 		signup() {
 			this.$modal.show('signup');
@@ -121,67 +65,18 @@ export default Vue.extend({
 	display flex
 	flex-direction column
 	flex 1
-	$width = 1000px
-
-	background linear-gradient(to bottom, #1e1d65, #bd6659)
-	//background-image url('/assets/welcome-bg.svg')
-	background-size cover
-	background-position top center
-
-	&:before
-		content ""
-		display block
-		position fixed
-		bottom 0
-		left 0
-		width 100%
-		height 100%
-		background-image url('/assets/welcome-fg.svg')
-		background-size cover
-		background-position bottom center
 
 	> main
-		display flex
 		flex 1
+		padding 64px 0 0 0
+		text-align center
+		color #555
 
-		> .top
-			display flex
-			width 100%
-
-			> div
-				display flex
-				max-width $width + 64px
-				margin 0 auto
-				padding 80px 32px 0 32px
-
-				> *
-					margin-bottom 48px
-
-				> div:first-child
-					margin-right 48px
-					color #fff
-					text-shadow 0 0 12px #172062
-
-					> h1
-						margin 0
-						font-weight bold
-						//font-variant small-caps
-						letter-spacing 12px
-						font-family 'Sarpanch', sans-serif
-						font-size 42px
-						line-height 48px
-
-						> .cursor
-							animation cursor 1s infinite linear both
-
-							@keyframes cursor
-								0%
-									opacity 1
-								50%
-									opacity 0
+		> img
+			width 350px
 
 		> p
-						margin 1em 0
+			margin 8px 0
 			line-height 2em
 
 			button
@@ -207,25 +102,15 @@ export default Vue.extend({
 
 			.signin
 				&:hover
-							color #fff
+					color #000
 
-					> .users
-						margin 16px 0 0 0
-
-						> *
-							display inline-block
-							margin 4px
-							width 38px
-							height 38px
-							border-radius 6px
-
-				> div:last-child
-
-					> div
+		> .tl
+			margin 32px auto 0 auto
 			width 410px
+			text-align left
 			background #fff
 			border-radius 8px
-						box-shadow 0 0 0 12px rgba(#000, 0.1)
+			box-shadow 0 8px 32px rgba(#000, 0.15)
 			overflow hidden
 
 			> header
@@ -267,9 +152,8 @@ export default Vue.extend({
 		color #949ea5
 
 		> div
-			max-width $width
 			margin 0 auto
-			padding 0 0 42px 0
+			padding 64px
 			text-align center
 
 			> .c