PageSourceSearch

https://housemetric.co.uk/custom-charts

html housemetric.co.uk collected 2026-09-27 21:55:25 UTC 29,381 bytes, 730 lines download raw bytes

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.