232 lines
7.2 KiB
Vue
232 lines
7.2 KiB
Vue
<template>
|
|
<div
|
|
class="flex flex-col items-center gap-6 md:gap-8 rounded-2xl bg-gradient-to-br from-purple-900/40 to-purple-800/30 border border-purple-700/30 p-6 md:p-8 shadow-2xl transition-all duration-500 hover:shadow-3xl md:flex-row backdrop-blur-sm hover:border-purple-600/50 group card-container"
|
|
>
|
|
<!-- Card Image Container -->
|
|
<div class="relative">
|
|
<!-- Card Image with Glow Effect -->
|
|
<div
|
|
class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-xl bg-cover bg-center bg-no-repeat transition-all duration-500 group-hover:scale-105 relative overflow-hidden card-image"
|
|
:style="{
|
|
'background-image': `url(${imageUrl || '/cards/' + (cardNumber + 1) + '.png'})`,
|
|
transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
|
|
}"
|
|
>
|
|
<!-- Gradient Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-900/10 to-purple-900/20 rounded-xl"></div>
|
|
|
|
<!-- Glow Effect -->
|
|
<div
|
|
class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
|
:style="{
|
|
'box-shadow': '0 0 30px 10px rgba(168, 85, 247, 0.4)'
|
|
}"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Orientation Badge -->
|
|
<div
|
|
v-if="orientation === 'reversed'"
|
|
class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
|
|
>
|
|
Reversed
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
|
|
>
|
|
Upright
|
|
</div>
|
|
|
|
<!-- Card Number Badge -->
|
|
<div
|
|
class="absolute -bottom-2 -left-2 text-purple-100 text-sm font-bold w-10 h-10 rounded-full flex items-center justify-center border-2 border-purple-900/50 shadow-lg card-number bg-gradient-to-r from-purple-700 to-indigo-700"
|
|
>
|
|
{{ cardNumber }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Content -->
|
|
<div class="flex flex-col gap-6 text-center md:text-left flex-1 w-full">
|
|
<!-- Card Header -->
|
|
<div class="space-y-2">
|
|
<p class="text-purple-300/70 text-xs sm:text-sm tracking-widest uppercase font-semibold">
|
|
Card #{{ cardNumber }}
|
|
</p>
|
|
|
|
<h3
|
|
class="text-2xl sm:text-3xl font-black bg-clip-text text-transparent leading-tight bg-gradient-to-r from-purple-200 to-purple-100"
|
|
>
|
|
{{ name }}
|
|
</h3>
|
|
</div>
|
|
|
|
<!-- Description Content -->
|
|
<div class="space-y-4">
|
|
<!-- Description Header -->
|
|
<div class="flex items-center gap-2">
|
|
<div class="text-lg font-bold flex items-center gap-2 text-purple-200">
|
|
<span class="text-purple-400">
|
|
{{ orientation === 'reversed' ? '🔄' : '📖' }}
|
|
</span>
|
|
{{ orientation === 'reversed' ? 'Reversed Meaning' : 'Upright Meaning' }}
|
|
</div>
|
|
<span class="text-xs px-2 py-1 rounded-full bg-purple-800/30 text-purple-300">
|
|
{{ orientation === 'reversed' ? 'Challenge' : 'Positive' }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Description Content -->
|
|
<div class="min-h-[200px] max-h-[300px] overflow-y-auto pr-2 custom-scrollbar">
|
|
<div class="space-y-4 animate-fadeIn">
|
|
<div
|
|
class="text-purple-300/90 leading-relaxed font-medium pl-4 border-l-2 border-purple-600/50 p-3 rounded-r-lg bg-gradient-to-r from-purple-900/10 to-transparent"
|
|
v-html="orientation === 'reversed' ? description_reversed : description_upright"
|
|
></div>
|
|
|
|
<!-- Key Points -->
|
|
<div class="space-y-2">
|
|
<h4 class="font-semibold text-sm opacity-80 text-purple-300">
|
|
Key Points:
|
|
</h4>
|
|
<ul class="space-y-1 text-sm pl-4 text-purple-300/80">
|
|
<li v-if="orientation === 'reversed'">
|
|
• Represents challenges or blockages
|
|
</li>
|
|
<li v-if="orientation === 'reversed'">
|
|
• Indicates reversed or delayed energy
|
|
</li>
|
|
<li v-if="orientation !== 'reversed'">
|
|
• Represents the card's natural energy
|
|
</li>
|
|
<li v-if="orientation !== 'reversed'">
|
|
• Indicates direct manifestation
|
|
</li>
|
|
<li>
|
|
• Traditional tarot interpretation
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decorative Divider -->
|
|
<div class="w-16 h-0.5 rounded-full mt-2 bg-gradient-to-r from-purple-600 to-transparent"></div>
|
|
|
|
<!-- Footer Note -->
|
|
<p class="text-xs opacity-70 italic text-purple-300/70">
|
|
{{ orientation === 'reversed'
|
|
? 'This reversed card suggests special attention is needed'
|
|
: 'This upright card indicates smooth, manifested energy' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Hover Effect Background -->
|
|
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-500 pointer-events-none"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
cardNumber: number;
|
|
name: string;
|
|
imageUrl: string;
|
|
orientation?: string;
|
|
description_upright: string;
|
|
description_reversed: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
orientation: 'upright'
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card-container {
|
|
animation: cardAppear 0.6s ease-out;
|
|
}
|
|
|
|
@keyframes cardAppear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.shadow-3xl {
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
|
0 0 30px rgba(168, 85, 247, 0.3);
|
|
}
|
|
|
|
.custom-scrollbar {
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgba(168, 85, 247, 0.1);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgba(168, 85, 247, 0.4);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(168, 85, 247, 0.6);
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.card-container * {
|
|
transition-property: all;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
/* Card hover effects */
|
|
.card-image:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
:deep(strong),
|
|
:deep(b) {
|
|
font-weight: 700 !important; /* Forces bold weight */
|
|
color: white; /* Optional: Makes it fully white vs the 80% opacity body text */
|
|
}
|
|
|
|
/* Optional: If you want to style lists inside description too */
|
|
:deep(ul),
|
|
:deep(ol) {
|
|
padding-left: 1.5rem;
|
|
list-style-type: disc;
|
|
}
|
|
|
|
:deep(li) {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
</style>
|