Skip to content

Commit

Permalink
update wizard
Browse files Browse the repository at this point in the history
  • Loading branch information
tilthz committed May 1, 2014
1 parent 65b3db8 commit b367c3c
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 80 deletions.
36 changes: 29 additions & 7 deletions css/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -4461,6 +4461,23 @@ th.hide-for-touch {
#toast-container > div.ng-enter {
-webkit-animation: moveFromTopFade 0.7s ease both; }

div.cardflipper > div.wizard.ng-animate {
position: absolute;
width: 100%;
transition: all 800ms linear; }

div.cardflipper > div.wizard.ng-enter {
-webkit-transform: rotateY(-180deg);
opacity: 0.3; }

div.cardflipper > div.wizard.ng-leave.ng-leave-active {
-webkit-transform: rotateY(180deg);
opacity: 0.3; }

div.cardflipper > div.wizard.ng-leave, div.cardflipper > div.wizard.ng-enter.ng-enter-active {
-webkit-transform: rotateY(0deg);
opacity: 1; }

div.tab-scroller.totheright.ng-enter, div.tab-scroller.totheleft.ng-leave.ng-leave-active {
opacity: 0;
-webkit-transform: translate3d(25%, 0, 0) scale3d(0.3, 1, 1);
Expand Down Expand Up @@ -4510,7 +4527,7 @@ div.popuptabs > div.ng-enter.ng-enter-active, div.send-advanced.ng-enter.ng-ente
-webkit-transform: scale3d(1, 1, 1);
opacity: 1; }

