Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add files via upload #1

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add files via upload #1

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0417088
Add files via upload
lead-chelsea Sep 26, 2018
090db0b
Add files via upload
lead-chelsea Sep 26, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 115 additions & 62 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome to LEAD Tour!</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<title>LEAD Tour</title>

<style>
body {
color: rgb(72,72,72);
}

.item img {
width: 100%;
cursor:pointer;
Expand All @@ -23,14 +20,10 @@
margin:0;
}

.selected {
outline: 1px solid red;
}

.location {
text-transform: uppercase;
font-size: 12px;
font-weight:bold;
font-weight: bold;
color:brown;
}

Expand All @@ -41,158 +34,218 @@

.price {
font-size:14px;
font-weight:400;
font-weight: 400;
}
</style>

.selected {
outline: 1px solid red;
}
</style>

</head>

<body>

<div class="container-fluid px-4">
<div class="row">
<div class="col">
<h1>Explore Malaysia</h1>
<h3>Popular experiences</h3>
<p>Experience local lifestyle led by locals</p>
</div>
</div>
<!-- end of row -->
</div> <!-- end of row -->

<form method="POST" action="https://formspree.io/[email protected]">
<form method="POST">
<div class="row">

<div class="col">
<input type="text" class="form-control" name='name' placeholder="Your name please">
<div class="col-12 col-md">
<input type="text" class='form-control' name='name' placeholder='Your name please'>
</div>

<div class="col">
<input type="email" class="form-control" name='email' placeholder="Your email">
<div class="col-12 col-md">
<input type="email" class="form-control" name='email' placeholder="Your email">
</div>

<div class="col">
<input type="date" class="form-control" name='arrival_date' placeholder="Check in date">
<div class="col-12 col-md">
<input type="date" class="form-control" name='arrival_date' placeholder="Check in date">
</div>

<div class="col">
<input type="number" class="form-control" name='no_of_days' placeholder="Number of days">
<div class="col-12 col-md">
<input type="number" class="form-control" name='no_of_days' placeholder="Number of days">
</div>

<div class="col">
<button type="submit" class='btn btn-primary'>Submit</button>
<div class="col-12 col-md">
<button type="button" class='btn btn-primary' onclick='submitForm();'>Submit</button>
</div>

<input type="hidden" name='selected_item'>

</div> <!-- end of row -->
</div>
</form>

<hr/>
<hr />

<div class="row" id='tour'>

<div class="col item">
<img src='images/cameron.jpg' />
<div class='row' id='tour'>
<div class="col-sm-3 col-md item">
<img src="images/cameron.jpg" alt="" />
<p class='location'>Sightseeing &bull; Pahang</p>
<p class='title'>Cameron Highland Tea Farm Trip</p>
<p class='price'>RM120 per person</p>
<p class="price">RM 120 per person</p>
</div>

<div class="col item">
<div class="col-sm-3 col-md item">
<img src='images/kl.jpg' />
<p class='location'>Group Activity &bull; Kuala Lumpur</p>
<p class='title'>Kuala Lumpur Culture Walk</p>
<p class='price'>RM70 per person</p>
</div>

<div class="col item">
<div class="col-sm-3 col-md item">
<img src='images/putrajaya.jpg' />
<p class='location'>Outdoor &bull; PutraJaya</p>
<p class='title'>Kayak at Putrajaya Lake</p>
<p class='price'>RM140 per person</p>
</div>

<div class="col item">
<div class="col-sm-3 col-md item">
<img src='images/melaka.jpg' />
<p class='location'>Guided Walk &bull; PutraJaya</p>
<p class='title'>Melaka Heritage Food Trail</p>
<p class='price'>RM60 per person</p>

</div>

<div class="col item">
<div class="d-sm-none d-md-block col-md item">
<img src='images/sarawak.jpg' />
<p class='location'>Culture Tour&bull; PutraJaya</p>
<p class='title'>Sarawak Culture Village</p>
<p class='price'>RM60 per person</p>
</div>
</div> <!-- end of row -->

</div>
<!-- end of row -->

<hr/>
<hr />

