2021-04-11 18:05:26 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< link rel = "icon" href = "images/favicon.ico" >
< title > Batuhan's Bikes< / title >
<!-- Google fonts -->
< link href = "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Ubuntu:wght@300;400;700&display=swap" rel = "stylesheet" >
<!-- CSS stylesheet -->
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous" >
< link rel = "stylesheet" href = "css/styles.css" >
<!-- fontawesome -->
< link rel = "stylesheet" href = "https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity = "sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin = "anonymous" / >
< link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" >
< link rel = "stylesheet" href = "/resources/demos/style.css" >
<!-- Bootstrap Scripts -->
< script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous" > < / script >
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous" > < / script >
< / head >
< body >
< section class = "colored-section2" id = "title" >
< div class = "container-fluid" >
2021-04-15 16:03:34 +00:00
< img src = "images/logo2.png" style = "float:left;width:42px;height:42px; margin-right:20px; margin-top:10px" alt = "brand-img" >
2021-04-11 18:05:26 +00:00
<!-- Nav Bar -->
< nav class = "navbar navbar-expand-lg navbar-dark" >
< a class = "navbar-brand" href = "#" > Batuhan's Bikes< / a >
< button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarTogglerDemo02" aria-controls = "navbarTogglerDemo02" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
< div class = "collapse navbar-collapse" id = "navbarTogglerDemo02" >
< ul class = "navbar-nav ml-auto" >
< li class = "nav-item" >
< a class = "nav-link" href = "#pricing" id = "test" > Repair Plans < i class = "fas fa-toolbox" > < / i > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#cta" id = "test" > Contact Us < i class = "fas fa-map-marker-alt" > < / i > < / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#appointment" id = "test" > Appointment < i class = "far fa-clock" > < / i > < / a >
< / li >
< / ul >
< / div >
< / nav >
<!-- Title -->
< div class = "row" >
< div class = "col-lg-6" >
< h1 class = "big-heading" > Nothing beats the high of a good bike ride. < / h1 >
< button type = "button" onclick = "toAppointment()" class = "btn btn-lg btn-dark download-btn" > < i class = "fas fa-bicycle" > < / i > Book an
Appointment< / button >
< / div >
< div class = "col-lg-6" >
< img class = "title-image" src = "images/bike_repair1.jpg" alt = "bike repair" >
< / div >
< / div >
< / div >
< / section >
<!-- Owner Bio -->
< section class = "white-section" id = "features" >
< div class = "container-fluid" >
< h2 class = "section-heading" style = "text-align:center;" > < i class = "fas fa-users" > < / i > Meet the Team< / h2 >
< br >
< br >
< div class = "row" >
< div class = "col-lg-4 col-12" >
< div class = "card mb-3" style = "max-width: 540px;" >
< div class = "row g-0" >
< div class = "col-md-4" >
< img src = "images\owner_pic.jpg" alt = "" class = "profile" >
< / div >
< div class = "col-md-8" >
< div class = "card-body" >
< h5 class = "card-title" > < i class = "fas fa-id-card" > < / i > Batuhan< / h5 >
< p class = "card-text" > 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.< / p >
< p class = "card-text" > < small class = "text-muted" > Availability: Monday-Friday< / small > < / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-4 col-12" >
< div class = "card mb-3" style = "max-width: 540px;" >
< div class = "row g-0" >
< div class = "col-md-4" >
< img src = "images\mumen.jpg" alt = "" class = "profile" >
< / div >
< div class = "col-md-8" >
< div class = "card-body" >
< h5 class = "card-title" > < i class = "fas fa-id-card" > < / i > Mumem< / h5 >
< p class = "card-text" > Without biking, my life has no meaning. I am
the best at fixing punctures in town.< / p >
< p class = "card-text" > < small class = "text-muted" > Availability: Tuesday-Wednesday< / small > < / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-lg-4 col-12" >
< div class = "card mb-3" style = "max-width: 540px;" >
< div class = "row g-0" >
< div class = "col-md-4" >
< img src = "images\Stewie.png" alt = "" class = "profile" >
< / div >
< div class = "col-md-8" >
< div class = "card-body" >
< h5 class = "card-title" > < i class = "fas fa-id-card" > < / i > Stewart< / h5 >
< p class = "card-text" > I recently got my masters in bike fixing. I can help you with any repair or
maintenence < / p >
< p class = "card-text" > < small class = "text-muted" > Availability: Monday-Wednesday< / small > < / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Testimonials -->
< section class = "colored-section2" id = "colored-section2" >
< div id = "testimonial-carousel" class = "carousel slide" data-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active container-fluid" >
< h2 class = "testimonial-text" > "Strong 10 from me. The service here is phenomenal." < / h2 >
< img class = "testimonial-img" src = "images\customers\Anthony.png" alt = "dog-profile" >
< em > Anthony Green< / em >
< / div >
< div class = "carousel-item container-fluid" >
< h2 class = "testimonial-text" > "Thanks to the folks over at Batuhan's Bikes, I just upgraded my old bike to a
new mountain bike. Love it!" < / h2 >
< img class = "testimonial-img" src = "images\customers\Dottie.jpg" alt = "lady-profile" >
< em > Dottie Bean< / em >
< / div >
< div class = "carousel-item container-fluid" >
< h2 class = "testimonial-text" > "Most people don't know me. If you ask any of my friends they will say I bike.
And the only place I trust to get my bikes are Batuhan's Bikes"< / h2 >
< img class = "testimonial-img" src = "images\customers\bobby.jpg" alt = "lady-profile" >
< em > Bob < / em >
< / div >
< div class = "carousel-item container-fluid" >
< h2 class = "testimonial-text" > "The squeeze has not squoze." < / h2 >
< img class = "testimonial-img" src = "images\customers\keith.png" alt = "lady-profile" >
< em > Keith Value< / em >
< / div >
< / div >
< a class = "carousel-control-prev" href = "#testimonial-carousel" role = "button" data-slide = "prev" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
< span class = "sr-only" > Previous< / span >
< / a >
< a class = "carousel-control-next" href = "#testimonial-carousel" role = "button" data-slide = "next" >
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
< span class = "sr-only" > Next< / span >
< / a >
< / div >
< / section >
<!-- Pricing -->
< section class = "white-section" id = "pricing" >
< h2 class = "section-heading" > < i class = "fas fa-toolbox" > < / i > Our Services< / h2 >
< p > Simple and affordable price plans for your bike.< / p >
< div class = "row" >
< div class = "pricing-col col-lg-4 col-md-6" >
< div class = "card" >
< div class = "card-header" >
< h3 > < i class = "fas fa-screwdriver" > < / i > Brake Repair< / h3 >
< / div >
< div class = "card-body" >
< h2 class = "price-text" > $47.95< / h2 >
< img class = "title-image" src = "images/brake.jpg" alt = "bike1" >
< p > < br > Standard Kit | Part Replacement< / p >
<!-- <button type="button" onclick="toAppointment()" class="btn btn - block btn - outline - dark btn - lg">Select</button> -->
< / div >
< / div >
< / div >
< div class = "pricing-col col-lg-4 col-md-6" >
< div class = "card" >
< div class = "card-header" >
< h3 > < i class = "fas fa-wrench" > < / i > Fixing Punctures< / h3 >
< / div >
< div class = "card-body" >
< h2 class = "price-text" > $59.95< / h2 >
< img class = "title-image" src = "images/tire.jpg" alt = "bike2" >
< p > < br > Advanced Kit | Part Replacement< / p >
<!-- <button type="button" onclick="toAppointment()" class="btn btn - block btn - outline - dark btn - lg">Select</button> -->
< / div >
< / div >
< / div >
< div class = "pricing-col col-lg-4 " >
< div class = "card" >
< div class = "card-header" >
< h3 > < i class = "fas fa-tools" > < / i > Full Repair/Maintenance< / h3 >
< / div >
< div class = "card-body" >
< h2 class = "price-text" > $79.95< / h2 >
< img class = "title-image" src = "images/maintenance.jpg" alt = "bike3" >
< p > < br > Full Cleaning Kit | Full Part Replacement< / p >
<!-- <button type="button" onclick="toAppointment()" class="btn btn - block btn - outline - dark btn - lg">Select</button> -->
< / div >
< / div >
< / div >
< / div >
< / section >
<!-- Call to Action -->
< section class = "colored-section2" id = "cta" >
< div class = "row" >
< div class = "col-12" >
< h2 class = "big-heading" > < i class = "fas fa-map-marker-alt" > < / i > Contact Us< / h2 >
< p style = "color:white;font-size:20px" > 5 Hawthorne Avenue < br >
Ottawa, Ontario < br >
Phone: (613) 567-8180 < br >
Email: info@cycosport.ca < br >
< p style = "font-weight: bold; color: white;font-size:25px " > Buisness Hours: 8:30 - 22:00, Monday to Friday
< p >
< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-12" >
< div id = "googleMap" class = "map-img" > < / div >
< / div >
< / div >
< script >
function myMap() {
var mapProp = {
center: new google.maps.LatLng(45.412085720162494, -75.68236814266143),
zoom: 18,
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
< / script >
< script src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I&callback=myMap" > < / script >
< / section >
<!-- - Book an Appointment -->
< section class = "white-section" id = "appointment" >
< div class = "container-fluid" >
< h2 class = "big-heading" > < i class = "far fa-clock" > < / i > Book an Appointment < / h2 >
< br >
<!-- Accordion for booking a service -->
<!-- -->
< form id = "contactForm" method = "post" >
< div id = "accordion" >
<!-- Service Accordion -->
< div class = "card" >
< div class = "card-header" id = "headingOne" >
< h5 class = "mb-0" >
< button type = "button" class = "btn btn-link" data-toggle2 = "tooltip" data-placement = "top" title = "Book services by clicking this button" data-toggle = "collapse" data-target = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne" >
Book Services
< / button >
< / h5 >
< / div >
<!-- Service Accordion Content -->
< div id = "collapseOne" class = "collapse show" aria-labelledby = "headingOne" data-parent = "#accordion" >
< div class = "card-body" >
< h2 > < i class = "fas fa-toolbox" > < / i > Services< / h2 >
< p > Please select services you require< / p >
<!-- select services -->
< select class = "form-select form-select-sm" id = "selectService" name = "services" aria-label = ".form-select-sm example" >
< option selected > Select Service< / option >
< option value = "1" > Brake Repair< / option >
< option value = "2" > Fixing Punctures< / option >
< option value = "3" > Full Repair/Maintenance< / option >
< option value = "4" > Other Inquiries< / option >
< / select >
< span id = "serviceError" class = "errorMsg" > < / span >
< hr >
< h2 > < i class = "fas fa-users" > < / i > Mechanics< / h2 >
< p > Please select your technican< / p >
<!-- select technican -->
< select class = "form-select form-select-sm" id = "selectTechnican" name = "technicans" aria-label = ".form-select-sm example" onchange = "getMechanic(this)" >
< option selected > Select technican< / option >
< option value = "1" > Batuhan< / option >
< option value = "2" > Mumen < / option >
< option value = "3" > Stewart< / option >
< option value = "4" > No preference< / option >
< / select >
< p id = "technicanError" class = "errorMsg" > < / p >
< hr >
<!-- notify user of the availability of technican before selecting time, let them block dates that arent bookable and let users know -->
< h2 > < i class = "fas fa-calendar-plus" > < / i > Appointment Time< / h2 >
< p > Please select an appointment time< / p >
<!-- Select Appointment Date and Time -->
< div class = "request-label" >
< label for = "appTime" > Choose an appointment date: < / label >
< input type = "text" id = "datepicker" >
< p id = "dateError" class = "errorMsg" > < / p >
< div >
< label for = "appt-time" > Choose an appointment time (8:30am - 10:00pm): < / label >
< input id = "appt-time" type = "time" name = "appt-time" min = "12:00" max = "18:00" >
< span class = "validity" > < / span >
< p id = "timeError" class = "errorMsg" > < / p >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Payment Accordion -->
< div class = "card" >
< div class = "card-header" id = "headingTwo" >
< h5 class = "mb-0" >
< button type = "button" class = "btn btn-link collapsed" data-tooltip = "tooltip" data-placement = "top" title = "Access payment by clicking this button" data-toggle = "collapse" data-target = "#collapseTwo" aria-expanded = "false" aria-controls = "collapseTwo" >
Payment Details
< / button >
< / h5 >
< / div >
<!-- Payment Accordion content -->
< div id = "collapseTwo" class = "collapse" aria-labelledby = "headingTwo" data-parent = "#accordion" >
< div class = "card-body" >
< h2 > < i class = "far fa-address-book" > < / i > Contact Information< / h2 >
< p > Please fill the spaces below with your contact information< / p >
<!-- <form> -->
< div class = "form-group" >
< div class = "row" >
< div class = "col-6 accountLabel" style = "float: right;" >
< label for = "fnameLabel" > First Name< / label >
< input type = "text" id = "fname" name = "firstname" placeholder = "First Name" >
< p id = "fnameError" class = "errorMsg" > < / p >
< / div >
< div class = "col-6 accountLabel" >
< label for = "lnameLabel" > Last Name< / label >
< input type = "text" id = "lname" name = "lastname" placeholder = "Last Name" >
< p id = "lnameError" class = "errorMsg" > < / p >
< / div >
< / div >
< / div >
< div class = "form-group" >
< div class = "row" >
< div class = "col-6 accountLabel" style = "float: right;" >
< label for = "phoneNumLabel" > Phone Number< / label >
< input type = "text" id = "phoneNum" name = "phoneNumber" placeholder = "Phone Number" >
< p id = "phoneNumberError" class = "errorMsg" > < / p >
< / div >
< div class = "col-6 accountLabel" >
< label for = "emailLabel" > Email< / label >
< input type = "text" id = "email" name = "email" placeholder = "Email" >
< p id = "emailError" class = "errorMsg" > < / p >
< / div >
< / div >
< / div >
< hr >
< h2 > < i class = "fas fa-money-check-alt" > < / i > Payment Information< / h2 >
< p > Please fill the spaces below with your payment information< / p >
< div class = "form-group" >
< div class = "row" >
< div class = "col-6 accountLabel" style = "float: right;" >
< label for = "cardHolderLabel" > Name on the card< / label >
< input type = "text" id = "cardHolder" name = "cardHolder" placeholder = "Name on the Card" >
< p id = "cardHolderError" class = "errorMsg" > < / p >
< / div >
< div class = "col-6 accountLabel" >
< label for = "creditCardLabel" > Credit Card< / label >
< input type = "text" id = "creditCard" name = "creditCard" placeholder = "Credit Card" >
< p id = "creditCardError" class = "errorMsg" > < / p >
< / div >
< / div >
< / div >
< div class = "form-group" >
< div class = "row" >
< div class = "col-4 accountLabel" >
< label for = "expiryDateLabel" > Expiry Date< / label >
< input type = "text" id = "expiryDate" name = "expiryDate" placeholder = "Expiry Date" >
< p id = "expiryDateError" class = "errorMsg" > < / p >
< / div >
< div class = "col-2 accountLabel" >
< label for = "cvvLabel" > CVV< / label >
< input type = "text" id = "cvv" name = "cvv" placeholder = "CVV" >
< p id = "cvvError" class = "errorMsg" > < / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< br >
< br >
< button type = "button" class = "btn btn-lg btn-outline-success" id = "submitButton" onclick = "validateForm()" > Submit< / button >
< / form >
2021-04-15 16:03:34 +00:00
2021-04-15 16:10:56 +00:00
<!-- Dialog flow bot
2021-04-15 16:03:34 +00:00
< div class = "agent-box" >
< iframe id = "chat-bot" height = "400" width = "500" src = "https://bot.dialogflow.com/d854ce2a-8fb4-41a4-9fa8-9e498be1accf" > < / iframe >
< div id = "bot-display" >
< i class = "fas fa-comments-alt fa-3x bot-icon" > < / i >
< / div >
2021-04-15 16:10:56 +00:00
< / div > -->
< df-messenger
intent="WELCOME"
chat-title="Batuhan' s_Bikes-Ruchira"
agent-id="d854ce2a-8fb4-41a4-9fa8-9e498be1accf"
language-code="en"
>< / df-messenger >
2021-04-15 16:03:34 +00:00
2021-04-11 18:05:26 +00:00
< / div >
< / section >
<!-- Footer -->
< footer class = "colored-section2" id = "footer" >
< div class = "container-fluid" >
< i class = "social-icon fab fa-twitter" > < / i >
< i class = "social-icon fab fa-facebook" > < / i >
< i class = "social-icon fab fa-instagram" > < / i >
< i class = "social-icon fas fa-envelope" > < / i >
< p style = "color:white;" > © Copyright SEG3125 - Group 3< / p >
< / div >
< / footer >
<!-- Scripts - -->
< script src = "https://code.jquery.com/jquery-1.12.4.js" > < / script >
< script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > < / script >
< script src = "scripts/index.js" charset = "utf-8" > < / script >
2021-04-15 16:10:56 +00:00
< script src = "https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1" > < / script >
2021-04-15 16:03:34 +00:00
< script >
const chatBot = document.getElementById("chat-bot")
const botBtn = document.getElementById("bot-display")
botBtn.addEventListener('click', () => {
chatBot.style.display === 'none' ? chatBot.style.display = 'inline-block' : chatBot.style.display = 'none';
2021-04-15 16:10:56 +00:00
});
2021-04-15 16:03:34 +00:00
< / script >
2021-04-15 16:10:56 +00:00
2021-04-11 18:05:26 +00:00
< / body >
< / html >
