diff options
Diffstat (limited to 'src/server/web/app/desktop/views/pages/welcome.vue')
| -rw-r--r-- | src/server/web/app/desktop/views/pages/welcome.vue | 319 |
1 files changed, 0 insertions, 319 deletions
diff --git a/src/server/web/app/desktop/views/pages/welcome.vue b/src/server/web/app/desktop/views/pages/welcome.vue deleted file mode 100644 index 34c28854b1..0000000000 --- a/src/server/web/app/desktop/views/pages/welcome.vue +++ /dev/null @@ -1,319 +0,0 @@ -<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"> - <router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${getAcct(user)}`" v-user-preview="user.id"> - <img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/> - </router-link> - </div> - </div> - <div> - <div> - <header>%fa:comments R% タイムライン<div><span></span><span></span><span></span></div></header> - <mk-welcome-timeline/> - </div> - </div> - </div> - </div> - </main> - <mk-forkit/> - <footer> - <div> - <mk-nav :class="$style.nav"/> - <p class="c">{{ copyright }}</p> - </div> - </footer> - <modal name="signup" width="500px" height="auto" scrollable> - <header :class="$style.signupFormHeader">新規登録</header> - <mk-signup :class="$style.signupForm"/> - </modal> - <modal name="signin" width="500px" height="auto" scrollable> - <header :class="$style.signinFormHeader">ログイン</header> - <mk-signin :class="$style.signinForm"/> - </modal> -</div> -</template> - -<script lang="ts"> -import Vue from 'vue'; -import { docsUrl, copyright, lang } from '../../../config'; -import getAcct from '../../../../../common/user/get-acct'; - -const shares = [ - 'Everything!', - 'Webpages', - 'Photos', - 'Interests', - 'Favorites' -]; - -export default Vue.extend({ - data() { - return { - aboutUrl: `${docsUrl}/${lang}/about`, - copyright, - users: [], - clock: null, - i: 0 - }; - }, - 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: { - getAcct, - signup() { - this.$modal.show('signup'); - }, - signin() { - this.$modal.show('signin'); - } - } -}); -</script> - -<style> -#wait { - right: auto; - left: 15px; -} -</style> - -<style lang="stylus" scoped> -@import '~const.styl' - -@import url('https://fonts.googleapis.com/css?family=Sarpanch:700') - -.mk-welcome - display flex - flex-direction column - flex 1 - $width = 1000px - - 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 - - > .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 - - &: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 #fff - - > .users - margin 16px 0 0 0 - - > * - display inline-block - margin 4px - - > * - display inline-block - width 38px - height 38px - vertical-align top - border-radius 6px - - > div:last-child - - > div - width 410px - background #fff - border-radius 8px - box-shadow 0 0 0 12px rgba(0, 0, 0, 0.1) - overflow hidden - - > header - z-index 1 - padding 12px 16px - color #888d94 - box-shadow 0 1px 0px rgba(0, 0, 0, 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 - - > footer - font-size 12px - color #949ea5 - - > div - max-width $width - margin 0 auto - padding 0 0 42px 0 - text-align center - - > .c - margin 16px 0 0 0 - font-size 10px - opacity 0.7 - -</style> - -<style lang="stylus" module> -.signupForm - padding 24px 48px 48px 48px - -.signupFormHeader - padding 48px 0 12px 0 - margin: 0 48px - font-size 1.5em - color #777 - border-bottom solid 1px #eee - -.signinForm - padding 24px 48px 48px 48px - -.signinFormHeader - padding 48px 0 12px 0 - margin: 0 48px - font-size 1.5em - color #777 - border-bottom solid 1px #eee - -.nav - a - color #666 -</style> - -<style lang="stylus"> -html -body - background linear-gradient(to bottom, #1e1d65, #bd6659) -</style> |