update add specs md

vwolfley · Apr 7, 2024 · f1d0e98 · f1d0e98
1 parent 5948043
commit f1d0e98
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 19 deletions.
diff --git a/scoots/attributions.html b/scoots/attributions.html
@@ -104,7 +104,12 @@ <h3>Reservations Page:</h3>
                             >Pixabay</a
                         >
                     </li>
-                    <li></li>
+                    <li>
+                        Photo by Nathan Salt:
+                        <a href="https://www.pexels.com/photo/photo-of-man-riding-red-motor-scooter-2549355/"
+                            >https://www.pexels.com/photo/photo-of-man-riding-red-motor-scooter-2549355/</a
+                        >
+                    </li>
                 </ul>
                 <h3>Contact Page:</h3>
                 <ul>
@@ -129,12 +134,7 @@ <h3>Contact Page:</h3>
                             >https://www.pexels.com/photo/a-green-scooter-parked-next-to-a-boat-20743704/</a
                         >
                     </li>
-                    <li>
-                        Photo by Nathan Salt:
-                        <a href="https://www.pexels.com/photo/photo-of-man-riding-red-motor-scooter-2549355/"
-                            >https://www.pexels.com/photo/photo-of-man-riding-red-motor-scooter-2549355/</a
-                        >
-                    </li>
+
                     <li>
                         Photo by Phu Huynh:
                         <a href="https://www.pexels.com/photo/people-on-motor-scooters-riding-on-a-street-in-summer-and-smiling-16462208/"

diff --git a/scoots/images/heros/red-scooter-riding.webp b/scoots/images/heros/red-scooter-riding.webp
diff --git a/scoots/project-description.md b/scoots/project-description.md
@@ -0,0 +1,91 @@
+# ~Scoots~
+
+## Company Description
+
+~Scoots~ is a fictitious 🛵 motor scooter rental company located on the island of Cozumel off the coast of Mexico in the western Caribbean Sea. This owner-operator company caters to locals, walk-in tourists, motor scooter enthusiasts, and cruise-based touring groups and partnerships.
+
+The company has two physical rental locations on Cozumel. One is near the Playa del Carmen-Cozumel Ferry dock in el Centro de Cozumel and the other is near the Terminal Puerta Maya further south along the coast which caters to the cruise lines and patrons. The company promotes friendly and easy to rent services of motor scooters, jeeps, and side-by-sides ATVs.
+
+The overall goal of the website project is to promote the rental services for those customers that like to do their homework before getting to the island and to provide information about the services, requirements, and rental process. The website should reflect the fun and carefree attitude of the island and the ability to escape the touristy western part of the island by exploring the vast coasts and inlets on the southern and eastern shores.
+
+## Rental Information
+
+### Types of Rentals
+
+-   Honda Motor Scooters
+    -   Honda Metropolitan (49cc) - 1 person
+    -   Honda Dio (110cc) - 2 person
+    -   Honda PCX150 (149cc) - 2 person
+-   Side-by-Side ATVs
+    -   Honda Pioneer 1000 - 4 person
+-   Jeeps
+    -   Jeep Wrangler - 4 door manuel with A/C - 5 person
+    -   Jeep Wrangler - 2 door - open air - manuel - 4 person
+
+### Rental Services and Agreements
+
+-   A $50 security deposit is required to confirm reservations.
+-   A valid drivers license is required in hand at the time of rental.
+-   No one under the age of 12 years of age are allowed to ride on the scooters.
+-   Fuel charge is not included.
+-   Unlimited mileage.
+-   Liability insurance is included.
+-   Damage insurance is available for purchase.
+-   Free delivery to Cozumel hotels or Airbnbs for 2+ day rentals.
+-   Payment via Google Pay, Apple Pay, cash, credit card, debit card, or venmo.
+-   Rentals may be returned to either physical location.
+
+### Pricing
+
+| **Max Rental Pricing**          |
+| ------------------------------- | ---------------- | ----------------------- | ------------ | ----------------------- | ------------ |
+|                                 | **Reservation**  | **Walk-In**             |
+| **Rental Type**                 | **Max. Persons** | **Half Day<br>(3 hrs)** | **Full Day** | **Half Day<br>(3 hrs)** | **Full Day** |
+| ~Honda Metro Scooter            | 1                | $20                     | $30          | $25                     | $35          |
+| ~Honda Dio Scooter              | 2                | $30                     | $40          | $35                     | $45          |
+| ~Honda PCX150 Scooter           | 2                | $40                     | $50          | $45                     | $55          |
+| Honda Pioneer ATV               | 4                | $50                     | $70          | $60                     | $80          |
+| Jeep Wrangler - 4 door with a/c | 5                | $70                     | $100         | $85                     | $125         |
+| Jeep Wrangler - 2 door          | 4                | $60                     | $85          | $70                     | $90          |
+
+## Site Specifications
+
+### Home Page
+
+📄 The Home page is a contemporary, exciting landing page providing images of the island and rental facilities and must include the following:
+
+-   A call to action to make a rental reservation.
+-   Readily available navigation and contact information.
+-   Summary information about all the types of rentals.
+-   Social media links (a general link is OK)
+-   Weather information from the free version of openweathermap.org. Here is the minimum information to include on the page:
+    ✔️ The current temperature
+    ✔️ The current humidity
+    ✔️ The next day's forecasted temperature at 15:00 (3:00pm).
+    ✔️ All the weather data points provided including the main (which is the title, e.g., "Clouds"), the description, and the associated weather icon.
+    There may likely only be one data point under weather but your code should display any and all if provided by the API.
+-   Include a closeable message at the very top of the page that provides the high temperature temp-max for the current day.
+
+### Rentals Page
+
+The Rentals page describes the available rental options and prices with images.
+
+-   The prices displayed on the site must be obtained from a JSON data source of your own making.
+-   Store this .json file in a data 📁 folder in this project folder.
+-   Incorporate a data table in your HTML structure to display some portion of this information.
+
+### Reservations Page
+
+📄 The Reservations page that contains:
+
+-   rental agreement information, and
+-   a valid form that collects rental details such as the date, period, rental type, number, phone number, name, email, home state or country, cruise line if applicable, and special accommodations/comments such as the need and location of a drop-off request.
+-   Use CSS Grid and/or CSS Flex to design the layout.
+
+### Contact Page
+
+The Contact page will contain:
+
+-   essential contact information,
+-   an embedded Google map showing the two locations on Cozumel, and
+-   a basic contact us form with name, email, and comment.
diff --git a/scoots/rentals.html b/scoots/rentals.html
@@ -79,8 +79,9 @@ <h2>Why Scoots Rentals?</h2>
                 <ul>
                     <li>Unlimited mileage</li>
                     <li>Liability insurance is included</li>
