66 lines
1.4 KiB
Vue
66 lines
1.4 KiB
Vue
<template>
|
|
<IonPage>
|
|
<!-- Splash: unauthenticated -->
|
|
<template v-if="!user">
|
|
<IonContent class="splash-content">
|
|
<div class="splash-center">
|
|
<img src="/oysqn_logo.png" alt="OYS Borrow a Boat" class="splash-logo" />
|
|
<IonButton expand="block" router-link="/login" class="splash-btn">Log In</IonButton>
|
|
</div>
|
|
</IonContent>
|
|
</template>
|
|
|
|
<!-- Home: authenticated -->
|
|
<template v-else>
|
|
<IonHeader>
|
|
<IonToolbar color="primary">
|
|
<IonButtons slot="start">
|
|
<IonMenuButton />
|
|
</IonButtons>
|
|
<IonTitle>Home</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent class="ion-padding">
|
|
<h2>Welcome to OYS Borrow a Boat</h2>
|
|
</IonContent>
|
|
</template>
|
|
</IonPage>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
IonPage, IonHeader, IonToolbar, IonTitle, IonContent,
|
|
IonButtons, IonMenuButton, IonButton,
|
|
} from '@ionic/vue'
|
|
|
|
const user = useSupabaseUser()
|
|
|
|
definePageMeta({ layout: false })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.splash-content {
|
|
--background: var(--ion-color-light);
|
|
}
|
|
|
|
.splash-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding: 2rem;
|
|
gap: 2rem;
|
|
}
|
|
|
|
.splash-logo {
|
|
max-width: 280px;
|
|
width: 100%;
|
|
}
|
|
|
|
.splash-btn {
|
|
width: 100%;
|
|
max-width: 280px;
|
|
}
|
|
</style>
|