Merge pull request #6585 from JDonadio/v4-1

Include onboarding flow
This commit is contained in:
Gustavo Maximiliano Cortez 2017-08-17 10:49:23 -03:00 committed by GitHub
commit 42aff9757e
34 changed files with 1235 additions and 3 deletions

View File

@ -64,8 +64,8 @@
"@angular/cli": "1.3.0",
"@biesbjerg/ngx-translate-extract": "2.3.2",
"@ionic/app-scripts": "2.0.2",
"@ionic/cli-plugin-cordova": "1.5.0",
"@ionic/cli-plugin-ionic-angular": "1.4.0",
"@ionic/cli-plugin-cordova": "1.6.2",
"@ionic/cli-plugin-ionic-angular": "1.4.1",
"@types/chrome": "0.0.47",
"@types/jasmine": "2.5.53",
"@types/lodash": "4.14.71",

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="158px" height="157px" viewBox="0 0 158 157" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Group 3</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="0.2.4---Wallet-Created" transform="translate(-109.000000, -169.000000)">
<g id="Overlay/Success" transform="translate(-1.000000, 0.000000)">
<g id="Group-3" transform="translate(111.592000, 170.431784)">
<g id="ios-checkmark-outline" transform="translate(49.261333, 54.161919)"></g>
<polyline id="Line" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square" points="49.764 82.7473763 67.3573333 100.801349 114.608 54.6634183"></polyline>
<path d="M77.4106667,154.461769 C120.163397,154.461769 154.821333,119.884324 154.821333,77.2308846 C154.821333,34.5774448 120.163397,0 77.4106667,0 C34.657936,0 0,34.5774448 0,77.2308846 C0,119.884324 34.657936,154.461769 77.4106667,154.461769 Z" id="Oval-1" stroke="#FFFFFF" stroke-width="2"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="247px" height="247px" viewBox="0 0 247 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>tour-control</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="89.4673583%" id="linearGradient-1">
<stop stop-color="#192C3A" offset="0%"></stop>
<stop stop-color="#192C3A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="tour-control">
<g id="Onboarding">
<g id="0.2.3---Tour-3">
<g id="bg-3">
<path d="M123.5,247 C191.707167,247 247,191.707167 247,123.5 C247,55.2928334 191.707167,1.42108547e-14 123.5,1.42108547e-14 C55.2928334,1.42108547e-14 1.42108547e-14,55.2928334 1.42108547e-14,123.5 C1.42108547e-14,191.707167 55.2928334,247 123.5,247 Z" id="Oval-2" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.300000012"></path>
<rect id="Combined-Shape" stroke="#707D89" stroke-width="2" fill-opacity="0.65" fill="#192C3A" fill-rule="nonzero" x="63" y="24" width="99.8310062" height="183.875349" rx="8"></rect>
<path d="M63.5199532,180.634556 L162.311053,180.634556" id="Line" stroke="#707D89" stroke-width="2" stroke-linecap="square"></path>
<path d="M104.076299,194.254952 L122.794613,194.254952" id="Line" stroke="#707D89" stroke-width="2" stroke-linecap="square"></path>
<g id="Group-4" transform="translate(98.000000, 79.000000)" stroke="#FFFFFF">
<g id="top-up">
<g id="shopping-48px-outline_bitcoin" transform="translate(0.666667, 0.180606)">
<g id="Group" transform="translate(0.619048, 0.627502)">
<path d="M12.3809524,0 L12.3809524,7.5300202" id="Shape"></path>
<path d="M17.3333333,0 L17.3333333,7.5300202" id="Shape"></path>
<path d="M12.3809524,47.6901279 L12.3809524,55.2201481" id="Shape"></path>
<path d="M17.3333333,47.6901279 L17.3333333,55.2201481" id="Shape"></path>
<path d="M0,47.6901279 L7.42857143,47.6901279" id="Shape-Copy"></path>
<path d="M0,7.5300202 L7.42857143,7.5300202" id="Shape-Copy-2"></path>
<path d="M7.42857143,25.1000673 L7.42857143,7.5300202 L21.8042328,7.5300202 C26.9010582,7.5300202 30.952381,11.4205306 30.952381,16.3150438 C30.952381,21.2095569 26.9010582,25.1000673 21.8042328,25.1000673" id="Shape"></path>
<path d="M7.42857143,47.6901279 L7.42857143,25.1000673 L23.6785714,25.1000673 C29.0952381,25.1000673 33.4285714,30.1200808 33.4285714,36.3950976 C33.4285714,42.6701145 29.0952381,47.6901279 23.6785714,47.6901279 L7.42857143,47.6901279 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
<g id="Group-3" transform="translate(125.000000, 122.000000)" stroke="#12E5B6" stroke-width="2">
<rect id="Rectangle-path" fill="#192C3A" fill-rule="nonzero" x="0.00547760651" y="37.6483369" width="74.7600358" height="65.7214967" rx="4"></rect>
<path d="M18.6954866,37.6483369 L18.6954866,18.8707664 C18.6954866,8.54310266 27.1059906,0.0931959432 37.3854955,0.0931959432 L37.3854955,0.0931959432 C47.6650004,0.0931959432 56.0755044,8.54310266 56.0755044,18.8707664 L56.0755044,37.6483369" id="Shape"></path>
<path d="M36.6300769,65.8146926 L36.6300769,75.2034779" id="Shape" fill="#F9F9F9" fill-rule="nonzero"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -0,0 +1,33 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="377px" height="247px" viewBox="0 0 377 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>tour-currency</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50.0034413%" y1="0.00943319838%" x2="50.0034413%" y2="89.4694332%" id="linearGradient-1">
<stop stop-color="#192C3A" offset="0%"></stop>
<stop stop-color="#192C3A" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="100.020333%" x2="50%" y2="0.0203333333%" id="linearGradient-2">
<stop stop-color="#192C3A" offset="0%"></stop>
<stop stop-color="#192C3A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="tour-currency" transform="translate(-1.000000, 0.000000)">
<path d="M189.5,247 C257.7,247 313,191.7 313,123.5 C313,55.3 257.7,0 189.5,0 C121.3,0 66,55.3 66,123.5 C66,191.7 121.3,247 189.5,247 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.3"></path>
<polygon id="Shape" fill="url(#linearGradient-2)" fill-rule="nonzero" opacity="0.3" points="56.3 127.3 99.7 97.8 142.1 119.9 186.6 80.7 224.9 80.7 249.7 47.5 282.8 67.2 323.2 56.1 377 35 377 185 152.1 185 2.4 185 2 133.5"></polygon>
<g id="Group" opacity="0.3" transform="translate(76.000000, 61.000000)" fill-rule="nonzero" fill="#13E5B6">
<path d="M226.2,124 L225.7,124 L225.7,120 L226.2,120 L226.2,124 Z M226.2,116 L225.7,116 L225.7,112 L226.2,112 L226.2,116 Z M226.2,108 L225.7,108 L225.7,104 L226.2,104 L226.2,108 Z M226.2,100 L225.7,100 L225.7,96 L226.2,96 L226.2,100 Z M226.2,92 L225.7,92 L225.7,88 L226.2,88 L226.2,92 Z M226.2,84 L225.7,84 L225.7,80 L226.2,80 L226.2,84 Z M226.2,76 L225.7,76 L225.7,72 L226.2,72 L226.2,76 Z M226.2,68 L225.7,68 L225.7,64 L226.2,64 L226.2,68 Z M226.2,60 L225.7,60 L225.7,56 L226.2,56 L226.2,60 Z M226.2,52 L225.7,52 L225.7,48 L226.2,48 L226.2,52 Z M226.2,44 L225.7,44 L225.7,40 L226.2,40 L226.2,44 Z M226.2,36 L225.7,36 L225.7,32 L226.2,32 L226.2,36 Z M226.2,28 L225.7,28 L225.7,24 L226.2,24 L226.2,28 Z M226.2,20 L225.7,20 L225.7,16 L226.2,16 L226.2,20 Z M226.2,12 L225.7,12 L225.7,8 L226.2,8 L226.2,12 Z M226.2,4 L225.7,4 L225.7,0 L226.2,0 L226.2,4 Z" id="Shape"></path>
<path d="M151.2,124 L150.7,124 L150.7,120 L151.2,120 L151.2,124 Z M151.2,116 L150.7,116 L150.7,112 L151.2,112 L151.2,116 Z M151.2,108 L150.7,108 L150.7,104 L151.2,104 L151.2,108 Z M151.2,100 L150.7,100 L150.7,96 L151.2,96 L151.2,100 Z M151.2,92 L150.7,92 L150.7,88 L151.2,88 L151.2,92 Z M151.2,84 L150.7,84 L150.7,80 L151.2,80 L151.2,84 Z M151.2,76 L150.7,76 L150.7,72 L151.2,72 L151.2,76 Z M151.2,68 L150.7,68 L150.7,64 L151.2,64 L151.2,68 Z M151.2,60 L150.7,60 L150.7,56 L151.2,56 L151.2,60 Z M151.2,52 L150.7,52 L150.7,48 L151.2,48 L151.2,52 Z M151.2,44 L150.7,44 L150.7,40 L151.2,40 L151.2,44 Z M151.2,36 L150.7,36 L150.7,32 L151.2,32 L151.2,36 Z M151.2,28 L150.7,28 L150.7,24 L151.2,24 L151.2,28 Z M151.2,20 L150.7,20 L150.7,16.8 L151.2,16.8 L151.2,20 Z" id="Shape"></path>
<path d="M76.2,124 L75.7,124 L75.7,120 L76.2,120 L76.2,124 Z M76.2,116 L75.7,116 L75.7,112 L76.2,112 L76.2,116 Z M76.2,108 L75.7,108 L75.7,104 L76.2,104 L76.2,108 Z M76.2,100 L75.7,100 L75.7,96 L76.2,96 L76.2,100 Z M76.2,92 L75.7,92 L75.7,88 L76.2,88 L76.2,92 Z M76.2,84 L75.7,84 L75.7,80 L76.2,80 L76.2,84 Z M76.2,76 L75.7,76 L75.7,72 L76.2,72 L76.2,76 Z M76.2,68 L75.7,68 L75.7,64 L76.2,64 L76.2,68 Z M76.2,60 L75.7,60 L75.7,56 L76.2,56 L76.2,60 Z M76.2,52 L75.7,52 L75.7,50 L76.2,50 L76.2,52 Z" id="Shape"></path>
<path d="M1.2,124 L0.7,124 L0.7,120 L1.2,120 L1.2,124 Z M1.2,116 L0.7,116 L0.7,112 L1.2,112 L1.2,116 Z M1.2,108 L0.7,108 L0.7,104 L1.2,104 L1.2,108 Z M1.2,100 L0.7,100 L0.7,96 L1.2,96 L1.2,100 Z M1.2,92 L0.7,92 L0.7,88 L1.2,88 L1.2,92 Z M1.2,84 L0.7,84 L0.7,80 L1.2,80 L1.2,84 Z M1.2,76 L0.7,76 L0.7,72 L1.2,72 L1.2,76 Z M1.2,68 L0.7,68 L0.7,64 L1.2,64 L1.2,68 Z M1.2,60 L0.7,60 L0.7,56 L1.2,56 L1.2,60 Z" id="Shape"></path>
</g>
<path d="M2,134.5 C1.5,134.5 1.1,134.1 1,133.6 C0.9,133.1 1.3,132.6 1.9,132.5 L56,126.3 L99.1,97 C99.4,96.8 99.8,96.8 100.1,96.9 L141.9,118.7 L185.9,80 C186.1,79.8 186.3,79.8 186.6,79.8 L224.4,79.8 L248.9,47 C249.2,46.6 249.8,46.5 250.2,46.7 L282.9,66.2 L322.8,55.2 L376.6,34.1 C377.1,33.9 377.7,34.2 377.9,34.7 C378.1,35.2 377.8,35.8 377.3,36 L323.5,57.1 L323.4,57.1 L283,68.2 C282.7,68.3 282.5,68.2 282.2,68.1 L250,48.9 L225.7,81.4 C225.5,81.7 225.2,81.8 224.9,81.8 L187,81.8 L142.8,120.8 C142.5,121.1 142,121.1 141.7,120.9 L99.8,99 L56.9,128.2 C56.8,128.3 56.6,128.3 56.5,128.4 L2.2,134.6 C2.1,134.5 2,134.5 2,134.5 Z" id="Shape" fill="#13E5B6" fill-rule="nonzero"></path>
<g id="Group" transform="translate(185.000000, 38.000000)">
<path d="M4.5,0.5 L4.5,146.5" id="Line_1_" stroke="#0085FF" stroke-width="2" stroke-linecap="square" opacity="0.64"></path>
<circle id="dot" stroke="#FFFFFF" stroke-width="3" fill="#1A2A71" fill-rule="nonzero" cx="4.5" cy="41.5" r="4.5"></circle>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.3 KiB