-                    <li>Free delivery to Cozumel hotels or Airbnbs for 2+ day rentals</li>
+                    <li>Free delivery to Cozumel hotels or Airbnb's for 2+ day rentals</li>
                     <li>Rentals may be returned to either physical location</li>
+                    <li>Reservations or Same-day Walk-Ins</li>
                     <li>Easy payment options</li>
                 </ul>
             </div>

diff --git a/scoots/reservations.html b/scoots/reservations.html
@@ -121,13 +121,25 @@ <h2>Rental Services and Agreement</h2>
                                 <tbody></tbody>
                             </table>
                         </section>
+                        <section class="reservations-fun">
+                            <h3>Let the adventure begin!</h3>
+                            <img src="./images/heros/red-scooter-riding.webp" alt="Scooter-blur" loading="lazy" />
+                        </section>
                     </div>
                     <div class="reservations-form">
                         <form method="get" action="thankyou.html">
                             <fieldset>
                                 <legend>Vehicle Registration Information</legend>
                                 <label class="top">Pickup Date*<input type="date" id="start-date" name="start-date" required /></label>
                                 <label class="top">Return Date*<input type="date" id="end-date" name="end-date" required /></label>
+                                <label class="top"
+                                    >Pickup Location*
+                                    <select id="location" class="" name="location" required>
+                                        <option value="">Select One</option>
+                                        <option value="honda-metro">Playa del Carmen-Cozumel</option>
+                                        <option value="honda-dio">Puerta Maya</option>
+                                    </select>
+                                </label>
                                 <div>Rental Length</div>
                                 <label class="rad"><input type="radio" name="period" value="half-day" required /> Half Day</label>
                                 <label class="rad"><input type="radio" name="period" value="full-day" required /> Full Day</label>
