mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-23 19:18:53 +09:00
275 lines
5.1 KiB
Vue
275 lines
5.1 KiB
Vue
<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>
|
|
<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
|
|
<div class="container">
|
|
<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>
|
|
<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>
|
|
<mk-nav class="nav"/>
|
|
</div>
|
|
<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"/>
|
|
</modal>
|
|
<modal name="signin" width="500px" height="auto" scrollable>
|
|
<header :class="$style.signinFormHeader">%i18n:@signin%</header>
|
|
<mk-signin :class="$style.signinForm"/>
|
|
</modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue';
|
|
import { host, name, description, copyright, welcomeBgUrl } from '../../../config';
|
|
|
|
export default Vue.extend({
|
|
data() {
|
|
return {
|
|
stats: null,
|
|
copyright,
|
|
welcomeBgUrl,
|
|
host,
|
|
name,
|
|
description,
|
|
pointerInterval: null
|
|
};
|
|
},
|
|
created() {
|
|
(this as any).api('stats').then(stats => {
|
|
this.stats = stats;
|
|
});
|
|
},
|
|
mounted() {
|
|
this.point();
|
|
this.pointerInterval = setInterval(this.point, 100);
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.pointerInterval);
|
|
},
|
|
methods: {
|
|
point() {
|
|
const x = this.$refs.signup.getBoundingClientRect();
|
|
this.$refs.pointer.style.top = x.top + x.height + 'px';
|
|
this.$refs.pointer.style.left = x.left + 'px';
|
|
},
|
|
signup() {
|
|
this.$modal.show('signup');
|
|
},
|
|
signin() {
|
|
this.$modal.show('signin');
|
|
},
|
|
dark() {
|
|
this.$store.commit('device/set', {
|
|
key: 'darkmode',
|
|
value: !this.$store.state.device.darkmode
|
|
});
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
#wait {
|
|
right: auto;
|
|
left: 15px;
|
|
}
|
|
</style>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~const.styl'
|
|
|
|
root(isDark)
|
|
display flex
|
|
min-height 100vh
|
|
|
|
> .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(-48px)
|
|
pointer-events none
|
|
|
|
> button
|
|
position fixed
|
|
z-index 1
|
|
top 0
|
|
left 0
|
|
padding 16px
|
|
font-size 18px
|
|
color #fff
|
|
|
|
display none // TODO
|
|
|
|
> .body
|
|
flex 1
|
|
padding 64px 0 0 0
|
|
text-align center
|
|
background #578394
|
|
background-position center
|
|
background-size cover
|
|
|
|
&:before
|
|
content ''
|
|
display block
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
right 0
|
|
bottom 0
|
|
background rgba(#000, 0.5)
|
|
|
|
> .forkit
|
|
position absolute
|
|
top 0
|
|
right 0
|
|
|
|
> img
|
|
position absolute
|
|
bottom 16px
|
|
right 16px
|
|
width 150px
|
|
|
|
> .container
|
|
$aboutWidth = 380px
|
|
$loginWidth = 340px
|
|
$width = $aboutWidth + $loginWidth
|
|
|
|
> main
|
|
display flex
|
|
margin auto
|
|
width $width
|
|
border-radius 8px
|
|
overflow hidden
|
|
box-shadow 0 2px 8px rgba(#000, 0.3)
|
|
|
|
> .about
|
|
width $aboutWidth
|
|
color #444
|
|
background #fff
|
|
|
|
> h1
|
|
margin 0 0 16px 0
|
|
padding 32px 32px 0 32px
|
|
color #444
|
|
|
|
> img
|
|
width 170px
|
|
vertical-align bottom
|
|
|
|
> .powerd-by
|
|
margin 16px
|
|
opacity 0.7
|
|
|
|
> .desc
|
|
margin 0
|
|
padding 0 32px 16px 32px
|
|
|
|
> a
|
|
display inline-block
|
|
margin 0 0 32px 0
|
|
font-weight bold
|
|
|
|
> .login
|
|
width $loginWidth
|
|
padding 16px 32px 32px 32px
|
|
background #f5f5f5
|
|
|
|
> .info
|
|
margin 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
|
|
|
|
> .nav
|
|
display block
|
|
margin 16px 0
|
|
font-size 14px
|
|
color #fff
|
|
|
|
> .tl
|
|
margin 0
|
|
width 410px
|
|
height 100vh
|
|
text-align left
|
|
background isDark ? #313543 : #fff
|
|
|
|
> *
|
|
max-height 100%
|
|
overflow auto
|
|
|
|
.mk-welcome[data-darkmode]
|
|
root(true)
|
|
|
|
.mk-welcome:not([data-darkmode])
|
|
root(false)
|
|
|
|
</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>
|