View File

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="247px" height="247px" viewBox="0 0 247 247" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>onboarding-tour-phone</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient x1="50.0034413%" y1="-0.00291497976%" x2="50.0034413%" y2="75.267085%" id="linearGradient-1">
<stop stop-color="#192C3A" offset="0%"></stop>
<stop stop-color="#192C3A" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="onboarding-tour-phone">
<path d="M123.5,247 C191.7,247 247,191.7 247,123.5 C247,55.3 191.7,0 123.5,0 C55.3,0 0,55.3 0,123.5 C0,191.7 55.3,247 123.5,247 Z" id="Shape" fill="url(#linearGradient-1)" fill-rule="nonzero" opacity="0.3"></path>
<g id="Group" transform="translate(69.000000, 32.000000)" stroke="#707D89" stroke-width="2">
<path d="M8,0 L91.8,0 C96.2,0 99.8,3.6 99.8,8 L99.8,175.9 C99.8,180.3 96.2,183.9 91.8,183.9 L8,183.9 C3.6,183.9 0,180.3 0,175.9 L0,8 C0,3.6 3.6,0 8,0 Z" id="Shape" fill-opacity="0.6548" fill="#192C3A" fill-rule="nonzero"></path>
<path d="M0.5,156 L99.3,156" id="Shape" stroke-linecap="square"></path>
<path d="M44.1,170.3 L62.8,170.3" id="Shape" stroke-linecap="square"></path>
</g>
<g id="Group" transform="translate(102.000000, 66.000000)" fill-rule="nonzero" fill="#5BC2A7">
<path d="M31.8,0 L0,0 L0,31.8 L31.8,31.8 L31.8,0 L31.8,0 Z M27.3,27.3 L4.6,27.3 L4.6,4.5 L27.3,4.5 L27.3,27.3 L27.3,27.3 Z" id="Shape"></path>
<polygon id="Shape" points="65.9 90.9 61.4 90.9 61.4 100 100 100 100 95.5 65.9 95.5"></polygon>
<rect id="Rectangle-path" x="9.1" y="9.1" width="13.6" height="13.6"></rect>
<path d="M0,100 L31.8,100 L31.8,68.2 L0,68.2 L0,100 L0,100 Z M4.5,72.7 L27.2,72.7 L27.2,95.4 L4.5,95.4 L4.5,72.7 L4.5,72.7 Z" id="Shape"></path>
<rect id="Rectangle-path" x="9.1" y="77.3" width="13.6" height="13.6"></rect>
<path d="M68.2,0 L68.2,31.8 L100,31.8 L100,0 L68.2,0 L68.2,0 Z M95.5,27.3 L72.8,27.3 L72.8,4.5 L95.5,4.5 L95.5,27.3 L95.5,27.3 Z" id="Shape"></path>
<rect id="Rectangle-path" x="77.3" y="9.1" width="13.6" height="13.6"></rect>
<rect id="Rectangle-path" x="90.9" y="36.4" width="9.1" height="9.1"></rect>
<rect id="Rectangle-path" x="0" y="54.5" width="9.1" height="9.1"></rect>
<polygon id="Shape" points="47.7 36.4 29.5 36.4 29.5 40.9 52.3 40.9 52.3 31.8 52.3 27.3 56.8 27.3 56.8 18.2 52.3 18.2 47.7 18.2 43.2 18.2 43.2 9.1 47.7 9.1 47.7 13.6 63.6 13.6 63.6 0 59.1 0 59.1 9.1 52.3 9.1 52.3 0 50 0 40.9 0 38.6 0 38.6 22.7 47.7 22.7 47.7 27.3 38.6 27.3 38.6 31.8 47.7 31.8"></polygon>
<polygon id="Shape" points="6.8 50 15.9 50 20.5 50 22.7 50 22.7 54.5 13.6 54.5 13.6 59.1 22.7 59.1 22.7 63.6 40.9 63.6 40.9 59.1 27.3 59.1 27.3 54.5 27.3 45.5 20.5 45.5 20.5 38.6 15.9 38.6 15.9 45.5 11.4 45.5 11.4 36.4 0 36.4 0 40.9 6.8 40.9"></polygon>
<polygon id="Shape" points="50 90.9 50 79.5 40.9 79.5 40.9 70.5 36.4 70.5 36.4 84.1 45.5 84.1 45.5 90.9 36.4 90.9 36.4 95.5 45.5 95.5 45.5 100 56.8 100 56.8 95.5 50 95.5"></polygon>
<polygon id="Shape" points="72.7 45.5 63.6 45.5 63.6 34.1 59.1 34.1 59.1 50 81.8 50 81.8 45.5 77.3 45.5 77.3 40.9 84.1 40.9 84.1 36.4 77.3 36.4 72.7 36.4 68.2 36.4 68.2 40.9 72.7 40.9"></polygon>
<polygon id="Shape" points="68.2 86.4 75 86.4 75 90.9 84.1 90.9 84.1 86.4 84.1 81.8 84.1 75 75 75 75 81.8 68.2 81.8 68.2 75 63.6 75 63.6 81.8 59.1 81.8 59.1 63.6 54.5 63.6 54.5 59.1 50 59.1 50 45.5 34.1 45.5 34.1 54.5 38.6 54.5 38.6 50 45.5 50 45.5 59.1 45.5 68.2 54.5 68.2 54.5 81.8 54.5 86.4 59.1 86.4 63.6 86.4"></polygon>
<polygon id="Shape" points="95.5 56.8 88.6 56.8 84.1 56.8 72.7 56.8 72.7 65.9 68.2 65.9 68.2 56.8 63.6 56.8 63.6 70.5 77.3 70.5 77.3 61.4 84.1 61.4 84.1 68.2 88.6 68.2 88.6 61.4 95.5 61.4 95.5 75 88.6 75 88.6 88.6 100 88.6 100 84.1 93.2 84.1 93.2 79.5 100 79.5 100 61.4 100 56.8 100 50 95.5 50"></polygon>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 4.3 KiB

