-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathindex.html
149 lines (143 loc) · 8.33 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta property="og:title" content="藥局口罩採購地圖">
<meta property="og:description" content="藥局口罩採購地圖">
<meta property="og:type" content="website">
<meta property="og:image" content="http://kiang.github.io/pharmacies/og_image.png">
<title>藥局口罩採購地圖</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/ol.css" type="text/css">
<link rel="stylesheet" href="css/ol3-sidebar.min.css" type="text/css" />
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/dark-hive/jquery-ui.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/dark-hive/theme.min.css" crossorigin="anonymous">
<style>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
html, body, #map {
height: 100%;
font: 10pt "Helvetica Neue", Arial, Helvetica, sans-serif;
}
a:link {
color: #ff0;
font-weight: 900;
}
.ui-front { z-index: 9999; }
</style>
</head>
<body>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.12&appId=1393405437614114&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist">
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li><a href="#book" role="tab"><i class="fa fa-book"></i></a></li>
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
<li><a href="https://github.com/kiang/pharmacies" role="tab" target="_blank"><i class="fa fa-github"></i></a></li>
<li><a href="#fb" role="tab"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header"><span id="sidebarTitle">請點選地圖中的點</span><span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<h1>系統已經停止更新，<br />僅供展示使用</h1>
<div id="sidebarContent">請點選地圖中的點</div>
<div class="btn-group-vertical" role="group" style="width: 100%;">
<a href="https://forms.gle/7jFfScLedN3A8ENA8" target="_blank" class="btn btn-primary btn-lg btn-block">藥局的朋友可以點這裡補充資訊</a>
<a href="https://github.com/kiang/pharmacies/issues" target="_blank" class="btn btn-primary btn-lg btn-block">網站問題反應</a>
</div>
</div>
<div class="sidebar-pane" id="book">
<h1 class="sidebar-header"><span id="weekTitle">說明</span><span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<div>
圖示說明：
<ul>
<li><span style="color:#ccc">▲</span>：目前沒有資料，無法判斷庫存情況</li>
<li><span style="color:#48c774">▲</span>：成人口罩 > 100 且兒童口罩 > 25</li>
<li><span style="color:#ffdd57">▲</span>：成人口罩 > 40 且兒童口罩 > 10</li>
<li><span style="color:#fc82b1">▲</span>：成人口罩 > 20 且兒童口罩 > 5</li>
<li><span style="color:#f00">▲</span>：成人口罩 <= 20 或兒童口罩 <= 5</li>
<li>藍色圓點：你目前所在位置（需要同意網站授權）</li>
</ul>
注意事項：
<ul>
<li>部分藥局因採發放號碼牌方式，方便民眾購買口罩，因目前無法顯示顯示已發送號碼牌數量。若看到剩餘數量，請先電洽藥局</li>
<li>口罩的取得須依政府頒布的規則辦理</li>
<li>庫存數量僅供參考，實際庫存仍以個別單位現場為準</li>
<li><a href="https://www.nhi.gov.tw/Content_List.aspx?n=395F52D193F3B5C7&topn=787128DAD5F71B1A" target="_blank">健保署說明</a></li>
</ul>
<img src="policy.jpg" style="width: 400px;" />
</div>
</div>
<div class="sidebar-pane" id="settings">
<h1 class="sidebar-header"><span id="weekTitle">設定</span><span class="sidebar-close"><i class="fa fa-caret-left"></i></span></h1>
<div>
<a href="#" class="btn btn-primary btn-lg btn-block" id="btn-geolocation">回到目前位置</a>
<p><hr /></p>
<div class="card">
<h5 class="card-title">搜尋</h5>
<div class="form-group">
<label for="findPoint">名稱或代號</label>
<input type="text" id="findPoint" name="findPoint" class="form-control"></input>
</div>
</div>
<p><hr /></p>
<div class="card">
<h5 class="card-title">行政區過濾</h5>
<div class="form-group">
<label for="selectCounty">縣市</label>
<select id="selectCounty" name="selectCounty" class="form-control form-select"></select>
</div>
<div class="form-group">
<label for="selectTown">鄉鎮市區</label>
<select id="selectTown" name="selectTown" class="form-control form-select"></select>
</div>
<div class="form-group">
<label for="selectCunli">村里</label>
<select id="selectCunli" name="selectCunli" class="form-control form-select"></select>
</div>
</div>
</div>
</div>
<div class="sidebar-pane" id="fb">
<div class="fb-page" data-href="https://www.facebook.com/k.olc.tw/" data-tabs="timeline" data-width="380" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/k.olc.tw/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/k.olc.tw/">江明宗</a></blockquote></div>
</div>
</div>
</div>
<div id="map" class="sidebar-map"></div>
<div style="position: fixed; bottom: 0px; left: 0px;">
<a href="https://facebook.com/k.olc.tw/" target="_blank" class="btn btn-lg alert-primary">北中西區台南市議員參選人江明宗 製作</a>
</div>
<script src="js/routie.min.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/ol.js" type="text/javascript"></script>
<script src="js/ol5-sidebar.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-80817009-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-80817009-3');
</script>
</body>
</html>