布局源码如下

<!DOCTYPE html>
<html data-bs-theme="dark">

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
  <link href="./styles.css" rel="stylesheet">
  <title>检测你的电脑是否开机</title>
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>

<body style="display: flex;flex-direction: column;padding: 5px;user-select: none;align-items: center;">
  <h1>电脑开机状态检测</h1>
  <button class="btn btn-primary btn-start-check">一键检测</button>
  <div style="height: 10px;"></div>
  <div class="progress" role="progressbar" style="width: 100%;">
    <div class="progress-bar" style="width: 0"></div>
  </div>
  <div style="height: 10px;"></div>
  <div class="alert alert-info status-alert" role="alert" style="display: none;">
  </div>



  <!-- You can also require other files to run in this process -->
  <script src="./renderer.js"></script>
</body>

</html>