224 lines
8.9 KiB
HTML
224 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Recline Data Explorer</title>
|
||
<meta name="description" content="The Recline Data Explorer">
|
||
<meta name="author" content="Rufus Pollock and Max Ogden">
|
||
|
||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
|
||
<!--[if lt IE 9]>
|
||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
||
<![endif]-->
|
||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap.css">
|
||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.css">
|
||
<!--[if lte IE 8]>
|
||
<link rel="stylesheet" href="../vendor/leaflet/0.3.1/leaflet.ie.css" />
|
||
<![endif]-->
|
||
|
||
<!-- Recline CSS components -->
|
||
<link rel="stylesheet" href="../css/data-explorer.css">
|
||
<link rel="stylesheet" href="../css/grid.css">
|
||
<link rel="stylesheet" href="../css/graph.css">
|
||
<link rel="stylesheet" href="../css/map.css">
|
||
<!-- /Recline CSS components -->
|
||
|
||
<!-- Custom CSS for the Data Explorer Online App -->
|
||
<link rel="stylesheet" href="../css/site/site.css">
|
||
<link rel="stylesheet" href="style/demo.css">
|
||
|
||
<link rel="stylesheet" href="../vendor/bootstrap/2.0.2/css/bootstrap-responsive.css">
|
||
|
||
<!-- 3rd party JS libraries -->
|
||
<script type="text/javascript" src="../vendor/jquery/1.7.1/jquery.js"></script>
|
||
<script type="text/javascript" src="../vendor/underscore/1.1.6/underscore.js"></script>
|
||
<script type="text/javascript" src="../vendor/backbone/0.5.1/backbone.js"></script>
|
||
<script type="text/javascript" src="../vendor/jquery.flot/0.7/jquery.flot.js"></script>
|
||
<script type="text/javascript" src="../vendor/jquery.mustache.js"></script>
|
||
<script type="text/javascript" src="../vendor/bootstrap/2.0.2/bootstrap.js"></script>
|
||
<script type="text/javascript" src="../vendor/leaflet/0.3.1/leaflet.js"></script>
|
||
|
||
<!-- recline library -->
|
||
<!-- in normal use would just the single recline.js library file. However, for testing it
|
||
is easier to reference individual files. See built.html for example using just recline.js -->
|
||
<script type="text/javascript" src="../src/util.js"></script>
|
||
<script type="text/javascript" src="../src/costco.js"></script>
|
||
<script type="text/javascript" src="../src/model.js"></script>
|
||
<script type="text/javascript" src="../src/backend/base.js"></script>
|
||
<script type="text/javascript" src="../src/backend/memory.js"></script>
|
||
<script type="text/javascript" src="../src/backend/dataproxy.js"></script>
|
||
<script type="text/javascript" src="../src/backend/elasticsearch.js"></script>
|
||
<script type="text/javascript" src="../src/backend/gdocs.js"></script>
|
||
<script type="text/javascript" src="../src/backend/localcsv.js"></script>
|
||
<script type="text/javascript" src="../src/view.js"></script>
|
||
<script type="text/javascript" src="../src/view-grid.js"></script>
|
||
<script type="text/javascript" src="../src/view-graph.js"></script>
|
||
<script type="text/javascript" src="../src/view-map.js"></script>
|
||
<script type="text/javascript" src="../src/view-transform-dialog.js"></script>
|
||
|
||
<!-- non-library javascript specific to this demo -->
|
||
<script type="text/javascript" src="js/app.js"></script>
|
||
<!-- for demo dataset -->
|
||
<script type="text/javascript" src="../test/base.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="recline-app">
|
||
<div class="navbar navbar-fixed-top">
|
||
<div class="navbar-inner">
|
||
<div class="container-fluid">
|
||
<a class="brand" href="#">Recline Data Explorer</a>
|
||
<ul class="nav pull-right">
|
||
<li class="dropdown">
|
||
<a data-toggle="dropdown" class="dropdown-toggle">
|
||
Import <b class="caret"></b></a>
|
||
<ul class="dropdown-menu js-import">
|
||
<li>
|
||
<a data-toggle="modal" href=".js-import-dialog-url">Import from URL</a>
|
||
</li>
|
||
<li>
|
||
<a data-toggle="modal" href=".js-import-dialog-file">Import from File</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href=".js-share-and-embed-dialog" data-toggle="modal">
|
||
Share and Embed
|
||
<i class="icon-share icon-white"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container-fluid">
|
||
<div class="content">
|
||
<div class="page-home backbone-page">
|
||
<div class="hero-unit">
|
||
<h1>Welcome to the Recline Data Explorer</h1>
|
||
<p>Recline allows you to explore and work with data in your browser and then share with others</p>
|
||
</div>
|
||
<div class="row-fluid">
|
||
<div class="span4">
|
||
<div class="well">
|
||
<h3>View the demo</h3>
|
||
<p>Try out the demo using a local example dataset.</p>
|
||
<p><a class="btn btn-primary" href="?url=demo#explorer">View the demo dataset »</a></p>
|
||
</div>
|
||
</div>
|
||
<div class="span4">
|
||
<div class="well">
|
||
<h3>Features</h3>
|
||
<ul>
|
||
<li>Data grid</li>
|
||
<li>Data editing including programmatic data transformation in javascript</li>
|
||
<li>Visualizations includes graphs and maps</li>
|
||
<li>Import and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
|
||
the <a href="http://datahub.io/">DataHub</a> and offline sources like CSV files on your local machine.</li>
|
||
<li>Use online or offline - because the app is built in pure javascript and html you can use it anywhere there's a modern web browser. Using offline is as easy and downloading this web page to your local machine.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="span4">
|
||
<div class="well">
|
||
<h3>Get started</h3>
|
||
<p>Get started straight away for example by importing some data from an external source <strong>using the menu at the top right</strong> of this page.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-explorer backbone-page">
|
||
<div class="data-explorer-here"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- modals for menus -->
|
||
<div class="modal fade in js-import-dialog-url" style="display: none;">
|
||
<div class="modal-header">
|
||
<a class="close" data-dismiss="modal">×</a>
|
||
<h3>Import from URL</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form class="js-import-url form-horizontal">
|
||
<div class="control-group">
|
||
<label class="control-label">URL</label>
|
||
<div class="controls">
|
||
<input type="text" name="source" class="input-xlarge" />
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label">Type of data</label>
|
||
<div class="controls">
|
||
<select name="backend_type">
|
||
<option value="csv">CSV</option>
|
||
<option vlaue="excel">Excel</option>
|
||
<option value="gdoc">Google Spreadsheet</option>
|
||
<option value="elasticsearch">ElasticSearch</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Import »</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade in js-import-dialog-file" style="display: none;">
|
||
<div class="modal-header">
|
||
<a class="close" data-dismiss="modal">×</a>
|
||
<h3>Import from File</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form class="form-horizontal">
|
||
<div class="control-group">
|
||
<label class="control-label">File</label>
|
||
<div class="controls">
|
||
<input type="file" name="source" />
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label">Separator</label>
|
||
<div class="controls">
|
||
<input type="text" name="separator" value="," class="spam1"/>
|
||
</div>
|
||
</div>
|
||
<div class="control-group">
|
||
<label class="control-label">Text delimiter</label>
|
||
<div class="controls">
|
||
<input type="text" name="delimiter" value='"' />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<label class="control-label">Encoding</label>
|
||
<div class="controls">
|
||
<input type="text" name="encoding" value="UTF-8" />
|
||
</div>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Import »</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade in js-share-and-embed-dialog" style="display: none;">
|
||
<div class="modal-header">
|
||
<a class="close" data-dismiss="modal">×</a>
|
||
<h3>Share and Embed</h3>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h4>Sharable Link to current View</h4>
|
||
<textarea class="view-link" style="width: 100%; height: 100px;"></textarea>
|
||
<h4>Embed this View</h4>
|
||
<textarea class="view-embed" style="width: 100%; height: 200px;"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|