DataDreamerX/clock
0
1<!DOCTYPE html>
2<html lang="zh-CN">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Desktop Clock</title>
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link
11 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Orbitron:wght@400;700&family=VT323&family=Jersey+10&display=swap"
12 rel="stylesheet">
13 <link rel="stylesheet" href="style.css">
14 <script src="https://cdn.jsdelivr.net/npm/lunar-javascript@1.6.12/lunar.min.js"></script>
15</head>
16
17<body>
18 <button id="theme-toggle" class="theme-toggle" aria-label="Switch Theme">
19 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
20 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
21 <circle cx="12" cy="12" r="5" />
22 <path
23 d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
24 </svg>
25 </button>
26
27 <div id="theme-menu" class="theme-menu hidden">
28 <h3>Select Theme</h3>
29 <button class="theme-btn" data-theme="midnight">Midnight Monolith</button>
30 <button class="theme-btn" data-theme="polar">Polar Day</button>
31 <button class="theme-btn" data-theme="neon">Digital Day</button>
32 <button class="theme-btn" data-theme="retro">Retro Pop</button>
33 <button class="theme-btn" data-theme="swiss">Swiss Minimalist</button>
34 </div>
35
36 <div class="clock-container">
37 <div class="date-section">
38 <div id="solar-date" class="solar-date"></div>
39 <div id="lunar-date" class="lunar-date"></div>
40 </div>
41 <div id="time-display" class="time-display"></div>
42 </div>
43 <script src="script.js"></script>
44</body>
45
46</html>