@@ -155,6 +167,7 @@ <h2>Rental Services and Agreement</h2>
                                     </select>
                                 </label>
                                 <label class="sbs"><input type="checkbox" name="insurance" value="yes" /> Add Vehicle Insurance</label>
+                                <label class="sbs"><input type="checkbox" name="agreement" value="yes" /> I have Read the Rental Agreement</label>
                             </fieldset>
                             <fieldset>
                                 <legend>Drivers Information</legend>

diff --git a/scoots/scripts/rentals.js b/scoots/scripts/rentals.js
@@ -46,16 +46,24 @@ const displayRatesCards = (rentals) => {
     priceCards.forEach((priceCard, index) => {
         const type = rentals[index];
 
-            const cardInfo = document.createElement("div");
-
-            cardInfo.innerHTML = `
-            <p>Riders: ${type.persons}</p>
-            <p>Full Day: $${type.reservation_full_day}</p>
-            <p>Half Day: $${type.reservation_half_day}</p>
-            <p>Walk-in Full Day: $${type.walk_in_full_day}</p>
-            <p>Walk-in Half Day: $${type.walk_in_half_day}</p>
+        const cardInfo = document.createElement("div");
+
+        cardInfo.innerHTML = `
+        <p>Max persons: ${type.persons}</p>
+            <h4>Reservation</h4>
+            <div class="cost-type">
+            <p><span class="cost">$${type.reservation_full_day}</span>/full</p>
+            <span class="cost-sp">/</span>
+            <p><span class="cost">$${type.reservation_half_day}</span>/half</p>
+            </div>
+            <h4>Same Day</h4>
+            <div class="cost-type">
+            <p><span class="cost">$${type.walk_in_full_day}</span>/full</p>
+            <span class="cost-sp">/</span>
+            <p><span class="cost">$${type.walk_in_half_day}</span>/half</p>
+            </div>
             `;
-            priceCard.appendChild(cardInfo);
+
+        priceCard.insertAdjacentElement("afterend", cardInfo);
     });
 };
-
diff --git a/scoots/styles/main.css b/scoots/styles/main.css
@@ -689,10 +689,12 @@ h5 {
 .card {
     display: flex;
     flex-direction: column;
+    align-items: center;
     padding: 10px;
     border: 1px solid #ccc;
     box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
     text-align: center;
+    line-height: 1.3;
     width: 100%;
     max-width: 375px;
 }
@@ -711,6 +713,11 @@ h5 {
     font-weight: 700;
     margin: 10px 0;
 }
+.card h4 {
+    font-size: 1em;
+    font-weight: 600;
+    margin: 0;
+}
 .card p {
     font-size: 0.85em;
     margin: 5px 0;
@@ -731,6 +738,24 @@ h5 {
 .places-info .card:nth-child(2) {
     width: 375px;
 }
+.cost {
+    font-size: 2em;
+    font-weight: 800;
+}
+.cost-type {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+.cost-type p {
+    margin: 0;
+}
+.cost-sp{
+    font-size: 2.5em;
+    font-weight: 600;
+    color: lightgray
+}
 
 /* Reservations Banner */
 .reservations-banner {
@@ -872,6 +897,17 @@ h5 {
     font-size: 0.9em;
     margin: 5px 0;
 }
+.reservations-fun {
+    text-align: center;
+    color: var(--text-color-header);
+    order: 3;
+}
+.reservations-fun img{
+    width: 75%;
+    height: auto;
+
+}
+
 iframe {
     width: auto;
     height: 300px;
@@ -926,7 +962,7 @@ fieldset label.top select {
 }
 fieldset label.sbs {
     display: block;
-    padding: 0.7rem 0;
+    padding: 0.7rem .3rem 0;
     color: var(--text-color-header);
 }
 fieldset label.rad {
@@ -1067,6 +1103,7 @@ fieldset label.top textarea:required:valid {
     color: var(--text-color-header);
     order: 2;
 }
+
 table {
     margin: 10px auto;
     border: thin solid var(--border);