forked from carlygrossman/bathymetry
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
40 lines (35 loc) · 1.76 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
<!DOCTYPE html>
<html>
<head>
<!-- Load Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;900&display=swap" rel="stylesheet">
<!-- Load CSS -->
<link rel="stylesheet" href="styles/main.css">
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.4.2.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js'></script>
<!-- gstatic chart loader -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="wrapper" class="center">
<h1 id="pageTitle">Bathymetry Graph</h1>
<div id="instructions" class="center">
<p>Click the 'Data entry template' link, and make a copy of the template spreadsheet. Fill in your data. Go to share options and change
the sharing settings to 'Anyone with the link.' Copy the URL for your spreadsheet, and paste it in the 'Spreadsheet URL' field.
Click 'Generate Graph.'</p>
</div>
<div id="templateInstructions" class="center"><a href="https://docs.google.com/spreadsheets/d/19pvUkYDkw19fO9hlgHlSsrQgzzli8aNLkJo0A3EW51E/copy" target="_blank">Data entry template</a></div>
<div id="errorMessage" class="center"></div>
<div class="center">
<label for="spreadsheetURL">Spreadsheet URL:</label>
<input type="url" id="spreadsheetURL" name="spreadsheetURL">
</div>
<div id="generateGraphButton" class="center"><button class="button" onclick="generateGraph()">Generate Graph</button></div>
<div id='surfacePlot' class="center"><!-- Plotly chart will be drawn inside this DIV --></div>
</div>
<script src='scripts/main.js'></script>
</body>
</html>