<!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta http-equiv = "Cache-Control" content = "no-cache, no-store, must-revalidate" / >
< meta http-equiv = "Pragma" content = "no-cache" / >
< meta http-equiv = "Expires" content = "0" / >
< title > One Minute Feedback - Help Us Serve You Better！ < / title >
< style > body { font-family : Arial , sans-serif ; color : #333 } . text-primary { color : #b43c1a } h3 , h5 , p { margin : .5 em 0 } . header-m { background : #ad1818 ; color : #fff ; padding : .5 em } . header-pc { height : 90 px !important ; display : flex ; align-items : center ; justify-content : flex-start ; background : #ad1818 ; color : #fff ; padding : 0 20 px } . header-pc img { position : absolute ; top : 0 ; margin-right : 20 px ; height : 104 px ; width : auto ; border-radius : 0 0 3 px 3 px ; background-color : #fff ; box-shadow : 1 px 1 px 10 px 1 px rgba ( 77 , 77 , 77 , .7 ) ; -webkit- box-shadow : 1 px 1 px 10 px 1 px rgba ( 77 , 77 , 77 , .7 ) ; -moz- box-shadow : 1 px 1 px 10 px 1 px rgba ( 77 , 77 , 77 , .7 ) } . header-pc h1 { margin : 0 ; margin-left : 240 px } . form-container { width : 100 % ; max-width : 768 px ; margin : 0 auto ; margin-top : 1.5 em } form . form-container { counter-reset : hq ; } form . form-container h4 :: before { counter-increment : hq ; content : counter ( hq ) ". " ; } . question { display : flex ; flex-direction : column ; align-items : start ; margin-bottom : 10 px } . question h4 { position : sticky ; top : 0 ; background-color : #fff ; margin-top : 0 ; padding-top : 1.33 em } . question-items { display : flex ; flex-direction : column ; align-items : start ; margin-bottom : 10 px ; } . options { display : flex ; flex-direction : column ; align-items : start ; } . options-row { flex-direction : row ; justify-content : flex-end ; align-items : baseline } . options-row-reverse { flex-direction : row-reverse ; justify-content : flex-end ; align-items : baseline } . radio-container { display : flex ; align-items : center ; margin-bottom : 5 px ; margin-top : 5 px ; max-width : 140 px ; } . radio-container input [ type = radio ] { display : none } . radio-container label { margin-left : 8 px } . radio-container input [ type = radio ] : checked + . radio-label { background-color : #d54e21 ; color : #fff } . radio-label { display : inline-block ; padding : 5 px 10 px ; border : 1 px solid #d54e21 ; border-radius : 20 px ; transition : all .3 s ease ; font-size : 14 px } label . radio-label svg { vertical-align : text - bottom } . feedback { margin-top : 10 px } . feedback textarea { width : 90 % ; padding : 10 px ; resize : vertical ; border : 1 px solid #d54e21 ; border-radius : 5 px } . form-btn { display : block ; width : 100 % ; padding : 10 px ; margin-top : 20 px ; border : none ; border-radius : 20 px ; cursor : pointer ; transition : all .3 s ease ; background : 0 0 ; border : 1 px solid #d54e21 ; color : #d54e21 } . submit-btn { background-color : #d54e21 ; color : #fff } . submit-btn : hover { background-color : #b43c1a } . cancel-btn : hover { background-color : #000000 11 } . info-container { display : flex ; flex-direction : column ; justify-content : space-between ; margin-bottom : 10 px } . info-item { margin-bottom : 10 px } . info-item p { color : #b43c1a } . signature-pad { border : 1 px solid #d54e21 ; border-radius : 5 px ; z-index : 10 } . signature-container { display : flex ; flex-direction : column ; justify-content : flex-start ; align-items : flex-start ; flex-wrap : wrap } . button-container { margin-left : .5 em ; display : flex ; flex-direction : column ; justify-content : flex-start } . button { margin-top : 1 em ; padding : 10 px ; background-color : #d54e21 ; color : #fff ; border : none ; border-radius : 5 px ; cursor : pointer } @ media ( min-width : 768px ) { body { margin-left : 0 ; margin-right : 0 ; margin-top : 0 ; padding-left : 0 ; padding-right : 0 ; padding-top : 0 } . question-items { width : 100 % ; flex-direction : row ; justify-content : space-between ; align-items : baseline } . question-items h5 { max-width : 8 rem ; } . question-items . options { flex : 1 1 auto } . options { flex-direction : row ; justify-content : flex-end ; align-items : center ; } . info-container { flex-direction : row } . info-item { flex : 1 ; margin-right : 10 px ; margin-bottom : 0 } . info-item : last-child { margin-right : 0 } . header-m { display : none } . signature-container { flex-direction : row } } @ media ( max-width : 767px ) { . header-pc { display : none } } < / style >
< style >
#result{text-align:center;padding:20px}.bi-check-circle-fill,.bi-exclamation-circle-fill,.bi-x-circle-fill{fill:#d54e21}.bi-x-circle-fill{fill:#d54e21}
< / style >
< style > # loading-mask { width : 100 vw ; height : 100 vh ; background-color : #000000 99 ; position : fixed ; left : 0 ; top : 0 ; display : flex } . lds-facebook { display : inline-block ; position : relative ; width : 80 px ; height : 80 px ; margin : auto } . lds-facebook div { display : inline-block ; position : absolute ; left : 8 px ; width : 16 px ; background : #fff ; animation : lds-facebook 1.2 s cubic-bezier ( 0 , .5 , .5 , 1 ) infinite } . lds-facebook div : nth-child ( 1 ) { left : 8 px ; animation-delay : -.24 s } . lds-facebook div : nth-child ( 2 ) { left : 32 px ; animation-delay : -.12 s } . lds-facebook div : nth-child ( 3 ) { left : 56 px ; animation-delay : 0 } @ keyframes lds-facebook { 0 % { top : 8 px ; height : 64 px } 100 % , 50 % { top : 24 px ; height : 32 px } } < / style >
< style > . city-page { display : flex ; flex-direction : column ; align-items : center } . city-list { list-style-type : none ; padding : 0 ; width : 260 px ; background-color : #fff ; border-radius : 5 px ; box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , .1 ) } . city-list li { padding : 20 px ; border-top : 1 px solid #d54e21 ; border-bottom : 1 px solid #d54e21 ; transition : background-color .3 s ; position : relative } . city-list li . active { color : #d54e21 } . city-list li . filled :: after { content : '✔' ; position : absolute ; right : 20 px ; color : #d54e21 ; transition : color .3 s } . city-list li : hover { background-color : #d54e21 ; color : #fff } . city-list li . filled : hover :: after { color : #fff } < / style >
< style > . float-button { position : fixed ; right : 20 px ; bottom : 120 px ; background-color : transparent ; color : #d54e21 ; border : 1 px solid #d54e21 ; border-radius : 50 % ; width : 60 px ; height : 60 px ; text-align : center ; line-height : 60 px ; font-size : 24 px ; cursor : pointer ; box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , .1 ) ; z-index : 1 } . float-button : hover { background-color : #d54e21 ; color : #fff } . float-text { position : fixed ; right : 20 px ; bottom : 190 px ; color : #d54e21 ; font-size : 18 px ; text-align : right ; z-index : -1 ; width : 100 px ; } . expand-list { list-style-type : none ; position : fixed ; right : 20 px ; bottom : 190 px ; width : 260 px ; background-color : #fff ; border-radius : 5 px ; box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , .1 ) ; padding : 0 ; max-height : 0 ; overflow : hidden ; opacity : 0 ; transition : max-height .5 s ease , opacity .5 s ease } . expand-list . open { max-height : 500 px ; opacity : 1 ; z-index : 99 ; } . expand-list li { padding : 20 px ; border-bottom : 1 px solid #d54e21 ; transition : background-color .3 s ; position : relative ; } . expand-list li : last-child { border-bottom : none } . expand-list li . active { color : #d54e21 } . expand-list li . filled :: after { content : '✔' ; position : absolute ; right : 20 px ; color : #d54e21 ; transition : color .3 s } . expand-list li : hover { background-color : #d54e21 ; color : #fff } . expand-list li . filled : hover :: after { color : #fff } < / style >
< style > . star-rating { direction : rtl ; display : inline-block } . star-rating input [ type = radio ] { display : none } . star-rating label { font-size : 30 px ; color : #d3d3d3 ; cursor : pointer } . star-rating input [ type = radio ] : checked ~ label , . star-rating input [ type = radio ] ~ label . checked , . star-rating label : hover , . star-rating label : hover ~ label { color : #d54e21 } . rate-meaning { display : inline-block ; margin-left : 15 px ; vertical-align : middle ; color : #d54e21 } < / style >
< script src = "./utils.js" > < / script >
< script src = "./vue@2.js" > < / script >
< script src = "./signature_pad.umd.min.js" > < / script >
< / head >
< body >
< div id = "app" >
< div class = "header-pc" >
< a href = "https://www.asiahighlights.com/" v-if = "webcode=='ah'" >
< img src = "https://data.asiahighlights.com/pic/logo-ah.png" alt = "Logo" width = "130" height = "104" >
< / a >
< a href = "/" v-if = "webcode=='gh'" >
< img src = "https://data.chinahighlights.com/image/aboutus/logo-gh.png" alt = "Logo" width = "130" height = "104" >
< / a >
<!-- <h1>{{i18n.title}}</h1> -->
< h1 > < / h1 >
< / div >
< div class = "header-m" >
< h1 > < / h1 >
< / div >
< div class = "form-container" id = "main" >
< div id = "result" v-if = "error || (!cityListPage && isEmptyData)" >
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi - x - circle - fill" viewBox="0 0 16 16">
< path d = "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.5-4.5a.5.5 0 0 0-.707 0L8 7.293 5.207 4.5a.5.5 0 0 0-.707.707L7.293 8l-2.793 2.793a.5.5 0 0 0 .707.707L8 8.707l2.793 2.793a.5.5 0 0 0 .707-.707L8.707 8l2.793-2.793a.5.5 0 0 0 0-.707z" / >
< / svg > -->
< svg xmlns = "http://www.w3.org/2000/svg" width = "50" height = "50" fill = "currentColor" class = "bi bi-check-circle-fill" viewBox = "0 0 16 16" >
< path d = "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 10.417 5.384 8.323A.75.75 0 0 0 4.303 9.7l2.693 2.677a.75.75 0 0 0 1.086-.02l5.17-5.85a.75.75 0 0 0-.02-1.107z" / >
< / svg >
< h2 > No evaluation is required!< / h2 >
<!-- <p>{{errorMsg}}</p> -->
< button type = "button" id = "back0" class = "form-btn cancel-btn" v-on:click = "error=false;cityListPage=true;" > Go Back< / button >
< / div >
< template v-else >
< div id = "result" v-if = "isFilled" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "50" height = "50" fill = "currentColor" class = "bi bi-check-circle-fill" viewBox = "0 0 16 16" >
< path d = "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 10.417 5.384 8.323A.75.75 0 0 0 4.303 9.7l2.693 2.677a.75.75 0 0 0 1.086-.02l5.17-5.85a.75.75 0 0 0-.02-1.107z" / >
< / svg >
< h2 > {{i18n.thank_you}}< / h2 >
<!-- <p>All actions are done.</p> -->
< / div >
< template v-if = "cityListPage" >
< h4 v-if = "!isFilled" > {{i18n.tips}}< / h4 >
< div class = "city-page" >
< ul class = "city-list" v-for = "(city, index) in cityList" v-bind:key = "city.cityName" v-on:click = "selectCity(city)" >
< li v-bind:class = "[city.feedback_Filled ? 'filled' : '', city.cii_sn === currentCity.cii_sn ? 'active' : '' ]" > {{city.cityName}}< / li >
< / ul >
< / div >
< / template >
< template v-if = "!cityListPage" >
<!-- <h1>One Minute Feedback - Help Us Serve You Better！ -->
<!-- <p>Did you enjoy your stay in the <span class="text - primary">{{currentCity.cityName}}</span> area? Your honest feedback is appreciated to help us continually improve our service.</p> -->
< start-eva-text :city = "currentCity.cityName" > < / start-eva-text >
< div class = "info-container" >
< div class = "info-item" >
< h3 > {{i18n.reference_no}}< / h3 >
< p id = "referenceNo" > {{group.groupNumber}}< / p >
< / div >
< div class = "info-item" >
< h3 > {{i18n.guide_name}}< / h3 >
< p id = "guideName" > {{group.tourGuideName}}< / p >
< / div >
< div class = "info-item" >
< h3 > {{i18n.city}}< / h3 >
< p id = "city" > {{currentCity.cityName}}< / p >
< / div >
< / div >
< hr >
< p > {{i18n.tips}}< / p >
< p v-if = "!isWideScreen" > {{i18n.mobile_lead}}< / p >
< form class = "form-container" id = "myForm" action = "/sub" method = "post" disabled >
< div class = "question" >
< h4 > {{i18n.questions[0]}}< / h4 >
< div class = "question-items" v-for = "(q, qi) in feedbackItem.guide" v-bind:key = "q.id" >
< h5 > {{q.Describe}}< / h5 >
< options-item v-if = "isWideScreen" question = "guide" si = "1" v-bind:qitem = "q" v-bind:qi = "qi" v-bind:key = "q.id" v-bind:disabled = "resultPage" > < / options-item >
< options-item-star v-else question = "guide" si = "1" v-bind:qitem = "q" v-bind:qi = "qi" v-bind:key = "q.id" v-bind:disabled = "resultPage" > < / options-item-star >
< / div >
< / div >
< div class = "question" >
< h4 > {{i18n.questions[1]}}< / h4 >
< div class = "question-items" v-for = "(q, qi) in feedbackItem.driver" v-bind:key = "q.id" >
< h5 > {{q.Describe}}< / h5 >
< options-item v-if = "isWideScreen" question = "Driver" v-bind:qitem = "q" v-bind:si = "2" v-bind:qi = "qi" v-bind:key = "q.id" v-bind:disabled = "resultPage" > < / options-item >
< options-item-star v-else question = "Driver" v-bind:qitem = "q" v-bind:si = "2" v-bind:qi = "qi" v-bind:key = "q.id" v-bind:disabled = "resultPage" > < / options-item >
< / div >
< / div >
< div class = "question" v-if = "feedbackItem.experience.length > 0" >
< h4 > {{i18n.questions[2]}}< / h4 >
< div class = "question-items" v-for = "(q, qi) in feedbackItem.experience" v-bind:key = "q.id" >
< h5 > {{q.Describe}}< / h5 >
< options-item v-if = "isWideScreen" question = "Experience" v-bind:qitem = "q" v-bind:si = "3" v-bind:qi = "qi" v-bind:key = "q.id" v-bind:disabled = "resultPage" > < / options-item >
< options-item-star v-else question = "Experience" v-bind:qitem = "q" v-bind:si = "3" v-bind:qi = "qi" v-bind:key = "q.id" v-bind:disabled = "resultPage" > < / options-item >
< / div >
< / div >
< div class = "question " >
< h4 > {{i18n.questions[3]}}< / h4 >
< judgment-item question = "photo" v-bind:qitem = "{id: 'photo_permission', rate: feedbackEvaluation[0].usePhotos}" si = "photo" qi = "photo" key = "photo" v-bind:disabled = "resultPage" > < / judgment-item >
< / div >
< div class = "feedback question" >
< h4 > {{i18n.questions[4]}}< / h4 >
< div v-if = "resultPage" >
< p v-for = "eva in feedbackEvaluation" v-bind:key = "eva.feedbackId" >
{{eva.otherComments ? eva.otherComments : ''}}
< / p >
< / div >
< textarea v-else name = "comments" rows = "4" v-bind:value = "feedbackEvaluation[0].otherComments" v-bind:disabled = "resultPage" > < / textarea >
< / div >
< div class = "feedback question" >
< h4 > {{i18n.questions[5]}}
< / h4 >
< div v-if = "resultPage" >
< p v-for = "eva in feedbackEvaluation" v-bind:key = "eva.feedbackId" >
{{eva.desired_next ? eva.desired_next : ''}}
< / p > < / div >
< textarea v-else name = "desired_next" rows = "4" v-bind:value = "feedbackEvaluation[0].desired_next" v-bind:disabled = "resultPage" > < / textarea >
< / div >
< div class = "signature" >
< h4 > {{i18n.questions[6]}}< / h4 >
< div class = "signature-container" v-if = "!resultPage" >
< canvas id = "signature-pad" class = "signature-pad" v-bind:style = "{'width': drawWidth+'px', 'height':'200px'}" > < / canvas >
< div class = "button-container" >
< button type = "button" id = "clear" class = "button" v-on:click = "clearSignature()" > {{i18n.btns.clear}}< / button >
< / div >
< / div >
< div v-else >
< img id = "signature-img" v-bind:src = "feedbackEvaluation[0].signatureDataUrl" v-bind:width = "drawWidth" / >
< / div >
< / div >
< template v-if = "!resultPage" >
< button type = "button" id = "submit_a" class = "form-btn submit-btn" v-on:click = "submitForm" > {{i18n.btns.submit}}< / button >
< button type = "button" id = "back" class = "form-btn cancel-btn" v-on:click = "cancel" v-if = "cityList.length > 1" > {{i18n.btns.cancel}}< / button >
< / template >
< / form >
< template v-if = "cityList.length > 1" >
< span id = "currentCity" class = "float-text" v-show = "!cityListOpen" > {{currentCity.cityName}}< / span >
< button class = "float-button" v-on:click = "toggleCityList" > ≡< / button >
< ul v-bind:class = "['expand-list', cityListOpen ? 'open' : '']" >
< li v-for = "city in cityList" v-bind:key = "city.cityName" v-on:click = "selectCity(city)" v-bind:class = "{'active': city.cii_sn === currentCity.cii_sn, 'filled': (city.feedback_Filled ? true : false)}" > {{city.cityName}}< / li >
< / ul >
< / template >
< / template >
< / template >
< div id = "loading-mask" v-if = "loading" >
< div class = "lds-facebook" >
< div > < / div >
< div > < / div >
< div > < / div >
< / div >
< / div >
< / div >
< / div >
< script async >
var rnd = Math.random();
var script0 = document.createElement('script');
script0.src = './components.js?rnd=' + rnd;
document.head.appendChild(script0);
script0.onload = function() {
var script = document.createElement('script');
script.src = './index.js?rnd=' + rnd;
document.head.appendChild(script);
};
< / script >
< / body >
< / html >
