status-im
/
status-site-legacy
mirror of https://github.com/status-im/status-site-legacy.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

wallet demo

This commit is contained in:
Jarrad Hope 2016-07-02 11:20:51 +02:00
parent 40672280cc
commit efdfe13875
18 changed files with 1315 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/demo/account_list.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,300,400" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wallets">
<h2>Wallets</h2>
<div class="wallet">
<div class="wallet-image"></div>
<div class="wallet-name">Another wallet</div>
<div class="wallet-hash">0x332ce8091A76bb710BDec4a40663b66</div>
<div class="wallet-currencies">
<div class="currency-usd"><span class="currency">USD</span>12.32</div>
<div class="currency-rub"><span class="currency">RUB</span>204 532</div>
<div class="currency-usd"><span class="currency">USD</span>34</div>
</div>
<a href="#">Open wallet</a>
</div>
<div class="pagination">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="wallet-actions">
<a class="trade-eth" href="#">Trade ETH</a>
<a class="create-wallet" href="#"><span class="add-wallet"></span>Create a wallet</a>
</div>
</body>
</html>

26
src/demo/assets/icon_add_green.svg Executable file
View File

@ -0,0 +1,26 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>68FEBAB7-6DC4-4117-BE2B-2ACCD9A8D41C</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wallet" transform="translate(-40.000000, -1245.000000)">
<g id="Group-5" transform="translate(0.000000, 837.000000)">
<g id="Group-2">
<g id="Group-12" transform="translate(0.000000, 89.000000)">
<g id="Group-3-Copy-3" transform="translate(0.000000, 268.000000)">
<g id="icon_add_green" transform="translate(32.000000, 43.000000)">
<polygon id="Shape" points="0 0 48 0 48 48 0 48"></polygon>
<g id="Group-4" transform="translate(8.000000, 8.000000)" fill="#5FC48D">
<rect id="Rectangle-71" x="14" y="0" width="4" height="32" rx="2"></rect>
<rect id="Rectangle-71-Copy" transform="translate(16.000000, 16.000000) rotate(-90.000000) translate(-16.000000, -16.000000) " x="14" y="0" width="4" height="32" rx="2"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

17
src/demo/assets/icon_back_copy.svg Executable file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="15px" height="27px" viewBox="0 0 15 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>3112D594-155C-47E1-89DA-2B9A18928723</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wallet" transform="translate(-46.000000, -154.000000)">
<g id="top" transform="translate(0.000000, 112.000000)">
<g id="icon_back-copy" transform="translate(32.000000, 32.000000)">
<rect id="Rectangle-204" x="0" y="0" width="48" height="48"></rect>
<path d="M14.0546008,23.4962852 C13.8989631,22.8460557 14.0738211,22.1338672 14.5777736,21.6299147 L25.6048995,10.6027888 C26.3794224,9.82826589 27.6325534,9.82564718 28.4159607,10.6090545 C29.1939441,11.3870378 29.1943528,12.6479894 28.4222264,13.4201157 L18.340874,23.5014681 L28.4222264,33.5828206 C29.1967493,34.3573435 29.199368,35.6104745 28.4159607,36.3938818 C27.6379774,37.1718651 26.3770259,37.1722738 25.6048995,36.4001475 L14.5777736,25.3730215 C14.0690886,24.8643366 13.8933641,24.1492042 14.0546008,23.4962852 Z" id="Combined-Shape" fill="#19232B"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

17
src/demo/assets/icon_close_gray.svg Executable file
View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>1DE6E4BC-5592-4BFC-9956-37873F2C421B</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="account_list" transform="translate(-652.000000, -44.000000)">
<g id="row">
<g id="icon_close_gray" transform="translate(640.000000, 32.000000)">
<polygon id="Shape" points="0 0 48 0 48 48 0 48"></polygon>
<path d="M24,26.8519129 L32.5544956,35.4064085 C33.3476708,36.1995836 34.6201175,36.1951854 35.4076515,35.4076515 C36.200676,34.6146269 36.194629,33.3427161 35.4064085,32.5544956 L26.8519129,24 L35.4064085,15.4455044 C36.1995836,14.6523292 36.1951854,13.3798825 35.4076515,12.5923485 C34.6146269,11.799324 33.3427161,11.805371 32.5544956,12.5935915 L24,21.1480871 L15.4455044,12.5935915 C14.6523292,11.8004164 13.3798825,11.8048146 12.5923485,12.5923485 C11.799324,13.3853731 11.805371,14.6572839 12.5935915,15.4455044 L21.1480871,24 L12.5935915,32.5544956 C11.8004164,33.3476708 11.8048146,34.6201175 12.5923485,35.4076515 C13.3853731,36.200676 14.6572839,36.194629 15.4455044,35.4064085 L24,26.8519129 L24,26.8519129 Z" id="Combined-Shape" fill="#838C93"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

