demo/client/www/index.html - incubator-flagon-user-ale - Git at Google

 <!--
 Licensed to the Apache Software Foundation (ASF) under one or more
 contributor license agreements.  See the NOTICE file distributed with
 this work for additional information regarding copyright ownership.
 The ASF licenses this file to You under the Apache License, Version 2.0
 (the "License"); you may not use this file except in compliance with
 the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css"/>


     <link rel="stylesheet" href="css/style.css"/>
     <link rel="stylesheet" href="css/map.css"/>


 </head>
 <body>

 <div class="container">
     <div class="header clearfix">
         <h3 class="text-muted">User-ALE Examples</h3>
     </div>

     <div class="col-md-5">
         <div class="row buttons-grp">
             <h3 id="buttons" class="section-header">Buttons<a class="anchorjs-link" href="#buttons"><span
                     class="anchorjs-icon"></span></a></h3>
                 <div class="form-group">
                     <a class="btn btn-default" href="#" role="button">Link</a>
                     <button class="btn btn-default" type="submit">Button</button>
                     <input class="btn btn-default" type="button" value="Input">
                     <input class="btn btn-default" type="submit" value="Submit">
                 </div>
                 <div class="form-group">
                     <label for="radio-button0">Male</label>
                     <input class="rdbtn" id="radio-button0" type="radio" name="sex" value="male">
                     <label for="radio-button1">Female</label>
                     <input class="rdbtn" id="radio-button1" type="radio" name="sex" value="female">
                 </div>
         </div>
         <div class="row">
             <h3 id="menus" class="section-header">Menus<a class="anchorjs-link" href="#menus"><span
                     class="anchorjs-icon"></span></a>
             </h3>


             <div class="dropdown">
                 <button class="btn btn-default dropdown-toggle dd-list" type="button" id="dropdownMenu1"
                         data-toggle="dropdown"
                         aria-expanded="true">
                     Dropdown
                     <span class="caret"></span>
                 </button>
                 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                     <li class="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
                     </li>
                     <li class="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Another
                         action</a></li>
                     <li class="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something
                         else here</a></li>
                     <li iclass="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated
                         link</a></li>
                 </ul>
             </div>


         </div>
         <div class="row query-group">
             <h3 id="input" class="section-header">Query<a class="anchorjs-link" href="#input"><span
                     class="anchorjs-icon"></span></a>
             </h3>


             <div class="grp">
                 <!--<form>-->
                     <div class="form-group">
                         <label for="query_name">Query Name</label>
                         <input id="textbox0" type="text" class="textbox form-control" id="query_name"
                                placeholder="Query Name">
                     </div>
                     <div class="form-group">
                         <label for="query_country">Query Country</label>
                         <input id="textbox1" type="text" class="textbox form-control" id="query_country"
                                placeholder="Query Country">
                     </div>
                     <button type="submit" class="btn btn-default">Execute</button>
                 <!--</form>-->
             </div>

             <div class="grp">
                 <div class="slider" id="slider0"></div>
             </div>
             <div class="grp">
                 <p>
                     <label for="value">Value range:</label>
                     <input type="text" id="value" readonly style="border:0; color:#448CB5; font-weight:bold;">
                 </p>
                 <div class="slider" id="slider1"></div>
             </div>

         </div>
         <div class="row map-group">
             <h3 id="map" class="section-header">Map<a class="anchorjs-link" href="#map"><span
                     class="anchorjs-icon"></span></a></h3>

             <div class="form-group">
                 <input id="map-button0" class="btn btn-default" type="button" value="Paris">
                 <input id="map-button1" class="btn btn-default" type="button" value="Chicago">
                 <input id="map-button2" class="btn btn-default" type="button" value="Add Marker">
                 <input id="map-button3" class="btn btn-default" type="button" value="Remove Marker">
             </div>
             <div id="map-container"></div>
         </div>

     </div>
     <div class="col-md-7">
         <div class="output">
             <input id="clear-button" class="btn btn-default" type="button" value="Clear">
             <table>
                 <thead>
                     <th width="80px">ACTIVITY</th>
                     <th width="80px">ACTION</th>
                     <th width="110px">ELEMENT ID</th>
                     <th width="110px">ELEMENT TYPE</th>
                     <th width="110px">ELEMENT GROUP</th>
                     <th width="100px">ELEMENT OBJECT</th>
                     <th width="60px">SOURCE</th>
                 </thead>
                 <tbody>

                 </tbody>
             </table>

         </div>
     </div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

 <script src="js/map.js"></script>
 <script src="js/logging.js"></script>
 <script src="js/userale.js"></script>
 </body>
 </html>
	<!--
	Licensed to the Apache Software Foundation (ASF) under one or more
	contributor license agreements. See the NOTICE file distributed with
	this work for additional information regarding copyright ownership.
	The ASF licenses this file to You under the Apache License, Version 2.0
	(the "License"); you may not use this file except in compliance with
	the License. You may obtain a copy of the License at

	http://www.apache.org/licenses/LICENSE-2.0

	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	-->
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css"/>



	<link rel="stylesheet" href="css/style.css"/>
	<link rel="stylesheet" href="css/map.css"/>


	</head>
	<body>

	<div class="container">
	<div class="header clearfix">
	<h3 class="text-muted">User-ALE Examples</h3>
	</div>

	<div class="col-md-5">
	<div class="row buttons-grp">
	<h3 id="buttons" class="section-header">Buttons<a class="anchorjs-link" href="#buttons"><span
	class="anchorjs-icon"></span></a></h3>
	<div class="form-group">
	<a class="btn btn-default" href="#" role="button">Link</a>
	<button class="btn btn-default" type="submit">Button</button>
	<input class="btn btn-default" type="button" value="Input">
	<input class="btn btn-default" type="submit" value="Submit">
	</div>
	<div class="form-group">
	<label for="radio-button0">Male</label>
	<input class="rdbtn" id="radio-button0" type="radio" name="sex" value="male">
	<label for="radio-button1">Female</label>
	<input class="rdbtn" id="radio-button1" type="radio" name="sex" value="female">
	</div>
	</div>
	<div class="row">
	<h3 id="menus" class="section-header">Menus<a class="anchorjs-link" href="#menus"><span
	class="anchorjs-icon"></span></a>
	</h3>


	<div class="dropdown">
	<button class="btn btn-default dropdown-toggle dd-list" type="button" id="dropdownMenu1"
	data-toggle="dropdown"
	aria-expanded="true">
	Dropdown
	<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
	<li class="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
	</li>
	<li class="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Another
	action</a></li>
	<li class="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something
	else here</a></li>
	<li iclass="dd-item" role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated
	link</a></li>
	</ul>
	</div>


	</div>
	<div class="row query-group">
	<h3 id="input" class="section-header">Query<a class="anchorjs-link" href="#input"><span
	class="anchorjs-icon"></span></a>
	</h3>


	<div class="grp">
	<!--<form>-->
	<div class="form-group">
	<label for="query_name">Query Name</label>
	<input id="textbox0" type="text" class="textbox form-control" id="query_name"
	placeholder="Query Name">
	</div>
	<div class="form-group">
	<label for="query_country">Query Country</label>
	<input id="textbox1" type="text" class="textbox form-control" id="query_country"
	placeholder="Query Country">
	</div>
	<button type="submit" class="btn btn-default">Execute</button>
	<!--</form>-->
	</div>

	<div class="grp">
	<div class="slider" id="slider0"></div>
	</div>
	<div class="grp">
	<p>
	<label for="value">Value range:</label>
	<input type="text" id="value" readonly style="border:0; color:#448CB5; font-weight:bold;">
	</p>
	<div class="slider" id="slider1"></div>
	</div>

	</div>
	<div class="row map-group">
	<h3 id="map" class="section-header">Map<a class="anchorjs-link" href="#map"><span
	class="anchorjs-icon"></span></a></h3>

	<div class="form-group">
	<input id="map-button0" class="btn btn-default" type="button" value="Paris">
	<input id="map-button1" class="btn btn-default" type="button" value="Chicago">
	<input id="map-button2" class="btn btn-default" type="button" value="Add Marker">
	<input id="map-button3" class="btn btn-default" type="button" value="Remove Marker">
	</div>
	<div id="map-container"></div>
	</div>

	</div>
	<div class="col-md-7">
	<div class="output">
	<input id="clear-button" class="btn btn-default" type="button" value="Clear">
	<table>
	<thead>
	<th width="80px">ACTIVITY</th>
	<th width="80px">ACTION</th>
	<th width="110px">ELEMENT ID</th>
	<th width="110px">ELEMENT TYPE</th>
	<th width="110px">ELEMENT GROUP</th>
	<th width="100px">ELEMENT OBJECT</th>
	<th width="60px">SOURCE</th>
	</thead>
	<tbody>

	</tbody>
	</table>

	</div>
	</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

	<script src="js/map.js"></script>
	<script src="js/logging.js"></script>
	<script src="js/userale.js"></script>
	</body>
	</html>