From 1236a09247b8ed9dac07b0fc3d6816fbd3ed635f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 21 May 2018 21:39:46 +0900
Subject: [PATCH] New welcome page

---
 locales/ja.yml                                |   7 +
 .../app/desktop/views/pages/welcome.vue       | 260 +++++-------------
 src/client/assets/title.svg                   | Bin 1021 -> 0 bytes
 3 files changed, 79 insertions(+), 188 deletions(-)
 delete mode 100644 src/client/assets/title.svg

diff --git a/locales/ja.yml b/locales/ja.yml
index f5b275e27..7d818193b 100644
--- a/locales/ja.yml
+++ b/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"
 
diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 898b6b217..fb98f6974 100644
--- a/src/client/app/desktop/views/pages/welcome.vue
+++ b/src/client/app/desktop/views/pages/welcome.vue
@@ -1,23 +1,12 @@
 <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>
-						<mk-welcome-timeline/>
-					</div>
-				</div>
-			</div>
+		<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>
 	</main>
 	<mk-forkit/>
@@ -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,155 +65,95 @@ 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%
+		> img
+			width 350px
 
-			> div
-				display flex
-				max-width $width + 64px
-				margin 0 auto
-				padding 80px 32px 0 32px
+		> p
+			margin 8px 0
+			line-height 2em
 
-				> *
-					margin-bottom 48px
+			button
+				padding 8px 16px
+				font-size inherit
 
-				> div:first-child
-					margin-right 48px
-					color #fff
-					text-shadow 0 0 12px #172062
+			.signup
+				color $theme-color
+				border solid 2px $theme-color
+				border-radius 4px
 
-					> h1
-						margin 0
-						font-weight bold
-						//font-variant small-caps
-						letter-spacing 12px
-						font-family 'Sarpanch', sans-serif
-						font-size 42px
-						line-height 48px
+				&:focus
+					box-shadow 0 0 0 3px rgba($theme-color, 0.2)
 
-						> .cursor
-							animation cursor 1s infinite linear both
+				&:hover
+					color $theme-color-foreground
+					background $theme-color
 
-							@keyframes cursor
-								0%
-									opacity 1
-								50%
-									opacity 0
+				&:active
+					color $theme-color-foreground
+					background darken($theme-color, 10%)
+					border-color darken($theme-color, 10%)
 
-					> p
-						margin 1em 0
-						line-height 2em
+			.signin
+				&:hover
+					color #000
 
-					button
-						padding 8px 16px
-						font-size inherit
+		> .tl
+			margin 32px auto 0 auto
+			width 410px
+			text-align left
+			background #fff
+			border-radius 8px
+			box-shadow 0 8px 32px rgba(#000, 0.15)
+			overflow hidden
 
-					.signup
-						color $theme-color
-						border solid 2px $theme-color
-						border-radius 4px
+			> header
+				z-index 1
+				padding 12px 16px
+				color #888d94
+				box-shadow 0 1px 0px rgba(#000, 0.1)
 
-						&:focus
-							box-shadow 0 0 0 3px rgba($theme-color, 0.2)
+				> div
+					position absolute
+					top 0
+					right 0
+					padding inherit
 
-						&:hover
-							color $theme-color-foreground
-							background $theme-color
+					> span
+						display inline-block
+						height 11px
+						width 11px
+						margin-left 6px
+						background #ccc
+						border-radius 100%
+						vertical-align middle
 
-						&:active
-							color $theme-color-foreground
-							background darken($theme-color, 10%)
-							border-color darken($theme-color, 10%)
+						&:nth-child(1)
+							background #5BCC8B
 
-					.signin
-						&:hover
-							color #fff
+						&:nth-child(2)
+							background #E6BB46
 
-					> .users
-						margin 16px 0 0 0
+						&:nth-child(3)
+							background #DF7065
 
-						> *
-							display inline-block
-							margin 4px
-							width 38px
-							height 38px
-							border-radius 6px
-
-				> div:last-child
-
-					> div
-						width 410px
-						background #fff
-						border-radius 8px
-						box-shadow 0 0 0 12px rgba(#000, 0.1)
-						overflow hidden
-
-						> header
-							z-index 1
-							padding 12px 16px
-							color #888d94
-							box-shadow 0 1px 0px rgba(#000, 0.1)
-
-							> div
-								position absolute
-								top 0
-								right 0
-								padding inherit
-
-								> span
-									display inline-block
-									height 11px
-									width 11px
-									margin-left 6px
-									background #ccc
-									border-radius 100%
-									vertical-align middle
-
-									&:nth-child(1)
-										background #5BCC8B
-
-									&:nth-child(2)
-										background #E6BB46
-
-									&:nth-child(3)
-										background #DF7065
-
-						> .mk-welcome-timeline
-							max-height 350px
-							overflow auto
+			> .mk-welcome-timeline
+				max-height 350px
+				overflow auto
 
 	> footer
 		font-size 12px
 		color #949ea5
 
 		> div
-			max-width $width
 			margin 0 auto
-			padding 0 0 42px 0
+			padding 64px
 			text-align center
 
 			> .c
diff --git a/src/client/assets/title.svg b/src/client/assets/title.svg
deleted file mode 100644
index 747fcd38b1f7fcf5dfd5121447a84f61130bc25c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1021
zcmbVK+iuf95Phan|6y33km9{K7viX<B9}&y5JaLB@q`k4>nz#sT5BgxU+J&#$S3eO
z`4MIv6ZIh|5>gzGXU>^9bGf?SJ!sfUS14;@A}A*yO=44JvY2ej`=C#*-(Fr^y$k}F
zN+aE(v~B?JQoEEe(|S{swF^X#a@uaer@JXkcDZ#W%=IP<W(H{OygL*b00KD-H%h0#
zUjqa|oqzmsbo+HafnuA%{PXbrYy>1=>`QyZ*!Xr_rw~*yHu*q+tjaPUFjiF+t=iPO
zj7{AlU#X;ED1dn&k{Bivf~I9kd<~!aS*wD8N@KEr`nCV@bN__D-`~)O12IK>qC&_y
z_Zb_=V5gN?p8|>~idY>*XiRv%BbOI1;PGHWrP6X0ld#*v0Ia0SR^{<?t7J8_o&_8b
z;vc_~#Zt>)xk%QTvm1l5jjRyy41>A{MZQR6OmZg+>9(@&I#Djs67H4OF?kgZ!<%qS
zAi)wM?4yCQM7K?`ibE@+As2-Cas8Xv6*N4>JjV-phn_5XAm&y-;!OW)HP%Q1cwcsn
zJsp)F96>Whfw~)yr+&8z&$u4Z(f^=I>9oQZ_J{YKBc{X+`z~5_>wxR&N3_R9OYo3(
z04LK#M6X9Xjn~V66GctrT(dr5GbEq$INo!-y5b2UUe$q``Q@<s|36KC#hBy|3y>NW