-
Notifications
You must be signed in to change notification settings - Fork 0
/
chooseSpots.html
134 lines (119 loc) · 5.24 KB
/
chooseSpots.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Melbourne Planner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="MobileOptimized" content="640">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--link with css and js files-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/general.css" rel="stylesheet">
<link href="css/developers.css" rel="stylesheet">
<link href="lib/sohp.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<script src="js/jquery-1.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/general.js"></script>
<script src="js/developers.js"></script>
<script src="lib/jquery.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body class="wm-competible">
<!-- mobile-indicator -->
<div id="wm-mobile-indicator" class="visible-xs"></div>
<!--side nav-->
<!--link with the content above-->
<div id="sidenav"></div>
<!--site-->
<div id="site">
<!-- navbar -->
<div class="mode1" id="topnav">
<div class="navbar navbar-fixed-top wm-navbar" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" rel="external">
<span class="navmode mode1">
<!--should be the logo of our website, which is to be designed-->
<img alt="TouristPlanner" class="offSticky" src="">
<img alt="TouristPlanner" class="onSticky" src="img/logo1(190-66).png">
</span>
</a>
</div>
<div class="">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="item1"><a class="needsclick" rel="external" href="feedback.html">Feedback<span class="indicator hidden-xs"></span></a></li>
<li class="item2"><a class="needsclick" href="developers.html" rel="external">Developers<span class="indicator hidden-xs"></span></a></li>
</ul>
</div>
</div>
<ul class="nav navbar-nav navbar-right" style="position:fixed; right:47px; top:0">
<li><a href="map.html" rel="external" class="needsclick">Map<span class="indicator"></span></a></li>
</ul>
</div>
</div>
<!--end navbar-->
<!--body-->
<!--styles defined in bootstrap and developers.css-->
<!--<div style="background-image:url(img/1.jpg); background-size: cover; background-repeat: no-repeat;">-->
<div class="col-xs-12" style="background-image:url(img/date.jpg); background-size: cover; background-repeat: no-repeat; min-height:600px;">
<div class="container">
<div class="row" style="margin-top: 150px;">
<!--<div class="col-xs-6 col-md-4 text-center spot-day">
DAY 1
</div>-->
<!--<div class="col-xs-12 col-md-8 col-sm-6" style="min-height:400px;">-->
<!--<div class="row">-->
<!--Use four buttons to show the different type of places-->
<!--Click the button, then show corresponding places of name. Click this button again then hide this list of place name.-->
<div class="col-xs-12 col-md-6 text-center">
<label class="spot-btn" onclick="click_show('History');">History</label>
</div>
<div class="col-xs-12 col-md-6 text-center">
<label class="spot-btn" onclick="click_show('Shopping');">Shopping</label>
</div>
<!--</div>-->
<!--<div class="row">-->
<div class="col-xs-12 col-md-6 text-center">
<label class="spot-btn" onclick="click_show('Entertainment');">Entertainment</label>
</div>
<div class="col-xs-12 col-md-6 text-center">
<label class="spot-btn" onclick="click_show('Nature');">Nature</label>
</div>
<!--</div>-->
<!--Create the ul list to show the name of places in its kind of type.-->
<div class="row spacer"></div>
<div id="category">
<ul class="col-xs-6 col-sm-3 categoryNames" id="History"></ul>
<ul class="col-xs-6 col-sm-3 categoryNames" id="Shopping"></ul>
<ul class="col-xs-6 col-sm-3 categoryNames" id="Entertainment"></ul>
<ul class="col-xs-6 col-sm-3 categoryNames" id="Nature"></ul>
</div>
<!--show the map-->
<div id="map" style="max-height:100% "></div>
<!--</div>-->
</div>
</div>
</div>
<!--</div>-->
<!--footer-->
<div class="row spacer lastSpacer"></div>
<div class="section footer wm-section-footer">
<div class="container">
<div class="copyrights col-sm-12 text-center">
TouristPlanner © copyright 2015. all rights reserved
</div>
</div>
</div>
<!--end footer-->
</div>
<!--end site-->
<!--this javascript is prepared for map-->
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap" async defer></script>
<!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>-->
<!--call the function for these four buttons-->
<script type="text/javascript" src="js/chooseSpots.js"></script>
</body>
</html>