-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
84 lines (72 loc) · 3.35 KB
/
index.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
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Aggregated Timeline</title>
<style id="docstyle" type="text/css">
.vis-item.vis-background {
opacity: 0.6;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
<script type="text/javascript" src="js/vis.js"></script>
<script src="js/chroma.min.js" charset="utf-8"></script>
<script src="js/chroma.palette-gen.js" charset="utf-8"></script>
<script type="text/javascript" src="js/TimeExplorer.js"></script>
<!-- JQuery UI -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/timeline.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/TimeExplorer.css"/>
<style media="screen" id="dynamicstyle"></style>
</head>
<body>
<div id="timeline"></div>
<div id="timeline-setup" title="How do you have your Timeline(s) set up?" class="ui-form">
<p>This application transforms Timeline JS timelines into a format that makes browsing the timeline easier, at the cost of some of the excellent aesthetics of Timeline JS.</p>
<p>You can enter the URL for a Google Sheet that defines a single timeline, or a Google Sheet that contains a list of other Google Sheets in the first column, which will aggregate the contents of all of those sheets.</p>
<p>For any setup, the spreadsheets must be set to "Anyone with the link can view" for this system to be able to access them.</p>
<p>How would you like to set up your timeline?</p>
</div>
<div id="timeline-single-entry" title="Single Sheet Timeline" class="ui-form">
<form>
<div>
<label for="single-sheet-url">Sheet URL: </label>
<input type="text" name="single-sheet-url" id="single-sheet-url">
</div>
<div>
<label for="page-height">Page Height: </label>
<input type="number" name="page-height" value="1000" id="page-height">
</div>
<div>
<label for="tag-column">Tag Column Name (Optional): </label>
<input type="text" name="tag-column" id="tag-column">
</div>
</form>
</div>
<div id="timeline-multi-entry" title="Aggregated Timeline" class="ui-form">
<form>
<div>
<label for="multi-sheet-url">Sheet URL: </label>
<input type="text" name="multi-sheet-url" id="multi-sheet-url">
</div>
<div>
<label for="page-height">Page Height: </label>
<input type="number" name="page-height" value="1000" id="page-height">
</div>
<div>
<label for="tag-column">Tag Column Name (Optional): </label>
<input type="text" name="tag-column" id="tag-column">
</div>
</form>
</div>
<!-- Timeline JS timeline script -->
<script src="js/timeline.js"></script>
<script type="text/javascript">
var api_key = "AIzaSyCA8GIsjw-QL-CC1v6fgDWmDyyhRM_ZESE"
TheTimeline = new TimeExplorer(api_key);
</script>
</body>
</html>