View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="155px" height="155px" viewBox="0 0 155 155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>warning</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Onboarding" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.699999988">
<g id="0.5--Request-Backup" transform="translate(-112.000000, -63.000000)" stroke-width="5" stroke="#677AE7">
<g id="warning" transform="translate(115.000000, 66.000000)">
<g id="Group">
<circle id="Oval" cx="74.5" cy="74.5" r="74.5"></circle>
<path d="M74,40.6363636 L74,81.2727273" id="Shape"></path>
<path d="M74,101.590909 L74,108.363636" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1006 B

View File

@ -5,5 +5,5 @@
</ion-header>
<ion-content padding>
<button ion-button block (click)="showOnboardingFlow()" translate>Onboarding</button>
</ion-content>

View File

@ -11,4 +11,7 @@ export class HomePage {
}
showOnboardingFlow() {
this.navCtrl.push('WelcomePage');
}
}

View File

@ -0,0 +1,21 @@
<ion-header>
<ion-navbar transparent hideBackButton>
</ion-navbar>
</ion-header>
<ion-content class="onboarding backup-request">
<div id="warning">
<img class="svg" src="assets/img/warning.svg" id="alert-icon" />
<div class="onboarding-topic" translate>No backup, no bitcoin.</div>
<div class="onboarding-description" id="backup-description" translate>Since only you control your money, youll need to save your backup phrase in case this app is deleted.</div>
</div>
<div class="buttons">
<ion-icon name="arrow-round-down"></ion-icon>
<div class="onboarding-tldr" id="backup-tldr" translate>Your wallet is never saved to cloud storage or standard device backups.</div>
<button class="primary" ion-button block (click)="initBackupFlow()" translate>Backup wallet</button>
<button class="secondary" ion-button block outline (click)="later()" translate>Do it later</button>
</div>
</ion-content>

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { BackupRequestPage } from './backup-request';
@NgModule({
declarations: [
BackupRequestPage,
],
imports: [
IonicPageModule.forChild(BackupRequestPage),
],
})
export class BackupRequestPageModule {}

