|
|
@@ -3,12 +3,10 @@
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
-
|
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
|
|
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
|
|
|
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
|
|
|
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
|
|
|
-
|
|
|
<title>Accent dialect map</title>
|
|
|
</head>
|
|
|
<body class="bg-light">
|
|
|
@@ -18,51 +16,79 @@
|
|
|
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css"
|
|
|
type="text/css"
|
|
|
/>
|
|
|
- <div class="container">
|
|
|
- <div class="py-5 text-center">
|
|
|
- <h2>Accent and dialect form</h2>
|
|
|
- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div>
|
|
|
- <h4>Personal Information</h4>
|
|
|
- <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
|
|
|
+ <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">
|
|
|
+ <div class="jumbotron">
|
|
|
+ <h2>Accent and dialect form</h2>
|
|
|
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit voluptatum corporis minima, eius officiis magnam quae vero praesentium odio facilis minus illo ut atque accusamus esse deserunt. Fuga, autem molestiae!</p>
|
|
|
+ <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos impedit natus dolorem ipsam rem cum mollitia, cumque sapiente omnis ea sed nobis ullam, asperiores dignissimos. Unde dolore iure quisquam aut.</p>
|
|
|
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat suscipit fugiat, iste, odio tempora dolor, voluptatum assumenda enim aspernatur rem ipsam animi corrupti sapiente labore repellat quam amet. Ipsa, aspernatur!</p>
|
|
|
+ <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>
|
|
|
- </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>
|
|
|
+ <button type="button" class="btn btn-primary" onclick="changePage(2, 'agreement')">next</button>
|
|
|
+ </form>
|
|
|
</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 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>
|
|
|
+ <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>
|
|
|
+ <button type="button">Next</button>
|
|
|
+ </form>
|
|
|
</div>
|
|
|
- <div class="row">
|
|
|
- <div class="col-md-12">
|
|
|
- <label>Map time</label>
|
|
|
- <div id='map' style='width: 100%; height: 80vh;' class="form-control"></div>
|
|
|
- </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>
|
|
|
+ <button type="button">Next</button>
|
|
|
</div>
|
|
|
- <hr class="mb-4">
|
|
|
- <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
|
|
|
- </form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <footer class="my-5 pt-5 text-muted text-center text-small">
|
|
|
+ <footer class="text-center text-small">
|
|
|
<p class="mb-1">© Legal stuff if needed</p>
|
|
|
<ul class="list-inline">
|
|
|
<li class="list-inline-item"><a href="#">Privacy</a></li>
|
|
|
@@ -70,75 +96,6 @@
|
|
|
</ul>
|
|
|
</footer>
|
|
|
</div>
|
|
|
- <script>
|
|
|
- mapboxgl.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
|
|
|
- const bounds = [
|
|
|
- [-2.460270, 53.370427],
|
|
|
- [-2.062598, 53.552900]
|
|
|
- ]
|
|
|
-
|
|
|
- const map = new mapboxgl.Map({
|
|
|
- container: 'map',
|
|
|
- style: 'mapbox://styles/tinama/ck7avipta06nj1jmomolvvrbr',
|
|
|
- center: [-2.884808, 53.495743],
|
|
|
- zoom: 9.5,
|
|
|
- });
|
|
|
-
|
|
|
- const Draw = new MapboxDraw({
|
|
|
- displayControlsDefault: false,
|
|
|
- controls: {
|
|
|
- polygon: true,
|
|
|
- trash: true
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- console.log("turf", turf);
|
|
|
-
|
|
|
- const AddPopup = (map) => (area) => {
|
|
|
- let polygon = turf.polygon(area);
|
|
|
- let center = turf.centroid(polygon);
|
|
|
- console.log(center, polygon)
|
|
|
-
|
|
|
- return new mapboxgl.Popup({closeOnClick: false})
|
|
|
- .setLngLat(center.geometry.coordinates)
|
|
|
- .setHTML(`
|
|
|
- <h3>form</h3>
|
|
|
- <label for="data">some data</label>
|
|
|
- <input type="text" class="form-control" id="data" placeholder="" required>
|
|
|
- <button type="button">save</button>
|
|
|
- `)
|
|
|
- .addTo(map)
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- map.addControl(Draw, 'top-right');
|
|
|
-
|
|
|
- map.on('load', function() {
|
|
|
- let drawnData = {};
|
|
|
- map.on('draw.create', createArea);
|
|
|
- map.on('draw.delete', deleteArea);
|
|
|
- map.on('draw.update', updateArea);
|
|
|
-
|
|
|
- function createArea(polygon) {
|
|
|
- let area = polygon.features[0].geometry;
|
|
|
- drawnData = {
|
|
|
- ...drawnData,
|
|
|
- [polygon.features[0].id]: area
|
|
|
- };
|
|
|
-
|
|
|
- console.log("create", area);
|
|
|
- const popup = AddPopup(map)(area.coordinates);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function deleteArea(polygon) {
|
|
|
- console.log('delete', polygon);
|
|
|
- }
|
|
|
-
|
|
|
- function updateArea(polygon) {
|
|
|
- console.log('update', polygon)
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
+ <script src="app.js"></script>
|
|
|
</body>
|
|
|
</html>
|