23
src/demo/assets/icon_copy_gray.svg Executable file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="37px" height="36px" viewBox="0 0 37 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>E68A5454-57A6-4E47-BEF7-2FE66D1DA3E1</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wallet" transform="translate(-118.000000, -744.000000)">
<g id="Group-9" transform="translate(0.000000, 556.000000)">
<g id="Group-13-Copy" transform="translate(0.000000, 153.000000)">
<g id="Group-15" transform="translate(112.000000, 29.000000)">
<g id="icon_copy_gray">
<polygon id="Shape" points="0 0 48 0 48 48 0 48"></polygon>
<path d="M20,38 L20,42 L14.0095579,42 C9.58973861,42 6,38.4187579 6,34.0031611 L6,13.9968389 C6,9.57844267 9.59305362,6 14.0095579,6 L20,6 L20,10 L14.0095579,10 C11.8003523,10 10,11.7894457 10,13.9968389 L10,34.0031611 C10,36.2058797 11.7951402,38 14.0095579,38 L20,38 Z" id="Combined-Shape" fill="#838C93"></path>
<path d="M17,13.9968389 L17,13.9968389 L17,34.0031611 C17,36.2058797 18.7951402,38 21.0095579,38 L34.9904421,38 C37.1996477,38 39,36.2105543 39,34.0031611 L39,13.9968389 C39,11.7941203 37.2048598,10 34.9904421,10 L21.0095579,10 C18.8003523,10 17,11.7894457 17,13.9968389 L17,13.9968389 Z M13,13.9968389 L13,13.9968389 C13,9.57844267 16.5930536,6 21.0095579,6 L34.9904421,6 C39.4102614,6 43,9.58124214 43,13.9968389 L43,34.0031611 C43,38.4215573 39.4069464,42 34.9904421,42 L21.0095579,42 C16.5897386,42 13,38.4187579 13,34.0031611 L13,13.9968389 Z" id="Rectangle-9-Copy" fill="#838C93"></path>
<path d="M21,20 C21,18.8954305 21.9019504,18 23.0085302,18 L30.9914698,18 C32.1007504,18 33,18.8877296 33,20 C33,21.1045695 32.0980496,22 30.9914698,22 L23.0085302,22 C21.8992496,22 21,21.1122704 21,20 L21,20 Z M21,28 C21,26.8954305 21.8970601,26 23.0058587,26 L32.9941413,26 C34.1019465,26 35,26.8877296 35,28 C35,29.1045695 34.1029399,30 32.9941413,30 L23.0058587,30 C21.8980535,30 21,29.1122704 21,28 L21,28 Z" id="Combined-Shape" fill="#838C93"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

19
src/demo/assets/icon_plus_gray.svg Executable file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>42210529-4C6D-4F83-84EE-8D4B31E3E6E4</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="account_list" transform="translate(-228.000000, -1179.000000)">
<g id="Group-8" transform="translate(196.000000, 1146.000000)">
<g id="Group-6" transform="translate(26.000000, 27.000000)">
<g id="icon_plus_gray">
<rect id="Rectangle-8" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
<path d="M26,22 L26,7.99970728 C26,6.88989258 25.1045695,6 24,6 C22.8877296,6 22,6.89529944 22,7.99970728 L22,22 L7.99970728,22 C6.88989258,22 6,22.8954305 6,24 C6,25.1122704 6.89529944,26 7.99970728,26 L22,26 L22,40.0002927 C22,41.1101074 22.8954305,42 24,42 C25.1122704,42 26,41.1047006 26,40.0002927 L26,26 L40.0002927,26 C41.1101074,26 42,25.1045695 42,24 C42,22.8877296 41.1047006,22 40.0002927,22 L26,22 Z" id="Combined-Shape" fill="#838C93"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

