tati
/
accent-dialect-map


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!doctype html>
<html lang="en">
  <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">
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <title>Accent dialect map</title>
  </head>
  <body class="bg-light">
    <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" 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>
            </div>
            <button type="button" class="btn btn-primary" onclick="changePage(2, 'agreement')">next</button>
          </form>
        </div>
        <div id="personal-information" class="content page page-2">
          <h2>Personal Information</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque suscipit nulla animi amet minima, recusandae, nostrum ab vero temporibus ducimus deleniti quisquam in quod expedita dolore? Eos veritatis alias magni.</p>
          <p>All fields are required</p>
          <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" required>
                <option value="" selected disabled>Please select an option</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>
            <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)" required>
                <option value="" selected disabled>Please select an option</option>
                <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)" required>
                <option value="" selected disabled>Please select an option</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="form-group">
              <label for="town-birth">Town of birth</label>
              <input id="town-birth" type="text" class="form-control" required/>
            </div>
            <div class="form-group">
              <label for="postal-code">Current postal code</label>
              <input id="postal-code" type="text" class="form-control" required/>
              <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="long-time-resident" >
                <label class="form-check-label" for="long-time-resident">I have lived in the area for 1/2 years</label>
              </div>
            </div>
            <button type="button" onclick="changePage(3, 'personalInformation')" class="btn btn-primary">Next</button>
          </form>
      </div>
      <div id="map-drawing" class="content page page-3">
        <h2>Map yeah</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 id="canvas-drawing" class="content page page-4">
        <h2>canvas</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>
        <canvas id="canvas-area"></canvas>
        <button type="button" class="btn btn-primary">Previous</button>
        <button type="button" class="btn btn-primary">Next</button>

        <!-- Modal -->
        <div class="modal fade" id="drawing-form" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Understood</button>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
    <footer class="text-center text-small">
      <p class="mb-1">&copy; Legal stuff if needed keke</p>
      <ul class="list-inline">
        <li class="list-inline-item"><a href="#">Privacy</a></li>
        <li class="list-inline-item"><a href="#">Terms</a></li>
      </ul>
    </footer>
  </div>
  <script src="main.js"></script>
  </body>
</html>