🎨
This commit is contained in:
syuilo
parent
a44387f250
commit
e6f33e997f
9 changed files with 169 additions and 166 deletions
|
|
@ -3,7 +3,7 @@ meta:
|
||||||
divider: ""
|
divider: ""
|
||||||
|
|
||||||
common:
|
common:
|
||||||
misskey: "A planet of fediverse"
|
misskey: "A ⭐ of fediverse"
|
||||||
about-title: "A ⭐ of fediverse."
|
about-title: "A ⭐ of fediverse."
|
||||||
about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
|
about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,6 @@
|
||||||
|
|
||||||
.a
|
.a
|
||||||
display block
|
display block
|
||||||
position fixed
|
|
||||||
top 0
|
|
||||||
right 0
|
|
||||||
|
|
||||||
> svg
|
> svg
|
||||||
display block
|
display block
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
|
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
|
||||||
<label class="user-name">
|
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
|
||||||
<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="%i18n:@username%" autofocus required @change="onUsernameChange"/>%fa:at%
|
<span>%i18n:@username%</span>
|
||||||
</label>
|
<span slot="prefix">@</span>
|
||||||
<label class="password">
|
<span slot="suffix">@{{ host }}</span>
|
||||||
<input v-model="password" type="password" placeholder="%i18n:@password%" required/>%fa:lock%
|
</ui-input>
|
||||||
</label>
|
<ui-input v-model="password" type="password" required>
|
||||||
<label class="token" v-if="user && user.twoFactorEnabled">
|
<span>%i18n:@password%</span>
|
||||||
<input v-model="token" type="number" placeholder="%i18n:@token%" required/>%fa:lock%
|
<span slot="prefix">%fa:lock%</span>
|
||||||
</label>
|
</ui-input>
|
||||||
<button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</button>
|
<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
|
||||||
もしくは <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
|
<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>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { apiUrl } from '../../../config';
|
import { apiUrl, host } from '../../../config';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -27,6 +28,7 @@ export default Vue.extend({
|
||||||
password: '',
|
password: '',
|
||||||
token: '',
|
token: '',
|
||||||
apiUrl,
|
apiUrl,
|
||||||
|
host
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
|
||||||
|
|
@ -10,13 +10,12 @@
|
||||||
<template v-if="type != 'file'">
|
<template v-if="type != 'file'">
|
||||||
<input ref="input"
|
<input ref="input"
|
||||||
:type="type"
|
:type="type"
|
||||||
:value="v"
|
v-model="v"
|
||||||
:required="required"
|
:required="required"
|
||||||
:readonly="readonly"
|
:readonly="readonly"
|
||||||
:pattern="pattern"
|
:pattern="pattern"
|
||||||
:autocomplete="autocomplete"
|
:autocomplete="autocomplete"
|
||||||
:spellcheck="spellcheck"
|
:spellcheck="spellcheck"
|
||||||
@input="$emit('input', $event.target.value)"
|
|
||||||
@focus="focused = true"
|
@focus="focused = true"
|
||||||
@blur="focused = false">
|
@blur="focused = false">
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -104,6 +103,8 @@ export default Vue.extend({
|
||||||
this.v = v;
|
this.v = v;
|
||||||
},
|
},
|
||||||
v(v) {
|
v(v) {
|
||||||
|
this.$emit('input', v);
|
||||||
|
|
||||||
if (this.withPasswordMeter) {
|
if (this.withPasswordMeter) {
|
||||||
if (v == '') {
|
if (v == '') {
|
||||||
this.passwordStrength = '';
|
this.passwordStrength = '';
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ declare const _VERSION_: string;
|
||||||
declare const _CODENAME_: string;
|
declare const _CODENAME_: string;
|
||||||
declare const _LICENSE_: string;
|
declare const _LICENSE_: string;
|
||||||
declare const _GOOGLE_MAPS_API_KEY_: string;
|
declare const _GOOGLE_MAPS_API_KEY_: string;
|
||||||
|
declare const _WELCOME_BG_URL_: string;
|
||||||
|
|
||||||
export const host = _HOST_;
|
export const host = _HOST_;
|
||||||
export const hostname = _HOSTNAME_;
|
export const hostname = _HOSTNAME_;
|
||||||
|
|
@ -41,3 +42,4 @@ export const version = _VERSION_;
|
||||||
export const codename = _CODENAME_;
|
export const codename = _CODENAME_;
|
||||||
export const license = _LICENSE_;
|
export const license = _LICENSE_;
|
||||||
export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;
|
export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;
|
||||||
|
export const welcomeBgUrl = _WELCOME_BG_URL_;
|
||||||
|
|
|
||||||
|
|
@ -1,36 +1,39 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-welcome">
|
<div class="mk-welcome">
|
||||||
|
<img ref="pointer" class="pointer" src="/assets/pointer.png" alt="">
|
||||||
<button @click="dark">
|
<button @click="dark">
|
||||||
<template v-if="$store.state.device.darkmode">%fa:moon%</template>
|
<template v-if="$store.state.device.darkmode">%fa:moon%</template>
|
||||||
<template v-else>%fa:R moon%</template>
|
<template v-else>%fa:R moon%</template>
|
||||||
</button>
|
</button>
|
||||||
<main v-if="about" class="about">
|
<div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
|
||||||
<article>
|
<div class="container">
|
||||||
<h1>%i18n:common.about-title%</h1>
|
<div class="info">
|
||||||
<p v-html="'%i18n:common.about%'"></p>
|
<span>%i18n:common.misskey% <b>{{ host }}</b></span>
|
||||||
<span class="gotit" @click="about = false">%i18n:@gotit%</span>
|
<span class="stats" v-if="stats">
|
||||||
</article>
|
<span>%fa:user% {{ stats.originalUsersCount | number }}</span>
|
||||||
</main>
|
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
|
||||||
<main v-else class="index">
|
</span>
|
||||||
<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
|
</div>
|
||||||
<p class="desc"><b>%i18n:common.misskey%</b> - <span @click="about = true">%i18n:@about%</span></p>
|
<main>
|
||||||
<p class="account">
|
<div class="about">
|
||||||
<button class="signup" @click="signup">%i18n:@signup-button%</button>
|
<h1 v-if="name">{{ name }}</h1>
|
||||||
<button class="signin" @click="signin">%i18n:@signin-button%</button>
|
<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"></h1>
|
||||||
</p>
|
<p class="powerd-by" v-if="name">powerd by <b>Misskey</b></p>
|
||||||
|
<p class="desc" v-html="description || '%i18n:common.about%'"></p>
|
||||||
<div class="tl">
|
<a ref="signup" @click="signup">%i18n:@signup%</a>
|
||||||
<header>%fa:comments R% %i18n:@timeline%<div><span></span><span></span><span></span></div></header>
|
</div>
|
||||||
<mk-welcome-timeline/>
|
<div class="login">
|
||||||
|
<mk-signin/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<mk-nav class="nav"/>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<mk-forkit class="forkit"/>
|
||||||
<mk-forkit/>
|
<img src="assets/title.dark.svg" alt="Misskey">
|
||||||
<footer>
|
</div>
|
||||||
<div>
|
<div class="tl">
|
||||||
<mk-nav :class="$style.nav"/>
|
<mk-welcome-timeline/>
|
||||||
<p class="c">{{ copyright }}</p>
|
</div>
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
<modal name="signup" width="500px" height="auto" scrollable>
|
<modal name="signup" width="500px" height="auto" scrollable>
|
||||||
<header :class="$style.signupFormHeader">%i18n:@signup%</header>
|
<header :class="$style.signupFormHeader">%i18n:@signup%</header>
|
||||||
<mk-signup :class="$style.signupForm"/>
|
<mk-signup :class="$style.signupForm"/>
|
||||||
|
|
@ -44,15 +47,27 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { copyright } from '../../../config';
|
import { host, copyright, welcomeBgUrl } from '../../../config';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
about: false,
|
stats: null,
|
||||||
copyright
|
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: {
|
methods: {
|
||||||
signup() {
|
signup() {
|
||||||
this.$modal.show('signup');
|
this.$modal.show('signup');
|
||||||
|
|
@ -80,13 +95,20 @@ export default Vue.extend({
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
|
|
||||||
|
|
||||||
root(isDark)
|
root(isDark)
|
||||||
|
display flex
|
||||||
min-height 100vh
|
min-height 100vh
|
||||||
background-image isDark ? url('/assets/welcome-bg.dark.svg') : url('/assets/welcome-bg.light.svg')
|
|
||||||
background-size cover
|
> .pointer
|
||||||
background-position center
|
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
|
> button
|
||||||
position fixed
|
position fixed
|
||||||
|
|
@ -95,140 +117,117 @@ root(isDark)
|
||||||
left 0
|
left 0
|
||||||
padding 16px
|
padding 16px
|
||||||
font-size 18px
|
font-size 18px
|
||||||
color isDark ? #fff : #555
|
color #fff
|
||||||
|
|
||||||
> main
|
display none // TODO
|
||||||
|
|
||||||
|
> .body
|
||||||
flex 1
|
flex 1
|
||||||
padding 64px 0 0 0
|
padding 64px 0 0 0
|
||||||
text-align center
|
text-align center
|
||||||
|
background #578394
|
||||||
|
background-position center
|
||||||
|
background-size cover
|
||||||
|
|
||||||
&.about
|
&:before
|
||||||
font-family 'Noto Sans JP'
|
content ''
|
||||||
color isDark ? #fff : #627574
|
display block
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
right 0
|
||||||
|
bottom 0
|
||||||
|
background rgba(#000, 0.5)
|
||||||
|
|
||||||
> article
|
> .forkit
|
||||||
max-width 700px
|
position absolute
|
||||||
margin 42px auto 0 auto
|
top 0
|
||||||
padding 64px 82px
|
right 0
|
||||||
background isDark ? #282C37 : #fff
|
|
||||||
box-shadow 0 8px 32px rgba(#000, 0.15)
|
|
||||||
|
|
||||||
> h1
|
> img
|
||||||
margin 0
|
position absolute
|
||||||
font-weight 900
|
bottom 16px
|
||||||
|
right 16px
|
||||||
|
width 150px
|
||||||
|
|
||||||
> p
|
> .container
|
||||||
margin 20px 0
|
$aboutWidth = 380px
|
||||||
line-height 2em
|
$loginWidth = 340px
|
||||||
|
$width = $aboutWidth + $loginWidth
|
||||||
|
|
||||||
> .gotit
|
> .info
|
||||||
color $theme-color
|
margin 0 auto 16px auto
|
||||||
cursor pointer
|
padding 12px
|
||||||
|
width $width
|
||||||
&:hover
|
font-size 14px
|
||||||
text-decoration underline
|
color #fff
|
||||||
|
background rgba(#000, 0.2)
|
||||||
&.index
|
border-radius 8px
|
||||||
color isDark ? #9aa4b3 : #555
|
|
||||||
|
> .stats
|
||||||
> img
|
margin-left 16px
|
||||||
width 350px
|
padding-left 16px
|
||||||
|
border-left solid 1px #fff
|
||||||
> .desc
|
|
||||||
margin -12px 0 24px 0
|
> *
|
||||||
color isDark ? #fff : #555
|
margin-right 16px
|
||||||
|
|
||||||
> span
|
> main
|
||||||
color $theme-color
|
display flex
|
||||||
cursor pointer
|
margin auto
|
||||||
|
width $width
|
||||||
&: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
|
|
||||||
border-radius 8px
|
border-radius 8px
|
||||||
box-shadow 0 8px 32px rgba(#000, 0.15)
|
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
box-shadow 0 2px 8px rgba(#000, 0.3)
|
||||||
|
|
||||||
> header
|
> .about
|
||||||
z-index 1
|
width $aboutWidth
|
||||||
padding 12px 16px
|
color #444
|
||||||
color isDark ? #e3e5e8 : #888d94
|
background #fff
|
||||||
box-shadow 0 1px 0px rgba(#000, 0.1)
|
|
||||||
|
|
||||||
> div
|
> h1
|
||||||
position absolute
|
margin 0 0 16px 0
|
||||||
top 0
|
padding 32px 32px 0 32px
|
||||||
right 0
|
color #444
|
||||||
padding inherit
|
|
||||||
|
|
||||||
> span
|
> img
|
||||||
display inline-block
|
width 170px
|
||||||
height 11px
|
vertical-align bottom
|
||||||
width 11px
|
|
||||||
margin-left 6px
|
|
||||||
border-radius 100%
|
|
||||||
vertical-align middle
|
|
||||||
|
|
||||||
&:nth-child(1)
|
> .powerd-by
|
||||||
background #5BCC8B
|
margin 16px
|
||||||
|
opacity 0.7
|
||||||
|
|
||||||
&:nth-child(2)
|
> .desc
|
||||||
background #E6BB46
|
margin 0
|
||||||
|
padding 0 32px 16px 32px
|
||||||
|
|
||||||
&:nth-child(3)
|
> a
|
||||||
background #DF7065
|
display inline-block
|
||||||
|
margin 0 0 32px 0
|
||||||
|
font-weight bold
|
||||||
|
|
||||||
> .mk-welcome-timeline
|
> .login
|
||||||
max-height 350px
|
width $loginWidth
|
||||||
overflow auto
|
padding 16px 32px 32px 32px
|
||||||
|
background #f5f5f5
|
||||||
|
|
||||||
> footer
|
> .nav
|
||||||
font-size 12px
|
display block
|
||||||
color isDark ? #949ea5 : #737c82
|
margin 16px 0
|
||||||
|
font-size 14px
|
||||||
|
color #fff
|
||||||
|
|
||||||
> div
|
> .tl
|
||||||
margin 0 auto
|
margin 0
|
||||||
padding 64px
|
width 410px
|
||||||
text-align center
|
height 100vh
|
||||||
|
text-align left
|
||||||
|
background isDark ? #313543 : #fff
|
||||||
|
|
||||||
> .c
|
> *
|
||||||
margin 16px 0 0 0
|
max-height 100%
|
||||||
font-size 10px
|
overflow auto
|
||||||
opacity 0.7
|
|
||||||
|
|
||||||
.mk-welcome[data-darkmode]
|
.mk-welcome[data-darkmode]
|
||||||
root(true)
|
root(true)
|
||||||
|
|
|
||||||
BIN
src/client/assets/pointer.png
Normal file
BIN
src/client/assets/pointer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
|
|
@ -17,6 +17,7 @@ export type Source = {
|
||||||
};
|
};
|
||||||
name?: string;
|
name?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
|
welcome_bg_url?: string;
|
||||||
url: string;
|
url: string;
|
||||||
port: number;
|
port: number;
|
||||||
https?: { [x: string]: string };
|
https?: { [x: string]: string };
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,8 @@ const consts = {
|
||||||
_HOSTNAME_: config.hostname,
|
_HOSTNAME_: config.hostname,
|
||||||
_URL_: config.url,
|
_URL_: config.url,
|
||||||
_LICENSE_: licenseHtml,
|
_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 = {};
|
const _consts = {};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue