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.
592 lines
16 KiB
592 lines
16 KiB
<template>
|
|
<div>
|
|
<button class="btn btn--primary sidebar-button" @click="showSidebar">
|
|
<svg
|
|
v-if="!isSidebarVisible"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-menu"
|
|
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" />
|
|
<line x1="4" y1="8" x2="20" y2="8" />
|
|
<line x1="4" y1="16" x2="20" y2="16" />
|
|
</svg>
|
|
<svg
|
|
v-if="isSidebarVisible"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-arrow-bar-to-right"
|
|
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" />
|
|
<line x1="14" y1="12" x2="4" y2="12" />
|
|
<line x1="14" y1="12" x2="10" y2="16" />
|
|
<line x1="14" y1="12" x2="10" y2="8" />
|
|
<line x1="20" y1="4" x2="20" y2="20" />
|
|
</svg>
|
|
</button>
|
|
<aside
|
|
:class="[
|
|
'sidebar-container',
|
|
{ 'sidebar-container--hide': !isSidebarVisible },
|
|
{ 'sidebar-container--show': isSidebarVisible },
|
|
]"
|
|
>
|
|
<div class="sidebar">
|
|
<div class="sidebar-content">
|
|
<h1 class="h1--about">
|
|
What is FlyLocal Alaska?
|
|
</h1>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F3D4.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F4C5.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F601.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
</div>
|
|
<p class="text--about">
|
|
<strong>FlyLocal-Alaska</strong> is an easy way to view the
|
|
schedules for your favorite Alaskan airlines - all in one place.
|
|
</p>
|
|
<h1 class="h1--about">
|
|
Why FlyLocal in Alaska?
|
|
</h1>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6AB.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F697.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6E3.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
</div>
|
|
<p class="text--about">
|
|
<strong>80% of Alaskan communities are not connected to the road
|
|
system.</strong>
|
|
Therefore, they rely heavily on local airlines for transportation.
|
|
</p>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6A3.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F3D5.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F43B.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
</div>
|
|
<p class="text--about">
|
|
<strong>See new places.</strong> There are ~400 public airports in
|
|
Alaska, but only 20 (or 5%) with service from major US carriers.
|
|
</p>
|
|
<div class="img-divider">
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6E9.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F681.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
<img
|
|
class="img--about"
|
|
src="https://openmoji.org/data/black/svg/1F6F8.svg"
|
|
alt=""
|
|
srcset=""
|
|
>
|
|
</div>
|
|
<p class="text--about">
|
|
Enjoy a completely <strong>unique flying experience</strong>. Have
|
|
you ever landed on a lake in a seaplane? Now is your chance to check
|
|
it off the bucket-list.
|
|
</p>
|
|
<h1 class="h1--about">
|
|
Up-to-date Travel Info
|
|
</h1>
|
|
<ul class="about-carriers list-lrg">
|
|
<li>
|
|
<a href="https://covid19.alaska.gov/travelers/">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/alaska-travel-info.png`)"
|
|
alt="Alaska Travel Info"
|
|
>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<h1 class="h1--about">
|
|
Explore Alaska on these great local airlines
|
|
</h1>
|
|
<ul class="about-carriers">
|
|
<li v-for="carrier in carriers" :key="carrier.id">
|
|
<a :href="carrier.fields.BookingLink" target="_blank">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/carriers/${carrier.fields.Slug}.png`)"
|
|
:alt="carrier.fields.Name"
|
|
>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<h1 class="h1--about">
|
|
Proud Member of
|
|
</h1>
|
|
<ul class="about-carriers list-med">
|
|
<li>
|
|
<a href="https://alaskaaircarriers.org">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/aaca.png`)"
|
|
alt="Alaska Air Carriers Association"
|
|
>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://alaskatia.org">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/alaska-tia.png`)"
|
|
alt="Alaska Travel Industry Association"
|
|
>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<h1 class="h1--about">
|
|
Featured on
|
|
</h1>
|
|
<ul class="about-carriers list-med">
|
|
<li>
|
|
<a href="https://www.1millioncups.com/anchorage/presentations/flylocal-alaska-35304">
|
|
<img
|
|
class="img--carrier-logo"
|
|
:src="require(`@/assets/images/orgs/1-million-cups.png`)"
|
|
alt="1 Million Cups"
|
|
>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.travelalaska.com/offers/FlyLocal/Plane-Statewide.aspx">
|
|
<img
|
|
class="img--carrier-logo"
|
|
style="background: black; border-radius: 0.5rem; padding-left: 0.4rem;"
|
|
:src="require(`@/assets/images/orgs/travel-alaska.png`)"
|
|
alt="Travel Alaska"
|
|
>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="company-footer">
|
|
⎨ FlyLocal v5.0.2 𐄙 ©2021 FlyLocal LLC ⎬
|
|
</div>
|
|
</div>
|
|
<ul class="contact">
|
|
<li class="contact-item">
|
|
<a href="https://twitter.com/fly_local">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-brand-twitter"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path
|
|
d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
|
|
/>
|
|
</svg>
|
|
<span>@fly_local</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item">
|
|
<a href="https://facebook.com/FlyLocalAlaska">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-brand-facebook"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<path
|
|
d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"
|
|
/>
|
|
</svg>
|
|
<span>@fly_local</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item">
|
|
<a href="https://instagram.com/fly_local">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-brand-instagram"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<rect x="4" y="4" width="16" height="16" rx="4" />
|
|
<circle cx="12" cy="12" r="3" />
|
|
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
|
|
</svg>
|
|
<span>@fly_local</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item">
|
|
<a href="mailto:team@iflylocal.com">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-user"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
|
|
</svg>
|
|
<span>contact us</span>
|
|
</a>
|
|
</li>
|
|
<li class="contact-item">
|
|
<a href="mailto:partners@iflylocal.com">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="icon icon-tabler icon-tabler-briefcase"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="#007fff"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
<rect x="3" y="7" width="18" height="13" rx="2" />
|
|
<path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
|
|
<line x1="12" y1="12" x2="12" y2="12.01" />
|
|
<path d="M3 13a20 20 0 0 0 18 0" />
|
|
</svg>
|
|
<span>partner with us</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
<div
|
|
:class="[
|
|
'sidebar-blockui',
|
|
{ 'sidebar-blockui--show': isSidebarVisible },
|
|
]"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
isSidebarVisible: false,
|
|
carriers: []
|
|
}),
|
|
async fetch () {
|
|
const filterFormula = 'AND(NOT(Status="Inactive"),FIND("Alaska",Region)>0)'
|
|
const sortFormula = '&sort[0][field]=Name&sort[0][direction]=asc'
|
|
|
|
let offset
|
|
let data = []
|
|
|
|
while (true) {
|
|
const offsetParam = offset ? `&offset=${offset}` : ''
|
|
const res = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Carriers_Alaska?filterByFormula=${filterFormula}${sortFormula}${offsetParam}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
Authorization: 'Bearer keyJ2ht64ZSN57AG1'
|
|
}
|
|
})
|
|
|
|
const json = await res.json()
|
|
offset = await json.offset
|
|
data = [...data, ...await json.records]
|
|
// await console.log(data.length)
|
|
|
|
if (await !offset) { break } // Were done let's stop this thing
|
|
}
|
|
|
|
this.carriers = [...data]
|
|
},
|
|
methods: {
|
|
showSidebar () {
|
|
this.isSidebarVisible = !this.isSidebarVisible
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--sidebar-width: 50ch;
|
|
}
|
|
|
|
.sidebar-container {
|
|
z-index: 1002;
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
height: 100vh;
|
|
transition: all 0.3s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidebar-container.sidebar-container--hide {
|
|
transform: translateX(calc(var(--sidebar-width) + 6rem));
|
|
}
|
|
|
|
.sidebar-container.sidebar-container--show {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sidebar {
|
|
background: white;
|
|
padding: 3rem 0 3rem 3rem;
|
|
border-radius: 3rem 0 0 3rem;
|
|
pointer-events: all;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.sidebar-content {
|
|
overflow: auto;
|
|
max-width: var(--sidebar-width);
|
|
height: calc(100vh - 11rem);
|
|
padding-right: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.img--about {
|
|
height: min(3rem, 60px);
|
|
display: inline-block;
|
|
}
|
|
|
|
div.img-divider {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 25%;
|
|
}
|
|
|
|
.img--carrier-logo {
|
|
max-width: 6rem;
|
|
max-height: 6rem;
|
|
}
|
|
|
|
.list-med .img--carrier-logo {
|
|
max-width: 9rem;
|
|
max-height: 9rem;
|
|
}
|
|
|
|
.list-lrg .img--carrier-logo {
|
|
max-width: 15rem;
|
|
max-height: 15rem;
|
|
}
|
|
|
|
h1.h1--about {
|
|
font-weight: 200;
|
|
text-transform: uppercase;
|
|
color: #007fff;
|
|
font-size: min(2.7rem, 50px);
|
|
line-height: 1;
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.text--about {
|
|
margin-top: 1rem;
|
|
margin-bottom: 1rem;
|
|
max-width: 40ch;
|
|
font-size: min(1rem, 18px);
|
|
}
|
|
|
|
.text--about:nth-of-type(1),
|
|
.text--about:nth-of-type(4) {
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.about-carriers {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
gap: 2rem;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
margin-bottom: 5rem;
|
|
}
|
|
|
|
.about-carriers li {
|
|
filter: saturate(0%);
|
|
transition: 0.3s all;
|
|
position: relative;
|
|
}
|
|
|
|
/* .about-carriers li::after {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: red;
|
|
content: '';
|
|
} */
|
|
|
|
.about-carriers li:hover {
|
|
filter: saturate(100%);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.sidebar-button {
|
|
position: fixed;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
z-index: 1003;
|
|
}
|
|
|
|
.sidebar-blockui {
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
filter: blur(0.5);
|
|
background-color: #007fff;
|
|
transition: all 0.3s;
|
|
pointer-events: none;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.sidebar-blockui.sidebar-blockui--show {
|
|
opacity: 0.8;
|
|
pointer-events: all;
|
|
}
|
|
|
|
ul.contact {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
margin: 3rem 3rem 0 0;
|
|
max-width: var(--sidebar-width);
|
|
}
|
|
|
|
li.contact-item a span {
|
|
color: #007fff;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
ul.contact li.contact-item a {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
ul.contact li.contact-item a:hover span {
|
|
color: #00ca00;
|
|
}
|
|
|
|
ul.contact li.contact-item a svg {
|
|
max-height: 2rem;
|
|
max-width: 2rem;
|
|
stroke-width: 1;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
ul.contact li.contact-item a:hover svg {
|
|
stroke: #00ca00;
|
|
}
|
|
|
|
.company-footer {
|
|
font-family: monospace;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
color: gray;
|
|
}
|
|
|
|
</style>
|