BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

signup + signin

This commit is contained in:
bechi 2014-07-21 18:07:42 -03:00
parent 31025dfd89
commit 199ba9d47b
3 changed files with 221 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
css/main.css
View File

@ -89,6 +89,28 @@ body, html{
width:100%; width:100%;
} }
a {
color: #3498DB;
}
a:hover {
color: #2980b9;
}
input {
background: #2C3E50 !important;
-moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important;
box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.10) !important;
border: 0 !important;
color: #7A8C9E !important;
}
select {
background: #2C3E50 !important;
border: 0 !important;
color: #7A8C9E !important;
}
.page, .main { .page, .main {
height:100%; height:100%;
overflow-y: auto; overflow-y: auto;
@ -151,16 +173,19 @@ body, html{
} }
.signin, .setup { .signin, .setup {
margin-top: 10%; margin-top: 15%;
} }
.logo-setup { .logo-setup {
height: 100%; position: absolute;
top: 45%;
left: 8%;
} }
.content-setup { .box-setup {
height: 100%; padding: 20px 30px;
border-left: 1px dashed #ccc; background: #34495E;
margin-bottom: 20px;
} }
.last-transactions { .last-transactions {
@ -224,15 +249,19 @@ body, html{
.button-setup a { .button-setup a {
display: block; display: block;
padding: 30px 20px; padding: 20px 30px;
background: #384D6B; background: #34495E;
color: #eee; color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
-webkit-border-radius: 20px; font-weight: 100;
-moz-border-radius: 20px; }
-ms-border-radius: 20px;
border-radius: 20px;
.button-setup a:hover {
background: #fff;
}
.button-setup a:hover h1 {
color: #34495E;
} }
.footer-setup { .footer-setup {
@ -265,6 +294,7 @@ body, html{
.m10r {margin-right: 10px;} .m10r {margin-right: 10px;}
.m15l {margin-left: 15px;} .m15l {margin-left: 15px;}
.m20r {margin-right: 20px;} .m20r {margin-right: 20px;}
.m20t {margin-top: 20px;}
.m10 {margin: 10px;} .m10 {margin: 10px;}
.m15 {margin: 15px;} .m15 {margin: 15px;}
.p10t {padding-top: 10px;} .p10t {padding-top: 10px;}
@ -274,6 +304,7 @@ body, html{
.p5h {padding: 0 5px;} .p5h {padding: 0 5px;}
.p20h {padding: 0 20px;} .p20h {padding: 0 20px;}
.p20 {padding:20px;} .p20 {padding:20px;}
.p10 {padding:10px;}
.m30v {margin: 30px 0;} .m30v {margin: 30px 0;}
.m10h {margin:0 10px;} .m10h {margin:0 10px;}
.m10v {margin:10px 0;} .m10v {margin:10px 0;}
@ -284,8 +315,14 @@ body, html{
.oh {overflow:hidden;} .oh {overflow:hidden;}
.lh {line-height: 0;} .lh {line-height: 0;}
.line-dashed-setup-v {
border-left: 1px dashed #415970;
padding-left: 3rem;
}
.line-dashed-v { .line-dashed-v {
border-right: 2px dashed #E3E3E3; border-right: 1px dashed #E3E3E3;
} }
.line-dashed-h { .line-dashed-h {
@ -302,6 +339,11 @@ body, html{
margin: 1.4rem 0; margin: 1.4rem 0;
} }
.line-sidebar-b {
border-bottom: 1px solid #3C5269;
padding-bottom: 0.5rem;
}
.line-dashed { .line-dashed {
border-top: 1px dashed #ccc; border-top: 1px dashed #ccc;
margin: 1rem 0; margin: 1rem 0;
@ -565,15 +607,15 @@ button.radius, .button.radius {
/* SECONDARY */ /* SECONDARY */
button.secondary, button.secondary,
.button.secondary { .button.secondary {
background-color: #1ABC9C; background-color: #4A90E2;
color: #fff; color: #fff;
} }
button.secondary:hover, button.secondary:hover,
button.secondary:focus, button.secondary:focus,
.button.secondary:hover, .button.secondary:hover,
.button.secondary:focus { .button.secondary:focus {
background-color: #16A085; background-color: #2980B9;
color: #e6e6e6; color: #fff;
} }
button.disabled.secondary, button.disabled.secondary,
button[disabled].secondary, button[disabled].secondary,
@ -587,22 +629,22 @@ button[disabled].secondary:focus,
.button.disabled.secondary:focus, .button.disabled.secondary:focus,
.button[disabled].secondary:hover, .button[disabled].secondary:hover,
.button[disabled].secondary:focus { .button[disabled].secondary:focus {
background-color: #1ABC9C; background-color: #95a5a6;
color: #E6E6E6; color: #E6E6E6;
} }
/* PRIMARY */ /* PRIMARY */
button.primary, button.primary,
.button.primary { .button.primary {
background-color: #E67E22; background-color: #1ABC9C;
color: #fff; color: #fff;
} }
button.primary:hover, button.primary:hover,
button.primary:focus, button.primary:focus,
.button.primary:hover, .button.primary:hover,
.button.primary:focus { .button.primary:focus {
background-color: #D86601; background-color: #16A085;
color: #e6e6e6; color: #fff;
} }
button.disabled.primary, button.disabled.primary,
button[disabled].primary, button[disabled].primary,
@ -616,7 +658,7 @@ button[disabled].primary:focus,
.button.disabled.primary:focus, .button.disabled.primary:focus,
.button[disabled].primary:hover, .button[disabled].primary:hover,
.button[disabled].primary:focus { .button[disabled].primary:focus {
background-color: #E67E22; background-color: #95a5a6;
color: #E6E6E6; color: #E6E6E6;
} }
@ -646,7 +688,37 @@ button[disabled].warning:focus,
.button.disabled.warning:focus, .button.disabled.warning:focus,
.button[disabled].warning:hover, .button[disabled].warning:hover,
.button[disabled].warning:focus { .button[disabled].warning:focus {
background-color: #C0392A; background-color: #95a5a6;
color: #E6E6E6;
}
/* WHITE */
button.white,
.button.white {
background-color: #fff;
color: #2C3E50;
}
button.white:hover,
button.white:focus,
.button.white:hover,
.button.white:focus {
background-color: #E0E0E0;
color: #2C3E50;
}
button.disabled.white,
button[disabled].white,
.button.disabled.white,
.button[disabled].white,
button.disabled.white:hover,
button.disabled.white:focus,
button[disabled].white:hover,
button[disabled].white:focus,
.button.disabled.white:hover,
.button.disabled.white:focus,
.button[disabled].white:hover,
.button[disabled].white:focus {
background-color: #95a5a6;
color: #E6E6E6; color: #E6E6E6;
} }
@ -724,8 +796,9 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
border-color: red; border-color: red;
} }
.copayers h3 { .copayers h3,h4 {
color: #fff; color: #fff;
font-weight: 100;
} }
.copayers { .copayers {
@ -739,5 +812,15 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
overflow-y: hidden; overflow-y: hidden;
} }
.text-gray {color: #8597A7;}
.text-primary {color: #1ABC9C;}
.text-secondary {color: #3498DB;}
.text-white {color: #fff;}
.box-setup-copayers {
background: #2C3E50;
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20);
box-shadow: 0px 0px 0px 0px rgba(255,255,255,0.09), inset 0px 0px 2px 0px rgba(0,0,0,0.20);
}
/*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/

60
views/setup.html
View File

@ -6,25 +6,23 @@
<div class="setup" ng-show="!loading"> <div class="setup" ng-show="!loading">
<form name="setupForm" ng-submit="create(setupForm)" novalidate> <form name="setupForm" ng-submit="create(setupForm)" novalidate>
<div class="row"> <div class="row">
<div class="large-4 columns logo-setup"> <div class="large-4 columns logo-setup text-center">
<img src="../img/logo-negative-beta.svg" alt="Copay"> <img src="../img/logo-negative-beta.svg" alt="Copay">
<p class="size-12 m10t">
Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
</p>
</div> </div>
<div class="large-8 columns content-setup"> <div class="large-8 columns line-dashed-setup-v">
<h3>Create new wallet</h3> <div class="box-setup oh">
<label ng-show="!isSetupWalletPage">Wallet name <small>Optional</small> <h1 class="text-secondary line-sidebar-b">Create new wallet</h1>
<h4 ng-show="!isSetupWalletPage">Wallet name
<input type="text" placeholder="Family vacation funds" class="form-control" ng-model="walletName"> <input type="text" placeholder="Family vacation funds" class="form-control" ng-model="walletName">
</label> </h4>
<div class="row" ng-show="isSetupWalletPage"> <div class="row" ng-show="isSetupWalletPage">
<div class="small-12 medium-6 large-6 columns"> <div>
<label>Your name <small>Optional</small> <h4>Your name
<input type="text" placeholder="Name" class="form-control" ng-model="myNickname"> <input type="text" placeholder="Name" class="form-control" ng-model="myNickname">
</label> </h4>
</div> </div>
<div class="small-12 medium-6 large-6 columns"> <div>
<label>Your Wallet Password <small data-options="disable_for_touch:true" class="has-tip" tooltip="doesn't need to be shared">Required</small> <h4>Your Wallet Password <small data-options="disable_for_touch:true" class="has-tip text-gray" tooltip="doesn't need to be shared">Required</small>
<input type="password" placeholder="Choose your password" class="form-control" <input type="password" placeholder="Choose your password" class="form-control"
ng-model="$parent.walletPassword" ng-model="$parent.walletPassword"
name="walletPassword" name="walletPassword"
@ -42,45 +40,45 @@
match="walletPassword" match="walletPassword"
required> required>
</label> </h4>
</div> </div>
</div> </div>
<div class="box-setup" ng-show="!isSetupWalletPage"> <div class="row" ng-show="!isSetupWalletPage">
<fieldset> <div class="large-6 medium-6 columns">
<div class="row"> <h4>Select total number of copayers
<div class="large-6 medium-6 columns line-dashed-v">
<label>Select total number of copayers
<select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues"> <select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
</select> </select>
</label> </h4>
</div> </div>
<div class="large-6 medium-6 columns"> <div class="large-6 medium-6 columns">
<label>Select required signatures <h4>Select required signatures
<select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues"> <select ng-model="requiredCopayers" ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
</select> </select>
</label> </h4>
</div> </div>
</div> </div>
</fieldset>
</div>
<div class="box-setup-copayers" ng-show="!isSetupWalletPage"> <div class="box-setup-copayers" ng-show="!isSetupWalletPage">
<div class="box-setup-copayers-fix"> <div class="box-setup-copayers p10">
<img class="box-setup-copay" ng-repeat="i in getNumber(totalCopayers) track by $index" <img class="br100 oh box-setup-copay m10" ng-repeat="i in getNumber(totalCopayers) track by $index"
src="./img/satoshi.gif" src="./img/satoshi.gif"
title="Copayer {{$index+1}}-{{totalCopayers}}" title="Copayer {{$index+1}}-{{totalCopayers}}"
ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}"> ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}"
width="50px">
</div> </div>
</div> </div>
<a ng-show="!isSetupWalletPage" class="back-button" href="/signin">&laquo; Back</a> <div class="m20t text-right">
<a ng-show="isSetupWalletPage" class="back-button" <a ng-show="!isSetupWalletPage" class="back-button m20r" href="/signin">&laquo; Back</a>
<a ng-show="isSetupWalletPage" class="back-button m20r"
ng-click="setupWallet()">&laquo; Back</a> ng-click="setupWallet()">&laquo; Back</a>
<button ng-show="isSetupWalletPage" type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading"> <button ng-show="isSetupWalletPage" type="submit" class="button secondary radius right m0" ng-disabled="setupForm.$invalid || loading">
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
</button> </button>
<a class="button primary radius right" ng-show="!isSetupWalletPage" <a class="button secondary radius right m0" ng-show="!isSetupWalletPage"
ng-click="setupWallet()">Next</a> ng-click="setupWallet()">Next</a>
</div> </div>
</div> </div>
</div>
</div>
</form> </form>
</div> </div>
</div> </div>

52
views/signin.html
View File

@ -4,37 +4,46 @@
Authenticating and looking for peers... Authenticating and looking for peers...
</div> </div>
<div class="row signin" ng-show="!loading"> <div class="row signin" ng-show="!loading">
<div class="large-4 columns logo-setup"> <div class="large-4 columns logo-setup text-center">
<img src="../img/logo-negative-beta.svg" alt="Copay"> <img src="../img/logo-negative-beta.svg" alt="Copay">
<p class="size-12 m10t">
Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
</p>
</div> </div>
<div class="large-8 columns content-setup"> <div class="large-8 columns line-dashed-setup-v">
<div ng-show="!isHome && isOpen"> <div class="box-setup" ng-show="!isHome && isOpen">
<h3>Open Wallet</h3> <h1 class="text-white line-sidebar-b">Open Wallet</h1>
<form name="openForm" ng-submit="open(openForm)" novalidate> <form name="openForm" ng-submit="open(openForm)" novalidate>
<select class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets" required> <select class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets" required>
</select> </select>
<input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required> <input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required>
<a class="back-button" ng-click="backWallet()">&laquo; Back</a> <div class="text-right">
<button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button> <a class="back-button text-white m20r" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button white m0" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
</div>
</form> </form>
</div> </div>
<div ng-show="isHome && wallets.length"> <div ng-show="isHome && wallets.length">
<div class="button-setup"> <div class="button-setup">
<a ng-click="openWallet()">Open a wallet</a> <a ng-click="openWallet()">
<h1 class="text-white">Open a wallet</h1>
<p class="text-gray m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, non.</p>
</a>
</div> </div>
</div> </div>
<div ng-show="isHome && !wallets.length"> <div ng-show="isHome && !wallets.length">
<div class="button-setup"> <div class="button-setup">
<a href="/setup">Create a new wallet</a> <a href="/setup">
<h1 class="text-secondary">Create a new wallet</h1>
<p class="text-gray m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, non.</p>
</a>
</div> </div>
</div> </div>
<div ng-show="!isHome && isJoin"> <div ng-show="!isHome && isJoin">
<h3>Join a Wallet in Creation</h3> <div class="box-setup">
<h1 class="text-primary line-sidebar-b">Join a Wallet in Creation</h1>
<form name="joinForm" ng-submit="join(joinForm)" novalidate> <form name="joinForm" ng-submit="join(joinForm)" novalidate>
<h4>Wallet Setting</h4>
<input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required> <input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
<h4>User info</h4>
<input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname"> <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
<input type="password" class="form-control" <input type="password" class="form-control"
placeholder="Choose your password" name="joinPassword" placeholder="Choose your password" name="joinPassword"
@ -49,25 +58,30 @@
name="joinPasswordConfirm" name="joinPasswordConfirm"
ng-model="joinPasswordConfirm" ng-model="joinPasswordConfirm"
match="joinPassword" required> match="joinPassword" required>
<div class="text-right">
<a class="back-button" ng-click="backWallet()">&laquo; Back</a> <a class="back-button text-primary m20r" ng-click="backWallet()">&laquo; Back</a>
<button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button> <button type="submit" class="button primary radius m0" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
</div>
</form> </form>
</div> </div>
</div>
<div ng-show="isHome && !isJoin"> <div ng-show="isHome && !isJoin">
<div class="button-setup"> <div class="button-setup">
<a ng-click="joinWallet()">Join a Wallet in Creation</a> <a ng-click="joinWallet()">
<h1 class="text-primary">Join a Wallet in Creation</h1>
<p class="text-gray m0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, non.</p>
</a>
</div> </div>
</div> </div>
<div ng-show="isHome && wallets.length"> <div ng-show="isHome && wallets.length">
<div class="button-setup"> <div class="button-setup">
<a href="/setup">Create a wallet</a> <a href="/setup"><h1 class="text-secondary">Create a wallet</h1></a>
</div> </div>
</div> </div>
<div class="footer-setup" ng-show="isHome"> <div class="footer-setup" ng-show="isHome">
<a class="right size-12" href="/settings">Settings</a> <a class="right size-12 text-gray" href="/settings"><i class="m10r size-14 fi-wrench"></i>Settings</a>
<a class="size-12" href="/import">Import a backup</a> <a class="left size-12 text-gray" href="/import"><i class="m10r size-14 fi-upload"></i>Import a backup</a>
</div> </div>
</div> </div>
</div> <!-- End !loading --> </div> <!-- End !loading -->