<div class="row">
<div class="col">
<h3>Where to stay</h3>
</div>
</div> <!-- end of row -->

<div class="row" id='accomodation'>

<div class="col item">
<div class="row" id="accommodation">
<div class="col-sm-3 col-md item">
<img src='images/happiness_home.jpg' />
<p class='location'>Entire Apartment &bull; 1 bed</p>
<p class='title'>Happiness Home near Legoland</p>
<p class='price'>RM123 per night</p>
</div>

<div class="col item">
<div class="col-sm-3 col-md item">
<img src='images/cottage_homestay.jpg' />
<p class='location'>Guesthouse&bull; 12 beds</p>
<p class='title'>Rainforest Retreat Cottage</p>
<p class='price'>RM700 per night</p>
</div>

<div class="col item">
<div class="col-sm-3 col-md item">
<img src='images/full_facility_resort.jpg' />
<p class='location'>Entire Apartment&bull; 5 beds</p>
<p class='title'>Luxury Resort with Full Facilities</p>
<p class='price'>RM384 per night</p>
</div>

<div class="col item">
<div class="col-sm-3 col-md item">
<img src='images/serviced_apartment.jpg' />
<p class='location'>Serviced Apartment &bull; 2 beds</p>
<p class='title'>Cosy Serviced Apartment</p>
<p class='price'>RM148 per night</p>
</div>

<div class="col item">
<div class="d-sm-none d-md-block col-md item">
<img src='images/villa.jpg' />
<p class='location'>Villa&bull; 6 beds</p>
<p class='title'>Para Para Resort</p>
<p class='price'>RM288 per night</p>
</div>

</div>
<!-- end of row -->

</div>

</body>

<script>
$('.item').click(function() {
$('.item').removeClass('selected'); // Clear previously selected item
$(this).addClass('selected'); // Set the current item to selected
var selected_item = $(this).find('.title').text(); // Get the name of clicked item

// Assign the selected_item to hidden input value, so that it will be posted to us together with the guest details.
$("input[name='selected_item']").val(selected_item)

})
</script>
<script src="https://www.gstatic.com/firebasejs/5.5.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAiGnlZ4uAAFR00g3p_ZnvNBXFQqlD2QhI",
authDomain: "airbnb-e5d07.firebaseapp.com",
databaseURL: "https://airbnb-e5d07.firebaseio.com",
projectId: "airbnb-e5d07",
storageBucket: "airbnb-e5d07.appspot.com",
messagingSenderId: "131403416817"
};

firebase.initializeApp(config);

var db = firebase.firestore();
db.settings({
timestampsInSnapshots: true
});

function submitForm() {
var name = $("input[name='name']").val();
var email = $("input[name='email']").val();
var arrival_date = $("input[name='arrival_date']").val();
var no_of_days = $("input[name='no_of_days']").val();
var selected_item = $("input[name='selected_item']").val()

db.collection('bookings').add({ name, email, arrival_date, no_of_days, selected_item })
.then(function (docRef) {
alert("Booking submitted successfully");
})
.catch(function (error) {
alert("Error submitting booking");
console.error("Error: ", error);
});
}
</script>

<script>
function getBookings() {
db.collection("bookings").get().then(function (querySnapshot) {
querySnapshot.forEach(function (doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
});
}
</script>


<script src="https://www.gstatic.com/firebasejs/5.5.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyAiGnlZ4uAAFR00g3p_ZnvNBXFQqlD2QhI",
authDomain: "airbnb-e5d07.firebaseapp.com",
databaseURL: "https://airbnb-e5d07.firebaseio.com",
projectId: "airbnb-e5d07",
storageBucket: "airbnb-e5d07.appspot.com",
messagingSenderId: "131403416817"
};
firebase.initializeApp(config);
</script>

<script>
$('.item').click(function () {
$('.item').removeClass('selected'); // clear previously selected item
$(this).addClass('selected');

var selected_item = $(this).find('.title').text();

// We want to assign the value to our hidden value input in our form
// so that it can be sent to us together later.
$("input[name='selected_item']").val(selected_item)
})
</script>

</body>

</html>