TechClock/index.html at main · MouchiLab/TechClock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechClock</title>
    <link rel="stylesheet" href="styles/style.css">

    <!-- SEO Meta Tags -->
    <meta name="description" content="TechClock 是一款支援多時區、12/24 小時制切換、臺灣節慶顯示的工業風格時鐘。適合工程師桌面、辦公室等場景。">
    <meta name="keywords" content="時鐘, 工業風, 多時區, 臺灣時間, UTC, 響應式設計, 節慶顯示">
    <meta name="author" content="MouchiLab 麻糬科技實驗室">

    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="TechClock - 臺灣時鐘">
    <meta property="og:description" content="TechClock 是一款支援多時區、12/24 小時制切換、臺灣節慶顯示的工業風格時鐘。適合工程師桌面、辦公室等場景。">
    <meta property="og:image" content="assets/images/preview-image.png">
    <meta property="og:url" content="https://mouchilab.github.io/TechClock/">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="zh_TW">

    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="TechClock - 臺灣時鐘">
    <meta name="twitter:description" content="TechClock 是一款支援多時區、12/24 小時制切換、臺灣節慶顯示的工業風格時鐘。">
    <meta name="twitter:image" content="assets/images/preview-image.png">

    <!-- Favicon -->
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
    <link rel="icon" href="assets/images/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="assets/images/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
    <link rel="manifest" href="assets/images/site.webmanifest">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://mouchilab.github.io/TechClock/">

</head>
<body>
    <div class="clock-container">
        <button class="mode-toggle" id="mode-toggle" title="切換控制模式">
            <svg id="settings-icon" viewBox="0 0 24 24" class="hidden">
                <path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
            </svg>
            <svg id="display-icon" viewBox="0 0 24 24">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
            </svg>
        </button>
        <div class="label" id="timezone-label">TAIWAN LOCAL TIME</div>
        <div class="time">
            <span id="time">00:00:00</span>
            <span id="meridiem" class="meridiem"></span>
        </div>
        <div class="controls hidden" id="controls">
            <div class="btn-group">
                <button class="btn active" id="tw-time-btn">臺灣時間</button>
                <button class="btn" id="utc-time-btn">UTC時間</button>
            </div>
            <div class="btn-group">
                <button class="btn active" id="year-format-btn" data-tooltip="UTC時間只能使用西元年">民國年</button>
            </div>
            <div class="btn-group">
                <button class="btn active" id="format-btn" data-tooltip="UTC時間只能使用24小時制">24小時制</button>
            </div>
            <div class="btn-group">
                <button class="btn" id="share-btn">
                    <svg viewBox="0 0 24 24">
                        <path fill="currentColor" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
                    </svg>分享
                </button>
            </div>
        </div>
        <div class="divider"></div>
        <div class="date" id="date">民國000年00月00日</div>
        <div class="festival" id="festival"></div>
    </div>
    <div class="toast" id="toast">連結已複製到剪貼簿</div>

    <script src="scripts/main.js"></script>
</body>
</html>