27
src/demo/assets/icon_qr.svg Executable file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="45px" height="44px" viewBox="0 0 45 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>B9050DEF-177C-4A23-9A65-8E04545F301A</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wallet" transform="translate(-446.000000, -738.000000)">
<g id="Group-9" transform="translate(0.000000, 556.000000)">
<g id="Group-13-Copy" transform="translate(0.000000, 153.000000)">
<g id="Group-14" transform="translate(444.000000, 27.000000)">
<g id="Group-6">
<g id="icon_qr">
<rect id="Rectangle-8" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
<path d="M6,8.0085302 L6,8.0085302 L6,15.9914698 C6,17.0980496 6.8992496,18 8.0085302,18 L15.9914698,18 C17.0980496,18 18,17.1007504 18,15.9914698 L18,8.0085302 C18,6.90195036 17.1007504,6 15.9914698,6 L8.0085302,6 C6.90195036,6 6,6.8992496 6,8.0085302 L6,8.0085302 L6,8.0085302 Z M2,8.0085302 L2,8.0085302 C2,4.69021078 4.69270946,2 8.0085302,2 L15.9914698,2 C19.3097892,2 22,4.69270946 22,8.0085302 L22,15.9914698 C22,19.3097892 19.3072905,22 15.9914698,22 L8.0085302,22 C4.69021078,22 2,19.3072905 2,15.9914698 L2,8.0085302 L2,8.0085302 Z" id="Rectangle-545" fill="#838C93"></path>
<path d="M6,32.0085302 L6,32.0085302 L6,39.9914698 C6,41.0980496 6.8992496,42 8.0085302,42 L15.9914698,42 C17.0980496,42 18,41.1007504 18,39.9914698 L18,32.0085302 C18,30.9019504 17.1007504,30 15.9914698,30 L8.0085302,30 C6.90195036,30 6,30.8992496 6,32.0085302 L6,32.0085302 L6,32.0085302 Z M2,32.0085302 L2,32.0085302 C2,28.6902108 4.69270946,26 8.0085302,26 L15.9914698,26 C19.3097892,26 22,28.6927095 22,32.0085302 L22,39.9914698 C22,43.3097892 19.3072905,46 15.9914698,46 L8.0085302,46 C4.69021078,46 2,43.3072905 2,39.9914698 L2,32.0085302 L2,32.0085302 Z" id="Rectangle-545-Copy-2" fill="#838C93"></path>
<path d="M31,8.0085302 L31,8.0085302 L31,15.9914698 C31,17.0980496 31.8992496,18 33.0085302,18 L40.9914698,18 C42.0980496,18 43,17.1007504 43,15.9914698 L43,8.0085302 C43,6.90195036 42.1007504,6 40.9914698,6 L33.0085302,6 C31.9019504,6 31,6.8992496 31,8.0085302 L31,8.0085302 L31,8.0085302 Z M27,8.0085302 L27,8.0085302 C27,4.69021078 29.6927095,2 33.0085302,2 L40.9914698,2 C44.3097892,2 47,4.69270946 47,8.0085302 L47,15.9914698 C47,19.3097892 44.3072905,22 40.9914698,22 L33.0085302,22 C29.6902108,22 27,19.3072905 27,15.9914698 L27,8.0085302 L27,8.0085302 Z" id="Rectangle-545-Copy" fill="#838C93"></path>
<path d="M9,36 C9,34.3431458 10.3465171,33 12,33 C13.6568542,33 15,34.3465171 15,36 C15,37.6568542 13.6534829,39 12,39 C10.3431458,39 9,37.6534829 9,36 L9,36 Z M9,12 C9,10.3431458 10.3465171,9 12,9 C13.6568542,9 15,10.3465171 15,12 C15,13.6568542 13.6534829,15 12,15 C10.3431458,15 9,13.6534829 9,12 L9,12 Z M34,12 C34,10.3431458 35.3465171,9 37,9 C38.6568542,9 40,10.3465171 40,12 C40,13.6568542 38.6534829,15 37,15 C35.3431458,15 34,13.6534829 34,12 L34,12 Z" id="Combined-Shape" fill="#838C93"></path>
<path d="M28,30.0016655 C28,28.3438914 29.3390201,27 31.0016655,27 L32.9983345,27 C34.6561086,27 36,28.3390201 36,30.0016655 L36,31.9983345 C36,33.6561086 34.6609799,35 32.9983345,35 L31.0016655,35 C29.3438914,35 28,33.6609799 28,31.9983345 L28,30.0016655 L28,30.0016655 Z M38,30.0016655 C38,28.3438914 39.3390201,27 41.0016655,27 L42.9983345,27 C44.6561086,27 46,28.3390201 46,30.0016655 L46,31.9983345 C46,33.6561086 44.6609799,35 42.9983345,35 L41.0016655,35 C39.3438914,35 38,33.6609799 38,31.9983345 L38,30.0016655 L38,30.0016655 Z M38,40.0016655 C38,38.3438914 39.3390201,37 41.0016655,37 L42.9983345,37 C44.6561086,37 46,38.3390201 46,40.0016655 L46,41.9983345 C46,43.6561086 44.6609799,45 42.9983345,45 L41.0016655,45 C39.3438914,45 38,43.6609799 38,41.9983345 L38,40.0016655 L38,40.0016655 Z" id="Combined-Shape" fill="#838C93"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

23
src/demo/assets/icon_remove_red.svg Executable file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="4px" viewBox="0 0 32 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>297D570B-23B1-494E-BB18-84762D4DC8A8</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wallet" transform="translate(-40.000000, -1125.000000)">
<g id="Group-5" transform="translate(0.000000, 837.000000)">
<g id="Group-2">
<g id="Group-12" transform="translate(0.000000, 89.000000)">
<g id="Group-3-Copy" transform="translate(0.000000, 134.000000)">
<g id="icon_remove_red" transform="translate(32.000000, 43.000000)">
<polygon id="Shape" points="0 0 48 0 48 48 0 48"></polygon>
<rect id="Rectangle-71-Copy" fill="#CA5555" transform="translate(24.000000, 24.000000) rotate(-90.000000) translate(-24.000000, -24.000000) " x="22" y="8" width="4" height="32" rx="2"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

23
src/demo/assets/icon_remove_red_copy_2.svg Executable file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="4px" viewBox="0 0 32 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>8DC24052-2545-4A96-B55E-8914937590A0</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wallet" transform="translate(-40.000000, -991.000000)">
<g id="Group-5" transform="translate(0.000000, 837.000000)">
<g id="Group-2">
<g id="Group-12" transform="translate(0.000000, 89.000000)">
<g id="Group-3">
<g id="icon_remove_red-copy-2" transform="translate(32.000000, 43.000000)">
<polygon id="Shape" points="0 0 48 0 48 48 0 48"></polygon>
<rect id="Rectangle-71-Copy" fill="#CA5555" transform="translate(24.000000, 24.000000) rotate(-90.000000) translate(-24.000000, -24.000000) " x="22" y="8" width="4" height="32" rx="2"></rect>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