View File

@ -0,0 +1,64 @@
page-backup-request {
.backup-request {
#warning {
padding-top: 15%;
display: block;
flex-direction: column;
height: calc(100vh - 320px);
justify-content: center;
align-content: center;
}
#alert-icon {
margin: 20px auto 5px;
height: 10vh;
}
#arrow-down {
font-size: 4.2rem;
color: $v-accent-color;
}
#backup-tldr {
font-size: 16px;
}
#backup-description {
max-width: 500px;
margin: auto;
padding: 1rem 0.5rem 0 1rem;
@media (max-height: 480px) {
padding-top: 40px;
}
}
.buttons {
position: absolute;
bottom: 0px;
padding: 15px;
}
@media (max-height: 568px) {
#warning {
padding-top: 5%;
}
#backup-description {
font-size: 14px;
}
#backup-tldr {
font-size: 14px;
}
}
@media (max-height: 480px) {
#warning {
padding-top: 5%;
}
#backup-description {
font-size: 14px;
}
#backup-tldr {
font-size: 14px;
}
#arrow-down {
display: none;
}
}
}
.header-md::after {
background: none;
}
}

View File

@ -0,0 +1,51 @@
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController} from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-backup-request',
templateUrl: 'backup-request.html',
})
export class BackupRequestPage {
private opts: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
this.opts = {
title: '',
message: '',
buttons: [],
}
}
ionViewDidLoad() {
}
initBackupFlow() {
// TODO navigate to backupFlow
this.navCtrl.push('BackupWarningPage');
}
later(confirmed: boolean) {
this.opts.title = !confirmed ? '¡Watch Out!' : 'Are you sure you want to skip it?';
this.opts.message = !confirmed ? 'If this device is replaced or this app is deleted, neither you nor BitPay can recover your funds without a backup.' : 'You can create a backup later from your wallet settings.';
this.opts.buttons = [{
text: 'Go back',
role: 'destructor'
},
{
text: !confirmed ? 'I understand' : 'Yes, skip',
handler: () => {
if (!confirmed) {
setTimeout(() => {
this.later(true);
}, 300);
} else {
this.navCtrl.push('DisclaimerPage');
}
}
}]
let alert = this.alertCtrl.create(this.opts);
alert.present();
}
}

View File

