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

---
 src/client/app/desktop/views/pages/welcome.vue | 317 ++++++++++++-------------
 1 file changed, 158 insertions(+), 159 deletions(-)

(limited to 'src/client/app/desktop')

diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue
index 688d3e21cb..a3ca98eb6f 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
+
+		&:before
+			content ''
+			display block
+			position absolute
+			top 0
+			left 0
+			right 0
+			bottom 0
+			background rgba(#000, 0.5)
+
+		> .forkit
+			position absolute
+			top 0
+			right 0
+
+		> img
+			position absolute
+			bottom 16px
+			right 16px
+			width 150px
+
+		> .container
+			$aboutWidth = 380px
+			$loginWidth = 340px
+			$width = $aboutWidth + $loginWidth
+
+			> .info
+				margin 0 auto 16px auto
+				padding 12px
+				width $width
+				font-size 14px
+				color #fff
+				background rgba(#000, 0.2)
+				border-radius 8px
 
-		&.about
-			font-family 'Noto Sans JP'
-			color isDark ? #fff : #627574
-
-			> 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)
-
-				> h1
-					margin 0
-					font-weight 900
-
-				> p
-					margin 20px 0
-					line-height 2em
-
-				> .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%)
+				> .stats
+					margin-left 16px
+					padding-left 16px
+					border-left solid 1px #fff
 
-				.signin
-					&:hover
-						color isDark ? #fff : #000
+					> *
+						margin-right 16px
 
-			> .tl
-				margin 32px auto 0 auto
-				width 410px
-				text-align left
-				background isDark ? #313543 : #fff
+			> main
+				display flex
+				margin auto
+				width $width
 				border-radius 8px
-				box-shadow 0 8px 32px rgba(#000, 0.15)
 				overflow hidden
-
-				> header
-					z-index 1
-					padding 12px 16px
-					color isDark ? #e3e5e8 : #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
-							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
-
-	> footer
-		font-size 12px
-		color isDark ? #949ea5 : #737c82
-
-		> div
-			margin 0 auto
-			padding 64px
-			text-align center
-
-			> .c
-				margin 16px 0 0 0
-				font-size 10px
-				opacity 0.7
+				box-shadow 0 2px 8px rgba(#000, 0.3)
+
+				> .about
+					width $aboutWidth
+					color #444
+					background #fff
+
+					> h1
+						margin 0 0 16px 0
+						padding 32px 32px 0 32px
+						color #444
+
+						> img
+							width 170px
+							vertical-align bottom
+
+					> .powerd-by
+						margin 16px
+						opacity 0.7
+
+					> .desc
+						margin 0
+						padding 0 32px 16px 32px
+
+					> a
+						display inline-block
+						margin 0 0 32px 0
+						font-weight bold
+
+				> .login
+					width $loginWidth
+					padding 16px 32px 32px 32px
+					background #f5f5f5
+
+			> .nav
+				display block
+				margin 16px 0
+				font-size 14px
+				color #fff
+
+	> .tl
+		margin 0
+		width 410px
+		height 100vh
+		text-align left
+		background isDark ? #313543 : #fff
+
+		> *
+			max-height 100%
+			overflow auto
 
 .mk-welcome[data-darkmode]
 	root(true)
-- 
cgit v1.2.3-freya