1<!doctype html> 2<html lang="en" class="h-100"> 3<head> 4 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <title>Custom charts</title> 9 <meta name="description" 10 content="Land registry sold house prices with £ per square metre data for property in England & Wales."> 11 <meta name="geo.region" content="GB"> 12 <meta name="geo.placename" content="United Kingdom"> 13 <meta name="language" content="en-GB"> 14 15 16 <link rel="shortcut icon" href="https://dfwqq1t8g50i2.cloudfront.net/static/favicon.ico"> 17 <link rel="apple-touch-icon" sizes="180x180" href="https://dfwqq1t8g50i2.cloudfront.net/static/apple-touch-icon.png"> 18 <!-- Nullify requests for other sizes and precomposed versions --> 19 <link rel="apple-touch-icon" sizes="120x120" href="data:,"> 20 <link rel="apple-touch-icon-precomposed" href="data:,"> 21 <link rel="apple-touch-icon" sizes="120x120-precomposed" href="data:,"> 22 23 24 25 26 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> 27 28 29 30
30<script>window.STATIC_CDN_URL = "https://dfwqq1t8g50i2.cloudfront.net";</script>
30 31 <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 66 bytes, lines 31-32
31 32 <script async src="https://www.googletagmanager.com/gtag/js?id=
32G-LL8JR2NFTT
vendor: 14 bytes, lines 32-33
32"></script> 33
33<script> 34
vendor: 154 bytes, lines 34-41
34window.dataLayer = window.dataLayer || []; 35 36 function gtag() { 37 dataLayer.push(arguments); 38 } 39 gtag('js', new Date()); 40 41 gtag('config', '
41G-LL8JR2NFTT
vendor: 6 bytes, lines 41-42
41'); 42
42</script>
42 43 44 45 46<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
47<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
vendor: 1 bytes, line 47
47
48<script src="https://unpkg.com/[email protected]/dist/Leaflet.VectorGrid.bundled.min.js"></script>
vendor: 1 bytes, line 48
48
49<script src="https://cdn.jsdelivr.net/npm/@turf/turf@7/turf.min.js"></script>
vendor: 1 bytes, line 49
49
50<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
vendor: 1 bytes, line 50
50
51<script defer src="https://unpkg.com/@sgratzl/[email protected]/build/index.umd.min.js"></script>
51 52 53 54</head> 55 56<body class="d-flex flex-column h-100"> 57 58 59 60 <nav class="navbar navbar-expand-md navbar-dark pt-2 pb-2 mb-2" style="background-color: #234e70;" aria-label="navbar"> 61 <div class="container-fluid"> 62 <a class="navbar-brand pt-0" href="/"> 63 <span class="mb-0 fs-4">HouseMetric</span> 64 </a> 65 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> 66 <span class="navbar-toggler-icon"></span> 67 </button> 68 69 <div class="collapse navbar-collapse" id="navbarsExample04"> 70 <ul class="navbar-nav me-auto mb-2 mb-md-0"> 71 <li class="nav-item"> 72 <a class="nav-link hover-underline" 73 74 href="/map/"> 75 76 Map</a> 77 </li> 78 <li class="nav-item dropdown"> 79 <a class="nav-link dropdown-toggle hover-underline" href="#" id="market-analysis-dropdown" data-bs-toggle="dropdown" aria-expanded="false"> 80 Analysis 81 </a> 82 <ul class="dropdown-menu" aria-labelledby="market-analysis-dropdown"> 83 <li><a class="dropdown-item hover-underline" href="/geography-search">Local analysis</a></li> 84 <li><a class="dropdown-item hover-underline" href="/custom-charts">Custom charts</a></li> 85 </ul> 86 </li> 87 <li class="nav-item dropdown"> 88 <a class="nav-link dropdown-toggle hover-underline" href="#" id="rawDataDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 89 Search 90 </a> 91 <ul class="dropdown-menu" aria-labelledby="rawDataDropdown"> 92 <li><a class="dropdown-item hover-underline" href="/basic-search">Basic search</a></li> 93 <li><a class="dropdown-item hover-underline" href="/advanced-search">Advanced search</a></li> 94 <li><a class="dropdown-item hover-underline" href="/epc-search">EPC search</a></li> 95 <li><a class="dropdown-item hover-underline" href="/company-search">Company search</a></li> 96 </ul> 97 </li> 98 </ul> 99 <ul class="navbar-nav"> 100 101 <li class="nav-item"> 102 <a class="nav-link hover-underline" href="/login">Login</a> 103 </li> 104 105 </ul> 106 </div> 107 </div> 108 </nav> 109 110 <style> 111 .hover-underline { 112 position: relative; 113 text-decoration: none; 114 } 115 116 .hover-underline::after { 117 content: ''; 118 position: absolute; 119 width: 100%; 120 height: 2px; 121 bottom: 0; 122 left: 0; 123 background-color: #fff; 124 transform: scaleX(0); 125 transition: transform 0.3s ease-out; 126 } 127 128 .hover-underline:hover::after { 129 transform: scaleX(1); 130 } 131 132 .dropdown-menu { 133 background-color: #234e70; 134 } 135 136 .dropdown-item { 137 color: rgba(255, 255, 255, 0.55); 138 } 139 140 .dropdown-item:hover, .dropdown-item:focus { 141 background-color: rgba(255, 255, 255, 0.1); 142 color: #fff; 143 } 144 145 .dropdown-item.hover-underline::after { 146 bottom: 2px; 147 } 148 </style> 149 150 151 <!-- BEGIN page content (includes messages and app_content)--> 152 153 <main> 154 <div class="container-xxl"> 155 <!-- messageblock --> 156 157 158 <!-- app_content block--> 159 160<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css"> 161 162<style> 163 #customChartV2Map { 164 height: 460px; 165 min-height: 360px; 166 background: #f8f9fa; 167 } 168 169 .legend-grid { 170 display: grid; 171 grid-template-columns: repeat(2, 1fr); 172 gap: 2px 8px; 173 margin-top: 8px; 174 width: 100%; 175 background: transparent; 176 } 177 178 .legend-item { 179 display: flex; 180 align-items: center; 181 gap: 6px; 182 font-size: 11px; 183 white-space: nowrap; 184 margin-bottom: 1px; 185 background: transparent; 186 color: #333; 187 } 188 189 .legend-color { 190 width: 28px; 191 height: 17px; 192 flex-shrink: 0; 193 border: 1px solid #e0e0e0; 194 border-radius: 4px; 195 } 196 197 .date-gradient-legend { 198 width: 100%; 199 } 200 201 .gradient-bar { 202 height: 11px; 203 width: 100%; 204 border-radius: 3px; 205 } 206 207 .social-gradient-bar { 208 background: linear-gradient(to right, 209 #2e3f4f 0%, 210 #3a5c6e 6%, 211 #427888 12%,
212 #4a9382 18%, 213 #52ae7a 24%, 214 #5fc472 30%, 215 #f4ff4a 70%, 216 #f4ff4a 100% 217 ); 218 } 219 220 .gradient-labels { 221 display: flex; 222 justify-content: space-between; 223 font-size: 11px; 224 margin-top: 4px; 225 color: #333; 226 } 227 228 .social-gradient-labels { 229 position: relative; 230 height: 14px; 231 font-size: 10px; 232 margin-top: 2px; 233 color: #666; 234 } 235 236 .social-gradient-labels span { 237 position: absolute; 238 transform: translateX(-50%); 239 } 240 241 .social-gradient-labels span:first-child { 242 left: 0; 243 transform: none; 244 } 245 246 .social-gradient-labels span:last-child { 247 left: auto; 248 right: 0; 249 transform: none; 250 } 251 252 .draw-map-hint { 253 position: absolute; 254 z-index: 500; 255 top: 0.75rem; 256 left: 50%; 257 transform: translateX(-50%); 258 max-width: 90%; 259 } 260 261 .draw-cursor, 262 .draw-cursor * { 263 cursor: crosshair !important; 264 } 265 266 .geo-mode-card { 267 cursor: pointer; 268 transition: border-color 0.15s ease, box-shadow 0.15s ease; 269 border: 1px solid #dee2e6; 270 } 271 272 .geo-mode-card:hover { 273 border-color: #0d6efd; 274 } 275 276 .btn-check:checked + .geo-mode-card { 277 border-color: #0d6efd; 278 box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15); 279 } 280 281 .geo-type-tag { 282 font-size: 0.65rem; 283 text-transform: uppercase; 284 letter-spacing: 0.02em; 285 } 286 287 .unit-toggle-wrapper { user-select: none; } 288 .unit-toggle-label { 289 font-size: 0.8rem; 290 font-weight: 500; 291 color: #adb5bd; 292 transition: color 0.2s ease, font-weight 0.2s ease; 293 cursor: default; 294 } 295 .unit-toggle-label.active { color: #212529; font-weight: 600; } 296 .unit-toggle-switch .form-check-input { 297 width: 2.5rem; 298 height: 1.25rem; 299 cursor: pointer; 300 border-color: #adb5bd; 301 background-color: #6c757d; 302 } 303 .unit-toggle-switch .form-check-input:checked { 304 background-color: #495057; 305 border-color: #495057; 306 } 307 .unit-toggle-switch .form-check-input:focus { 308 box-shadow: 0 0 0 0.15rem rgba(108, 117, 125, 0.25); 309 border-color: #6c757d; 310 } 311 312 .selected-postcode-label { 313 background: transparent; 314 border: 0; 315 } 316 317 .selected-postcode-label span { 318 display: inline-block; 319 padding: 0.2rem 0.45rem; 320 color: #fff; 321 background: #0d6efd; 322 border: 1px solid #fff; 323 border-radius: 999px; 324 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 325 font-size: 0.75rem; 326 font-weight: 600; 327 line-height: 1; 328 white-space: nowrap; 329 } 330 331 .reference-postcode-label { 332 background: transparent; 333 border: 0; 334 } 335 336 .reference-postcode-label span { 337 display: inline-block; 338 padding: 0.12rem 0.35rem; 339 color: #495057; 340 background: rgba(255, 255, 255, 0.85); 341 border: 1px solid rgba(108, 117, 125, 0.45); 342 border-radius: 999px; 343 font-size: 0.68rem; 344 font-weight: 600; 345 line-height: 1; 346 white-space: nowrap; 347 } 348</style> 349 350<div class="container"> 351 <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-3"> 352 <div> 353 <h1>Custom charts</h1> 354 <p class="lead mb-0">Create histograms and box plots for your chosen subset of property sales.</p> 355 </div> 356 <a href="/custom-charts-v1" class="btn btn-outline-secondary btn-sm">Previous version</a> 357 </div> 358 359 360 361 362 363 364 <div class="alert alert-warning alert-dismissible fade show" role="alert"> 365 To create custom charts, please <a href="#" data-bs-toggle="modal" data-bs-target="#joinModal" data-source="customchart-v2">join now</a>. 366 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> 367 </div> 368 369 370 <form class="bg-light rounded border my-3" action="/custom-charts-output" method="get"> 371 <input id="selectedGeographiesHidden" name="selected_geographies" type="hidden" value=""> 372 <input id="polygonHidden" name="polygon" type="hidden" value=""> 373 374 <input type="hidden" name="geoMode" id="geoModeHidden" value="postcode"> 375 376 <div class="row g-3 m-0 p-3 border-bottom"> 377 <div class="col-12"> 378 <label class="form-label fw-semibold mb-2">How do you want to choose your area?</label> 379 <div class="row g-2"> 380 <div class="col-md-6"> 381 <input type="radio" class="btn-check" name="geoModeChoice" id="geoModePostc
381ode" value="postcode" 382 autocomplete="off" checked> 383 <label class="geo-mode-card card h-100 w-100 text-start mb-0" for="geoModePostcode"> 384 <div class="card-body d-flex gap-3 align-items-start py-3"> 385 <i class="bi bi-mailbox2 fs-3 text-primary"></i> 386 <div> 387 <div class="fw-semibold">Search by postcode</div> 388 <div class="small text-muted">Add postcode areas, districts or sectors, like SW, E14 or E14 8.</div> 389 </div> 390 </div> 391 </label> 392 </div> 393 <div class="col-md-6"> 394 <input type="radio" class="btn-check" name="geoModeChoice" id="geoModePolygon" value="polygon" 395 autocomplete="off" > 396 <label class="geo-mode-card card h-100 w-100 text-start mb-0" for="geoModePolygon"> 397 <div class="card-body d-flex gap-3 align-items-start py-3"> 398 <i class="bi bi-pencil-square fs-3 text-primary"></i> 399 <div> 400 <div class="fw-semibold">Draw on map</div> 401 <div class="small text-muted">Trace a custom area for fine control over a smaller neighbourhood.</div> 402 </div> 403 </div> 404 </label> 405 </div> 406 </div> 407 </div> 408 </div> 409 410 <div class="row g-3 m-0 p-3 border-bottom" id="postcodePanel"> 411 <div class="col-md-6"> 412 <label for="geographyInput" class="form-label">Add postcode area, district or sector</label> 413 <div class="input-group"> 414 <input type="text" id="geographyInput" class="form-control" placeholder="e.g. E, E14 or E14 8"> 415 <button type="button" class="btn btn-secondary" id="addGeography">Add</button> 416 </div> 417 <div class="form-text" id="geographyHelp"> 418 Areas are like 'LL', districts like 'LL62', and sectors like 'LL62 5'. Add up to 15 at once. 419 </div> 420 </div> 421 <div class="col-md-6"> 422 <div class="d-flex justify-content-between align-items-center mb-2"> 423 <label class="form-label mb-0">Selected postcodes</label> 424 <button type="button" class="btn btn-link btn-sm p-0" id="clearGeographiesButton">Clear all</button> 425 </div> 426 <div id="selectedGeographies" class="d-flex flex-wrap gap-2"></div> 427 </div> 428 <div class="col-12" id="postcodeMapToggleRow"> 429 <div class="form-check"> 430 <input type="checkbox" class="form-check-input" id="showMapToggle" name="showMap" value="1" 431 > 432 <label class="form-check-label" for="showMapToggle">Show map</label> 433 </div> 434 </div> 435 </div> 436 437 <div id="mapPanel" class="row m-0 border-bottom d-none"> 438 <div class="col-lg-9 p-3"> 439 <div class="position-relative border rounded overflow-hidden"> 440 <div id="drawMapHint" class="alert alert-info py-2 px-3 draw-map-hint d-none"> 441 Hold and drag on the map to draw your search area. 442 </div> 443 <div id="customChartV2Map"></div> 444 </div> 445 <div id="drawControls" class="mt-2 d-none"> 446 <div class="d-flex flex-wrap gap-2 align-items-center"> 447 <button type="button" class="btn btn-outline-primary btn-sm" id="drawAreaButton"> 448 <i class="bi bi-pencil"></i> Draw area 449 </button> 450 <button type="button" class="btn btn-outline-secondary btn-sm" id="clearDrawnAreaButton"> 451 Clear drawing 452 </button>
453 <span class="small text-muted align-self-center" id="drawnAreaSummary"></span> 454 </div> 455 <div class="form-text"> 456 Drawn area is best for fine control over a smaller neighbourhood. For larger searches, use postcodes such as SW. 457 </div> 458 </div> 459 <div id="postcodeMapHint" class="form-text mt-2 d-none"> 460 Selected postcodes are highlighted in blue and labelled. Turn on reference boundaries below to explore areas, districts or sectors. 461 </div> 462 </div> 463 464 <div class="col-lg-3 px-2 py-3 border-start map-context-sidebar"> 465 <div id="referenceOverlayPanel" class="mb-3"> 466 <h6 class="mb-2">Reference boundaries</h6> 467 <select class="form-select form-select-sm" id="referenceLevel" aria-label="Reference boundary level"> 468 <option value="none" selected>None</option> 469 <option value="area">Postcode areas</option> 470 <option value="district">Postcode districts</option> 471 <option value="sector">Postcode sectors</option> 472 </select> 473 <div class="form-text">Grey outlines to help find postcodes. Labels appear when you zoom in closer.</div> 474 <div id="referenceZoomHint" class="alert alert-secondary py-2 px-2 small mt-2 mb-0 d-none" role="status"></div> 475 </div> 476 477 <h6>Map context layer</h6> 478 <div class="form-check"> 479 <input type="radio" class="form-check-input" name="contextLayer" id="contextNone" value="none" checked> 480 <label class="form-check-label" for="contextNone">None</label> 481 </div> 482 <div class="form-check"> 483 <input type="radio" class="form-check-input" name="contextLayer" id="contextAvm" value="avm"> 484 <label class="form-check-label" for="contextAvm">Current value</label> 485 </div> 486 487 <div class="small text-muted mt-2">Price per sqm and social housing context layers are premium map layers.</div> 488 489 490 <div id="contextLegendWrapper" class="d-none"> 491 <h5 class="border-bottom pb-2 mb-3 mt-3">Key</h5> 492 <div id="contextLegend" class="legend-grid"></div> 493 </div> 494 </div> 495 </div> 496 497 <div class="row g-3 m-0 p-3 border-bottom"> 498 <div class="col-12"> 499 <h6 class="mb-0">Filter the data</h6> 500 <div class="small text-muted">These controls decide which sales are included in the dataset.</div> 501 </div> 502 <div class="col-md-2"> 503 <label class="form-label visually-hidden">Property type</label> 504 <select class="form-select" id="propertyType" name="propertyType"><option value="">Any type</option><option value="F">Flats only</option><option value="H">All houses</option><option value="D">Detached</option><option value="S">Semi-D</option><option value="T">Terrace</option><option value="L">Terrace or Semi-D</option></select> 505 </div> 506 <div class="col-md-2"> 507 <label for="minSize" class="form-label visually-hidden">Min size</label> 508 <select class="form-select" id="minSize" name="minSize"><option value="">Any min size</option><option value="25">25 sqm</option><option value="40">40 sqm</option><option value="50">50 sqm</option><option value="60">60 sqm</option><option value="75">75 sqm</option><option value="85">85 sqm</option><option value="100">100 sqm</option><option value="115">115 sqm</option><option value="125">125 sqm</option><option value="150">150 sqm</option><option value="175">175 sqm</option><option value="200">200 sqm</option><option value="225">225 sqm</option><option value="250">250 sqm</option><option value="300">300 sqm</option><option value="350">350 sqm</option><option value="400">400 sqm</option></select> 509 </div> 510 <div class="col-md-2"> 511 <label for="maxSize" class="form-label visually-hidden">Max size</label> 512 <select class="form-select" id="maxSize" name="maxSize"><option value="">Any max size</option><option value="25">25 sqm</option><option value="40">40 sqm</option><option value="50">50 sqm</option><option value="60">60 sqm</option><option value="75">75 sqm</option><option value="85">85 sqm</option><option value="100">100 sqm</option><option value="115">115 sqm</option><option value="125">125 sqm</option><option value="150">150 sqm</option><option value="175">175 sqm</option><option value="200">200 sqm</option><option value="225">225 sqm</option><option value="250">250 sqm</option><option value="300">300 sqm</option><option value="350">350 sqm</option><option value="400">400 sqm</option></select> 513 </div> 514 <div class="col-md-2"> 515 <label for="dateOfSale" class="form-label visually-hidden">Date of sale</label> 516 <select class="form-select" id="dateOfSale" name="dateOfSale"><option value="24">in last 2 years</option><option value="3">in last 3 months</option><option value="6">in last 6 months</option><option value="12">in last 12 months</option><option value="36">in last 3 years</option><option value="48">in last 4 years</option><option value="60">in last 5 years</option><option value="72">in last 6 years</option></select> 517 </div> 518 <div class="col-md-2"> 519 <label for="newbuild" class="form-label visually-hidden">New build</label> 520 <select class="form-select" id="newbuild" name="newbuild"><option value="">Include new build</option><option value="yes">New build only</option><option value="no">Exclude new builds</option></select> 521 </div> 522 <div class="col-md-2 ms-auto align-self-end"> 523 <button type="submit" class="btn btn-primary w-100" disabled> 524 Create chart 525 </button> 526 </div> 527 </div> 528 529 <div class="row g-3 m-0 p-3"> 530 <div class="col-md-4"> 531 <h6 class="mb-1">Chart breakdown</h6> 532 <div class="small text-muted">This changes how the chart is split, without changing which sales are included.</div> 533 </div> 534 <div class="col-md-4"> 535 <label for="segmentBy" class="form-label visually-hidden">Breakdown</label> 536 <select class="form-select" id="segmentBy" name="segmentBy"><option value="none">No breakdown</option><option value="propertytype">Property type</option><option value="newbuild">New build status</option><option value="propertytype_newbuild">Property type + new build</option></select> 537 </div> 538 </div> 539 </form> 540</div> 541 542 543
544<script> 545window.customChartV2InitialState = { 546 selectedGeographies: "", 547 polygon: "", 548 geoMode: "postcode", 549 canUsePremiumLayers: false, 550 maxGeographyChips: 15 551}; 552</script>
vendor: 1 bytes, line 552
552
553<script src="/static/js/custom-charts-v2.js"></script>
553 554 555 556<style> 557 .join-modal .modal-header { 558 border-bottom: none; 559 padding: 1.5rem 1.5rem 0.5rem; 560 background-color: #f8f9fa; 561 } 562 .join-modal .modal-body { 563 padding: 1.5rem; 564 background-color: #f8f9fa; 565 } 566 .join-modal .form-check { 567 margin-bottom: 1.2rem; 568 padding: 1rem; 569 border: 1px solid #e9ecef; 570 border-radius: 0.5rem; 571 background-color: #ffffff; 572 transition: all 0.2s ease-in-out; 573 } 574 .join-modal .form-check:hover { 575 background-color: #ffffff; 576 border-color: #dee2e6; 577 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 578 } 579 .join-modal .form-control { 580 background-color: #ffffff; 581 border: 1px solid #dee2e6; 582 padding: 0.75rem; 583 font-size: 1.1rem; 584 } 585 .join-modal .form-control:focus { 586 box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); 587 border-color: #86b7fe; 588 } 589 .join-modal .btn-primary { 590 width: 100%; 591 padding: 0.875rem; 592 font-weight: 500; 593 font-size: 1.1rem; 594 } 595 .join-modal .benefits-list { 596 list-style: none; 597 padding-left: 0; 598 } 599 .join-modal .benefits-list li { 600 padding: 0.5rem 0; 601 padding-left: 2rem; 602 position: relative; 603 } 604 .join-modal .benefits-list li:before { 605 content: "â"; 606 color: #198754; 607 position: absolute; 608 left: 0; 609 font-weight: bold; 610 } 611</style> 612 613<div class="modal fade join-modal" id="joinModal" tabindex="-1" aria-labelledby="joinModalLabel" aria-hidden="true"> 614 <div class="modal-dialog modal-dialog-centered"> 615 <div class="modal-content"> 616 <div class="modal-header py-2"> 617 <h5 class="modal-title fw-bold" id="joinModalLabel">Unlock Premium Access</h5> 618 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 619 </div> 620 <div class="modal-body"> 621 <div class="d-flex align-items-center mb-3"> 622 <div> 623 <ul class="benefits-list mb-0 small"> 624 <li class="py-1">Floor plans & photos</li> 625 <li class="py-1">Valuation comparables search tool</li> 626 <li class="py-1">Custom chart builder</li> 627 <li class="py-1">Extra map layers (growth rates & planning apps)</li> 628 <li class="py-1">No quibbles refund if you're not happy</li> 629 </ul> 630 </div> 631 </div> 632 633 <form id="joinForm" method="POST" action="/create-quick-checkout"> 634 <input type="hidden" name="source" id="sourceIn
634put" value=""> 635 <input type="hidden" name="next" id="joinNextInput" value="https://housemetric.co.uk/custom-charts"> 636 <div class="mb-3"> 637 <input type="email" class="form-control" id="email" name="email" required placeholder="Enter your email"> 638 </div> 639 640 <div class="mb-4"> 641 <div class="form-check"> 642 <input class="form-check-input" type="radio" name="product_type" id="oneTime" value="onetime" checked> 643 <label class="form-check-label" for="oneTime"> 644 <strong class="d-block mb-1">1 Month Access: £14.99</strong> 645 <span class="text-muted">One time payment of £14.99 gives full access for a month</span> 646 </label> 647 </div> 648 <div class="form-check"> 649 <input class="form-check-input" type="radio" name="product_type" id="recurring" value="recurring"> 650 <label class="form-check-label" for="recurring"> 651 <strong class="d-block mb-1">Ongoing access: £10 per month</strong> 652 <span class="text-muted">Easy recurring monthly payment - cancel anytime</span> 653 </label> 654 </div> 655 </div> 656 657 <button type="submit" class="btn btn-primary">Start Your Premium Access</button> 658 <p class="text-center text-muted mt-3 mb-4 small">Secure payment powered by Stripe</p> 659 <p class="text-muted small"> 660 While most of HouseMetric is free, a modest contribution helps cover the costs of resource intensive features like image archives, advanced searches and fast data updates. 661 </form> 662 </div> 663 </div> 664 </div> 665</div> 666
667<script> 668(function () { 669 var joinModal = document.getElementById('joinModal'); 670 if (!joinModal) { 671 return; 672 } 673 674 joinModal.addEventListener('show.bs.modal', function (event) { 675 var button = event.relatedTarget; 676 var source = ''; 677 if (button) { 678 source = button.getAttribute('data-source') || ''; 679 } 680 if (!source) { 681 source = joinModal.getAttribute('data-source') || ''; 682 } 683 document.getElementById('sourceInput').value = source; 684 685 var nextInput = document.getElementById('joinNextInput'); 686 if (nextInput && !nextInput.value) { 687 nextInput.value = window.location.href; 688 } 689 690 if (source) { 691 var body = 'source=' + encodeURIComponent(source); 692 fetch('/log-join-modal', { 693 method: 'POST', 694 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 695 body: body, 696 keepalive: true 697 }).catch(function () {}); 698 } 699 }); 700})(); 701</script>
701 702 703 704 </div> 705 </main> 706 707 <!-- END page content (includes messages and app_content)--> 708 709 710 <footer class="footer mt-auto py-3 bg-white"> 711 <div class="container-xxl"> 712 <small class="text-muted"> 713 Contains HM Land Registry & EPC & OS data © Crown copyright and database right 2024. This data is licensed under 714 the Open Government Licence v3.0.<br /> 715 The data were last updated 2026-09-22 - see <a href="/faq">FAQs</a> 716 </small> 717 </div> 718 </footer> 719 720 721 722 <!-- JavaScript Bundle with Popper as we need it for sort by dropdowns, and modals --> 723
723<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 724 integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 725 crossorigin="anonymous"></script>
725 726 727 728 729</body> 730</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.