<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Battery Indicator's Popup</title> <style> html, body { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FAFAFA; color: #0C1A25; } .main { padding: .5em; width: 150px; display: flex; flex-direction: column; align-items: center; } #status { font-size: .9em; margin-top: .5em; } #status > p { margin-top: 0; margin-bottom: .5em; } #i-notCharging, #i-charging { display: none; margin: 0 auto; width: 30px; height: 30px; } </style> </head> <body> <div class="main"> <svg id="i-notCharging" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#CF4942" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="1" y="6" width="18" height="12" rx="2" ry="2"/> <path d="M23 13v-2"/> </svg> <svg id="i-charging" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19" fill="none" stroke="#68D675" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/> <path fill="none" stroke="#68D675" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M23 13v-2M11 6l-4 6h6l-4 6"/> </svg> <div id="status"></div> </div> <script src="scripts/popup.js"></script> </body> </html>