You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
945 lines
26 KiB
945 lines
26 KiB
<template>
|
|
<div class="white-bkg">
|
|
<header>
|
|
<div class="header__col">
|
|
<button class="btn btn--primary" @click="goBack">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-chevrons-left"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<polyline points="11 7 6 12 11 17" />
|
|
<polyline points="17 7 12 12 17 17" />
|
|
</svg>
|
|
back
|
|
</button>
|
|
</div>
|
|
<div class="header__col">
|
|
<Logo />
|
|
</div>
|
|
<div class="header__col" />
|
|
</header>
|
|
<main class="main-with-header">
|
|
<ChosenFlights
|
|
:selected-orig="selectedOrig"
|
|
:selected-dest="selectedDest"
|
|
:departure="formattedDate($route.params.departure)"
|
|
:departure-time="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Departure_TimeL
|
|
"
|
|
style="margin: 0 1rem;"
|
|
/>
|
|
<div class="schedule-wrapper">
|
|
<ul class="schedule-grid">
|
|
<li
|
|
v-for="schedule in schedules"
|
|
:key="schedule.fields.Record_ID"
|
|
:class="[
|
|
'grid__row',
|
|
{ grid__row: selectedSchedule.id == schedule.id },
|
|
]"
|
|
>
|
|
<div class="row__check">
|
|
<label class="radio radio--sched" :for="schedule.id">
|
|
<input :id="schedule.id" type="radio" name="schedules" />
|
|
<span @click="selectSchedule(schedule)">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-check"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="3"
|
|
stroke="#ffffff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M5 12l5 5l10 -10" />
|
|
</svg>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
<div class="row__dep">
|
|
<label class="text--muni">
|
|
{{ selectedOrig.municipality }}
|
|
</label>
|
|
<h1 class="text--time">
|
|
{{ schedule.fields.Departure_TimeL }}
|
|
</h1>
|
|
</div>
|
|
<div class="row__trip">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-arrow-right-circle"
|
|
width="100"
|
|
height="100"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path d="M18 15l3 -3l-3 -3" />
|
|
<circle cx="5" cy="12" r="2" />
|
|
<path d="M7 12h14" />
|
|
</svg>
|
|
</div>
|
|
<div class="row__arr">
|
|
<label class="text--muni">
|
|
{{ selectedDest.municipality }}
|
|
</label>
|
|
<h1 class="text--time">
|
|
{{ schedule.fields.Arrival_TimeL }}
|
|
</h1>
|
|
</div>
|
|
<div class="row__info">
|
|
<h2 class="text--carrier">
|
|
{{ schedule.fields.Carrier_Name }}
|
|
</h2>
|
|
<span
|
|
v-if="schedule.fields.Flight_Number"
|
|
class="text--flight-num"
|
|
>
|
|
Flight No. {{ schedule.fields.Flight_Number }}
|
|
</span>
|
|
<span class="text--dow">
|
|
{{ schedule.fields.Frequency_Convert }}
|
|
</span>
|
|
<span class="badge--avail">
|
|
Available until
|
|
<strong>{{
|
|
formattedDate(schedule.fields.Effective_End)
|
|
}}</strong>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
:class="[
|
|
'flyout-container',
|
|
{ 'flyout-container--hide': !selectedSchedule.id },
|
|
{ 'flyout-container--show': selectedSchedule.id },
|
|
]"
|
|
>
|
|
<div class="flyout">
|
|
<button
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.IsExpedia &&
|
|
selectedSchedule.fields.IsExpedia[0] !== 'true' &&
|
|
selectedSchedule.fields.Carrier_Name !==
|
|
'Copper Valley Air Service'
|
|
"
|
|
class="btn btn--primary"
|
|
@click="goToCarrier"
|
|
>
|
|
see flights
|
|
</button>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.IsExpedia &&
|
|
(selectedSchedule.fields.IsExpedia[0] === 'true' ||
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service')
|
|
"
|
|
class="form-row"
|
|
>
|
|
<label for="">How Many Adults?</label>
|
|
<v-select
|
|
v-model="numAdult"
|
|
:options="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.IsExpedia &&
|
|
(selectedSchedule.fields.IsExpedia[0] === 'true' ||
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service')
|
|
"
|
|
class="form-row"
|
|
>
|
|
<label for="">How Many Children?</label>
|
|
<v-select
|
|
v-model="numChild"
|
|
:options="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service'
|
|
"
|
|
class="alert--flights"
|
|
>
|
|
<h3>
|
|
You'll be flying with<br>
|
|
<strong>Copper Valley Air Service</strong>,<br>a great local
|
|
airline!
|
|
</h3>
|
|
<!-- <p>
|
|
Copper Valley is a small, family run airline that not only
|
|
provides bi-weekly air-taxi flights, but also mail delivery,
|
|
sight-seeing, and adventure flights to remote areas of Alaska.
|
|
</p> -->
|
|
<p>
|
|
To book with Copper Valley, enter your contact info below and they
|
|
will contact you directly to finish your booking.
|
|
</p>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service'
|
|
"
|
|
class="form-row form-row--two-columns"
|
|
>
|
|
<input
|
|
type="text"
|
|
name="firstName"
|
|
placeholder="first name"
|
|
v-model="firstName"
|
|
:class="[{'input--error': firstNameTouched && !firstName}]"
|
|
@focus="firstNameTouched = true"
|
|
/>
|
|
<input
|
|
type="text"
|
|
name="lastName"
|
|
placeholder="last name"
|
|
v-model="lastName"
|
|
:class="[{'input--error': lastNameTouched && !lastName}]"
|
|
@focus="lastNameTouched = true"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service'
|
|
"
|
|
class="form-row"
|
|
>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="email address"
|
|
v-model="email"
|
|
required
|
|
@input="validateEmail"
|
|
:class="[{'input--error': emailError}]"
|
|
/>
|
|
<span class="alert--error">
|
|
{{ emailError }}
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service'
|
|
"
|
|
class="form-row"
|
|
>
|
|
<VuePhoneNumberInput
|
|
v-model="phone"
|
|
required
|
|
@update="validatePhone"
|
|
show-code-on-list
|
|
@phone-number-focused="phoneTouched = true" />
|
|
<!-- <input
|
|
type="tel"
|
|
name="tel"
|
|
placeholder="phone number"
|
|
v-model="phone"
|
|
required
|
|
@blur="validatePhone"
|
|
/> -->
|
|
<span v-if="phoneTouched" class="alert--error">
|
|
{{ phoneError }}
|
|
</span>
|
|
</div>
|
|
<button
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.IsExpedia &&
|
|
selectedSchedule.fields.IsExpedia[0] === 'true'
|
|
"
|
|
class="btn btn--primary"
|
|
@click="book"
|
|
>
|
|
book now!
|
|
</button>
|
|
<button
|
|
v-if="
|
|
selectedSchedule &&
|
|
selectedSchedule.fields &&
|
|
selectedSchedule.fields.Carrier_Name ===
|
|
'Copper Valley Air Service'
|
|
"
|
|
:disabled="(emailError + phoneError).length > 0 || !firstName || !lastName"
|
|
class="btn btn--primary"
|
|
@click="contactCarrier"
|
|
>
|
|
contact carrier <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-send" width="24" height="24" viewBox="0 0 24 24" stroke-width="3" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
|
|
<line x1="10" y1="14" x2="21" y2="3" />
|
|
<path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" />
|
|
</svg>
|
|
</button>
|
|
<div v-if="mailSent" class="alert--sent">
|
|
Thanks! You will be contacted shortly.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
schedules: [],
|
|
startingDate: '',
|
|
selectedSchedule: {},
|
|
selectedDays: [],
|
|
selectedOrig: {},
|
|
selectedDest: {},
|
|
numAdult: 1,
|
|
numChild: 0,
|
|
firstName: '',
|
|
lastName: '',
|
|
email: '',
|
|
phone: '',
|
|
firstNameTouched: false,
|
|
lastNameTouched: false,
|
|
emailTouched: false,
|
|
phoneTouched: false,
|
|
emailError: '',
|
|
phoneError: '',
|
|
mailSent: false
|
|
}
|
|
},
|
|
async fetch () {
|
|
// console.log(this.$route.params.o)
|
|
|
|
const today = new Date().toLocaleDateString('en-CA')
|
|
|
|
const scheduleFetchFilterFormula = `AND(Is_Current="Yes",Origin_IATA="${this.$route.params.o}",Destination_IATA="${this.$route.params.d}",Effective_End>"${today}",SEARCH("${new Date(this.$route.params.departure).getUTCDay()}",Frequency)>0)`
|
|
// console.log(scheduleFetchFilterFormula)
|
|
const scheduleFetchSort = '&sort[0][field]=Departure_TimeL&sort[0][direction]=asc'
|
|
|
|
const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Schedule?filterByFormula=${scheduleFetchFilterFormula}${scheduleFetchSort}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer keyJ2ht64ZSN57AG1'
|
|
}
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
// console.log(data)
|
|
|
|
this.schedules = [...data.records]
|
|
},
|
|
created () {
|
|
// console.log(this.$route.path)
|
|
|
|
if (this.$route && this.$route.params && this.$route.params.o) {
|
|
this.fetchSingleAirport(this.$route.params.o, true)
|
|
}
|
|
if (this.$route && this.$route.params && this.$route.params.d) {
|
|
this.fetchSingleAirport(this.$route.params.d, false)
|
|
}
|
|
},
|
|
methods: {
|
|
formattedDate (date) {
|
|
const thisDate = new Date(date)
|
|
const month = thisDate.toLocaleString('en-us', { month: 'short' })
|
|
const year = ((thisDate.getUTCFullYear() !== new Date().getUTCFullYear()) ? ', ' + thisDate.getUTCFullYear() : '')
|
|
return month + ' ' + thisDate.getUTCDate() + year
|
|
},
|
|
daysList (days) {
|
|
const list = days.split(', ').map((day) => {
|
|
const name = day.toLowerCase().slice(0, -1)
|
|
|
|
let num
|
|
switch (name) {
|
|
case 'su':
|
|
num = 0
|
|
break
|
|
|
|
case 'mo':
|
|
num = 1
|
|
break
|
|
|
|
case 'tu':
|
|
num = 2
|
|
break
|
|
|
|
case 'we':
|
|
num = 3
|
|
break
|
|
|
|
case 'th':
|
|
num = 4
|
|
break
|
|
|
|
case 'fr':
|
|
num = 5
|
|
break
|
|
|
|
case 'sa':
|
|
num = 6
|
|
break
|
|
|
|
default:
|
|
break
|
|
}
|
|
return {
|
|
name,
|
|
num
|
|
}
|
|
})
|
|
|
|
return list.sort(function (a, b) {
|
|
return a.num - b.num
|
|
})
|
|
},
|
|
goBack () {
|
|
this.$segment.track('flights__go_back', {
|
|
origin: this.$route.params.o,
|
|
destination: this.$route.params.d,
|
|
departureDate: this.$route.params.departure,
|
|
})
|
|
//this.$router.go(-1)
|
|
this.$router.push({
|
|
path: '/dates/' + this.$route.params.o + "/" + this.$route.params.d
|
|
})
|
|
},
|
|
// book2 (schedule) {
|
|
// if (schedule.fields.IsExpedia[0] === 'true') {
|
|
// this.startingDate = new Date()
|
|
// this.selectedSchedule = schedule.fields
|
|
// this.selectedDays = this.daysList(schedule.fields.Frequency_Convert)
|
|
// } else {
|
|
// window.open(schedule.fields['BookingLink (from Carriers_Alaska)'][0])
|
|
// }
|
|
// },
|
|
book () {
|
|
this.$segment.track('flights__book', {
|
|
origin: this.selectedSchedule.fields.Origin_IATA[0],
|
|
destination: this.selectedSchedule.fields.Destination_IATA[0],
|
|
departureDate: this.$route.params.departure,
|
|
departureTime: this.selectedSchedule.fields.Departure_TimeL,
|
|
arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
|
|
numAdult: this.numAdult,
|
|
numChild: this.numChild,
|
|
carrier: this.selectedSchedule.fields.Carrier_Name
|
|
})
|
|
|
|
window.open(`https://www.anrdoezrs.net/links/100449149/type/am/https://www.expedia.com/go/flight/search/oneway/${this.$route.params.departure}/${this.$route.params.departure}?langid=1033&FromAirport=${this.selectedSchedule.fields.Origin_IATA}&FromTime=${this.selectedSchedule.fields.Departure_TimeL}&ToTime=${this.selectedSchedule.fields.Arrival_TimeL}&ToAirport=${this.selectedSchedule.fields.Destination_IATA}&Class=3&NumAdult=${this.numAdult}&NumChild=${this.numChild}`)
|
|
},
|
|
goToCarrier () {
|
|
this.$segment.track('flights__open_carrier', {
|
|
origin: this.selectedSchedule.fields.Origin_IATA[0],
|
|
destination: this.selectedSchedule.fields.Destination_IATA[0],
|
|
departureDate: this.$route.params.departure,
|
|
departureTime: this.selectedSchedule.fields.Departure_TimeL,
|
|
arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
|
|
numAdult: this.numAdult,
|
|
numChild: this.numChild,
|
|
carrier: this.selectedSchedule.fields.Carrier_Name
|
|
})
|
|
|
|
window.open(this.selectedSchedule.fields['BookingLink (from Carriers_Alaska)'][0])
|
|
},
|
|
async contactCarrier () {
|
|
const newBooking =
|
|
{
|
|
fields: {
|
|
ArrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
|
|
Carrier: this.selectedSchedule.fields.Carrier_Name,
|
|
DepartureTime: this.selectedSchedule.fields.Departure_TimeL,
|
|
Destination: this.selectedSchedule.fields.Destination_IATA[0],
|
|
Origin: this.selectedSchedule.fields.Origin_IATA[0],
|
|
CreatedDate: new Date(),
|
|
FirstName: this.firstName,
|
|
LastName: this.lastName,
|
|
Phone: this.phone,
|
|
Email: this.email,
|
|
DepartureDate: this.$route.params.departure,
|
|
NumAdult: this.numAdult,
|
|
NumChild: this.numChild,
|
|
}
|
|
}
|
|
|
|
const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/CVAS_Booking/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: 'Bearer key8ZVBxVZJL2Wp7y'
|
|
},
|
|
body: JSON.stringify(newBooking)
|
|
})
|
|
|
|
const json = await res.json()
|
|
//this.guests = { ...await json }
|
|
if(await json) {
|
|
this.mailSent = true
|
|
this.firstName = ''
|
|
this.lastName = ''
|
|
this.email = ''
|
|
this.phone = ''
|
|
this.firstNameTouched = false
|
|
this.lastNameTouched = false
|
|
this.emailTouched = false
|
|
this.phoneTouched = false
|
|
}
|
|
},
|
|
selectSchedule (schedule) {
|
|
this.selectedSchedule = { ...schedule }
|
|
|
|
this.$segment.track('flights__select_schedule', {
|
|
origin: this.selectedSchedule.fields.Origin_IATA[0],
|
|
destination: this.selectedSchedule.fields.Destination_IATA[0],
|
|
departureDate: this.$route.params.departure,
|
|
departureTime: this.selectedSchedule.fields.Departure_TimeL,
|
|
arrivalTime: this.selectedSchedule.fields.Arrival_TimeL,
|
|
carrier: this.selectedSchedule.fields.Carrier_Name
|
|
})
|
|
},
|
|
clearSelectedSchedule () {
|
|
// console.log('clear')
|
|
this.startingDate = ''
|
|
this.selectedSchedule = {}
|
|
},
|
|
async fetchSingleAirport(iata, isOrig) {
|
|
const airportFetchFilterFormula =
|
|
isOrig
|
|
? `AND(Is_Origin=1,{IsCurrent-AsOrigin}="Yes",Airport_IATA="${iata}")`
|
|
: `AND(Is_Destination=1,{IsCurrent-AsDest}="Yes",Airport_IATA="${iata}")`
|
|
|
|
const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${airportFetchFilterFormula}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer keyJ2ht64ZSN57AG1'
|
|
}
|
|
})
|
|
|
|
const mapData = await response.json()
|
|
|
|
const thisAirport = {
|
|
iata: mapData.records[0].fields.Airport_IATA,
|
|
lat: mapData.records[0].fields.Latitude_Deg,
|
|
long: mapData.records[0].fields.Longitude_Deg,
|
|
icon: mapData.records[0].fields.Icon_Url,
|
|
name: mapData.records[0].fields.Airport_Name,
|
|
municipality: mapData.records[0].fields.Municipality,
|
|
type: mapData.records[0].fields.Type,
|
|
search: mapData.records[0].fields.Search_Field
|
|
}
|
|
|
|
switch (isOrig) {
|
|
case true:
|
|
this.selectedOrig = { ...thisAirport }
|
|
break
|
|
|
|
case false:
|
|
this.selectedDest = { ...thisAirport }
|
|
break
|
|
|
|
default:
|
|
break
|
|
}
|
|
},
|
|
validateEmail() {
|
|
if (/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(this.email)) {
|
|
const emailArray = this.email.split('@')
|
|
const name = emailArray[0]
|
|
const fullDomain = emailArray[1]
|
|
const domainArray = fullDomain.split('.')
|
|
const domain = domainArray.slice(-2)[0]
|
|
const tld = domainArray.slice(-1)[0]
|
|
if(tld.length < 2 || domain.length < 2) {
|
|
this.emailError = 'your email isn\'t valid';
|
|
} else {
|
|
this.emailError = '';
|
|
}
|
|
} else {
|
|
this.emailError = 'your email isn\'t valid';
|
|
}
|
|
},
|
|
validatePhone(data) {
|
|
this.phoneIsValid = data.isValid
|
|
if (data.isValid) {
|
|
this.phoneError = '';
|
|
} else {
|
|
this.phoneError = 'your phone number isn\'t valid';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.main-with-header {
|
|
margin-top: clamp(20px + 1.75rem, 4rem + 1.75rem, 50px + 1.75rem);
|
|
}
|
|
|
|
.schedule-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.schedule-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
margin: 2rem 2rem 2rem 2rem;
|
|
}
|
|
|
|
.grid__row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
padding: 1rem 1rem 1rem 4rem;
|
|
flex-wrap: wrap;
|
|
border-radius: 2rem;
|
|
}
|
|
|
|
.grid__row:nth-child(odd) {
|
|
background: #eee;
|
|
}
|
|
|
|
label {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: white;
|
|
display: block;
|
|
}
|
|
|
|
.field__content {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.dow-grid {
|
|
width: 200px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dow-grid__day {
|
|
font-size: 0.8rem;
|
|
border: 1px solid #ccc !important;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 3px !important;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.day--su {
|
|
grid-column: 1 / span 1;
|
|
}
|
|
|
|
.day--mo {
|
|
grid-column: 2 / span 1;
|
|
}
|
|
|
|
.day--tu {
|
|
grid-column: 3 / span 1;
|
|
}
|
|
|
|
.day--we {
|
|
grid-column: 4 / span 1;
|
|
}
|
|
|
|
.day--th {
|
|
grid-column: 5 / span 1;
|
|
}
|
|
|
|
.day--fr {
|
|
grid-column: 6 / span 1;
|
|
}
|
|
|
|
.day--sa {
|
|
grid-column: 7 / span 1;
|
|
}
|
|
|
|
.row__trip {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.row__trip svg {
|
|
margin-bottom: -0.5rem;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
}
|
|
|
|
.shape--trip {
|
|
height: 0.4rem;
|
|
width: 2rem;
|
|
background: #007fff;
|
|
display: block;
|
|
margin-top: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.shape--trip::before {
|
|
height: 0.8rem;
|
|
width: 0.8rem;
|
|
background: #fff;
|
|
border: 0.02rem solid #007fff;
|
|
border-radius: 999px;
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.15rem;
|
|
left: -0.5rem;
|
|
}
|
|
|
|
.shape--trip::after {
|
|
height: 0.8rem;
|
|
width: 0.8rem;
|
|
background: #007fff;
|
|
border: 0.02rem solid #007fff;
|
|
border-radius: 999px;
|
|
content: "";
|
|
position: absolute;
|
|
top: -0.15rem;
|
|
right: -0.5rem;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
line-height: 0.85;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
label.text--muni {
|
|
color: #007fff;
|
|
line-height: 1;
|
|
padding-left: 0.3rem;
|
|
}
|
|
|
|
span.text--flight-num {
|
|
font-weight: 700;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
span.text--dow {
|
|
font-weight: 300;
|
|
font-size: 0.8rem;
|
|
color: #007fff;
|
|
}
|
|
|
|
span.badge--avail {
|
|
border-radius: 999px;
|
|
border: 1px solid gray;
|
|
color: gray;
|
|
padding: 0.2em 0.8em;
|
|
line-height: 1;
|
|
font-size: 0.8rem;
|
|
display: block;
|
|
width: fit-content;
|
|
}
|
|
|
|
.radio span {
|
|
border-radius: 999px;
|
|
border: 3px solid #007fff;
|
|
background-color: white;
|
|
height: 2rem;
|
|
width: 2rem;
|
|
display: flex;
|
|
position: relative;
|
|
transition: all 0.3s;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.radio span svg {
|
|
transition: all 0.3s;
|
|
stroke: #eee;
|
|
}
|
|
|
|
.radio span:hover {
|
|
background: #007fff;
|
|
}
|
|
|
|
.radio input:checked + span {
|
|
background: #007fff;
|
|
}
|
|
|
|
.radio input:checked + span svg {
|
|
stroke: white;
|
|
}
|
|
|
|
.radio input {
|
|
display: none;
|
|
}
|
|
|
|
.row__info {
|
|
min-width: fit-content;
|
|
}
|
|
|
|
.row__check {
|
|
margin-left: -3rem;
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: stretch;
|
|
}
|
|
|
|
.form-row label {
|
|
text-transform: uppercase;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.form-row input {
|
|
background: #eee;
|
|
border-radius: 0.5rem 3rem 3rem 3rem;
|
|
transition: 0.3s all;
|
|
padding: 0.5em 0.8em;
|
|
font-size: min(1rem, 18px);
|
|
line-height: 1;
|
|
}
|
|
|
|
.form-row--two-columns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
column-gap: 1rem;
|
|
}
|
|
|
|
.form-row--two-columns input {
|
|
width: 50%;
|
|
}
|
|
|
|
.form-row input:focus {
|
|
border: 0;
|
|
}
|
|
|
|
.flyout {
|
|
background: #007fff;
|
|
border-radius: 3rem 3rem 0 0;
|
|
padding: 3rem;
|
|
pointer-events: all;
|
|
width: clamp(450px, 50vw, 400px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.flyout .btn.btn--primary {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.flyout .btn.btn--primary:hover {
|
|
background: #00ca00;
|
|
color: #fff;
|
|
}
|
|
|
|
.flyout p {
|
|
font-size: 1rem;
|
|
line-height: 1.2;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
margin-bottom: 1rem;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.flyout p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.flyout h3 {
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
font-weight: 200;
|
|
margin-bottom: 1rem;
|
|
color: #fff;
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.flyout h3 strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.2;
|
|
background-color: #ddd;
|
|
color: #222;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.form-row input.input--error {
|
|
--stripe1: #ff69b433;
|
|
--stripe2: #eee;
|
|
// box-shadow: 0 0 0 0.2rem red;
|
|
background: linear-gradient(135deg, var(--stripe1) 25%, var(--stripe2) 25%, var(--stripe2) 50%, var(--stripe1) 50%, var(--stripe1) 75%, var(--stripe2) 75%, var(--stripe2) 100%), var(--stripe2);
|
|
background-size: 56.57px 56.57px;
|
|
}
|
|
|
|
.alert--error {
|
|
text-align: center;
|
|
color: white;
|
|
font-size: 0.75rem;
|
|
margin-top: 0.15rem;
|
|
}
|
|
|
|
.alert--sent {
|
|
text-align: center;
|
|
background-color: #00ca00;
|
|
margin: 0 -3rem -3rem -3rem;
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.1rem;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|