21
src/demo/assets/icon_send_white.svg Normal file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="31px" height="24px" viewBox="0 0 31 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>0C9F00B6-70A4-44D3-A47F-E3CF68B0CD07</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="send_money" transform="translate(-215.000000, -1217.000000)">
<g id="Group-4" transform="translate(0.000000, 224.000000)">
<g id="button" transform="translate(0.000000, 954.000000)">
<g id="Group-6" transform="translate(205.000000, 26.000000)">
<g id="icon_send_white">
<rect id="Rectangle-204" x="0" y="0" width="48" height="49.7142857"></rect>
<path d="M34.0722375,23.0011697 C34.0492532,23.000392 34.0261704,23 34.0029953,23 L11.9970047,23 C10.8949789,23 10,23.8954305 10,25 C10,26.1122704 10.8940894,27 11.9970047,27 L34.0029953,27 C34.026174,27 34.049261,26.9996039 34.0722501,26.998818 L27.582314,33.4887538 C26.8027525,34.2683153 26.8047379,35.5326599 27.5857864,36.3137085 C28.3722803,37.1002024 29.6316103,37.0963117 30.4107412,36.3171809 L40.3171809,26.4107412 C40.7063844,26.0215376 40.9007795,25.511497 40.9006752,25.0010924 L40.9025525,24.996721 C40.9019251,24.4869397 40.706173,23.9782509 40.3171809,23.5892588 L30.4107412,13.6828191 C29.6311796,12.9032576 28.366835,12.9052429 27.5857864,13.6862915 C26.7992925,14.4727854 26.8031832,15.7321154 27.582314,16.5112462 L34.0722372,23.0011694 L34.0722375,23.0011697 Z M35.9987353,24.9276675 C35.9995761,24.9516673 36,24.9757804 36,25 C36,25.0242203 35.9995697,25.04834 35.9987163,25.0723519 L36.0710678,25 L35.9987357,24.9276679 L35.9987353,24.9276675 Z" id="Combined-Shape" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

21
src/demo/assets/icon_update.svg Executable file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32px" height="33px" viewBox="0 0 32 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>90C78E43-D923-44E6-B173-23211FF0F3EE</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="wallet" transform="translate(-643.000000, -153.000000)">
<g id="top" transform="translate(0.000000, 112.000000)">
<g id="icon_update" transform="translate(636.000000, 32.000000)">
<polygon id="Shape" opacity="0.9" points="0 0 48 0 48 48 0 48"></polygon>
<path d="M32.0145414,34.4561751 C32.7933495,33.6773671 34.0523951,33.6737154 34.8388605,34.4601809 L34.8388605,34.4601809 C35.6198809,35.2412012 35.6267753,36.5006237 34.8392152,37.288176 C34.8392152,37.288176 34.7986772,37.3287865 34.7875643,37.3398013 C28.5351447,43.537012 18.4427841,43.5199486 12.2114617,37.2886262 C5.96304878,31.0402132 5.9630291,20.9095539 12.2114178,14.6611652 C18.4598064,8.41277657 28.5904658,8.41279625 34.8388787,14.6612092 L34.8429419,14.6652724 C35.6229592,15.4452896 35.6275684,16.7053382 34.8410745,17.4918321 L34.8410745,17.4918321 C34.0600259,18.2728807 32.7932266,18.2724114 32.0145148,17.4936995 L32.0104516,17.4896363 C27.3241419,12.8033266 19.7261474,12.8033118 15.0398559,17.4896033 C10.3535644,22.1758948 10.3535791,29.7738894 15.0398888,34.4601991 C19.7261986,39.1465088 27.3241931,39.1465235 32.0104846,34.460232 L32.0145414,34.4561751 L32.0145414,34.4561751 Z" id="Oval-50" fill="#19232B"></path>
<g id="Group-3" transform="translate(32.717514, 15.368272) rotate(-630.000000) translate(-32.717514, -15.368272) translate(26.717514, 9.368272)" fill="#19232B">
<rect id="Rectangle-97" x="6.57252031e-14" y="-3.55271368e-15" width="12" height="4" rx="2"></rect>
<rect id="Rectangle-97-Copy" transform="translate(10.000000, 6.000000) rotate(-90.000000) translate(-10.000000, -6.000000) " x="4" y="4" width="12" height="4" rx="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

21
src/demo/assets/icon_wallet_gray.svg Executable file
View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="45px" height="38px" viewBox="0 0 45 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>DBCF64F6-B748-4B64-B554-3D0857F51174</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.3">
<g id="account_list" transform="translate(-65.000000, -475.000000)">
<g id="Group-2" transform="translate(32.000000, 419.000000)">
<g id="Group-3">
<g id="icon_wallet_gray" transform="translate(32.000000, 51.000000)">
<polygon id="Shape" points="0 0 48 0 48 48 0 48"></polygon>
<path d="M1,17.0000405 C1,10.3722535 6.36553915,5 12.9929714,5 L31.0070286,5 C37.6322699,5 43,10.3666376 43,16.9951204 L43,18.5255676 L43,30.9960833 C43,37.6255787 37.6348953,43 31.0070286,43 L12.9929714,43 C6.37055996,43 1,37.621366 1,30.9999595 L1,17.0000405 Z M39,17 L43,17 L43,30 L39,30 L39,17 Z M5,17.0000405 L5,30.9999595 C5,35.4110973 8.57857521,39 12.9929714,39 L31.0070286,39 C35.4256661,39 39,35.4165244 39,30.9960833 L39,18.5255676 L39,16.9951204 C39,12.5740709 35.4214248,9 31.0070286,9 L12.9929714,9 C8.57433394,9 5,12.5817401 5,17.0000405 Z" id="Combined-Shape" fill="#838C93"></path>
<path d="M24,23.009763 L24,23.009763 L24,24.990237 C24,27.2122004 25.7885255,29 27.9947834,29 L38.0052166,29 C40.2082844,29 42,27.204768 42,24.990237 L42,23.009763 C42,20.7877996 40.2114745,19 38.0052166,19 L27.9947834,19 C25.7917156,19 24,20.795232 24,23.009763 L24,23.009763 Z M20,23.009763 L20,23.009763 C20,18.5900509 23.5786122,15 27.9947834,15 L38.0052166,15 C42.4253814,15 46,18.5834287 46,23.009763 L46,24.990237 C46,29.4099491 42.4213878,33 38.0052166,33 L27.9947834,33 C23.5746186,33 20,29.4165713 20,24.990237 L20,23.009763 Z" id="Rectangle-10" fill="#838C93"></path>
<path d="M30,27 C31.6568542,27 33,25.6568542 33,24 C33,22.3431458 31.6568542,21 30,21 C28.3431458,21 27,22.3431458 27,24 C27,25.6568542 28.3431458,27 30,27 Z" id="Oval-11" fill="#838C93"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

