Untitled

 avatar
unknown
plain_text
2 years ago
3.3 kB
2
Indexable
<!DOCTYPE html> 
<html>
    <head>
        <title>MA Dashboard</title>
        <style type="text/css">
        #button-wrapper {
            display: flex;
        }
  
        .button {
            padding: 10px;
            margin: 8px 0 8px 0;
            width: 75px;
            background-color: #3f7cf5;
            outline: none;
            color: white;
            font-weight: bold;
            font-size: 20px;
            border: none;
            cursor: pointer;
        }
        
        #output {
            padding: 16px;
            width: 200px;
            text-align: center;
            font-weight: bold;
            font-size: 28px;
            color: #f44336;
        }

        .circle-wrap {
            margin: 150px auto;
            width: 150px;
            height: 150px;
            background: #fefcff;
            border-radius: 50%;
            border: 1px solid #cdcbd0;
        }

        .circle-wrap .circle .mask,
        .circle-wrap .circle .fill {
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
}

.mask .fill {
  clip: rect(0px, 75px, 150px, 0px);
  background-color: #227ded;
}

.circle-wrap .circle .mask {
  clip: rect(0px, 150px, 150px, 75px);
}

.mask.full,
.circle .fill {
  animation: fill ease-in-out 3s;
  transform: rotate(180deg);
}

@keyframes fill{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
.circle-wrap .inside-circle {
  width: 122px;
  height: 122px;
  border-radius: 50%;
  background: #d2eaf1;
  line-height: 120px;
  text-align: center;
  margin-top: 14px;
  margin-left: 14px;
  color: #1e51dc;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
}
         </style>

    </head>
    <body>
        <h1>MA Dashboard</h1>
        <div id="button-wrapper">
            <button class="button" onclick="addMA()">+</button>
            <button class="button" onclick="subtractMA()">-</button>
        </div>
        <meter style="height:200px;" min="4" max="20" low="7" high="15" optimum="8" value="4"></meter>
        <div id="output">4 mA</div>
        <div class="circle-wrap">
            <div class="inside-circle"> 75% </div>
            <div class="circle">
                <div class="mask half">
                    <div class="fill">
                        <div class="mask full">
                            <div class="fill"></div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            let mA = 4;

            const outputText = document.getElementById("output");
            const meterElem = document.querySelector('meter'); 
            
            function addMA() {
                if (mA < 20) {
                    mA++; 
                    outputText.innerHTML = mA + " mA";
                    meterElem.value = mA;
            }
        }
  
        function subtractMA(){
            if(mA > 4){
            mA--; 
            outputText.innerHTML = mA + " mA";
            meterElem.value = mA;
            }
        }
  
        </script>
    </body>
</html>
Editor is loading...