115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="card">
|
|
<!-- Navigation Link at the top -->
|
|
<div class="navigation-link">
|
|
<button class="link-button" @click="goBack()">
|
|
<v-icon>mdi-arrow-left</v-icon>
|
|
{{ t('returnToCreator') }}
|
|
</button>
|
|
</div>
|
|
|
|
<h1>{{ t('title') }}</h1>
|
|
<p>{{ t('message') }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const { t } = useI18n();
|
|
|
|
function goBack() {
|
|
const creatorName = route.params.creator?.split('/')[0] || '';
|
|
router.push(`/@${creatorName}`);
|
|
}
|
|
</script>
|
|
|
|
<i18n>
|
|
{
|
|
"en": {
|
|
"title": "Payment Failed",
|
|
"message": "We couldn't process your payment.",
|
|
"retry": "Try Again",
|
|
"returnToCreator": "Return to creator page"
|
|
},
|
|
"fr": {
|
|
"title": "Échec du paiement",
|
|
"message": "Nous n'avons pas pu traiter votre paiement.",
|
|
"retry": "Réessayer",
|
|
"returnToCreator": "Retourner à la page du créateur"
|
|
},
|
|
"es": {
|
|
"title": "Pago fallido",
|
|
"message": "No pudimos procesar su pago.",
|
|
"retry": "Intentar de nuevo",
|
|
"returnToCreator": "Volver a la página del creador"
|
|
}
|
|
}
|
|
</i18n>
|
|
|
|
<style scoped>
|
|
.container {
|
|
@apply flex items-center justify-center;
|
|
@apply p-5;
|
|
@apply w-full;
|
|
@apply mx-auto;
|
|
@apply max-w-[1024px];
|
|
}
|
|
|
|
.card {
|
|
@apply bg-hSurface text-hOnSurface;
|
|
@apply p-8;
|
|
@apply font-sans;
|
|
@apply rounded-2xl;
|
|
@apply shadow-2xl;
|
|
@apply relative;
|
|
@apply w-full;
|
|
@apply max-w-2xl;
|
|
@apply mx-auto;
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
@apply absolute inset-0;
|
|
@apply rounded-2xl;
|
|
@apply p-[1px];
|
|
background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
|
|
mask: linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.navigation-link {
|
|
@apply flex items-center;
|
|
@apply mb-6;
|
|
}
|
|
|
|
.link-button {
|
|
@apply flex items-center gap-2;
|
|
@apply text-hutopyPrimary hover:text-hutopySecondary;
|
|
@apply transition-colors;
|
|
@apply duration-300;
|
|
@apply font-medium;
|
|
}
|
|
|
|
h1 {
|
|
@apply text-6xl;
|
|
@apply font-medium;
|
|
@apply mb-8;
|
|
@apply text-center;
|
|
}
|
|
|
|
p {
|
|
@apply text-lg;
|
|
@apply font-medium;
|
|
@apply mb-8;
|
|
@apply text-center;
|
|
}
|
|
</style>
|