commit 715afaf125032c89a9c94cf469356dcfb9f21090 Author: Batuhan Berk Başoğlu Date: Sun Apr 11 14:05:26 2021 -0400 Added the files. diff --git a/README.md b/README.md new file mode 100644 index 0000000..d773328 --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# SEG3125-LAB5 + +The validated service company website made by Ruchira Perrera, Sam Oyediran, Batuhan Basoglu, and Kene Ojukwu + +https://arctichawk1.github.io/SEG3125-LAB5/ + + +Noteable bugs in the website +the time selection does not work on Safari when trying to select date for appointment +Please kindly test on Chrome + + +# Authors + +- Batuhan Basoglu, 300001274 - ArcticHawk1 +- Ruchira Perera, 8714992 - ruchirawp +- Sam Oyediran, 300016349 - soyed +- Kene Ojukwu, 300027974 - kene17 diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..7d7b3a2 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,357 @@ +body { + font-family: 'Montserrat', sans-serif; + text-align: center; +} + + +/* Headings */ + +.big-heading { + font-family: 'Montserrat-Black'; + font-size: 3.5rem; + line-height: 1.5; +} + +.big-heading-2 { + font-family: 'Montserrat-Black'; + font-size: 2.0rem; + line-height: 1.5; + padding-top: 80px; +} + +.container-fluid { + padding: 7% 15%; +} + + +/* Sections */ + +.colored-section#title { + background-image: url("images/biking.jpg"); +} + +.colored-section { + background-color: #a77a32; + color: #ffffff; +} + +.colored-section2 { + background-color: #34626c; + color: #ffffff; +} + +.colored-section3 { + background-color: #cfd3ce; + color: #ffffff; +} + +.white-section { + background-color: #ffffff; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: 'Montserrat-Bold'; +} + +h3 { + font-size: 1.5rem; +} + +h5 { + font-size: 23px; +} + +p { + color: rgb(77, 77, 77); + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif +} + +hr { + border: dotted #EAF6F6 6px; + border-bottom: none; + width: 20%; + /* margin: 100px auto; */ +} + +h2:hover { + color: #72a7b3 +} + + +/* navigation bar */ + +.navbar { + padding: 0 0 4.5rem; +} + +.section-heading { + font-size: 3rem; + line-height: 1.5; + color: #34626c +} + +.navbar-brand { + font-family: 'Ubuntu', sans-serif; + font-size: 2.5rem; + font-weight: bold; +} + +.navbar-item { + padding: 0px 18px; +} + +.navbar-link { + font-size: 1.2rem; + font-family: 'Montserrat-light', sans-serif; +} + +#test { + color: rgb(236, 236, 236); +} + +#test:hover { + color: rgb(216, 181, 24); +} + + +/* Download Buttons */ + +.download-btn { + margin: 5% 3% 5% 0; +} + + +/* Title Section */ + +#title .container-fluid { + padding: 3% 15% 7%; + text-align: left; +} + + +/* Title Image */ + +.title-image { + width: 100%; + position: right; + right: 30%; +} + +#features .container-fluid { + padding: 3% 5%; + text-align: left; +} + + +/* Worker profiles */ + +.profile { + width: 200px; + height: 200px; + object-fit: cover; +} + +.profile_names { + font-size: 25px; +} + +.name_text { + font-weight +} + + +/* Features section */ + +#features { + position: relative; + z-index: 1; +} + +.feature-title { + font-size: 1.5rem; +} + +.feature-box { + padding: 4%; +} + +.feature-icon { + color: #34626c; + margin-bottom: 1rem; +} + +.feature-icon:hover { + color: #839b97; +} + + +/* testimonial section */ + +#testimonials { + background-color: #ef8172; +} + +.testimonial-text { + font-size: 3rem; + line-height: 1.5; +} + +.testimonial-img { + width: 10%; + border-radius: 100%; + margin: 20px; +} + +.carousel-item {} + + +/* Press section */ + +#press { + background-color: #81ef72; + padding-bottom: 3%; +} + +.press-img { + width: 15%; + margin: 20px 20px 50px; +} + + +/* Pricing Section */ + +#pricing { + padding: 100px; +} + +.price-text { + font-size: 3rem; + line-height: 1.5; +} + +.pricing-col { + padding: 3% 2%; +} + + +/* CTA Section */ + +#cta { + padding: 3% 7% +} + +.map-img { + width: 70%; + height: 400px; + margin: 3% auto; +} + + +/*****Appointment Section *****/ + +.request-label { + text-align: left; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; + <<<<<<< HEAD +} + +input:valid+span:after { + ======= +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +} + +.errorMsg { + color: red; +} + +.accountLabel { + text-align: left; +} + + +/* Footer section */ + +#footer {} + +.social-icon { + margin: 20px 10px; +} + +.res { + text-align: center; +} + +.rec { + text-align: center; +} + +@media (max-width: 1028px) { + #title { + text-align: center; + } + .title-image { + position: static; + transform: rotate(0); + } +} + +.colored-section#title { + background-image: url("images/biking.jpg"); +} + + +/* Style inputs with type="text", select elements and textareas */ + +input[type=text], +select, +textarea { + width: 100%; + /* Full width */ + padding: 12px; + /* Some padding */ + border: 1px solid #ccc; + /* Gray border */ + border-radius: 4px; + /* Rounded borders */ + box-sizing: border-box; + /* Make sure that padding and width stays in place */ + margin-top: 6px; + /* Add a top margin */ + margin-bottom: 16px; + /* Bottom margin */ + resize: vertical/* Allow the user to vertically resize the textarea (not horizontally) */ +} + + +/* Style the submit button with a specific background color etc */ + +input[type=submit] { + background-color: #d60024; + color: white; + padding: 12px 20px; + border: none; + border-radius: 4px; + cursor: pointer; +} + + +/* When moving the mouse over the submit button, add a darker green color */ + +input[type=submit]:hover { + background-color: #fa4664; +} diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 0000000..2795a90 Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/Stewie.png b/images/Stewie.png new file mode 100644 index 0000000..a66e7be Binary files /dev/null and b/images/Stewie.png differ diff --git a/images/bike1.jpg b/images/bike1.jpg new file mode 100644 index 0000000..527fa2d Binary files /dev/null and b/images/bike1.jpg differ diff --git a/images/bike2.jpg b/images/bike2.jpg new file mode 100644 index 0000000..2853151 Binary files /dev/null and b/images/bike2.jpg differ diff --git a/images/bike3.jpg b/images/bike3.jpg new file mode 100644 index 0000000..5cca1fc Binary files /dev/null and b/images/bike3.jpg differ diff --git a/images/bike_repair1.jpg b/images/bike_repair1.jpg new file mode 100644 index 0000000..bec3c83 Binary files /dev/null and b/images/bike_repair1.jpg differ diff --git a/images/bike_shop1.jpg b/images/bike_shop1.jpg new file mode 100644 index 0000000..ba46f2c Binary files /dev/null and b/images/bike_shop1.jpg differ diff --git a/images/biking.jpg b/images/biking.jpg new file mode 100644 index 0000000..653dad4 Binary files /dev/null and b/images/biking.jpg differ diff --git a/images/biking2.jpg b/images/biking2.jpg new file mode 100644 index 0000000..aaac6b0 Binary files /dev/null and b/images/biking2.jpg differ diff --git a/images/brake.jpg b/images/brake.jpg new file mode 100644 index 0000000..080d989 Binary files /dev/null and b/images/brake.jpg differ diff --git a/images/customers/Anthony.png b/images/customers/Anthony.png new file mode 100644 index 0000000..f17ac86 Binary files /dev/null and b/images/customers/Anthony.png differ diff --git a/images/customers/Dottie.jpg b/images/customers/Dottie.jpg new file mode 100644 index 0000000..f15d1f2 Binary files /dev/null and b/images/customers/Dottie.jpg differ diff --git a/images/customers/bobby.jpg b/images/customers/bobby.jpg new file mode 100644 index 0000000..e85babe Binary files /dev/null and b/images/customers/bobby.jpg differ diff --git a/images/customers/keith.png b/images/customers/keith.png new file mode 100644 index 0000000..f3f9120 Binary files /dev/null and b/images/customers/keith.png differ diff --git a/images/favicon.ico b/images/favicon.ico new file mode 100644 index 0000000..a582fe4 Binary files /dev/null and b/images/favicon.ico differ diff --git a/images/logo.jpg b/images/logo.jpg new file mode 100644 index 0000000..78dd045 Binary files /dev/null and b/images/logo.jpg differ diff --git a/images/logo2.png b/images/logo2.png new file mode 100644 index 0000000..e41d799 Binary files /dev/null and b/images/logo2.png differ diff --git a/images/maintenance.jpg b/images/maintenance.jpg new file mode 100644 index 0000000..248ebb8 Binary files /dev/null and b/images/maintenance.jpg differ diff --git a/images/mumen.jpg b/images/mumen.jpg new file mode 100644 index 0000000..6a0b22a Binary files /dev/null and b/images/mumen.jpg differ diff --git a/images/owner_pic.jpg b/images/owner_pic.jpg new file mode 100644 index 0000000..7da120e Binary files /dev/null and b/images/owner_pic.jpg differ diff --git a/images/tire.jpg b/images/tire.jpg new file mode 100644 index 0000000..df1c8a7 Binary files /dev/null and b/images/tire.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a2772b --- /dev/null +++ b/index.html @@ -0,0 +1,464 @@ + + + + + + + Batuhan's Bikes + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + + + +
+
+

