diff --git a/website/client/assets/creator/arrow.png b/website/client/assets/creator/arrow.png
new file mode 100644
index 0000000000..410be81a77
Binary files /dev/null and b/website/client/assets/creator/arrow.png differ
diff --git a/website/client/assets/creator/arrow@2x.png b/website/client/assets/creator/arrow@2x.png
new file mode 100644
index 0000000000..003d4b98c2
Binary files /dev/null and b/website/client/assets/creator/arrow@2x.png differ
diff --git a/website/client/assets/creator/arrow@3x.png b/website/client/assets/creator/arrow@3x.png
new file mode 100644
index 0000000000..938172fa18
Binary files /dev/null and b/website/client/assets/creator/arrow@3x.png differ
diff --git a/website/client/assets/creator/creator-hills-bg.png b/website/client/assets/creator/creator-hills-bg.png
new file mode 100644
index 0000000000..1b687c6b19
Binary files /dev/null and b/website/client/assets/creator/creator-hills-bg.png differ
diff --git a/website/client/assets/creator/creator-hills-bg@2x.png b/website/client/assets/creator/creator-hills-bg@2x.png
new file mode 100644
index 0000000000..f26354e390
Binary files /dev/null and b/website/client/assets/creator/creator-hills-bg@2x.png differ
diff --git a/website/client/assets/creator/creator-hills-bg@3x.png b/website/client/assets/creator/creator-hills-bg@3x.png
new file mode 100644
index 0000000000..ff95683be1
Binary files /dev/null and b/website/client/assets/creator/creator-hills-bg@3x.png differ
diff --git a/website/client/assets/creator/prev.png b/website/client/assets/creator/prev.png
new file mode 100644
index 0000000000..6ad81b7d3c
Binary files /dev/null and b/website/client/assets/creator/prev.png differ
diff --git a/website/client/assets/creator/prev@2x.png b/website/client/assets/creator/prev@2x.png
new file mode 100644
index 0000000000..f5f24ed3bf
Binary files /dev/null and b/website/client/assets/creator/prev@2x.png differ
diff --git a/website/client/assets/creator/prev@3x.png b/website/client/assets/creator/prev@3x.png
new file mode 100644
index 0000000000..780145a87e
Binary files /dev/null and b/website/client/assets/creator/prev@3x.png differ
diff --git a/website/client/assets/svg/accessories.svg b/website/client/assets/svg/accessories.svg
new file mode 100644
index 0000000000..87ef039a2b
--- /dev/null
+++ b/website/client/assets/svg/accessories.svg
@@ -0,0 +1,6 @@
+
diff --git a/website/client/assets/svg/body.svg b/website/client/assets/svg/body.svg
new file mode 100644
index 0000000000..2572e81faf
--- /dev/null
+++ b/website/client/assets/svg/body.svg
@@ -0,0 +1,8 @@
+
diff --git a/website/client/assets/svg/for-css/tutorial-border.svg b/website/client/assets/svg/for-css/tutorial-border.svg
new file mode 100644
index 0000000000..7db9387eac
--- /dev/null
+++ b/website/client/assets/svg/for-css/tutorial-border.svg
@@ -0,0 +1,36 @@
+
diff --git a/website/client/assets/svg/hair.svg b/website/client/assets/svg/hair.svg
new file mode 100644
index 0000000000..5eb61e64ac
--- /dev/null
+++ b/website/client/assets/svg/hair.svg
@@ -0,0 +1,6 @@
+
diff --git a/website/client/assets/svg/logo-purple.svg b/website/client/assets/svg/logo-purple.svg
new file mode 100644
index 0000000000..903629a49f
--- /dev/null
+++ b/website/client/assets/svg/logo-purple.svg
@@ -0,0 +1,49 @@
+
diff --git a/website/client/assets/svg/skin.svg b/website/client/assets/svg/skin.svg
new file mode 100644
index 0000000000..7c9d74b2a0
--- /dev/null
+++ b/website/client/assets/svg/skin.svg
@@ -0,0 +1,6 @@
+
diff --git a/website/client/components/creatorIntro.vue b/website/client/components/creatorIntro.vue
new file mode 100644
index 0000000000..d15bf55967
--- /dev/null
+++ b/website/client/components/creatorIntro.vue
@@ -0,0 +1,451 @@
+
+#creator-background
+ #creator-modal
+ .section.row.welcome-section(v-if='modalPage == 1')
+ .col-6.offset-3.text-center
+ h3(v-once) {{$t('welcomeTo')}}
+ .svg-icon.logo(v-html='icons.logoPurple')
+
+ .section.row
+ .col-6.offset-3
+ .user-creation-bg
+ avatar(:member='user')
+
+ div(v-if='modalPage == 2')
+ .section.row
+ .col-12.text-center
+ button.btn.btn-secondary(v-once) {{$t('randomize')}}
+ .section.row.text-center.customize-menu
+ .col-3
+ .menu-item(@click='changeTopPage("body", "size")')
+ .svg-icon(v-html='icons.bodyIcon')
+ strong(v-once) {{$t('body')}}
+ .col-3
+ .menu-item(@click='changeTopPage("skin", "color")')
+ .svg-icon(v-html='icons.skinIcon')
+ strong(v-once) {{$t('skin')}}
+ .col-3
+ .menu-item(@click='changeTopPage("hair", "color")')
+ .svg-icon(v-html='icons.hairIcon')
+ strong(v-once) {{$t('hair')}}
+ .col-3
+ .menu-item(@click='changeTopPage("extra", "glasses")')
+ .svg-icon(v-html='icons.accessoriesIcon')
+ strong(v-once) {{$t('extra')}}
+ .section.customize-section(v-if='activeTopPage === "body"')
+ .row.sub-menu
+ .col-2.offset-4.sub-menu-item(@click='changeSubPage("size")', :class='{active: activeSubPage === "size"}')
+ strong(v-once) {{$t('size')}}
+ .col-2.sub-menu-item(@click='changeSubPage("shirt")', :class='{active: activeSubPage === "shirt"}')
+ strong(v-once) {{$t('shirt')}}
+ .row(v-if='activeSubPage === "size"')
+ .col-12.customize-options.size-options
+ .slim_shirt_black.option(@click='set({"preferences.size":"slim"})', :class='{active: user.preferences.size === "slim"}')
+ .broad_shirt_black.option(@click='set({"preferences.size":"broad"})', :class='{active: user.preferences.size === "broad"}')
+ .row(v-if='activeSubPage === "shirt"')
+ .col-12.customize-options
+ .slim_shirt_black.option(@click='set({"preferences.shirt":"black"})', :class='{active: user.preferences.shirt === "black"}')
+ .slim_shirt_blue.option(@click='set({"preferences.shirt":"blue"})', :class='{active: user.preferences.shirt === "blue"}')
+ .slim_shirt_green.option(@click='set({"preferences.shirt":"green"})', :class='{active: user.preferences.shirt === "green"}')
+ .slim_shirt_pink.option(@click='set({"preferences.shirt":"pink"})', :class='{active: user.preferences.shirt === "pink"}')
+ .slim_shirt_white.option(@click='set({"preferences.shirt":"white"})', :class='{active: user.preferences.shirt === "white"}')
+ .slim_shirt_yellow.option(@click='set({"preferences.shirt":"yellow"})', :class='{active: user.preferences.shirt === "yellow"}')
+
+ .section.customize-section(v-if='activeTopPage === "skin"')
+ .row.sub-menu
+ .col-6.offset-3.text-center.sub-menu-item(:class='{active: activeSubPage === "color"}')
+ strong(v-once) {{$t('color')}}
+ .row
+ .col-12.customize-options
+ .skin_ddc994.option(@click='set({"preferences.skin":"ddc994"})', :class='{active: user.preferences.skin === "ddc994"}')
+ .skin_f5a76e.option(@click='set({"preferences.skin":"f5a76e"})', :class='{active: user.preferences.skin === "f5a76e"}')
+ .skin_ea8349.option(@click='set({"preferences.skin":"ea8349"})', :class='{active: user.preferences.skin === "ea8349"}')
+ .skin_c06534.option(@click='set({"preferences.skin":"c06534"})', :class='{active: user.preferences.skin === "c06534"}')
+ .skin_98461a.option(@click='set({"preferences.skin":"98461a"})', :class='{active: user.preferences.skin === "98461a"}')
+ .skin_915533.option(@click='set({"preferences.skin":"915533"})', :class='{active: user.preferences.skin === "915533"}')
+ .skin_c3e1dc.option(@click='set({"preferences.skin":"c3e1dc"})', :class='{active: user.preferences.skin === "c3e1dc"}')
+ .skin_6bd049.option(@click='set({"preferences.skin":"6bd049"})', :class='{active: user.preferences.skin === "6bd049"}')
+
+ .section.customize-section(v-if='activeTopPage === "hair"')
+ .row.sub-menu
+ .col-2.offset-3.text-center.sub-menu-item(@click='changeSubPage("color")', :class='{active: activeSubPage === "color"}')
+ strong(v-once) {{$t('color')}}
+ .col-2.text-center.sub-menu-item(@click='changeSubPage("bangs")', :class='{active: activeSubPage === "bangs"}')
+ strong(v-once) {{$t('bangs')}}
+ .col-2.text-center.sub-menu-item(@click='changeSubPage("ponytail")', :class='{active: activeSubPage === "ponytail"}')
+ strong(v-once) {{$t('ponytail')}}
+ .row(v-if='activeSubPage === "color"')
+ .col-12.customize-options
+ .hair_bangs_1_white.option(@click='set({"preferences.hair.color": "white"})', :class='{active: user.preferences.hair.color === "white"}')
+ .hair_bangs_1_brown.option(@click='set({"preferences.hair.color": "brown"})', :class='{active: user.preferences.hair.color === "brown"}')
+ .hair_bangs_1_blond.option(@click='set({"preferences.hair.color": "blond"})', :class='{active: user.preferences.hair.color === "blond"}')
+ .hair_bangs_1_red.option(@click='set({"preferences.hair.color": "red"})', :class='{active: user.preferences.hair.color === "red"}')
+ .hair_bangs_1_black.option(@click='set({"preferences.hair.color": "black"})', :class='{active: user.preferences.hair.color === "black"}')
+ .row(v-if='activeSubPage === "bangs"')
+ .col-12.customize-options
+ .head_0.option(@click='set({"preferences.hair.bangs": 0})', :class="[{ active: user.preferences.hair.bangs === 0 }, 'hair_bangs_0_' + user.preferences.hair.color]")
+ .option(@click='set({"preferences.hair.bangs": 1})', :class="[{ active: user.preferences.hair.bangs === 1 }, 'hair_bangs_1_' + user.preferences.hair.color]")
+ .option(@click='set({"preferences.hair.bangs": 2})',:class="[{ active: user.preferences.hair.bangs === 2 }, 'hair_bangs_2_' + user.preferences.hair.color]")
+ .option(@click='set({"preferences.hair.bangs": 3})', :class="[{ active: user.preferences.hair.bangs === 3 }, 'hair_bangs_3_' + user.preferences.hair.color]")
+ .option(@click='set({"preferences.hair.bangs": 4})', :class="[{ active: user.preferences.hair.bangs === 4 }, 'hair_bangs_4_' + user.preferences.hair.color]")
+ .row(v-if='activeSubPage === "ponytail"')
+ .col-12.customize-options
+ .head_0.option(@click='set({"preferences.hair.base": 0})', :class="[{ active: user.preferences.hair.base === 0 }, 'hair_base_0_' + user.preferences.hair.color]")
+ .hair_base_1_blond.option(@click='set({"preferences.hair.base": 1})', :class="[{ active: user.preferences.hair.base === 1 }, 'hair_base_1_' + user.preferences.hair.color]")
+ .hair_base_3_blond.option(@click='set({"preferences.hair.base": 3})', :class="[{ active: user.preferences.hair.base === 3 }, 'hair_base_3_' + user.preferences.hair.color]")
+
+ .section.container.customize-section(v-if='activeTopPage === "extra"')
+ .row.sub-menu
+ .col-4.text-center.sub-menu-item(@click='changeSubPage("glasses")', :class='{active: activeSubPage === "glasses"}')
+ strong(v-once) {{$t('glasses')}}
+ .col-4.text-center.sub-menu-item(@click='changeSubPage("wheelchair")', :class='{active: activeSubPage === "wheelchair"}')
+ strong(v-once) {{$t('wheelchair')}}
+ .col-4.text-center.sub-menu-item(@click='changeSubPage("flower")', :class='{active: activeSubPage === "flower"}')
+ strong(v-once) {{$t('flower')}}
+ .row(v-if='activeSubPage === "glasses"')
+ .col-12.customize-options
+ .eyewear_special_blackTopFrame.option(@click='equip("eyewear_special_blackTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blackTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blackTopFrame"}')
+ .eyewear_special_blueTopFrame.option(@click='equip("eyewear_special_blueTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_blueTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_blueTopFrame"}')
+ .eyewear_special_greenTopFrame.option(@click='equip("eyewear_special_greenTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_greenTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_greenTopFrame"}')
+ .eyewear_special_pinkTopFrame.option(@click='equip("eyewear_special_pinkTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_pinkTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_pinkTopFrame"}')
+ .eyewear_special_redTopFrame.option(@click='equip("eyewear_special_redTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_redTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_redTopFrame"}')
+ .eyewear_special_whiteTopFrame.option(@click='equip("eyewear_special_whiteTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_whiteTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_whiteTopFrame"}')
+ .eyewear_special_yellowTopFrame.option(@click='equip("eyewear_special_yellowTopFrame")', :class='{active: user.preferences.costume ? user.items.gear.costume.eyewear === "eyewear_special_yellowTopFrame" : user.items.gear.equipped.eyewear === "eyewear_special_yellowTopFrame"}')
+ .row(v-if='activeSubPage === "wheelchair"')
+ .col-12.customize-options.weelchairs
+ .option(@click='set({"preferences.chair": "none"})', :class='{active: user.preferences.chair === "none"}')
+ | None
+ .option(@click='set({"preferences.chair": "black"})', :class='{active: user.preferences.chair === "black"}')
+ .button_chair_black
+ .option(@click='set({"preferences.chair": "blue"})', :class='{active: user.preferences.chair === "blue"}')
+ .button_chair_blue
+ .option(@click='set({"preferences.chair": "green"})', :class='{active: user.preferences.chair === "green"}')
+ .button_chair_green
+ .option(@click='set({"preferences.chair": "pink"})', :class='{active: user.preferences.chair === "pink"}')
+ .button_chair_pink
+ .option(@click='set({"preferences.chair": "red"})', :class='{active: user.preferences.chair === "red"}')
+ .button_chair_red
+ .option(@click='set({"preferences.chair": "yellow"})', :class='{active: user.preferences.chair === "yellow"}')
+ .button_chair_yellow
+ .row(v-if='activeSubPage === "flower"')
+ .col-12.customize-options
+ .head_0.option(@click='set({"preferences.hair.flower":0})', :class='{active: user.preferences.hair.flower === 0}')
+ .hair_flower_1.option(@click='set({"preferences.hair.flower":1})', :class='{active: user.preferences.hair.flower === 1}')
+ .hair_flower_2.option(@click='set({"preferences.hair.flower":2})', :class='{active: user.preferences.hair.flower === 2}')
+ .hair_flower_3.option(@click='set({"preferences.hair.flower":3})', :class='{active: user.preferences.hair.flower === 3}')
+ .hair_flower_4.option(@click='set({"preferences.hair.flower":4})', :class='{active: user.preferences.hair.flower === 4}')
+ .hair_flower_5.option(@click='set({"preferences.hair.flower":5})', :class='{active: user.preferences.hair.flower === 5}')
+ .hair_flower_6.option(@click='set({"preferences.hair.flower":6})', :class='{active: user.preferences.hair.flower === 6}')
+
+ .container.interests-section(v-if='modalPage == 3')
+ .section.row
+ .col-12.text-center
+ h2 I want to work on:
+ .section.row
+ .col-4.offset-2
+ div
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t('work') }}
+ div
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t('excercise') }}
+ div
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t('health') }}
+ div
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t('school') }}
+ .col-4
+ div
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t('chores') }}
+ div
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t('creativity') }}
+ div
+ label.custom-control.custom-checkbox
+ input.custom-control-input(type="checkbox")
+ span.custom-control-indicator
+ span.custom-control-description(v-once) {{ $t('budgeting') }}
+
+ .section.row.justin-message-section(:class='{top: modalPage > 1}')
+ .col-9
+ .justin-message(v-if='modalPage == 1')
+ p(v-once) {{$t('justinIntroMessage1')}}
+ p(v-once) {{$t('justinIntroMessage2')}}
+ .justin-message(v-if='modalPage > 1')
+ p(v-once) {{$t('justinIntroMessage3')}}
+
+ .section.container.footer
+ .row
+ .col-3.offset-1.text-center
+ div(v-if='modalPage > 1', @click='prev()')
+ .prev-arrow
+ .prev(v-once) {{$t('prev')}}
+ .col-4.text-center.circles
+ .circle(:class="{active: modalPage === 1}")
+ .circle(:class="{active: modalPage === 2}")
+ .circle(:class="{active: modalPage === 3}")
+ .col-3.text-center
+ div(v-if='modalPage < 3', @click='next()')
+ .next(v-once) {{$t('next')}}
+ .next-arrow
+
+
+
+
+
diff --git a/website/client/router.js b/website/client/router.js
index aa97d8b968..94f870910e 100644
--- a/website/client/router.js
+++ b/website/client/router.js
@@ -12,6 +12,9 @@ import Page from './components/page';
const Home = () => import(/* webpackChunkName: "static" */'./components/static/home');
const RegisterLogin = () => import(/* webpackChunkName: "auth" */'./components/auth/registerLogin');
+const CreatorIntro = () => import(/* webpackChunkName: "creator" */'./components/creatorIntro');
+
+// Except for tasks that are always loaded all the other main level
// All the main level
// components are loaded in separate webpack chunks.
// See https://webpack.js.org/guides/code-splitting-async/
@@ -50,6 +53,7 @@ const router = new VueRouter({
},
// requiresLogin is true by default, isStatic false
routes: [
+ { name: 'creator', path: '/creator', component: CreatorIntro },
{ name: 'home', path: '/home', component: Home, meta: {requiresLogin: false} },
{ name: 'register', path: '/register', component: RegisterLogin, meta: {requiresLogin: false} },
{ name: 'login', path: '/login', component: RegisterLogin, meta: {requiresLogin: false} },
diff --git a/website/common/locales/en/newClient.json b/website/common/locales/en/newClient.json
index 8cf0f08bb6..81f86c4ea8 100644
--- a/website/common/locales/en/newClient.json
+++ b/website/common/locales/en/newClient.json
@@ -127,6 +127,24 @@
"gotIt": "Got it!",
"welcomeStable": "Welcome to the Stable!",
"welcomeStableText": "I'm Matt, the Beast Master. Starting at level 3, you can hatch Pets from Eggs by using Potions you find! When you hatch a Pet from your Inventory, it will appear here! Click a Pet's to add it to your avatar. Feed them with the Food you find in your Inventory after level 3, and they'll grow into hardy Mounts.",
+ "excercise": "Excercise",
+ "creativity": "Creativity",
+ "budgeting": "Budgeting",
"petLikeToEatText": "Pets will grow no matter what you feed them, but they'll grow faster if you feed them the one food that they like best. Experiment to find out the pattern, or see the answers here:
http://habitica.wikia.com/wiki/Food_Preferences",
- "petLikeToEat": "What does my pet like to eat?"
+ "petLikeToEat": "What does my pet like to eat?",
+ "welcomeTo": "Welcome to",
+ "justinIntroMessage1": "Hello there! You must be new here. My name is Justin, I’ll be your guide in Habitica.",
+ "justinIntroMessage2": "To start, you’ll need to create an avatar.",
+ "justinIntroMessage3": "Great! Now, what are you interested in working on throughout this journey?",
+ "prev": "Prev",
+ "next": "Next",
+ "randomize": "Randomize",
+ "skin": "Skin",
+ "hair": "Hair",
+ "extra": "Extra",
+ "size": "Size",
+ "shirt": "Shirt",
+ "bangs": "Bangs",
+ "ponytail": "Ponytail",
+ "glasses": "Glasses"
}