<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Theme Clock</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- 灵感来自这个运球投篮 https://dribbble.com/shots/5958443-Alarm-clock -->
<!-- 切换模式 -->
<button class="toggle">黑暗主题</button>
<!-- 时钟容器 -->
<div class="clock-container">
<!-- 时钟 -->
<div class="clock">
<!-- 时针 -->
<div class="needle hour"></div>
<!-- 分针 -->
<div class="needle minute"></div>
<!-- 秒针 -->
<div class="needle second"></div>
<!-- 中心点 -->
<div class="center-point"></div>
<!-- 表盘 -->
<div class="dial">
<div class="dialNum"></div>
<div class="dialNum"></div>
<div class="dialNum">3</div>
<div class="dialNum"></div>
<div class="dialNum"></div>
<div class="dialNum">6</div>
<div class="dialNum"></div>
<div class="dialNum"></div>
<div class="dialNum">9</div>
<div class="dialNum"></div>
<div class="dialNum"></div>
<div class="dialNum">12</div>
</div>
</div>
<!-- 时间 -->
<div class="time"></div>
<!-- 日期 -->
<div class="date"></div>
</div>
<script src="script.js"></script>
</body>
</html>
