-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
89 lines (86 loc) · 6.2 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
<html>
<head>
<title>Commmunity Lens</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/site.css"/>
<script src="js/jquery.js"></script>
<script src="js/d3.min.js"></script>
<!-- CSS only -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"
integrity="sha512-JmpptMCcCg+Rd6x0Dbg6w+mmyzs1M7chHCd9W8HPovnImG2nLAQWn3yltwxXRM7WjKKFFHOAKjjF2SC4CgiFBg=="
crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/esri-leaflet-vector.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DJ8V7N3T9X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DJ8V7N3T9X');
</script>
</head>
<body>
<div id="content" class="container-fluid">
<div id="menu-bar" class="row">
<div class="col-sm-6">
<p><a href="#">Community Lens V0.1</a></p>
</div>
<div class="col-sm-6 text-right">
<p><span class="menu-item"><a href="https://docs.google.com/forms/d/e/1FAIpQLScKuAKWNHFGPEfTHJuM5_SO4nxsNPti4HgYZDqJYRbst5qSNA/viewform" target="_blank">Request Datasets</a></span><span class="menu-item"><a href="about/">About</a></span></p>
</div>
</div>
<div id="frontpage-section-1" class="row frontpage-section">
<div class="col-md-6">
<img src="images/front-page.png" width="100%" alt="satelite image of a neighbourhood in england" />
</div>
<div id="main-description" class="offset-md-1 col-md-3">
<h1 class="frontpagetitle">Community Lens</h1>
<p class="frontpagesubtitle">Match open datasets to the areas you work in to learn more about the needs of local communities.</p>
<a href="#frontpage-section-2"><button class="btn btn-app">Learn More</button></a> <a href="analyse/"><button class="btn btn-app btn-highlight">Use now</button></a>
</div>
</div>
<div id="frontpage-section-2" class="row frontpage-section">
<div class="offset-md-1 col-md-4">
<p class="instruction-header">1. Copy and paste your data</p>
<p>CommunityLENS works with copy-and-pasted postcodes from other applications (e.g. Microsoft Excel, Google Spreadsheets, TextEdit). Each postcode should be on a new line.
<p class="instruction-header">Your data is safe.</p>
<p>Even though CommunityLENS is a web app, the data you insert will be processed only by the web browser. No server-side operations or storages are performed, no one will see, touch or copy your data!</p>
<p>
</div>
<div class="offset-md-1 col-md-5">
<img src = "images/screen1.png" alt="input form with postcodes" width="500" class="frontpagescreen" />
</div>
</div>
<div id="frontpage-section-3" class="row frontpage-section">
<div class="offset-md-1 col-md-5">
<img src = "images/screen2.png" class="leftimage frontpagescreen" alt="topic selection screen" width="500" />
</div>
<div class="offset-md-1 col-md-4">
<p class="instruction-header">2. Choose the topic you are interested in.</p>
<p>We designed and developed CommunityLENS with social impact organisations in mind. That’s why we focused on providing open data sets which you can easily select to understand the communities you serve better. Is there an open dataset you would like to see added? Write to us here.</p>
</div>
</div>
<div id="frontpage-section-4" class="row frontpage-section">
<div class="offset-md-1 col-md-4">
<p class="instruction-header">3. Explore your data and the topic of interest</p>
<p>Understand how your data maps to the topic of interest. Do you want to view a different topic ? Do you want to explore something else? Add new information to your dataset or select a different topic of interest.</p>
<p>To compare different areas, take screenshots and place them side by side next to each other.</p>
</div>
<div class="offset-md-1 col-md-5">
<img src = "images/screen3.png" alt="Analysis page screen" width="500" class="frontpagescreen" />
</div>
</div>
<div id="footer" class="row">
<div class="col-md-12 text-center">
<p>An initiative of Catalyst in collaboration with Hetco Design, part of the Catalyst and The National Lottery Community Fund COVID-19 Digital Response</p>
<p>This is an open source project. See the <a class="link-highlight" href="">github repository</a> for more information.</p>
<img class="footer-logo" height="30px" src="images/lottery.png" /><img class="footer-logo" height="20px" src="images/cast.png" /><img class="footer-logo" height="25px" src="images/catalyst.png" /><img class="footer-logo" height="30px" src="images/data-collective.png" /><img class="footer-logo" height="20px" src="images/DataKindUK.png" /><img class="footer-logo" height="50px" src="images/hetco.png" />
</div>
</div>
</div>
</body>
</html>