Gitiles
Code Review Sign In
asterix-gerrit.ics.uci.edu / asterixdb / 998ecb7208d6dec86d1c5cf86e6607428c7a02a6 / . / asterix-examples / src / main / resources / cherry / examples / cherry.html
blob: a5f33b3126d6a489ccd848645400aa02c0b1ef0f [file] [log] [blame]
genia.likes.science@gmail.coma362b4d2013-04-26 08:29:25 -0700[diff] [blame]1<!DOCTYPE html>
2<html style="width: 100%; height: 100%;">
3 <head>
4 <title>ASTERIX Demo</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"
8 rel="stylesheet" type="text/css"/>
9 <link href="../css/jquery.dataTables.css" rel="stylesheet" type="text/css"/>
10 <link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
genia.likes.science@gmail.com6b8c8f22013-05-08 11:51:08 -0700[diff] [blame]11
12 <link rel="shortcut icon" type="image/png" href="../img/mobile.png">
13
genia.likes.science@gmail.coma362b4d2013-04-26 08:29:25 -0700[diff] [blame]14 <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
15 type="text/javascript"></script>
16 <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
17 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"
18 type="text/javascript"></script>
19
20 <script src="../js/bootstrap.min.js"></script>
21 <script type="text/javascript" src="../js/geostats.js" ></script>
genia.likes.science@gmail.combdfa27a2013-05-08 10:44:34 -0700[diff] [blame]22
23 <script src="../../core/js/easyXDM/easyXDM.debug.js"></script>
genia.likes.science@gmail.com998ecb72013-06-05 21:12:13 -0700[diff] [blame^]24 <script src="http://localhost:19002/sdk/static/js/asterix-sdk-stable.js"></script>
genia.likes.science@gmail.coma362b4d2013-04-26 08:29:25 -0700[diff] [blame]25 <script src="../js/cherry.js" type="text/javascript"></script>
26 <style type="text/css">
27 .column-section {
28 border-top: 2px solid #aaa;
29 margin-top: 10px;
30 }
31
32 .section-title {
33 background: #ddd;
34 padding: 5px 0;
35 }
36
37 .section-title span {
38 margin-left: 10px;
39 font-weight: bold;
40 }
41
42 .control {
43 margin: 0;
44 }
45
46 #map_canvas img {
47 max-width: none;
48 }
49
50 #legend-holder {
51 background: white;
52 padding: 10px;
53 margin: 10px;
54 text-align: center;
55 }
56
57 #review-handles-dropdown {
58 padding: 10px;
59 }
60
61 </style>
62 </head>
63 <body style="width: 100%; height: 100%;">
64
65 <!-- Nav -->
66 <div class="navbar">
67 <div class="navbar-inner">
68 <a class="brand" href="#" style="padding: 0.25em;"><img src="../img/asterixlogo.png" height="30" width="72"></a>
69 <ul class="nav">
70 <li id="explore-active" class="active"><a id="explore-mode" href="#">Explore</a></li>
71 <li id="review-active" ><a id="review-mode" href="#">Review</a></li>
72 </ul>
73 </div>
74 </div>
75
76 <!-- Search Box -->
77 <div class="container-fluid">
78
79 <div class="row">
80
81 <!-- Search Bar -->
82 <div class="span4 well" id="explore-well">
83 <div class="column-section" id="location">
84 <div class="section-title"><span>Location</span></div>
85 <!--<div class="section-controls">-->
86 <input class="textbox" type="text" id="location-text-box">
87 <div class="btn-group" data-toggle="buttons-radio">
88 <button type="button" class="btn" id="location-button">Location</button>
89 <button type="button" class="btn" id="selection-button">Selection</button>
90 </div>
91 <!-- </div>-->
92 </div><!-- end #location-->
93
94 <div class="column-section" id="date">
95 <div class="section-title"><span>Date</span></div>
96 <div class="section-controls">
97 <span style="white-space:nowrap; display: block; overflow:hidden;">
98 <label for="start-date">Start Date</label><input type="text" class="textbox" id="start-date">
99 </span>
100 <input type="text" class="textbox" id="end-date">
101 <label for="end-date">End Date</label>
102 </div>
103 </div><!-- end #date-->
104
105 <div class="column-section" id="keyword">
106 <div class="section-title"><span>Keyword</span></div>
107 <div class="section-controls">
108 <input type="text" class="textbox" id="keyword-textbox" value="verizon">
109 </div>
110 </div><!-- end #keyword-->
111
112 <div class="column-section" id="grid">
113 <div class="section-title"><span>Grid: Latitude &amp; Longitude</span></div>
114 <div class="section-controls">
115
116 <div class="grid-slider" id="grid-lat-slider"></div>
117 <div class="control-label">Latitude: <span id="gridlat">3.0</span></div>
118
119 <div class="grid-slider" id="grid-lng-slider"></div>
120 <div class="control-label">Longitude: <span id="gridlng">3.0</span></div>
121 </div>
122 </div><!-- end #grid-->
123
124 <div class="column-section" style="border: none;" id="submit-query">
125 <div class="section-controls">
126 <button id="submit-button">Submit</button>
127 <button id="clear-button">Clear</button>
128 <button id="show-query-button">Show Query</button><br />
129 <input type="checkbox" value="Submit Asynchronously" name="async" id="asbox" />
130 Submit asynchronously?
131 </div>
132 </div><!-- end #submit-query -->
133
134 </div><!--/span-->
135
136 <!-- Drilldown Modal -->
137 <div id="drilldown_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
138 <div class="modal-header">
139 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
140 <h3 id="myModalLabel">Explore Tweets</h3>
141 </div>
142 <div class="modal-body" id="drilldown_modal_body"></div>
143 <div class="modal-footer">
144 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
145 </div>
146 </div>
147
148 <div class="span4 well" id="review-well" style="display:none;">
149 <div class="btn-group" style="margin-bottom: 10px;" id="group-tweetbooks">
150 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
151 Tweetbooks
152 <span class="caret"></span>
153 </a>
154 <ul class="dropdown-menu" id="review-tweetbook-dropdown">
155 <li><a href="#" class="holdmenu">
156 <input type="text" id="new-tweetbook-entry" placeholder="Name a new tweetbook">
157 <button type="button" class="btn" id="new-tweetbook-button">Add</button>
158 </a></li>
159 <li class="divider"></li>
160 <div id="review-tweetbook-titles">
161 </div>
162 </ul>
163 </div><br/>
164
165 <div class="btn-group" id="group-background-query" style="margin-bottom: 10px;">
166 <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
167 Background Queries
168 <span class="caret"></span>
169 </a>
170 <ul class="dropdown-menu" id="review-handles-dropdown">
171 </ul>
172 </div>
173
174 <div id="query-preview-window" style="overflow: auto; width: 100%; background: white; border: 2px solid black;">
175 </div>
176 </div>
177
178 <!-- Map -->
179 <div class="span8 well" >
180 <div id="map_canvas" style="width: 100%; height: 100%;"></div>
181 </div><!--/span-->
182 <div id="map_canvas_legend">
183 </div>
184
185 </div><!--/row-->
186 <div class="row">
187
188 <div id="dialog">
189 <h4>You must submit a query first.</h4>
190 </div></div>
191 </div><!-- container -->
192 <hr>
193
194 </body>
195</html>