-
Notifications
You must be signed in to change notification settings - Fork 0
/
hospital-list.html
178 lines (176 loc) · 6.68 KB
/
hospital-list.html
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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta
name="description"
content="四癌篩檢補助資訊網，介紹台中市轄區內癌症篩檢的補助資訊，總共有四項癌症補助：口腔癌(口腔黏膜檢查)、乳癌(乳房X光攝影檢查)、大腸癌(糞便潛血檢查)、子宮頸癌 (子宮頸抹片檢查)。"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>四癌篩檢補助 | 醫療機構列表</title>
<!-- Favicon -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<!-- CSS -->
<link rel="stylesheet" href="./css/hospital-list.css" />
</head>
<body>
<!-- LOGO + 導覽列 -->
<div class="header">
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="index.html"
><img src="./images/logo.svg" class="logo" alt="四癌篩檢補助 Logo"
/></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#dropdownMenu"
aria-controls="dropdownMenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<img src="./images/burger.svg" alt="Toggle Menu Button" />
</button>
<div class="collapse navbar-collapse" id="dropdownMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="introduce.html" class="nav-link">四癌篩檢介紹</a>
</li>
<li class="nav-item">
<a href="qualify-check.html" class="nav-link">補助資格查詢</a>
</li>
<li class="nav-item active">
<a href="hospital-list.html" class="nav-link">篩檢機構查詢</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- 主要內容 -->
<main class="container text-center">
<h1>四癌篩檢醫療機構列表</h1>
<!-- 查詢表單 -->
<section
class="search-section row justify-content-center align-items-end flex-nowrap no-gutters"
>
<div class="medical-staff-image-1 d-none d-lg-block"></div>
<div
class="search-form col row flex-column justify-content-center align-items-center no-gutters"
>
<label
for="selectDist"
class="search-label row justify-content-center justify-content-md-start justify-content-xxl-center align-items-center flex-nowrap text-nowrap w-100"
>
<span class="d-none d-md-block">請選擇欲查詢之區域</span>
<span class="d-block d-md-none">機構地區</span>
<select id="selectDist" class="mx-3">
<option value="all">全部</option>
</select>
</label>
<span class="search-choice-ask d-block d-md-none"
>請勾選您要搜尋的項目! (可複選)</span
>
<div class="row justify-content-between no-gutters">
<label
for="oralCancer"
class="search-choice row align-items-center flex-nowrap"
>
<input
type="checkbox"
id="oralCancer"
value="5"
data-name="口腔癌"
/>
<span></span>口腔癌 (口腔黏膜檢查)
</label>
<label
for="breastCancer"
class="search-choice row align-items-center flex-nowrap"
>
<input
type="checkbox"
id="breastCancer"
value="2"
data-name="乳癌"
/>
<span></span>乳癌 (乳房X光攝影檢查)
</label>
<label
for="colorectalCancer"
class="search-choice row align-items-center flex-nowrap"
>
<input
type="checkbox"
id="colorectalCancer"
value="7"
data-name="大腸癌"
/>
<span></span>大腸癌 (糞便潛血檢查)
</label>
<label
for="uterineCancer"
class="search-choice row align-items-center flex-nowrap"
>
<input
type="checkbox"
id="uterineCancer"
value="3"
data-name="子宮頸癌"
/>
<span></span>子宮頸癌 (子宮頸抹片檢查)
</label>
</div>
<button class="btn btn-search-layout btn-search">開始查詢</button>
<div class="limit-border"></div>
</div>
<div class="medical-staff-image-2 d-block d-lg-none d-xxl-block"></div>
</section>
<div class="hr-border d-block d-sm-none"></div>
<!-- 查詢結果顯示 -->
<section class="search-result">
<h2></h2>
<div
class="hospital-cards row justify-content-between align-items-start no-gutters"
></div>
</section>
</main>
<!-- Modal -->
<div class="modal fade" id="alertModal" tabindex="-1">
<div class="modal-dialog modal-sm modal-dialog-centered">
<div class="modal-content">
<div class="modal-header flex-column align-items-center">
<img src="./images/alert.svg" alt="">
<h5 class="modal-title ">您尚未選擇篩檢項目</h5>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-alert" data-dismiss="modal">確定</button>
</div>
</div>
</div>
</div>
<!-- 表尾資訊 -->
<footer>
<div class="row justify-content-between align-items-center no-gutters">
<p class="col-lg-6 col-md-12 p-0 text-center text-lg-left">
<span class="text-nowrap">Copyright © 2022 </span>
<span class="text-nowrap">Screening for Four Major Cancers </span>
<span class="text-nowrap">| Taichung Version</span>
</p>
<p class="col-lg-6 col-md-12 p-0 text-center text-lg-right">
資料來源 :
<a href="https://www.mohw.gov.tw/" target="_blank">衛生福利部</a>、<a
href="https://www.health.taichung.gov.tw/"
target="_blank"
>臺中市衛生局</a
> <span class="d-inline d-lg-none">(截至2022.05.31)</span>
</p>
</div>
</footer>
<!-- Javascript -->
<script src="./js/jquery.slim.min.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="./js/district.js"></script>
<script src="./js/hospital-list.js"></script>
</body>
</html>