diff --git a/assets/about/drive.png b/assets/about/drive.png new file mode 100644 index 000000000..c35de433a Binary files /dev/null and b/assets/about/drive.png differ diff --git a/assets/about/post.png b/assets/about/post.png new file mode 100644 index 000000000..ba291ec66 Binary files /dev/null and b/assets/about/post.png differ diff --git a/assets/about/reaction.png b/assets/about/reaction.png new file mode 100644 index 000000000..e4e7e06bc Binary files /dev/null and b/assets/about/reaction.png differ diff --git a/assets/about/ui.png b/assets/about/ui.png new file mode 100644 index 000000000..ad102a31a Binary files /dev/null and b/assets/about/ui.png differ diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 07d8e7f48..9404cd6ba 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -6,6 +6,19 @@ common: misskey: "A ⭐ of fediverse" about-title: "A ⭐ of fediverse." about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた分散マイクロブログSNSです。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。" + intro: + title: "Misskeyって？" + about: "Misskeyはオープンソースの分散型マイクロブログSNSです。リッチで高度にカスタマイズできるUI、投稿へのリアクション、ファイルを一元管理できるドライブなど、先進的な機能を揃えています。また、Fediverseと呼ばれるネットワークに接続できるため、他のSNSともやり取りできます。例えば、あなたが何か投稿すると、その投稿はMisskeyだけでなく他のSNSにも伝わります。ちょうどある惑星から他の惑星に電波を発信している様子をイメージしてください。" + features: "特徴" + rich-contents: "投稿" + rich-contents-desc: "自分の考え、話題の出来事、皆と共有したいことについて発信してください。必要であれば、様々な構文を使って投稿を装飾したり、好きな画像、動画などのファイルやアンケートを添付することもできます。" + reaction: "リアクション" + reaction-desc: "あなたの気持ちを伝える最も簡単な方法です。Misskeyは、他のユーザーの投稿に様々なリアクションを付けることができます。いちどMisskeyのリアクション機能を体験してしまうと、もう「いいね」の概念しか存在しないSNSには戻れなくなるかもしれません。" + ui: "インターフェース" + ui-desc: "どのようなUIが使いやすいかは人それぞれです。だから、Misskeyは自由度の高いUIを持っています。レイアウトやデザインを調整したり、カスタマイズ可能な様々なウィジェットを配置したりして、自分だけのホームを作ってください。" + drive: "ドライブ" + drive-desc: "以前投稿したことのある画像をまた投稿したくなったことはありませんか？もしくは、アップロードしたファイルをフォルダ分けして整理したくなったことはありませんか？Misskeyの根幹に組み込まれたドライブ機能によってそれらが解決します。ファイルの共有も簡単です。" + outro: "他にもMisskeyにしかない機能はまだまだあるので、ぜひあなた自身の目で確かめてください。Misskeyは分散型SNSなので、このインスタンスが気に入らなければ他のインスタンスを試すこともできます。それでは、GLHF!" adblock: detected: "広告ブロッカーを無効にしてください" warning: "Misskeyは広告を掲載していませんが、広告をブロックする機能が有効だと一部の機能が利用できなかったり、不具合が発生する場合があります。" diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue index 549d9175f..441ce890d 100644 --- a/src/client/app/desktop/views/pages/welcome.vue +++ b/src/client/app/desktop/views/pages/welcome.vue @@ -7,86 +7,128 @@ -
-
-
-

{{ name }}

-

- -
- {{ host }} - - - %fa:user% {{ stats.originalUsersCount | number }} - %fa:pencil-alt% {{ stats.originalNotesCount | number }} - -
- -

- -

- - | - -

- - -
-
- -
-
%fa:broadcast-tower% %i18n:@announcements%
-
-
-

-
-
-
-
- -
-
%fa:images% %i18n:@photos%
-
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
+
+
+
- +

{{ name }}

+

+ +
+ {{ host }} - + + %fa:user% {{ stats.originalUsersCount | number }} + %fa:pencil-alt% {{ stats.originalNotesCount | number }} + +
+ +

+ %i18n:@about% + +

+ + | + +

+ +
-
-
%fa:comment-alt R% %i18n:@timeline%
-
- +
+
%fa:broadcast-tower% %i18n:@announcements%
+
+
+

+
+
-
-
%fa:info-circle% %i18n:@info%
+
+
%fa:images% %i18n:@photos%
-
-

Version: {{ meta.version }}

-

Maintainer: {{ meta.maintainer.name }}

+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
%fa:comment-alt R% %i18n:@timeline%
+
+ +
+
+ +
+
%fa:info-circle% %i18n:@info%
+
+
+

Version: {{ meta.version }}

+

Maintainer: {{ meta.maintainer.name }}

+
-
+
+ + +
+

%i18n:common.intro.title%

+

+
+

%i18n:common.intro.features%

+
+
+

%i18n:common.intro.rich-contents%

+

+
+
+
+
+
+

%i18n:common.intro.reaction%

+

+
+
+
+
+
+

%i18n:common.intro.ui%

+

+
+
+
+
+
+

%i18n:common.intro.drive%

+

+
+
+
+
+

+
+
%i18n:@signup%
@@ -147,6 +189,10 @@ export default Vue.extend({ }, methods: { + about() { + this.$modal.show('about'); + }, + signup() { this.$modal.show('signup'); }, @@ -199,6 +245,54 @@ export default Vue.extend({ margin 0 48px font-size 1.5em +.v--modal-overlay.about + .v--modal-box.v--modal + margin 32px 0 + +.fpdezooorhntlzyeszemrsqdlgbysvxq + padding 64px + + > p:last-child + margin-bottom 0 + + > h1 + margin-top 0 + + > section + > h2 + border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05) + + > section + display grid + grid-template-rows 1fr + grid-template-columns 180px 1fr + gap 32px + margin-bottom 32px + padding-bottom 32px + border-bottom 1px solid isDark ? rgba(#000, 0.2) : rgba(#000, 0.05) + + &:nth-child(odd) + grid-template-columns 1fr 180px + + > .body + grid-column 1 + + > .image + grid-column 2 + + > .body + grid-row 1 + grid-column 2 + + > .image + grid-row 1 + grid-column 1 + + > img + display block + width 100% + height 100% + object-fit cover