屏幕使用时间程序 HTML 界面设计：圆形按钮，黄色主题

<!DOCTYPE html>
<html>
<head>
<title>屏幕使用时间程序</title>
<style>
body {
background-color: #f5f3e7;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
<p>h1 {
color: #ffcc00;
text-align: center;
}</p>
<p>.container {
display: flex;
justify-content: center;
margin-top: 50px;
}</p>
<p>.button {
width: 100px;
height: 100px;
background-color: #ffd633;
border-radius: 50%;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s;
}</p>
<p>.button:hover {
background-color: #ffcc00;
}
</style></p>
</head>
<body>
<h1>屏幕使用时间程序</h1>
<div class="container">
<div class="button" onclick="openReport()">报告</div>
<div class="button" onclick="openSettings()">设置</div>
<div class="button" onclick="openAbout()">关于</div>
</div>
<script>
function openReport() {
// TODO: 打开报告页面的逻辑
console.log('打开报告页面');
}

function openSettings() {
// TODO: 打开设置页面的逻辑
console.log('打开设置页面');
}

function openAbout() {
// TODO: 打开关于页面的逻辑
console.log('打开关于页面');
}
</script>
</body>
</html>