UI improvements
This commit is contained in:
sairaj mote
parent
3caa81efd5
commit
4ad8fdbc2f
459
css/main.css
459
css/main.css
@ -1,4 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@ -7,7 +6,7 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
font-size: clamp(16px, 1.2vmax, 20px);
|
||||
}
|
||||
|
||||
html,
|
||||
@ -45,28 +44,40 @@ body[data-theme=dark] sm-input.outlined {
|
||||
--active-placeholder-color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4 !important;
|
||||
}
|
||||
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.h6 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.body-1 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.body-2 {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4 !important;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
@ -80,7 +91,7 @@ body[data-theme=dark] sm-input.outlined {
|
||||
p {
|
||||
font-size: 0.8;
|
||||
max-width: 70ch;
|
||||
line-height: 1.5;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
@ -90,94 +101,7 @@ img {
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
.button--primary .icon {
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:-webkit-any-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
a:-moz-any-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
a:any-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:-webkit-any-link:focus-visible {
|
||||
@ -192,6 +116,147 @@ a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
}
|
||||
button:focus-visible,
|
||||
.button:focus-visible {
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
button:not(:disabled),
|
||||
.button:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
}
|
||||
.button--primary {
|
||||
color: rgba(var(--background-color), 1) !important;
|
||||
}
|
||||
.button--primary .icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
.button--danger {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
.button--danger .icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
.button--primary {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
.button--colored {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.button--colored .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.button--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
.button--outlined {
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.button--transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
a:-webkit-any-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
a:-moz-any-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
a:any-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
|
||||
a:-webkit-any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:-moz-any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
sm-input,
|
||||
sm-textarea {
|
||||
--border-radius: 0.5rem;
|
||||
@ -262,7 +327,7 @@ ul {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -436,12 +501,6 @@ ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#loading_page,
|
||||
#error_page {
|
||||
position: relative;
|
||||
@ -678,15 +737,12 @@ ul {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
justify-self: flex-end;
|
||||
border-radius: 50%;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
#profile_button .icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
fill: white;
|
||||
}
|
||||
|
||||
@ -704,7 +760,7 @@ ul {
|
||||
}
|
||||
|
||||
#home_page {
|
||||
--side-padding: 8vw;
|
||||
--side-padding: 5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 max(1rem, var(--side-padding));
|
||||
@ -714,7 +770,7 @@ ul {
|
||||
#homepage__hero-section {
|
||||
color: white;
|
||||
padding: 2rem 0 12rem 0;
|
||||
margin: 0 calc(-1 * max(1rem, var(--side-padding))) -8rem calc(-1 * max(1rem, var(--side-padding)));
|
||||
margin: 0 calc(-1 * max(1rem, var(--side-padding))) -5.5rem calc(-1 * max(1rem, var(--side-padding)));
|
||||
background-image: url(../assets/bg-1.svg);
|
||||
background-color: var(--accent-color);
|
||||
background-size: cover;
|
||||
@ -724,17 +780,28 @@ ul {
|
||||
}
|
||||
|
||||
.fund-list__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#search_investor {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
color: rgba(var(--text-color), 1);
|
||||
grid-area: search;
|
||||
width: min(20rem, 100%);
|
||||
justify-self: flex-end;
|
||||
--padding: 1rem;
|
||||
width: min(26rem, 100%);
|
||||
align-self: center;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -753,6 +820,7 @@ ul {
|
||||
word-break: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
@ -764,7 +832,8 @@ ul {
|
||||
}
|
||||
|
||||
#fund_list {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -782,30 +851,6 @@ ul {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
fund-block:first-of-type::before {
|
||||
display: inline-flex;
|
||||
content: "• Latest Fund";
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
}
|
||||
fund-block:not(:last-of-type)::after {
|
||||
display: flex;
|
||||
content: "";
|
||||
padding: 0.4rem 0;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
background-color: var(--error-color);
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.flex-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -842,13 +887,6 @@ form select option {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.flex-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
justify-content: start;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
||||
}
|
||||
|
||||
.fund-placeholder {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
@ -899,11 +937,28 @@ form select option {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fund-investor {
|
||||
.investors-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
.fund-investor {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
}
|
||||
.fund-investor__redeem {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 3rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
color: white;
|
||||
filter: saturate(0.8);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.transaction-column {
|
||||
@ -911,10 +966,6 @@ form select option {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fund-block {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
@ -923,18 +974,30 @@ form select option {
|
||||
}
|
||||
|
||||
.fund-block__details {
|
||||
gap: 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem 3rem;
|
||||
}
|
||||
|
||||
.tapout-container,
|
||||
.investment-container {
|
||||
grid-column: 1/3;
|
||||
.start-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
width: -webkit-max-content;
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.investment-container {
|
||||
gap: 1.5rem;
|
||||
justify-content: flex-start;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
.start-date::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.tapout-list {
|
||||
@ -953,51 +1016,7 @@ form select option {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.investor-group {
|
||||
display: grid;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1.8rem;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
|
||||
}
|
||||
|
||||
.investor-group header {
|
||||
margin-top: -1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.investor-group > * {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
.investor-group h4 {
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.investor-group__list {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#main_header {
|
||||
grid-template-areas: ". profile-button";
|
||||
}
|
||||
@ -1008,10 +1027,6 @@ form select option {
|
||||
padding: 2rem 0 20rem 0;
|
||||
margin-bottom: -16rem;
|
||||
}
|
||||
.fund-list__header {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: ". ." "search search";
|
||||
}
|
||||
.investor-input {
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: ". close" ". close";
|
||||
@ -1040,30 +1055,20 @@ form select option {
|
||||
.dropdown__panel {
|
||||
left: auto;
|
||||
}
|
||||
.fund-list__header {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: ". search .";
|
||||
}
|
||||
.investor-input {
|
||||
grid-template-columns: 1.5fr 1fr auto;
|
||||
grid-template-areas: ". . close";
|
||||
}
|
||||
.fund-block {
|
||||
padding: 3vw;
|
||||
}
|
||||
.fund-investor {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.fund-block__details {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.investor-group {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.justify-self-end {
|
||||
justify-self: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
.investment-container {
|
||||
grid-template-columns: auto auto 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page-layout {
|
||||
@ -1072,10 +1077,6 @@ form select option {
|
||||
.multi-form {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.fund-investor {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
336
css/main.scss
336
css/main.scss
@ -5,7 +5,7 @@
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
font-size: clamp(16px, 1.2vmax, 20px);
|
||||
}
|
||||
html,
|
||||
body {
|
||||
@ -39,25 +39,34 @@ body[data-theme="dark"] {
|
||||
--active-placeholder-color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
.h1 {
|
||||
font-size: 6rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.h5 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.h6 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.body-1 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.body-2 {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4 !important;
|
||||
}
|
||||
.h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
@ -69,7 +78,7 @@ body[data-theme="dark"] {
|
||||
p {
|
||||
font-size: 0.8;
|
||||
max-width: 70ch;
|
||||
line-height: 1.5;
|
||||
line-height: 1.7;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
@ -78,38 +87,81 @@ img {
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
button,
|
||||
.button {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
align-items: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
justify-content: center;
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
outline: var(--accent-color) solid medium;
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border-radius: 0.2rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
.button--primary {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
.icon {
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
.button {
|
||||
background-color: rgba(var(--text-color), 0.02);
|
||||
border: solid thin rgba(var(--text-color), 0.06);
|
||||
&--primary {
|
||||
color: rgba(var(--background-color), 1) !important;
|
||||
|
||||
.icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
&--danger {
|
||||
color: var(--danger-color);
|
||||
.icon {
|
||||
fill: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
&--colored {
|
||||
color: var(--accent-color);
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
&--small {
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
|
||||
&--outlined {
|
||||
border: solid rgba(var(--text-color), 0.3) 0.1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
&--transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
a:any-link {
|
||||
position: relative;
|
||||
@ -118,7 +170,7 @@ a:any-link {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
color: var(--accent-color);
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -126,11 +178,16 @@ a:any-link {
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
a:any-link:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
.icon {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
sm-input,
|
||||
sm-textarea {
|
||||
@ -185,7 +242,7 @@ ul {
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.align-center {
|
||||
.align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.align-end {
|
||||
@ -327,11 +384,6 @@ ul {
|
||||
.observe-empty-state:not(:empty) ~ .empty-state {
|
||||
display: none;
|
||||
}
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#loading_page,
|
||||
#error_page {
|
||||
@ -502,14 +554,11 @@ ul {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
height: 2.2rem;
|
||||
width: 2.2rem;
|
||||
justify-self: flex-end;
|
||||
border-radius: 50%;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba($color: #000000, $alpha: 0.16);
|
||||
.icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
@ -528,7 +577,7 @@ ul {
|
||||
}
|
||||
|
||||
#home_page {
|
||||
--side-padding: 8vw;
|
||||
--side-padding: 5vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 max(1rem, var(--side-padding));
|
||||
@ -537,7 +586,7 @@ ul {
|
||||
#homepage__hero-section {
|
||||
color: white;
|
||||
padding: 2rem 0 12rem 0;
|
||||
margin: 0 calc(-1 * max(1rem, var(--side-padding))) -8rem calc(-1 * max(1rem, var(--side-padding)));
|
||||
margin: 0 calc(-1 * max(1rem, var(--side-padding))) -5.5rem calc(-1 * max(1rem, var(--side-padding)));
|
||||
background-image: url(../assets/bg-1.svg);
|
||||
background-color: var(--accent-color);
|
||||
background-size: cover;
|
||||
@ -547,17 +596,27 @@ ul {
|
||||
}
|
||||
|
||||
.fund-list__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: white;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#search_investor {
|
||||
position: sticky;
|
||||
top: 1rem;
|
||||
--background: rgba(var(--foreground-color), 1);
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
color: rgba(var(--text-color), 1);
|
||||
grid-area: search;
|
||||
width: min(20rem, 100%);
|
||||
justify-self: flex-end;
|
||||
--padding: 1rem;
|
||||
width: min(26rem, 100%);
|
||||
align-self: center;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.label {
|
||||
@ -577,6 +636,7 @@ ul {
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
min-width: 6rem;
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
@ -588,7 +648,8 @@ ul {
|
||||
}
|
||||
|
||||
#fund_list {
|
||||
display: grid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -605,36 +666,6 @@ ul {
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
fund-block {
|
||||
&:first-of-type::before {
|
||||
display: inline-flex;
|
||||
content: "• Latest Fund";
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: white;
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 0.3rem 0.3rem 0 0;
|
||||
}
|
||||
&:not(:last-of-type)::after {
|
||||
display: flex;
|
||||
content: "";
|
||||
// justify-content: center;
|
||||
padding: 0.4rem 0;
|
||||
font-weight: 700;
|
||||
width: 100%;
|
||||
// font-size: 0.9rem;
|
||||
// color: var(--background-color);
|
||||
background-color: var(--error-color);
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -669,13 +700,6 @@ form {
|
||||
line-height: 1.7;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.flex-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
justify-content: start;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
||||
}
|
||||
.fund-placeholder {
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
@ -712,19 +736,32 @@ form {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.fund-investor {
|
||||
.investors-list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.fund-investor {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
border: solid thin rgba(var(--text-color), 0.2);
|
||||
&__redeem {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 3rem;
|
||||
padding: 0.8rem 1.5rem;
|
||||
color: white;
|
||||
filter: saturate(0.8);
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
.transaction-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.fund-block {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
@ -732,16 +769,28 @@ form {
|
||||
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
|
||||
}
|
||||
.fund-block__details {
|
||||
gap: 1.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem 3rem;
|
||||
}
|
||||
.tapout-container,
|
||||
.investment-container {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
.investment-container {
|
||||
gap: 1.5rem;
|
||||
justify-content: flex-start;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
.start-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 3rem;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
width: max-content;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
.tapout-list {
|
||||
display: grid;
|
||||
@ -756,47 +805,8 @@ form {
|
||||
.fund-link {
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.investor-group {
|
||||
display: grid;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1.8rem;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
|
||||
}
|
||||
.investor-group header {
|
||||
margin-top: -1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.investor-group > * {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.investor-group h4 {
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
.investor-group__list {
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.h5 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#main_header {
|
||||
grid-template-areas: ". profile-button";
|
||||
.dropdown {
|
||||
@ -807,10 +817,6 @@ form {
|
||||
padding: 2rem 0 20rem 0;
|
||||
margin-bottom: -16rem;
|
||||
}
|
||||
.fund-list__header {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: ". ." "search search";
|
||||
}
|
||||
.investor-input {
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-areas: ". close" ". close";
|
||||
@ -839,30 +845,20 @@ form {
|
||||
.dropdown__panel {
|
||||
left: auto;
|
||||
}
|
||||
.fund-list__header {
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: ". search .";
|
||||
}
|
||||
.investor-input {
|
||||
grid-template-columns: 1.5fr 1fr auto;
|
||||
grid-template-areas: ". . close";
|
||||
}
|
||||
.fund-block {
|
||||
padding: 3vw;
|
||||
}
|
||||
.fund-investor {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.fund-block__details {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.investor-group {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.justify-self-end {
|
||||
justify-self: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
.investment-container {
|
||||
grid-template-columns: auto auto 1fr;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.page-layout {
|
||||
@ -871,10 +867,6 @@ form {
|
||||
.multi-form {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.fund-investor {
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
|
||||
145
index.html
145
index.html
@ -10,7 +10,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap"
|
||||
rel="stylesheet">
|
||||
<script id="floGlobals">
|
||||
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
||||
@ -54,7 +54,7 @@
|
||||
<polyline points="6.02 47 32 62 57.98 47" />
|
||||
</svg>
|
||||
<h4>Loading data from blockchain</h4>
|
||||
<footer class="page__footer flex align-center">
|
||||
<footer class="page__footer flex align-items-center">
|
||||
<svg id="rm_logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
|
||||
@ -81,7 +81,7 @@
|
||||
d="M450.16,220.16A200.16,200.16,0,0,0,108.46,78.63,200.69,200.69,0,0,0,57.61,275.68V407.4a10.17,10.17,0,1,0,20.33,0V322.6a201.91,201.91,0,0,0,99.41,84.19v52.27l-11.45.62a10.17,10.17,0,0,0,.54,20.32H167l30.69-1.66V413.45a202.3,202.3,0,0,0,104.62,0v64.88L333,480h.56a10.17,10.17,0,0,0,.54-20.32l-11.45-.62V406.79a201.91,201.91,0,0,0,99.41-84.19v84.8a10.17,10.17,0,1,0,20.33,0V275.68A200.81,200.81,0,0,0,450.16,220.16ZM250,400c-99.16,0-179.83-80.67-179.83-179.83S150.84,40.34,250,40.34,429.83,121,429.83,220.16,349.16,400,250,400Z" />
|
||||
</svg>
|
||||
<h4 class="margin-bottom-0-5r">Oops, Couldn't get data from blockchain</h4>
|
||||
<footer class="page__footer flex align-center">
|
||||
<footer class="page__footer flex align-items-center">
|
||||
<svg id="rm_logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
|
||||
@ -90,7 +90,7 @@
|
||||
</footer>
|
||||
</article>
|
||||
<header id="main_header" class="hide-completely">
|
||||
<div class="flex align-center">
|
||||
<div class="flex align-items-center">
|
||||
<svg id="main_header__logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z" />
|
||||
@ -100,17 +100,19 @@
|
||||
<h3 class="header__app-name">Bob's Fund</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="current_price" class="grid gap-1 flow-column align-center">
|
||||
<div id="current_price" class="grid gap-1 flow-column align-items-center">
|
||||
<span id="btc-usd-rate" class="weight-700"></span>
|
||||
<span id="usd-rate" class="weight-700"></span>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button id="profile_button" onclick="changeDropdownState('profile_dropdown', 'toggle', this)">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M11.93,0a4.8,4.8,0,0,0-4.8,4.8s.13,3.74.54,4.53c.5,1,3,3,4.26,3s3.72-2,4.22-3c.41-.79.58-4.53.58-4.53A4.8,4.8,0,0,0,11.93,0Z" />
|
||||
<path
|
||||
d="M14.47,12.59a4.38,4.38,0,0,1-2.54,1,4.38,4.38,0,0,1-2.53-1c-1,1.78-4,2.69-6.21,3.68-.91.37-1.67,5.3-.61,5.3A18.4,18.4,0,0,0,12.12,24a16.76,16.76,0,0,0,9.17-2.42c1.06,0,.3-4.89-.61-5.3C18.45,15.28,15.42,14.37,14.47,12.59Z" />
|
||||
<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>
|
||||
<path d="M0,0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<ul id="profile_dropdown" class="dropdown__panel hide-completely">
|
||||
@ -122,7 +124,7 @@
|
||||
<sm-option value="usd">USD</sm-option>
|
||||
</sm-select>
|
||||
</li>
|
||||
<li class="flex align-center space-between">
|
||||
<li class="flex align-items-center space-between">
|
||||
<div class="flex weight-700">Dark theme</div>
|
||||
<theme-toggle></theme-toggle>
|
||||
</li>
|
||||
@ -134,7 +136,7 @@
|
||||
</header>
|
||||
<main id="home_page" class="page hide-completely">
|
||||
<section id="homepage__hero-section" class="full-bleed page-layout">
|
||||
<h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund<br>on FLO Blockchain</h2>
|
||||
<h3 class="h3 margin-bottom-1r">Bob's Fund<br>on FLO Blockchain</h3>
|
||||
<p>
|
||||
Bob's Fund is a 20 year long term Bitcoin price linked product. Investors are entitled to 100%
|
||||
of Bitcoin price gains, but they must hold for 20 years. Over a very long time period, investor returns
|
||||
@ -143,24 +145,21 @@
|
||||
every investor, thus the interests of fund manager, and fund investors are totally aligned.
|
||||
</p>
|
||||
</section>
|
||||
<header class="fund-list__header grid margin-bottom-1-5r">
|
||||
<h3 class="h3">Funds</h3>
|
||||
<sm-input id="search_investor" type="search" placeholder="Search investor with FLO ID">
|
||||
<svg class="icon" slot="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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
|
||||
</svg>
|
||||
</sm-input>
|
||||
<header class="fund-list__header">
|
||||
<h4 class="h4">Funds</h4>
|
||||
<button id="refresh_button" class="justify-right button--primary">Refresh</button>
|
||||
</header>
|
||||
<div class="warning-container grid gap-1">
|
||||
<p>
|
||||
When redemption is due, redeem button will appear next to the FLO ID. Enter your private key to redeem.
|
||||
</p>
|
||||
<sm-input id="search_investor" type="search" placeholder="Search investor with FLO ID">
|
||||
<svg class="icon" slot="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="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
|
||||
</svg>
|
||||
</sm-input>
|
||||
<!-- <div class="warning-container grid gap-1">
|
||||
<strong style="color: #fb3640">Do not enter private key in similar looking pages.</strong>
|
||||
</div>
|
||||
</div> -->
|
||||
<section>
|
||||
<ul id="fund_list"></ul>
|
||||
<div id="fund_list__empty-state" class="grid hide-completely">
|
||||
@ -174,7 +173,7 @@
|
||||
</div>
|
||||
</main>
|
||||
<article id="admin_page" class="page page-layout hide-completely">
|
||||
<header class="flex margin-top-1-5 align-center margin-bottom-1-5r">
|
||||
<header class="flex margin-top-1-5 align-items-center margin-bottom-1-5r">
|
||||
<button onclick="showPage('home_page')">
|
||||
<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" />
|
||||
@ -282,7 +281,7 @@
|
||||
</form>
|
||||
</article>
|
||||
<article id="confirm_term_page" class="page page-layout hide-completely">
|
||||
<header class="flex margin-top-1-5 align-center margin-bottom-1-5r">
|
||||
<header class="flex margin-top-1-5 align-items-center margin-bottom-1-5r">
|
||||
<button class="back-button" onclick="showPage('admin_page')">
|
||||
<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" />
|
||||
@ -302,7 +301,7 @@
|
||||
</form>
|
||||
</article>
|
||||
<article id="confirm_fund_page" class="page page-layout hide-completely">
|
||||
<header class="flex margin-top-1-5 align-center margin-bottom-1-5r">
|
||||
<header class="flex margin-top-1-5 align-items-center margin-bottom-1-5r">
|
||||
<button class="back-button" onclick="showPage('admin_page')">
|
||||
<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" />
|
||||
@ -328,7 +327,7 @@
|
||||
amount = parseFloat(amount);
|
||||
if (!amount)
|
||||
return '₹0';
|
||||
return amount.toLocaleString(currency === 'inr' ? `en-IN` : 'en-US', { style: 'currency', currency, maximumFractionDigits: 0 })
|
||||
return amount.toLocaleString(currency === 'inr' ? `en-IN` : 'en-US', { style: 'currency', currency })
|
||||
}
|
||||
const render = {
|
||||
investorInput() {
|
||||
@ -366,7 +365,8 @@
|
||||
floId,
|
||||
amountInvested,
|
||||
netValue,
|
||||
fundId
|
||||
fundId,
|
||||
isRedeemable = false,
|
||||
} = details
|
||||
return html`
|
||||
<li class="fund-investor" id=${`${fundId}_${floId}`} data-flo-id=${floId}>
|
||||
@ -374,7 +374,7 @@
|
||||
<span class="label">FLO ID</span>
|
||||
<span class="value flo-id">${floId}</span>
|
||||
</div>
|
||||
<div class="flex gap-1-5 space-between">
|
||||
<div class="flex gap-1-5">
|
||||
<div class="transaction-column">
|
||||
<span class="label">Invested</span>
|
||||
<span class="value amount-invested">${formatAmount(amountInvested[preferredCurrency], preferredCurrency)}</span>
|
||||
@ -384,12 +384,13 @@
|
||||
<span class="value net-value" style="color: var(--green)">${formatAmount(netValue[preferredCurrency], preferredCurrency)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button fund-investor__redeem" ?disabled=${!isRedeemable}>Redeem</button>
|
||||
</li>
|
||||
`
|
||||
},
|
||||
fundBlock(details) {
|
||||
let {
|
||||
fundTxHref,
|
||||
fundTxs,
|
||||
startDate,
|
||||
endDate,
|
||||
baseUsd,
|
||||
@ -408,20 +409,19 @@
|
||||
</li>`;
|
||||
tapoutsFrag.push(tapoutPoint)
|
||||
}
|
||||
const renderedFundTxs = fundTxs.map((tx, index) => {
|
||||
return html`<a href=${`${floBlockchainAPI.current_server}tx/${tx.txid}`}>Transaction ${index + 1}</a>`
|
||||
})
|
||||
|
||||
return html.node`
|
||||
<li class="fund-block">
|
||||
<div class="fund-block__details grid margin-bottom-3r">
|
||||
<div class="flex flex-wrap gap-1-5">
|
||||
<div class="grid">
|
||||
<span class="label">Start date</span>
|
||||
<span class="value start-date">${startDate}</span>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<span class="label">End date</span>
|
||||
<span class="value end-date">${endDate}</span>
|
||||
</div>
|
||||
<h3 class="start-date">${startDate} Fund</h3>
|
||||
<div class="fund-block__details margin-bottom-3r">
|
||||
<div class="grid">
|
||||
<span class="label">End date</span>
|
||||
<span class="value end-date">${bobsFund.dateFormat(endDate)}</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1-5">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<div class="grid">
|
||||
<span class="label">Initial BTC value</span>
|
||||
<span class="value base-btc">${formatAmount(baseBtc[preferredCurrency], preferredCurrency)}</span>
|
||||
@ -436,7 +436,7 @@
|
||||
<span class="value margin-bottom-0-5r">Tapouts</span>
|
||||
<ul class="tapout-list">${tapoutsFrag}</ul>
|
||||
</div>` : ''}
|
||||
<div class="investment-container grid">
|
||||
<div class="flex flex-wrap gap-1">
|
||||
<div class="grid">
|
||||
<span class="label">Total investment</span>
|
||||
<span class="value total-investment">${formatAmount(totalInvestment[preferredCurrency], preferredCurrency)}</span>
|
||||
@ -445,14 +445,15 @@
|
||||
<span class="label">Total present value</span>
|
||||
<span class="value net-value" style="color: var(--green)">${formatAmount(totalNet[preferredCurrency], preferredCurrency)}</span>
|
||||
</div>
|
||||
${investorsFrag.length > 1 ? html`
|
||||
<a class="fund-link" href=${fundTxHref} target="_blank">See fund on Blockchain</a>
|
||||
`: ''}
|
||||
</div>
|
||||
<div class="grid">
|
||||
<span class="label">Fund transactions</span>
|
||||
<div class="flex gap-0-5">${renderedFundTxs}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<h4 class="margin-bottom-0-5r">Investors</h4>
|
||||
<ul class="investors-group-list grid">${investorsFrag}</ul>
|
||||
<ul class="investors-list grid">${investorsFrag}</ul>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
@ -512,8 +513,8 @@
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
document.addEventListener("pointerdown", (e) => {
|
||||
if (e.target.closest("button, sm-button:not([disable]), .interact")) {
|
||||
createRipple(e, e.target.closest("button, sm-button, .interact"));
|
||||
if (e.target.closest("button:not([disabled]), .interact")) {
|
||||
createRipple(e, e.target.closest("button, .interact"));
|
||||
}
|
||||
else if (isDropdownOpen && !e.target.closest('.dropdown')) {
|
||||
changeDropdownState('profile_dropdown', 'hide')
|
||||
@ -662,8 +663,8 @@
|
||||
}
|
||||
|
||||
getRef('search_investor').addEventListener('input', debounce(() => {
|
||||
document.querySelectorAll('fund-block').forEach(block => {
|
||||
block.investors.forEach(child => {
|
||||
document.querySelectorAll('.fund-block').forEach(block => {
|
||||
block.querySelectorAll('.fund-investor').forEach(child => {
|
||||
if (child.dataset.floId.toLowerCase().includes(getRef('search_investor').value.trim().toLowerCase())) {
|
||||
child.classList.remove('hide-completely')
|
||||
}
|
||||
@ -671,18 +672,9 @@
|
||||
child.classList.add('hide-completely')
|
||||
}
|
||||
})
|
||||
block.investorGroupList.forEach(group => {
|
||||
if (Array.from(group.children).every(elem => elem.classList.contains('hide-completely'))) {
|
||||
group.parentNode.classList.add('hide-completely')
|
||||
}
|
||||
else {
|
||||
group.parentNode.classList.remove('hide-completely')
|
||||
}
|
||||
})
|
||||
if (Array.from(block.investorGroups).every(elem => elem.classList.contains('hide-completely'))) {
|
||||
if (Array.from(block.querySelectorAll('.fund-investor')).every(elem => elem.classList.contains('hide-completely'))) {
|
||||
block.classList.add('hide-completely')
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
block.classList.remove('hide-completely')
|
||||
}
|
||||
if (Array.from(getRef('fund_list').children).every(elem => elem.classList.contains('hide-completely'))) {
|
||||
@ -804,7 +796,7 @@
|
||||
|
||||
for (let k in funds) {
|
||||
let f = bobsFund.parse(funds[k].map(a => a.data));
|
||||
console.info(f);
|
||||
// console.info(f);
|
||||
let startDate = new Date(f.start_date).getTime()
|
||||
const tapouts = {}
|
||||
if (f.tapoutInterval)
|
||||
@ -814,10 +806,9 @@
|
||||
tapouts[`Tapout ${k + 1}`] = `${bobsFund.dateFormat(ts)} to ${bobsFund.dateFormat(te)}`
|
||||
})
|
||||
const fundObj = {
|
||||
//termTxHref: `${floBlockchainAPI.current_server}tx/${term.txid}`,
|
||||
fundTxHref: `${floBlockchainAPI.current_server}tx/${funds[k][0].txid}`,
|
||||
fundTxs: funds[k],
|
||||
startDate: bobsFund.dateFormat(f.start_date),
|
||||
endDate: bobsFund.dateFormat(bobsFund.dateAdder(startDate, f.duration)),
|
||||
endDate: bobsFund.dateAdder(startDate, f.duration),
|
||||
baseUsd: f.USD_base,
|
||||
baseBtc: {
|
||||
usd: f.BTC_base,
|
||||
@ -825,6 +816,7 @@
|
||||
},
|
||||
tapouts,
|
||||
}
|
||||
const isRedeemable = new Date(fundObj.endDate) < new Date()
|
||||
|
||||
// Creating fund selection options
|
||||
selectableFunds.push(html`
|
||||
@ -852,33 +844,26 @@
|
||||
inr: netVal.toFixed(2),
|
||||
usd: (netVal / USD_current).toFixed(2),
|
||||
},
|
||||
isRedeemable,
|
||||
}
|
||||
total_invested += amount;
|
||||
total_net += netVal;
|
||||
if (f.investments[investor].closed) {
|
||||
/* TODO: UI: render closing data
|
||||
if closed, netVal shoud not be displayed
|
||||
if closed, netVal should not be displayed
|
||||
f.investments[investor].closed -> Object {
|
||||
BTC_net: BTC value at closing date
|
||||
endDate: closing date
|
||||
amountFinal: final amount (withdrawn)
|
||||
payment_refRef: if amount is withdrawn via token system, txid of the token transfer
|
||||
USD_net: USD value at closing date
|
||||
refSign: signature of the inverstor for closing (hidden)
|
||||
refSign: signature of the investor for closing (hidden)
|
||||
i: index of the txid (of closing tx) ie, funds[k][i].txid
|
||||
}
|
||||
*/
|
||||
}
|
||||
const investorGroup = html`
|
||||
<li class="investor-group">
|
||||
<header class="flex align-center">
|
||||
<a class="tx-link justify-right" href=${`${floBlockchainAPI.current_server}tx/${funds[k][f.investments[investor].i].txid}`} target="_blank">See transaction on Blockchain</a>
|
||||
</header>
|
||||
<ul class="investor-group__list">${render.investorCard(obj)}</ul>
|
||||
</li>
|
||||
`;
|
||||
investorsFrag.push(investorGroup)
|
||||
floGlobals.investments[`${k}_${investor}`] = { amountInvested: obj.amountInvested, netValue: obj.netValue }
|
||||
investorsFrag.push(render.investorCard(obj))
|
||||
}
|
||||
fundObj.totalInvestment = {
|
||||
inr: total_invested.toFixed(2),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user