添加表单
cyc
6 years ago
parent
37ebc841b4
commit
8c2c38caa4
@ -0,0 +1,421 @@
|
||||
<link href="/css/inquiry-pc.css" rel="stylesheet">
|
||||
<div class="wholeWrap2">
|
||||
<div class="col-md-3 col-sm-3">
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="row">
|
||||
<div class="stpeBlock">
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/ticket-select.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
<strong>
|
||||
Use the form below to make an inqury with us
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/get-matched.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
We get in touch with you within 24 hours with suggestions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/craft-journey.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
We then craft an intinerary proposal based on your interests
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/deal-journey.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
We work with you to refine the itinerary until you are satisfied
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-14 col-sm-14">
|
||||
<form action="" method="GET" class="travelTag">
|
||||
<div id="inquiryBox">
|
||||
<h1>
|
||||
Creat Your Trip with Us
|
||||
</h1>
|
||||
<div class="preface">
|
||||
Tell us your interests and get replied within 24 hours...
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Choose your interested destination(s). *
|
||||
</h3>
|
||||
<div class="row">
|
||||
<?php foreach ($countrylist as $moreCity){
|
||||
echo '<div class="col-md-8 col-sm-8">';
|
||||
echo '<div class="checkboxLabel">';
|
||||
if(in_array($moreCity,$countryarr)){
|
||||
echo '<input type="checkbox" value="'.$moreCity.'" id="'.$moreCity.'" name="destination[]" checked="checked" />';
|
||||
}else{
|
||||
echo '<input type="checkbox" value="'.$moreCity.'" id="'.$moreCity.'" name="destination[]" />';
|
||||
}
|
||||
echo '<label for="'.$moreCity.'" class="updatedestination">'.$moreCity.'</label></div></div>';
|
||||
}?>
|
||||
</div>
|
||||
<span class="chooseothers">
|
||||
You are welcome to input other destinations below if it is not shown here.
|
||||
</span>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Your hotel preference *
|
||||
</h3>
|
||||
<span class="formNote">
|
||||
Hotels prices in Japan are at least doubled based on the suggested rates
|
||||
below.
|
||||
</span>
|
||||
<div class="selectHotl">
|
||||
<form action="" method="GET">
|
||||
<div class="optionLable">
|
||||
<input type="radio" value="Luxury" id="fiveStar" name="hotel">
|
||||
<label for="fiveStar" class="hotelText">
|
||||
Luxury (5 stars & up)
|
||||
<div class="selectionMemo">
|
||||
USD 200+ / night
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="optionLable">
|
||||
<input type="radio" value="Handpiched Comfort" id="fourStar" name="hotel">
|
||||
<label for="fourStar" class="hotelText">
|
||||
Standard (3 stars)
|
||||
<div class="selectionMemo">
|
||||
USD 70-100 / night
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="optionLable">
|
||||
<input type="radio" value="Standard" id="threeStar" name="hotel">
|
||||
<label for="threeStar" class="hotelText">
|
||||
Luxury (5 stars & up)
|
||||
<div class="selectionMemo">
|
||||
USD 200+ / night
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Number in your group *
|
||||
</h3>
|
||||
<div class="peopleSelect">
|
||||
<span class="formMemo">
|
||||
Adults (≥12 years old)
|
||||
</span>
|
||||
<div class="numberBtn">
|
||||
<input class="minaddBtn reduceadult" type="button" value="-" />
|
||||
<input class="number" type="text" value="2" name="adultnumber" />
|
||||
<input class="minaddBtn addadult" type="button" value="+" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="peopleSelect">
|
||||
<span class="formMemo">
|
||||
Kids (2-11 years old)
|
||||
</span>
|
||||
<div class="numberBtn">
|
||||
<input class="minaddBtn reducechild" type="button" value="-" />
|
||||
<input class="kidNum" type="text" value="0" name="kidnumber" />
|
||||
<input class="minaddBtn addchild" type="button" value="+" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Your date of arrival *
|
||||
</h3>
|
||||
<input type="text" class="arrivalDate datepicker hidden-xs" id="Date_Start"
|
||||
name="Date_Start" value="" placeholder="mm/dd/yyyy" autocomplete="off">
|
||||
<div class="checkYes">
|
||||
<input type="checkbox" class="checkBorder" id="dateLimit" name="time">
|
||||
<label for="dateLimit">
|
||||
I'm flexible on the date
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Tell us more to help us put together your ideal journey.
|
||||
</h3>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="family" id="familytrip" name="grouptype">
|
||||
<label for="familytrip">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Family
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="couple" id="cp" name="grouptype">
|
||||
<label for="cp">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Couple
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="solo" id="single" name="grouptype">
|
||||
<label for="single">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Solo
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="friends" id="mate" name="interests">
|
||||
<label for="mate">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Friends
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="vacation" id="holiday" name="grouptype">
|
||||
<label for="holiday">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Vacation
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="adventure" id="risk" name="interests">
|
||||
<label for="risk">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Adventure
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="food" id="gourmet" name="interests">
|
||||
<label for="gourmet">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Food
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="asiabeginner" id="firstasia" name="interests">
|
||||
<label for="firstasia">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
First time to Asia
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="localculture" id="culture" name="interests">
|
||||
<label for="culture">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Culture&History
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="relax" id="rest" name="interests">
|
||||
<label for="rest">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Rest&relaxation
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<textarea id="additionalrequirements" name="additionalrequirements" style="resize:none;"
|
||||
placeholder="E.g. Age range, duration, group situation, your travel style, which cities you would like to go, special requests...">
|
||||
</textarea>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>
|
||||
Tell us about you...
|
||||
</h2>
|
||||
<div class="genderSelection">
|
||||
<form action="" method="GET">
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="Mr" id="male" name="gender">
|
||||
<label for="male">
|
||||
Mr.
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="Ms" id="female" name="gender">
|
||||
<label for="female">
|
||||
Ms.
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="Mx" id="neutural" name="gender">
|
||||
<label for="neutural">
|
||||
Mx.
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="name" required>
|
||||
<label>
|
||||
Full Name *
|
||||
</label>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="email" name="email" required>
|
||||
<label>
|
||||
Email Address *
|
||||
</label>
|
||||
</div>
|
||||
<div class="formMemo">
|
||||
All your ticket issues will be sent to your mailbox.
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="nationality" required>
|
||||
<label>
|
||||
Nationality / Region *
|
||||
</label>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="nationality" required>
|
||||
<label>
|
||||
Phone number
|
||||
</label>
|
||||
</div>
|
||||
<div class="formMemo">
|
||||
Area code + number. Only call if you ask.
|
||||
</div>
|
||||
<div class="checkYes">
|
||||
<input type="checkbox" value="Available on WhatsApp" name="whatsapp" id="whatsapp"
|
||||
class="checkBorder">
|
||||
<label for="whatsapp">
|
||||
This number is available on WhatsApp
|
||||
</label>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
<div class="inquiryBtn">
|
||||
<input type="submit" value="Start My Journey">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
var adultnums = $('input[name="adultnumber"]').val();
|
||||
var kidnums = $('input[name="kidnumber"]').val();
|
||||
//成人人数加减
|
||||
$('.addadult').click(function(){
|
||||
adultnums++;
|
||||
$('input[name="adultnumber"]').val(adultnums);
|
||||
});
|
||||
|
||||
$('.reduceadult').click(function(){
|
||||
if(adultnums > 0){
|
||||
adultnums--;
|
||||
$('input[name="adultnumber"]').val(adultnums);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//加减儿童人数
|
||||
$('.addchild').click(function(){
|
||||
kidnums++;
|
||||
$('input[name="kidnumber"]').val(kidnums);
|
||||
});
|
||||
|
||||
$('.reducechild').click(function(){
|
||||
if(kidnums > 0){
|
||||
kidnums--;
|
||||
$('input[name="kidnumber"]').val(kidnums);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//更新目的地
|
||||
$('.updatedestination').click(function(){
|
||||
var destinantionstr = '';
|
||||
var selectdes = $(this).prev().val();
|
||||
for(var i=0;i<$('input[name="destination[]"]').length-1;i++){
|
||||
if(selectdes != $($('input[name="destination[]"]')[i]).val()){
|
||||
if($($('input[name="destination[]"]')[i]).is(':checked')){
|
||||
destinantionstr += $($('input[name="destination[]"]')[i]).val() + ',';
|
||||
}
|
||||
}
|
||||
}
|
||||
if($(this).prev().is(':checked')){
|
||||
destinantionstr = destinantionstr.substr(0,destinantionstr.length-1);
|
||||
}else{
|
||||
destinantionstr += selectdes;
|
||||
}
|
||||
|
||||
$('.destination').html(destinantionstr);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,266 @@
|
||||
<link href="/css/lantern-mobile.css" rel="stylesheet">
|
||||
<div id="formBanner">
|
||||
<img src="https://data.asiahighlights.com/image/lantern-form-mobile-banner.jpg"
|
||||
src="thailand lantern festival 2020" width="100%">
|
||||
<h1>
|
||||
Book Your Ticket(s)
|
||||
</h1>
|
||||
<div class="howWeWork">
|
||||
Make the inquiry and get your ticket confirmation within 24 hours.
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="inquiryBox">
|
||||
<h2>
|
||||
Ticket Selection
|
||||
</h2>
|
||||
<form action="/orders/lantern_save" method="post" id="form_lantern" name="form_lantern">
|
||||
<div class="selectBox">
|
||||
<select id="tickettype" name="location" >
|
||||
<option value="selectlocation">
|
||||
- Select Location - *
|
||||
</option>
|
||||
<option value="CowboyArmyRidingClub">
|
||||
Chiang Mai CAD
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<select id="TicketStandard" name="TicketStandard">
|
||||
<option value="selectservice">
|
||||
- Select Services - *
|
||||
</option>
|
||||
<option value="ticketonly">
|
||||
Ticket Only
|
||||
</option>
|
||||
<option value="Ticket+ShuttleTransfer">
|
||||
Ticket + Shuttle Transfer (round trip)
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="selectBox">
|
||||
<select id="ticketonlyselection" name="ticketonlyselection">
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<input type="hidden" name="ticketype" value=""/>
|
||||
<div class="selectBox">
|
||||
<select id="selectdate" name="date">
|
||||
<option value="selecttype">
|
||||
- Select Date - *
|
||||
</option>
|
||||
<option value="31 Oct 2020">
|
||||
31 Oct 2020
|
||||
</option>
|
||||
<option value="1 Nov 2020">
|
||||
1 Nov 2020
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Number in your group *
|
||||
</h3>
|
||||
<div class="peopleSelect">
|
||||
<input class="number travelNumber" type="text" value="2" name="travelNumber" />
|
||||
<div class="numberBtn">
|
||||
<input class="minaddBtn minus" type="button" value="-" />
|
||||
<input class="minaddBtn plus" type="button" value="+" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<textarea id="additionalrequirements" name="additionalrequirements" style="resize:none;"
|
||||
placeholder="Tell us your additional request..."></textarea>
|
||||
</div>
|
||||
<hr />
|
||||
<h2>
|
||||
Your Details
|
||||
</h2>
|
||||
<div class="genderSelection">
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="100001" id="male" name="gender">
|
||||
<label for="male">
|
||||
Mr.
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="100003" id="female" name="gender">
|
||||
<label for="female">
|
||||
Ms.
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="100004" id="neutural" name="gender">
|
||||
<label for="neutural">
|
||||
Mx.
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="fullname" required>
|
||||
<label>
|
||||
Full Name *
|
||||
</label>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="email" name="email" required>
|
||||
<label>
|
||||
Email Address *
|
||||
</label>
|
||||
</div>
|
||||
<span class="formMemo">
|
||||
Your trip advisor will talk with you via email first.
|
||||
</span>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="Nationality" required>
|
||||
<label>
|
||||
Nationality *
|
||||
</label>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="PhoneNo">
|
||||
<label>
|
||||
Phone number (area code + number)
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkYes">
|
||||
<input type="checkbox" value="Available on WhatsApp" name="whatsapp" id="whatsapp"
|
||||
class="checkBorder">
|
||||
<label for="whatsapp">
|
||||
This number is available on WhatsApp
|
||||
</label>
|
||||
</div>
|
||||
<div class="settleBlock">
|
||||
<div class="settlePart">
|
||||
<div class="settleItems">
|
||||
Ticket Type: <span class="confirmNotice"></span>
|
||||
</div>
|
||||
<div class="settleItems">
|
||||
Date of event: <span id="confirmdate"></span>
|
||||
</div>
|
||||
<div class="settleItems">
|
||||
Number of people: <span class="confirmpeople"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settleMponey">
|
||||
Total Price:
|
||||
<span class="priceDetail">
|
||||
|
||||
</span>
|
||||
<input type="hidden" name="totalprice" id="totalprice" value=""/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inquiryBtn">
|
||||
<input type="submit" value="Pay Now">
|
||||
</div>
|
||||
</form>
|
||||
<div class="contactUs">
|
||||
<p>
|
||||
Can't decide? Why not
|
||||
<a href="https://www.asiahighlights.com/contact-us.htm">
|
||||
contact us
|
||||
</a>
|
||||
for help!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var nums = 2;
|
||||
var level = 1;
|
||||
$('.confirmpeople').html(nums + ' people');
|
||||
totalprice();
|
||||
|
||||
//加减人数
|
||||
$('.minus').click(function(){
|
||||
nums = $('.travelNumber').val();
|
||||
if(nums>0){
|
||||
nums--;
|
||||
$('.travelNumber').val(nums);
|
||||
$('.confirmpeople').html(nums + ' people');
|
||||
totalprice(level,nums);
|
||||
}
|
||||
});
|
||||
|
||||
$('.plus').click(function(){
|
||||
nums = $('.travelNumber').val();
|
||||
nums++;
|
||||
$('.travelNumber').val(nums);
|
||||
$('.confirmpeople').html(nums + ' people');
|
||||
totalprice(level,nums);
|
||||
});
|
||||
|
||||
//调整服务种类
|
||||
$('#TicketStandard').change(function(){
|
||||
var selectype = $('#TicketStandard').val();
|
||||
var addoption = '';
|
||||
|
||||
if(selectype == 'ticketonly'){
|
||||
addoption += '<option value="">--Select Ticket Type--</option>';
|
||||
addoption += '<option value="Premium Ticket">Premium Ticket</option>';
|
||||
addoption += '<option value="VIP Ticket">VIP Ticket</option>';
|
||||
addoption += '<option value="Standard Ticket">Standard Ticket</option>';
|
||||
}
|
||||
|
||||
if(selectype == 'Ticket+ShuttleTransfer'){
|
||||
addoption += '<option value="">--Select Ticket Type--</option>';
|
||||
addoption += '<option value="Premium Ticket+Shuttle Transfer from Maya Shopping Center">Premium Ticket+Shuttle Transfer from Maya Shopping Center</option>';
|
||||
addoption += '<option value="VIP Ticket+Shuttle Transfer from Maya Shopping Center">VIP Ticket+Shuttle Transfer from Maya Shopping Center</option>';
|
||||
addoption += '<option value="Standard Ticket+Shuttle Transfer from Maya Shopping Center">Standard Ticket+Shuttle Transfer from Maya Shopping Center</option>';
|
||||
}
|
||||
|
||||
$('#ticketonlyselection').html(addoption);
|
||||
});
|
||||
|
||||
//确认票种
|
||||
$('#ticketonlyselection').change(function(){
|
||||
var tyicketype = $('#TicketStandard').val();
|
||||
var ticketonlyselection = $('#ticketonlyselection').val();
|
||||
$('input[name="ticketype"]').val(ticketonlyselection);
|
||||
|
||||
if(tyicketype != '' && ticketonlyselection != ''){
|
||||
$('.confirmNotice').html(ticketonlyselection);
|
||||
|
||||
if(ticketonlyselection == 'Premium Ticket' || ticketonlyselection == 'Premium Ticket+Shuttle Transfer from Maya Shopping Center'){
|
||||
level = 3;
|
||||
}
|
||||
|
||||
if(ticketonlyselection == 'VIP Ticket' || ticketonlyselection == 'VIP Ticket+Shuttle Transfer from Maya Shopping Center'){
|
||||
level = 2;
|
||||
}
|
||||
|
||||
if(ticketonlyselection == 'Standard Ticket' || ticketonlyselection == 'Standard Ticket+Shuttle Transfer from Maya Shopping Center'){
|
||||
level = 1;
|
||||
}
|
||||
totalprice();
|
||||
}
|
||||
});
|
||||
|
||||
//确认时间
|
||||
$('#selectdate').change(function(){
|
||||
var selectdate = $(this).val();
|
||||
$('#confirmdate').html(selectdate);
|
||||
});
|
||||
|
||||
|
||||
//价格计算
|
||||
function totalprice(){
|
||||
switch(level){
|
||||
case 1 :
|
||||
singleprice = 158;
|
||||
break;
|
||||
case 2 :
|
||||
singleprice = 201;
|
||||
break;
|
||||
case 3 :
|
||||
singleprice = 218;
|
||||
break;
|
||||
default:
|
||||
singleprice = 158;
|
||||
break;
|
||||
}
|
||||
$('.priceDetail').html('USD ' + singleprice*nums);
|
||||
$('#totalprice').val(singleprice*nums);
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,469 @@
|
||||
<link href="/css/inquiry-pc.css" rel="stylesheet">
|
||||
<div class="wholeWrap2">
|
||||
<div class="col-md-3 col-sm-3">
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="row">
|
||||
<div class="stpeBlock">
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/ticket-select.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
<strong>
|
||||
Use the form below to make an inqury with us
|
||||
</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/get-matched.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
We get in touch with you within 24 hours with suggestions
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/craft-journey.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
We then craft an intinerary proposal based on your interests
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dotted">
|
||||
</div>
|
||||
</div>
|
||||
<div class="workingSteps">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="stepLogo">
|
||||
<img src="https://data.asiahighlights.com/image/deal-journey.png" alt="select ticket type">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-18 col-sm-18">
|
||||
<div class="detailedSteps">
|
||||
<div class="stepText">
|
||||
We work with you to refine the itinerary until you are satisfied
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-14 col-sm-14">
|
||||
<form action="/index.php/orders/tailormade_save/" method="POST" class="travelTag">
|
||||
<div id="inquiryBox">
|
||||
<h1>
|
||||
Creat Your Trip with Us
|
||||
</h1>
|
||||
<div class="preface">
|
||||
Tell us your interests and get replied within 24 hours...
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Choose your interested destination(s). *
|
||||
</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="thailand" id="thai" name="destination[]">
|
||||
<label for="thai">
|
||||
Thailand
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="Vietnam" id="vtn" name="destination[]">
|
||||
<label for="vtn" class="updatedestination">
|
||||
Vietnam
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="india" id="in" name="destination[]">
|
||||
<label for="in" class="updatedestination">
|
||||
India
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="myanmar" id="myan" name="destination[]">
|
||||
<label for="myan" class="updatedestination">
|
||||
Myanmar
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="cambodia" id="cam" name="destination[]">
|
||||
<label for="cam" class="updatedestination">
|
||||
Cambodia
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="japan" id="ja" name="destination[]">
|
||||
<label for="ja" class="updatedestination">
|
||||
Japan
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="laos" id="lao" name="destination[]">
|
||||
<label for="lao" class="updatedestination">
|
||||
Laos
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="Nepal" id="nep" name="destination[]">
|
||||
<label for="nep" class="updatedestination">
|
||||
Nepal
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="Sri Lanka" id="srilan" name="destination[]">
|
||||
<label for="srilan" class="updatedestination">
|
||||
Sri Lanka
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 col-sm-8">
|
||||
<div class="checkboxLabel">
|
||||
<input type="checkbox" value="China" id="china" name="destination[]">
|
||||
<label for="china" class="updatedestination">
|
||||
China
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="chooseothers">
|
||||
You are welcome to input other destinations below if it is not shown here.
|
||||
</span>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Your hotel preference *
|
||||
</h3>
|
||||
<span class="formNote">
|
||||
Hotels prices in Japan are at least doubled based on the suggested rates
|
||||
below.
|
||||
</span>
|
||||
<div class="selectHotl">
|
||||
<form action="" method="GET">
|
||||
<div class="optionLable">
|
||||
<input type="radio" value="Luxury" id="fiveStar" name="hotel">
|
||||
<label for="fiveStar" class="hotelText">
|
||||
Luxury (5 stars & up)
|
||||
<div class="selectionMemo">
|
||||
USD 200+ / night
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="optionLable">
|
||||
<input type="radio" value="Handpiched Comfort" id="fourStar" name="hotel">
|
||||
<label for="fourStar" class="hotelText">
|
||||
Standard (3 stars)
|
||||
<div class="selectionMemo">
|
||||
USD 70-100 / night
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="optionLable">
|
||||
<input type="radio" value="Standard" id="threeStar" name="hotel">
|
||||
<label for="threeStar" class="hotelText">
|
||||
Luxury (5 stars & up)
|
||||
<div class="selectionMemo">
|
||||
USD 200+ / night
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Number in your group *
|
||||
</h3>
|
||||
<div class="peopleSelect">
|
||||
<span class="formMemo">
|
||||
Adults (≥12 years old)
|
||||
</span>
|
||||
<div class="numberBtn">
|
||||
<input class="minaddBtn reduceadult" type="button" value="-" />
|
||||
<input class="number" type="text" value="2" name="adultnumber" />
|
||||
<input class="minaddBtn addadult" type="button" value="+" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="peopleSelect">
|
||||
<span class="formMemo">
|
||||
Kids (2-11 years old)
|
||||
</span>
|
||||
<div class="numberBtn">
|
||||
<input class="minaddBtn reducechild" type="button" value="-" />
|
||||
<input class="kidNum" type="text" value="0" name="kidnumber" />
|
||||
<input class="minaddBtn addchild" type="button" value="+" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Your date of arrival *
|
||||
</h3>
|
||||
<input type="text" class="arrivalDate datepicker hidden-xs" id="Date_Start"
|
||||
name="Date_Start" value="" placeholder="mm/dd/yyyy" autocomplete="off">
|
||||
<div class="checkYes">
|
||||
<input type="checkbox" class="checkBorder" id="dateLimit" name="time">
|
||||
<label for="dateLimit">
|
||||
I'm flexible on the date
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectionBlock">
|
||||
<h3>
|
||||
Tell us more to help us put together your ideal journey.
|
||||
</h3>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="family" id="familytrip" name="grouptype">
|
||||
<label for="familytrip">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Family
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="couple" id="cp" name="grouptype">
|
||||
<label for="cp">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Couple
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="solo" id="single" name="grouptype">
|
||||
<label for="single">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Solo
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="friends" id="mate" name="interests">
|
||||
<label for="mate">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Friends
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="vacation" id="holiday" name="grouptype">
|
||||
<label for="holiday">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Vacation
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="adventure" id="risk" name="interests">
|
||||
<label for="risk">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Adventure
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="food" id="gourmet" name="interests">
|
||||
<label for="gourmet">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Food
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="asiabeginner" id="firstasia" name="interests">
|
||||
<label for="firstasia">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
First time to Asia
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="localculture" id="culture" name="interests">
|
||||
<label for="culture">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Culture&History
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="travelStyle">
|
||||
<input type="checkbox" value="relax" id="rest" name="interests">
|
||||
<label for="rest">
|
||||
<div class="smallTag">
|
||||
<div class="styleText">
|
||||
Rest&relaxation
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<textarea id="additionalrequirements" name="additionalrequirements" style="resize:none;"
|
||||
placeholder="E.g. Age range, duration, group situation, your travel style, which cities you would like to go, special requests..."></textarea>
|
||||
</div>
|
||||
<hr>
|
||||
<h2>
|
||||
Tell us about you...
|
||||
</h2>
|
||||
<div class="genderSelection">
|
||||
<form action="" method="GET">
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="Mr" id="male" name="gender" />
|
||||
<label for="male">
|
||||
Mr.
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="Ms" id="female" name="gender" />
|
||||
<label for="female">
|
||||
Ms.
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkboxGender">
|
||||
<input type="radio" value="Mx" id="neutural" name="gender" />
|
||||
<label for="neutural">
|
||||
Mx.
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="name" required />
|
||||
<label>
|
||||
Full Name *
|
||||
</label>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="email" name="email" required />
|
||||
<label>
|
||||
Email Address *
|
||||
</label>
|
||||
</div>
|
||||
<div class="formMemo">
|
||||
All your ticket issues will be sent to your mailbox.
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="Nationality" required />
|
||||
<label>
|
||||
Nationality / Region *
|
||||
</label>
|
||||
</div>
|
||||
<div class="inputTerm">
|
||||
<input type="text" name="PhoneNo" required>
|
||||
<label>
|
||||
Phone number
|
||||
</label>
|
||||
</div>
|
||||
<div class="formMemo">
|
||||
Area code + number. Only call if you ask.
|
||||
</div>
|
||||
<div class="checkYes">
|
||||
<input type="checkbox" value="Available on WhatsApp" name="whatsapp" id="whatsapp"
|
||||
class="checkBorder">
|
||||
<label for="whatsapp">
|
||||
This number is available on WhatsApp
|
||||
</label>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
<div class="inquiryBtn">
|
||||
<input type="submit" value="Start My Journey">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
var adultnums = $('input[name="adultnumber"]').val();
|
||||
var kidnums = $('input[name="kidnumber"]').val();
|
||||
//成人人数加减
|
||||
$('.addadult').click(function(){
|
||||
adultnums++;
|
||||
$('input[name="adultnumber"]').val(adultnums);
|
||||
});
|
||||
|
||||
$('.reduceadult').click(function(){
|
||||
if(adultnums > 0){
|
||||
adultnums--;
|
||||
$('input[name="adultnumber"]').val(adultnums);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//加减儿童人数
|
||||
$('.addchild').click(function(){
|
||||
kidnums++;
|
||||
$('input[name="kidnumber"]').val(kidnums);
|
||||
});
|
||||
|
||||
$('.reducechild').click(function(){
|
||||
if(kidnums > 0){
|
||||
kidnums--;
|
||||
$('input[name="kidnumber"]').val(kidnums);
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,285 @@
|
||||
@charset "utf-8";
|
||||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
|
||||
body { font-family:'Hind Madurai', sans-serif}
|
||||
/* new fonts */
|
||||
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Alegreya Sans';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: local('Alegreya Sans Medium'), local('AlegreyaSans-Medium'), url(https://www.asiahighlights.com/css/fonts/5aUu9_-1phKLFgshYDvh6Vwt5alOqEp2iw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Alegreya Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Alegreya Sans Regular'), local('AlegreyaSans-Regular'), url(https://www.asiahighlights.com/css/fonts/5aUz9_-1phKLFgshYDvh6Vwt7VptvQ.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Alegreya Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: local('Alegreya Sans Bold'), local('AlegreyaSans-Bold'), url(https://www.asiahighlights.com/css/fonts/5aUu9_-1phKLFgshYDvh6Vwt5eFIqEp2iw.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Hind Madurai';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: local('Hind Madurai Light'), local('HindMadurai-Light'), url(https://www.asiahighlights.com/css/fonts/f0Xu0e2p98ZvDXdZQIOcpqjfXaUXfsEp.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Hind Madurai';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Hind Madurai Regular'), local('HindMadurai-Regular'), url(https://www.asiahighlights.com/css/fonts/f0Xx0e2p98ZvDXdZQIOcpqjX9ocC.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
/* CSS Document */
|
||||
#formBanner { display: block; position:relative}
|
||||
.selectBox{margin-top: 10px;}
|
||||
#formBanner img{-webkit-filter: brightness(70%);
|
||||
filter: brightness(70%);}
|
||||
.howWeWork{position: absolute;bottom: 30px;font-size: 18px;color: #FFF;text-align: center;padding: 0 30px;}
|
||||
#formBanner h1 { border-bottom: none; color:#fff; position:absolute; width:100%; bottom:90px; text-align:center; font-size:32px !important; font-family:'Alegreya Sans',sans-serif; text-shadow:2px 2px 2px #666;font-weight: 500}
|
||||
.procedure { background:rgba(0,0,0,.5); display: block; padding:20px 0; position:absolute; left:0; bottom:0; width:100%; color:#fff;}
|
||||
.procedure .subTitle { display: block; font-size:18px; text-align:center; margin-bottom:30px;}
|
||||
.whiteBorder { background:#fff; display: block; height:1px; margin:36px -12px 0 -15px;}
|
||||
.procedure .listIcon { background:url(/pic/list-icon.png) no-repeat left 10px; display: block; padding:11px 0 11px 66px; background-size:55px 55px; margin-top:9px; font-size:14px;}
|
||||
.procedure .peopleIcon { background:url(/pic/people-icon.png) no-repeat left 10px; display: block; padding:11px 0 11px 66px;background-size:55px 55px; font-size:14px;}
|
||||
.procedure .emailIcon { background:url(/pic/email-icon.png) no-repeat left 10px; display: block; padding:11px 0 11px 66px;background-size:55px 55px; font-size:14px;}
|
||||
.procedure .handIcon { background:url(/pic/hands-icon.png) no-repeat left 10px; display: block; padding:11px 0 11px 66px;background-size:55px 55px; font-size:14px;}
|
||||
.twoBlanks{margin-left: -15px;margin-right: -15px}
|
||||
.formTrust { display: block; margin-left:20px;}
|
||||
.monkReview { background:url(/image/walking-monks.jpg) no-repeat right bottom; display: block; color:#fff; margin:50px 0; font-size:14px; padding:20px 30px 150px; border-radius:4px; background-size: 100%; line-height:22px;}
|
||||
.monkReview b { display: block; margin-top:15px; font-size:16px; font-weight: normal;}
|
||||
#inquiryBox { display: block; margin:0 0 35px; margin-top:20px;}
|
||||
h3{ font-size: 20px;
|
||||
font-weight: 500;
|
||||
font-family: 'Alegreya Sans',sans-serif;margin-bottom: 10px;margin-top: 30px;}
|
||||
#inquiryBox h2 { font-size:28px;padding-top:10px; margin:0 0 15px;font-family: 'Alegreya Sans',sans-serif;text-align: center;font-weight: 500;}
|
||||
#contactInfo { display: block; box-shadow:0 0 5px #999; border-radius:4px; margin:0 0 25px; padding:25px; background:#fff;}
|
||||
#contactInfo h2 { font-size:24px; border-bottom:1px solid #d1d1d1; padding-bottom:20px; margin:0 0 00px;}
|
||||
.labelTitle { display: block; font-size:16px; font-weight:400; color:#333; margin:30px 0 15px;}
|
||||
.labelTitle .whatsThis { color:#a31022; font-size:13px;}
|
||||
textarea { font-family:'Open Sans', sans-serif!important; font-size:16px; line-height:26px; padding:15px !important; border:1px solid #d1d1d1; background:#fff; width:100%; height:100px; border-radius:2px;margin-top: 15px;}
|
||||
textarea:focus{border: 1px solid #7D9EC0;outline: none}
|
||||
#contactInfo .subTitle { display: block; font-size:16px; font-weight:400; color:#333; margin:30px 0 15px;}
|
||||
#contactInfo input { width:100%; font-size:14px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:8px 15px; color:#777 !important; background:#fff; border:1px solid #d1d1d1;}
|
||||
#Date_Start { width:100%; font-size:18px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:8px 15px; color:#777 !important; background:url(/pic/calendar-icon-red.png) no-repeat 96% 20px #fff; border:1px solid #d1d1d1;height: 60px}
|
||||
#inquiryBox label { font-weight: normal;}
|
||||
#inquiryBox .checked {background: url(/pic/checked-icon.png) no-repeat left;}
|
||||
#inquiryBox select { width:100%; font-size:18px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:2px 10px; cursor:pointer; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(/pic/select-tag.png) no-repeat 96% center #fff; background-size: 18px 10px; color:#777 !important; border:1px solid #d1d1d1;}
|
||||
#inquiryBox select option { padding:5px 0 5px 10px;}
|
||||
#contactInfo select { width:100%; font-size:14px; font-family:'Open Sans', sans-serif!important; border-radius:2px!important; padding:2px 10px; cursor:pointer; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(/pic/select-tag.png) no-repeat 96% center #fff; background-size: 18px 10px; color:#777 !important;border:1px solid #d1d1d1;height:38px}
|
||||
#contactInfo select option { padding:5px 0 5px 10px;}
|
||||
.submitBtn { display: block; margin:30px 0 100px; font-size:14px; line-height:22px;}
|
||||
.submitBtn .beginNow { background:#a31022; border-radius:4px; display: block; margin-bottom:15px;}
|
||||
.submitBtn .beginNow:hover { background:#800D1C; border-radius:4px; display: block; margin-bottom:15px;}
|
||||
.submitBtn .beginNow a { color:#fff; text-decoration: none; display: block; font-size:20px; padding:9px 0; text-align:center;}
|
||||
.submitBtn .beginNow .fa { font-size:170%; margin-left:10px; display:inline-block; vertical-align: middle; font-weight:300 !important;}
|
||||
.onlyCall { display: block; font-size:14px; color:#777; margin:75px 0 0 -20px;}
|
||||
.destinations li { display: block; float: left; width:24%; font-size:14px; background:url(/pic/checkbox-icon.png) no-repeat left; margin-bottom:10px; padding:5px 0 5px 35px; }
|
||||
.destinations li.checked { background:url(/pic/checked-icon.png) no-repeat left;}
|
||||
.hotelStyle li { display: block; float: left; width:32%; font-size:14px; background:url(/pic/checkbox-icon.png) no-repeat left; margin-bottom:10px; padding:5px 0 5px 35px; }
|
||||
.hotelStyle li:nth-child(2) { width:35% !important;}
|
||||
.hotelStyle { display: block; margin-bottom:25px; overflow: hidden;}
|
||||
.hotelStyle li.checked { background:url(/pic/checked-icon.png) no-repeat left;}
|
||||
.hotelStyle li em { display: block; font-style: normal; color:#999;}
|
||||
.interestedIn { display: block; margin-bottom:10px; font-size:14px;}
|
||||
.formNote{color: #999;font-size: 14px}
|
||||
.travelStyle input{display: none;}
|
||||
.travelTag{margin-left: -8px}
|
||||
.travelStyle{display: inline-block}
|
||||
|
||||
/* selection box */
|
||||
|
||||
.optionLable input{display: none;}
|
||||
.checkboxGender input[type="radio"] + label{font-size: 22px;padding: 5px 0;border: 1px solid #d1d1d1;border-radius: 4px;display: block;margin-top: 10px;text-align: center;color: #999;height: 65px;font-family: 'Alegreya Sans',sans-serif;padding-top: 15px}
|
||||
.checkboxGender input[type="radio"]:checked + label{border: 1px solid #ad1818;color: #ad1818}
|
||||
.optionLable input[type="radio"] + label{width: 100%;font-size: 22px;padding: 5px 0;border: 1px solid #d1d1d1;border-radius: 4px;display: block;margin-top: 10px;text-align: center;color: #999;height: 65px;font-family: 'Alegreya Sans',sans-serif;}
|
||||
.optionLable input[type="radio"]:checked + label{border: 1px solid #ad1818;color: #ad1818}
|
||||
.checkboxLabel input[type="checkbox"] + label{font-size: 22px;padding: 5px 0;border: 1px solid #d1d1d1;border-radius: 4px;display: block;margin-top: 10px;text-align: center;color: #999;height: 65px;font-family: 'Alegreya Sans',sans-serif;padding-top: 15px;}
|
||||
.checkboxLabel input[type="checkbox"]:checked + label{border: 1px solid #ad1818;color: #ad1818}
|
||||
.checkboxLabel{display: inline-block;width: 49%;}
|
||||
.checkboxLabel:nth-child(even){float: right}
|
||||
.checkboxLabel input{display: none}
|
||||
.travelTag input[type="checkbox"] + label{margin-left: 8px;margin-top: 8px;font-size: 14px;padding: 5px 7px;color: #999;border:1px solid #f1f1f1}
|
||||
.number, .minaddBtn:focus{border:1px solid #ad1818;outline: none}
|
||||
.travelTag input[type="checkbox"]:checked + label{color: #FFF;background-color: #ad1818}
|
||||
.selectionMemo{font-size: 14px;font-style: italic;font-weight: 300;margin-top:2px}
|
||||
#inquiryBox .flexibleDate{display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 0 5px 30px;}
|
||||
|
||||
#children[type=checkbox]{
|
||||
width: 20px;
|
||||
height: 20px;border: 1px solid #f1f1f1;vertical-align: middle;margin-right: 10px}
|
||||
.genderSelection{text-align: center}
|
||||
.checkFlexible{margin-top: 10px;font-size: 18px}
|
||||
hr{color: #f1f1f1}
|
||||
.checkboxGender{width: 32%;display: inline-block;}
|
||||
.checkboxGender label{width: 100%}
|
||||
.checkboxGender input{display: none}
|
||||
.checkboxGender:nth-child(3){float: right}
|
||||
.checkboxGender:nth-child(1){float: left}
|
||||
.peopleSelect{width: 100%;margin-top: 20px;font-size: 24px}
|
||||
.number{width: 49%;text-align: center;border: 1px solid #d1d1d1;border-radius: 4px;font-weight: 300;height: 65px}
|
||||
.minaddBtn{background: #FFF;border: 1px solid #d1d1d1;border-radius: 4px;color: #ad1818;height: 65px;font-weight: 700;width: 47%;display: inline-block}
|
||||
.numberBtn{width: 49%;display: inline-block;float: right;overflow: hidden;}
|
||||
.inputTerm label {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: calc(50% - 13px);
|
||||
transition: all ease-in-out .5s;
|
||||
pointer-events: none;height: 26px;
|
||||
color: #999;
|
||||
}
|
||||
.inputTerm {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 15px auto;
|
||||
position: relative;
|
||||
}
|
||||
.inputTerm input:focus ~ label, .inputTerm input:valid input:invalid~label{top:5px;font-size:12px;color:#999;transition:0.3s;text-transform:uppercase}
|
||||
.inputTerm input:focus{border: 1px solid #7D9EC0;outline: none}
|
||||
.inputTerm input {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
border: 1px solid #d1d1d1;
|
||||
height: 65px;
|
||||
padding: 15px 15px 0 20px;
|
||||
border-radius: 4px;
|
||||
color: #000;
|
||||
}
|
||||
.checkYes {
|
||||
display: block;
|
||||
width: 100%;margin-top: 10px}
|
||||
.checkBorder:checked {
|
||||
background-color: #ad1818;
|
||||
border-color: #ad1818;margin-right: 5px;
|
||||
}
|
||||
.checkBorder {
|
||||
background-color: #fff;
|
||||
border: 1px solid #c1c1c1;position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-clip: border-box;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
margin: -0.15px 0.6px 0 0;
|
||||
vertical-align: text-bottom;
|
||||
border-radius: 2px;
|
||||
-webkit-transition: background-color 0.25s;
|
||||
transition: background-color 0.25s;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d1d1d1
|
||||
}
|
||||
.contactUs{border-top: 1px solid #d1d1d1;}
|
||||
.contactUs p{margin-top: 15px;font-size: 18px;font-weight: normal}
|
||||
p a
|
||||
input[type=checkbox]+label {
|
||||
color: #999;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.checkYes label {
|
||||
display: inline;
|
||||
font-style: italic;font-size: 18px;color: #999
|
||||
}
|
||||
input[type=checkbox]:checked+label{color: #000}
|
||||
|
||||
.checkBorder:checked:after {
|
||||
border-color: #fff;
|
||||
}
|
||||
.checkBorder:checked:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 8px;
|
||||
width: 14px;
|
||||
border: 0 solid #FFF;
|
||||
border-width: 0 0 2px 2px;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 2px;
|
||||
}
|
||||
.interestedRoute{background: url(https://data.asiahighlights.com/image/black-backpic.PNG) no-repeat top;background-size: 100%;position: relative;margin: 20px 0 10px 0;padding:20px 0 5px 0}
|
||||
.routeName{font-size: 22px;text-align: center;font-weight: 400;width: 80%;margin: 0 auto; font-family: 'Alegreya Sans',sans-serif;}
|
||||
.settleBlock{padding: 15px 0 0 0;width:100%;}
|
||||
.settlePart{border-top: 1px dashed #d1d1d1;padding: 20px 0}
|
||||
.settleMponey{font-size: 24px;font-weight: 700;border-top: 1px dashed #d1d1d1;border-bottom: 1px dashed #d1d1d1;padding: 15px 0; font-family: 'Alegreya Sans',sans-serif;}
|
||||
.settleItems{font-size: 18px}
|
||||
.totalPrice{color: #ad1818}
|
||||
.headerText{background-color: #FFF;margin: 0 auto;padding: 0 15px;text-align: center;font-weight: 500;font-size: 14px;height: 22px;width: 200px;left: calc(50% - 100px);position: absolute;top:-8px;}
|
||||
.formMemo{font-size: 14px;color: #999;margin-left:15px; display: block; margin-top: -8px}
|
||||
.peopleSelect .formMemo{margin-bottom: 5px;}
|
||||
.inquiryBtn{display:block;text-align:center;font-family:Georgia,"Times New Roman",Times,serif;font-size:24px}
|
||||
input[type=submit]{background: linear-gradient(#ca3c3b,#ad1818);
|
||||
text-align: center;
|
||||
display: table;
|
||||
border-radius: 60px;
|
||||
min-width: 230px;
|
||||
margin: 25px auto;
|
||||
padding: 8px 30px;border: 1px solid #FFF;color: #FFF;font-family: 'Alegreya Sans',sans-serif;font-weight: 500;font-size: 20px}
|
||||
.readMore {
|
||||
max-height:0;
|
||||
overflow:hidden;
|
||||
transition:max-height .3s;
|
||||
}
|
||||
:checked ~ .readMore {
|
||||
max-height:666px;
|
||||
}
|
||||
.foldDestinations input[type="checkbox"] {
|
||||
clip:rect(0 0 0 0);
|
||||
position: absolute;
|
||||
}
|
||||
#check:checked ~ .check-in {
|
||||
display:none;
|
||||
}
|
||||
#check:checked ~ .check-out {
|
||||
display:inline-block;
|
||||
margin-top: 10px;
|
||||
float: right;
|
||||
}
|
||||
.check-out {
|
||||
display:none;
|
||||
text-align: center;
|
||||
}
|
||||
.check-in,.check-out {
|
||||
color:#ad1818;
|
||||
cursor:pointer;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
}
|
||||
#check:checked+.foldDestinations>.readMore {
|
||||
max-height:666px;
|
||||
}
|
||||
i{margin-left: 10px}
|
||||
|
||||
@media(max-width:760px) {
|
||||
.destinations li {margin-left: 10px;width: 45%;padding:5px 0 5px 35px; }
|
||||
#inquiryBox select, #contactInfo select { padding:10px 10px !important;height: 60px}
|
||||
.onlyCall { margin:10px 0 0 0 !important;}
|
||||
.hotelStyle li { background-position: left 15px !important; width:100% !important; float: none !important;}
|
||||
.hotelStyle li:nth-child(2) { width:100% !important;}
|
||||
|
||||
}
|
||||
@media(min-width:1024px){.ticketSelection{display: none!important}}
|
||||
Loading…
Reference in New Issue