.ng-hide-add, div.send-advanced.ng-hide, span.tooltip.fade, .contact-mosaic-square, .contact-mosaic-square img, .contact-mosaic-square .contact-label, .contact-mosaic-square .contact-menu, .top-bar a, .tabs dd > a, button.button, a.button, button.square, div.ng-enter, div.ng-leave {
.ng-hide-add, div.send-advanced.ng-hide, span.tooltip.fade, .contact-mosaic-square, .contact-mosaic-square img, .contact-mosaic-square .contact-label, .contact-mosaic-square .contact-menu, .top-bar a, .tabs dd > a, button.button, a.button, button.square {
transition: all 300ms ease-out; }

@-webkit-keyframes rotateFoldBottom {
Expand Down Expand Up @@ -4613,7 +4630,7 @@ div.container {
height: 100%; }

div.cardflipper {
margin-top: 4em;
margin-top: 2em;
-webkit-perspective: 800px; }

div.tab-scroller {
Expand Down Expand Up @@ -4643,7 +4660,8 @@ input.ng-valid + span.input-status {
input.address-buttons {
padding-right: 5.3em; }

input[type=range] {

input[type="range"] {
-webkit-appearance: none;
background-color: silver;
width: 200px;
Expand Down Expand Up @@ -4879,9 +4897,12 @@ span.meter {
padding: 5px 0 0 5px; }

textarea.seed {
font-size: 120%;
font-size: 125%;
overflow: visible;
text-align: center; }
text-align: center;
padding: 2em 0;
min-height: 5em;
color: white; }

.transaction-icon.green {
color: #27ae60; }
Expand Down Expand Up @@ -4998,15 +5019,16 @@ div.chat-text {
div.wizard {
background: #222;
border-radius: 3px;
padding: 2em; }
padding: 1.5em;
-webkit-backface-visibility: hidden; }

form.send {
background: url(../images/send.svg) center/contain no-repeat; }

.setback > * {
opacity: 0.8; }

.setback.seed {
.seed {
background: url(../images/seed.svg) center/cover no-repeat; }

/* Scrollbars --------------------- */
Expand Down
127 changes: 64 additions & 63 deletions html/partials/new_wallet.html
Original file line number Diff line number Diff line change
@@ -1,69 +1,70 @@
<div class="row cardflipper">
<div ng-if="step==1" class="medium-8 medium-centered columns wizard text-center">
<form ng-submit="nextStep()">
<img src="../images/logo.svg" style="width:60%; height:60%" />
<div class="row">
<h6>Thanks for testing Dark Wallet! Keep in mind this is alpha software. Use at your own risk!</h6>
<div class="small-6 columns">
<button ng-click="form.network='bitcoin'" class="button radius expand nomarginbottom">Use real Bitcoins!</button>
</div>
<div class="small-6 columns">
<button ng-click="form.network='testnet'" class="button glow radius expand nomarginbottom">Use Testnet</button>
</div>
</div>
</form>
</div>
<div ng-if="step==2" class="medium-8 medium-centered columns wizard text-center">
<form ng-submit="nextStep()">
<img src="../images/wallet.svg" style="width:50%; height:50%" />
<div class="row topmargin">
<div class="small-6 columns">
<button ng-click="form.crete_or_restore='restore'" class="button radius expand nomarginbottom">Restore from a seed</button>
</div>
<div class="small-6 columns">
<button ng-click="form.crete_or_restore='create'" class="button glow radius expand nomarginbottom">Create a new wallet!</button>
</div>
</div>
</form>
</div>
<div ng-if="step==3" class="medium-8 medium-centered columns wizard text-center">
<form ng-submit="passwordSubmit()">
<input type="text" ng-model="form.name" placeholder="Name for this wallet" autofocus ng-required="true" />
<div class="row collapse">
<div class="medium-8 medium-centered cardflipper columns">
<div ng-if="step==1" class="wizard text-center">
<form ng-submit="nextStep()">
<img src="../images/logo.svg" style="width:60%; height:60%" />
<div class="row">
<div class="small-6 columns"><input type="password" ng-model="form.passwd" placeholder="Password" ng-required="true" /></div>
<div class="small-6 columns"><input type="password" ng-model="form.passwd2" placeholder="Repeat password" ng-required="true" /></div>
</div>
<div class="text-right">
<input type="submit" value="Continue" class="button small radius nomarginbottom" />
</div>
</form>
</div>
<div ng-if="step==4" class="medium-8 medium-centered columns wizard">
<form ng-submit="nextStep()">
<div class="row">
<div class="medium-8 medium-centered columns wizard">
This is your seed. It will help you recover your wallet in case of computer failure, theft or loss. You need to write it down in a piece of paper. These 12 words will unlock complete access to your bitcoins even if you can't access your computer anymore. NEVER TYPE YOUR SEED IN A COMPUTER unless you are recovering your wallet or you will risk losing your bitcoins.
<textarea readonly ng-model="form.mnemonic" class="seed"></textarea>
<div class="text-right">
<input type="submit" value="I'm ready, continue!" class="button small radius glow nomarginbottom">
<h6>Thanks for testing Dark Wallet! Keep in mind this is alpha software. Use at your own risk!</h6>
<div class="small-6 columns">
<button ng-click="form.network='bitcoin'" class="button radius expand nomarginbottom">Use real Bitcoins!</button>
</div>
<div class="small-6 columns">
<button ng-click="form.network='testnet'" class="button glow radius expand nomarginbottom">Use Testnet</button>
</div>
</div>
</div>
</form>
</div>
<div ng-if="step==5" class="medium-8 medium-centered columns wizard">
<form ng-submit="mnemonicSubmit()">
<div class="row">
<div class="small-12 columns">
<h5>To confirm you've written down your seed correctly, please type it here:</h5>
<input type="text" class="seed" placeholder="Write the 12 words here..." ng-model="form.mnemonic2" />
<p>{{message2}}</p>
<h6>After typing your seed, please store the piece of paper in the safest place you can think of!</h6>
<div class="text-right">
<input type="submit" value="Finish" class="button small radius glow">
</form>
</div>
<div ng-if="step==2" class="wizard text-center">
<form ng-submit="nextStep()">
<img src="../images/wallet.svg" style="width:50%; height:50%" />
<div class="row topmargin">
<div class="small-6 columns">
<button ng-click="form.crete_or_restore='restore'" class="button radius expand nomarginbottom">Restore from a seed</button>
</div>
<div class="small-6 columns">
<button ng-click="form.crete_or_restore='create'" class="button glow radius expand nomarginbottom">Create a new wallet!</button>
</div>
</div>
</div>
</form>
</div>
</form>
</div>
<div ng-if="step==3" class="wizard text-center">
<form ng-submit="passwordSubmit()">
<div class="row">
<div class="small-12 columns">
<input type="text" ng-model="form.name" placeholder="Name for this wallet" autofocus ng-required="true" />
</div>
</div>
<div class="row">
<div class="small-6 columns"><input type="password" ng-model="form.passwd" placeholder="Password" ng-required="true" /></div>
<div class="small-6 columns"><input type="password" ng-model="form.passwd2" placeholder="Repeat password" ng-required="true" /></div>
</div>
<div class="row">
<div class="small-12 columns text-right">
<input type="submit" value="Continue" class="button small radius nomarginbottom" />
</div>
</div>
</form>
</div>
<div ng-if="step==4" class="wizard">
<form ng-submit="nextStep()">
<p>These 12 words are a key that will unlock complete access to your bitcoin wallet even if you can't access your computer anymore. Please write them down on a piece of paper before continuing.</p>
<textarea readonly ng-model="form.mnemonic" class="seed"></textarea>
<div class="text-right">
<input type="submit" value="I'm ready, continue!" class="button small radius glow nomarginbottom">
</div>

</form>
</div>
<div ng-if="step==5" class="wizard">
<form ng-submit="mnemonicSubmit()">
<h6>To confirm you've written down your seed correctly, please type it here:</h6>
<input type="text" class="seed" placeholder="Write the 12 words here..." ng-model="form.mnemonic2" />
<p>{{message2}}</p>
<h6>After typing your seed, please store the piece of paper in a safe place, and never type it on a computer unless you need to recover your lost wallet!</h6>
<div class="text-right">
<input type="submit" value="Finish" class="button small radius glow">
</div>
</form>
</div>
</div>
</div>
25 changes: 22 additions & 3 deletions sass/_animation.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,24 @@
div.cardflipper > div.wizard.ng-animate {
position: absolute;
width: 100%;
@include single-transition(all,800ms,linear);
}

div.cardflipper > div.wizard.ng-enter {
-webkit-transform: rotateY(-180deg);
opacity:0.3;
}

div.cardflipper > div.wizard.ng-leave.ng-leave-active {
-webkit-transform: rotateY(180deg);
opacity: 0.3;
}

div.cardflipper > div.wizard.ng-leave,
div.cardflipper > div.wizard.ng-enter.ng-enter-active {
-webkit-transform: rotateY(0deg);
opacity: 1;
}

div.tab-scroller.totheright.ng-enter,
div.tab-scroller.totheleft.ng-leave.ng-leave-active {
Expand Down Expand Up @@ -81,9 +102,7 @@ span.tooltip.fade,
.tabs dd > a,
button.button,
a.button,
button.square,
div.ng-enter,
div.ng-leave { @include single-transition(); }
button.square { @include single-transition(); }

@-webkit-keyframes rotateFoldBottom {
to { opacity: 0; -webkit-transform: translateY(100%) rotateX(-90deg); }
Expand Down
27 changes: 20 additions & 7 deletions sass/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,10 @@ div.container {
padding-top: 45px; height: 100%;
}

div.cardflipper { margin-top: 4em; -webkit-perspective: 800px; }


div.cardflipper {
margin-top: 2em;
-webkit-perspective: 800px;
}

div.tab-scroller { padding-top: 1em; }

Expand All @@ -60,7 +61,11 @@ input.ng-valid + span.input-status { opacity: 1; }

input.address-buttons { padding-right: 5.3em; }

input[type=range] {
input[type="text"] {

}

input[type="range"] {
-webkit-appearance: none;
background-color: silver;
width: 200px;
Expand Down Expand Up @@ -245,7 +250,14 @@ li.colorhead h6 { color: white; margin: 0; }

span.meter { padding: 5px 0 0 5px; }

textarea.seed { font-size: 120%; overflow: visible; text-align: center; }
textarea.seed {
font-size: 125%;
overflow: visible;
text-align: center;
padding: 2em 0;
min-height: 5em;
color: white;
}

.transaction-icon.green { color: $primary-color; }
.transaction-icon.red { color: $alert-color; }
Expand Down Expand Up @@ -320,14 +332,15 @@ div.chat-text {
div.wizard {
background: $body-bg;
border-radius: $global-radius;
padding: 2em;
padding: 1.5em;
-webkit-backface-visibility: hidden;
}

form.send { background: url(../images/send.svg) center/contain no-repeat; }

.setback > * { opacity: 0.8; }

.setback.seed { background: url(../images/seed.svg) center/cover no-repeat; }
.seed { background: url(../images/seed.svg) center/cover no-repeat; }



Expand Down

0 comments on commit b367c3c

Please sign in to comment.