New welcome page

2 files changed, 72 insertions, 213 deletions

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 898b6b2179..fb98f6974e 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%
-
-			> 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
-
-					> p
-						margin 1em 0
-						line-height 2em
-
-					button
-						padding 8px 16px
-						font-size inherit
-
-					.signup
-						color $theme-color
-						border solid 2px $theme-color
-						border-radius 4px
+		> img
+			width 350px
 
-						&:focus
-							box-shadow 0 0 0 3px rgba($theme-color, 0.2)
+		> p
+			margin 8px 0
+			line-height 2em
 
-						&:hover
-							color $theme-color-foreground
-							background $theme-color
+			button
+				padding 8px 16px
+				font-size inherit
 
-						&:active
-							color $theme-color-foreground
-							background darken($theme-color, 10%)
-							border-color darken($theme-color, 10%)
+			.signup
+				color $theme-color
+				border solid 2px $theme-color
+				border-radius 4px
 
-					.signin
-						&:hover
-							color #fff
+				&:focus
+					box-shadow 0 0 0 3px rgba($theme-color, 0.2)
 
-					> .users
-						margin 16px 0 0 0
+				&:hover
+					color $theme-color-foreground
+					background $theme-color
 
-						> *
-							display inline-block
-							margin 4px
-							width 38px
-							height 38px
-							border-radius 6px
+				&:active
+					color $theme-color-foreground
+					background darken($theme-color, 10%)
+					border-color darken($theme-color, 10%)
 
-				> div:last-child
+			.signin
+				&:hover
+					color #000
 
-					> div
-						width 410px
-						background #fff
-						border-radius 8px
-						box-shadow 0 0 0 12px rgba(#000, 0.1)
-						overflow hidden
+		> .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
 
-						> header
-							z-index 1
-							padding 12px 16px
-							color #888d94
-							box-shadow 0 1px 0px rgba(#000, 0.1)
+			> 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
+				> 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
+					> 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(1)
+							background #5BCC8B
 
-									&:nth-child(2)
-										background #E6BB46
+						&:nth-child(2)
+							background #E6BB46
 
-									&:nth-child(3)
-										background #DF7065
+						&: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 747fcd38b1..0000000000
--- a/src/client/assets/title.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>

-<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

-<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"

-	 y="0px" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">

-<circle fill="#2B2F2D" cx="128" cy="153.6" r="19.201"/>

-<circle fill="#2B2F2D" cx="51.2" cy="153.6" r="19.2"/>

-<circle fill="#2B2F2D" cx="204.8" cy="153.6" r="19.2"/>

-<polyline fill="none" stroke="#2B2F2D" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" points="51.2,153.6 

-	89.601,102.4 128,153.6 166.4,102.4 204.799,153.6 "/>

-<circle fill="#2B2F2D" cx="89.6" cy="102.4" r="19.2"/>

-<circle fill="#2B2F2D" cx="166.4" cy="102.4" r="19.199"/>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-<g>

-</g>

-</svg>