implementing asset conversion UI
This commit is contained in:
sairaj mote
parent
089a283936
commit
abd6cd78c7
132
css/main.css
132
css/main.css
@ -198,7 +198,6 @@ details[open] > summary .down-arrow {
|
||||
|
||||
sm-input,
|
||||
sm-textarea {
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0.3rem;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
@ -443,6 +442,78 @@ ol li::before {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-top-1-5 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-bottom-1-5 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.padding-0-3 {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.padding-0-5 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.padding-inline-0-5 {
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-inline-1 {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
.padding-block-0-5 {
|
||||
padding-block: 0.5rem;
|
||||
}
|
||||
|
||||
.padding-block-1 {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
|
||||
.border-radius-0-3 {
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.border-radius-0-5 {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.font-0-9 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
@ -508,18 +579,6 @@ ol li::before {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
padding: 0.6rem;
|
||||
border-radius: 0.8rem;
|
||||
@ -629,22 +688,22 @@ ol li::before {
|
||||
|
||||
#sign_in {
|
||||
display: grid;
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding-bottom: 0;
|
||||
padding: 0;
|
||||
justify-items: center;
|
||||
}
|
||||
#sign_in .illustration {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #4d77ff;
|
||||
border-radius: 1rem;
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
#sign_in section {
|
||||
width: min(24rem, 100%);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: 2rem;
|
||||
padding: max(1.5rem, 2vw);
|
||||
border-radius: 0.5rem;
|
||||
margin-top: -2.3rem;
|
||||
margin-top: -1.6rem;
|
||||
}
|
||||
|
||||
#sign_up .h2 {
|
||||
@ -816,12 +875,9 @@ ol li::before {
|
||||
}
|
||||
|
||||
#home {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
#home > * {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
#user,
|
||||
@ -831,6 +887,24 @@ ol li::before {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.swap-input {
|
||||
display: grid;
|
||||
grid-template-columns: 6rem 1fr;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
.swap-input sm-input {
|
||||
--background: transparent;
|
||||
}
|
||||
.swap-input sm-select {
|
||||
margin: 0.2rem 0;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.swap-input sm-select[open] {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#wallet_cards_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -843,7 +917,6 @@ ol li::before {
|
||||
overflow: hidden;
|
||||
border-radius: 0.8rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.1rem rgba(var(--text-color), 0.1);
|
||||
}
|
||||
.balance-card > * {
|
||||
padding: 1rem;
|
||||
@ -853,22 +926,21 @@ ol li::before {
|
||||
border-top: thin solid rgba(var(--text-color), 0.2);
|
||||
}
|
||||
.balance-card .asset-icon {
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
padding: 0.6rem;
|
||||
border-radius: 1.1rem;
|
||||
fill: rgba(0, 0, 0, 0.8);
|
||||
margin-right: 0.8rem;
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
.balance-card.rupee-card .asset-icon {
|
||||
background-color: hsl(141deg, 100%, 70%);
|
||||
.balance-card .asset-icon--rupee {
|
||||
background-color: var(--green);
|
||||
}
|
||||
.balance-card.flo-card .asset-icon {
|
||||
.balance-card .asset-icon--flo {
|
||||
fill: white;
|
||||
background-color: #4d77ff;
|
||||
}
|
||||
.balance-card.btc-card .asset-icon {
|
||||
.balance-card .asset-icon--btc {
|
||||
background-color: rgb(255, 173, 8);
|
||||
}
|
||||
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
123
css/main.scss
123
css/main.scss
@ -179,7 +179,6 @@ details[open] {
|
||||
|
||||
sm-input,
|
||||
sm-textarea {
|
||||
font-size: 0.9rem;
|
||||
--border-radius: 0.3rem;
|
||||
--background-color: rgba(var(--foreground-color), 1);
|
||||
button {
|
||||
@ -407,7 +406,61 @@ ol {
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.margin-top-1-5 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.margin-bottom-0-5 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.margin-bottom-1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.margin-bottom-1-5 {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.margin-bottom-2 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.padding-0-3 {
|
||||
padding: 0.3rem;
|
||||
}
|
||||
.padding-0-5 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.padding-1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.padding-inline-0-5 {
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
.padding-inline-1 {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
.padding-block-0-5 {
|
||||
padding-block: 0.5rem;
|
||||
}
|
||||
.padding-block-1 {
|
||||
padding-block: 1rem;
|
||||
}
|
||||
.border-radius-0-3 {
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.border-radius-0-5 {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.font-0-9 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
@ -477,16 +530,6 @@ ol {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.margin-right-0-3 {
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
padding: 0.6rem;
|
||||
@ -585,21 +628,21 @@ ol {
|
||||
}
|
||||
#sign_in {
|
||||
display: grid;
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
padding-bottom: 0;
|
||||
padding: 0;
|
||||
justify-items: center;
|
||||
.illustration {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background-color: #4d77ff;
|
||||
border-radius: 1rem;
|
||||
width: min(24rem, 100%);
|
||||
}
|
||||
section {
|
||||
width: min(24rem, 100%);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
padding: 2rem;
|
||||
padding: max(1.5rem, 2vw);
|
||||
border-radius: 0.5rem;
|
||||
margin-top: -2.3rem;
|
||||
margin-top: -1.6rem;
|
||||
}
|
||||
}
|
||||
#sign_up {
|
||||
@ -763,12 +806,9 @@ ol {
|
||||
overflow-y: auto;
|
||||
}
|
||||
#home {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
& > * {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
#user,
|
||||
#cashier {
|
||||
@ -776,6 +816,23 @@ ol {
|
||||
padding-bottom: 1rem;
|
||||
align-content: flex-start;
|
||||
}
|
||||
.swap-input {
|
||||
display: grid;
|
||||
grid-template-columns: 6rem 1fr;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.2rem;
|
||||
sm-input {
|
||||
--background: transparent;
|
||||
}
|
||||
sm-select {
|
||||
margin: 0.2rem 0;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
&[open] {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
#wallet_cards_wrapper {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
@ -787,7 +844,6 @@ ol {
|
||||
overflow: hidden;
|
||||
border-radius: 0.8rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
border: solid 0.1rem rgba(var(--text-color), 0.1);
|
||||
& > * {
|
||||
padding: 1rem;
|
||||
gap: 1.5rem;
|
||||
@ -797,29 +853,22 @@ ol {
|
||||
border-top: thin solid rgba(var(--text-color), 0.2);
|
||||
}
|
||||
.asset-icon {
|
||||
position: relative;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
padding: 0.6rem;
|
||||
border-radius: 1.1rem;
|
||||
fill: rgba(0, 0, 0, 0.8);
|
||||
margin-right: 0.8rem;
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
&.rupee-card {
|
||||
.asset-icon {
|
||||
background-color: hsla(141, 100%, 70%);
|
||||
}
|
||||
.asset-icon--rupee {
|
||||
background-color: var(--green);
|
||||
}
|
||||
&.flo-card {
|
||||
.asset-icon {
|
||||
fill: white;
|
||||
background-color: #4d77ff;
|
||||
}
|
||||
.asset-icon--flo {
|
||||
fill: white;
|
||||
background-color: #4d77ff;
|
||||
}
|
||||
&.btc-card {
|
||||
.asset-icon {
|
||||
background-color: rgba(255, 173, 8);
|
||||
}
|
||||
.asset-icon--btc {
|
||||
background-color: rgba(255, 173, 8);
|
||||
}
|
||||
}
|
||||
#rupee_balance,
|
||||
|
||||
207
index.html
207
index.html
@ -80,45 +80,81 @@
|
||||
<article id="sign_in" class="inner-page hide">
|
||||
<svg class="illustration" width="673" height="417" viewBox="0 0 673 417" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M223 79C185.997 79 156 108.997 156 146V213C156 250.003 185.997 280 223 280H229C266.003 280 296 250.003 296 213V146C296 108.997 266.003 79 229 79H223ZM226 102C201.147 102 181 122.147 181 147V208C181 232.853 201.147 253 226 253C250.853 253 271 232.853 271 208V147C271 122.147 250.853 102 226 102Z"
|
||||
fill="#64E899" />
|
||||
<rect x="124" y="170" width="204" height="204" rx="32" fill="#93FFBE" />
|
||||
<circle cx="225.5" cy="309.5" r="37.5" fill="#64E899" />
|
||||
<circle cx="226" cy="323" r="14" fill="#35C66F" />
|
||||
<path
|
||||
d="M273.73 127.883H223.571C222.05 127.883 220.816 129.117 220.816 130.638C220.816 132.16 222.05 133.394 223.571 133.394H273.73C275.252 133.394 276.485 132.16 276.485 130.638C276.485 129.117 275.252 127.883 273.73 127.883Z"
|
||||
fill="#F9BB8F" />
|
||||
<path
|
||||
d="M240.145 126.702H222.26C220.086 126.702 218.323 128.464 218.323 130.638C218.323 132.812 220.086 134.574 222.26 134.574H240.145C242.319 134.574 244.081 132.812 244.081 130.638C244.081 128.464 242.319 126.702 240.145 126.702Z"
|
||||
fill="#FFE39A" />
|
||||
<path
|
||||
d="M221.668 120.551L222.355 118.044C222.963 115.821 225.178 114.44 227.442 114.873C229.398 115.246 230.862 116.884 231.015 118.87L231.214 121.462C231.432 124.289 229.197 126.702 226.362 126.702C223.152 126.702 220.821 123.648 221.668 120.551Z"
|
||||
fill="#F9BB8F" />
|
||||
<path
|
||||
d="M319.342 157.621L314.759 163.049C314.188 163.725 313.875 164.581 313.875 165.466C313.875 167.535 315.552 169.213 317.622 169.213H323C325.761 169.213 328 166.974 328 164.213V149.335C328 147.27 326.326 145.596 324.261 145.596C322.196 145.596 320.522 147.27 320.522 149.335V154.395C320.522 155.576 320.104 156.718 319.342 157.621Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M235.682 163.563L236.587 156.659C236.719 155.654 237.581 154.69 238.504 154.271C241.476 152.919 265.073 151.709 268.136 152.84L269.614 153.385C269.763 153.44 269.916 153.484 270.072 153.517L286.871 157.011L317.149 160.644C318.704 160.831 320.035 161.849 320.622 163.301C321.766 166.127 319.686 169.213 316.637 169.213H240.64C237.62 169.213 235.289 166.557 235.682 163.563Z"
|
||||
fill="#EC8973" />
|
||||
<path
|
||||
d="M283.87 161.112L277.984 156.651C277.281 156.118 276.424 155.83 275.542 155.83C273.31 155.83 271.5 157.639 271.5 159.872L271.5 164.213C271.5 166.974 273.739 169.213 276.5 169.213L292.884 169.213C294.84 169.213 296.427 167.627 296.427 165.67C296.427 163.714 294.84 162.128 292.884 162.128L286.89 162.128C285.8 162.128 284.739 161.771 283.87 161.112Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M249.275 135.191L230.842 152.991C229.756 154.04 229.202 155.523 229.334 157.026L230.002 164.625C230.216 167.049 232.142 168.967 234.567 169.17L241.949 169.787C243.549 169.921 245.115 169.278 246.161 168.059L257.338 155.026C259.176 152.882 262.424 152.685 264.508 154.591L271.97 161.418C272.482 161.886 273.086 162.242 273.743 162.465L276.04 163.242C277.549 163.753 279.214 163.247 280.184 161.984C281.192 160.67 281.211 158.848 280.229 157.514L264.274 135.824C263.332 134.544 261.837 133.787 260.247 133.787H252.748C251.452 133.787 250.207 134.29 249.275 135.191Z"
|
||||
fill="#FFB9AA" />
|
||||
<ellipse cx="231.618" cy="109.383" rx="10.8015" ry="10.234" fill="#F9BB8F" />
|
||||
<path
|
||||
d="M239.13 105.289L235.134 106.929C233.258 107.699 232.033 109.526 232.033 111.554V113.919C232.033 115.735 231.048 117.409 229.461 118.29L225.719 120.369C222.833 121.971 219.214 120.388 218.433 117.181L215.708 105.991C215.272 104.202 215.855 102.317 217.226 101.087L221.468 97.2791C222.386 96.4555 223.575 96 224.808 96H237.297C238.936 96 240.463 96.8322 241.352 98.2097C242.987 100.745 241.921 104.143 239.13 105.289Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M226.171 163.347L216.593 133.679C216.365 132.973 216.297 132.225 216.394 131.489L216.933 127.405C217.255 124.962 219.31 123.118 221.774 123.061L232.009 122.824C233.592 122.788 235.099 123.503 236.071 124.753L245.86 137.34C246.058 137.595 246.231 137.869 246.377 138.157L253.752 152.767C254.683 154.612 254.383 156.841 252.996 158.374L244.791 167.443C243.582 168.78 241.747 169.362 239.989 168.968L229.834 166.689C228.107 166.302 226.714 165.03 226.171 163.347Z"
|
||||
fill="#FFE39A" />
|
||||
<path d="M51 374H622" stroke="black" />
|
||||
<circle cx="418.5" cy="84.5" r="40.5" fill="#FFD2D2" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M487.5 142C488.446 142 489.385 141.97 490.317 141.912C503.976 141.059 519.314 142 533 142V142C552.33 142 568 126.33 568 107C568 87.67 552.33 72 533 72V72C527.947 72 522.903 70.0693 519.377 66.4497C511.294 58.1527 499.999 53 487.5 53C463.091 53 443.272 72.6522 443.003 96.9972C443.003 96.9988 443.002 97 443 97V97C429.745 97 419 107.745 419 121C419 134.255 429.745 145 443 145V145C455.923 145 471.766 141.1 484.663 141.911C485.601 141.97 486.547 142 487.5 142Z"
|
||||
fill="#EEEEFF" />
|
||||
<g clip-path="url(#clip0_2_41)">
|
||||
<rect width="673" height="417" fill="#4D77FF" />
|
||||
<g filter="url(#filter0_d_2_41)">
|
||||
<rect x="219.881" y="-158" width="622" height="150" transform="rotate(21.4614 219.881 -158)"
|
||||
fill="#4D77FF" />
|
||||
</g>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M223 79C185.997 79 156 108.997 156 146V213C156 250.003 185.997 280 223 280H229C266.003 280 296 250.003 296 213V146C296 108.997 266.003 79 229 79H223ZM226 102C201.147 102 181 122.147 181 147V208C181 232.853 201.147 253 226 253C250.853 253 271 232.853 271 208V147C271 122.147 250.853 102 226 102Z"
|
||||
fill="#64E899" />
|
||||
<rect x="124" y="170" width="204" height="204" rx="32" fill="#93FFBE" />
|
||||
<circle cx="225.5" cy="279.5" r="37.5" fill="#64E899" />
|
||||
<path
|
||||
d="M273.73 128.883H223.571C222.05 128.883 220.816 130.117 220.816 131.638C220.816 133.16 222.05 134.394 223.571 134.394H273.73C275.252 134.394 276.485 133.16 276.485 131.638C276.485 130.117 275.252 128.883 273.73 128.883Z"
|
||||
fill="#F9BB8F" />
|
||||
<path
|
||||
d="M240.145 127.702H222.26C220.086 127.702 218.323 129.464 218.323 131.638C218.323 133.812 220.086 135.574 222.26 135.574H240.145C242.318 135.574 244.081 133.812 244.081 131.638C244.081 129.464 242.318 127.702 240.145 127.702Z"
|
||||
fill="#FFE39A" />
|
||||
<path
|
||||
d="M210.212 169.048L222.376 131.038C222.84 129.588 222.041 128.038 220.591 127.574C219.142 127.11 217.591 127.909 217.127 129.358L204.964 167.369C204.5 168.818 205.299 170.369 206.748 170.833C208.197 171.297 209.748 170.498 210.212 169.048Z"
|
||||
fill="#F9BB8F" />
|
||||
<path
|
||||
d="M219.949 142.497L223.9 130.148C224.563 128.078 223.422 125.862 221.351 125.2C219.281 124.537 217.065 125.678 216.403 127.749L212.451 140.097C211.788 142.168 212.93 144.383 215 145.046C217.071 145.708 219.286 144.567 219.949 142.497Z"
|
||||
fill="#FFE39A" />
|
||||
<path
|
||||
d="M221.668 121.551L222.354 119.044C222.963 116.821 225.178 115.44 227.442 115.873C229.398 116.246 230.862 117.884 231.015 119.87L231.214 122.462C231.432 125.289 229.197 127.702 226.362 127.702C223.152 127.702 220.821 124.648 221.668 121.551Z"
|
||||
fill="#F9BB8F" />
|
||||
<path
|
||||
d="M319.342 158.621L314.759 164.049C314.188 164.725 313.875 165.581 313.875 166.466C313.875 168.535 315.552 170.213 317.622 170.213H323C325.761 170.213 328 167.974 328 165.213V150.335C328 148.27 326.326 146.596 324.261 146.596C322.196 146.596 320.522 148.27 320.522 150.335V155.395C320.522 156.576 320.104 157.718 319.342 158.621Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M235.682 164.563L236.587 157.659C236.719 156.654 237.581 155.69 238.504 155.271C241.476 153.919 265.073 152.709 268.136 153.84L269.614 154.385C269.763 154.44 269.916 154.484 270.072 154.517L286.871 158.011L317.149 161.644C318.704 161.831 320.035 162.849 320.622 164.301C321.766 167.127 319.686 170.213 316.637 170.213H240.639C237.62 170.213 235.289 167.557 235.682 164.563Z"
|
||||
fill="#EC8973" />
|
||||
<path
|
||||
d="M283.87 162.112L277.983 157.651C277.281 157.118 276.423 156.83 275.542 156.83C273.309 156.83 271.5 158.639 271.5 160.872L271.5 165.213C271.5 167.974 273.738 170.213 276.5 170.213L292.884 170.213C294.84 170.213 296.426 168.627 296.426 166.67C296.426 164.714 294.84 163.128 292.884 163.128L286.89 163.128C285.8 163.128 284.739 162.771 283.87 162.112Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M249.275 136.191L230.841 153.991C229.756 155.04 229.202 156.523 229.334 158.026L230.002 165.625C230.215 168.049 232.142 169.967 234.567 170.17L243.255 170.896C244.07 170.964 244.889 170.832 245.641 170.51L249.973 168.654C250.964 168.229 251.792 167.496 252.332 166.562L257.584 157.488C259.184 154.724 262.93 154.148 265.286 156.303L271.97 162.418C272.482 162.886 273.085 163.242 273.742 163.465L276.04 164.242C277.548 164.753 279.214 164.247 280.184 162.984C281.192 161.67 281.211 159.848 280.229 158.514L264.274 136.824C263.332 135.544 261.837 134.787 260.247 134.787H252.748C251.452 134.787 250.207 135.29 249.275 136.191Z"
|
||||
fill="#FFB9AA" />
|
||||
<ellipse cx="231.618" cy="110.383" rx="10.8015" ry="10.234" fill="#F9BB8F" />
|
||||
<path
|
||||
d="M239.129 106.289L235.134 107.929C233.258 108.699 232.033 110.526 232.033 112.554V114.919C232.033 116.735 231.048 118.409 229.461 119.29L225.719 121.369C222.833 122.971 219.214 121.388 218.433 118.181L215.708 106.991C215.272 105.202 215.855 103.317 217.226 102.087L221.468 98.2791C222.386 97.4555 223.575 97 224.808 97H237.297C238.936 97 240.463 97.8322 241.352 99.2097C242.987 101.745 241.92 105.143 239.129 106.289Z"
|
||||
fill="black" />
|
||||
<path
|
||||
d="M226.17 164.347L216.593 134.679C216.365 133.973 216.297 133.225 216.394 132.489L216.932 128.405C217.255 125.962 219.31 124.118 221.774 124.061L232.009 123.824C233.592 123.788 235.099 124.503 236.071 125.753L245.86 138.34C246.058 138.595 246.231 138.869 246.377 139.157L253.752 153.767C254.683 155.612 254.383 157.841 252.996 159.374L244.791 168.443C243.582 169.78 241.747 170.362 239.989 169.968L229.834 167.689C228.107 167.302 226.714 166.03 226.17 164.347Z"
|
||||
fill="#FFE39A" />
|
||||
<path d="M51 374H622" stroke="black" />
|
||||
<circle cx="418.5" cy="84.5" r="40.5" fill="#FFD2D2" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd"
|
||||
d="M487.5 142C488.446 142 489.385 141.97 490.317 141.912C503.976 141.059 519.314 142 533 142C552.33 142 568 126.33 568 107C568 87.67 552.33 72 533 72C527.947 72 522.903 70.0693 519.377 66.4497C511.294 58.1527 499.999 53 487.5 53C463.091 53 443.272 72.6522 443.003 96.9972C443.003 96.9988 443.002 97 443 97C429.745 97 419 107.745 419 121C419 134.255 429.745 145 443 145C455.923 145 471.766 141.1 484.663 141.911C485.601 141.97 486.547 142 487.5 142Z"
|
||||
fill="#EEEEFF" />
|
||||
<circle cx="96.9505" cy="365.951" r="128" transform="rotate(-59.8781 96.9505 365.951)"
|
||||
fill="url(#paint0_linear_2_41)" />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2_41" x="149" y="-170" width="665.754" height="399.174"
|
||||
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha" />
|
||||
<feOffset dy="4" />
|
||||
<feGaussianBlur stdDeviation="8" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2_41" />
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2_41" result="shape" />
|
||||
</filter>
|
||||
<linearGradient id="paint0_linear_2_41" x1="96.9505" y1="237.95" x2="96.9505" y2="493.95"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="white" stop-opacity="0.2" />
|
||||
<stop offset="1" stop-color="white" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_2_41">
|
||||
<rect width="673" height="417" fill="white" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
<section>
|
||||
<h1 class="h2">Sign In</h1>
|
||||
@ -188,7 +224,7 @@
|
||||
<theme-toggle style="margin-left: -1rem;"></theme-toggle>
|
||||
</header>
|
||||
<section id="home" class="inner-page hide">
|
||||
<div id="wallet_section" class="grid gap-1">
|
||||
<div id="wallet_section" class="grid gap-1 margin-bottom-2">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>My crypto holdings</h4>
|
||||
<div class="multi-state-button">
|
||||
@ -200,7 +236,7 @@
|
||||
<div class="grid">
|
||||
<div class="flex align-center space-between">
|
||||
<div class="flex align-center">
|
||||
<svg class="icon asset-icon" xmlns="http://www.w3.org/2000/svg"
|
||||
<svg class="icon asset-icon asset-icon--rupee" xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<g>
|
||||
@ -222,7 +258,7 @@
|
||||
<sm-copy class="user-flo-id" clip-text></sm-copy>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="grid user-element">
|
||||
<div class="actions-wrapper">
|
||||
<button class="wallet-action" onclick="showTokenTransfer('send')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
@ -330,8 +366,8 @@
|
||||
<div class="grid">
|
||||
<div class="flex align-center space-between">
|
||||
<div class="flex align-center">
|
||||
<svg class="icon flo-icon asset-icon" width="64" height="64" viewBox="0 0 64 64"
|
||||
fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg class="icon asset-icon asset-icon--flo" width="64" height="64"
|
||||
viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-outside-1_16_6" maskUnits="userSpaceOnUse" x="3" y="3"
|
||||
width="58" height="58">
|
||||
<rect fill="white" x="3" y="3" width="58" height="58" />
|
||||
@ -358,7 +394,7 @@
|
||||
<div class="grid">
|
||||
<div class="flex align-center space-between">
|
||||
<div class="flex align-center">
|
||||
<svg class="icon asset-icon" xmlns="http://www.w3.org/2000/svg"
|
||||
<svg class="icon asset-icon asset-icon--btc" xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<g>
|
||||
@ -381,7 +417,7 @@
|
||||
<sm-copy class="user-btc-id" clip-text></sm-copy>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions-wrapper">
|
||||
<div class="actions-wrapper user-element">
|
||||
<button class="wallet-action" onclick="openPopup('send_btc_popup')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
@ -411,6 +447,83 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hide">
|
||||
<h4 class="margin-bottom-1">Convert assets</h4>
|
||||
<div class="card user-element" style="width: min(26rem, 100%);">
|
||||
<sm-form>
|
||||
<div class="grid gap-0-3 w-100 ">
|
||||
<h5>From</h5>
|
||||
<div class="align-start swap-input">
|
||||
<sm-select id="from_asset_selector">
|
||||
<sm-option value="rupee" selected>Rupee</sm-option>
|
||||
<sm-option value="btc">BTC</sm-option>
|
||||
</sm-select>
|
||||
<sm-input id="from_amount" type="number" placeholder="Amount" min="50" step="0.01"
|
||||
error-text="minimum amount is ₹50" required>
|
||||
<div slot="icon" id="from_asset_icon" class="flex">
|
||||
<svg class="icon asset-icon" xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</sm-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-0-3 w-100 ">
|
||||
<h5>To</h5>
|
||||
<div class="align-start swap-input w-100">
|
||||
<sm-select id="to_asset_selector">
|
||||
<sm-option value="rupee">Rupee</sm-option>
|
||||
<sm-option value="btc" selected>BTC</sm-option>
|
||||
</sm-select>
|
||||
<sm-input id="to_amount" type="number" placeholder="Amount" class="w-100"
|
||||
min="0.00000001" step="0.00000001" required>
|
||||
<div slot="icon" id="to_asset_icon" class="flex">
|
||||
<svg class="icon asset-icon" xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</sm-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid border-radius-0-5 font-0-9">
|
||||
<div class="flex align-center space-between padding-0-5">
|
||||
<span>Rate</span>
|
||||
<span id="conversion_rate">0.00</span>
|
||||
</div>
|
||||
<div class="flex align-center space-between padding-0-5">
|
||||
<span>Fees</span>
|
||||
<span id="conversion_fees">0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button button--primary cta" type="submit">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z" />
|
||||
</svg>
|
||||
Convert
|
||||
</button>
|
||||
</sm-form>
|
||||
</div>
|
||||
</div>
|
||||
<section id="cashier" class=" grid gap-1 hide admin-element">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>Requests</h4>
|
||||
@ -668,7 +781,7 @@
|
||||
Add UPI ID
|
||||
</button>
|
||||
</div>
|
||||
<div class="admin-element grid gap-1">
|
||||
<div class="admin-element grid gap-1 card">
|
||||
<div class="grid gap-0-5">
|
||||
<h5>My UPI ID</h5>
|
||||
<sm-copy id="my_upi_id"></sm-copy>
|
||||
|
||||
@ -488,9 +488,9 @@ customElements.define('sm-input',
|
||||
}
|
||||
|
||||
set value(val) {
|
||||
if (val === this.input.value) return;
|
||||
this.input.value = val;
|
||||
this.checkInput();
|
||||
this.fireEvent();
|
||||
}
|
||||
|
||||
get placeholder() {
|
||||
@ -2701,7 +2701,7 @@ smSelect.innerHTML = `
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
--min-width: 100%;
|
||||
--min-width: max-content;
|
||||
}
|
||||
:host([disabled]) .select{
|
||||
opacity: 0.6;
|
||||
@ -2742,7 +2742,7 @@ smSelect.innerHTML = `
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: 'heading heading' '. .';
|
||||
padding: var(--padding,0.6rem 0.8rem);
|
||||
background: rgba(var(--text-color,(17,17,17)), 0.06);
|
||||
background: var(--background, rgba(var(--text-color,(17,17,17)), 0.06));
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
@ -2782,7 +2782,7 @@ smSelect.innerHTML = `
|
||||
-webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
|
||||
box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
|
||||
}
|
||||
.rotate{
|
||||
:host([open]) .toggle-icon{
|
||||
-webkit-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg)
|
||||
@ -2808,7 +2808,7 @@ smSelect.innerHTML = `
|
||||
<div class="select">
|
||||
<div class="selection">
|
||||
<div class="selected-option-text"></div>
|
||||
<svg class="icon toggle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
||||
<svg class="icon toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
||||
</div>
|
||||
<div part="options" class="options hide">
|
||||
<slot></slot>
|
||||
@ -2830,9 +2830,11 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
this.handleOptionSelection = this.handleOptionSelection.bind(this)
|
||||
this.handleKeydown = this.handleKeydown.bind(this)
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this)
|
||||
this.selectOption = this.selectOption.bind(this)
|
||||
|
||||
this.availableOptions
|
||||
this.previousOption
|
||||
this._value = undefined;
|
||||
this.isOpen = false;
|
||||
this.label = ''
|
||||
this.slideDown = [{
|
||||
@ -2860,7 +2862,6 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
}
|
||||
|
||||
this.optionList = this.shadowRoot.querySelector('.options')
|
||||
this.chevron = this.shadowRoot.querySelector('.toggle')
|
||||
this.selection = this.shadowRoot.querySelector('.selection')
|
||||
this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text')
|
||||
}
|
||||
@ -2874,12 +2875,7 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val)
|
||||
if (selectedOption) {
|
||||
this.setAttribute('value', val)
|
||||
this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
|
||||
if (this.previousOption) {
|
||||
this.previousOption.classList.remove('check-selected')
|
||||
}
|
||||
selectedOption.classList.add('check-selected')
|
||||
this.previousOption = selectedOption
|
||||
this.selectOption(selectedOption)
|
||||
} else {
|
||||
console.warn(`There is no option with ${val} as value`)
|
||||
}
|
||||
@ -2887,19 +2883,25 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
|
||||
reset(fire = true) {
|
||||
if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
|
||||
const firstElement = this.availableOptions[0];
|
||||
if (this.previousOption) {
|
||||
this.previousOption.classList.remove('check-selected')
|
||||
}
|
||||
firstElement.classList.add('check-selected')
|
||||
this.value = firstElement.getAttribute('value')
|
||||
this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}`
|
||||
this.previousOption = firstElement;
|
||||
const selectedOption = this.availableOptions.find(option => option.hasAttribute('selected')) || this.availableOptions[0];
|
||||
this.value = selectedOption.getAttribute('value')
|
||||
if (fire) {
|
||||
this.fireEvent()
|
||||
}
|
||||
}
|
||||
}
|
||||
selectOption(selectedOption) {
|
||||
if (this.previousOption) {
|
||||
this.previousOption.classList.remove('check-selected')
|
||||
this.previousOption.removeAttribute('selected')
|
||||
}
|
||||
if (this.previousOption !== selectedOption) {
|
||||
selectedOption.classList.add('check-selected')
|
||||
selectedOption.setAttribute('selected', '')
|
||||
this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
|
||||
this.previousOption = selectedOption
|
||||
}
|
||||
}
|
||||
|
||||
focusIn() {
|
||||
this.selection.focus()
|
||||
@ -2908,11 +2910,11 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
open() {
|
||||
this.optionList.classList.remove('hide')
|
||||
this.optionList.animate(this.slideDown, this.animationOptions)
|
||||
this.chevron.classList.add('rotate')
|
||||
this.setAttribute('open', '')
|
||||
this.isOpen = true
|
||||
}
|
||||
collapse() {
|
||||
this.chevron.classList.remove('rotate')
|
||||
this.removeAttribute('open')
|
||||
this.optionList.animate(this.slideUp, this.animationOptions)
|
||||
.onfinish = () => {
|
||||
this.optionList.classList.add('hide')
|
||||
@ -3004,6 +3006,11 @@ customElements.define('sm-select', class extends HTMLElement {
|
||||
let slot = this.shadowRoot.querySelector('slot')
|
||||
slot.addEventListener('slotchange', e => {
|
||||
this.availableOptions = slot.assignedElements()
|
||||
this.availableOptions.forEach(elem => {
|
||||
if (elem.hasAttribute('selected')) {
|
||||
this._value = elem.value;
|
||||
}
|
||||
});
|
||||
this.reset(false)
|
||||
});
|
||||
this.addEventListener('click', this.handleClick)
|
||||
@ -3100,426 +3107,4 @@ customElements.define('sm-option', class extends HTMLElement {
|
||||
this.setAttribute('role', 'option')
|
||||
this.setAttribute('tabindex', '0')
|
||||
}
|
||||
})
|
||||
|
||||
const smCarousel = document.createElement('template')
|
||||
smCarousel.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
--arrow-left: 1rem;
|
||||
--arrow-right: 1rem;
|
||||
--arrow-top: auto;
|
||||
--arrow-bottom: auto;
|
||||
--nav-icon-fill: rgba(var(--background-color, (255,255,255)), 1);
|
||||
--nav-background-color: rgba(var(--text-color, (17,17,17)), 1);
|
||||
--nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
|
||||
--indicator-top: auto;
|
||||
--indicator-bottom: -1.5rem;
|
||||
--indicator-height: 0.4rem;
|
||||
--indicator-width: 0.4rem;
|
||||
--indicator-border-radius: 0.4rem;
|
||||
--indicators-gap: 0.5rem;
|
||||
--active-indicator-color: var(--accent-color, teal);
|
||||
}
|
||||
.carousel__button{
|
||||
position: absolute;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
top: var(--arrow-top);
|
||||
bottom: var(--arrow-bottom);
|
||||
border: none;
|
||||
background: var(--nav-background-color);
|
||||
-webkit-box-shadow: var(--nav-box-shadow);
|
||||
box-shadow: var(--nav-box-shadow);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
z-index: 1;
|
||||
border-radius: 3rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
button:focus{
|
||||
outline: none;
|
||||
}
|
||||
button:focus-visible{
|
||||
outline: rgba(var(--text-color, (17,17,17)), 1) 0.1rem solid;
|
||||
}
|
||||
.carousel__button:active{
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.carousel__button--left{
|
||||
left: var(--arrow-left);
|
||||
}
|
||||
.carousel__button--right{
|
||||
right: var(--arrow-right);
|
||||
}
|
||||
.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
fill: var(--nav-icon-fill);
|
||||
}
|
||||
.hide{
|
||||
display: none !important;
|
||||
}
|
||||
:host([indicator]) .carousel-container{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.carousel-container{
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.carousel{
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
overflow: auto hidden;
|
||||
-ms-scroll-snap-type: x mandatory;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.indicators{
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
padding: 0.5rem 0;
|
||||
top: var(--indicator-top);
|
||||
bottom: var(--indicator-bottom);
|
||||
gap: var(--indicators-gap);
|
||||
width: 100%;
|
||||
}
|
||||
.indicator{
|
||||
position: relative;
|
||||
height: var(--indicator-height);
|
||||
width: var(--indicator-width);
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: var(--indicator-border-radius);
|
||||
-webkit-transition: 0.2s;
|
||||
-o-transition: 0.2s;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.indicator.active{
|
||||
background: var(--active-indicator-color);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
slot::slotted(*){
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
:host([align-items="start"]) slot::slotted(*){
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
:host([align-items="center"]) slot::slotted(*){
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
:host([align-items="end"]) slot::slotted(*){
|
||||
scroll-snap-align: end;
|
||||
}
|
||||
@media (hover: hover){
|
||||
.carousel{
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel__button{
|
||||
opacity: 0.8;
|
||||
}
|
||||
:host(:hover) .carousel__button{
|
||||
opacity: 1;
|
||||
}
|
||||
.left,.right{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media (hover: none){
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
.carousel{
|
||||
overflow: auto none;
|
||||
}
|
||||
.carousel__button{
|
||||
display: none;
|
||||
}
|
||||
.left,.right{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="carousel-container">
|
||||
<button class="carousel__button carousel__button--left hide">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>
|
||||
</button>
|
||||
<div part="carousel" class="carousel">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<button class="carousel__button carousel__button--right hide">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>
|
||||
</button>
|
||||
<div class="indicators"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
customElements.define('sm-carousel', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.attachShadow({
|
||||
mode: 'open'
|
||||
}).append(smCarousel.content.cloneNode(true))
|
||||
|
||||
this.isAutoPlaying = false
|
||||
this.autoPlayInterval = 5000
|
||||
this.autoPlayTimeout
|
||||
this.initialTimeout
|
||||
this.activeSlideNum = 0
|
||||
this.carouselItems
|
||||
this.indicators
|
||||
this.showIndicator = false
|
||||
this.carousel = this.shadowRoot.querySelector('.carousel')
|
||||
this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
|
||||
this.carouselSlot = this.shadowRoot.querySelector('slot')
|
||||
this.navButtonRight = this.shadowRoot.querySelector('.carousel__button--right')
|
||||
this.navButtonLeft = this.shadowRoot.querySelector('.carousel__button--left')
|
||||
this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
|
||||
|
||||
this.scrollLeft = this.scrollLeft.bind(this)
|
||||
this.scrollRight = this.scrollRight.bind(this)
|
||||
this.handleIndicatorClick = this.handleIndicatorClick.bind(this)
|
||||
this.showSlide = this.showSlide.bind(this)
|
||||
this.nextSlide = this.nextSlide.bind(this)
|
||||
this.autoPlay = this.autoPlay.bind(this)
|
||||
this.startAutoPlay = this.startAutoPlay.bind(this)
|
||||
this.stopAutoPlay = this.stopAutoPlay.bind(this)
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['indicator', 'autoplay', 'interval']
|
||||
}
|
||||
|
||||
scrollLeft() {
|
||||
this.carousel.scrollBy({
|
||||
left: -this.scrollDistance,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
scrollRight() {
|
||||
this.carousel.scrollBy({
|
||||
left: this.scrollDistance,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
showSlide(slideNum) {
|
||||
this.carousel.scrollTo({
|
||||
left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft),
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
nextSlide() {
|
||||
if (!this.carouselItems) return
|
||||
let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
|
||||
this.showSlide(showSlideNo)
|
||||
}
|
||||
|
||||
autoPlay() {
|
||||
this.nextSlide()
|
||||
if (this.isAutoPlaying) {
|
||||
this.autoPlayTimeout = setTimeout(() => {
|
||||
this.autoPlay()
|
||||
}, this.autoPlayInterval);
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay() {
|
||||
this.setAttribute('autoplay', '')
|
||||
}
|
||||
|
||||
stopAutoPlay() {
|
||||
this.removeAttribute('autoplay')
|
||||
}
|
||||
|
||||
createIndicator(index) {
|
||||
let indicator = document.createElement('div')
|
||||
indicator.classList.add('indicator')
|
||||
indicator.dataset.rank = index
|
||||
return indicator
|
||||
}
|
||||
|
||||
handleIndicatorClick(e) {
|
||||
if (e.target.closest('.indicator')) {
|
||||
const slideNum = parseInt(e.target.closest('.indicator').dataset.rank)
|
||||
if (this.activeSlideNum !== slideNum) {
|
||||
this.showSlide(slideNum)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyDown(e) {
|
||||
if (e.code === 'ArrowLeft')
|
||||
this.scrollRight()
|
||||
else if (e.code === 'ArrowRight')
|
||||
this.scrollRight()
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
let frag = document.createDocumentFragment();
|
||||
|
||||
this.carouselSlot.addEventListener('slotchange', e => {
|
||||
this.carouselItems = this.carouselSlot.assignedElements()
|
||||
this.carouselItems.forEach(item => allElementsObserver.observe(item))
|
||||
if (this.carouselItems.length > 0) {
|
||||
firstOptionObserver.observe(this.carouselItems[0])
|
||||
lastOptionObserver.observe(this.carouselItems[this.carouselItems.length - 1])
|
||||
}
|
||||
else {
|
||||
navButtonLeft.classList.add('hide')
|
||||
navButtonRight.classList.add('hide')
|
||||
firstOptionObserver.disconnect()
|
||||
lastOptionObserver.disconnect()
|
||||
}
|
||||
if (this.showIndicator) {
|
||||
this.indicatorsContainer.innerHTML = ``
|
||||
this.carouselItems.forEach((item, index) => {
|
||||
frag.append(
|
||||
this.createIndicator(index)
|
||||
)
|
||||
item.dataset.rank = index
|
||||
})
|
||||
this.indicatorsContainer.append(frag)
|
||||
this.indicators = this.indicatorsContainer.children
|
||||
}
|
||||
})
|
||||
|
||||
const ioOptions = {
|
||||
threshold: 0.9,
|
||||
root: this
|
||||
}
|
||||
let activeElements = new Set()
|
||||
const allElementsObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (this.showIndicator) {
|
||||
const activeRank = parseInt(entry.target.dataset.rank)
|
||||
if (entry.isIntersecting) {
|
||||
this.indicators[activeRank].classList.add('active')
|
||||
this.activeSlideNum = activeRank
|
||||
activeElements.add(activeRank)
|
||||
} else {
|
||||
this.indicators[activeRank].classList.remove('active')
|
||||
activeElements.delete(activeRank)
|
||||
}
|
||||
}
|
||||
})
|
||||
if (activeElements.size === this.carouselItems.length) {
|
||||
this.indicatorsContainer.classList.add('hide')
|
||||
} else {
|
||||
this.indicatorsContainer.classList.remove('hide')
|
||||
}
|
||||
}, ioOptions)
|
||||
|
||||
|
||||
const firstOptionObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
this.navButtonLeft.classList.add('hide')
|
||||
}
|
||||
else {
|
||||
this.navButtonLeft.classList.remove('hide')
|
||||
}
|
||||
})
|
||||
},
|
||||
ioOptions
|
||||
)
|
||||
const lastOptionObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
this.navButtonRight.classList.add('hide')
|
||||
}
|
||||
else {
|
||||
this.navButtonRight.classList.remove('hide')
|
||||
}
|
||||
})
|
||||
},
|
||||
ioOptions
|
||||
)
|
||||
|
||||
const resObs = new ResizeObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.contentBoxSize) {
|
||||
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
|
||||
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
|
||||
|
||||
this.scrollDistance = contentBoxSize.inlineSize * 0.6
|
||||
} else {
|
||||
this.scrollDistance = entry.contentRect.width * 0.6
|
||||
}
|
||||
})
|
||||
})
|
||||
resObs.observe(this)
|
||||
|
||||
this.addEventListener('keydown', this.handleKeyDown)
|
||||
|
||||
this.navButtonRight.addEventListener('click', this.scrollRight)
|
||||
this.navButtonLeft.addEventListener('click', this.scrollLeft)
|
||||
this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick)
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (oldValue !== newValue) {
|
||||
if (name === 'indicator') {
|
||||
this.showIndicator = this.hasAttribute('indicator')
|
||||
}
|
||||
if (name === 'autoplay') {
|
||||
if (this.hasAttribute('autoplay')) {
|
||||
this.initialTimeout = setTimeout(() => {
|
||||
this.isAutoPlaying = true
|
||||
this.autoPlay()
|
||||
}, this.autoPlayInterval);
|
||||
}
|
||||
else {
|
||||
this.isAutoPlaying = false
|
||||
clearTimeout(this.autoPlayTimeout)
|
||||
clearTimeout(this.initialTimeout)
|
||||
}
|
||||
|
||||
}
|
||||
if (name === 'interval') {
|
||||
if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') {
|
||||
this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim()))
|
||||
}
|
||||
else {
|
||||
this.autoPlayInterval = 5000
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.navButtonRight.removeEventListener('click', this.scrollRight)
|
||||
this.navButtonLeft.removeEventListener('click', this.scrollLeft)
|
||||
this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick)
|
||||
}
|
||||
})
|
||||
@ -817,6 +817,14 @@ async function refreshBalance(button) {
|
||||
if (button)
|
||||
buttonLoader(button, false)
|
||||
})
|
||||
btc_api.getBalance(btc_api.convert.legacy2bech(myFloID)).then(btcBalance => {
|
||||
if(btcBalance) {
|
||||
const [beforeDecimal, afterDecimal = '00'] = String(btcBalance).split('.')
|
||||
renderElem(getRef('btc_balance'), html`<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`)
|
||||
} else {
|
||||
renderElem(getRef('btc_balance'), html`<span><b>0</b></span>`)
|
||||
}
|
||||
})
|
||||
try {
|
||||
const [floBal, floRates] = await Promise.all([floBlockchainAPI.getBalance(myFloID), floExchangeAPI.getRates('FLO')])
|
||||
const [beforeDecimal, afterDecimal = '00'] = String(floBal).split('.')
|
||||
@ -832,16 +840,54 @@ async function refreshBalance(button) {
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
btc_api.getBalance(btc_api.convert.legacy2bech(myFloID)).then(btcBalance => {
|
||||
if(btcBalance) {
|
||||
const [beforeDecimal, afterDecimal = '00'] = String(btcBalance).split('.')
|
||||
renderElem(getRef('btc_balance'), html`<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`)
|
||||
} else {
|
||||
renderElem(getRef('btc_balance'), html`<span><b>0</b></span>`)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const assetIcons = {
|
||||
btc: ` <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24"></rect> </g> <g> <path d="M17.06,11.57C17.65,10.88,18,9.98,18,9c0-1.86-1.27-3.43-3-3.87L15,3h-2v2h-2V3H9v2H6v2h2v10H6v2h3v2h2v-2h2v2h2v-2 c2.21,0,4-1.79,4-4C19,13.55,18.22,12.27,17.06,11.57z M10,7h4c1.1,0,2,0.9,2,2s-0.9,2-2,2h-4V7z M15,17h-5v-4h5c1.1,0,2,0.9,2,2 S16.1,17,15,17z"> </path> </g> </svg> `,
|
||||
usd: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z"/></svg>`,
|
||||
rupee: `<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z"/></g></g></svg>`
|
||||
}
|
||||
function setCorrectInputParams({fromAsset, toAsset}) {
|
||||
getRef('from_amount').setAttribute('min', fromAsset === 'rupee' ? '50' : '0.00000001');
|
||||
getRef('from_amount').setAttribute('step', fromAsset === 'rupee' ? '0.01' : '0.00000001');
|
||||
getRef('from_amount').setAttribute('error-text', `Minimum amount is ${fromAsset === 'rupee' ? '₹50' : '0.000001BTC'}`);
|
||||
|
||||
getRef('to_amount').setAttribute('min', toAsset === 'rupee' ? '50' : '0.00000001');
|
||||
getRef('to_amount').setAttribute('step', toAsset === 'rupee' ? '0.01' : '0.00000001');
|
||||
getRef('to_amount').setAttribute('error-text', `Minimum amount is ${toAsset === 'rupee' ? '₹50' : '0.000001BTC'}`);
|
||||
|
||||
getRef('from_asset_icon').innerHTML = assetIcons[fromAsset]
|
||||
getRef('to_asset_icon').innerHTML = assetIcons[toAsset]
|
||||
}
|
||||
getRef('from_asset_selector').addEventListener('change', e => {
|
||||
const fromAsset = e.target.value;
|
||||
const toAsset = fromAsset === 'rupee' ? 'btc' : 'rupee';
|
||||
setCorrectInputParams({fromAsset, toAsset});
|
||||
getRef('to_asset_selector').value = toAsset
|
||||
})
|
||||
getRef('to_asset_selector').addEventListener('change', e => {
|
||||
const toAsset = e.target.value
|
||||
const fromAsset = toAsset === 'rupee' ? 'btc' : 'rupee';
|
||||
setCorrectInputParams({fromAsset, toAsset});
|
||||
getRef('from_asset_selector').value = fromAsset
|
||||
})
|
||||
getRef('from_amount').addEventListener('input', e => {
|
||||
const fromAsset = getRef('from_asset_selector').value;
|
||||
let fromAmount = parseFloat(e.target.value.trim());
|
||||
if (fromAmount && !Number.isNaN(fromAmount))
|
||||
getRef('to_amount').value = fromAsset === 'rupee' ? parseFloat((fromAmount / globalExchangeRate.inr).toFixed(8)) : parseFloat((fromAmount * globalExchangeRate.inr).toFixed(2))
|
||||
else
|
||||
getRef('to_amount').value = ''
|
||||
})
|
||||
getRef('to_amount').addEventListener('input', e => {
|
||||
const toAsset = getRef('to_asset_selector').value;
|
||||
let toAmount = parseFloat(e.target.value.trim());
|
||||
if (toAmount && !Number.isNaN(toAmount))
|
||||
getRef('from_amount').value = toAsset === 'rupee' ? parseFloat((toAmount / globalExchangeRate.inr).toFixed(8)) : parseFloat((toAmount * globalExchangeRate.inr).toFixed(2))
|
||||
else
|
||||
getRef('from_amount').value = ''
|
||||
})
|
||||
|
||||
function getArrayOfSavedIds() {
|
||||
const arr = [];
|
||||
for (const key in floGlobals.savedIds) {
|
||||
|
||||
@ -392,13 +392,17 @@ async function showPage(targetPage, options = {}) {
|
||||
setTimeout(() => {
|
||||
getRef('private_key_field').focusIn()
|
||||
}, 0);
|
||||
targetPage = 'sign_in'
|
||||
break;
|
||||
case 'sign_up':
|
||||
const { floID, privKey } = floCrypto.generateNewID()
|
||||
getRef('generated_flo_id').value = floID
|
||||
getRef('generated_private_key').value = privKey
|
||||
targetPage = 'sign_up'
|
||||
break;
|
||||
case 'home':
|
||||
getExchangeRate().then(rate => {
|
||||
console.log(rate)
|
||||
getRef('conversion_rate').textContent = `1BTC = ${formatAmount(rate.inr)}`;
|
||||
})
|
||||
break;
|
||||
case 'contact':
|
||||
getRef('contact__title').textContent = getFloIdTitle(params.floId)
|
||||
@ -551,8 +555,6 @@ async function showPage(targetPage, options = {}) {
|
||||
case 'settings':
|
||||
renderSavedUpiIds()
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (pageId !== 'history') {
|
||||
if (rupeeHistoryLoader)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user