-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
135 lines (117 loc) · 5.04 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Listify - Beautiful Listings from Google Spreadsheets - from the Open Knowledge Foundation Labs</title>
<meta name="description" content="">
<meta name="author" content="Open Knowledge Foundation">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" media="all">
<!-- Consent manager -->
<script>var okiConsent = {analyticsTrackingID: 'UA-33874954-3'}</script>
<script src="https://a.okfn.org/html/oki/consent/assets/js/consent.js"></script>
</head>
<body class="home">
<div class="container">
<div class="content">
<div class="page home">
<div class="page-header">
<a href="http://okfnlabs.org/" title="An Open Knowledge Foundation Labs Creation" style="float: right;"><img src="https://assets.okfn.org/p/labs/img/logo-flask.png" /></a>
<h1>Listify
<small>Turn a Google spreadsheet into a beautiful, searchable listing
in seconds</small>
</h1>
</div>
<div class="row example">
<div class="span5 source offset1">
<h3>
From a source spreadsheet – like <a href="https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdG5VaVBmb0F0LTVYdTlUNWdtVThkRWc">this</a>
</h3>
<img src="https://i.imgur.com/adWWs.png" alt="Source on Gdocs" />
</div>
<div class="span5">
<h3>
To a page like this – <a href="view/?url=https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdG5VaVBmb0F0LTVYdTlUNWdtVThkRWc">view it live</a>
</h3>
<img src="https://i.imgur.com/VGL0o.png" alt="Listify Result" />
</div>
</div>
<h2 class="use-it"><a href="#make-one" class="btn btn-primary btn-large">Use it now »</a></h2>
<div id="make-one">
<h3>1. Select your Spreadsheet (or create one)</h3>
<div class="row">
<div class="span6">
<h4><a href="#" class="search-gdocs">Select Spreadsheet in Google Docs</a> (or paste a url directly)</h4>
<form class="generator">
<input type="text" name="gdocs-url" class="gdocs-url span6" placeholder="https://docs.google.com/..." />
</form>
</div>
<div class="span5">
<div class="alert">
<p>For Listify to work the spreadsheet <strong>must</strong>:
<ul>
<li>Include a few key columns: <strong>title, description, url, image url,
type, tags</strong> – see this <a href="https://docs.google.com/a/okfn.org/spreadsheet/ccc?key=0AqR8dXc6Ji4JdDZxSWtIVjZQd290a0tfZzk4emdlSXc#gid=0">template spreadsheet</a>
as an example (which you can also just copy!)</li>
<li>Have a <strong>single header row</strong> at the very top of the sheet</li>
<li>Be <strong>"published"</strong>. To "publish" a spreadsheet go to File
menu -> Publish to the Web</li>
</ul>
</div>
</div>
</div>
<hr />
<h3>2. Preview</h3>
<div class="preview"><em>Waiting for your spreadsheet!</em></div>
<hr />
<h3>3. View or Embed</h3>
<div class="row">
<div class="span6">
<h4>View online</h4>
<p><a href="#" class="view-url" target="_blank">Listified view on this website</a></p>
<p>This link is permanent and sharable</p>
</div>
<div class="span6">
<h4>Embed in your website</h4>
<p>Copy and paste the following HTML into your webpage (NB: you can change the height attribute to get rid of scrollbars)</p>
<textarea class="copy-this"></textarea>
</div>
</div>
</div>
<footer>
<p>
This service is run by the <a href="http://okfn.org">Open
Knowledge Foundation</a>
–
<a href="https://okfn.org/privacy-policy/">Privacy policy</a>
–
<a href="http://github.com/okfn/listify">Source Code</a>
–
<a href="http://opendefinition.org/ossd/" title="Open Online Software Service">
<img src="https://assets.okfn.org/images/ok_buttons/os_80x15_orange_grey.png" alt="" border="" />
</a>
</p>
<p>
<a href="http://github.com/okfn/listify/issues">Report Issues</a>
</p>
</footer>
</div><!-- /content -->
</div><!-- /container -->
<script src="vendor/jquery/1.7.1/jquery.js"></script>
<script src="vendor/recline/vendor/underscore/1.4.2/underscore.js"></script>
<script src="vendor/mustache/0.5.0-dev/mustache.js"></script>
<script src="vendor/recline/src/backend.gdocs.js"></script>
<script src="vendor/recline/src/backend.memory.js"></script>
<script type="text/javascript" src="js/listify.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// setup gdocs file picker
google.load('picker', '1');
</script>
</body>
</html>