diff --git a/locales/ja.yml b/locales/ja.yml
index ed0691ea50..86b16adaad 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -3,7 +3,7 @@ meta:
divider: ""
common:
- misskey: "A planet of fediverse"
+ misskey: "A ⭐ of fediverse"
about-title: "A ⭐ of fediverse."
about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
diff --git a/src/client/app/common/views/components/forkit.vue b/src/client/app/common/views/components/forkit.vue
index bb71db19db..de627181ef 100644
--- a/src/client/app/common/views/components/forkit.vue
+++ b/src/client/app/common/views/components/forkit.vue
@@ -13,9 +13,6 @@
.a
display block
- position fixed
- top 0
- right 0
> svg
display block
diff --git a/src/client/app/common/views/components/signin.vue b/src/client/app/common/views/components/signin.vue
index 6b9d58e0a8..66e0c68e30 100644
--- a/src/client/app/common/views/components/signin.vue
+++ b/src/client/app/common/views/components/signin.vue
@@ -1,22 +1,23 @@
<template>
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
- <label class="user-name">
- <input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="%i18n:@username%" autofocus required @change="onUsernameChange"/>%fa:at%
- </label>
- <label class="password">
- <input v-model="password" type="password" placeholder="%i18n:@password%" required/>%fa:lock%
- </label>
- <label class="token" v-if="user && user.twoFactorEnabled">
- <input v-model="token" type="number" placeholder="%i18n:@token%" required/>%fa:lock%
- </label>
- <button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</button>
- もしくは <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
+ <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
+ <span>%i18n:@username%</span>
+ <span slot="prefix">@</span>
+ <span slot="suffix">@{{ host }}</span>
+ </ui-input>
+ <ui-input v-model="password" type="password" required>
+ <span>%i18n:@password%</span>
+ <span slot="prefix">%fa:lock%</span>
+ </ui-input>
+ <ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
+ <ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
+ <p style="margin: 8px 0;">または<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a></p>
</form>
</template>
<script lang="ts">
import Vue from 'vue';
-import { apiUrl } from '../../../config';
+import { apiUrl, host } from '../../../config';
export default Vue.extend({
data() {
@@ -27,6 +28,7 @@ export default Vue.extend({
password: '',
token: '',
apiUrl,
+ host
};
},
methods: {
diff --git a/src/client/app/common/views/components/ui/input.vue b/src/client/app/common/views/components/ui/input.vue
index 504f1e32d3..525ff71c08 100644
--- a/src/client/app/common/views/components/ui/input.vue
+++ b/src/client/app/common/views/components/ui/input.vue
@@ -10,13 +10,12 @@
<template v-if="type != 'file'">
<input ref="input"
:type="type"
- :value="v"
+ v-model="v"
:required="required"
:readonly="readonly"
:pattern="pattern"
:autocomplete="autocomplete"
:spellcheck="spellcheck"
- @input="$emit('input', $event.target.value)"
@focus="focused = true"
@blur="focused = false">
</template>
@@ -104,6 +103,8 @@ export default Vue.extend({
this.v = v;
},
v(v) {
+ this.$emit('input', v);
+
if (this.withPasswordMeter) {
if (v == '') {
this.passwordStrength = '';
diff --git a/src/client/app/config.ts b/src/client/app/config.ts
index e4a7ff6d38..c6efe26cd5 100644
--- a/src/client/app/config.ts
+++ b/src/client/app/config.ts
@@ -19,6 +19,7 @@ declare const _VERSION_: string;
declare const _CODENAME_: string;
declare const _LICENSE_: string;
declare const _GOOGLE_MAPS_API_KEY_: string;
+declare const _WELCOME_BG_URL_: string;
export const host = _HOST_;
export const hostname = _HOSTNAME_;
@@ -41,3 +42,4 @@ export const version = _VERSION_;
export const codename = _CODENAME_;
export const license = _LICENSE_;
export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;
+export const welcomeBgUrl = _WELCOME_BG_URL_;
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
- &.about
- font-family 'Noto Sans JP'
- color isDark ? #fff : #627574
+ &:before
+ content ''
+ display block
+ position absolute
+ top 0
+ left 0
+ right 0
+ bottom 0
+ background rgba(#000, 0.5)
- > 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)
+ > .forkit
+ position absolute
+ top 0
+ right 0
- > h1
- margin 0
- font-weight 900
+ > img
+ position absolute
+ bottom 16px
+ right 16px
+ width 150px
- > p
- margin 20px 0
- line-height 2em
+ > .container
+ $aboutWidth = 380px
+ $loginWidth = 340px
+ $width = $aboutWidth + $loginWidth
- > .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%)
-
- .signin
- &:hover
- color isDark ? #fff : #000
-
- > .tl
- margin 32px auto 0 auto
- width 410px
- text-align left
- background isDark ? #313543 : #fff
+ > .info
+ margin 0 auto 16px auto
+ padding 12px
+ width $width
+ font-size 14px
+ color #fff
+ background rgba(#000, 0.2)
+ border-radius 8px
+
+ > .stats
+ margin-left 16px
+ padding-left 16px
+ border-left solid 1px #fff
+
+ > *
+ margin-right 16px
+
+ > main
+ display flex
+ margin auto
+ width $width
border-radius 8px
- box-shadow 0 8px 32px rgba(#000, 0.15)
overflow hidden
+ box-shadow 0 2px 8px rgba(#000, 0.3)
- > header
- z-index 1
- padding 12px 16px
- color isDark ? #e3e5e8 : #888d94
- box-shadow 0 1px 0px rgba(#000, 0.1)
+ > .about
+ width $aboutWidth
+ color #444
+ background #fff
- > div
- position absolute
- top 0
- right 0
- padding inherit
+ > h1
+ margin 0 0 16px 0
+ padding 32px 32px 0 32px
+ color #444
- > span
- display inline-block
- height 11px
- width 11px
- margin-left 6px
- border-radius 100%
- vertical-align middle
+ > img
+ width 170px
+ vertical-align bottom
- &:nth-child(1)
- background #5BCC8B
+ > .powerd-by
+ margin 16px
+ opacity 0.7
- &:nth-child(2)
- background #E6BB46
+ > .desc
+ margin 0
+ padding 0 32px 16px 32px
- &:nth-child(3)
- background #DF7065
+ > a
+ display inline-block
+ margin 0 0 32px 0
+ font-weight bold
- > .mk-welcome-timeline
- max-height 350px
- overflow auto
+ > .login
+ width $loginWidth
+ padding 16px 32px 32px 32px
+ background #f5f5f5
- > footer
- font-size 12px
- color isDark ? #949ea5 : #737c82
+ > .nav
+ display block
+ margin 16px 0
+ font-size 14px
+ color #fff
- > div
- margin 0 auto
- padding 64px
- text-align center
+ > .tl
+ margin 0
+ width 410px
+ height 100vh
+ text-align left
+ background isDark ? #313543 : #fff
- > .c
- margin 16px 0 0 0
- font-size 10px
- opacity 0.7
+ > *
+ max-height 100%
+ overflow auto
.mk-welcome[data-darkmode]
root(true)
diff --git a/src/client/assets/pointer.png b/src/client/assets/pointer.png
new file mode 100644
index 0000000000..c8bd07a3ae
Binary files /dev/null and b/src/client/assets/pointer.png differ
diff --git a/src/config/types.ts b/src/config/types.ts
index d557f2afde..62f63d4a3c 100644
--- a/src/config/types.ts
+++ b/src/config/types.ts
@@ -17,6 +17,7 @@ export type Source = {
};
name?: string;
description?: string;
+ welcome_bg_url?: string;
url: string;
port: number;
https?: { [x: string]: string };
diff --git a/webpack.config.ts b/webpack.config.ts
index 8376cd9c40..480f5d4a7a 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -85,7 +85,8 @@ const consts = {
_HOSTNAME_: config.hostname,
_URL_: config.url,
_LICENSE_: licenseHtml,
- _GOOGLE_MAPS_API_KEY_: config.google_maps_api_key
+ _GOOGLE_MAPS_API_KEY_: config.google_maps_api_key,
+ _WELCOME_BG_URL_: config.welcome_bg_url
};
const _consts = {};