978 lines
27 KiB
Vue
978 lines
27 KiB
Vue
<template>
|
|
<div class="feedbackSurvey" :class="{'active': forbid}">
|
|
<main id="main">
|
|
<h1 id="title">AiDA Feedback Survey</h1>
|
|
<p id="description" v-if="!forbid">Please take the survey</p>
|
|
<div id="survey-form" :class="{'active': !forbid}">
|
|
<h2 class="section-title">Personal Information</h2>
|
|
<div class="section w40">
|
|
<label for="name"
|
|
>Name:<span class="fontColor">*</span></label
|
|
>
|
|
<input
|
|
:readonly="forbid"
|
|
type="text"
|
|
v-model="userName"
|
|
placeholder="Enter your name"
|
|
/>
|
|
</div>
|
|
<div class="section w40">
|
|
<label for="gender"
|
|
>Gender:<span class="fontColor">*</span></label
|
|
>
|
|
<select :disabled="forbid" name="dropdown" id="dropdown" v-model="gender">
|
|
<option selected value='Female'>Female</option>
|
|
<option value='Male'>Male</option>
|
|
</select>
|
|
<!-- <input
|
|
type="text"
|
|
v-model="gender"
|
|
placeholder="Enter your gender"
|
|
required
|
|
/> -->
|
|
</div>
|
|
<div class="section w40">
|
|
<label for="occupation"
|
|
>Occupation:<span class="fontColor">*</span></label
|
|
>
|
|
|
|
<input
|
|
type="text"
|
|
:readonly="forbid"
|
|
v-model="occupation"
|
|
placeholder="Enter your occupation"
|
|
required
|
|
/>
|
|
</div>
|
|
<!-- <div class="section w40">
|
|
<label for="country"
|
|
>Country of Origin:<span class="fontColor" >*</span
|
|
></label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="country"
|
|
name="country"
|
|
placeholder="Enter your country of origin"
|
|
required
|
|
/>
|
|
</div> -->
|
|
<div class="section w40">
|
|
<label for="dropdown">Country of Origin:<span class="fontColor" >*</span></label>
|
|
<select :disabled="forbid" name="dropdown" id="dropdown" v-model="country" required>
|
|
<option disabled selected value> Select an option </option>
|
|
<option v-for="item in CountryList" :key="item" :value="item">{{ item }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="section">
|
|
<label for="email"
|
|
>Email:<span class="fontColor">*</span></label
|
|
>
|
|
<input
|
|
type="email"
|
|
:readonly="forbid"
|
|
v-model="email"
|
|
placeholder="Enter your email"
|
|
required
|
|
/>
|
|
</div>
|
|
<div class="section">
|
|
<p>Age Group:<span class="fontColor">*</span></p>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="radio"
|
|
value="below20"
|
|
name="age"
|
|
v-model="age"
|
|
|
|
/>
|
|
Below 20
|
|
</label>
|
|
<label>
|
|
<input :disabled="forbid" checked type="radio" value="20-30" v-model="age" name="age" />
|
|
20-30
|
|
</label>
|
|
<label>
|
|
<input :disabled="forbid" type="radio" value="30-40" v-model="age" name="age" />
|
|
30-40
|
|
</label>
|
|
<label>
|
|
<input :disabled="forbid" type="radio" value="40+" v-model="age" name="age" />
|
|
40+
|
|
</label>
|
|
</div>
|
|
<h2 class="section-title">Survey Questions</h2>
|
|
|
|
<!-- <div class="section">
|
|
<p>Do you like this survey?</p>
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
value="yes"
|
|
name="radio-question"
|
|
checked
|
|
/>
|
|
Yes
|
|
</label>
|
|
<label>
|
|
<input type="radio" value="no" name="radio-question" />
|
|
No
|
|
</label>
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
value="maybe"
|
|
name="radio-question"
|
|
/>
|
|
Maybe
|
|
</label>
|
|
</div> -->
|
|
<div class="section">
|
|
<p>
|
|
1. How has AiDA been helpful to you? (You can choose
|
|
more than one answer):<span class="fontColor">*</span>
|
|
</p>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="1"
|
|
v-model="helpful"
|
|
/>
|
|
Easy to learn and use
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="2"
|
|
v-model="helpful"
|
|
/>
|
|
Easy to get trend information
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="3"
|
|
v-model="helpful"
|
|
/>
|
|
Lots of creative design proposals
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="4"
|
|
v-model="helpful"
|
|
/>
|
|
The AIGC functions for moodboard is helpful
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="5"
|
|
v-model="helpful"
|
|
/>
|
|
The AIGC functions for design sketches is helpful
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="6"
|
|
v-model="helpful"
|
|
/>
|
|
Easy to select the right color
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="7"
|
|
v-model="helpful"
|
|
/>
|
|
The Chatbot function is helpful
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="8"
|
|
v-model="helpful"
|
|
/>
|
|
The print position function is helpful
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="9"
|
|
v-model="helpful"
|
|
/>
|
|
The drawing function is helpful
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="10"
|
|
v-model="helpful"
|
|
/>
|
|
The export function is useful
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="11"
|
|
v-model="helpful"
|
|
/>
|
|
Easy to edit the design
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
class="marTop1"
|
|
ref="helpfulOthers"
|
|
/>
|
|
<span> Others:</span>
|
|
<textarea
|
|
:readonly="forbid"
|
|
name="comments"
|
|
id="text-area"
|
|
placeholder="Please enter..."
|
|
v-model="othersHelpful"
|
|
@input="()=>helpfulOthers.checked = true"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
<div class="section">
|
|
<p>
|
|
2. What do you think AiDA should improve? (you could choose
|
|
more than one answer):<span class="fontColor">*</span>
|
|
</p>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="1"
|
|
v-model="improve"
|
|
/>
|
|
Proposed designs are boring, need more interesting
|
|
designs
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="2"
|
|
v-model="improve"
|
|
/>
|
|
Difficult to make changes on design
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="3"
|
|
v-model="improve"
|
|
/>
|
|
Only 2D output, no 3D results
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="4"
|
|
v-model="improve"
|
|
/>
|
|
Difficult to apply keywords for AIGC generation
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="5"
|
|
v-model="improve"
|
|
/>
|
|
Clothing is not in the right proportion
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="6"
|
|
v-model="improve"
|
|
/>
|
|
Not compatible with pattern making solutions
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="7"
|
|
v-model="improve"
|
|
/>
|
|
Improved user interface for better navigation
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="8"
|
|
v-model="improve"
|
|
/>
|
|
Lack of responsive customer support
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="9"
|
|
v-model="improve"
|
|
/>
|
|
Insufficient tutorial or guidance for new users
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
value="10"
|
|
v-model="improve"
|
|
/>
|
|
Limited personalization options for designs
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="checkbox-question"
|
|
class="marTop1"
|
|
ref="improvelOthers"
|
|
/>
|
|
<span> Others:</span>
|
|
<!-- <input
|
|
class="others-input"
|
|
type="text"
|
|
/> -->
|
|
<textarea
|
|
:readonly="forbid"
|
|
name="comments"
|
|
id="text-area"
|
|
v-model="othersImprovel"
|
|
placeholder="Please enter..."
|
|
@input="()=>improvelOthers.checked = true"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
<div class="section">
|
|
<p>3. Will you subscribe to AiDA?<span class="fontColor">*</span></p>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="radio"
|
|
value="yes"
|
|
v-model="isSubscribe"
|
|
name="radio-question"
|
|
/>
|
|
Yes
|
|
</label>
|
|
<label>
|
|
<input :disabled="forbid" v-model="isSubscribe" type="radio" value="no" name="radio-question" />
|
|
No
|
|
</label>
|
|
</div>
|
|
<div class="section" v-show="isSubscribe == 'no'">
|
|
<p>If NO, please share why:<span class="fontColor">*</span></p>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
value="Not useful"
|
|
name="reasonForNotSubscribe"
|
|
v-model="reasonForNotSubscribe"
|
|
/>
|
|
Not useful
|
|
</label>
|
|
<label>
|
|
<input :disabled="forbid" type="checkbox" value="Too expensive" v-model="reasonForNotSubscribe" name="reasonForNotSubscribe" />
|
|
Too expensive
|
|
</label>
|
|
<label>
|
|
<input
|
|
:disabled="forbid"
|
|
type="checkbox"
|
|
name="reasonForNotSubscribe"
|
|
ref="isSubscribeCauseOthers"
|
|
class="marTop1"
|
|
/>
|
|
<span> Others:</span>
|
|
<textarea
|
|
:readonly="forbid"
|
|
name="comments"
|
|
id="text-area"
|
|
v-model="othersIsSubscribeCause"
|
|
placeholder="Please enter..."
|
|
@input="()=>isSubscribeCauseOthers.checked = true"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
<div class="section">
|
|
<p>
|
|
Are you currently using any design tools? Please
|
|
list:
|
|
</p>
|
|
<textarea
|
|
:readonly="forbid"
|
|
name="comments"
|
|
id="text-area"
|
|
v-model="designTools"
|
|
placeholder="Please enter..."
|
|
></textarea>
|
|
</div>
|
|
<div v-if="!forbid" class="section">
|
|
<button id="submit" @click="setSubmit">Submit</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
|
import { Modal,message } from 'ant-design-vue';
|
|
import { Https } from "@/tool/https";
|
|
import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
|
|
export default defineComponent({
|
|
setup() {
|
|
let feedbackData:any = reactive({
|
|
userName:'',
|
|
gender:'Female',
|
|
occupation:'',
|
|
country:'',
|
|
email:'',
|
|
age:'20-30',
|
|
helpful:[],
|
|
improve:[],
|
|
isSubscribe:'',
|
|
reasonForNotSubscribe:[],
|
|
designTools:'',
|
|
});
|
|
let refList:any = reactive({
|
|
helpfulOthers:{},
|
|
improvelOthers:{},
|
|
isSubscribeCauseOthers:{},
|
|
})
|
|
let othersHelpful = ref('')
|
|
let othersImprovel = ref('')
|
|
let othersIsSubscribeCause = ref()
|
|
let CountryList = [
|
|
"Albania",
|
|
"Algeria",
|
|
"Andorra",
|
|
"Angola",
|
|
"Antigua and Barbuda",
|
|
"Argentina",
|
|
"Armenia",
|
|
"Australia",
|
|
"Austria",
|
|
"Azerbaijan",
|
|
"Bahamas",
|
|
"Bangladesh",
|
|
"Barbados",
|
|
"Belgium",
|
|
"Belize",
|
|
"Benin",
|
|
"Bhutan",
|
|
"Bolivia",
|
|
"Bosnia and Herzegovina",
|
|
"Botswana",
|
|
"Brazil",
|
|
"Brunei",
|
|
"Bulgaria",
|
|
"Burkina Faso",
|
|
"Cabo Verde",
|
|
"Canada",
|
|
"China",
|
|
"Chile",
|
|
"Colombia",
|
|
"Comoros",
|
|
"Congo",
|
|
"Costa Rica",
|
|
"Côte d'Ivoire",
|
|
"Croatia",
|
|
"Cyprus",
|
|
"Czech Republic",
|
|
"Denmark",
|
|
"Djibouti",
|
|
"Dominica",
|
|
"Dominican Republic",
|
|
"Ecuador",
|
|
"El Salvador",
|
|
"Estonia",
|
|
"Fiji",
|
|
"Finland",
|
|
"France",
|
|
"Gabon",
|
|
"Gambia",
|
|
"Georgia",
|
|
"Germany",
|
|
"Ghana",
|
|
"Greece",
|
|
"Grenada",
|
|
"Guatemala",
|
|
"Guinea",
|
|
"Guinea-Bissau",
|
|
"Guyana",
|
|
"Haiti",
|
|
"Holy See",
|
|
"Honduras",
|
|
"Hong Kong, China",
|
|
"Hungary",
|
|
"Iceland",
|
|
"India",
|
|
"Indonesia",
|
|
"Iraq",
|
|
"Ireland",
|
|
"Israel",
|
|
"Italy",
|
|
"Jamaica",
|
|
"Japan",
|
|
"Jordan",
|
|
"Kazakhstan",
|
|
"Kenya",
|
|
"Kiribati",
|
|
"Kuwait",
|
|
"Kyrgyzstan",
|
|
"Latvia",
|
|
"Lebanon",
|
|
"Lesotho",
|
|
"Liberia",
|
|
"Liechtenstein",
|
|
"Lithuania",
|
|
"Luxembourg",
|
|
"Madagascar",
|
|
"Malawi",
|
|
"Malaysia",
|
|
"Maldives",
|
|
"Mali",
|
|
"Malta",
|
|
"Marshall Islands",
|
|
"Mauritania",
|
|
"Mauritius",
|
|
"Mexico",
|
|
"Micronesia",
|
|
"Moldova",
|
|
"Monaco",
|
|
"Mongolia",
|
|
"Montenegro",
|
|
"Morocco",
|
|
"Mozambique",
|
|
"Myanmar",
|
|
"Namibia",
|
|
"Nauru",
|
|
"Nepal",
|
|
"Netherlands",
|
|
"New Zealand",
|
|
"Nicaragua",
|
|
"Niger",
|
|
"Nigeria",
|
|
"North Macedonia",
|
|
"Norway",
|
|
"Oman",
|
|
"Pakistan",
|
|
"Palau",
|
|
"Palestine",
|
|
"Panama",
|
|
"Papua New Guinea",
|
|
"Paraguay",
|
|
"Peru",
|
|
"Philippines",
|
|
"Poland",
|
|
"Portugal",
|
|
"Qatar",
|
|
"Romania",
|
|
"Rwanda",
|
|
"Saint Kitts and Nevis",
|
|
"Saint Lucia",
|
|
"Saint Vincent and the Grenadines",
|
|
"Samoa",
|
|
"San Marino",
|
|
"Sao Tome and Principe",
|
|
"Senegal",
|
|
"Serbia",
|
|
"Seychelles",
|
|
"Sierra Leone",
|
|
"Singapore",
|
|
"Slovakia",
|
|
"Slovenia",
|
|
"Solomon Islands",
|
|
"South Africa",
|
|
"South Korea",
|
|
"Spain",
|
|
"Sri Lanka",
|
|
"Suriname",
|
|
"Sweden",
|
|
"Switzerland",
|
|
"Taiwan, China",
|
|
"Tanzania",
|
|
"Thailand",
|
|
"Timor-Leste",
|
|
"Togo",
|
|
"Tonga",
|
|
"Trinidad and Tobago",
|
|
"Tunisia",
|
|
"Turkey",
|
|
"Tuvalu",
|
|
"Uganda",
|
|
"Ukraine",
|
|
"United Arab Emirates",
|
|
"United Kingdom",
|
|
"United States of America",
|
|
"Uruguay",
|
|
"Vanuatu",
|
|
"Zambia"
|
|
]
|
|
let setSubmit = () => {
|
|
let state = false
|
|
let skipList = ['designTools','reasonForNotSubscribe']
|
|
let data = JSON.parse(JSON.stringify(feedbackData))
|
|
if(refList.helpfulOthers.checked && othersHelpful.value){
|
|
data.helpful.push(othersHelpful.value)
|
|
}
|
|
if(refList.improvelOthers.checked && othersImprovel.value){
|
|
data.improve.push(othersImprovel.value)
|
|
}
|
|
if(refList.isSubscribeCauseOthers.checked && othersIsSubscribeCause.value){
|
|
data.reasonForNotSubscribe.push(othersIsSubscribeCause.value)
|
|
}
|
|
for (const key in data) {
|
|
if(skipList.indexOf(key) > -1){
|
|
continue
|
|
}
|
|
let keyList = ['helpful','improve']
|
|
if(keyList.indexOf(key) > -1){
|
|
if(data[key].length == 0){
|
|
state = true
|
|
break
|
|
}
|
|
}else if(data.isSubscribe == 'no' && data.reasonForNotSubscribe.length == 0){
|
|
state = true
|
|
break
|
|
}else{
|
|
if(data[key] == ''){
|
|
state = true
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
if(state){
|
|
message.info('Please check that all the * numbers have been filled in')
|
|
return
|
|
}
|
|
Modal.confirm({
|
|
title: `Please confirm your email address to ensure it is correct. ${data.email}`,
|
|
icon: createVNode(ExclamationCircleOutlined),
|
|
okText: 'Yes',
|
|
cancelText: 'No',
|
|
mask:false,
|
|
centered:true,
|
|
onOk() {
|
|
data.language = 'EN'
|
|
submit(JSON.stringify(data))
|
|
}
|
|
});
|
|
};
|
|
let submit = (value:any)=>{
|
|
Https.axiosPost(Https.httpUrls.questionnaire, value).then(
|
|
(rv) => {
|
|
alert('Submit Successfully!')
|
|
}
|
|
).catch(res=>{
|
|
});
|
|
}
|
|
let forbid = ref(false)
|
|
let initData = (data:any) => {
|
|
// Object.assign(feedbackData,data)
|
|
// console.log(JSON.parse(JSON.stringify(feedbackData)));
|
|
forbid.value = true
|
|
for (const iterator in data) {
|
|
if(typeof data[iterator] == 'object'){
|
|
feedbackData[iterator] = []
|
|
data[iterator].forEach((item:any)=>{
|
|
if(item*1){
|
|
feedbackData[iterator].push(item)
|
|
}else{
|
|
if(iterator == 'helpful'){
|
|
refList.helpfulOthers.checked = true
|
|
othersHelpful.value = item
|
|
}else if(iterator == 'improve'){
|
|
refList.improvelOthers.checked = true
|
|
othersImprovel.value = item
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
feedbackData[iterator] = data[iterator]
|
|
}
|
|
}
|
|
if(data.othersIsSubscribeCause){
|
|
refList.isSubscribeCauseOthers.checked = true
|
|
let arr = []
|
|
data.reasonForNotSubscribe.forEach((item:any,index:number) => {
|
|
if(index <= 1){
|
|
arr.push(item)
|
|
}
|
|
});
|
|
othersIsSubscribeCause.value = data.othersIsSubscribeCause[2]
|
|
}
|
|
// feedbackData = reactive(...data)
|
|
}
|
|
return {
|
|
...toRefs(feedbackData),
|
|
...toRefs(refList),
|
|
othersHelpful,
|
|
othersImprovel,
|
|
othersIsSubscribeCause,
|
|
CountryList,
|
|
setSubmit,
|
|
forbid,
|
|
initData,
|
|
};
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
// moodTemplateId: "", //模板id
|
|
};
|
|
},
|
|
mounted() {},
|
|
methods: {},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");
|
|
.feedbackSurvey {
|
|
font-family: "Quicksand", sans-serif;
|
|
font-family: 'Roboto', sans-serif;
|
|
text-align: center;
|
|
line-height: 1.5;
|
|
// background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
|
|
margin: 1rem;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding-bottom: 2rem;
|
|
&.active{
|
|
#title {
|
|
font-size: 3rem;
|
|
}
|
|
#description {
|
|
font-size: 1.4rem;
|
|
}
|
|
#survey-form {
|
|
width: 90%;
|
|
padding: 1.5rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
p{
|
|
font-size: 1.4rem;
|
|
}
|
|
input,
|
|
#dropdown {
|
|
padding: 5px;
|
|
}
|
|
|
|
textarea {
|
|
max-height: 125px;
|
|
padding: 5px;
|
|
}
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
input,select{
|
|
height: 3.5rem;
|
|
}
|
|
}
|
|
#main{
|
|
background: linear-gradient(45deg, #eee4f3, #f3f4e6);
|
|
padding: 2rem;
|
|
}
|
|
#title {
|
|
font-size: 6rem;
|
|
margin: 0;
|
|
font-weight: 900;
|
|
}
|
|
|
|
#description {
|
|
font-size: 2.8rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
#survey-form {
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 60%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: left;
|
|
border-radius: 15px;
|
|
padding: 3rem;
|
|
box-shadow: -1px 1px 5px 0.5px;
|
|
font-size: 2.4rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
&.active{
|
|
transition: width 1s ease;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
form {
|
|
width: 75%;
|
|
}
|
|
}
|
|
h2 {
|
|
width: 100%;
|
|
font-weight: 900;
|
|
}
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 1rem;
|
|
width: 100%;
|
|
}
|
|
.section:last-child{
|
|
margin-bottom: 4rem;
|
|
}
|
|
.w40 {
|
|
width: 40%;
|
|
}
|
|
.fontColor{
|
|
color: rgb(255, 2, 2);
|
|
}
|
|
p{
|
|
font-size: 2.8rem;
|
|
}
|
|
p,
|
|
label {
|
|
font-weight: bold;
|
|
margin: 0;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
input,
|
|
#dropdown {
|
|
border: none;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
outline: 0;
|
|
}
|
|
|
|
input:focus,
|
|
#dropdown:focus {
|
|
border: 2px solid rgb(173, 173, 173);
|
|
}
|
|
input,select{
|
|
height: 7rem;
|
|
}
|
|
input,
|
|
button,
|
|
select,
|
|
textarea {
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
display: inline-block;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
vertical-align: middle;
|
|
margin: 0;
|
|
}
|
|
label{
|
|
vertical-align: baseline;
|
|
cursor: pointer;
|
|
.others-input{
|
|
background: rgba(255, 255, 255, 0);
|
|
border-top: none;
|
|
border-right: none;
|
|
border-left: none;
|
|
border-radius: 0;
|
|
border-bottom: 2px solid;
|
|
}
|
|
.others-input:focus{
|
|
border: none;
|
|
border-bottom: 2px solid;
|
|
}
|
|
span{
|
|
vertical-align: top;
|
|
}
|
|
textarea{
|
|
width: 80%;
|
|
vertical-align: top;
|
|
margin-left: 1rem;
|
|
|
|
}
|
|
}
|
|
textarea {
|
|
min-height: 75%;
|
|
max-height: 250px;
|
|
width: 100%;
|
|
resize: vertical;
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#submit {
|
|
background: green;
|
|
background: #000;
|
|
|
|
border: none;
|
|
border-radius: 10px;
|
|
color: white;
|
|
font-size: 3rem;
|
|
transition: all 0.3s ease-in;
|
|
}
|
|
|
|
#submit:hover {
|
|
background: darkgreen;
|
|
background: #543087;
|
|
}
|
|
}
|
|
</style> |