Nothing beats the high of a good bike ride.

+ +
+ +
+ bike repair +
+
+
+ +
+ + + + +
+ +
+ +

Meet the Team

+
+
+ + +
+ +
+ +
+
+
+ +
+
+
+
Batuhan
+

Hey, I'm the store owner. Ever since I was a child, it was my dream to own + a bike shop. I specialize in brake repair.

+

Availability: Monday-Friday

+
+
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+
Mumem
+

Without biking, my life has no meaning. I am + the best at fixing punctures in town.

+

Availability: Tuesday-Wednesday

+
+
+
+
+ +
+ +
+ +
+
+
+ +
+
+
+
Stewart
+

I recently got my masters in bike fixing. I can help you with any repair or + maintenence

+

Availability: Monday-Wednesday

+
+
+
+ +
+
+ + + +
+ + + + +
+ + + +
+ + + +
+ +

Our Services

+

Simple and affordable price plans for your bike.

+ + +
+
+
+
+

Brake Repair

+
+
+

$47.95

+ bike1 + +


Standard Kit | Part Replacement

+ +
+
+
+ +
+
+
+

Fixing Punctures

+
+
+

$59.95

+ bike2 +


Advanced Kit | Part Replacement

+ +
+
+
+ + +
+
+
+

Full Repair/Maintenance

