2018-02-10 14:56:33 +09:00
|
|
|
|
<template>
|
2018-02-10 19:57:37 +09:00
|
|
|
|
<div class="mk-welcome">
|
2018-02-10 14:56:33 +09:00
|
|
|
|
<main>
|
2018-03-17 03:33:36 +09:00
|
|
|
|
<div class="top">
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>Share<br>Everything!</h1>
|
2018-03-17 23:01:17 +09:00
|
|
|
|
<p>ようこそ! <b>Misskey</b>はTwitter風ミニブログSNSです。思ったことや皆と共有したいことを投稿しましょう。タイムラインを見れば、皆の関心事をすぐにチェックすることもできます。<a :href="aboutUrl">詳しく...</a></p>
|
2018-03-17 03:33:36 +09:00
|
|
|
|
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
|
2018-03-17 23:01:17 +09:00
|
|
|
|
<div class="users">
|
|
|
|
|
<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/${user.username}`" v-user-preview="user.id">
|
|
|
|
|
<img class="avatar" :src="`${user.avatar_url}?thumbnail&size=64`" alt="avatar"/>
|
|
|
|
|
</router-link>
|
|
|
|
|
</div>
|
2018-03-17 03:33:36 +09:00
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div>
|
2018-03-17 22:29:25 +09:00
|
|
|
|
<header>%fa:comments R% タイムライン<div><span></span><span></span><span></span></div></header>
|
2018-03-17 03:33:36 +09:00
|
|
|
|
<mk-welcome-timeline/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-02-10 14:56:33 +09:00
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<mk-forkit/>
|
|
|
|
|
<footer>
|
|
|
|
|
<div>
|
2018-02-11 12:42:02 +09:00
|
|
|
|
<mk-nav :class="$style.nav"/>
|
|
|
|
|
<p class="c">{{ copyright }}</p>
|
2018-02-10 14:56:33 +09:00
|
|
|
|
</div>
|
|
|
|
|
</footer>
|
2018-02-10 19:57:37 +09:00
|
|
|
|
<modal name="signup" width="500px" height="auto" scrollable>
|
|
|
|
|
<header :class="$style.signupFormHeader">新規登録</header>
|
2018-02-11 12:08:43 +09:00
|
|
|
|
<mk-signup :class="$style.signupForm"/>
|
|
|
|
|
</modal>
|
|
|
|
|
<modal name="signin" width="500px" height="auto" scrollable>
|
|
|
|
|
<header :class="$style.signinFormHeader">ログイン</header>
|
|
|
|
|
<mk-signin :class="$style.signinForm"/>
|
2018-02-10 16:22:14 +09:00
|
|
|
|
</modal>
|
2018-02-10 14:56:33 +09:00
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
2018-02-10 16:22:14 +09:00
|
|
|
|
<script lang="ts">
|
|
|
|
|
import Vue from 'vue';
|
2018-03-17 23:01:17 +09:00
|
|
|
|
import { docsUrl, copyright, lang } from '../../../config';
|
2018-02-10 16:22:14 +09:00
|
|
|
|
|
|
|
|
|
export default Vue.extend({
|
2018-02-11 12:42:02 +09:00
|
|
|
|
data() {
|
|
|
|
|
return {
|
2018-03-17 23:01:17 +09:00
|
|
|
|
aboutUrl: `${docsUrl}/${lang}/about`,
|
|
|
|
|
copyright,
|
|
|
|
|
users: []
|
2018-02-11 12:42:02 +09:00
|
|
|
|
};
|
|
|
|
|
},
|
2018-03-17 23:01:17 +09:00
|
|
|
|
mounted() {
|
|
|
|
|
(this as any).api('users', {
|
|
|
|
|
sort: '+follower',
|
|
|
|
|
limit: 20
|
|
|
|
|
}).then(users => {
|
|
|
|
|
this.users = users;
|
|
|
|
|
});
|
|
|
|
|
},
|
2018-02-10 16:22:14 +09:00
|
|
|
|
methods: {
|
|
|
|
|
signup() {
|
|
|
|
|
this.$modal.show('signup');
|
2018-02-11 12:08:43 +09:00
|
|
|
|
},
|
|
|
|
|
signin() {
|
|
|
|
|
this.$modal.show('signin');
|
2018-02-10 16:22:14 +09:00
|
|
|
|
}
|
2018-02-10 14:56:33 +09:00
|
|
|
|
}
|
2018-02-10 16:22:14 +09:00
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
#wait {
|
|
|
|
|
right: auto;
|
|
|
|
|
left: 15px;
|
|
|
|
|
}
|
2018-02-10 14:56:33 +09:00
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style lang="stylus" scoped>
|
2018-03-03 13:47:55 +09:00
|
|
|
|
@import '~const.styl'
|
|
|
|
|
|
2018-02-10 19:57:37 +09:00
|
|
|
|
.mk-welcome
|
2018-02-10 16:22:14 +09:00
|
|
|
|
display flex
|
|
|
|
|
flex-direction column
|
|
|
|
|
flex 1
|
|
|
|
|
$width = 1000px
|
|
|
|
|
|
2018-03-17 17:47:46 +09:00
|
|
|
|
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
|
|
|
|
|
|
2018-02-10 16:22:14 +09:00
|
|
|
|
> main
|
2018-02-10 14:56:33 +09:00
|
|
|
|
display flex
|
|
|
|
|
flex 1
|
|
|
|
|
|
2018-03-17 03:33:36 +09:00
|
|
|
|
> .top
|
|
|
|
|
display flex
|
|
|
|
|
width 100%
|
|
|
|
|
|
|
|
|
|
> div
|
|
|
|
|
display flex
|
|
|
|
|
max-width $width
|
|
|
|
|
margin 0 auto
|
|
|
|
|
padding 80px 0 0 0
|
|
|
|
|
|
|
|
|
|
> div:first-child
|
|
|
|
|
margin 0 48px 0 0
|
2018-03-17 17:47:46 +09:00
|
|
|
|
color #d1e6bf
|
|
|
|
|
text-shadow 0 0 12px #172062
|
2018-03-17 03:33:36 +09:00
|
|
|
|
|
|
|
|
|
> h1
|
|
|
|
|
margin 0
|
|
|
|
|
font-weight normal
|
|
|
|
|
font-variant small-caps
|
|
|
|
|
letter-spacing 12px
|
|
|
|
|
|
|
|
|
|
> p
|
|
|
|
|
margin 0.5em 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
|
2018-03-17 23:01:17 +09:00
|
|
|
|
color #fff
|
2018-03-17 03:33:36 +09:00
|
|
|
|
|
2018-03-17 23:01:17 +09:00
|
|
|
|
> .users
|
|
|
|
|
margin 16px 0 0 0
|
|
|
|
|
|
|
|
|
|
> *
|
|
|
|
|
display inline-block
|
|
|
|
|
margin 4px
|
|
|
|
|
|
|
|
|
|
> *
|
|
|
|
|
display inline-block
|
|
|
|
|
width 38px
|
|
|
|
|
height 38px
|
|
|
|
|
vertical-align top
|
|
|
|
|
border-radius 6px
|
2018-03-17 03:33:36 +09:00
|
|
|
|
|
|
|
|
|
> div:last-child
|
|
|
|
|
|
|
|
|
|
> div
|
|
|
|
|
width 410px
|
|
|
|
|
background #fff
|
|
|
|
|
border-radius 8px
|
|
|
|
|
overflow hidden
|
|
|
|
|
|
|
|
|
|
> header
|
|
|
|
|
z-index 1
|
|
|
|
|
padding 12px 16px
|
|
|
|
|
color #888d94
|
|
|
|
|
box-shadow 0 1px 0px rgba(0, 0, 0, 0.1)
|
|
|
|
|
|
2018-03-17 22:29:25 +09:00
|
|
|
|
> div
|
|
|
|
|
position absolute
|
|
|
|
|
top 0
|
|
|
|
|
right 0
|
|
|
|
|
padding inherit
|
|
|
|
|
|
|
|
|
|
> span
|
|
|
|
|
display inline-block
|
|
|
|
|
height 11px
|
|
|
|
|
width 11px
|
|
|
|
|
margin-left 5px
|
|
|
|
|
background #ccc
|
|
|
|
|
border-radius 100%
|
|
|
|
|
vertical-align middle
|
|
|
|
|
|
|
|
|
|
&:nth-child(1)
|
|
|
|
|
background #5BCC8B
|
|
|
|
|
|
|
|
|
|
&:nth-child(2)
|
|
|
|
|
background #E6BB46
|
|
|
|
|
|
|
|
|
|
&:nth-child(3)
|
|
|
|
|
background #DF7065
|
|
|
|
|
|
2018-03-17 03:33:36 +09:00
|
|
|
|
> .mk-welcome-timeline
|
|
|
|
|
max-height 350px
|
|
|
|
|
overflow auto
|
2018-02-10 14:56:33 +09:00
|
|
|
|
|
2018-02-10 16:22:14 +09:00
|
|
|
|
> footer
|
2018-03-17 17:47:46 +09:00
|
|
|
|
font-size 12px
|
2018-03-17 03:33:36 +09:00
|
|
|
|
color #949ea5
|
2018-02-10 14:56:33 +09:00
|
|
|
|
|
2018-02-10 16:22:14 +09:00
|
|
|
|
> div
|
|
|
|
|
max-width $width
|
|
|
|
|
margin 0 auto
|
2018-03-17 17:47:46 +09:00
|
|
|
|
padding 0 0 42px 0
|
2018-02-10 16:22:14 +09:00
|
|
|
|
text-align center
|
2018-02-10 14:56:33 +09:00
|
|
|
|
|
2018-02-10 16:22:14 +09:00
|
|
|
|
> .c
|
2018-02-11 12:42:02 +09:00
|
|
|
|
margin 16px 0 0 0
|
2018-02-10 16:22:14 +09:00
|
|
|
|
font-size 10px
|
2018-03-17 17:47:46 +09:00
|
|
|
|
opacity 0.7
|
2018-02-10 14:56:33 +09:00
|
|
|
|
|
|
|
|
|
</style>
|
2018-02-10 19:57:37 +09:00
|
|
|
|
|
|
|
|
|
<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
|
2018-02-11 12:08:43 +09:00
|
|
|
|
|
|
|
|
|
.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
|
2018-02-11 12:42:02 +09:00
|
|
|
|
|
|
|
|
|
.nav
|
|
|
|
|
a
|
|
|
|
|
color #666
|
2018-02-10 19:57:37 +09:00
|
|
|
|
</style>
|
2018-03-17 17:47:46 +09:00
|
|
|
|
|
|
|
|
|
<style lang="stylus">
|
|
|
|
|
html
|
|
|
|
|
body
|
|
|
|
|
background linear-gradient(to bottom, #1e1d65, #bd6659)
|
|
|
|
|
</style>
|