UI improvements
This commit is contained in:
parent
a8c2c6187e
commit
b293fb3f06
27
css/main.css
27
css/main.css
@ -37,9 +37,9 @@ body[data-theme=dark] * {
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 0.8;
|
font-size: 0.9rem;
|
||||||
max-width: 65ch;
|
max-width: 65ch;
|
||||||
line-height: 1.7;
|
line-height: 1.5;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -427,13 +427,34 @@ main {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#banner {
|
||||||
|
padding: 1.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
max-width: 38rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr:nth-of-type(2n + 1) {
|
||||||
|
background: rgba(var(--text-color), 0.06);
|
||||||
|
}
|
||||||
tr td {
|
tr td {
|
||||||
padding: 0.5rem 0;
|
padding: 0.8rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
tr td:first-of-type {
|
tr td:first-of-type {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
tr td:last-of-type {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 640px) {
|
@media screen and (max-width: 640px) {
|
||||||
main {
|
main {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -34,9 +34,9 @@ body[data-theme="dark"] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
font-size: 0.8;
|
font-size: 0.9rem;
|
||||||
max-width: 65ch;
|
max-width: 65ch;
|
||||||
line-height: 1.7;
|
line-height: 1.5;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
@ -350,15 +350,33 @@ main {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#banner {
|
||||||
|
padding: 1.5rem;
|
||||||
|
background-color: rgba(var(--text-color), 0.06);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
max-width: 38rem;
|
||||||
|
}
|
||||||
tr {
|
tr {
|
||||||
|
&:nth-of-type(2n + 1) {
|
||||||
|
background: rgba(var(--text-color), 0.06);
|
||||||
|
}
|
||||||
td {
|
td {
|
||||||
padding: 0.5rem 0;
|
padding: 0.8rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
&:last-of-type {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.stat-value {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
@media screen and (max-width: 640px) {
|
@media screen and (max-width: 640px) {
|
||||||
main {
|
main {
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
|
|||||||
106
index.html
106
index.html
@ -271,18 +271,17 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<article class="right language-html">
|
<article class="right language-html">
|
||||||
<section id="dashboard" class="page">
|
<section id="dashboard" class="page">
|
||||||
<h1 class="page__title">Tokenroom Economic system</h1>
|
<div class="grid gap-0-5" id="banner">
|
||||||
<div class="grid gap-0-5">
|
<strong> Target </strong>
|
||||||
<div>
|
<p>Consumption Valuation should be higher than Production valuation.
|
||||||
<p>Target: Consumption Valuation should be higher than Production valuation</p>
|
Amount to go till Consumption Valuation catches up with production Valuation
|
||||||
<p>Amount to go till Consumption Valuation catches up with production Valuation</p>
|
</p>
|
||||||
</div>
|
<b id="amount-left-production-consumption-catchup">
|
||||||
<div id="amount-left-production-consumption-catchup">
|
|
||||||
<sm-spinner></sm-spinner>
|
<sm-spinner></sm-spinner>
|
||||||
</div>
|
</b>
|
||||||
</div>
|
</div>
|
||||||
<br>
|
<br>
|
||||||
<div class="card-wrapper">
|
<!-- <div class="card-wrapper">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>Expenses</h3>
|
<h3>Expenses</h3>
|
||||||
<p id="total-amount-issued">
|
<p id="total-amount-issued">
|
||||||
@ -302,13 +301,13 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>Revenue (Booked + stayed)</h3>
|
<h3>Gross Revenue (Booked + stayed)</h3>
|
||||||
<p id="total-consumption-cost">
|
<p id="total-consumption-cost">
|
||||||
<sm-spinner></sm-spinner>
|
<sm-spinner></sm-spinner>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h3>Consumption valuation</h3>
|
<h3>Revenue from stays</h3>
|
||||||
<p id="consumption-valuation">
|
<p id="consumption-valuation">
|
||||||
<sm-spinner></sm-spinner>
|
<sm-spinner></sm-spinner>
|
||||||
</p>
|
</p>
|
||||||
@ -319,7 +318,90 @@
|
|||||||
<sm-spinner></sm-spinner>
|
<sm-spinner></sm-spinner>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> -->
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4>
|
||||||
|
Expenses
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
Includes rent of the property, maintenance, staff salaries, etc.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td id="total-amount-issued" class="stat-value">
|
||||||
|
<sm-spinner></sm-spinner>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4>
|
||||||
|
Price per room night
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
Includes rent of the property, maintenance, staff salaries, etc.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td id="price-per-unit-consumption" class="stat-value">
|
||||||
|
<sm-spinner></sm-spinner>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4>
|
||||||
|
Total room nights stayed
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
Includes rent of the property, maintenance, staff salaries, etc.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td id="total-consumption-measured" class="stat-value">
|
||||||
|
<sm-spinner></sm-spinner>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4>
|
||||||
|
Gross Revenue (Booked + stayed)
|
||||||
|
Total room nights stayed
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
Includes rent of the property, maintenance, staff salaries, etc.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td id="total-consumption-cost" class="stat-value">
|
||||||
|
<sm-spinner></sm-spinner>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4>
|
||||||
|
Revenue from stays
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
Includes rent of the property, maintenance, staff salaries, etc.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td id="consumption-valuation" class="stat-value">
|
||||||
|
<sm-spinner></sm-spinner>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<h4>
|
||||||
|
System Valuation
|
||||||
|
</h4>
|
||||||
|
<p>
|
||||||
|
Includes rent of the property, maintenance, staff salaries, etc.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
<td id="system-valuation" class="stat-value">
|
||||||
|
<sm-spinner></sm-spinner>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="userinfo" class="page hide">
|
<section id="userinfo" class="page hide">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user