diff --git a/locales/ja.yml b/locales/ja.yml
index f5b275e273..7d818193b1 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 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%
+ > 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 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>