diff --git a/html/files/colouring-london-online-exhibition.pdf b/html/files/colouring-london-online-exhibition.pdf new file mode 100644 index 00000000..cf240236 Binary files /dev/null and b/html/files/colouring-london-online-exhibition.pdf differ diff --git a/html/fonts/gidole-regular-webfont.woff b/html/fonts/gidole-regular-webfont.woff new file mode 100644 index 00000000..d334cf64 Binary files /dev/null and b/html/fonts/gidole-regular-webfont.woff differ diff --git a/html/fonts/gidole-regular-webfont.woff2 b/html/fonts/gidole-regular-webfont.woff2 new file mode 100644 index 00000000..e1d2c114 Binary files /dev/null and b/html/fonts/gidole-regular-webfont.woff2 differ diff --git a/html/fonts/glacialindifference-regular-webfont.ttf b/html/fonts/glacialindifference-regular-webfont.ttf new file mode 100644 index 00000000..e90b5278 Binary files /dev/null and b/html/fonts/glacialindifference-regular-webfont.ttf differ diff --git a/html/fonts/glacialindifference-regular-webfont.woff b/html/fonts/glacialindifference-regular-webfont.woff new file mode 100644 index 00000000..3fd1ff93 Binary files /dev/null and b/html/fonts/glacialindifference-regular-webfont.woff differ diff --git a/html/fonts/glacialindifference-regular-webfont.woff2 b/html/fonts/glacialindifference-regular-webfont.woff2 new file mode 100644 index 00000000..2836a970 Binary files /dev/null and b/html/fonts/glacialindifference-regular-webfont.woff2 differ diff --git a/html/images/logo-casa.png b/html/images/logo-casa.png new file mode 100644 index 00000000..ed7e1fc0 Binary files /dev/null and b/html/images/logo-casa.png differ diff --git a/html/images/logo-gla.png b/html/images/logo-gla.png new file mode 100644 index 00000000..4d7c927a Binary files /dev/null and b/html/images/logo-gla.png differ diff --git a/html/images/logo-he.png b/html/images/logo-he.png new file mode 100644 index 00000000..74d0ece5 Binary files /dev/null and b/html/images/logo-he.png differ diff --git a/html/images/logo-os.png b/html/images/logo-os.png new file mode 100644 index 00000000..efe5df81 Binary files /dev/null and b/html/images/logo-os.png differ diff --git a/html/images/logo-ucl.png b/html/images/logo-ucl.png new file mode 100644 index 00000000..0934f254 Binary files /dev/null and b/html/images/logo-ucl.png differ diff --git a/html/images/slide-1-welcome.png b/html/images/slide-1-welcome.png new file mode 100644 index 00000000..bf256d23 Binary files /dev/null and b/html/images/slide-1-welcome.png differ diff --git a/html/images/slide-2-categories.png b/html/images/slide-2-categories.png new file mode 100644 index 00000000..c7220cdb Binary files /dev/null and b/html/images/slide-2-categories.png differ diff --git a/html/images/slide-3-edit.png b/html/images/slide-3-edit.png new file mode 100644 index 00000000..b9b954cd Binary files /dev/null and b/html/images/slide-3-edit.png differ diff --git a/html/images/slide-4-view.png b/html/images/slide-4-view.png new file mode 100644 index 00000000..df27db2e Binary files /dev/null and b/html/images/slide-4-view.png differ diff --git a/html/images/slide-5-download.png b/html/images/slide-5-download.png new file mode 100644 index 00000000..d171786f Binary files /dev/null and b/html/images/slide-5-download.png differ diff --git a/html/images/slide-6-showcase.png b/html/images/slide-6-showcase.png new file mode 100644 index 00000000..4f73cd5e Binary files /dev/null and b/html/images/slide-6-showcase.png differ diff --git a/html/images/slide-7-partners.png b/html/images/slide-7-partners.png new file mode 100644 index 00000000..de276888 Binary files /dev/null and b/html/images/slide-7-partners.png differ diff --git a/html/index.html b/html/index.html new file mode 100644 index 00000000..5764e5ea --- /dev/null +++ b/html/index.html @@ -0,0 +1,239 @@ + + + + + + + Colouring London + + + + +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Colouring + London +
+

+ +
+ +

Can you help us capture information on every building in London?

+ +

+ +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? + +

+

+ +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. + +

+ +Sign up for updates + +
+ + + +
+ + +View online exhibition + +

+ +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. + +

+ + + +

Data Categories

+ +

+ +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. + +

+ +
    +
  1. +

    Location

    +

    Where is it?

    +
  2. +

    Use

    +

    How is it used?

    +
  3. +

    Type

    +

    How was it first used?

    +
  4. +

    Age

    +

    When was it built?

    +
  5. +

    Size

    +

    How big is it?

    +
  6. +

    Construction

    +

    How is it built?

    +
  7. +

    Design/Build

    +

    Who built it?

    +
  8. +

    Street Front

    +

    How does it relate to the street?

    +
  9. +

    Greenery

    +

    Is it near a tree or park?

    +
  10. +

    Protection

    +

    Is it designated?

    +
  11. +

    Demolitions

    +

    How many rebuilds on the site?

    +
  12. +

    Like Me?

    +

    Do you like it?

    +
    13. +
+ +

Once built, our platform will allow you to:

+ +

View maps

+ +

+ +To view the data, navigate to the ‘View Maps’ page and find the category that +interests you. + +

+ +Preview of view maps page + +

Add and edit data

+ +

+ +Find a building and add or edit data for any of the 12 core categories. + +

+ +Preview of add/edit data page + +

See how people are using our data

+ +

