|
|
@@ -11,12 +11,9 @@
|
|
|
</head>
|
|
|
<body class="bg-light">
|
|
|
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js"></script>
|
|
|
- <link
|
|
|
- rel="stylesheet"
|
|
|
- href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
|
|
|
- type="text/css"
|
|
|
- />
|
|
|
+ <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css" type="text/css" />
|
|
|
<link rel="stylesheet" href="styles.css"/>
|
|
|
+
|
|
|
<div class="container main-app">
|
|
|
<div id="form-container" class="py-5">
|
|
|
<div id="introduction" class="content page page-0">
|
|
|
@@ -28,66 +25,101 @@
|
|
|
<button type="button" onclick="changePage(1)" class="btn btn-primary">Start</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div id="terms-and-legals">
|
|
|
- <div class="content page page-1">
|
|
|
- <form id="terms-and-conditions" class="needs-validation">
|
|
|
- <h2>Terms & Conditions</h2>
|
|
|
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dolore magni aspernatur error totam exercitationem sequi illum. Ex voluptas in, eius provident laudantium quidem quod esse corrupti quas vitae aliquam!</p>
|
|
|
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem culpa soluta, voluptatibus quam magni sapiente corporis debitis ad illo voluptas odio! Adipisci facere ad molestiae ullam vero iure minus mollitia.</p>
|
|
|
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum commodi consectetur aperiam. Obcaecati quisquam possimus et facilis quas, doloremque minima rerum reprehenderit fugiat ipsam dolorum placeat velit! Exercitationem, eveniet obcaecati.</p>
|
|
|
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quidem quisquam suscipit! Excepturi deserunt quaerat, odio recusandae molestiae assumenda voluptatem possimus id alias quas voluptatibus non quis vitae incidunt veritatis!</p>
|
|
|
- <div class="form-group form-check">
|
|
|
- <input type="checkbox" class="form-check-input" id="agreement" required>
|
|
|
- <label class="form-check-label" for="agreement">I agree with the termns and conditions</label>
|
|
|
- <div class="invalid-feedback">
|
|
|
- You must agree before going to the next step
|
|
|
- </div>
|
|
|
+ <div id="terms-and-legals" class="content page page-1">
|
|
|
+ <form id="terms-and-conditions-form" class="needs-validation">
|
|
|
+ <h2>Terms & Conditions</h2>
|
|
|
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dolore magni aspernatur error totam exercitationem sequi illum. Ex voluptas in, eius provident laudantium quidem quod esse corrupti quas vitae aliquam!</p>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem culpa soluta, voluptatibus quam magni sapiente corporis debitis ad illo voluptas odio! Adipisci facere ad molestiae ullam vero iure minus mollitia.</p>
|
|
|
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum commodi consectetur aperiam. Obcaecati quisquam possimus et facilis quas, doloremque minima rerum reprehenderit fugiat ipsam dolorum placeat velit! Exercitationem, eveniet obcaecati.</p>
|
|
|
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quidem quisquam suscipit! Excepturi deserunt quaerat, odio recusandae molestiae assumenda voluptatem possimus id alias quas voluptatibus non quis vitae incidunt veritatis!</p>
|
|
|
+ <div class="form-group form-check">
|
|
|
+ <input type="checkbox" class="form-check-input" id="agreement" required>
|
|
|
+ <label class="form-check-label" for="agreement">I agree with the termns and conditions</label>
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ You must agree before going to the next step
|
|
|
</div>
|
|
|
- <button type="button" class="btn btn-primary" onclick="changePage(2, 'agreement')">next</button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <button type="button" class="btn btn-primary" onclick="changePage(2, 'agreement')">next</button>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
- <div id="personal-information">
|
|
|
- <div class="content page page-2">
|
|
|
- <h2>Personal Information</h2>
|
|
|
- <form>
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-6 mb-3">
|
|
|
- <label for="age">Age</label>
|
|
|
- <input type="number" class="form-control" id="age" placeholder="" value="" min="10" max="110" required>
|
|
|
- <div class="invalid-feedback">
|
|
|
- Age is required
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="col-md-6">
|
|
|
- <label for="gender">Gender</label>
|
|
|
- <select class="form-control">
|
|
|
- <option>Male</option>
|
|
|
- <option>Female</option>
|
|
|
- <option>idk lmao</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
+ <div id="personal-information" class="content page page-2">
|
|
|
+ <h2>Personal Information</h2>
|
|
|
+ <form id="personal-information-form" class="needs-validation">
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="age-range">Age</label>
|
|
|
+ <select id="age-range" class="custom-select form-control">
|
|
|
+ <option selected disabled>Select an age</option>
|
|
|
+ <option value="1">11 - 17</option>
|
|
|
+ <option value="2">18 - 29</option>
|
|
|
+ <option value="3">30 - 45</option>
|
|
|
+ <option value="4">46 - 59</option>
|
|
|
+ <option value="5">60 - 69</option>
|
|
|
+ <option value="6">70+</option>
|
|
|
+ </select>
|
|
|
+ <div class="invalid-feedback">
|
|
|
+ Age is required
|
|
|
</div>
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-12 mb-3">
|
|
|
- <label for="postal-code">Postal code</label>
|
|
|
- <input type="text" class="form-control" id="postal-code"/>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="gender">Gender</label>
|
|
|
+ <select class="form-control custom-select" id="gender" custom-value="gender-custom" onChange="showCustomInput('gender-custom', this)">
|
|
|
+ <option value="male">Male</option>
|
|
|
+ <option value="female">Female</option>
|
|
|
+ <option value="other">Neither, I identify as follows</option>
|
|
|
+ </select>
|
|
|
+ <input type="text" id="gender-custom" class="form-control mt-2" required/>
|
|
|
+ </div>
|
|
|
+ <div class="form-group">
|
|
|
+ <label for="ethnicity">Ethnicity</label>
|
|
|
+ <select id="ethnicity" class="form-control custom-select" custom-value="ethnicity-custom" onChange="showCustomInput('ethnicity-custom', this)">
|
|
|
+ <option value="" selected="selected" disabled="disabled">Please select</option>
|
|
|
+ <optgroup label="White">
|
|
|
+ <option value="English/Welsh/Scottish/Northern Irish/British">English/Welsh/Scottish/Northern Irish/British</option>
|
|
|
+ <option value="Irish">Irish</option>
|
|
|
+ <option value="Gypsy or Irish Traveller">Gypsy or Irish Traveller</option>
|
|
|
+ </optgroup>
|
|
|
+ <optgroup label="Mixed/multiple ethnic groups">
|
|
|
+ <option value="White and Black Caribbean">White and Black Caribbean</option>
|
|
|
+ <option value="White and Black African">White and Black African</option>
|
|
|
+ <option value="White and Asian">White and Asian</option>
|
|
|
+ </optgroup>
|
|
|
+ <optgroup label="Asian/Asian British">
|
|
|
+ <option value="Indian">Indian</option>
|
|
|
+ <option value="Pakistani">Pakistani</option>
|
|
|
+ <option value="Bangladeshi">Bangladeshi</option>
|
|
|
+ <option value="Chinese">Chinese</option>
|
|
|
+ </optgroup>
|
|
|
+ <optgroup label="Black/African/Caribbean/Black British">
|
|
|
+ <option value="African">African</option>
|
|
|
+ <option value="Caribbean">Caribbean</option>
|
|
|
+ </optgroup>
|
|
|
+ <optgroup label="Other ethnic group">
|
|
|
+ <option value="Arab">Arab</option>
|
|
|
+ <option value="other">None of the above. I identify as follows:</option>
|
|
|
+ </optgroup>
|
|
|
+ </select>
|
|
|
+ <input type="text" id="ethnicity-custom" class="form-control mt-2" required/>
|
|
|
+ <small class="form-text text-muted">
|
|
|
+ The options above are taken from the 2011 UK Census. You can also define yours selecting the 'None of the above' option and typing in the text box
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-12 mb-3">
|
|
|
+ <label for="postal-code">Postal code</label>
|
|
|
+ <input type="text" class="form-control" id="postal-code"/>
|
|
|
</div>
|
|
|
- <button type="button">Next</button>
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="map-drawing">
|
|
|
- <div class="content page page-3">
|
|
|
- <h2>Map</h2>
|
|
|
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, numquam necessitatibus, iusto at eum non, voluptatum accusantium fugiat aut sapiente recusandae tenetur amet! Quod itaque eaque illo nemo temporibus perferendis!</p>
|
|
|
- <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
|
|
|
- <button type="button">Previous</button>
|
|
|
+ </div>
|
|
|
<button type="button">Next</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ <div id="map-drawing" class="content page page-3">
|
|
|
+ <h2>Map</h2>
|
|
|
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, numquam necessitatibus, iusto at eum non, voluptatum accusantium fugiat aut sapiente recusandae tenetur amet! Quod itaque eaque illo nemo temporibus perferendis!</p>
|
|
|
+ <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
|
|
|
+ <button type="button">Previous</button>
|
|
|
+ <button type="button">Next</button>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
<footer class="text-center text-small">
|
|
|
<p class="mb-1">© Legal stuff if needed</p>
|
|
|
<ul class="list-inline">
|