@ -0,0 +1,70 @@
<ion-header>
<ion-navbar>
<ion-title>Term of use</ion-title>
<ion-buttons end>
<button ion-button (click)="closeModal()">Close</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="terms" class="enable_text_select">
<p>
This is a binding Agreement between BitPay, Inc. (&ldquo;BitPay&rdquo; or &ldquo;We&rdquo;) and the person, persons, or entity (&ldquo;You&rdquo; or &ldquo;Your&rdquo;) using the service, Software, or application (&ldquo;Software&rdquo;).
</p>
<p class="terms__heading">
RIGHTS AND OBLIGATIONS
</p>
<p>
BitPay provides the Software solely on the terms and conditions set forth in this Agreement and on the condition that You accept and comply with them. By using the Software You (a) accept this Agreement and agree that You are legally bound by its terms; and (b) represent and warrant that: (i) You are of legal age to enter into a binding agreement; and (ii) if You are a corporation, governmental organization or other legal entity, You have the right, power and authority to enter into this Agreement on behalf of the corporation, governmental organization or other legal entity and bind them to these terms.
</p>
<p>
This Software functions as a free, open source, and multi-signature digital wallet. The Software does not constitute an account where We or other third parties serve as financial intermediaries or custodians of Your bitcoin(s).
</p>
<p>
While the Software has undergone beta testing and continues to be improved by feedback from the open-source user and developer community, We cannot guarantee there will not be bugs in the Software. You acknowledge that Your use of this Software is at Your own discretion and in compliance with all applicable laws. You are responsible for safekeeping Your passwords, private key pairs, PINs, and any other codes You use to access the Software.
</p>
<p>
IF YOU LOSE ACCESS TO YOUR BITCOIN WALLET OR YOUR ENCRYPTED PRIVATE KEYS AND YOU HAVE NOT SEPARATELY STORED A BACKUP OF YOUR WALLET AND CORRESPONDING PASSWORD, YOU ACKNOWLEDGE AND AGREE THAT ANY BITCOIN YOU HAVE ASSOCIATED WITH THAT WALLET WILL BECOME INACCESSIBLE. All transaction requests are irreversible. The authors of the Software, employees and affiliates of BitPay, copyright holders, and BitPay, Inc. cannot retrieve Your private keys or passwords if You lose or forget them and cannot guarantee transaction confirmation as they do not have control over the bitcoin network.
</p>
<p class="terms__heading">
DISCLAIMER
</p>
<p>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OF THE SOFTWARE, EMPLOYEES AND AFFILIATES OF BITPAY, COPYRIGHT HOLDERS, OR BITPAY, INC. BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
</p>
<p>
IN NO EVENT WILL BITPAY OR ITS AFFILIATES, OR ANY OF ITS OR THEIR RESPECTIVE SERVICE PROVIDERS, BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY USE, INTERRUPTION, DELAY OR INABILITY TO USE THE SOFTWARE, LOST REVENUES OR PROFITS, DELAYS, INTERRUPTION OR LOSS OF SERVICES, BUSINESS OR GOODWILL, LOSS OR CORRUPTION OF DATA, LOSS RESULTING FROM SYSTEM OR SYSTEM SERVICE FAILURE, MALFUNCTION OR SHUTDOWN, FAILURE TO ACCURATELY TRANSFER, READ OR TRANSMIT INFORMATION, FAILURE TO UPDATE OR PROVIDE CORRECT INFORMATION, SYSTEM INCOMPATIBILITY OR PROVISION OF INCORRECT COMPATIBILITY INFORMATION OR BREACHES IN SYSTEM SECURITY, OR FOR ANY CONSEQUENTIAL, INCIDENTAL, INDIRECT, EXEMPLARY, SPECIAL OR PUNITIVE DAMAGES, WHETHER ARISING OUT OF OR IN CONNECTION WITH THIS AGREEMENT, BREACH OF CONTRACT, TORT (INCLUDING NEGLIGENCE) OR OTHERWISE, REGARDLESS OF WHETHER SUCH DAMAGES WERE FORESEEABLE AND WHETHER OR NOT WE WERE ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
</p>
<p class="terms__heading">
INTELLECTUAL PROPERTY
</p>
<p>
We retain all right, title, and interest in and to the Content and all of BitPays brands, logos, and trademarks, including, but not limited to, BitPay, Inc., BitPay, BitPay &ndash; Secure Bitcoin Wallet, BitPay Wallet, BitPay App, Copay, BitPay Prepaid Card, and variations of the wording of the aforementioned brands, logos, and trademarks.
</p>
<p class="terms__heading">
CHOICE OF LAW
</p>
<p>
This Agreement, and its application and interpretation, shall be governed exclusively by the laws of the State of Georgia, without regard to its conflict of law rules. You consent to the exclusive jurisdiction of the federal and state courts located in or near Atlanta, Georgia for any dispute arising under this Agreement.
</p>
<p class="terms__heading">
SEVERABILITY
</p>
<p>
In the event any court shall declare any section or sections of this Agreement invalid or void, such declaration shall not invalidate the entire Agreement and all other paragraphs of the Agreement shall remain in full force and effect.
</p>
<p class="terms__heading">
BINDING AGREEMENT
</p>
<p>
The terms and provisions of this Agreement are binding upon Your heirs, successors, assigns, and other representatives. This Agreement may be executed in counterparts, each of which shall be considered to be an original, but both of which constitute the same Agreement.
</p>
<p>
You assume any and all risks associated with the use of the Software. We reserve the right to modify this Agreement from time to time.
</p>
</div>
</ion-content>

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DisclaimerModalPage } from './disclaimer-modal';
@NgModule({
declarations: [
DisclaimerModalPage,
],
imports: [
IonicPageModule.forChild(DisclaimerModalPage),
],
})
export class DisclaimerModalPageModule {}

View File

@ -0,0 +1,3 @@
page-disclaimer-modal {
}

View File

@ -0,0 +1,21 @@
import { Component } from '@angular/core';
import { IonicPage, NavParams, ViewController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-disclaimer-modal',
templateUrl: 'disclaimer-modal.html',
})
export class DisclaimerModalPage {
constructor(public navParams: NavParams, private view: ViewController) {
}
ionViewDidLoad() {
}
closeModal() {
this.view.dismiss();
}
}

View File

