Samuele Locatelli
92 lines
4.0 KiB
Plaintext
92 lines
4.0 KiB
Plaintext
@page "/TestGauges"
|
|
|
|
<PageTitle>TestGauges</PageTitle>
|
|
|
|
<div>
|
|
|
|
<div class="row py-4" style="background-color: #ACDDAC;">
|
|
<div class="col-4">
|
|
<NumInput @bind-Value="@valDecimale"></NumInput>
|
|
<div>
|
|
<b>@valDecimale</b>
|
|
</div>
|
|
</div>
|
|
<div class="col-4">
|
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="RadialGrad2">
|
|
<stop offset="0%" stop-color="#000000" />
|
|
<stop offset="80%" stop-color="#151515" />
|
|
<stop offset="90%" stop-color="#444444" />
|
|
<stop offset="100%" stop-color="#878787" />
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="100" height="100" rx="50" fill="url(#RadialGrad2)" fill-opacity="0.5">
|
|
</rect>
|
|
<text id="TitleElem" x="10%" y="50%" class="text-light" style="font-size:2rem;">Titolo</text>
|
|
<g>
|
|
<rect x="10%" y="10%" width="80%" height="80%" fill="white" fill-opacity="0.1">
|
|
</rect>
|
|
<text x="10%" y="70%" class="text-light" style="font-size:0.8rem;">
|
|
testo più lungo... 0123456789
|
|
<animate attributeName="x"
|
|
values="10%;10%;-10%;-80%;-100%;-100%;10%"
|
|
dur="6s"
|
|
begin="2s"
|
|
repeatCount="indefinite" />
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="col-4">
|
|
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="RadialGrad2">
|
|
<stop offset="0%" stop-color="#000000" />
|
|
<stop offset="80%" stop-color="#151515" />
|
|
<stop offset="90%" stop-color="#444444" />
|
|
<stop offset="100%" stop-color="#878787" />
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="10" height="10" rx="5" fill="url(#RadialGrad2)" fill-opacity="0.5">
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
<div class="col-2 bg-dark">
|
|
</div>
|
|
<div class="col-2 bg-dark">
|
|
</div>
|
|
<div class="col-2 bg-dark">
|
|
<CircleGaugeMulti Titolo="@($"{currVal1}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemo1" ShowCircleBtn="true"></CircleGaugeMulti>
|
|
</div>
|
|
<div class="col-2 bg-dark">
|
|
<CircleGaugeMulti Titolo="@($"{currVal2}")" Testo="#pz prod" maxVal="@maxVal" ListInner="@DDemoIn2" ListOuter="@DDemoOut2" ShowCircleBtn="true"></CircleGaugeMulti>
|
|
</div>
|
|
<div class="col-2 bg-dark">
|
|
</div>
|
|
<div class="col-2 bg-dark">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 containerCalendario">
|
|
<div class="calendario">
|
|
<div class="d-flex justify-content-between">
|
|
<div>
|
|
<CircleGauge Titolo="9:00" Testo="Caricate" maxVal="480" currVal="540" StrokeColorVal="#F1C40F" ShowCircleBtn="true"></CircleGauge>
|
|
</div>
|
|
<div>
|
|
<CircleGauge Titolo="4:00" Testo="Lavorate" maxVal="480" currVal="240" StrokeColorVal="#00FF00" ShowCircleBtn="true"></CircleGauge>
|
|
</div>
|
|
<div>
|
|
<CircleGauge Titolo="12:00" Testo="Caricate" maxVal="480" currVal="720" StrokeColorVal="#F1C40F" StrokeColorValOuter="#01C4FF" ShowCircleBtn="true"></CircleGauge>
|
|
</div>
|
|
</div>
|
|
<div class="containerBtnTemp">
|
|
<button class="btn btn-sm btn-warning">
|
|
TEMP
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |