Taichung_Bus/terms.html at main · xiaojie4082/Taichung_Bus · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html lang="zh-TW">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="台中公車即時查詢系統 - 使用條款" />
        <meta name="author" content="xiaojie4082" />
        <title>使用條款 - 台中公車查詢</title>
        <link rel="icon" type="image/x-icon" href="./icon.png" />
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Bootstrap Icons -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
        <style>
            body {
                background-color: #f8f9fa;
            }

            .navbar {
                background: rgba(255, 255, 255, 0.98) !important;
                backdrop-filter: blur(10px);
                border-bottom: 1px solid rgba(0, 0, 0, 0.08);
                padding: 0.8rem 0;
            }

            .navbar-brand {
                font-weight: 700;
                font-size: 1.4rem;
                color: var(--bs-primary) !important;
                display: flex;
                align-items: center;
                gap: 0.6rem;
                padding: 0.5rem 1rem;
                border-radius: 0.8rem;
                transition: all 0.3s ease;
            }

            .navbar-brand:hover {
                background: rgba(13, 110, 253, 0.1);
                transform: translateY(-1px);
            }

            .navbar-brand i {
                font-size: 1.6rem;
                background: var(--bs-primary);
                color: white;
                padding: 0.4rem;
                border-radius: 0.6rem;
            }

            .nav-link {
                font-weight: 600;
                color: var(--bs-dark) !important;
                padding: 0.7rem 1.2rem !important;
                border-radius: 0.8rem;
                transition: all 0.3s ease;
                margin: 0 0.2rem;
                display: flex;
                align-items: center;
                gap: 0.5rem;
            }

            .nav-link:hover {
                background: rgba(13, 110, 253, 0.1);
                color: var(--bs-primary) !important;
                transform: translateY(-1px);
            }

            .nav-link.active {
                background: var(--bs-primary);
                color: white !important;
                box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
            }

            .nav-link i {
                font-size: 1.2rem;
            }

            .navbar-toggler {
                border: none;
                padding: 0.5rem;
                border-radius: 0.8rem;
                transition: all 0.3s ease;
            }

            .navbar-toggler:hover {
                background: rgba(13, 110, 253, 0.1);
            }

            .navbar-toggler:focus {
                box-shadow: none;
            }

            .hero-section {
                background: linear-gradient(135deg, var(--bs-primary) 0%, #0a58ca 100%);
                color: white;
                padding: 4rem 0;
                margin-bottom: 2rem;
            }

            .content-card {
                background: white;
                border-radius: 1rem;
                padding: 2rem;
                box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
                margin-bottom: 2rem;
            }

            .footer {
                background-color: #f8f9fa;
                padding: 2rem 0;
                margin-top: 4rem;
                border-top: 1px solid #dee2e6;
            }
        </style>
    </head>
    <body>
        <!-- 導航欄 -->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top">
            <div class="container">
                <a class="navbar-brand" href="index.html">
                    <i class="bi bi-bus-front"></i>
                    <span>台中公車查詢</span>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav ms-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">
                                <i class="bi bi-house-door"></i>
                                <span>首頁</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="about.html">
                                <i class="bi bi-info-circle"></i>
                                <span>關於</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 主要內容區 -->
        <main style="padding-top: 76px;">
            <!-- 英雄區塊 -->
            <section class="hero-section">
                <div class="container text-center">
                    <h1 class="display-4 fw-bold mb-3">使用條款</h1>
                    <p class="lead mb-0">請詳細閱讀以下使用條款</p>
                </div>
            </section>

            <!-- 內容區塊 -->
            <div class="container">
                <div class="content-card">
                    <h2 class="h4 mb-4">服務說明</h2>
                    <p>台中公車即時查詢系統提供公車路線查詢、即時到站資訊等服務。使用者應遵守以下條款：</p>

                    <h2 class="h4 mb-4 mt-5">使用規範</h2>
                    <ul>
                        <li>不得利用本系統進行任何違法或不當行為</li>
                        <li>不得干擾系統正常運作</li>
                        <li>不得未經授權存取系統資料</li>
                    </ul>

                    <h2 class="h4 mb-4 mt-5">免責聲明</h2>
                    <p>本系統提供的公車資訊僅供參考，實際到站時間可能因交通狀況而有所變動。使用者應自行判斷資訊的準確性。</p>

                    <h2 class="h4 mb-4 mt-5">智慧財產權</h2>
                    <p>本系統的所有內容，包括但不限於文字、圖片、程式碼等，均受智慧財產權法保護。</p>
                </div>
            </div>
        </main>

        <!-- 頁尾 -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start">
                        <p class="mb-0">Copyright © 2024 xiaojie4082. All rights reserved.</p>
                    </div>
                    <div class="col-md-6 text-center text-md-end">
                        <a href="privacy.html" class="text-decoration-none me-3">隱私政策</a>
                        <a href="terms.html" class="text-decoration-none">使用條款</a>
                    </div>
                </div>
            </div>
        </footer>

        <!-- Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>