Update finance training and dashboard UI
This commit is contained in:
@@ -37,16 +37,26 @@
|
||||
}
|
||||
</MudText>
|
||||
</MudStack>
|
||||
<div class="dashboard-manometer" aria-label="Export activity manometer">
|
||||
<div class="manometer-arc">
|
||||
<span class="tick tick-0"></span>
|
||||
<span class="tick tick-1"></span>
|
||||
<span class="tick tick-2"></span>
|
||||
<span class="tick tick-3"></span>
|
||||
<span class="tick tick-4"></span>
|
||||
<span class="needle"></span>
|
||||
<span class="hub"></span>
|
||||
</div>
|
||||
<div class="dashboard-manometer">
|
||||
<svg class="manometer-svg" viewBox="0 0 210 118" role="img" aria-label="Export activity manometer">
|
||||
<path class="manometer-outer" d="M25 98 A80 80 0 0 1 185 98" />
|
||||
<path class="manometer-inner" d="M47 98 A58 58 0 0 1 163 98" />
|
||||
<line class="manometer-tick" x1="38" y1="98" x2="56" y2="98" />
|
||||
<line class="manometer-tick" x1="61" y1="54" x2="74" y2="67" />
|
||||
<line class="manometer-tick" x1="105" y1="34" x2="105" y2="52" />
|
||||
<line class="manometer-tick" x1="149" y1="54" x2="136" y2="67" />
|
||||
<line class="manometer-tick" x1="172" y1="98" x2="154" y2="98" />
|
||||
<text class="manometer-label" x="43" y="89">0</text>
|
||||
<text class="manometer-label" x="67" y="53">25</text>
|
||||
<text class="manometer-label" x="105" y="28">50</text>
|
||||
<text class="manometer-label" x="143" y="53">75</text>
|
||||
<text class="manometer-label" x="167" y="89">100</text>
|
||||
<text class="manometer-caption" x="105" y="113">EXPORT</text>
|
||||
<g class="manometer-needle">
|
||||
<line class="needle-line" x1="105" y1="98" x2="105" y2="38" />
|
||||
</g>
|
||||
<circle class="manometer-hub" cx="105" cy="98" r="11" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</MudPaper>
|
||||
@@ -211,87 +221,80 @@
|
||||
justify-self: end;
|
||||
width: 210px;
|
||||
height: 118px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border: 1px solid #111;
|
||||
border-radius: 6px;
|
||||
padding: 12px 14px 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.manometer-arc {
|
||||
position: relative;
|
||||
width: 170px;
|
||||
height: 86px;
|
||||
border: 8px solid #111;
|
||||
border-bottom: 0;
|
||||
border-radius: 170px 170px 0 0;
|
||||
background: #fff;
|
||||
overflow: visible;
|
||||
.manometer-svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.manometer-arc::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
right: 14px;
|
||||
bottom: -1px;
|
||||
height: 70px;
|
||||
border: 2px solid #111;
|
||||
border-bottom: 0;
|
||||
border-radius: 140px 140px 0 0;
|
||||
.manometer-outer,
|
||||
.manometer-inner {
|
||||
fill: none;
|
||||
stroke: #111;
|
||||
stroke-linecap: square;
|
||||
}
|
||||
|
||||
.tick {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background: #111;
|
||||
transform-origin: 50% 78px;
|
||||
.manometer-outer {
|
||||
stroke-width: 8;
|
||||
}
|
||||
|
||||
.tick-0 { transform: translateX(-50%) rotate(-70deg); }
|
||||
.tick-1 { transform: translateX(-50%) rotate(-35deg); }
|
||||
.tick-2 { transform: translateX(-50%) rotate(0deg); }
|
||||
.tick-3 { transform: translateX(-50%) rotate(35deg); }
|
||||
.tick-4 { transform: translateX(-50%) rotate(70deg); }
|
||||
.manometer-inner {
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.needle {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
height: 72px;
|
||||
background: #111;
|
||||
border-radius: 4px;
|
||||
transform-origin: 50% 100%;
|
||||
.manometer-tick,
|
||||
.needle-line {
|
||||
stroke: #111;
|
||||
stroke-width: 3;
|
||||
stroke-linecap: square;
|
||||
}
|
||||
|
||||
.manometer-needle {
|
||||
transform-box: view-box;
|
||||
transform-origin: 105px 98px;
|
||||
animation: manometer-sweep 5.8s infinite cubic-bezier(.45, 0, .25, 1);
|
||||
}
|
||||
|
||||
.hub {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -8px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #111;
|
||||
transform: translateX(-50%);
|
||||
.manometer-hub {
|
||||
fill: #111;
|
||||
}
|
||||
|
||||
.manometer-label,
|
||||
.manometer-caption {
|
||||
fill: #111;
|
||||
font-family: Arial, sans-serif;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.manometer-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.manometer-caption {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@@keyframes manometer-sweep {
|
||||
0% { transform: translateX(-50%) rotate(-52deg); }
|
||||
11% { transform: translateX(-50%) rotate(18deg); }
|
||||
19% { transform: translateX(-50%) rotate(-8deg); }
|
||||
33% { transform: translateX(-50%) rotate(63deg); }
|
||||
48% { transform: translateX(-50%) rotate(4deg); }
|
||||
61% { transform: translateX(-50%) rotate(38deg); }
|
||||
74% { transform: translateX(-50%) rotate(-41deg); }
|
||||
88% { transform: translateX(-50%) rotate(55deg); }
|
||||
100% { transform: translateX(-50%) rotate(-52deg); }
|
||||
0% { transform: rotate(-52deg); }
|
||||
11% { transform: rotate(18deg); }
|
||||
19% { transform: rotate(-8deg); }
|
||||
33% { transform: rotate(63deg); }
|
||||
48% { transform: rotate(4deg); }
|
||||
61% { transform: rotate(38deg); }
|
||||
74% { transform: rotate(-41deg); }
|
||||
88% { transform: rotate(55deg); }
|
||||
100% { transform: rotate(-52deg); }
|
||||
}
|
||||
|
||||
@@media (max-width: 900px) {
|
||||
|
||||
Reference in New Issue
Block a user