mirror of https://github.com/BTCPrivate/copay.git
signup + signin
This commit is contained in:
bechi
parent
31025dfd89
commit
199ba9d47b
129
css/main.css
129
css/main.css
|
|
@ -89,6 +89,28 @@ body, html{
|
|||
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 {
|
||||
height:100%;
|
||||
overflow-y: auto;
|
||||
|
|
@ -151,16 +173,19 @@ body, html{
|
|||
}
|
||||
|
||||
.signin, .setup {
|
||||
margin-top: 10%;
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
||||
.logo-setup {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 8%;
|
||||
}
|
||||
|
||||
.content-setup {
|
||||
height: 100%;
|
||||
border-left: 1px dashed #ccc;
|
||||
.box-setup {
|
||||
padding: 20px 30px;
|
||||
background: #34495E;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.last-transactions {
|
||||
|
|
@ -224,15 +249,19 @@ body, html{
|
|||
|
||||
.button-setup a {
|
||||
display: block;
|
||||
padding: 30px 20px;
|
||||
background: #384D6B;
|
||||
color: #eee;
|
||||
padding: 20px 30px;
|
||||
background: #34495E;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
-ms-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.button-setup a:hover {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.button-setup a:hover h1 {
|
||||
color: #34495E;
|
||||
}
|
||||
|
||||
.footer-setup {
|
||||
|
|
@ -265,6 +294,7 @@ body, html{
|
|||
.m10r {margin-right: 10px;}
|
||||
.m15l {margin-left: 15px;}
|
||||
.m20r {margin-right: 20px;}
|
||||
.m20t {margin-top: 20px;}
|
||||
.m10 {margin: 10px;}
|
||||
.m15 {margin: 15px;}
|
||||
.p10t {padding-top: 10px;}
|
||||
|
|
@ -274,6 +304,7 @@ body, html{
|
|||
.p5h {padding: 0 5px;}
|
||||
.p20h {padding: 0 20px;}
|
||||
.p20 {padding:20px;}
|
||||
.p10 {padding:10px;}
|
||||
.m30v {margin: 30px 0;}
|
||||
.m10h {margin:0 10px;}
|
||||
.m10v {margin:10px 0;}
|
||||
|
|
@ -284,8 +315,14 @@ body, html{
|
|||
.oh {overflow:hidden;}
|
||||
.lh {line-height: 0;}
|
||||
|
||||
|
||||
.line-dashed-setup-v {
|
||||
border-left: 1px dashed #415970;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
.line-dashed-v {
|
||||
border-right: 2px dashed #E3E3E3;
|
||||
border-right: 1px dashed #E3E3E3;
|
||||
}
|
||||
|
||||
.line-dashed-h {
|
||||
|
|
@ -302,6 +339,11 @@ body, html{
|
|||
margin: 1.4rem 0;
|
||||
}
|
||||
|
||||
.line-sidebar-b {
|
||||
border-bottom: 1px solid #3C5269;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.line-dashed {
|
||||
border-top: 1px dashed #ccc;
|
||||
margin: 1rem 0;
|
||||
|
|
@ -565,15 +607,15 @@ button.radius, .button.radius {
|
|||
/* SECONDARY */
|
||||
button.secondary,
|
||||
.button.secondary {
|
||||
background-color: #1ABC9C;
|
||||
background-color: #4A90E2;
|
||||
color: #fff;
|
||||
}
|
||||
button.secondary:hover,
|
||||
button.secondary:focus,
|
||||
.button.secondary:hover,
|
||||
.button.secondary:focus {
|
||||
background-color: #16A085;
|
||||
color: #e6e6e6;
|
||||
background-color: #2980B9;
|
||||
color: #fff;
|
||||
}
|
||||
button.disabled.secondary,
|
||||
button[disabled].secondary,
|
||||
|
|
@ -587,22 +629,22 @@ button[disabled].secondary:focus,
|
|||
.button.disabled.secondary:focus,
|
||||
.button[disabled].secondary:hover,
|
||||
.button[disabled].secondary:focus {
|
||||
background-color: #1ABC9C;
|
||||
background-color: #95a5a6;
|
||||
color: #E6E6E6;
|
||||
}
|
||||
|
||||
/* PRIMARY */
|
||||
button.primary,
|
||||
.button.primary {
|
||||
background-color: #E67E22;
|
||||
background-color: #1ABC9C;
|
||||
color: #fff;
|
||||
}
|
||||
button.primary:hover,
|
||||
button.primary:focus,
|
||||
.button.primary:hover,
|
||||
.button.primary:focus {
|
||||
background-color: #D86601;
|
||||
color: #e6e6e6;
|
||||
background-color: #16A085;
|
||||
color: #fff;
|
||||
}
|
||||
button.disabled.primary,
|
||||
button[disabled].primary,
|
||||
|
|
@ -616,7 +658,7 @@ button[disabled].primary:focus,
|
|||
.button.disabled.primary:focus,
|
||||
.button[disabled].primary:hover,
|
||||
.button[disabled].primary:focus {
|
||||
background-color: #E67E22;
|
||||
background-color: #95a5a6;
|
||||
color: #E6E6E6;
|
||||
}
|
||||
|
||||
|
|
@ -646,7 +688,37 @@ button[disabled].warning:focus,
|
|||
.button.disabled.warning:focus,
|
||||
.button[disabled].warning:hover,
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
@ -724,8 +796,9 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
|||
border-color: red;
|
||||
}
|
||||
|
||||
.copayers h3 {
|
||||
.copayers h3,h4 {
|
||||
color: #fff;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.copayers {
|
||||
|
|
@ -739,5 +812,15 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
|
|||
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);
|
||||
}
|
||||
|
||||
/*-----------------------------------------------------------------*/
|
||||
|
|
|
|||
|
|
@ -6,25 +6,23 @@
|
|||
<div class="setup" ng-show="!loading">
|
||||
<form name="setupForm" ng-submit="create(setupForm)" novalidate>
|
||||
<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">
|
||||
<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 class="large-8 columns content-setup">
|
||||
<h3>Create new wallet</h3>
|
||||
<label ng-show="!isSetupWalletPage">Wallet name <small>Optional</small>
|
||||
<div class="large-8 columns line-dashed-setup-v">
|
||||
<div class="box-setup oh">
|
||||
<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">
|
||||
</label>
|
||||
</h4>
|
||||
<div class="row" ng-show="isSetupWalletPage">
|
||||
<div class="small-12 medium-6 large-6 columns">
|
||||
<label>Your name <small>Optional</small>
|
||||
<div>
|
||||
<h4>Your name
|
||||
<input type="text" placeholder="Name" class="form-control" ng-model="myNickname">
|
||||
</label>
|
||||
</h4>
|
||||
</div>
|
||||
<div class="small-12 medium-6 large-6 columns">
|
||||
<label>Your Wallet Password <small data-options="disable_for_touch:true" class="has-tip" tooltip="doesn't need to be shared">Required</small>
|
||||
<div>
|
||||
<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"
|
||||
ng-model="$parent.walletPassword"
|
||||
name="walletPassword"
|
||||
|
|
@ -42,45 +40,45 @@
|
|||
match="walletPassword"
|
||||
required>
|
||||
|
||||
</label>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-setup" ng-show="!isSetupWalletPage">
|
||||
<fieldset>
|
||||
<div class="row">
|
||||
<div class="large-6 medium-6 columns line-dashed-v">
|
||||
<label>Select total number of copayers
|
||||
<div class="row" ng-show="!isSetupWalletPage">
|
||||
<div class="large-6 medium-6 columns">
|
||||
<h4>Select total number of copayers
|
||||
<select ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
|
||||
</select>
|
||||
</label>
|
||||
</h4>
|
||||
</div>
|
||||
<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>
|
||||
</label>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="box-setup-copayers" ng-show="!isSetupWalletPage">
|
||||
<div class="box-setup-copayers-fix">
|
||||
<img class="box-setup-copay" ng-repeat="i in getNumber(totalCopayers) track by $index"
|
||||
<div class="box-setup-copayers p10">
|
||||
<img class="br100 oh box-setup-copay m10" ng-repeat="i in getNumber(totalCopayers) track by $index"
|
||||
src="./img/satoshi.gif"
|
||||
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>
|
||||
<a ng-show="!isSetupWalletPage" class="back-button" href="/signin">« Back</a>
|
||||
<a ng-show="isSetupWalletPage" class="back-button"
|
||||
<div class="m20t text-right">
|
||||
<a ng-show="!isSetupWalletPage" class="back-button m20r" href="/signin">« Back</a>
|
||||
<a ng-show="isSetupWalletPage" class="back-button m20r"
|
||||
ng-click="setupWallet()">« 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
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,37 +4,46 @@
|
|||
Authenticating and looking for peers...
|
||||
</div>
|
||||
<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">
|
||||
<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 class="large-8 columns content-setup">
|
||||
<div ng-show="!isHome && isOpen">
|
||||
<h3>Open Wallet</h3>
|
||||
<div class="large-8 columns line-dashed-setup-v">
|
||||
<div class="box-setup" ng-show="!isHome && isOpen">
|
||||
<h1 class="text-white line-sidebar-b">Open Wallet</h1>
|
||||
<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>
|
||||
<input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required>
|
||||
<a class="back-button" ng-click="backWallet()">« Back</a>
|
||||
<button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
|
||||
<div class="text-right">
|
||||
<a class="back-button text-white m20r" ng-click="backWallet()">« Back</a>
|
||||
<button type="submit" class="button white m0" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div ng-show="isHome && wallets.length">
|
||||
<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 ng-show="isHome && !wallets.length">
|
||||
<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 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>
|
||||
<h4>Wallet Setting</h4>
|
||||
<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="password" class="form-control"
|
||||
placeholder="Choose your password" name="joinPassword"
|
||||
|
|
@ -49,25 +58,30 @@
|
|||
name="joinPasswordConfirm"
|
||||
ng-model="joinPasswordConfirm"
|
||||
match="joinPassword" required>
|
||||
|
||||
<a class="back-button" ng-click="backWallet()">« Back</a>
|
||||
<button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
|
||||
<div class="text-right">
|
||||
<a class="back-button text-primary m20r" ng-click="backWallet()">« Back</a>
|
||||
<button type="submit" class="button primary radius m0" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="isHome && !isJoin">
|
||||
<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 ng-show="isHome && wallets.length">
|
||||
<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 class="footer-setup" ng-show="isHome">
|
||||
<a class="right size-12" href="/settings">Settings</a>
|
||||
<a class="size-12" href="/import">Import a backup</a>
|
||||
<a class="right size-12 text-gray" href="/settings"><i class="m10r size-14 fi-wrench"></i>Settings</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> <!-- End !loading -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue