布局源码如下
<!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>