rudeshark.net/src/client/app/desktop/views/pages/welcome.vue

320 lines
6.3 KiB
Vue
Raw Normal View History

2018-02-10 06:56:33 +01:00
<template>
2018-02-10 11:57:37 +01:00
<div class="mk-welcome">
2018-02-10 06:56:33 +01:00
<main>
2018-03-16 19:33:36 +01:00
<div class="top">
<div>
<div>
2018-03-18 17:20:49 +01:00
<h1>Share<br><span ref="share">Everything!</span><span class="cursor">_</span></h1>
2018-03-17 15:01:17 +01:00
<p>ようこそ <b>Misskey</b>はTwitter風ミニブログSNSです思ったことや皆と共有したいことを投稿しましょうタイムラインを見れば皆の関心事をすぐにチェックすることもできます<a :href="aboutUrl">詳しく...</a></p>
2018-03-16 19:33:36 +01:00
<p><button class="signup" @click="signup">はじめる</button><button class="signin" @click="signin">ログイン</button></p>
2018-03-17 15:01:17 +01:00
<div class="users">
2018-03-27 09:51:12 +02:00
<router-link v-for="user in users" :key="user.id" class="avatar-anchor" :to="`/@${getAcct(user)}`" v-user-preview="user.id">
2018-03-29 07:48:47 +02:00
<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=64`" alt="avatar"/>
2018-03-17 15:01:17 +01:00
</router-link>
</div>
2018-03-16 19:33:36 +01:00
</div>
<div>
<div>
2018-03-17 14:29:25 +01:00
<header>%fa:comments R% タイムライン<div><span></span><span></span><span></span></div></header>
2018-03-16 19:33:36 +01:00
<mk-welcome-timeline/>
</div>
</div>
</div>
2018-02-10 06:56:33 +01:00
</div>
</main>
<mk-forkit/>
<footer>
<div>
2018-02-11 04:42:02 +01:00
<mk-nav :class="$style.nav"/>
<p class="c">{{ copyright }}</p>
2018-02-10 06:56:33 +01:00
</div>
</footer>
2018-02-10 11:57:37 +01:00
<modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">新規登録</header>
2018-02-11 04:08:43 +01: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 08:22:14 +01:00
</modal>
2018-02-10 06:56:33 +01:00
</div>
</template>
2018-02-10 08:22:14 +01:00
<script lang="ts">
import Vue from 'vue';
2018-03-17 15:01:17 +01:00
import { docsUrl, copyright, lang } from '../../../config';
2018-04-01 21:15:27 +02:00
import getAcct from '../../../../../misc/user/get-acct';
2018-02-10 08:22:14 +01:00
2018-03-18 17:20:49 +01:00
const shares = [
'Everything!',
'Webpages',
'Photos',
'Interests',
'Favorites'
];
2018-02-10 08:22:14 +01:00
export default Vue.extend({
2018-02-11 04:42:02 +01:00
data() {
return {
2018-03-17 15:01:17 +01:00
aboutUrl: `${docsUrl}/${lang}/about`,
copyright,
2018-03-18 17:20:49 +01:00
users: [],
clock: null,
i: 0
2018-02-11 04:42:02 +01:00
};
},
2018-03-17 15:01:17 +01:00
mounted() {
(this as any).api('users', {
sort: '+follower',
limit: 20
}).then(users => {
this.users = users;
});
2018-03-18 17:20:49 +01:00
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);
2018-03-17 15:01:17 +01:00
},
2018-02-10 08:22:14 +01:00
methods: {
2018-03-27 09:51:12 +02:00
getAcct,
2018-02-10 08:22:14 +01:00
signup() {
this.$modal.show('signup');
2018-02-11 04:08:43 +01:00
},
signin() {
this.$modal.show('signin');
2018-02-10 08:22:14 +01:00
}
2018-02-10 06:56:33 +01:00
}
2018-02-10 08:22:14 +01:00
});
</script>
<style>
#wait {
right: auto;
left: 15px;
}
2018-02-10 06:56:33 +01:00
</style>
<style lang="stylus" scoped>
2018-03-03 05:47:55 +01:00
@import '~const.styl'
2018-03-19 15:27:34 +01:00
@import url('https://fonts.googleapis.com/css?family=Sarpanch:700')
2018-02-10 11:57:37 +01:00
.mk-welcome
2018-02-10 08:22:14 +01:00
display flex
flex-direction column
flex 1
$width = 1000px
2018-03-17 09:47:46 +01: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 08:22:14 +01:00
> main
2018-02-10 06:56:33 +01:00
display flex
flex 1
2018-03-16 19:33:36 +01:00
> .top
display flex
width 100%
> div
display flex
2018-03-17 19:55:43 +01:00
max-width $width + 64px
2018-03-16 19:33:36 +01:00
margin 0 auto
2018-03-17 19:55:43 +01:00
padding 80px 32px 0 32px
> *
margin-bottom 48px
2018-03-16 19:33:36 +01:00
> div:first-child
2018-03-17 19:55:43 +01:00
margin-right 48px
color #fff
2018-03-17 09:47:46 +01:00
text-shadow 0 0 12px #172062
2018-03-16 19:33:36 +01:00
> h1
margin 0
2018-03-17 20:00:14 +01:00
font-weight bold
2018-03-19 15:27:34 +01:00
//font-variant small-caps
2018-03-16 19:33:36 +01:00
letter-spacing 12px
2018-03-19 15:27:34 +01:00
font-family 'Sarpanch', sans-serif
font-size 42px
line-height 48px
2018-03-16 19:33:36 +01:00
2018-03-18 17:20:49 +01:00
> .cursor
animation cursor 1s infinite linear both
@keyframes cursor
0%
opacity 1
50%
opacity 0
2018-03-16 19:33:36 +01:00
> p
2018-03-19 15:27:34 +01:00
margin 1em 0
2018-03-16 19:33:36 +01:00
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 15:01:17 +01:00
color #fff
2018-03-16 19:33:36 +01:00
2018-03-17 15:01:17 +01: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-16 19:33:36 +01:00
> div:last-child
> div
width 410px
background #fff
border-radius 8px
2018-03-18 08:47:33 +01:00
box-shadow 0 0 0 12px rgba(0, 0, 0, 0.1)
2018-03-16 19:33:36 +01:00
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 14:29:25 +01:00
> div
position absolute
top 0
right 0
padding inherit
> span
display inline-block
height 11px
width 11px
2018-03-17 19:40:51 +01:00
margin-left 6px
2018-03-17 14:29:25 +01:00
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-16 19:33:36 +01:00
> .mk-welcome-timeline
max-height 350px
overflow auto
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> footer
2018-03-17 09:47:46 +01:00
font-size 12px
2018-03-16 19:33:36 +01:00
color #949ea5
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> div
max-width $width
margin 0 auto
2018-03-17 09:47:46 +01:00
padding 0 0 42px 0
2018-02-10 08:22:14 +01:00
text-align center
2018-02-10 06:56:33 +01:00
2018-02-10 08:22:14 +01:00
> .c
2018-02-11 04:42:02 +01:00
margin 16px 0 0 0
2018-02-10 08:22:14 +01:00
font-size 10px
2018-03-17 09:47:46 +01:00
opacity 0.7
2018-02-10 06:56:33 +01:00
</style>
2018-02-10 11:57:37 +01: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 04:08:43 +01: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 04:42:02 +01:00
.nav
a
color #666
2018-02-10 11:57:37 +01:00
</style>
2018-03-17 09:47:46 +01:00
<style lang="stylus">
html
body
background linear-gradient(to bottom, #1e1d65, #bd6659)
</style>