128 lines
3.5 KiB
Plaintext
128 lines
3.5 KiB
Plaintext
@page "/"
|
|
@using TrafagSalesExporter.Services
|
|
@inject IUiTextService UiText
|
|
|
|
<PageTitle>@T("Trafag Cockpit", "Trafag Cockpit")</PageTitle>
|
|
|
|
<div class="home-shell">
|
|
<div class="home-content">
|
|
<svg class="home-manometer" viewBox="0 0 600 340" role="img" aria-label="Trafag cockpit manometer">
|
|
<rect x="0" y="0" width="600" height="340" fill="#fff" />
|
|
<path d="M70 260 A230 230 0 0 1 530 260" class="gauge-outer" />
|
|
<path d="M115 260 A185 185 0 0 1 485 260" class="gauge-inner" />
|
|
|
|
<line x1="126" y1="260" x2="95" y2="260" class="gauge-tick" />
|
|
<line x1="177" y1="137" x2="155" y2="115" class="gauge-tick" />
|
|
<line x1="300" y1="86" x2="300" y2="55" class="gauge-tick" />
|
|
<line x1="423" y1="137" x2="445" y2="115" class="gauge-tick" />
|
|
<line x1="474" y1="260" x2="505" y2="260" class="gauge-tick" />
|
|
|
|
<text x="150" y="230" class="gauge-label">0</text>
|
|
<text x="205" y="154" class="gauge-label">25</text>
|
|
<text x="300" y="126" class="gauge-label">50</text>
|
|
<text x="395" y="154" class="gauge-label">75</text>
|
|
<text x="450" y="230" class="gauge-label">100</text>
|
|
<text x="300" y="222" class="gauge-brand">TRAFAG</text>
|
|
|
|
<g class="gauge-needle">
|
|
<line x1="300" y1="260" x2="300" y2="96" class="needle-line" />
|
|
</g>
|
|
<circle cx="300" cy="260" r="28" fill="#050505" />
|
|
</svg>
|
|
<div class="home-welcome">@T("Willkommen im Trafag Analyse Dashboard", "Welcome to the Trafag Analytical Dashboard")</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.home-shell {
|
|
min-height: calc(100vh - 112px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #fff;
|
|
}
|
|
|
|
.home-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 18px;
|
|
}
|
|
|
|
.home-manometer {
|
|
width: min(336px, 58vw);
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.home-welcome {
|
|
color: #050505;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.gauge-outer,
|
|
.gauge-inner,
|
|
.gauge-tick,
|
|
.needle-line {
|
|
fill: none;
|
|
stroke: #050505;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
.gauge-outer {
|
|
stroke-width: 16;
|
|
}
|
|
|
|
.gauge-inner {
|
|
stroke-width: 4;
|
|
}
|
|
|
|
.gauge-tick {
|
|
stroke-width: 7;
|
|
}
|
|
|
|
.gauge-label {
|
|
fill: #050505;
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
text-anchor: middle;
|
|
dominant-baseline: middle;
|
|
}
|
|
|
|
.gauge-brand {
|
|
fill: #050505;
|
|
font-size: 28px;
|
|
font-weight: 900;
|
|
letter-spacing: 4px;
|
|
text-anchor: middle;
|
|
}
|
|
|
|
.needle-line {
|
|
stroke-width: 9;
|
|
}
|
|
|
|
.gauge-needle {
|
|
transform-origin: 300px 260px;
|
|
animation: home-gauge-sweep 6.2s infinite cubic-bezier(.42, 0, .2, 1);
|
|
}
|
|
|
|
@@keyframes home-gauge-sweep {
|
|
0% { transform: rotate(-58deg); }
|
|
9% { transform: rotate(-12deg); }
|
|
18% { transform: rotate(43deg); }
|
|
31% { transform: rotate(8deg); }
|
|
44% { transform: rotate(68deg); }
|
|
58% { transform: rotate(-35deg); }
|
|
72% { transform: rotate(24deg); }
|
|
86% { transform: rotate(56deg); }
|
|
100% { transform: rotate(-58deg); }
|
|
}
|
|
</style>
|
|
|
|
@code {
|
|
private string T(string german, string english) => UiText.Text(german, english);
|
|
}
|