diff --git a/scoots/attributions.html b/scoots/attributions.html index 5a00db9..7255d45 100644 --- a/scoots/attributions.html +++ b/scoots/attributions.html @@ -82,13 +82,11 @@

Home Page:

>
  • https://www.traveltomtom.net/destinations/north-america/mexico/scooter-rental-cozumel
  • -
  • Rentals Page:

    Reservations Page:

    diff --git a/scoots/reservations.html b/scoots/reservations.html index d1f8336..58f504b 100644 --- a/scoots/reservations.html +++ b/scoots/reservations.html @@ -127,7 +127,7 @@

    Let the adventure begin!

    -
    +
    Vehicle Registration Information @@ -166,8 +166,13 @@

    Let the adventure begin!

    - - + +
    Drivers Information @@ -217,11 +222,19 @@

    Let the adventure begin!

    >
    -
    + + + diff --git a/scoots/scripts/reservations.js b/scoots/scripts/reservations.js index 47d6132..b96cccd 100644 --- a/scoots/scripts/reservations.js +++ b/scoots/scripts/reservations.js @@ -69,7 +69,7 @@ function populateCountryDropdown() { populateCountryDropdown(); function validateForm(event) { - const elements = document.querySelectorAll("#start-date, #end-date, #vehicle, #riders, #name, #phone, #email, #countryDropdown"); + const elements = document.querySelectorAll("#start-date, #end-date, #vehicle, #riders, #name, #phone, #email, #countryDropdown, #agreement"); const radioInputs = document.querySelectorAll('input[type="radio"][name="period"]'); let isValid = true; @@ -92,9 +92,11 @@ function validateForm(event) { } if (isValid) { + openModal(); // Form is valid, submit it event.preventDefault(); // Prevent form submission } else { + alert("Error! Please correctly fill out the request!"); event.preventDefault(); // Prevent form submission } } @@ -109,6 +111,13 @@ function showError() { error.classList.add("hide"); }, 3000); // Hide the message after 3 seconds } +function openModal() { + document.getElementById("successModal").style.display = "block"; +} + +function closeModal() { + document.getElementById("successModal").style.display = "none"; +} /* **************************************************** Rental Data and Details diff --git a/scoots/styles/main.css b/scoots/styles/main.css index 84c1e0c..c7777c4 100644 --- a/scoots/styles/main.css +++ b/scoots/styles/main.css @@ -791,6 +791,42 @@ h5 { flex-direction: row; } } +/* Modal styles */ +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(0, 0, 0, 0.4); +} + +.modal-content { + background-color: var(--success-background); + color: var(--success-text); + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 400px; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: black; + text-decoration: none; + cursor: pointer; +} /* ********************************* Contact Page Styles & Reservations Page Styles