RanchiMall/blockchainbonds
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source 
added page changing function
This commit is contained in:
sairaj mote 2021-04-27 02:45:51 +05:30
parent 21fc1f9139
commit 1e829d1a95
4 changed files with 103 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/main.css
View File

@ -30,6 +30,9 @@ body[data-theme=dark] {
--background-color: #0a0a0a;
--error-color: rgb(255, 106, 106);
}
body[data-theme=dark] ::-webkit-calendar-picker-indicator {
filter: invert(1);
}
.full-bleed {
grid-column: 1/4;
@ -465,6 +468,20 @@ bond-transaction {
box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.16);
}
form {
padding: 1rem;
border-radius: 0.3rem;
width: min(32rem, 100%);
margin-bottom: 3rem;
background: rgba(var(--foreground-color), 1);
}
form input {
color: inherit;
padding: 0.4rem 0.6rem;
background-color: rgba(var(--text-color), 0.1);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.6);
}
@media only screen and (max-width: 640px) {
#main_header {
grid-template-areas: ". profile-button";

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

17
css/main.scss
View File

@ -27,6 +27,9 @@ body[data-theme='dark']{
--foreground-color: 20, 20, 20;
--background-color: #0a0a0a;
--error-color: rgb(255, 106, 106);
::-webkit-calendar-picker-indicator {
filter: invert(1);
}
}
.full-bleed{
@ -396,6 +399,20 @@ bond-transaction{
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
}
form{
padding: 1rem;
border-radius: 0.3rem;
width: min(32rem, 100%);
margin-bottom: 3rem;
background: rgba(var(--foreground-color), 1);
input{
color: inherit;
padding: 0.4rem 0.6rem;
background-color: rgba(var(--text-color), 0.1);
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.6);
}
}
@media only screen and (max-width: 640px) {
#main_header{

92
index.html
View File

@ -65,30 +65,6 @@
</div>
</header>
<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 />
Base BTC value: <input type="text" name="base" pattern="^[\d,]+.?\d$">USD<br />
Base USD rate: <input type="number" name="usd_rate" step="0.01">INR<br />
Guaranteed interest rate: <input type="number" name="gi_r" min=0 max=100 step="0.01">%<br />
Guaranteed interest period: <input type="number" name="gi_pv">
<select name="gi_pt">
<option value="year(s)">year(s)</option>
<option value="month(s)">month(s)</option>
<option value="week(s)">week(s)</option>
<option value="day(s)">day(s)</option>
</select><br />
Gain share: <input type="number" name="cut" min=0 max=100>%<br />
Lock-in period: <input type="number" name="lockin_v">
<select name="lockin_t">
<option value="year(s)">year(s)</option>
<option value="month(s)">month(s)</option>
<option value="week(s)">week(s)</option>
<option value="day(s)">day(s)</option>
</select><br />
<input type="submit" value="Add Bond" /><input type="reset" value="Clear">
</form>
<main class="page">
<header class="bond-list__header flex align-center">
<h4 class="h4">Recent</h4>
@ -96,6 +72,69 @@
</header>
<ul id="bond_list"></ul>
</main>
<article class="page hide-completely">
<header class="margin-bottom-1-5r">
<h3>Admin Panel</h3>
</header>
<form id="add-bond-form" class="grid gap-1-5">
<label class="grid gap-0-5">
FLO ID
<input type="text" name="floid" pattern="[0-9a-zA-Z]{34}">
</label>
<label class="grid gap-0-5">
Amount (₹)
<input type="text" name="amount" pattern="\d.+">
</label>
<label class="grid gap-0-5">
Bond start date
<input type="date" name="start_date">
</label>
<label class="grid gap-0-5">
Base BTC value ($)
<input type="text" name="base" pattern="^[\d,]+.?\d$">
</label>
<label class="grid gap-0-5">
Base USD rate (₹)
<input type="number" name="usd_rate" step="0.01">
</label>
<label class="grid gap-0-5">
Guaranteed interest rate (%)
<input type="number" name="gi_r" min=0 max=100 step="0.01">
</label>
<label class="grid gap-0-5">
Guaranteed interest period
<div class="flex">
<input type="number" name="gi_pv">
<select name="gi_pt">
<option value="year(s)">year(s)</option>
<option value="month(s)">month(s)</option>
<option value="week(s)">week(s)</option>
<option value="day(s)">day(s)</option>
</select>
</div>
</label>
<label class="grid gap-0-5">
Gain share (%)
<input type="number" name="cut" min=0 max=100>
</label>
<label class="grid gap-0-5">
Lock-in period
<div class="flex">
<input type="number" name="lockin_v">
<select name="lockin_t">
<option value="year(s)">year(s)</option>
<option value="month(s)">month(s)</option>
<option value="week(s)">week(s)</option>
<option value="day(s)">day(s)</option>
</select>
</div>
</label>
<div class="grid flow-column align-center gap-1 justify-start">
<button type="submit">Add Bond</button>
<button type="reset">Clear</button>
</div>
</form>
</article>
<script id="init_lib" version="1.0.1">
//All util libraries required for Standard operations (DO NOT EDIT ANY)
@ -9447,6 +9486,11 @@ Bitcoin.Util = {
}
}
function showPage(target){
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
getRef(target).classList.remove('hide-completely')
}
</script>
<script>
function onLoadStartUp() {