Reduce frontend down to notes
This commit is contained in:
Tom Russell
parent
204740e46e
commit
5627e7cb6a
@ -1,81 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Colouring London</title>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="main.css?ver=8d2184bef">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p class="beta-banner" role="alert" >
|
||||
|
||||
Welcome to the prototype (beta) site for Colouring London. <a
|
||||
href="http://colouringlondon.org">Find out more.</a>
|
||||
|
||||
</p>
|
||||
<header class="main-header">
|
||||
<nav class="navbar navbar-light navbar-expand-md">
|
||||
<a href="index.html" class="logo navbar-brand" id="top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="logotype">
|
||||
<span>Colouring</span>
|
||||
<span>London</span>
|
||||
</h1>
|
||||
</a>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item"><a href="maps.html" class="nav-link">View Maps</a></li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Log in</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Sign up</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="beta">
|
||||
<article>
|
||||
<div class="main-col">
|
||||
<h1 class="h2">Log in and sign up coming soon…</h1>
|
||||
<p>
|
||||
This is a public prototype (beta) site for the Colouring London project.
|
||||
</p>
|
||||
<p>
|
||||
If you're interested to follow the project, you can
|
||||
sign up for updates or read more about the project.
|
||||
</p>
|
||||
<div class="button-container">
|
||||
<a href="about.html#sign-up" class="btn btn-outline-dark btn-half">Sign up for updates</a><!--
|
||||
--><a href="about.html" class="btn btn-outline-dark btn-half">Read more about the project</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js?ver=38f123e83"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,293 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Colouring London</title>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="main.css?ver=8d2184bef">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p class="beta-banner" role="alert" >
|
||||
|
||||
Welcome to the prototype (beta) site for Colouring London. <a
|
||||
href="http://colouringlondon.org">Find out more.</a>
|
||||
|
||||
</p>
|
||||
<header class="main-header">
|
||||
<nav class="navbar navbar-light navbar-expand-md">
|
||||
<a href="index.html" class="logo navbar-brand" id="top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="logotype">
|
||||
<span>Colouring</span>
|
||||
<span>London</span>
|
||||
</h1>
|
||||
</a>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item"><a href="maps.html" class="nav-link">View Maps</a></li>
|
||||
<li class="nav-item active"><a href="about.html" class="nav-link">About</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Log in</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Sign up</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="beta">
|
||||
<article>
|
||||
<div class="main-col">
|
||||
<h1 class="h2">Can you help us capture information on every building in London?</h1>
|
||||
|
||||
<p>
|
||||
|
||||
How many buildings are there in London? What are their characteristics? Where
|
||||
are they located and how do they contribute to the city? How adaptable are
|
||||
they? How long will they last, and what are the environmental and
|
||||
socio-economic implications of demolition?
|
||||
|
||||
</p>
|
||||
<p>
|
||||
|
||||
Colouring London is being designed to address these questions by crowdsourcing
|
||||
and visualising information on London’s buildings. We’re releasing the
|
||||
prototype for testing in the late summer. See the slideshow below for what it
|
||||
will look like.
|
||||
|
||||
</p>
|
||||
|
||||
<div class="buttons-container btn-center">
|
||||
<a class="btn btn-outline-dark btn-lg" href="#sign-up">Sign up for updates</a>
|
||||
</div>
|
||||
|
||||
<div class="carousel">
|
||||
<button class="carousel-control offscreen-text back">Back</button>
|
||||
<ul class="carousel-content">
|
||||
<li><img src="images/slide-1-welcome.png" alt="Welcome"></li>
|
||||
<li><img src="images/slide-2-categories.png" alt="Categories"></li>
|
||||
<li><img src="images/slide-3-edit.png" alt="Add/edit data"></li>
|
||||
<li><img src="images/slide-4-view.png" alt="View maps"></li>
|
||||
<li><img src="images/slide-5-download.png" alt="Download data"></li>
|
||||
<li><img src="images/slide-6-showcase.png" alt="Showcase"></li>
|
||||
<li><img src="images/slide-7-partners.png" alt="Partners"></li>
|
||||
</ul>
|
||||
<button class="carousel-control offscreen-text next">Next</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="buttons-container btn-center">
|
||||
<a class="btn btn-outline-dark btn-lg" href="files/colouring-london-online-exhibition.pdf">View online exhibition</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="main-col">
|
||||
<p>
|
||||
|
||||
Colouring London is being designed and built by the Centre for Advanced Spatial
|
||||
Analysis (CASA), University College London and funded by Historic England.
|
||||
Ordnance Survey is providing building footprints required to collect the data,
|
||||
facilitated by the GLA, and giving access to its API and technical support. It
|
||||
will launch in 2019.
|
||||
|
||||
</p>
|
||||
|
||||
<ul class="logo-list">
|
||||
<li><a href="https://www.ucl.ac.uk/bartlett/casa/"><img src="images/logo-casa.png" alt="Centre for Advanced Spatial Analysis (CASA)"></a></li>
|
||||
<li><a href="https://www.ucl.ac.uk/"><img src="images/logo-ucl.png" alt="University College London"></a></li>
|
||||
<li><a href="https://www.historicengland.org.uk/"><img src="images/logo-he.png" alt="Historic England"></a></li>
|
||||
<li><a href="https://www.ordnancesurvey.co.uk/"><img src="images/logo-os.png" alt="Ordnance Survey"></a></li>
|
||||
<li><a href="https://www.london.gov.uk/"><img src="images/logo-gla.png" alt="Supported by the Mayor of London"></a></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="main-col">
|
||||
<h2 class="h1">Data Categories</h2>
|
||||
|
||||
<p>
|
||||
|
||||
12 categories have been chosen in consultation with specialists working in a
|
||||
range of areas, from energy analysis and sustainable urban planning and design
|
||||
to building conservation, community planning, architecture and historical
|
||||
research.
|
||||
|
||||
</p>
|
||||
|
||||
<ol class="data-category-list">
|
||||
<li class="bold-yellow">
|
||||
<h3 class="category">Location</h3>
|
||||
<p class="description">Where is it?</p>
|
||||
</li><!--
|
||||
--><li class="bright-yellow">
|
||||
<h3 class="category">Use</h3>
|
||||
<p class="description">How is it used?</p>
|
||||
</li><!--
|
||||
--><li class="bold-orange">
|
||||
<h3 class="category">Type</h3>
|
||||
<p class="description">How was it first used?</p>
|
||||
</li><!--
|
||||
--><li class="red">
|
||||
<h3 class="category">Age</h3>
|
||||
<p class="description">When was it built?</p>
|
||||
</li><!--
|
||||
--><li class="pastel-pink">
|
||||
<h3 class="category">Size</h3>
|
||||
<p class="description">How big is it?</p>
|
||||
</li><!--
|
||||
--><li class="pastel-purple">
|
||||
<h3 class="category">Construction</h3>
|
||||
<p class="description">How is it built?</p>
|
||||
</li><!--
|
||||
--><li class="blue-grey">
|
||||
<h3 class="category">Design/Build</h3>
|
||||
<p class="description">Who built it?</p>
|
||||
</li><!--
|
||||
--><li class="bright-green">
|
||||
<h3 class="category">Street Front</h3>
|
||||
<p class="description">How does it relate to the street?</p>
|
||||
</li><!--
|
||||
--><li class="pastel-green">
|
||||
<h3 class="category">Greenery</h3>
|
||||
<p class="description">Is it near a tree or park?</p>
|
||||
</li><!--
|
||||
--><li class="bright-blue">
|
||||
<h3 class="category">Protection</h3>
|
||||
<p class="description">Is it designated?</p>
|
||||
</li><!--
|
||||
--><li class="pale-grey">
|
||||
<h3 class="category">Demolitions</h3>
|
||||
<p class="description">How many rebuilds on the site?</p>
|
||||
</li><!--
|
||||
--><li class="pale-brown">
|
||||
<h3 class="category">Like Me?</h3>
|
||||
<p class="description">Do you like it?</p>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div class="main-col">
|
||||
<h2 class="h1">Once built, our platform will allow you to:</h2>
|
||||
</div>
|
||||
|
||||
<section class="pale-pink">
|
||||
<div class="main-col">
|
||||
<h3 class="h2">View maps</h3>
|
||||
|
||||
<p>
|
||||
|
||||
To view the data, navigate to the ‘View Maps’ page and find the category that
|
||||
interests you.
|
||||
|
||||
</p>
|
||||
|
||||
<img class="border-image" src="images/slide-4-view.png" alt="Preview of view maps page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pale-yellow">
|
||||
<div class="main-col">
|
||||
<h3 class="h2">Add and edit data</h3>
|
||||
|
||||
<p>
|
||||
|
||||
Find a building and add or edit data for any of the 12 core categories.
|
||||
|
||||
</p>
|
||||
|
||||
<img class="border-image" src="images/slide-3-edit.png" alt="Preview of add/edit data page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pale-orange">
|
||||
<div class="main-col">
|
||||
<h3 class="h2">See how people are using our data</h3>
|
||||
|
||||
<p>
|
||||
|
||||
Find links to visualisations and analysis, art projects and applications
|
||||
relating to the evolution of London, housing, energy, planning, heritage and
|
||||
history—or something we haven’t imagined yet.
|
||||
|
||||
</p>
|
||||
|
||||
<img class="border-image" src="images/slide-6-showcase.png" alt="Preview of data showcase page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pale-green">
|
||||
<div class="main-col">
|
||||
<h3 class="h2">Download, remix and reuse</h3>
|
||||
|
||||
<p>
|
||||
|
||||
Access bulk downloads of data created through the project to use and reuse
|
||||
under a liberal open data license. Let us know and we’ll feature showcase
|
||||
projects on the Colouring London site.
|
||||
|
||||
</p>
|
||||
|
||||
<img class="border-image" src="images/slide-5-download.png" alt="Preview of download page">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="main-col">
|
||||
|
||||
<form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post" target="popupwindow"
|
||||
onsubmit="window.open('https://tinyletter.com/colouringlondon', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
|
||||
<h3 class="h1">Keep in touch</h3>
|
||||
<p>
|
||||
|
||||
Receive occasional newsletters about the project as it develops. You can
|
||||
read previous newsletters in our <a
|
||||
href="https://tinyletter.com/colouringlondon/archive"
|
||||
target="_blank">newsletter archive</a>.
|
||||
|
||||
</p>
|
||||
<label for="tlemail">Enter your email address:</label>
|
||||
<input class="form-control" type="email" name="email" id="tlemail" placeholder="name@example.com" />
|
||||
<input type="hidden" value="1" name="embed"/>
|
||||
<small class="form-text text-muted">
|
||||
<a href="https://tinyletter.com" target="_blank">powered by TinyLetter</a>.
|
||||
We'll never share your email address.
|
||||
</small>
|
||||
<div class="buttons-container">
|
||||
<input class="btn btn-outline-dark btn-block" type="submit" value="Sign up for updates" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js?ver=38f123e83"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
frontend/bootstrap.min.css
vendored
6
frontend/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,139 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Colouring London</title>
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
|
||||
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
|
||||
crossorigin=""/>
|
||||
<link rel="stylesheet" href="main.css?ver=8d2184bef">
|
||||
</head>
|
||||
<body>
|
||||
<p class="beta-banner" role="alert" >
|
||||
|
||||
Welcome to the prototype (beta) site for Colouring London. <a
|
||||
href="http://colouringlondon.org">Find out more about the project.</a>
|
||||
|
||||
</p>
|
||||
<header class="main-header">
|
||||
<nav class="navbar navbar-light navbar-expand-md">
|
||||
<a href="index.html" class="logo navbar-brand" id="top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="logotype">
|
||||
<span>Colouring</span>
|
||||
<span>London</span>
|
||||
</h1>
|
||||
</a>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item active"><a href="maps.html" class="nav-link">View Maps</a></li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Log in</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Sign up</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="beta">
|
||||
<div id="map"></div>
|
||||
<div id="legend" class="info-container">
|
||||
<h2 class="h2">Edit building data</h2>
|
||||
<form action="building-view.html" method="GET">
|
||||
<fieldset class="data-section">
|
||||
<legend
|
||||
class="h3 bullet-prefix location toggled-on"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-location">Location</legend>
|
||||
<div id="data-list-location" class="data-list collapse show">
|
||||
<label for="">Building name</label>
|
||||
<input class="form-control" type="text" value="">
|
||||
<label for="">Building number</label>
|
||||
<input class="form-control" type="text" value="">
|
||||
<label for="">Street</label>
|
||||
<input class="form-control" type="text" value="">
|
||||
<label for="">Address line 2</label>
|
||||
<input class="form-control" type="text" value="">
|
||||
<label for="">Town</label>
|
||||
<input class="form-control" type="text" value="">
|
||||
<label for="">Postcode</label>
|
||||
<input class="form-control" type="text" value="">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="data-section">
|
||||
<legend
|
||||
class="h3 bullet-prefix age"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-age">Age</legend>
|
||||
<div id="data-list-age" class="data-list collapse">
|
||||
<label for="">Year built (best estimate)</label>
|
||||
<input class="form-control" type="number" step="1" value="2018">
|
||||
<label for="">Year built (upper estimate)</label>
|
||||
<input class="form-control" type="number" step="1" value="2018">
|
||||
<label for="">Year built (lower estimate)</label>
|
||||
<input class="form-control" type="number" step="1" value="2018">
|
||||
<label for="">Facade date</label>
|
||||
<input class="form-control" type="number" step="1" value="">
|
||||
<label for="">Source</label>
|
||||
<input class="form-control" type="text">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="data-section">
|
||||
<legend
|
||||
class="h3 bullet-prefix size"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-size">Size</legend>
|
||||
<div id="data-list-size" class="data-list collapse">
|
||||
<label for="">Attic storeys</label>
|
||||
<input class="form-control" type="number" step="1" value="0">
|
||||
<label for="">Core storeys</label>
|
||||
<input class="form-control" type="number" step="1" value="3">
|
||||
<label for="">Basement storeys</label>
|
||||
<input class="form-control" type="number" step="1" value="1">
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset class="data-section">
|
||||
<legend
|
||||
class="h3 bullet-prefix like"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-like">Like Me!</legend>
|
||||
<div id="data-list-like" class="data-list collapse">
|
||||
<label for="">Like this building?</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input position-static" type="checkbox" checked>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="buttons-container">
|
||||
<a href="/building-view.html" class="btn btn-secondary">Cancel</a>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js?ver=38f123e83"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,149 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Colouring London</title>
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
|
||||
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
|
||||
crossorigin=""/>
|
||||
<link rel="stylesheet" href="main.css?ver=8d2184bef">
|
||||
</head>
|
||||
<body>
|
||||
<p class="beta-banner" role="alert" >
|
||||
|
||||
Welcome to the prototype (beta) site for Colouring London. <a
|
||||
href="http://colouringlondon.org">Find out more about the project.</a>
|
||||
|
||||
</p>
|
||||
<header class="main-header">
|
||||
<nav class="navbar navbar-light navbar-expand-md">
|
||||
<a href="index.html" class="logo navbar-brand" id="top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="logotype">
|
||||
<span>Colouring</span>
|
||||
<span>London</span>
|
||||
</h1>
|
||||
</a>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item active"><a href="maps.html" class="nav-link">View Maps</a></li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Log in</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Sign up</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="beta">
|
||||
<div id="map"></div>
|
||||
<div id="legend" class="info-container">
|
||||
<h2 class="h2">Building data</h2>
|
||||
<section class="data-section">
|
||||
<h3 class="h3 bullet-prefix location toggled-on"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-location">
|
||||
Location
|
||||
</h3>
|
||||
<p class="data-intro">
|
||||
Section introduction of up to roughly 100 characters will take approx­imately this much space.
|
||||
<a href="#">Read more</a>.
|
||||
</p>
|
||||
<dl id="data-list-location" class="data-list collapse show">
|
||||
<dt>
|
||||
Building Name
|
||||
|
||||
<span class="tooltip-hook" data-toggle="tooltip">
|
||||
?
|
||||
<div class="tooltip bs-tooltip-bottom">
|
||||
<div class="arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Hint tooltip content should be ~40 chars.
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</dt>
|
||||
<dd><span class="no-data">no data</span></dd>
|
||||
<dt>Building Number</dt>
|
||||
<dd><span class="no-data">no data</span></dd>
|
||||
<dt>Street</dt>
|
||||
<dd><span class="no-data">no data</span></dd>
|
||||
<dt>Address line 2</dt>
|
||||
<dd><span class="no-data">no data</span></dd>
|
||||
<dt>Town</dt>
|
||||
<dd><span class="no-data">no data</span></dd>
|
||||
<dt>Postcode</dt>
|
||||
<dd><span class="no-data">no data</span></dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="data-section">
|
||||
<h3 class="h3 bullet-prefix age"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-age">Age</h3>
|
||||
<dl id="data-list-age" class="data-list collapse">
|
||||
<dt>Year built (best estimate)</dt>
|
||||
<dd>2018</dd>
|
||||
<dt>Year built (lower estimate)</dt>
|
||||
<dd>2018</dd>
|
||||
<dt>Year built (upper estimate)</dt>
|
||||
<dd>2018</dd>
|
||||
<dt>Date Source</dt>
|
||||
<dd>Pevsner</dd>
|
||||
<dt>Facade date</dt>
|
||||
<dd>2018</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="data-section">
|
||||
<h3 class="h3 bullet-prefix size"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-size">Size</h3>
|
||||
<dl id="data-list-size" class="data-list collapse">
|
||||
<dt>Attic storeys</dt>
|
||||
<dd>0</dd>
|
||||
<dt>Core storeys</dt>
|
||||
<dd>3</dd>
|
||||
<dt>Basement storeys</dt>
|
||||
<dd>1</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<section class="data-section">
|
||||
<h3 class="h3 bullet-prefix like"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-like">Like Me!</h3>
|
||||
<dl id="data-list-like" class="data-list collapse">
|
||||
<dt>Likes</dt>
|
||||
<dd> 25</dd>
|
||||
</dl>
|
||||
</section>
|
||||
<div class="buttons-container">
|
||||
<a href="maps.html" class="btn btn-secondary">Back to maps</a>
|
||||
<a href="building-edit.html" class="btn btn-primary">Edit data</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js?ver=38f123e83"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 143 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 544 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 123 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 680 KiB |
@ -1,214 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Colouring London</title>
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
|
||||
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
|
||||
crossorigin=""/>
|
||||
<link rel="stylesheet" href="main.css?ver=8d2184bef">
|
||||
</head>
|
||||
<body>
|
||||
<p class="beta-banner" role="alert" >
|
||||
|
||||
Welcome to the prototype (beta) site for Colouring London. <a
|
||||
href="http://colouringlondon.org">Find out more about the project.</a>
|
||||
|
||||
</p>
|
||||
<header class="main-header">
|
||||
<nav class="navbar navbar-light navbar-expand-md">
|
||||
<a href="index.html" class="logo navbar-brand" id="top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="logotype">
|
||||
<span>Colouring</span>
|
||||
<span>London</span>
|
||||
</h1>
|
||||
</a>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item"><a href="maps.html" class="nav-link">View Maps</a></li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Log in</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Sign up</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="beta">
|
||||
<div id="map"></div>
|
||||
<div class="jumbotron welcome-float">
|
||||
<h1 class="h1">Welcome to Colouring London</h1>
|
||||
<p class="lead">Colour in, view and download data on London's buildings</p>
|
||||
<a href="maps.html" class="btn btn-outline-dark btn-lg btn-block">Get Started</a>
|
||||
<div id="legend" class="info-container offscreen">
|
||||
<h2 class="h2">Maps</h2>
|
||||
<div class="data-section">
|
||||
<h3 class="h3 bullet-prefix age toggled-on"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-age">Age</h3>
|
||||
<dl id="data-list-age" class="data-list collapse show">
|
||||
<dt>
|
||||
<a href="/maps/date_year"
|
||||
data-map="date_year">Year Built</a></dt>
|
||||
<dd>
|
||||
<ul class="data-legend">
|
||||
<li>
|
||||
<span class="key" style="background: #f0eaba">-</span>
|
||||
>=2000
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #fae269">-</span>
|
||||
1980-2000
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #fbaf27">-</span>
|
||||
1960-1980
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #e6711d">-</span>
|
||||
1940-1960
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #d73d3a">-</span>
|
||||
1920-1940
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #ba221c">-</span>
|
||||
1900-1920
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #bb859b">-</span>
|
||||
1880-1900
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #8b3654">-</span>
|
||||
1860-1880
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #8f5385">-</span>
|
||||
1840-1860
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #56619b">-</span>
|
||||
1820-1840
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #6793b2">-</span>
|
||||
1800-1820
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #83c3b3">-</span>
|
||||
1780-1800
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #adc88f">-</span>
|
||||
1760-1780
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #83a663">-</span>
|
||||
1740-1760
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #77852d">-</span>
|
||||
1720-1740
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #69814e">-</span>
|
||||
1700-1720
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #d0c291">-</span>
|
||||
1680-1700
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #918158">-</span>
|
||||
1660-1680
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #7a5732">-</span>
|
||||
<1660
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="data-section">
|
||||
<h3 class="h3 bullet-prefix size"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-size">Size</h3>
|
||||
<dl id="data-list-size" class="data-list collapse">
|
||||
<dt>
|
||||
<a href="/maps/size_storeys"
|
||||
data-map="size_storeys">Number of storeys</a>
|
||||
</dt>
|
||||
<dd>
|
||||
<ul class="data-legend">
|
||||
<li>
|
||||
<span class="key" style="background: #ffc584">-</span>
|
||||
>20
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #f46259">-</span>
|
||||
10-20
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #da456a">-</span>
|
||||
5-10
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #a8327d">-</span>
|
||||
4
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #7c2383">-</span>
|
||||
3
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #5b167f">-</span>
|
||||
2
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #360f69">-</span>
|
||||
1
|
||||
</li>
|
||||
|
||||
<div id="legend" class="info-container offscreen">
|
||||
<h2 class="h2">Maps</h2>
|
||||
<div class="data-section">
|
||||
<h3 class="h3 bullet-prefix age toggled-on"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-age">Age</h3>
|
||||
<dl id="data-list-age" class="data-list collapse show">
|
||||
<dt>
|
||||
<a href="/maps/date_year"
|
||||
data-map="date_year">Year Built</a></dt>
|
||||
<dd>
|
||||
<ul class="data-legend">
|
||||
<li>
|
||||
<span class="key" style="background: #f0eaba">-</span>
|
||||
>=2000
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #fae269">-</span>
|
||||
1980-2000
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #fbaf27">-</span>
|
||||
1960-1980
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #e6711d">-</span>
|
||||
1940-1960
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #d73d3a">-</span>
|
||||
1920-1940
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #ba221c">-</span>
|
||||
1900-1920
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #bb859b">-</span>
|
||||
1880-1900
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #8b3654">-</span>
|
||||
1860-1880
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #8f5385">-</span>
|
||||
1840-1860
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #56619b">-</span>
|
||||
1820-1840
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #6793b2">-</span>
|
||||
1800-1820
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #83c3b3">-</span>
|
||||
1780-1800
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #adc88f">-</span>
|
||||
1760-1780
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #83a663">-</span>
|
||||
1740-1760
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #77852d">-</span>
|
||||
1720-1740
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #69814e">-</span>
|
||||
1700-1720
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #d0c291">-</span>
|
||||
1680-1700
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #918158">-</span>
|
||||
1660-1680
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #7a5732">-</span>
|
||||
<1660
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="data-section">
|
||||
<h3 class="h3 bullet-prefix size"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-size">Size</h3>
|
||||
<dl id="data-list-size" class="data-list collapse">
|
||||
<dt>
|
||||
<a href="/maps/size_storeys"
|
||||
data-map="size_storeys">Number of storeys</a></dt>
|
||||
<dd>
|
||||
<ul class="data-legend">
|
||||
<li>
|
||||
<span class="key" style="background: #ffc584">-</span>
|
||||
>20
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #f46259">-</span>
|
||||
10-20
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #da456a">-</span>
|
||||
5-10
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #a8327d">-</span>
|
||||
4
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #7c2383">-</span>
|
||||
3
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #5b167f">-</span>
|
||||
2
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #360f69">-</span>
|
||||
1
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</ul>
|
||||
<h2 class="h2">Building</h2>
|
||||
<pre id="building-detail">Click a building to see data.</pre>
|
||||
<div class="buttons-container">
|
||||
<a href="building-view.html" class="btn btn-primary">View building</a>
|
||||
<a href="building-edit.html" class="btn btn-success">Edit data</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js?ver=38f123e83"></script>
|
||||
</body>
|
||||
</html>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,749 +0,0 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'glacial_cl';
|
||||
src: url('fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
|
||||
url('fonts/glacialindifference-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: #fff;
|
||||
color: #222;
|
||||
}
|
||||
.h1, .h2, .h3, .h4, .h5 {
|
||||
font-family: 'glacial_cl', sans-serif;
|
||||
}
|
||||
.h2 {
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
.h3, .h4, .h5 {
|
||||
font-family: 'glacial_cl', sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
/**
|
||||
* Main Layout
|
||||
*/
|
||||
main.beta {
|
||||
position: relative;
|
||||
min-height: 35rem;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
main.beta {
|
||||
position: absolute;
|
||||
top: 117px; /* 32px banner + 82px header + 3px border */
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.info-container {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 3rem;
|
||||
padding: 0.25em 0.75em;
|
||||
background: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
background: #fff;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 0;
|
||||
}
|
||||
@media (min-width: 380px){
|
||||
.info-container {
|
||||
bottom: 2rem;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
height: 2rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.info-container {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 20rem;
|
||||
bottom: 0;
|
||||
}
|
||||
.info-container.offscreen {
|
||||
transform: translateX(-20rem);
|
||||
}
|
||||
.leaflet-right{
|
||||
left: 20rem;
|
||||
}
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.welcome-float {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
background: #fff;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
opacity: 1;
|
||||
transition: opacity 0.4s;
|
||||
}
|
||||
.welcome-float.offscreen {
|
||||
opacity: 0;
|
||||
}
|
||||
.welcome-float.remove {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 768px){
|
||||
.welcome-float {
|
||||
left: 50%;
|
||||
margin-left: -20em;
|
||||
width: 40em;
|
||||
top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Text pages
|
||||
*/
|
||||
article section {
|
||||
overflow: hidden;
|
||||
margin: 2.25em 0 4em;
|
||||
padding: 2em 0 4em;
|
||||
}
|
||||
.main-col {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
padding: 0 1em;
|
||||
}
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #000;
|
||||
width: 100%;
|
||||
margin: 2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Banner
|
||||
*/
|
||||
.beta-banner {
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
font-size: 0.8333rem;
|
||||
padding: 0.25em 1em;
|
||||
background: #c57d00;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.beta-banner a:hover,
|
||||
.beta-banner a:focus,
|
||||
.beta-banner a {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.beta-banner a:hover,
|
||||
.beta-banner a:focus {
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main header
|
||||
*/
|
||||
.main-header {
|
||||
display: block;
|
||||
min-height: 82px;
|
||||
text-decoration: none;
|
||||
border-bottom: 3px solid #222;
|
||||
}
|
||||
.main-header .navbar {
|
||||
padding: 0.75em 0.75em;
|
||||
}
|
||||
.main-header .navbar-brand {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logo
|
||||
*/
|
||||
.logo {
|
||||
display: block;
|
||||
font-size: 1.8rem;
|
||||
width: 6em;
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
.logo .logotype {
|
||||
font-family: 'glacial_cl', sans-serif;
|
||||
font-size: 1em;
|
||||
margin: 0 0 0 0;;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.logo .logotype span {
|
||||
display: block;
|
||||
font-size: 0.75em;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
.logo .logotype span:first-child {
|
||||
font-size: 0.625em;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.logo .grid {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
font-size: 0;
|
||||
}
|
||||
.logo .row {
|
||||
display: block;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
.logo .row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.logo .cell {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 3px 0 0;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(1) {
|
||||
animation: pulse 47s infinite;
|
||||
animation-delay: -1.5s;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(2) {
|
||||
animation: pulse 32s infinite;
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(3) {
|
||||
animation: pulse 49s infinite;
|
||||
animation-delay: -6s;
|
||||
}
|
||||
.logo .row:nth-child(1) .cell:nth-child(4) {
|
||||
animation: pulse 35s infinite;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(1) {
|
||||
animation: pulse 34s infinite;
|
||||
animation-delay: -7.2s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(2) {
|
||||
animation: pulse 58s infinite;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(3) {
|
||||
animation: pulse 31s infinite;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
.logo .row:nth-child(2) .cell:nth-child(4) {
|
||||
animation: pulse 46s infinite;
|
||||
animation-delay: -4.5s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(1) {
|
||||
animation: pulse 32s infinite;
|
||||
animation-delay: -3.5s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(2) {
|
||||
animation: pulse 49s infinite;
|
||||
animation-delay: -8.5s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(3) {
|
||||
animation: pulse 35s infinite;
|
||||
animation-delay: -4s;
|
||||
}
|
||||
.logo .row:nth-child(3) .cell:nth-child(4) {
|
||||
animation: pulse 34s infinite;
|
||||
animation-delay: -17s;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
background-color: #ffad00;
|
||||
}
|
||||
8% {
|
||||
background-color: #ffad00;
|
||||
}
|
||||
10% {
|
||||
background-color: #72b2fe;
|
||||
}
|
||||
16% {
|
||||
background-color: #72b2fe;
|
||||
}
|
||||
18% {
|
||||
background-color: #5ec233;
|
||||
}
|
||||
24% {
|
||||
background-color: #5ec233;
|
||||
}
|
||||
26% {
|
||||
background-color: #e96762;
|
||||
}
|
||||
32% {
|
||||
background-color: #e96762;
|
||||
}
|
||||
34% {
|
||||
background-color: #e099c1;
|
||||
}
|
||||
40% {
|
||||
background-color: #e099c1;
|
||||
}
|
||||
42% {
|
||||
background-color: #7d6f94;
|
||||
}
|
||||
48% {
|
||||
background-color: #7d6f94;
|
||||
}
|
||||
50% {
|
||||
background-color: #eb7905;
|
||||
}
|
||||
56% {
|
||||
background-color: #eb7905;
|
||||
}
|
||||
58% {
|
||||
background-color: #72b889;
|
||||
}
|
||||
64% {
|
||||
background-color: #72b889;
|
||||
}
|
||||
66% {
|
||||
background-color: #f0d106;
|
||||
}
|
||||
72% {
|
||||
background-color: #f0d106;
|
||||
}
|
||||
74% {
|
||||
background-color: #a6a6a7;
|
||||
}
|
||||
80% {
|
||||
background-color: #a6a6a7;
|
||||
}
|
||||
82% {
|
||||
background-color: #918e6e;
|
||||
}
|
||||
88% {
|
||||
background-color: #918e6e;
|
||||
}
|
||||
90% {
|
||||
background-color: #ffad00;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Text content
|
||||
*/
|
||||
figure img {
|
||||
max-width: 100%;
|
||||
}
|
||||
figure a:hover img,
|
||||
figure a:focus img,
|
||||
figure a:active img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.icon-pad {
|
||||
padding: 0 4em 1em;
|
||||
text-align: center;
|
||||
}
|
||||
.icon-pad svg {
|
||||
max-width: 10em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
p a,
|
||||
small a {
|
||||
color: #52a5f8;
|
||||
border-bottom: 1px solid #52a5f8;
|
||||
}
|
||||
p a:hover,
|
||||
small a:hover,
|
||||
p a:focus,
|
||||
small a:focus,
|
||||
p a:active,
|
||||
small a:active {
|
||||
color: #006fdf;
|
||||
border-bottom-color: #006fdf;
|
||||
text-decoration: none;
|
||||
}
|
||||
p a.btn:hover,
|
||||
p a.btn:focus,
|
||||
p a.btn:active {
|
||||
color: #fff;
|
||||
}
|
||||
.text-muted {
|
||||
color: #878d96 !important;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.h1 {
|
||||
font-size: 2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.h2 {
|
||||
font-size: 1.5em;
|
||||
margin: 0.25em 0 0.5em;
|
||||
}
|
||||
p, li, dd {
|
||||
line-height: 1.3;
|
||||
}
|
||||
dd {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.text-muted {
|
||||
color: #878d96 !important;
|
||||
}
|
||||
.border-image {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* View/edit, maps legend
|
||||
*/
|
||||
.maps-list {
|
||||
list-style: none;
|
||||
padding-left: 17px;
|
||||
}
|
||||
.bullet-prefix {
|
||||
position: relative;
|
||||
padding: 0rem 0.5rem 0.5rem 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bullet-prefix::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 6px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #7d7d7d;
|
||||
content: ' ';
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.bullet-prefix:hover::before,
|
||||
.bullet-prefix.toggled-on::before {
|
||||
background-color: #222;
|
||||
}
|
||||
.tooltip-hook {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: #222;
|
||||
background: #fff;
|
||||
border: 1px solid #222;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
padding: 0 0 0 1px;
|
||||
font-size: 0.8rem;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
.tooltip {
|
||||
display: none;
|
||||
opacity: 1;
|
||||
min-width: 11em;
|
||||
left: -3px;
|
||||
top: 25px;
|
||||
}
|
||||
.tooltip .arrow {
|
||||
left: 5px;
|
||||
}
|
||||
.tooltip-hook:hover .tooltip,
|
||||
.tooltip-hook:hover + .tooltip {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
.data-section .h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.data-intro {
|
||||
padding-left: 1.5rem;
|
||||
font-size: 0.8333rem;
|
||||
}
|
||||
.data-list {
|
||||
margin: 0rem 0 1rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
.data-list a {
|
||||
color: #555;
|
||||
}
|
||||
.data-list a:focus,
|
||||
.data-list a:active,
|
||||
.data-list a:hover {
|
||||
color: #222;
|
||||
}
|
||||
.data-list dt,
|
||||
.data-section label {
|
||||
margin: 0;
|
||||
font-size: 0.8333rem;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
color: #555;
|
||||
}
|
||||
.data-list dd,
|
||||
.data-list input {
|
||||
margin: 0 0 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.data-list .no-data {
|
||||
color: #999;
|
||||
}
|
||||
.data-legend {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.data-legend .key {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms
|
||||
*/
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="email"] {
|
||||
border-color: #999;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
input[type="number"] {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.form-check {
|
||||
padding-left: 0;
|
||||
}
|
||||
label {
|
||||
margin: 0.5em 0 0;
|
||||
}
|
||||
.buttons-container {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
form .btn {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.buttons-container.btn-center {
|
||||
text-align: center;
|
||||
}
|
||||
.btn.btn-half {
|
||||
width: 100%;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.btn.btn-half {
|
||||
width: 49%;
|
||||
margin-left: 0;
|
||||
margin-right: 2%;
|
||||
}
|
||||
.btn.btn-half:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Colours
|
||||
*/
|
||||
.white {
|
||||
background-color: #fff;
|
||||
}
|
||||
.bold-yellow {
|
||||
background-color: #ffad00;
|
||||
}
|
||||
.bright-yellow {
|
||||
background-color: #f0d106;
|
||||
}
|
||||
.pale-yellow {
|
||||
background-color: #fff021;
|
||||
}
|
||||
.bold-orange {
|
||||
background-color: #eb7905;
|
||||
}
|
||||
.pale-orange {
|
||||
background-color: #ffc04e;
|
||||
}
|
||||
.red {
|
||||
background-color: #e96762;
|
||||
}
|
||||
.pastel-pink {
|
||||
background-color: #e099c1;
|
||||
}
|
||||
.pale-pink {
|
||||
background-color: #ffcde5;
|
||||
}
|
||||
.pastel-purple {
|
||||
background-color: #7d6f94;
|
||||
}
|
||||
.blue-grey {
|
||||
background-color: #6f879c;
|
||||
}
|
||||
.bright-green {
|
||||
background-color: #5ec233;
|
||||
}
|
||||
.pastel-green {
|
||||
background-color: #72b889;
|
||||
}
|
||||
.pale-green {
|
||||
background-color: #73ebaf;
|
||||
}
|
||||
.bright-blue {
|
||||
background-color: #72b2fe;
|
||||
}
|
||||
.pale-grey {
|
||||
background-color: #a6a6a7;
|
||||
}
|
||||
.pale-brown {
|
||||
background-color: #918e6e;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Content
|
||||
*/
|
||||
img {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.offscreen-text {
|
||||
overflow: hidden;
|
||||
text-indent: -999px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Carousel
|
||||
*/
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
.carousel-control {
|
||||
display: none;
|
||||
}
|
||||
.carousel.active .carousel-control {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1.75em;
|
||||
border: 0;
|
||||
background-color: #fff;
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.carousel.active .carousel-control:hover,
|
||||
.carousel.active .carousel-control:active,
|
||||
.carousel.active .carousel-control:focus {
|
||||
border: 0;
|
||||
outline: none;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.carousel button::-moz-focus-inner {
|
||||
border:0;
|
||||
}
|
||||
.carousel-control.next {
|
||||
right: -1em;
|
||||
background-image: url('images/arrow-next.png');
|
||||
}
|
||||
.carousel-control.back {
|
||||
left: -1em;
|
||||
background-image: url('images/arrow-back.png');
|
||||
}
|
||||
.carousel-content {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.carousel-content li {
|
||||
text-align: center;
|
||||
}
|
||||
.carousel.active .carousel-content li {
|
||||
display: none;
|
||||
}
|
||||
.carousel.active .carousel-content li.current {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Logos
|
||||
*/
|
||||
.logo-list {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.logo-list li {
|
||||
display: inline-block;
|
||||
width: 8em;
|
||||
padding: 0 0.25em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.logo-list li:first-child {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Data categories
|
||||
*/
|
||||
.data-category-list {
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
margin: 0 -0.75em;
|
||||
}
|
||||
.data-category-list li {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 9em;
|
||||
height: 9em;
|
||||
margin: 0.375em;
|
||||
padding: 0.1em;
|
||||
}
|
||||
.data-category-list .category {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin: 1.4em 0 0.5em;
|
||||
}
|
||||
.data-category-list .description {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
}
|
||||
@ -2,46 +2,6 @@
|
||||
* Background map
|
||||
*/
|
||||
function map(){
|
||||
var OS_API_KEY = 'NVUxtY5r8eA6eIfwrPTAGKrAAsoeI9E9';
|
||||
|
||||
var light = L.tileLayer('https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/{tilematrixSet}/{layer}/{z}/{x}/{y}.png?key={key}', {
|
||||
key: OS_API_KEY,
|
||||
tilematrixSet: 'EPSG:3857',
|
||||
layer: 'Light 3857'
|
||||
});
|
||||
|
||||
var night = L.tileLayer('https://api2.ordnancesurvey.co.uk/mapping_api/v1/service/zxy/{tilematrixSet}/{layer}/{z}/{x}/{y}.png?key={key}', {
|
||||
key: OS_API_KEY,
|
||||
tilematrixSet: 'EPSG:3857',
|
||||
layer: 'Night 3857'
|
||||
});
|
||||
|
||||
var baseMaps = {
|
||||
"Light": light,
|
||||
"Dark": night
|
||||
};
|
||||
|
||||
var map = L.map('map', {
|
||||
layers: night,
|
||||
zoomControl: false,
|
||||
attributionControl: false,
|
||||
maxZoom: 20,
|
||||
minZoom: 14,
|
||||
center: ([51.5245255, -0.1338422]),
|
||||
zoom: 16,
|
||||
doubleClickZoom: false,
|
||||
});
|
||||
|
||||
// Controls
|
||||
var attr = L.control.attribution({prefix: ""});
|
||||
attr.addAttribution("Maps contain OS data © Crown copyright: OS Maps baselayers and building outlines. Building attribute data is © Colouring London contributors");
|
||||
attr.addTo(map);
|
||||
L.control.zoom({position: 'topright'}).addTo(map);
|
||||
L.control.layers(baseMaps, {}, {
|
||||
position: 'topright',
|
||||
autoZIndex: false
|
||||
}).addTo(map);
|
||||
|
||||
// Rendered layer
|
||||
var data_layers = {}
|
||||
var data_layer_names = ["size_storeys", "date_year"]
|
||||
|
||||
@ -1,208 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Colouring London</title>
|
||||
<link rel="stylesheet" href="bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
|
||||
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
|
||||
crossorigin=""/>
|
||||
<link rel="stylesheet" href="main.css?ver=8d2184bef">
|
||||
</head>
|
||||
<body>
|
||||
<p class="beta-banner" role="alert" >
|
||||
|
||||
Welcome to the prototype (beta) site for Colouring London. <a
|
||||
href="http://colouringlondon.org">Find out more about the project.</a>
|
||||
|
||||
</p>
|
||||
<header class="main-header">
|
||||
<nav class="navbar navbar-light navbar-expand-md">
|
||||
<a href="index.html" class="logo navbar-brand" id="top">
|
||||
<div class="grid">
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="logotype">
|
||||
<span>Colouring</span>
|
||||
<span>London</span>
|
||||
</h1>
|
||||
</a>
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<li class="nav-item active"><a href="maps.html" class="nav-link">View Maps</a></li>
|
||||
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Log in</a></li>
|
||||
<li class="nav-item"><a href="404.html" class="nav-link">Sign up</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="beta">
|
||||
<div id="map"></div>
|
||||
<div id="legend" class="info-container">
|
||||
<h2 class="h2">Maps</h2>
|
||||
<div class="data-section">
|
||||
<h3 class="h3 bullet-prefix age toggled-on"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-age">Age</h3>
|
||||
<dl id="data-list-age" class="data-list collapse show">
|
||||
<dt>
|
||||
<a href="/maps/date_year"
|
||||
data-map="date_year">Year Built</a></dt>
|
||||
<dd>
|
||||
<ul class="data-legend">
|
||||
<li>
|
||||
<span class="key" style="background: #f0eaba">-</span>
|
||||
>=2000
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #fae269">-</span>
|
||||
1980-2000
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #fbaf27">-</span>
|
||||
1960-1980
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #e6711d">-</span>
|
||||
1940-1960
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #d73d3a">-</span>
|
||||
1920-1940
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #ba221c">-</span>
|
||||
1900-1920
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #bb859b">-</span>
|
||||
1880-1900
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #8b3654">-</span>
|
||||
1860-1880
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #8f5385">-</span>
|
||||
1840-1860
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #56619b">-</span>
|
||||
1820-1840
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #6793b2">-</span>
|
||||
1800-1820
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #83c3b3">-</span>
|
||||
1780-1800
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #adc88f">-</span>
|
||||
1760-1780
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #83a663">-</span>
|
||||
1740-1760
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #77852d">-</span>
|
||||
1720-1740
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #69814e">-</span>
|
||||
1700-1720
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #d0c291">-</span>
|
||||
1680-1700
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #918158">-</span>
|
||||
1660-1680
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #7a5732">-</span>
|
||||
<1660
|
||||
</li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="data-section">
|
||||
<h3 class="h3 bullet-prefix size"
|
||||
data-toggle="collapse"
|
||||
data-target="#data-list-size">Size</h3>
|
||||
<dl id="data-list-size" class="data-list collapse">
|
||||
<dt>
|
||||
<a href="/maps/size_storeys"
|
||||
data-map="size_storeys">Number of storeys</a></dt>
|
||||
<dd>
|
||||
<ul class="data-legend">
|
||||
<li>
|
||||
<span class="key" style="background: #ffc584">-</span>
|
||||
>20
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #f46259">-</span>
|
||||
10-20
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #da456a">-</span>
|
||||
5-10
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #a8327d">-</span>
|
||||
4
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #7c2383">-</span>
|
||||
3
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #5b167f">-</span>
|
||||
2
|
||||
</li>
|
||||
<li>
|
||||
<span class="key" style="background: #360f69">-</span>
|
||||
1
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</ul>
|
||||
<h2 class="h2">Building</h2>
|
||||
<pre id="building-detail">Click a building to see data.</pre>
|
||||
<div class="buttons-container">
|
||||
<a href="building-view.html" class="btn btn-primary">View building</a>
|
||||
<a href="building-edit.html" class="btn btn-success">Edit data</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
|
||||
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
|
||||
crossorigin=""></script>
|
||||
|
||||
<script src="main.js?ver=38f123e83"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user