UI update
New layout and design
This commit is contained in:
sairaj mote
parent
acc3a4d0f3
commit
279dc732ce
363
css/main.css
Normal file
363
css/main.css
Normal file
@ -0,0 +1,363 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
}
|
||||
|
||||
body {
|
||||
--accent-color: #E72C37;
|
||||
--light-shade: rgba(var(--text-color), 0.06);
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--green: #007936;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
body[data-theme=dark] {
|
||||
--accent-color: #ff3949;
|
||||
--green: #13ff5a;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--background-color: #0a0a0a;
|
||||
--error-color: rgb(255, 106, 106);
|
||||
}
|
||||
|
||||
.full-bleed {
|
||||
grid-column: 1/4;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 60ch;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
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;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.button--primary .icon {
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
|
||||
sm-input,
|
||||
sm-textarea {
|
||||
--border-radius: 0.2rem;
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
sm-button {
|
||||
--border-radius: 0.2rem;
|
||||
}
|
||||
|
||||
sm-tab-header {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.accent-color {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
|
||||
.flow-column {
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
|
||||
.gap-0-5 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-1-5 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.pos-relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.text-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.direction-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.space-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.margin-top-1-5 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-0-5r {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-1r {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.margin-bottom-1-5r {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.margin-bottom-2r {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.margin-bottom-3r {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.margin-bottom-4r {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.margin-left-0-5 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.margin-right-0-5 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.color-0-9 {
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
.color-0-8 {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.color-0-7 {
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
.weight-400 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.weight-500 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.weight-700 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.weight-900 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hide-completely {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.no-transformations {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.overflow-ellipsis {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.16);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.interact {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.observe-empty-state:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.observe-empty-state:not(:empty) ~ .empty-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#main_header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#bond_list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
1
css/main.min.css
vendored
Normal file
1
css/main.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
a,button{color:inherit}button,sm-tab-header{align-self:flex-start}.pos-relative,button{position:relative}#bond_list,#main_header{padding:1rem}*{padding:0;margin:0;box-sizing:border-box;font-family:Inter,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body{--accent-color:#E72C37;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;--green:#007936;color:rgba(var(--text-color),1);background:var(--background-color)}body[data-theme=dark]{--accent-color:#ff3949;--green:#13ff5a;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.7}img{object-fit:cover}a{text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;align-items:center;background:0 0;cursor:pointer;outline:0;font-weight:500;border-radius:.3rem;padding:.4rem .6rem;-webkit-tap-highlight-color:transparent;border:1px solid}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color),1)}.button--primary .icon{fill:rgba(var(--foreground-color),1)}button:focus-visible{outline:solid rgba(var(--text-color),1)}sm-input,sm-textarea{--border-radius:0.2rem;--background:rgba(var(--text-color), 0.06)}sm-button{--border-radius:0.2rem}ul{list-style:none}.accent-color{color:var(--accent-color)}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}#bond_list,.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.color-0-9{color:rgba(var(--text-color),.9)}.color-0-8{color:rgba(var(--text-color),.8)}.color-0-7{color:rgba(var(--text-color),.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.hide{opacity:0;pointer-events:none}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}#bond_list{display:grid;gap:1rem}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}}
|
||||
303
css/main.scss
Normal file
303
css/main.scss
Normal file
@ -0,0 +1,303 @@
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
:root{
|
||||
font-size: clamp(1rem, 1.2vmax, 3rem);
|
||||
}
|
||||
body {
|
||||
--accent-color: #E72C37;
|
||||
--light-shade: rgba(var(--text-color), 0.06);
|
||||
--text-color: 17, 17, 17;
|
||||
--text-color-light: 100, 100, 100;
|
||||
--foreground-color: 255, 255, 255;
|
||||
--background-color: #F6f6f6;
|
||||
--error-color: red;
|
||||
--green: #007936;
|
||||
color: rgba(var(--text-color), 1);
|
||||
background: var(--background-color);
|
||||
}
|
||||
body[data-theme='dark']{
|
||||
--accent-color: #ff3949;
|
||||
--green: #13ff5a;
|
||||
--text-color: 240, 240, 240;
|
||||
--text-color-light: 170, 170, 170;
|
||||
--foreground-color: 20, 20, 20;
|
||||
--background-color: #0a0a0a;
|
||||
--error-color: rgb(255, 106, 106);
|
||||
}
|
||||
|
||||
.full-bleed{
|
||||
grid-column: 1/4;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.capitalize{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 60ch;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
img{
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
a{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
&:focus-visible{
|
||||
box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.button--primary{
|
||||
background: var(--accent-color);
|
||||
color: rgba(var(--foreground-color), 1);
|
||||
.icon{
|
||||
fill: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
}
|
||||
button:focus-visible{
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
sm-input,
|
||||
sm-textarea{
|
||||
--border-radius: 0.2rem;
|
||||
--background: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
sm-button{
|
||||
--border-radius: 0.2rem;
|
||||
}
|
||||
sm-tab-header{
|
||||
align-self: flex-start;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
.accent-color{
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.grid{
|
||||
display: grid;
|
||||
}
|
||||
.grid-3{
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
.flow-column{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.gap-0-5{
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.gap-1{
|
||||
gap: 1rem;
|
||||
}
|
||||
.gap-1-5{
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.gap-2{
|
||||
gap: 2rem;
|
||||
}
|
||||
.gap-3{
|
||||
gap: 3rem;
|
||||
}
|
||||
.pos-relative{
|
||||
position: relative;
|
||||
}
|
||||
.text-align-right{
|
||||
text-align: right;
|
||||
}
|
||||
.align-start{
|
||||
align-items: flex-start;
|
||||
}
|
||||
.align-center{
|
||||
align-items: center;
|
||||
}
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
.justify-start{
|
||||
justify-content: start;
|
||||
}
|
||||
.justify-center{
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-right{
|
||||
margin-left: auto;
|
||||
}
|
||||
.align-self-center{
|
||||
align-self: center;
|
||||
}
|
||||
.justify-self-center{
|
||||
justify-self: center;
|
||||
}
|
||||
.justify-self-start{
|
||||
justify-self: start;
|
||||
}
|
||||
.direction-column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.space-between{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.w-100{
|
||||
width: 100%;
|
||||
}
|
||||
.margin-top-1-5{
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.margin-bottom-0-5r{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.margin-bottom-1r{
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.margin-bottom-1-5r{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.margin-bottom-2r{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.margin-bottom-3r{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.margin-bottom-4r{
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.margin-left-0-5{
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.margin-right-0-5{
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.color-0-9{
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
.color-0-8{
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.color-0-7{
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
.weight-400{
|
||||
font-weight: 400;
|
||||
}
|
||||
.weight-500{
|
||||
font-weight: 500;
|
||||
}
|
||||
.weight-700{
|
||||
font-weight: 700;
|
||||
}
|
||||
.weight-900{
|
||||
font-weight: 900;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.hide-completely{
|
||||
display: none !important;
|
||||
}
|
||||
.no-transformations{
|
||||
transform: none !important;
|
||||
}
|
||||
.overflow-ellipsis{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.ripple{
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background: rgba(var(--text-color), 0.16);
|
||||
pointer-events: none;
|
||||
}
|
||||
.interact{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.observe-empty-state:empty{
|
||||
display: none;
|
||||
}
|
||||
.observe-empty-state:not(:empty) ~ .empty-state{
|
||||
display: none;
|
||||
}
|
||||
.icon{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#main_header{
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#bond_list{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (min-width: 640px) {
|
||||
}
|
||||
@media (any-hover: hover){
|
||||
::-webkit-scrollbar{
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb{
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
&:hover{
|
||||
background: rgba(var(--text-color), 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
323
index.html
323
index.html
@ -1,5 +1,9 @@
|
||||
<html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bitcoin Bonds on Blockchain</title>
|
||||
<script id="floGlobals">
|
||||
/* Constants for FLO blockchain operations !!Make sure to add this at begining!! */
|
||||
@ -20,23 +24,24 @@
|
||||
fee: 0.0005
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
#bond-list th, #bond-list td{
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body onload="onLoadStartUp()">
|
||||
<header id="main_header">
|
||||
<div class="grid">
|
||||
<h5 class="weight-500 color-0-8">RanchiMall</h5>
|
||||
<h4>Bitcoin Bonds</h4>
|
||||
</div>
|
||||
<div class="grid gap-1 flow-column justify-start align-center">
|
||||
<span id="btc-usd-rate"></span>
|
||||
<span id="btc-inr-rate"></span>
|
||||
<span id="usd-rate"></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h3>RanchiMall Bitcoin Bonds</h3>
|
||||
Current BTC rate: <span id="btc-usd-rate"></span> USD | <span id="btc-inr-rate"></span> INR<br />
|
||||
Current USD rate: <span id="usd-rate"></span> INR <br />
|
||||
<hr />
|
||||
<form id="add-bond-form">
|
||||
<form id="add-bond-form" class="hide-completely">
|
||||
FLO ID: <input type="text" name="floid" pattern="[0-9a-zA-Z]{34}"><br />
|
||||
Amount: <input type="text" name="amount" pattern="\d.+">INR<br />
|
||||
Bond start date: <input type="date" name="start_date"><br />
|
||||
@ -60,34 +65,8 @@ Current USD rate: <span id="usd-rate"></span> INR <br />
|
||||
</select><br />
|
||||
<input type="submit" value="Add Bond" /><input type="reset" value="Clear">
|
||||
</form>
|
||||
<hr />
|
||||
<button id="refresh-btn">refresh</button>
|
||||
<table id="bond-list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2"></th>
|
||||
<th rowspan="2">FLO ID</th>
|
||||
<th rowspan="2">Date of bond start</th>
|
||||
<th colspan="2">Amount invested</th>
|
||||
<th colspan="2">Net Bond value</th>
|
||||
<th rowspan="2">Base BTC value (USD)</th>
|
||||
<th rowspan="2">Base USD rate (INR)</th>
|
||||
<th colspan="2">Guaranteed interest </th>
|
||||
<th rowspan="2">Gain share</th>
|
||||
<th rowspan="2">Lock-in period</th>
|
||||
<th rowspan="2">Lock-in end date</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>(INR)</th>
|
||||
<th>(USD)</th>
|
||||
<th>(INR)</th>
|
||||
<th>(USD)</th>
|
||||
<th>rate (pa)</th>
|
||||
<th>period</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="bond-list-body"></tbody>
|
||||
</table>
|
||||
<ul id="bond_list"></ul>
|
||||
|
||||
<script id="init_lib" version="1.0.1">
|
||||
//All util libraries required for Standard operations (DO NOT EDIT ANY)
|
||||
@ -8065,6 +8044,207 @@ Bitcoin.Util = {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script id="ui">
|
||||
const bondTemplate = document.createElement('template')
|
||||
bondTemplate.innerHTML = `
|
||||
<style>
|
||||
a:any-link,
|
||||
button{
|
||||
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:focus-visible,
|
||||
button:focus-visible{
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.grid{
|
||||
display: grid;
|
||||
}
|
||||
.gap-1{
|
||||
gap: 1rem;
|
||||
}
|
||||
.flow-column{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.hide-completely{
|
||||
display: none !important;
|
||||
}
|
||||
.bond-transaction{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
|
||||
}
|
||||
.transaction-column{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.label{
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.2rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.value{
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.bond-transaction{
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<li class="bond-transaction">
|
||||
<div class="transaction-column">
|
||||
<span class="label">FLO ID</span>
|
||||
<span class="value flo-id"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Bond starting date</span>
|
||||
<span class="value bond-start-date"></span>
|
||||
</div>
|
||||
<div class="grid gap-1 flow-column justify-start">
|
||||
<div class="transaction-column">
|
||||
<span class="label">Amount intvested</span>
|
||||
<span class="value amount-invested"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Net bond value</span>
|
||||
<span class="value net-value"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Guaranteed interest</span>
|
||||
<span class="value guaranteed-interest"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-1 flow-column justify-start">
|
||||
<a class="link" target="_blank">View on blockchain</a>
|
||||
<button>More details</button>
|
||||
</div>
|
||||
<div class="more-details grid gap-1 flow-column justify-start hide-completely">
|
||||
<div class="transaction-column">
|
||||
<span class="label">Gain share</span>
|
||||
<span class="value gain-share"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Lock-in period</span>
|
||||
<span class="value lock-in-period"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Lock-in end date</span>
|
||||
<span class="value bond-end-date"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Base BTC rate</span>
|
||||
<span class="value base-btc-rate"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">USD rate</span>
|
||||
<span class="value usd-rate"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
customElements.define('bond-transaction', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.shadow = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
this.shadow.append(bondTemplate.content.cloneNode(true))
|
||||
this.amountInvestedInr
|
||||
this.amountInvestedUsd
|
||||
this.netValueInr
|
||||
this.netValueUsd
|
||||
this.moreDetailsButton = this.shadow.querySelector('button')
|
||||
this.moreDetails = this.shadow.querySelector('.more-details')
|
||||
this.areDetailsOpen = false
|
||||
}
|
||||
set data(obj){
|
||||
const {
|
||||
href,
|
||||
floId,
|
||||
bondStartDate,
|
||||
amountInvestedInr,
|
||||
amountInvestedUsd,
|
||||
netValueInr,
|
||||
netValueUsd,
|
||||
guaranteedInterest,
|
||||
guaranteedInterestDuration,
|
||||
gainShare,
|
||||
lockinPeriod,
|
||||
lockinEnd,
|
||||
baseBtcRate,
|
||||
usdRate
|
||||
} = obj
|
||||
|
||||
this.amountInvestedInr = amountInvestedInr
|
||||
this.amountInvestedUsd = amountInvestedUsd
|
||||
this.netValueInr = netValueInr
|
||||
this.netValueUsd = netValueUsd
|
||||
|
||||
this.shadow.querySelector('.link').href = href
|
||||
this.shadow.querySelector('.flo-id').textContent = floId
|
||||
this.shadow.querySelector('.bond-start-date').textContent = bondStartDate
|
||||
this.shadow.querySelector('.bond-end-date').textContent = lockinEnd
|
||||
this.shadow.querySelector('.amount-invested').textContent = prefersInr ? `₹${this.amountInvestedInr}` : `$${this.amountInvestedUsd}`
|
||||
this.shadow.querySelector('.net-value').textContent = prefersInr ? `₹${this.netValueInr}` : `$${this.netValueUsd}`
|
||||
this.shadow.querySelector('.guaranteed-interest').textContent = `${guaranteedInterest} P.A for ${guaranteedInterestDuration}`
|
||||
this.shadow.querySelector('.gain-share').textContent = gainShare
|
||||
this.shadow.querySelector('.lock-in-period').textContent = lockinPeriod
|
||||
this.shadow.querySelector('.base-btc-rate').textContent = `$${baseBtcRate}`
|
||||
this.shadow.querySelector('.usd-rate').textContent = `₹${usdRate}`
|
||||
}
|
||||
|
||||
toggleCurrency = () => {
|
||||
this.shadow.querySelector('.amount-invested').textContent = prefersInr ? `₹${this.amountInvestedInr}` : `$${this.amountInvestedUsd}`
|
||||
this.shadow.querySelector('.net-value').textContent = prefersInr ? `₹${this.netValueInr}` : `$${this.netValueUsd}`
|
||||
}
|
||||
|
||||
toggleDetails = () => {
|
||||
if(this.areDetailsOpen){
|
||||
this.moreDetailsButton.textContent = 'More details'
|
||||
this.moreDetails.classList.add('hide-completely')
|
||||
this.areDetailsOpen = false
|
||||
}
|
||||
else{
|
||||
this.moreDetailsButton.textContent = 'Less details'
|
||||
this.moreDetails.classList.remove('hide-completely')
|
||||
this.areDetailsOpen = true
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
this.moreDetailsButton.addEventListener('click', this.toggleDetails)
|
||||
}
|
||||
|
||||
disconnectedCallback(){
|
||||
this.moreDetailsButton.removeEventListener('click', this.toggleDetails)
|
||||
}
|
||||
})
|
||||
|
||||
let prefersInr = true
|
||||
|
||||
</script>
|
||||
<script>
|
||||
function onLoadStartUp() {
|
||||
compactIDB.initDB(floGlobals.application, {
|
||||
@ -8081,37 +8261,48 @@ Bitcoin.Util = {
|
||||
w = n * 52.1429,
|
||||
d = n * 365;
|
||||
if (y == Math.floor(y))
|
||||
return y + " year(s)";
|
||||
return y + ` Year${y > 1 ? 's' : ''}`;
|
||||
else if (m == Math.floor(m))
|
||||
return m + " month(s)";
|
||||
return m + ` Month${m > 1 ? 's' : ''}`;
|
||||
else if (w == Math.floor(w))
|
||||
return w + " week(s)";
|
||||
return w + ` Week${w > 1 ? 's' : ''}`;
|
||||
else if (d == Math.floor(d))
|
||||
return d + " day(s)";
|
||||
return d + ` Day${d > 1 ? 's' : ''}`;
|
||||
else
|
||||
return n
|
||||
}
|
||||
|
||||
const frag = document.createDocumentFragment()
|
||||
|
||||
for (let i in data) {
|
||||
let b = parseDetails(data[i])
|
||||
b.netValue = calcNetValue(b.BTC_base, b.startDate, b.minIpa, b.maxPeriod, b.cut, b.amount, b.USD_base)
|
||||
console.info(b);
|
||||
let row = document.getElementById("bond-list-body").insertRow(0);
|
||||
row.insertCell().innerHTML = `<a href="https://livenet.flocha.in/tx/${i}" target="_blank">🡕<a>`
|
||||
row.insertCell().textContent = b.floID;
|
||||
row.insertCell().textContent = dateFormat(b.startDate);
|
||||
row.insertCell().textContent = b.amount.toFixed(2);
|
||||
row.insertCell().textContent = (b.amount / b.USD_base).toFixed(2);
|
||||
row.insertCell().textContent = b.netValue.toFixed(2);
|
||||
row.insertCell().textContent = (b.netValue.toFixed(2) / USD_current).toFixed(2);
|
||||
row.insertCell().textContent = b.BTC_base;
|
||||
row.insertCell().textContent = b.USD_base;
|
||||
row.insertCell().textContent = b.minIpa * 100 + '%';
|
||||
row.insertCell().textContent = period(b.maxPeriod);
|
||||
row.insertCell().textContent = b.cut * 100 + '%';
|
||||
row.insertCell().textContent = period(b.lockinPeriod);
|
||||
row.insertCell().textContent = dateFormat(new Date(b.startDate).getTime() + b.lockinPeriod * 3.154e+10)
|
||||
row.setAttribute("title", data[i].replace(/\|/g, "\n"))
|
||||
const obj = {
|
||||
href: `https://livenet.flocha.in/tx/${i}`,
|
||||
floId: b.floID,
|
||||
bondStartDate: dateFormat(b.startDate),
|
||||
amountInvestedInr: b.amount.toFixed(2),
|
||||
amountInvestedUsd: (b.amount / b.USD_base).toFixed(2),
|
||||
netValueInr: b.netValue.toFixed(2),
|
||||
netValueUsd: (b.netValue.toFixed(2) / USD_current).toFixed(2),
|
||||
guaranteedInterest: b.minIpa * 100 + '%',
|
||||
guaranteedInterestDuration: period(b.maxPeriod),
|
||||
gainShare: b.cut * 100 + '%',
|
||||
lockinPeriod: period(b.lockinPeriod),
|
||||
lockinEnd: dateFormat(new Date(b.startDate).getTime() + b.lockinPeriod * 3.154e+10),
|
||||
baseBtcRate: b.BTC_base,
|
||||
usdRate: b.USD_base
|
||||
}
|
||||
|
||||
const bond = document.createElement('bond-transaction')
|
||||
bond.data = obj
|
||||
frag.append(bond)
|
||||
|
||||
// row.setAttribute("title", data[i].replace(/\|/g, "\n"))
|
||||
}
|
||||
|
||||
document.getElementById('bond_list').append(frag)
|
||||
}
|
||||
|
||||
function parseDetails(data) {
|
||||
@ -8213,10 +8404,10 @@ Bitcoin.Util = {
|
||||
USD_current = rates.USD_INR;
|
||||
BTC_current = rates.BTC_USD;
|
||||
console.log(`USD rate: ${USD_current} INR\nBTC rate: ${BTC_current} USD`);
|
||||
document.getElementById("usd-rate").textContent = rates.USD_INR.toFixed(2);
|
||||
document.getElementById("btc-usd-rate").textContent = rates.BTC_USD.toFixed(2);
|
||||
document.getElementById("btc-inr-rate").textContent = rates.BTC_INR.toFixed(2);
|
||||
document.getElementById("bond-list-body").innerHTML = '';
|
||||
document.getElementById("usd-rate").textContent = `USD: ₹${rates.USD_INR.toFixed(2)}`;
|
||||
document.getElementById("btc-usd-rate").textContent = `BTC: $${rates.BTC_USD.toFixed(2)}`;
|
||||
document.getElementById("btc-inr-rate").textContent = `₹${rates.BTC_INR.toFixed(2)}`;
|
||||
document.getElementById("bond_list").innerHTML = '';
|
||||
compactIDB.readAllData("bonds")
|
||||
.then(result => renderData(result))
|
||||
.catch(error => console.error(error))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user