@ -0,0 +1,35 @@
<ion-header>
<ion-navbar transparent class="navbarc">
</ion-navbar>
</ion-header>
<ion-content class="onboarding disclaimer">
<div id="onboarding-disclaimer-container">
<div *ngIf="resume" class="onboarding-topic" id="disclaimer-topic" translate>Quick review!</div>
<div *ngIf="!resume" class="onboarding-topic" id="disclaimer-topic" translate>Almost done! Let's review.</div>
<div class="onboarding-description" id="disclaimer-description" translate>Bitcoin is different &ndash; it cannot be safely held with a bank or web service.</div>
<div class="options">
<ion-item>
<ion-label>I understand that my funds are held securely on this device, not by a company.</ion-label>
<ion-checkbox [(ngModel)]="accepted.first"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>I understand that if this app is moved to another device or deleted, my bitcoin can only be recovered with the backup phrase.</ion-label>
<ion-checkbox [(ngModel)]="accepted.second"></ion-checkbox>
</ion-item>
</div>
</div>
<div id="agree-to-terms" *ngIf="accepted.first && accepted.second">
<div class="terms-check">
<ion-checkbox [(ngModel)]="terms.accepted"></ion-checkbox>
<div class="modal-text">
<label (click)="selectTerms()" translate>I have read, understood, and agree to the </label>
<a (click)="openModal()" translate>Terms of Use.</a>
</div>
</div>
<button class="primary" ion-button block [disabled]="!accepted.first || !accepted.second || !terms.accepted" (click)="confirm()" translate>Confirm &amp; Finish</button>
</div>
</ion-content>

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { DisclaimerPage } from './disclaimer';
@NgModule({
declarations: [
DisclaimerPage,
],
imports: [
IonicPageModule.forChild(DisclaimerPage),
],
})
export class DisclaimerPageModule {}

View File

@ -0,0 +1,54 @@
page-disclaimer {
.disclaimer {
.options {
padding-top: 20px;
}
.item {
background-color: transparent;
color: $v-onboarding-color;
}
.item-md.item-block .item-inner {
border-bottom: 0;
}
ion-label {
white-space: normal;
}
#agree-to-terms {
position: absolute;
bottom: 0;
width: 100%;
padding: 15px;
.item {
padding-left: 0px;
}
.terms-check {
text-align: left;
margin-bottom: 25px;
display: flex;
label {
font-size: 16px;
cursor: pointer;
}
a {
cursor: pointer;
}
.checkbox {
margin: auto;
padding: 5px;
}
.modal-text {
margin-left: 30px;
}
}
}
}
.navbarc {
.bar-button {
color: $v-accent-color;
}
}
.header-md::after {
background: none;
}
}

View File

@ -0,0 +1,39 @@
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController} from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-disclaimer',
templateUrl: 'disclaimer.html',
})
export class DisclaimerPage {
public accepted: any;
public terms: any;
constructor(public navCtrl: NavController, public navParams: NavParams, public modalCtrl: ModalController) {
this.accepted = {
first: false,
second: false,
};
this.terms = {
accepted: false,
}
}
ionViewDidLoad() {
}
selectTerms() {
this.terms.accepted = !this.terms.accepted;
}
openModal() {
const myModal = this.modalCtrl.create('DisclaimerModalPage');
myModal.present();
}
confirm() {
// TODO accept disclaimer
this.navCtrl.popToRoot();
}
}

View File

@ -0,0 +1,46 @@
<ion-header>
</ion-header>
<ion-content class="email">
<div id="success-container">
<img src="assets/img/onboarding-success.svg" id="success-image" />
<div id="success-message" translate>Wallet Created</div>
</div>
<div id="collect-email">
<div id="collect-email-inner" *ngIf="!showConfirmForm">
<div class="heading" translate>Notifications by email</div>
<div class="prompt" translate>Where would you like to receive email notifications about payments?</div>
<form id="email-form" name="emailForm" (ngSubmit)="showConfirm()" novalidate>
<label class="item item-input" id="email-label">
<ion-input type="email" placeholder="Email Input" name="email" [(ngModel)]="data.email"></ion-input>
</label>
<ion-item>
<ion-label class="prompt">Get news and updates from BitPay</ion-label>
<ion-checkbox name="accept" [(ngModel)]="data.accept"></ion-checkbox>
</ion-item>
<button class="primary" ion-button block type="submit">Continue &rarr;</button>
</form>
</div>
<div id="collect-email-confirm" *ngIf="showConfirmForm">
<p translate class="confirm">Is this email address correct?</p>
<p class="user-email">{{data.email}}</p>
<div class="row">
<div class="col col-50">
<button class="primary" block ion-button (click)="showConfirm()">Edit</button>
</div>
<div class="col col-50">
<button class="primary" block ion-button (click)="save()">Confirm</button>
</div>
</div>
</div>
</div>
<div class="overlay collect-overlay">
<button (click)="skip()">
Skip
</button>
</div>
</ion-content>

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { EmailPage } from './email';
@NgModule({
declarations: [
EmailPage,
],
imports: [
IonicPageModule.forChild(EmailPage),
],
})
export class EmailPageModule {}

View File

