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 = {};