New to Muzica?
But you can build this with your domain, it will work fine.
This site is just for demonstration." + "note": "*This site don't work on iOS because of ITP. But you can build this with your domain, it will work fine.This site is just for demonstration." }, "top" : { "latest_articles": "Latest articles", @@ -75,27 +76,32 @@ "thanks":"Thanks! Your inquiry submitted." }, "reminder": { - "back_to_login": "Back to login", + "back_to_signin": "Back to sign in", "sign_up": "Don't have an account? Sign up here", "password_reset" : "Password reset", "send_email" : "A password reset URL will be sent to the email address you provided.", "send_emailed": "A password reset URL has been sent to
the email address you provided.", "reset" : "Reset my password", + "reset_success": "A password reset URL has been sent to the email address you provided.", "set_password": "Set New Password", "temp_password": "Temporary password", "new_password" : "New password", "conf_password": "Confirmation password", "submit" : "Submit", "update_ok" : "Your password has been updated", + "update_success": "You can now use your new password to log in to your account!", "login": "Login", "rule" : "Please set a mixture of alphanumeric characters and at least 8 characters.", - "required": "This filed is required.", + "required": "This field is required.", "word_count": "Please input at least 8 characters.", "conf_error": "The confirmation password is incorrect.", "not_entered": "Please input a new password.", "password_sent": "A password reset email has been sent. Please set a new password from the link in the email.", "invalid_email": "Invalid email address.", - "already_updated": "Your password has been updated." + "already_updated": "Your password has been updated.", + "forgot_your_password": "Forgot your password?", + "instruction": "Please enter the email address you use when creating your account. We’ll send you the instructions to reset your password.", + "email_address": "Email Address" }, "verify": { "required_field": "required field", diff --git a/src/locales/ja.json b/src/locales/ja.json index d472087..f3dad33 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -20,12 +20,14 @@ }, "login" : { "welcomeback": "ようこそ Muzica へ！", + "greeting": "Welcome back!", "message" : "ここから先はログインしないと遷移できません。", "demoaccount": "デモサイト用アカウント", "site_key": "サイトキー", + "site_key_new": "Site Key", "id_or_email": "Eメールアドレス(ログインID)", "forget_password" : "パスワードを忘れた場合はこちら", - "note": "＊このサイトはITP機能のためiOSでは動作しません。
ドメインを作成して動作させることはできます。
このサイトはデモンストレーションサイトです。" + "note": "＊このサイトはITP機能のためiOSでは動作しません。ドメインを作成して動作させることはできます。このサイトはデモンストレーションサイトです。" }, "top" : { "latest_articles": "最新記事", @@ -76,26 +78,33 @@ }, "reminder": { "back_to_login": "ログイン へ戻る", + "back_to_signin": "Back to sign in", "sign_up": "アカウントをお持ちでない方は こちら", "password_reset" : "パスワードリセット", "send_email" : "登録いただいているメールアドレスにパスワード再設定用URLを送信いたします。", "send_emailed": "パスワード変更のURLが記載されたメールを送信しました。", "reset" : "送信", + "reset_success": "A password reset URL has been sent to the email address you provided.", "set_password": "パスワード変更", "temp_password": "仮パスワードを入力する", "new_password" : "新しいパスワード", "conf_password": "確認用パスワード", "submit" : "送信", "update_ok" : "パスワードが更新されました。", + "update_success": "You can now use your new password to log in to your account!", "login": "ログイン", "rule" : "英数字と8文字以上を組み合わせて設定してください。", "required": "ファイルは必須です。", + "required_new": "This field is required.", "word_count": "8文字以上入力してください。", "conf_error": "確認用パスワードが正しくありません。", "not_entered": "新しいパスワードを入力してください。", "password_sent": "パスワード変更のメールを送信しました。メールにあるパスワード変更のURLから新しいパスワードを入力してください。", "invalid_email": "メールアドレスが正しくありません。", - "already_updated": "パスワードは更新されています。" + "already_updated": "パスワードは更新されています。", + "forgot_your_password": "Forgot your password?", + "instruction": "Please enter the email address you use when creating your account. We’ll send you the instructions to reset your password.", + "email_address": "Email Address" }, "verify": { "required_field": "入力必須項目です", diff --git a/src/pages/index.vue b/src/pages/index.vue index 8ebd40c..702c140 100755 --- a/src/pages/index.vue +++ b/src/pages/index.vue @@ -1,81 +1,95 @@
-
-
+
+
-
+
-
+
+
-
+
+
- 
- 
+
+ 
+
-
-
-
-
+ - -
-{{$t('login.message')}}
-
- {{$t('login.demoaccount')}}
- {{$t('common.sitekey')}}： dev-nuxt-auth
- {{$t('common.id')}}：demo@kuroco-mail.app
- {{$t('common.password')}}：demo0512
-
+
+
+
+
+
+
+ {{$t('login.demoaccount')}}
+ {{$t('common.sitekey')}}： dev-nuxt-auth
+ {{$t('common.id')}}：demo@kuroco-mail.app
+ {{$t('common.password')}}：demo0512
+
+
+
-
-
-
+
+
-
-
+
+
diff --git a/src/sass/foundation/_common.scss b/src/sass/foundation/_common.scss
index 90f819b..efbf413 100755
--- a/src/sass/foundation/_common.scss
+++ b/src/sass/foundation/_common.scss
@@ -13,7 +13,7 @@ h6 {
margin: 0;
padding: 0;
line-height: 1.2;
- color: $text_color_dark;
+ color: $neutral900;
}
a {
@@ -27,6 +27,6 @@ a {
html, .v-application {
//font-family: "IBM Plex Sans",sans-serif;
- font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+ font-family: 'Noto Sans JP',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}
diff --git a/src/sass/layout/_content.scss b/src/sass/layout/_content.scss
index 15d7df7..fabfe3d 100644
--- a/src/sass/layout/_content.scss
+++ b/src/sass/layout/_content.scss
@@ -28,4 +28,15 @@
@at-root .p-home & {
padding-top: 25px;
}
-}
\ No newline at end of file
+}
+
+// Non auth wrapper for not signed in users.
+// This non auth wrapper applied in Signin, Forgot Password
+// and Set New Password pages used to remove the padding top
+// same value of header height as no header will
+// be used in these pages based on new design
+.non-auth__wrap {
+ .v-main__wrap {
+ padding-top: 0;
+ }
+}
diff --git a/src/sass/object/component/_button.scss b/src/sass/object/component/_button.scss
index a4665fd..5b9f3fc 100644
--- a/src/sass/object/component/_button.scss
+++ b/src/sass/object/component/_button.scss
@@ -1,10 +1,10 @@
.c-btn {
- font-weight: bold;
- font-size: 1.2em;
+ font-weight: 700;
+ font-size: 0.9em;
transition: background-color .3s,color .3s;
- padding: 15px 40px;
- border-radius: 24px;
+ padding: 14px 16px;
+ border-radius: 4px;
color: #fff;
cursor: pointer;
@@ -29,13 +29,11 @@
font-size: 1em;
}
&_main {
- background: $color_main;
- border: 1px solid #fff;
+ background: $accent500;
&:hover {
- background: #fff;
- color: $color_main;
- border: 1px solid $color_main;
+ background: $accent300;
+ color: #fff;
& .icon {
color: $color_main !important;
diff --git a/src/sass/object/component/_form.scss b/src/sass/object/component/_form.scss
index 8953f81..3c5457c 100644
--- a/src/sass/object/component/_form.scss
+++ b/src/sass/object/component/_form.scss
@@ -57,4 +57,16 @@
width: 100%;
}
}
+
+}
+
+.v-text-field-custom {
+ .v-input__slot {
+ box-shadow: none !important;
+ border: 2px solid $neutral100;
+
+ &:hover {
+ border: 2px solid $primary500;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/sass/object/component/_text.scss b/src/sass/object/component/_text.scss
index c638238..0712a64 100644
--- a/src/sass/object/component/_text.scss
+++ b/src/sass/object/component/_text.scss
@@ -14,13 +14,62 @@
&_h2 {
font-size: 1.6em;
}
+
+ &_01--black {
+ font-weight: 900;
+ font-size: 2.4em;
+ color: $neutral900;
+ line-height: 1.2;
+ }
+}
+
+.c-subheading {
+ font-weight: 400;
+ font-size: 0.8em;
+ color: $neutral400;
+}
+
+.c-body {
+ line-height: 1.4;
+ &_01--bold {
+ line-height: 1.6;
+ font-weight: 700;
+ font-size: 0.9em;
+ color: $primary500;
+ }
+ &_02--regular {
+ font-weight: 400;
+ font-size: 0.8em;
+ color: $neutral900;
+ }
+ &_02--medium {
+ font-weight: 500;
+ font-size: 0.8em;
+ color: $neutral300;
+ }
+ &_03--regular {
+ font-weight: 400;
+ font-size: 0.7em;
+ color: $neutral300;
+ }
+}
+
+.c-caption {
+ line-height: 1.2;
+ &_01--regular {
+ font-weight: 400;
+ font-size: 12px;
+ color: $neutral300;
+ }
}
.c-link {
- color: $color_main;
+ &_icon {
+ display: flex;
+ align-items: center;
- &:hover {
- text-decoration: none;
- color: $color_main_dark;
+ img {
+ margin-right: 18px;
+ }
}
}
\ No newline at end of file
diff --git a/src/sass/object/project/_login.scss b/src/sass/object/project/_login.scss
index 110d0bc..73984cf 100644
--- a/src/sass/object/project/_login.scss
+++ b/src/sass/object/project/_login.scss
@@ -1,89 +1,104 @@
+// Styling to handle contents inside login page
.p-login {
- //background: linear-gradient(to bottom, #0f1015, #07080a) !important;
- background: linear-gradient(to bottom, #43a8ff, #1777ca) !important;
-
+ &_intro {
+ &-text {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ position: relative;
+ transform: translateY(-50%);
+ top: 50%;
+ z-index: 3;
+ }
+ }
&_form {
- margin: 0 auto;
- padding: 25px;
- max-width: 600px;
- color: #fff;
- border-radius: 0 10px 10px 0 !important;
-
- @include sm {
- border-radius: 0 0 10px 10px !important;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+
+ form {
+ font-size: 20px;
+ max-width: 480px;
}
+
& .submit-btn {
width: 100%;
}
}
&_content {
- top: 50%;
- transform: translateY(-50%);
+ width: 100%;
+ height: 100%;
position: relative;
- max-width: 900px;
- margin: 0 auto;
-
- @include lg {
- margin: 0 15px;
- }
- &-inner {
- min-height: 300px;
- }
}
- &_intro {
- //background: linear-gradient(to bottom, #2a91e9, #196eb7) !important;
- background: linear-gradient(to bottom, #152E4D, #051324) !important;
+ &_message {
+ display: flex;
+ padding-top: 140px;
height: 100%;
- padding: 25px;
- color: #fff;
- position: relative;
- border-radius: 10px 0 0 10px;
- overflow: hidden;
+ width: 100%;
+ justify-content: center;
- @include sm {
- border-radius: 10px 10px 0 0 !important;
- }
- &::before {
- content: "";
- opacity: 0.1;
- width: 100%;
- height: 200px;
- position: absolute;
- bottom: 0;
- left: 0;
- background-image: linear-gradient(to bottom, #051324, rgba(0,0,0,0)), radial-gradient(circle, #fff 30%, transparent 10%), radial-gradient(circle, #fff 30%, transparent 10%);
- background-size: 100%, 10px 10px, 10px 10px;
- background-position: 0 0, 0 0, 50px 50px;
- background-repeat: repeat;
+ .v-card__title {
+ max-width: 480px;
}
- &-text {
- top: 50%;
+ }
+}
+
+// Styling to handle main Login page layout responsiveness
+.p-login_wrapper {
+ height: 100vh;
+
+ .login_wrapper--left, .login_wrapper--right {
+ width: 50%;
+ }
+
+ .login_wrapper--left {
+ .p-login_intro {
position: relative;
- transform: translateY(-50%);
+ height: 100%;
- @include sm {
- transform: none;
+ .p-login_background {
+ display: block;
+ z-index: 2;
+ position: absolute;
top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
}
- & .heading {
- color: #fff;
+
+ .p-login_logo {
+ position: relative;
+ z-index: 3;
+ top: 50px;
+ left: 53px;
}
}
}
- &_logo {
- max-width: 250px;
- display: block;
- margin: 0 auto;
- position: absolute;
- width: 100%;
- left: 0;
- right: 0;
- margin: 0 auto;
- top: 40px;
- @include sm {
- position: relative;
- top: 0;
+ @include sm {
+ flex-direction: column-reverse;
+ overflow: scroll;
+
+ .login_wrapper--left, .login_wrapper--right {
+ width: 100%;
+ }
+
+ .login_wrapper--left {
+ height: 90px;
+
+ .p-login_intro {
+ .p-login_background {
+ position: relative;
+ }
+ }
+ }
+
+ .login_wrapper--right {
+ height: 100%;
}
}
}
\ No newline at end of file
diff --git a/src/sass/partials/_var.scss b/src/sass/partials/_var.scss
index 6199f34..2b59928 100644
--- a/src/sass/partials/_var.scss
+++ b/src/sass/partials/_var.scss
@@ -1,4 +1,74 @@
+// Default Colors
$color_main: #1777ca;
$color_main_dark: #152E4D;
+$text_color_dark: #1f3952;
+
+// New Colors
+$neutral50: #EEF0F8;
+$neutral100: #E1E4EF;
+$neutral200: #D0D4E2;
+$neutral300: #B7BCCF;
+$neutral400: #989FB7;
+$neutral500: #78809D;
+$neutral600: #5A6386;
+$neutral700: #424C74;
+$neutral800: #29345E;
+$neutral900: #131E44;
+
+$primary50: #ECEFF9;
+$primary100: #D5DCF2;
+$primary200: #A7B4E3;
+$primary300: #798DD4;
+$primary400: #4A65C5;
+$primary500: #334B9F;
+$primary600: #253775;
+$primary700: #18234A;
+$primary800: #0A0F20;
+$primary900: #131E44;
+
+$accent50: #FFE9CF;
+$accent100: #FFDEB8;
+$accent200: #FFC98A;
+$accent300: #FFB45C;
+$accent400: #FF9F2E;
+$accent500: #FF8A00;
+$accent600: #D17100;
+$accent700: #A35800;
+$accent800: #753F00;
+$accent900: #472700;
+
+$positive50: #ECFDF5;
+$positive100: #D1FAE5;
+$positive200: #A7F3D0;
+$positive300: #6EE7B7;
+$positive400: #34D399;
+$positive500: #10B981;
+$positive600: #059669;
+$positive700: #047857;
+$positive800: #065F46;
+$positive900: #064E3B;
+
+$warning50: #FFFBEB;
+$warning100: #FEF3C7;
+$warning200: #FDE68A;
+$warning300: #FCD34D;
+$warning400: #FBBF24;
+$warning500: #F59E0B;
+$warning600: #D97706;
+$warning700: #B45309;
+$warning800: #92400E;
+$warning900: #78350F;
+
+$negative50: #FEF2F2;
+$negative100: #FEE2E2;
+$negative200: #FECACA;
+$negative300: #FCA5A5;
+$negative400: #F87171;
+$negative500: #EF4444;
+$negative600: #DC2626;
+$negative700: #B91C1C;
+$negative800: #991B1B;
+$negative900: #7F1D1D;
+
+
-$text_color_dark: #1f3952;
\ No newline at end of file
+
-
+
+
- 
-
+
-
-
-
-
-
-
-
-
+
-
-
- mdi-undo-variant
-
-
-
-
+
+
+
-
-
+
-
-
+
+
+
-
-
+
-
-
-
-
{{$t('reminder.submit')}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{$t('reminder.login')}}
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
+
+
+
+
+
+
+
+ 
+ {{ $t('reminder.back_to_signin') }}
+
+
+
{{$t('reminder.password_reset')}}
+ {{$t('reminder.instruction')}}
- {{$t('reminder.send_email')}}
+
+
+
@@ -51,7 +48,7 @@
@@ -59,46 +56,78 @@
+
+
+ {{ $t('reminder.back_to_signin') }}
+
+
+
+ {{ $t('reminder.back_to_signin') }}
+ {{$t('reminder.password_reset')}}
+{{$t('reminder.instruction')}}
{{$t('reminder.send_email')}}
+
+
+
+
+
+
+
+
+
+
+ {{ $t('reminder.back_to_signin') }}
+
+
+
+ {{ $t('reminder.back_to_signin') }}
+ + {{$t('reminder.forgot_your_password')}} +
+{{$t('reminder.reset_success')}}
+
+
+
+
+
+ {{ $t('reminder.back_to_signin') }}
+
+
+
{{$t('reminder.set_password')}}
+
+
+ {{ $t('reminder.back_to_signin') }}
+
+
+
+ {{ $t('reminder.back_to_signin') }}
+ {{$t('reminder.set_password')}}
{{$t('reminder.temp_password')}}
-
+
+
+ {{$t('reminder.new_password')}}
+
+
+
{{$t('reminder.conf_password')}}
+
+
+
- {{$t('reminder.update_ok')}} -
-
+
+
+
+
+
+
+ {{ $t('reminder.back_to_signin') }}
+
+
+
+ {{ $t('reminder.back_to_signin') }}
+ + {{$t('reminder.update_ok')}} +
+{{$t('reminder.update_success')}}
+