8
src/demo/assets/icon_wallet_gray_copy.svg Executable file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>A1499791-D8E6-4A80-A17E-BCDEB5D42469</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 497 B

22
src/demo/assets/scan_blue.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>867DB9B7-0BE6-4F8E-870A-D023CF1F954F</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="send_money" transform="translate(-509.000000, -418.000000)">
<g id="Group-4" transform="translate(0.000000, 224.000000)">
<g id="scan" transform="translate(503.000000, 188.000000)">
<g id="scan_blue">
<rect id="Rectangle-8" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
<path d="M6.00000208,8.00292984 C6.00000069,8.0019534 6,8.00097679 6,8 C6,7.44868797 6.22347575,6.94947668 6.58521387,6.58770008 C6.94562638,6.22372317 7.44484439,6 8,6 C8.00097677,6 8.00195337,6.0000007 8.00292981,6.0000021 C8.00390529,6.00000069 8.00488189,6 8.00585866,6 L17.9941413,6 C19.1019465,6 20,6.88772964 20,8 C20,9.1045695 19.1029399,10 17.9941413,10 L10,10 L10,17.9941413 C10,19.1019465 9.11227036,20 8,20 C6.8954305,20 6,19.1029399 6,17.9941413 L6,8.00585866 C6,8.00488189 6.00000069,8.00390529 6.00000207,8.00292885 L6.00000208,8.00292984 Z" id="Combined-Shape" fill="#7099E6"></path>
<path d="M39.9970702,6.00000208 C39.9980466,6.00000069 39.9990232,6 40,6 C40.551312,6 41.0505233,6.22347575 41.4122999,6.58521387 C41.7762768,6.94562638 42,7.44484439 42,8 C42,8.00097677 41.9999993,8.00195337 41.9999979,8.00292981 C41.9999993,8.00390529 42,8.00488189 42,8.00585866 L42,17.9941413 C42,19.1019465 41.1122704,20 40,20 C38.8954305,20 38,19.1029399 38,17.9941413 L38,10 L30.0058587,10 C28.8980535,10 28,9.11227036 28,8 C28,6.8954305 28.8970601,6 30.0058587,6 L39.9941413,6 C39.9951181,6 39.9960947,6.00000069 39.9970711,6.00000207 L39.9970702,6.00000208 Z" id="Combined-Shape" fill="#7099E6"></path>
<path d="M8.00292984,41.9999979 C8.0019534,41.9999993 8.00097679,42 8,42 C7.44868797,42 6.94947668,41.7765243 6.58770008,41.4147861 C6.22372317,41.0543736 6,40.5551556 6,40 C6,39.9990232 6.0000007,39.9980466 6.0000021,39.9970702 C6.00000069,39.9960947 6,39.9951181 6,39.9941413 L6,30.0058587 C6,28.8980535 6.88772964,28 8,28 C9.1045695,28 10,28.8970601 10,30.0058587 L10,38 L17.9941413,38 C19.1019465,38 20,38.8877296 20,40 C20,41.1045695 19.1029399,42 17.9941413,42 L8.00585866,42 C8.00488189,42 8.00390529,41.9999993 8.00292885,41.9999979 L8.00292984,41.9999979 Z" id="Combined-Shape" fill="#7099E6"></path>
<path d="M41.9999979,39.9970702 C41.9999993,39.9980466 42,39.9990232 42,40 C42,40.551312 41.7765243,41.0505233 41.4147861,41.4122999 C41.0543736,41.7762768 40.5551556,42 40,42 C39.9990232,42 39.9980466,41.9999993 39.9970702,41.9999979 C39.9960947,41.9999993 39.9951181,42 39.9941413,42 L30.0058587,42 C28.8980535,42 28,41.1122704 28,40 C28,38.8954305 28.8970601,38 30.0058587,38 L38,38 L38,30.0058587 C38,28.8980535 38.8877296,28 40,28 C41.1045695,28 42,28.8970601 42,30.0058587 L42,39.9941413 C42,39.9951181 41.9999993,39.9960947 41.9999979,39.9970711 L41.9999979,39.9970702 Z" id="Combined-Shape" fill="#7099E6"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

53
src/demo/send_money.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,300,400" rel="stylesheet" type="text/css">
</head>
<body>
<div class="top-nav">
<a href="#" class="nav-back"></a>
<h2>Send funds</h2>
</div>
<div class="send-screen">
<div class="send-from">
<span>From</span>
<p>Wallet name – 0.32039 ETH</p>
</div>
<div class="send-to">
To
<div class="scan-qr"><span class="image-qr"></span>Scan QR </div>
</div>
<div class="send-amount">Amount</div>
<div class="send-currency">ETH
<div class="arrow-down"></div></div>
<div class="send-fee">Fee
<div class="fee-amount">0.00043247823 <span>ETH</span></div></div>
<div class="send-range"><div class="bar"></div><div class="range-control"></div></div>
<div class="range-min-text">Cheaper</div>
<div class="range-max-text">Faster</div>
<div class="note">This is the most amount of money you might be used to process this transaction. Your transaction will be mined probably within 30 seconds</div>
</div>
<div class="button-send"><span class="image-send"></span>Send 0.2343 ETH</div>
</body>
</html>