@ -0,0 +1,201 @@
page-email {
ion-label {
text-align: left !important;
white-space: normal;
}
.email {
color: $v-onboarding-color;
background: rgb(17, 209, 166) !important;
$relish-success: 1.3s;
button {
&.primary {
border-color: transparent;
background-color: $v-accent-color;
color: $v-onboarding-color;
}
&.secondary {
background-color: transparent;
border-color: transparent;
color: $v-accent-color;
}
}
#success-container {
text-align: center;
top: 41vh;
position: relative;
animation-name: emailCollectSlideUp;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .5s;
animation-delay: $relish-success;
animation-fill-mode: forwards;
}
#success-image {
width: 13vh;
margin: 0 auto 2vh;
}
#success-message {
font-size: 3vh;
}
.collect-overlay {
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
background: rgba(0,0,0,.4);
z-index: 4;
animation-name: emailCollectOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .2s;
animation-delay: $relish-success;
animation-fill-mode: forwards;
opacity: 0;
button {
position: absolute;
right: 0;
margin: 5% 1% 0 0;
background-color: transparent;
font-size: initial;
color: $v-light-gray;
text-transform: uppercase;
}
}
.heading {
text-align: center;
color: $v-dark-gray;
font-size: 2rem;
font-weight: bold;
margin: 2rem 0 1rem;
}
.prompt {
text-align: center;
margin: 1rem 1.5rem;
color: $v-mid-gray;
}
#email-form {
margin: 0 1.5rem 1rem;
}
#email-label {
border-radius: $v-visible-radius;
background: rgba(200, 200, 200, 0.20);
height: 3rem;
margin-top:0;
}
#collect-email {
opacity: 1;
background: #fff;
animation-name: topBottom;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: .4s;
animation-delay: $relish-success + .2s;
position: absolute;
bottom: -100%;
animation-fill-mode: forwards;
z-index: 5;
margin-top: 0;
width: 100%;
}
#collect-email-inner {
max-width: 400px;
margin: 0 auto;
input[type="email"] {
display: block;
padding-left: 0;
color: #445;
vertical-align: middle;
font-size: 16px;
line-height: 18px;
}
#email-label {
border-radius: 6px;
background: rgba(200, 200, 200, 0.2);
height: 4rem;
margin-top: 0;
}
}
#collect-email-confirm {
text-align: center;
p.confirm {
margin: 2rem 0;
color: $v-mid-gray;
}
p.user-email {
color: $v-dark-gray;
margin-bottom: 2rem;
}
.row, .col {
padding: 0;
}
.button {
padding: 2.5rem;
margin-bottom: 0;
}
}
#news-updates {
padding-top: 0;
}
.item {
border: none;
label {
background: none;
}
.checkbox input:before,
.checkbox .checkbox-icon:before {
border-radius: 50% !important;
background: none;
border-width: 2px;
padding: 12px;
position: relative;
right: 2px;
bottom: 2px;
}
.checkbox input:checked:after,
input:checked + .checkbox-icon:after {
border-color: $v-onboarding-checkbox-on-border;
top: 8px;
left: 6px;
}
.item-content {
color: $v-mid-gray;
text-align: left;
margin-left: 75px;
white-space: initial;
}
}
.item-checkbox {
padding: 1rem 0;
margin: 1rem 0;
}
.item-checkbox .checkbox {
margin-left: 15px;
}
.checkbox input:before,
.checkbox .checkbox-icon:before{
border-color: $v-onboarding-checkbox-on-border;
}
.checkbox input:checked:before,
.checkbox input:checked + .checkbox-icon:before {
border-color: $v-onboarding-checkbox-on-border;
}
@keyframes topBottom {
0% { bottom: -100%; }
100% { bottom: 0; }
}
@keyframes emailCollectOpacity {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes emailCollectSlideUp {
0% { top: 41vh; }
100% { top: calc((100vh - 20rem) / 2 - 11vh);}
}
}
}

View File

@ -0,0 +1,49 @@
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-email',
templateUrl: 'email.html',
})
export class EmailPage {
public data: any;
public showConfirmForm: boolean;
constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheet: ActionSheetController) {
this.data = {
accept: true,
email: '',
};
this.showConfirmForm = false;
}
skip() {
this.navCtrl.push('BackupRequestPage');
}
showActionSheet() {
let actionSheet = this.actionSheet.create({
buttons: [
{
text: 'Continue',
role: 'destructor',
handler: () => {
console.log('Continue clicked');
}
}
]
});
actionSheet.present();
}
showConfirm() {
if (!this.data.email) return;
this.showConfirmForm = !this.showConfirmForm;
}
save() {
// TODO SAVE EMAIL
this.navCtrl.push('BackupRequestPage');
}
}

View File

@ -0,0 +1,56 @@
<ion-header>
<ion-navbar transparent class="navbarc">
<ion-buttons end>
<button ion-button icon-only (click)="skip()" *ngIf="currentIndex == 0">
Skip
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="onboarding tour">
<ion-slides pager="true" class="pages">
<ion-slide>
<div>
<p class="onboarding-topic" translate>Bitcoin is secure,<br/>digital money.</p>
<p class="onboarding-description" translate>You can spend bitcoin at millions of websites and stores worldwide.</p>
</div>
<div class="img-content">
<img src='assets/img/tour-phone.svg' />
</div>
<div class="buttons">
<div class="onboarding-tldr" translate>Just scan the code to pay.</div>
<button class="primary" ion-button block (click)="slideNext()" translate>
Got it
</button>
</div>
</ion-slide>
<ion-slide>
<div class="onboarding-topic" translate>Bitcoin is a currency.</div>
<div class="onboarding-description" translate>You can trade it for other currencies like US Dollars, Euros, or Pounds.</div>
<img src='assets/img/tour-currency.svg' />
<div>1 BTC = 2000 USD</div>
<div class="buttons">
<div class="onboarding-tldr" translate>The exchange rate changes with the market.</div>
<button class="primary" ion-button block (click)="slideNext()" translate>
Makes sense
</button>
</div>
</ion-slide>
<ion-slide>
<div class="onboarding-topic" translate>You control your bitcoin.</div>
<div class="onboarding-description" translate>This app stores your bitcoin with cutting-edge security.</div>
<img src='assets/img/tour-control.svg' />
<div class="buttons">
<div class="onboarding-tldr" translate>Not even BitPay can access it.</div>
<button class="primary" ion-button block (click)="createDefaultWallet()" translate>
Create bitcoin wallet
</button>
</div>
</ion-slide>
</ion-slides>
</ion-content>

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TourPage } from './tour';
@NgModule({
declarations: [
TourPage,
],
imports: [
IonicPageModule.forChild(TourPage),
],
})
export class TourPageModule { }

View File

