-
Notifications
You must be signed in to change notification settings - Fork 0
/
guide-cn.html
executable file
·156 lines (150 loc) · 7.66 KB
/
guide-cn.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
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hello NZ - 指南</title>
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/material-components-web.min.css">
<link rel="stylesheet" href="css/hellonz.min.css">
</head>
<body class="mdc-typography mdc-typography--body1">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<img alt="logo" class="logo" src="img/logo.png">
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<span class="mdc-top-app-bar__title x-center pl-0">Hello NZ</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<div class="mdc-menu-surface--anchor">
<button class="material-icons mdc-top-app-bar__action-item mdc-icon-button top-right-menu"
aria-label="Download">more_vert</button>
<div class="mdc-menu mdc-menu-surface">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
<li class="mdc-list-item" role="menuitem">Guide</li>
<li class="mdc-list-item" role="menuitem">指南</a></li>
<li class="mdc-list-divider" role="separator"></li>
<li class="mdc-list-item" role="menuitem">About</li>
</ul>
</div>
</div>
</section>
</div>
<div class="mdc-top-app-bar__row">
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab" role="tab" aria-selected="false" tabindex="-1">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">North Island</span>
<span class="mdc-tab-indicator">
<span
class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab mdc-tab" role="tab" aria-selected="false" tabindex="-1">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">South Island</span>
<span class="mdc-tab-indicator">
<span
class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="mdc-top-app-bar--fixed-adjust full-width">
<div class="mdc-layout-grid container">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<h1 class="mdc-typography--headline6">驾驶指南</h1>
<div class="underline"></div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<ul class="mdc-list mdc-list--non-interactive">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">directions_car</span>
请靠左侧开车.
</li>
</ul>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<h1 class="mdc-typography--headline6">图标指南</h1>
<div class="underline"></div>
</div>
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
<ul class="mdc-list mdc-list--non-interactive">
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons"
aria-hidden="true">signal_cellular_alt</span>
附近有移动网络信号.
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">wc</span>
附近有厕所.
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">local_drink</span>
附近有饮用水.
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">restaurant</span>
附近有咖啡厅.
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">accessible</span>
轮椅或婴儿推车可以通过.
</li>
<li class="mdc-list-item">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">terrain</span>
从山峰或高点远眺的景色.
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/material-components-web.min.js"></script>
<script>
mdc.autoInit();
var menuElement = document.querySelector('.mdc-menu');
var menu = new mdc.menu.MDCMenu(menuElement);
menu.setAnchorCorner(mdc.menuSurface.Corner.BOTTOM_START);
var menuButton = document.querySelector('.top-right-menu');
menuButton.addEventListener('click', function () {
menu.open = !menu.open;
});
menuElement.addEventListener('MDCMenu:selected', function (event) {
console.log(event.detail);
if (event.detail.index === 0) {
window.location.href = 'guide.html';
}
if (event.detail.index === 1) {
window.location.href = 'guide-cn.html';
}
if (event.detail.index === 2) {
window.location.href = 'about.html';
}
});
var tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
tabBar.listen('MDCTabBar:activated', function (event) {
var index = event.detail.index;
if (index === 0) {
window.location.href = 'nz.html';
} else if (index === 1) {
window.location.href = 'nz.html#si';
}
});
</script>
</body>
</html>