+ +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. + +

+ +Preview of data showcase page + +

Download, remix and reuse

+ +

+ +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. + +

+ +Preview of download page + + +
+

Keep in touch

+

+ + Receive occasional newsletters about the project as it develops. You can + read previous newsletters in our newsletter archive. + +

+ + + + + powered by TinyLetter. + We'll never share your email address. + + +
+ +View online exhibition + +FAQ + +
+ + + + + diff --git a/html/main.css b/html/main.css new file mode 100644 index 00000000..c830b841 --- /dev/null +++ b/html/main.css @@ -0,0 +1,280 @@ +/** + * Layout + */ + + +/** + * 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 { + font-family: 'glacial_cl', sans-serif; + font-size: 105%; + background: #fff; + color: #222; +} +h1, h2, h3, h4 { + font-weight: normal; +} +.text-muted { + color: #878d96 !important; +} + +/** + * Colours + */ + .white { + background-color: #fff; +} +.pink { + background-color: #fd97cd; +} +.pink { + background-color: #eb0089; +} +.red { + background-color: #fe1216; +} +.orange { + background-color: #ff954f; +} +.orange { + background-color: #ee5f00; +} +.yellow { + background-color: #ffff9b; +} +.yellow { + background-color: #daa702; +} +.green { + background-color: #5ceb92; +} +.green { + background-color: #01aa42; +} +.blue { + background-color: #399ecc; +} +.blue-two { + background-color: #0042d1; +} +.grey { + background-color: #222; +} + +/** + * Logo + */ +.logo { + text-transform: uppercase; +} +.logo .logotype { + display: inline-block; + vertical-align: bottom; +} +.logo .logotype span { + display: block; + font-size: 1.45rem; + letter-spacing: 0.25rem; +} +.logo .logotype span:first-child { + font-size: 1.25rem; + letter-spacing: 0; +} +.logo .grid { + position: relative; + top: -3px; + display: inline-block; + vertical-align: bottom; + font-size: 0; +} +.logo .row { + display: block; + margin: 0 0 3.5px 0; +} +.logo .cell { + display: inline-block; + background-color: #222; + width: 14px; + height: 14px; + margin: 0 3px 0 0; +} +.logo .row:nth-child(1) .cell:nth-child(1) { + animation: pulse 37s infinite; + animation-delay: 1.5s; +} +.logo .row:nth-child(1) .cell:nth-child(2) { + animation: pulse 22s infinite; + animation-delay: 0.5s; +} +.logo .row:nth-child(1) .cell:nth-child(3) { + animation: pulse 39s infinite; + animation-delay: 6s; +} +.logo .row:nth-child(1) .cell:nth-child(4) { + animation: pulse 25s infinite; + animation-delay: 10s; +} +.logo .row:nth-child(2) .cell:nth-child(1) { + animation: pulse 24s infinite; + animation-delay: 7s; +} +.logo .row:nth-child(2) .cell:nth-child(2) { + animation: pulse 38s infinite; + animation-delay: 9s; +} +.logo .row:nth-child(2) .cell:nth-child(3) { + animation: pulse 21s infinite; + animation-delay: 5s; +} +.logo .row:nth-child(2) .cell:nth-child(4) { + animation: pulse 36s infinite; + animation-delay: 4.5s; +} +.logo .row:nth-child(3) .cell:nth-child(1) { + animation: pulse 22s infinite; + animation-delay: 3.5s; +} +.logo .row:nth-child(3) .cell:nth-child(2) { + animation: pulse 39s infinite; + animation-delay: 5.5s; +} +.logo .row:nth-child(3) .cell:nth-child(3) { + animation: pulse 25s infinite; + animation-delay: 4s; +} +.logo .row:nth-child(3) .cell:nth-child(4) { + animation: pulse 24s infinite; + animation-delay: 17s; +} + +@keyframes pulse { + 0%, 100% { + background-color: #0042d1; + } + 15% { + background-color: #0042d1; + } + 17% { + background-color: #eb0089; + } + 30% { + background-color: #eb0089; + } + 32% { + background-color: #daa702; + } + 45% { + background-color: #daa702; + } + 47% { + background-color: #01aa42; + } + 60% { + background-color: #01aa42; + } + 62% { + background-color: #ee5f00; + } + 75% { + background-color: #ee5f00; + } + 77% { + background-color: #222; + } + 90% { + background-color: #222; + } + 92% { + background-color: #0042d1; + } +} + +/** + * Content + */ +img { + display: inline-block; + max-width: 100%; +} +.offscreen-text { + overflow: hidden; + text-indent: -999px; +} + +/** + * Carousel + */ +.carousel { + position: relative; +} +.carousel-control { + position: absolute; + top: 0; + bottom: 0; + width: 1em; +} +.carousel-control.next { + right: 0; +} +.carousel-control.back { + left: 0; +} +.carousel-content { + padding: 0; + list-style: none; +} +.carousel-content li { + display: none; + text-align: center; +} +.carousel-content li.active { + display: block; +} + +/** + * Logos + */ +.logo-list { + text-align: center; + padding: 0; + list-style: none; +} +.logo-list li { + display: inline-block; + width: 10em; + padding: 0 1em; + vertical-align: middle; +} +.logo-list li:first-child { + width: 4em; +} + +/** + * Data categories + */ +.data-category-list li { + list-style: none; + display: inline-block; + vertical-align: bottom; + width: 9em; + height: 9em; + margin: 0.5em; + padding: 0.1em; +} +.data-category-list .category { + text-align: center; + font-size: 1.5em; +} +.data-category-list .description { + text-align: center; + font-size: 1em; +}