@ -0,0 +1,32 @@
page-tour {
.tour {
position: relative;
.pages {
position: absolute;
}
.buttons {
padding: 15px;
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 9vh 15px;
}
.slide-zoom {
height: inherit;
img {
padding-top: 10%;
width: 65%;
}
}
}
.navbarc {
.bar-button {
color: $v-accent-color;
}
}
.header-md::after {
background: none;
}
}

View File

@ -0,0 +1,61 @@
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { ViewChild } from '@angular/core';
import { Slides, Navbar } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-tour',
templateUrl: 'tour.html',
})
export class TourPage {
@ViewChild(Slides) slides: Slides;
@ViewChild(Navbar) navBar: Navbar;
public currentIndex: number;
constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController) {
}
ionViewDidLoad() {
}
ngOnInit() {
this.currentIndex = this.slides.getActiveIndex() || 0;
this.navBar.backButtonClick = (e: UIEvent) => {
this.slidePrev();
}
}
skip() {
this.navCtrl.push('EmailPage');
}
slidePrev() {
if (this.currentIndex == 0) this.navCtrl.pop();
else {
this.slides.slidePrev();
this.currentIndex = this.slides.getActiveIndex();
}
}
slideNext() {
this.slides.slideNext();
this.currentIndex = this.slides.getActiveIndex();
}
createDefaultWallet() {
// TODO replace for bwc method
let loading = this.loadingCtrl.create({
content: 'Creating Personal Wallet...'
});
loading.present();
setTimeout(() => {
loading.dismiss();
this.navCtrl.push('EmailPage');
}, 1500);
}
}

View File

@ -0,0 +1,14 @@
<ion-header>
</ion-header>
<ion-content class="onboarding welcome">
<div class="logo-tagline">
<img src='assets/img/logo-negative.svg' id="logo" />
<p class="onboarding-description" translate>Take control of your money,<br />get started with bitcoin.</p>
</div>
<div class="buttons">
<button class="primary" ion-button block (click)="getStarted()" translate>Get started</button>
<button class="secondary" ion-button block outline (click)="initBackupFlow()" translate>Restore from backup</button>
</div>
</ion-content>

View File

@ -0,0 +1,13 @@
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { WelcomePage } from './welcome';
@NgModule({
declarations: [
WelcomePage,
],
imports: [
IonicPageModule.forChild(WelcomePage),
],
})
export class WelcomePageModule { }

View File

@ -0,0 +1,33 @@
page-welcome {
.welcome {
position: relative;
.logo-tagline {
position: absolute;
width: 100%;
height: 70%;
display: flex;
flex-direction: column;
justify-content: space-around;
img {
width: 50%;
max-width: 200px;
margin: 5rem auto 0;
}
p {
line-height: 1.6;
font-size: 18px;
text-align: center;
}
}
.buttons {
width: 100%;
position: absolute;
bottom: 0px;
padding: 15px 15px 4vw 15px;
}
}
}

View File

@ -0,0 +1,26 @@
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-welcome',
templateUrl: 'welcome.html',
})
export class WelcomePage {
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
}
getStarted() {
this.navCtrl.push('TourPage');
}
initBackupFlow() {
// TODO navigate to backupFlow
this.navCtrl.push('BackupWarningPage');
}
}

View File

@ -14,6 +14,26 @@ $app-direction: ltr;
@import "ionic.globals";
$v-primary-color: #192c3a;
$v-secondary-color: #31465b;
$v-accent-color: #1abb9b;
$v-dark-gray: #445 !default;
$v-mid-gray: #667 !default;
$v-light-gray: #9b9bab !default;
$v-subtle-gray: darken(#ffffff, 5%) !default;
$v-onboarding-color: #ffffff !default;
$v-onboarding-bar-header-color: #ffffff !default;
$v-onboarding-bar-header-button-color: #ffffff !default;
$v-onboarding-gradient-top-color: $v-primary-color !default;
$v-onboarding-gradient-bottom-color: $v-secondary-color !default;
$v-onboarding-checkbox-on-border: $v-accent-color;
$v-button-primary-bg: $v-accent-color !default;
$v-visible-radius: 6px !default;
// Shared Variables
// --------------------------------------------------
@ -86,3 +106,85 @@ $colors: (
@import "roboto";
@import "noto-sans";
// Onboarding ---------------------------------------
.checkbox .checkbox-icon {
border-color: $v-accent-color !important;
position: relative !important;
width: 28px !important;
height: 28px !important;
display: block !important;
background: transparent !important;
-webkit-appearance: none !important;
border-radius: 50% !important;
}
.checkbox .checkbox-checked .checkbox-inner {
left: 40% !important;
top: 15% !important;
height: 15px !important;
border-color: $v-accent-color !important;
}
.onboarding {
color: $v-onboarding-color !important;
background: $v-onboarding-gradient-top-color;
background-image: linear-gradient(to bottom, $v-onboarding-gradient-top-color 0%, $v-onboarding-gradient-bottom-color 100%);
height: 100%;
text-align: center;
.onboarding-topic,
.onboarding-description,
.onboarding-tldr {
margin-left: 3rem;
margin-right: 3rem;
}
.onboarding-topic {
font-size: 24px;
margin-top: .5rem;
line-height: 1.3;
@media(max-width: 350px) {
font-size: 20px;
}
}
.onboarding-description {
margin-top: 1rem;
font-size: 16px;
color: rgba(255,255,255,0.5);
line-height: 1.5;
@media(max-width: 350px) {
line-height: 1.3;
}
@media(max-height: 480px) {
font-size: 16px;
}
}
.onboarding-tldr {
font-size: 18px;
margin-top: 1rem;
margin-bottom: 1em;
line-height: 1.3;
@media(max-width: 350px) {
font-size: 16px;
}
@media(max-height: 480px) {
font-size: 14px;
}
}
button {
&.primary {
border-color: transparent;
background-color: $v-accent-color;
color: $v-onboarding-color;
}
&.secondary {
background-color: transparent;
border-color: transparent;
color: $v-accent-color;
}
}
.swiper-pagination-bullet {
background-color: $v-accent-color;
}
}