You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
4.5 KiB
PHTML
51 lines
4.5 KiB
PHTML
<div id="loader" style="display: none;">
|
|
<div id="loading"></div>
|
|
</div>
|
|
<div class="trainSearchBox flights-box " id="searchPanel">
|
|
<form action="https://www.trainspread.com/flight/list/" method="POST" name="flightform" target="_self" class="formWrap form-inline" id="flightform" onsubmit="return Chk_Form();">
|
|
<p class="trainSear-title">China Flights Booking</p>
|
|
<div class="flights-nav">
|
|
<div class="flex-row">
|
|
<div class="flex-col-2"> <input name="triptype" value="1" type="radio" class="magic-radio" id="r1" checked="checked" />
|
|
<label for="r1">One-way</label>
|
|
</div>
|
|
<div class="flex-col-2"><input name="triptype" value="2" type="radio" class="magic-radio" id="r2" />
|
|
<label for="r2">Round-trip</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="searchBox" id="searchbox">
|
|
<div class="inforDiv">
|
|
<div class="searchList">
|
|
<div class="flex-row">
|
|
<div class="flex-col-2">
|
|
<input name="flightfrom" id="flightfrom" type="text" class="inputBox form-control" autocomplete="off" placeholder="From City or airport">
|
|
<input id="flightfromcode" name="flightfromcode" type="hidden" value="" />
|
|
</div>
|
|
<a href="javascript:;" class="exchange js_FlightsChange" id="js_FlightsChange"><img class="cityArrow" src="https://data.chinatravel.com/images/icon/reverseCity.png" width="34px" height="34px"></a>
|
|
<div class="flex-col-2">
|
|
<input name="flighto" id="flighto" type="text" class="inputBox form-control" autocomplete="off" placeholder="To City or airport">
|
|
<input name="flightocode" id="flightocode" type="hidden" value="" />
|
|
</div>
|
|
<div class="flex-col-2 flex-col-xs-2">
|
|
<input name="takeoffDate" id="takeoffDate" class="form-control calendar3 " placeholder="Departing" autocomplete="off" type="text" readonly="readonly">
|
|
</div>
|
|
<div class="flex-col-2 flex-col-xs-2">
|
|
<input name="returnDate" id="returnDate" class="form-control calendar3 " placeholder="Returning" autocomplete="off" type="text" readonly="readonly">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center"><button type="submit" name="button" id="SearchFlightButton" value="" class="ButtonFlights">SEARCH <i class="fa fa-angle-right" aria-hidden="true"></i></button>
|
|
<input type="hidden" name="utm_source" id="utm_source" value="32151">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<link href="https://data.chinatravel.com/css/newcss3/flatpickr.css" rel="stylesheet" type="text/css" />
|
|
<style type="text/css">
|
|
.flex-col-3, .flex-col-4, .flex-col-2{ margin-bottom: 20px; display: block; flex-flow: column; position: static;} #searchbox .hidden{ display: none} .traintype li{ cursor: pointer} @media (max-width: 680px){ .hidden-xs{ display: none !important;}} .autocomplete{ position: relative;} #searchbox .autocomplete-items{ position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 999;} #searchbox .autocomplete-items div{ padding: 5px; cursor: pointer; background-color: #f1f0f0; border-bottom: 1px solid #d4d4d4; font-size: 14px;} #searchbox .autocomplete-items div:hover{ background-color: #e9e9e9;} #searchbox .autocomplete-active{ background-color: DodgerBlue !important; color: #ffffff;} #loader{ position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2;} #loading{ position: absolute; top: 50%; left: 50%; font-size: 50px; color: white; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);} #loading:after{ content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #fff; border-color: #fff transparent #fff transparent; animation: lds-dual-ring 1.2s linear infinite} @keyframes lds-dual-ring{ 0%{ transform: rotate(0deg)} 100%{ transform: rotate(360deg)}}
|
|
</style>
|
|
<script src="https://data.chinatravel.com/js/mobile-first/zepto.min.js"></script>
|
|
<script src="https://data.chinatravel.com/js/mobile-first/flight-index.js"></script> |