+
+
+

$79.95

+ bike3 +


Full Cleaning Kit | Full Part Replacement

+ +
+
+
+
+
+ + + + +
+
+ +
+

Contact Us

+

5 Hawthorne Avenue
+ Ottawa, Ontario
+ Phone: (613) 567-8180
+ Email: info@cycosport.ca
+

Buisness Hours: 8:30 - 22:00, Monday to Friday +

+

+
+
+ +
+
+
+
+ + +
+ + + + + +
+ + + +
+
+ + +

Book an Appointment

+
+ + +
+ +
+ +
+
+
+ +
+
+ +
+
+

Services

+

Please select services you require

+ + + +
+

Mechanics

+

Please select your technican

+ + +

+
+ +

Appointment Time

+

Please select an appointment time

+ +
+ + +

+
+ + + +

+
+
+
+
+
+ +
+
+
+ +
+
+ +
+
+

Contact Information

+

Please fill the spaces below with your contact information

+ +
+
+
+ + +

+
+
+ + +

+
+
+
+
+
+
+ + +

+
+
+ + +

+
+
+
+
+

Payment Information

+

Please fill the spaces below with your payment information

+
+
+
+ + +

+
+
+ + +

+
+
+
+
+
+
+ + +

+
+
+ + +

+
+
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + + + + + + + + + + diff --git a/scripts/index.js b/scripts/index.js new file mode 100644 index 0000000..f5e884d --- /dev/null +++ b/scripts/index.js @@ -0,0 +1,142 @@ +function toAppointment() { + document.getElementById('appointment').scrollIntoView(); +} +// Calendar Validation +// //logic was gotten from +// https://forum.jquery.com/topic/disable-single-day-of-a-week-in-datepicker +var value = 0; + +$(function() { + $("#datepicker").datepicker({ + beforeShowDay: getAvailability + }); +}); + +function getMechanic(selectObject) { + value = selectObject.value; +} + +function getAvailability(date) { + + if (value == 1 && (date.getDay() === 0 || date.getDay() == 6)) /* restrict weekends */ + return [false] + if (value == 2 && (date.getDay() === 0 || date.getDay() == 1 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict M,Thurs, Fri, Sat, Sun */ + return [false] + if (value == 3 && (date.getDay() === 0 || date.getDay() == 4 || date.getDay() == 5 || date.getDay() == 6)) /* restrict Thurs, Fri, Sat, Sun */ + return [false] + if (date.getDay() === 0 || date.getDay() == 6) /* weekends */ + return [false] + else + return [true, "", ""] +} + +//grab my Form +var form = $('#contactForm'); + +//Form Validation +function validateForm() { + //first check that the user has selected, + var serviceSelected = $('#selectService option:selected').val(); + if (serviceSelected === "Select Service") { + $('#serviceError').html("*Please select a service"); + } else { + $('#serviceError').html(""); + } + + //next check for the technician selected by the users + if ($('#selectTechnican option:selected').val() === "Select technican") { + $('#technicanError').html("*Please select a technican"); + } else { + $('#technicanError').html(""); + } + + //next, check for appointment date selection + if ($('#datepicker').val() === "") { + $('#dateError').html("*Please select an appointment Date"); + } else { + $('#dateError').html(""); + } + //next, check for appointment time selection + var timeSelected = $('#appt-time').val(); + if ($('#appt-time').val() === "") { + $('#timeError').html("*Please select an appointment time"); + } else { + $('#timeError').html(""); + } + // Account Section + // //check the first Name Field + if ($('#fname').val() === "" || !$('#fname').val().length) { + $("#fnameError").html("*Please enter your first name"); + } else { + $("#fnameError").html(""); + } + //check the last name field + if ($('#lname').val() === "" || !$('#lname').val().length) { + $("#lnameError").html("*Please enter your last name"); + } else { + $("#lnameError").html(""); + } + //check the phone number Field and validate phone number + // var phoneNumber = $('#phoneNum').val(); + //this filter was gotten from this website to valid the phone Number *https://www.w3resource.com/javascript/form/phone-no-validation.php* + var phoneFilter = /^\d{10}$/; + // console.log(phoneNumber); + if ($('#phoneNum').val() === "" || !$('#phoneNum').val().length) { + $("#phoneNumberError").html("*Please enter your Phone Number"); + } else if (!$('#phoneNum').val().match(phoneFilter)) { + $("#phoneNumberError").html("*Invalid phone number please enter a 10 digit number"); + } else { + $("#phoneNumberError").html(""); + } + //source of this is from the link below + //https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript + var emailFilter = /^\S+@\S+$/; + if ($('#email').val() === "" || !$('#email').val().length) { + $("#emailError").html("*Please enter your email Address"); + } else if (!$('#email').val().match(emailFilter)) { + $("#emailError").html("*Please enter a valid email address"); + } else { + $("#emailError").html(""); + } + + + // console.log(cardHolder); + if ($('#cardHolder').val() === "" || !$('#cardHolder').val().length) { + $("#cardHolderError").html("*Please enter name on the card"); + } else { + $("#cardHolderError").html(""); + } + + //the logic used for the filters in this section was gotten from + ////https://stackoverflow.com/questions/6176802/how-to-validate-a-credit-card-number + var creditFilter = /^\d{16}$/; + + if ($('#creditCard').val() === "" || !$('#creditCard').val().length) { + $("#creditCardError").html("*Please enter your valid credit card number"); + } else if (!$('#creditCard').val().match(creditFilter)) { + $("#creditCardError").html("*Invalid credit card number. Please enter a valid 16 digit credit card"); + } else { + $("#creditCardError").html(""); + } + + var expiryFilter = /^\d{4}$/; + if ($('#expiryDate').val() === "" || !$('#expiryDate').val().length) { + $("#expiryDateError").html("*Please enter your credit card expiry date"); + } else if (!$('#expiryDate').val().match(expiryFilter)) { + $("#expiryDateError").html("*Invalid expiry date. Please enter a valid expiry date of format MMYY!"); + } else { + $("#expiryDateError").html(""); + } + + var cvvFilter = /^\d{3}$/; + if ($('#cvv').val() === "" || !$('#cvv').val().length) { + $("#cvvError").html("*Please enter your credit card CVV"); + } else if (!$('#cvv').val().match(cvvFilter)) { + $("#cvvError").html("*Please enter 3 digit number"); + } else { + $("#cvvError").html(""); + } + //after all the test pass submit the form and reset. + contactForm.reset(); + +}