804
src/demo/style.css Normal file
View File

@ -0,0 +1,804 @@
body {
position: relative;
display: block;
overflow-x: hidden;
margin: 0 auto;
padding: 0;
max-width: 768px;
min-width: 320px;
height: 100%;
font-weight: 400;
font-size: 14px;
font-family: 'Roboto', sans-serif;
line-height: 1.6;
background-color: #eef2f5;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
h1 {
font-weight: 500;
}
h2 {
margin: 0;
padding: 0;
font-weight: 400;
font-size: 32px;
}
.wallets {
background-color: #eef2f5;
text-align: center;
padding-bottom: 30%;
}
.wallets h2 {
padding: 16px;
}
.wallet {
position: relative;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
margin: 32px;
}
.wallets .wallet {
margin: 10% 32px 0;
}
.wallet-image {
position: absolute;
top: 55px;
left: 40px;
width: 48px;
height: 48px;
background-image: url(assets/icon_wallet_gray.svg);
background-repeat: no-repeat;
}
.wallet-name {
margin-left: 80px;
padding-top: 32px;
padding-left: 32px;
text-align: left;
font-size: 32px;
}
.wallet-hash {
margin-left: 80px;
padding-left: 32px;
color: #838c93;
text-align: left;
font-size: 16px;
opacity: .8;
}
.wallet-currencies {
display: block;
margin-top: 60px;
width: 100%;
text-align: center;
}
.currency-usd, .currency-rub {
display: inline-block;
width: 32%;
vertical-align: top;
font-size: 32px;
}
span.currency {
display: block;
color: #838c93;
letter-spacing: 2px;
font-size: 28px;
}
.wallet a {
display: block;
margin-top: 20px;
padding: 32px;
border-top: 1px solid rgba(0,0,0,0.1);
color: #838c93;
text-decoration: none;
font-size: 32px;
}
.pagination {
margin-top: 8px;
}
.wallets .pagination {
padding-bottom: 20%;
}
.dot {
display: inline-block;
margin-right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #838c93;
color: #838c93;
opacity: 0.3;
}
.dot.active {
opacity: 1;
}
.wallet-actions {
display: inline-block;
width: 100%;
max-width: 768px;
font-size: 32px;
position: fixed;
bottom: 0;
text-align: center;
background-color: #eef2f5;
}
.wallet-actions a {
display: block;
margin: 20px auto;
width: 90%;
color: #838c93;
text-decoration: none;
}
.add-wallet {
display: inline-block;
margin-right: 10px;
width: 48px;
height: 48px;
background-image: url(assets/icon_plus_gray.svg);
background-repeat: no-repeat;
vertical-align: middle;
}
.create-wallet {
padding: 32px 0;
border-top: 1px solid rgba(0,0,0,0.1);
}
.top-nav {
padding: 32px;
background-color: #eef2f5;
vertical-align: middle;
text-align: center;
}
.nav-back {
display: inline-block;
float: left;
width: 48px;
height: 48px;
background-image: url(assets/icon_back_copy.svg);
background-position: left;
background-repeat: no-repeat;
vertical-align: middle;
}
.nav-update {
display: inline-block;
float: right;
width: 48px;
height: 48px;
background-image: url(assets/icon_update.svg);
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
}
.wallet-amount {
padding: 26px 32px;
text-align: left;
font-weight: 300;
font-size: 48px;
}
.wallet-amount span {
float: right;
color: #939ba1;
}
.wallet-controls {
border-top: 1px solid rgba(0,0,0,0.1);
color: #838c93;
white-space: nowrap;
cursor: pointer;
}
.wallet-controls .button {
display: inline-block;
padding: 26px 0;
width: 49%;
text-align: center;
font-size: 32px;
}
.wallet-controls .button:first-child {
border-right: 1px solid rgba(0,0,0,0.1);
}
.wallet-screen {
background-color: #eef2f5;
text-align: center;
}
.wallet-address {
margin: 32px 0;
background-color: #fff;
box-shadow: -2px 2px 4px rgba(0,0,0,0.2);
color: #838c93;
text-align: left;
font-size: 28px;
}
.wallet-address > span {
display: block;
padding: 26px 0 0 32px;
font-weight: 500;
}
.wallet-address > p {
margin: 12px 0 31px;
padding: 0;
padding-left: 32px;
color: #000;
font-weight: 400;
font-size: 28px;
}
.button-copy {
display: inline-block;
margin-right: 10px;
width: 48px;
height: 48px;
background-image: url(assets/icon_copy_gray.svg);
background-repeat: no-repeat;
vertical-align: middle;
}
.button-qr {
display: inline-block;
margin-right: 16px;
width: 48px;
height: 48px;
background-image: url(assets/icon_qr.svg);
background-repeat: no-repeat;
vertical-align: middle;
}
.wallet-transactions {
margin: 24px 0;
background-color: #fff;
color: #838c93;
text-align: left;
font-size: 28px;
}
.wallet-transactions > span {
display: block;
padding: 32px 0 0 32px;
font-weight: 500;
margin-bottom: 12px;
}
.transaction-action {
display: inline-block;
margin-left: 32px;
width: 10%;
}
.action-remove {
width: 48px;
height: 48px;
background-image: url(assets/icon_remove_red.svg);
background-position: center;
background-repeat: no-repeat;
}
.action-add {
width: 48px;
height: 48px;
background-image: url(assets/icon_add_green.svg);
background-position: center;
background-repeat: no-repeat;
}
.transaction-details {
position: relative;
display: inline-block;
margin-top: 32px;
padding-bottom: 32px;
width: 84%;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.transaction-name {
color: #000;
font-size: 28px;
}
.transaction-date {
font-size: 24px;
}
.transaction-amount {
position: absolute;
top: 24px;
right: 32px;
vertical-align: middle;
font-size: 32px;
}
.transaction-amount .red {
color: #c95656;
}
.transaction-amount .green {
color: #5fc48d;
}
.button-full {
padding: 26px 0;
width: 100%;
border-top: 1px solid rgba(0,0,0,0.1);
text-align: center;
}
.send-screen {
padding-left: 32px;
background-color: #fff;
color: #838c93;
text-align: left;
font-size: 32px;
}
.send-from {
border-bottom: 2px solid rgba(0,0,0,0.1);
line-height: 1.2;
padding-top: 40px;
}
.send-from span {
font-size: 24px;
opacity: .7;
}
.send-from p {
margin: 0;
padding: 0 0 12px;
color: #000;
}
.send-to {
margin-top: 38px;
padding: 32px 0 6px;
border-bottom: 2px solid rgba(0,0,0,0.1);
}
.scan-qr {
float: right;
margin-right: 32px;
color: #7099e6;
}
.image-qr {
display: inline-block;
margin-right: 16px;
width: 48px;
height: 48px;
background-image: url(assets/scan_blue.svg);
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
}
.send-amount {
display: inline-block;
margin-top: 38px;
padding: 32px 0 4px;
width: 35%;
border-bottom: 2px solid rgba(0,0,0,0.1);
}
.send-currency {
position: relative;
display: inline-block;
margin-top: 38px;
margin-left: 32px;
padding: 32px 0 4px;
width: 35%;
border-bottom: 2px solid rgba(0,0,0,0.1);
}
.send-fee {
margin-top: 42px;
}
.fee-amount {
float: right;
margin-right: 32px;
color: #000;
}
.fee-amount span {
color: #838c93;
}
.arrow-down {
position: absolute;
top: 60%;
left: 77%;
width: 0;
height: 0;
border-top: 10px solid #838c93;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.send-range {
position: relative;
margin-top: 32px;
margin-right: 32px;
height: 4px;
background-color: rgba(0,0,0,0.1);
}
.bar {
width: 25%;
height: 4px;
background-color: #7099e6;
}
.range-control {
position: absolute;
top: -10px;
left: 25%;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #7099e6;
color: #7099e6;
cursor: pointer;
}
.range-min-text {
float: left;
margin-top: 26px;
font-size: 28px;
opacity: .7;
}
.range-max-text {
float: right;
margin-top: 26px;
margin-right: 32px;
font-size: 28px;
opacity: .7;
}
.note {
margin-top: 95px;
padding-right: 32px;
text-align: center;
font-size: 28px;
padding-bottom: 50%;
}
.button-send {
padding: 28px 0;
width: 100%;
background-color: #7099e6;
box-shadow: -4px 2px 6px rgba(0,0,0,0.2);
color: #fff;
text-align: center;
font-size: 32px;
position: fixed;
bottom: 0;
max-width: 768px;
}
.image-send {
display: inline-block;
margin-right: 16px;
width: 48px;
height: 48px;
background-image: url(assets/icon_send_white.svg);
background-position: center;
background-repeat: no-repeat;
vertical-align: top;
}
@media only screen and (min-width: 768px) {
.wallets .wallet {
margin: 20% 32px 0;
}
}
@media only screen and (min-width: 1000px) {
.wallets .wallet {
margin: 2% 32px 0;
}
}
@media only screen and (max-width: 650px) {
.top-nav {
padding: 18px;
}
h2 {
font-size: 16px;
}
div {
font-size: 16px;
}
.send-from {
padding-top: 20px;
}
.send-from span {
font-size: 12px;
line-height: 1.6;
}
.send-to, .send-amount, .send-currency {
margin-top: 0;
}
.image-qr {
width: 24px;
height: 24px;
background-size: cover;
}
.send-fee {
margin-top: 24px;
}
.range-min-text, .range-max-text {
font-size: 14px;
margin-top: 12px;
margin-right: 16px;
}
.note {
margin-top: 65px;
font-size: 14px;
padding-right: 16px;
}
.button-send {
margin-top: 18px;
font-size: 16px;
padding: 16px 0;
vertical-align: middle;
}
.image-send {
width: 16px;
height: 16px;
vertical-align: baseline;
background-size: contain;
}
.wallet-image {
background-size: contain;
width: 24px;
height: 24px;
left: 15px;
top: 45px;
}
.wallet-name {
font-size: 16px;
margin-left: 20px;
}
.wallet-hash {
font-size: 12px;
margin-left: 20px;
}
.wallets .wallet {
margin: 30% 16px 0;
}
.wallet {
margin: 16px 32px 0 16px;
}
.wallets h2 {
padding: 16px;
}
.wallet-currencies {
margin-top: 15px;
}
span.currency {
font-size: 14px;
}
.pagination .dot {
width: 5px;
height: 5px;
margin-right: 5px;
}
.currency-usd, .currency-rub {
font-size: 16px;
}
.wallet a {
padding: 16px;
font-size: 16px;
}
.wallet-actions {
margin-top: 0;
font-size: 16px;
}
.add-wallet {
width: 16px;
height: 16px;
background-size: contain;
margin-right: 8px;
margin-top: -6px;
vertical-align: middle;
background-position: center;
}
.wallet-actions a {
margin: 16px auto;
}
.create-wallet {
padding: 16px 0;
}
.wallet-amount {
font-size: 24px;
padding: 16px;
}
.wallet-controls .button {
padding: 16px 0;
font-size: 16px;
}
.wallet-address {
margin: 16px 0;
}
.wallet-address > span {
padding: 13px 0 0 16px;
font-size: 14px;
}
.wallet-address > p {
margin: 0;
padding-left: 16px;
font-size: 14px;
margin-bottom: 16px;
}
.button-full {
padding: 16px 0;
}
.wallet-transactions {
margin: 0;
padding-bottom: 24px;
}
.wallet-transactions > span {
margin: 0;
padding: 16px 0 0 16px;
font-size: 14px;
}
.transaction-action {
margin-left: 16px;
width: 5%;
}
.action-remove, .action-add {
width: 24px;
height: 24px;
margin-top: -30px;
background-size: contain;
}
.transaction-details {
margin-top: 16px;
margin-left: 24px;
width: 80%;
padding-bottom: 16px;
}
.transaction-name{
font-size: 14px;
}
.transaction-date {
font-size: 12px;
}
.transaction-amount {
font-size: 16px;
top: 8px;
right: 0;
margin-right: 16px;
}
.nav-back {
width: 16px;
height: 16px;
background-size: contain;
background-position: 0;
margin-left: 0;
margin-top: 4px;
vertical-align: middle;
}
.arrow-down {
top: 65%;
border-top: 5px solid #838c93;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.nav-update {
width: 16px;
height: 16px;
background-image: url(assets/icon_update.svg);
background-position: 0;
background-repeat: no-repeat;
vertical-align: middle;
background-size: contain;
margin-top: 4px;
}
.button-copy, .button-qr {
width: 16px;
height: 16px;
background-size: contain;
vertical-align: baseline;
}
.send-range, .bar {
height: 2px;
margin-right: 16px;
}
.range-control {
width: 12px;
height: 12px;
top: -5px;
}
.scan-qr {
margin-right: 16px;
}
.send-from, .send-to, .send-amount, .send-currency {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.send-screen {
padding-left: 16px;
}
.fee-amount {
margin-right: 16px;
}
}

79
src/demo/wallet.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,300,400" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wallet-screen">
<div class="top-nav">
<a href="#" class="nav-back"></a>
<a href="#" class="nav-update"></a>
<h2>Wallet name</h2>
</div>
<div class="wallet">
<div class="wallet-amount">
435.43434 <span>BTC</span>
</div>
<div class="wallet-controls">
<div class="button">Send</div>
<div class="button">Receive</div>
</div>
</div>
<div class="pagination">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="wallet-address">
<span>Address</span>
<p>0x332ce8091A76bb710BDec4a40663b66</p>
<div class="wallet-controls">
<div class="button"><span class="button-copy"></span>Copy</div>
<div class="button"><span class="button-qr"></span>Show QR</div>
</div>
</div>
<div class="wallet-transactions">
<span>Transactions</span>
<div class="transaction">
<div class="transaction-action"><div class="action-remove"></div></div>
<div class="transaction-details">
<div class="transaction-name">Amazon inc.</div>
<div class="transaction-date">Today at 19:43</div>
<div class="transaction-amount"><span class="red">-0.9843 BTC</span></div>
</div>
</div>
<div class="transaction">
<div class="transaction-action"><div class="action-remove"></div></div>
<div class="transaction-details">
<div class="transaction-name">App store</div>
<div class="transaction-date">Today at 16:43</div>
<div class="transaction-amount"><span class="red">-1.3984 BTC</span></div>
</div>
</div>
<div class="transaction">
<div class="transaction-action"><div class="action-add"></div></div>
<div class="transaction-details">
<div class="transaction-name">CVS Pharmacy</div>
<div class="transaction-date">1 Mar at 19:43</div>
<div class="transaction-amount"><span class="green">+9.3843 BTC</span></div>
</div>
</div>
</div>
</div>
</body>
</html>

67
src/demo/wallet_state.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:500,300,400" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wallet-screen">
<div class="top-nav">
<a href="#" class="nav-back"></a>
<a href="#" class="nav-update"></a>
<h2>Wallet name</h2>
</div>
<div class="wallet">
<div class="wallet-amount">
435.43434 <span>BTC</span>
</div>
<div class="wallet-controls">
<div class="button">Send</div>
<div class="button">Receive</div>
</div>
</div>
<div class="wallet-address">
<span>Address</span>
<p>0x332ce8091A76bb710BDec4a40663b66</p>
<div class="wallet-controls">
<div class="button"><span class="button-copy"></span>Copy</div>
<div class="button"><span class="button-qr"></span>Show QR</div>
<div class="button-full">Backup or restore your account</div>
</div>
</div>
<div class="wallet-transactions">
<span>Transactions</span>
<div class="transaction">
<div class="transaction-action"><div class="action-remove"></div></div>
<div class="transaction-details">
<div class="transaction-name">Amazon inc.</div>
<div class="transaction-date">Today at 19:43</div>
<div class="transaction-amount"><span class="red">-0.9843 BTC</span></div>
</div>
</div>
<div class="transaction">
<div class="transaction-action"><div class="action-remove"></div></div>
<div class="transaction-details">
<div class="transaction-name">App store</div>
<div class="transaction-date">Today at 16:43</div>
<div class="transaction-amount"><span class="red">-1.3984 BTC</span></div>
</div>
</div>
</div>
</div>
</body>
</html>