Untitled
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...