bbell / src / components / Layout / SplashScreen.vue

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

import ScreenLayout from '@/components/Layout/ScreenLayout.vue'
import SVG from '@/components/UI/SVG.vue'
import BluebellLogo from '@/assets/icons/bluebell.svg?raw'
import { tap } from '@/utils/haptics'
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()
const messages = [
	"they're calling it the coilest client",
	'thank you for using bell >.<',
	'awawawwaawawa',
	'bwaaaaaaa',
	"remember that you're cute (or whatever your preferred compliment is)!",
	'@xan.lol im coming for ur crown',
	'the logo is NOT a wilted rose oh my GOD',
	'isabluebel roses',
	'trans rights',
	'do you have your coil habdel?',
	'CHOCCY MILK IS SHOOO GOOD',
	'dhis is habdelslop , you only liek it bcuz its coil',

	// ty pupcloud @upcloud.com
	'use code "CLICKER" and test upcloud.com with €50 in free credit!',

	// ty hoi.tgirl.gay!
	'shooo eepy',
	'blahaj approved',
	"you're so valid bloomf...",
	'sho gleepy',

	// ty @coolhands.nekoweb.org!
	',,i like ,,..ice cweam .,',
	'get that handle ready',

	// ty @bot-tan.suibari.com!
	'And thanks a bunch for liking my post! It makes me so happy!',
]
const setMessage = () => {
	let newIndex
	do {
		newIndex = Math.floor(Math.random() * messages.length)
	} while (messages[newIndex] === message.value && messages.length > 1)

	message.value = messages[newIndex]
	tap()
}
const message = ref()
setMessage()

onMounted(() => {
	document.addEventListener('pointerdown', setMessage)
})
onUnmounted(() => {
	document.removeEventListener('pointerdown', setMessage)
})
</script>

<template>
	<ScreenLayout bgImage="/images/bluebell.webp" :contentPosition="'center'" maxWidth="640px">
		<div class="splash-content">
			<div class="app-hero">
				<div class="logo-wrapper" aria-hidden="true">
					<SVG :icon="BluebellLogo" class="logo" />
				</div>
				<h1 class="title">Bluebell</h1>
				<p class="subtitle" role="status" aria-live="polite">{{ message }}</p>
			</div>

			<Teleport to="body">
				<!-- me fr -->
				<div class="bottom">
					<Transition name="pop-up">
						<div v-if="auth.profile" class="hi-user-pill">
							<img
								:src="auth.profile.avatar"
								:alt="`Avatar for ${auth.profile.handle}`"
								class="avatar"
							/>
							<p class="hello">
								hi, <span class="name">{{ auth.profile.displayName || auth.profile.handle }}</span
								>!
							</p>
						</div>
					</Transition>

					<div class="loader-track" aria-hidden="true">
						<div class="loader-bar"></div>
					</div>
				</div>
			</Teleport>
		</div>
	</ScreenLayout>
</template>

<style scoped lang="scss">
.pop-up-enter-active {
	animation-delay: 2s;
	animation: contentIn 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

@keyframes popUp {
}

.splash-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 1.5rem;
	padding: 2rem;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	transform-origin: center;
	animation: contentIn 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.bottom {
	position: fixed;
	bottom: calc(2rem + var(--inset-bottom, 0));
	left: 50%;
	transform: translateX(-50%);
	width: 100%;

	z-index: 2000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hi-user-pill {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5rem;
	padding-right: 1.25rem;
	background-color: hsla(var(--base) / 1);
	border: 1px solid hsla(var(--surface2) / 0.3);
	border-radius: 10rem;
	margin-bottom: 1.5rem;
	max-width: 40vw;

	.avatar {
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		object-fit: cover;
		border: 1.5px solid hsl(var(--surface2));

		@media (min-width: 512px) {
			width: 2.5rem;
			height: 2.5rem;
		}
	}

	.hello {
		font-size: 0.875rem;
		color: hsl(var(--text));

		.name {
			font-weight: 600;
			color: hsl(var(--accent));
		}

		@media (min-width: 512px) {
			font-size: 1rem;
		}
	}
}

.app-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;

	.logo-wrapper {
		width: 6rem;
		height: 6rem;
		color: hsl(var(--accent));

		:deep(svg) {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		font-size: 2.25rem;
		font-weight: 800;
		letter-spacing: -0.02em;
		margin: 0;
		background: linear-gradient(135deg, hsl(var(--text)) 0%, hsl(var(--subtext0)) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.subtitle {
		font-size: 1.25rem;
		font-weight: 400;
		margin: 0;
		width: 100%;
		color: hsl(var(--subtext1));
		user-select: none;
	}
}

.loader-track {
	width: 10rem;
	height: 0.5rem;
	background-color: hsla(var(--surface2) / 0.3);
	border-radius: 5rem;
	overflow: hidden;

	.loader-bar {
		position: relative;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: hsl(var(--accent));
		border-radius: 99px;
		transform-origin: left;
		animation: loading 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	}
}

@keyframes loading {
	0% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(100%);
	}
}

@keyframes contentIn {
	from {
		opacity: 0;
		transform: translateY(3rem) scale(0.75);
		filter: blur(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
		filter: blur(0);
	}
}

@media (min-width: 512px) {
	.title {
		font-size: 3rem;
	}
}
</style>