|
|
|
@ -4,517 +4,14 @@
|
|
|
|
<head>
|
|
|
|
<head>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
|
<style>body{font-family:Arial,sans-serif;color:#333}.text-primary{color:#b43c1a}h3,h5,p{margin:.5em 0}.header-m{background:#ad1818;color:#fff;padding:.5em}.header-pc{height:90px!important;display:flex;align-items:center;justify-content:flex-start;background:#ad1818;color:#fff;padding:0 20px}.header-pc img{position:absolute;top:0;margin-right:20px;height:104px;width:auto;border-radius:0 0 3px 3px;background-color:#fff;box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-webkit-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-moz-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7)}.header-pc h1{margin:0;margin-left:240px}.form-container{width:100%;max-width:768px;margin:0 auto;margin-top:1.5em}.question{display:flex;flex-direction:column;align-items:start;margin-bottom:10px}.question h4{position:sticky;top:0;background-color:#fff;margin-top:0;padding-top:1.33em}.question-items{display:flex;flex-direction:column;align-items:start}.options{display:flex;flex-direction:column;align-items:start;margin-bottom:10px}.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:10px}.radio-container input[type=radio]{display:none}.radio-container label{margin-left:8px}.radio-container input[type=radio]:checked+.radio-label{background-color:#d54e21;color:#fff}.radio-label{display:inline-block;padding:5px 10px;border:1px solid #d54e21;border-radius:20px;transition:all .3s ease;font-size:14px}label.radio-label svg{vertical-align:text-bottom}.feedback{margin-top:10px}.feedback textarea{width:90%;padding:10px;resize:vertical;border:1px solid #d54e21;border-radius:5px}.form-btn{display:block;width:100%;padding:10px;margin-top:20px;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;background:0 0;border:1px solid #d54e21;color:#d54e21}.submit-btn{background-color:#d54e21;color:#fff}.submit-btn:hover{background-color:#b43c1a}.cancel-btn:hover{background-color:#00000011}.info-container{display:flex;flex-direction:column;justify-content:space-between;margin-bottom:10px}.info-item{margin-bottom:10px}.info-item p{color:#b43c1a}.signature-pad{border:1px solid #d54e21;border-radius:5px;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:.5em;display:flex;flex-direction:column;justify-content:flex-start}.button{margin-top:1em;padding:10px;background-color:#d54e21;color:#fff;border:none;border-radius:5px;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 .options{flex:1 1 auto}.options{flex-direction:row;justify-content:flex-end}.info-container{flex-direction:row}.info-item{flex:1;margin-right:10px;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>
|
|
|
|
<style>
|
|
|
|
body {
|
|
|
|
#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}
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.text-primary {
|
|
|
|
|
|
|
|
color: #b43c1a;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p,
|
|
|
|
|
|
|
|
h3,
|
|
|
|
|
|
|
|
h5 {
|
|
|
|
|
|
|
|
margin: .5em 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header-m {
|
|
|
|
|
|
|
|
background: #ad1818;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
padding: .5em;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header-pc {
|
|
|
|
|
|
|
|
height: 90px !important;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
|
|
background: #ad1818;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header-pc img {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
margin-right: 20px;
|
|
|
|
|
|
|
|
height: 104px;
|
|
|
|
|
|
|
|
/* Set the height here */
|
|
|
|
|
|
|
|
width: auto;
|
|
|
|
|
|
|
|
/* Maintain aspect ratio */
|
|
|
|
|
|
|
|
border-radius: 0 0 3px 3px;
|
|
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
box-shadow: 1px 1px 10px 1px rgba(77, 77, 77, 0.7);
|
|
|
|
|
|
|
|
-webkit-box-shadow: 1px 1px 10px 1px rgba(77, 77, 77, 0.7);
|
|
|
|
|
|
|
|
-moz-box-shadow: 1px 1px 10px 1px rgba(77, 77, 77, 0.7);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header-pc h1 {
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
margin-left: 240px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.form-container {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
max-width: 768px;
|
|
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
margin-top: 1.5em;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.question {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
align-items: start;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.question h4 {
|
|
|
|
|
|
|
|
position: sticky;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
|
|
|
padding-top: 1.33em;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.question-items {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
align-items: start;
|
|
|
|
|
|
|
|
/* margin-bottom: 10px; */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.options {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
align-items: start;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
/* flex-direction: row;
|
|
|
|
|
|
|
|
flex-wrap: wrap; */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.options-row {
|
|
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
/* justify-content: space-between; */
|
|
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.options-row-reverse {
|
|
|
|
|
|
|
|
flex-direction: row-reverse;
|
|
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
/* justify-content: space-between; */
|
|
|
|
|
|
|
|
align-items: baseline;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.radio-container {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.radio-container input[type="radio"] {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.radio-container label {
|
|
|
|
|
|
|
|
margin-left: 8px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.radio-container input[type="radio"]:checked+.radio-label {
|
|
|
|
|
|
|
|
background-color: #d54e21;
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.radio-label {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
|
|
|
border: 1px solid #d54e21;
|
|
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
label.radio-label svg {
|
|
|
|
|
|
|
|
vertical-align: text-bottom;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feedback {
|
|
|
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.feedback textarea {
|
|
|
|
|
|
|
|
width: 90%;
|
|
|
|
|
|
|
|
/* min-height: 60px; */
|
|
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
resize: vertical;
|
|
|
|
|
|
|
|
border: 1px solid #d54e21;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.form-btn {
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
transition: all 0.3s ease;
|
|
|
|
|
|
|
|
background: transparent;
|
|
|
|
|
|
|
|
border: 1px solid #d54e21;
|
|
|
|
|
|
|
|
color: #d54e21;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.submit-btn {
|
|
|
|
|
|
|
|
background-color: #d54e21;
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.submit-btn:hover {
|
|
|
|
|
|
|
|
background-color: #b43c1a;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cancel-btn:hover {
|
|
|
|
|
|
|
|
background-color: #00000011;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-container {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-item {
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-item p {
|
|
|
|
|
|
|
|
color: #b43c1a;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.signature-pad {
|
|
|
|
|
|
|
|
border: 1px solid #d54e21;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
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: .5em;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
|
|
/* height: 200px; */
|
|
|
|
|
|
|
|
/* Match the height of the canvas */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
|
|
|
/* margin-left: 1em; */
|
|
|
|
|
|
|
|
margin-top: 1em;
|
|
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
background-color: #d54e21;
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
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 {
|
|
|
|
|
|
|
|
flex-basis: 150px;
|
|
|
|
|
|
|
|
} */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.question-items .options {
|
|
|
|
|
|
|
|
flex: 1 1 auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.options {
|
|
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
/* justify-content: space-between; */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-container {
|
|
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-item {
|
|
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.info-item:last-child {
|
|
|
|
|
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.header-m {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.signature-container {
|
|
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
|
|
/* flex-wrap: wrap; */
|
|
|
|
|
|
|
|
/* align-items: flex-start; */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@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: 100vw;
|
|
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
|
|
background-color: #00000099;
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
display: flex
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.lds-facebook {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
width: 80px;
|
|
|
|
|
|
|
|
height: 80px;
|
|
|
|
|
|
|
|
margin: auto
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.lds-facebook div {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 8px;
|
|
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
|
|
animation: lds-facebook 1.2s cubic-bezier(0, .5, .5, 1) infinite
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.lds-facebook div:nth-child(1) {
|
|
|
|
|
|
|
|
left: 8px;
|
|
|
|
|
|
|
|
animation-delay: -.24s
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.lds-facebook div:nth-child(2) {
|
|
|
|
|
|
|
|
left: 32px;
|
|
|
|
|
|
|
|
animation-delay: -.12s
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.lds-facebook div:nth-child(3) {
|
|
|
|
|
|
|
|
left: 56px;
|
|
|
|
|
|
|
|
animation-delay: 0
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes lds-facebook {
|
|
|
|
|
|
|
|
0% {
|
|
|
|
|
|
|
|
top: 8px;
|
|
|
|
|
|
|
|
height: 64px
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
100%,
|
|
|
|
|
|
|
|
50% {
|
|
|
|
|
|
|
|
top: 24px;
|
|
|
|
|
|
|
|
height: 32px
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
.city-page {
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.city-list {
|
|
|
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.city-list li {
|
|
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
border-top: 1px solid #d54e21;
|
|
|
|
|
|
|
|
border-bottom: 1px solid #d54e21;
|
|
|
|
|
|
|
|
transition: background-color 0.3s;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* .city-list li:last-child {
|
|
|
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
|
|
|
} */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.city-list li:hover {
|
|
|
|
|
|
|
|
background-color: #d54e21;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
.float-button {
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
|
|
bottom: 120px;
|
|
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
|
|
/* Make the background transparent */
|
|
|
|
|
|
|
|
color: #d54e21;
|
|
|
|
|
|
|
|
/* Use the hover color for the text */
|
|
|
|
|
|
|
|
border: 1px solid #d54e21;
|
|
|
|
|
|
|
|
/* Add a border */
|
|
|
|
|
|
|
|
/* background-color: #d54e21; */
|
|
|
|
|
|
|
|
/* color: #fff; */
|
|
|
|
|
|
|
|
/* border: none; */
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
width: 60px;
|
|
|
|
|
|
|
|
height: 60px;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
line-height: 60px;
|
|
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
/* Make the button float above the city list */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.float-button:hover {
|
|
|
|
|
|
|
|
background-color: #d54e21;
|
|
|
|
|
|
|
|
/* Change background color on hover */
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
/* Change text color on hover */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.float-text {
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
|
|
bottom: 190px;
|
|
|
|
|
|
|
|
/* Position the text above the button */
|
|
|
|
|
|
|
|
color: #d54e21;
|
|
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.expand-list {
|
|
|
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
right: 20px;
|
|
|
|
|
|
|
|
bottom: 190px;
|
|
|
|
|
|
|
|
/* Position the list above the button */
|
|
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
/* display: none; Initially hide the list */
|
|
|
|
|
|
|
|
max-height: 0;
|
|
|
|
|
|
|
|
/* Initially collapse the list */
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
/* Hide the overflowing content */
|
|
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
|
|
/* Make the list transparent */
|
|
|
|
|
|
|
|
transition: max-height 0.5s ease, opacity 0.5s ease;
|
|
|
|
|
|
|
|
/* Add transitions */
|
|
|
|
|
|
|
|
/* border: 1px solid #d54e21; */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.expand-list.open {
|
|
|
|
|
|
|
|
max-height: 500px;
|
|
|
|
|
|
|
|
/* Expand the list */
|
|
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
/* Make the list opaque */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.expand-list li {
|
|
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
border-bottom: 1px solid #d54e21;
|
|
|
|
|
|
|
|
transition: background-color 0.3s;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.expand-list li:last-child {
|
|
|
|
|
|
|
|
border-bottom: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.expand-list li.active {
|
|
|
|
|
|
|
|
color: #d54e21;
|
|
|
|
|
|
|
|
/* color: #fff; */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.expand-list li:hover {
|
|
|
|
|
|
|
|
background-color: #d54e21;
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
.star-rating {
|
|
|
|
|
|
|
|
direction: rtl;
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.star-rating input[type=radio] {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.star-rating label {
|
|
|
|
|
|
|
|
font-size: 30px;
|
|
|
|
|
|
|
|
color: lightgray;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.star-rating input[type=radio] ~ label.checked,
|
|
|
|
|
|
|
|
.star-rating input[type=radio]:checked ~ label,
|
|
|
|
|
|
|
|
.star-rating label:hover,
|
|
|
|
|
|
|
|
.star-rating label:hover ~ label {
|
|
|
|
|
|
|
|
color: #d54e21;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.rate-meaning {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
margin-left: 15px;
|
|
|
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
|
|
|
color: #d54e21;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style>#loading-mask{width:100vw;height:100vh;background-color:#00000099;position:fixed;left:0;top:0;display:flex}.lds-facebook{display:inline-block;position:relative;width:80px;height:80px;margin:auto}.lds-facebook div{display:inline-block;position:absolute;left:8px;width:16px;background:#fff;animation:lds-facebook 1.2s cubic-bezier(0,.5,.5,1) infinite}.lds-facebook div:nth-child(1){left:8px;animation-delay:-.24s}.lds-facebook div:nth-child(2){left:32px;animation-delay:-.12s}.lds-facebook div:nth-child(3){left:56px;animation-delay:0}@keyframes lds-facebook{0%{top:8px;height:64px}100%,50%{top:24px;height:32px}}</style>
|
|
|
|
|
|
|
|
<style>.city-page{display:flex;flex-direction:column;align-items:center}.city-list{list-style-type:none;padding:0;width:200px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}.city-list li{padding:20px;border-top:1px solid #d54e21;border-bottom:1px solid #d54e21;transition:background-color .3s}.city-list li:hover{background-color:#d54e21;color:#fff}</style>
|
|
|
|
|
|
|
|
<style>.float-button{position:fixed;right:20px;bottom:120px;background-color:transparent;color:#d54e21;border:1px solid #d54e21;border-radius:50%;width:60px;height:60px;text-align:center;line-height:60px;font-size:24px;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.1);z-index:1}.float-button:hover{background-color:#d54e21;color:#fff}.float-text{position:fixed;right:20px;bottom:190px;color:#d54e21;font-size:18px;text-align:right;z-index:-1}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:200px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease}.expand-list.open{max-height:500px;opacity:1}.expand-list li{padding:20px;border-bottom:1px solid #d54e21;transition:background-color .3s}.expand-list li:last-child{border-bottom:none}.expand-list li.active{color:#d54e21}.expand-list li:hover{background-color:#d54e21;color:#fff}</style>
|
|
|
|
|
|
|
|
<style>.star-rating{direction:rtl;display:inline-block}.star-rating input[type=radio]{display:none}.star-rating label{font-size:30px;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:15px;vertical-align:middle;color:#d54e21}</style>
|
|
|
|
<script src="./utils.js"></script>
|
|
|
|
<script src="./utils.js"></script>
|
|
|
|
<script src="./vue@2.js"></script>
|
|
|
|
<script src="./vue@2.js"></script>
|
|
|
|
<script src="./signature_pad.umd.min.js"></script>
|
|
|
|
<script src="./signature_pad.umd.min.js"></script>
|
|
|
|
@ -522,13 +19,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<body>
|
|
|
|
<div id="app">
|
|
|
|
<div id="app">
|
|
|
|
<!-- <div id="header">
|
|
|
|
|
|
|
|
<div id="mainnav" class="nav navbar navbar-inverse">
|
|
|
|
|
|
|
|
<div class="col-lg-3 col-sm-4 logobox"> <a href="//www.chinahighlights.com/"> <img src="https://www.chinahighlights.com/pic/logo/logo-132x104.png" alt="china highlights" class="img-responsive"> </a> </div>
|
|
|
|
|
|
|
|
<h1>Post Survey - Albee221228017</h1>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
<!-- <img src="https://www.chinahighlights.com/pic/logo/logo-132x104.png" alt="Logo" class="logo"> -->
|
|
|
|
|
|
|
|
<div class="header-pc">
|
|
|
|
<div class="header-pc">
|
|
|
|
<a href="https://www.asiahighlights.com/" v-if="webcode=='ah'">
|
|
|
|
<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">
|
|
|
|
<img src="https://data.asiahighlights.com/pic/logo-ah.png" alt="Logo" width="130" height="104">
|
|
|
|
@ -638,7 +128,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
<span id="currentCity" class="float-text" v-show="!cityListOpen">{{group.cityName}}</span>
|
|
|
|
<span id="currentCity" class="float-text" v-show="!cityListOpen">{{group.cityName}}</span>
|
|
|
|
<button class="float-button" v-on:click="toggleCityList">≡</button>
|
|
|
|
<button class="float-button" v-on:click="toggleCityList">≡</button>
|
|
|
|
<!-- onclick="toggleCityList()" -->
|
|
|
|
|
|
|
|
<ul v-bind:class="['expand-list', cityListOpen ? 'open' : '']">
|
|
|
|
<ul v-bind:class="['expand-list', cityListOpen ? 'open' : '']">
|
|
|
|
<li v-for="city in cityList" v-bind:key="city.cii_sn" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn}">{{city.cityName}}</li>
|
|
|
|
<li v-for="city in cityList" v-bind:key="city.cii_sn" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn}">{{city.cityName}}</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
|
Lei OT
2 years ago