Implement ultra-modern glassmorphic dashboard with animations
Build And Push Image / docker (push) Successful in 2m0s
Details
Build And Push Image / docker (push) Successful in 2m0s
Details
- Add animated hero header with Monaco red gradient - Implement floating orbs with blur effects - Create glowing avatar with status indicator - Add gradient text animations - Implement glass-morphic cards with backdrop blur - Add hover animations and transitions - Refine dues management cards - Include comprehensive CSS animations
This commit is contained in:
parent
245c3571c7
commit
f735b68fed
|
|
@ -1,71 +1,149 @@
|
|||
<template>
|
||||
<div class="glass-dashboard">
|
||||
<!-- Dashboard Content -->
|
||||
<div class="dashboard-container">
|
||||
<!-- Welcome Section -->
|
||||
<div class="welcome-card">
|
||||
<h2 class="welcome-title">Welcome back!</h2>
|
||||
<p class="welcome-subtitle">
|
||||
Here's an overview of MonacoUSA's current status and activities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Statistics Grid -->
|
||||
<div class="stats-grid">
|
||||
<div v-for="stat in stats" :key="stat.label" class="stat-card">
|
||||
<div class="stat-icon-wrapper">
|
||||
<div class="stat-icon">{{ stat.icon }}</div>
|
||||
</div>
|
||||
<p class="stat-label">
|
||||
{{ stat.label }}
|
||||
</p>
|
||||
<p class="stat-value">
|
||||
{{ stat.prefix }}{{ stat.value }}{{ stat.suffix }}
|
||||
</p>
|
||||
<p v-if="stat.change" class="stat-change">
|
||||
{{ stat.change }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dues Management Section -->
|
||||
<div class="dues-section">
|
||||
<div class="dues-header">
|
||||
<h3 class="dues-title">Member Dues Overview</h3>
|
||||
</div>
|
||||
|
||||
<!-- Dues Cards Grid - MAX 4 VISIBLE -->
|
||||
<div class="dues-grid">
|
||||
<div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
|
||||
<!-- Member Info -->
|
||||
<div class="member-info">
|
||||
<div class="member-avatar"></div>
|
||||
<div>
|
||||
<h4 class="member-name">{{ member.name }}</h4>
|
||||
<p class="member-id">Member #{{ member.id }}</p>
|
||||
<!-- Ultra-Modern Hero Header -->
|
||||
<div class="hero-header">
|
||||
<!-- Animated background -->
|
||||
<div class="hero-gradient"></div>
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<!-- Floating elements -->
|
||||
<div class="floating-orb orb-1"></div>
|
||||
<div class="floating-orb orb-2"></div>
|
||||
<div class="floating-orb orb-3"></div>
|
||||
|
||||
<!-- Mesh gradient overlay -->
|
||||
<div class="mesh-overlay"></div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-inner">
|
||||
<!-- User Info -->
|
||||
<div class="user-section">
|
||||
<div class="avatar-wrapper">
|
||||
<!-- Avatar glow -->
|
||||
<div class="avatar-glow"></div>
|
||||
|
||||
<div class="avatar-container">
|
||||
<div class="avatar">
|
||||
<span class="avatar-text">JD</span>
|
||||
</div>
|
||||
|
||||
<!-- Status indicator -->
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot"></div>
|
||||
</div>
|
||||
|
||||
<!-- Crown icon -->
|
||||
<div class="crown-badge">
|
||||
👑
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Amount -->
|
||||
<div class="amount-row">
|
||||
<span class="amount-label">Amount Due</span>
|
||||
<span class="amount-value">${{ member.dueAmount }}</span>
|
||||
<div class="user-info">
|
||||
<h1 class="welcome-title">
|
||||
Welcome back,
|
||||
<span class="name-gradient">Board Member!</span>
|
||||
</h1>
|
||||
|
||||
<div class="user-meta">
|
||||
<div class="role-badge">
|
||||
<span class="sparkle">✨</span>
|
||||
<span class="role-text">Administrator</span>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<span class="org-name">MonacoUSA Association</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Date & Quick Actions -->
|
||||
<div class="actions-section">
|
||||
<!-- Date Card -->
|
||||
<div class="date-card">
|
||||
<div class="date-header">
|
||||
<span class="calendar-icon">📅</span>
|
||||
<p class="date-label">Today</p>
|
||||
</div>
|
||||
<p class="date-text">
|
||||
{{ currentDate }}
|
||||
</p>
|
||||
<div class="date-progress">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<button class="btn-mark-paid">
|
||||
Mark Paid
|
||||
</button>
|
||||
<!-- Quick Actions -->
|
||||
<div class="quick-actions">
|
||||
<button class="action-btn action-alerts">
|
||||
<span class="action-icon">🔔</span>
|
||||
<span class="action-text">Alerts</span>
|
||||
</button>
|
||||
|
||||
<button class="action-btn action-primary">
|
||||
<span class="action-icon">✨</span>
|
||||
<span class="action-text">Quick Add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Decorative line -->
|
||||
<div class="hero-divider"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View All Button -->
|
||||
<div class="view-all-container">
|
||||
<button class="btn-view-all">
|
||||
View All Members →
|
||||
<!-- Statistics Grid -->
|
||||
<div class="stats-section">
|
||||
<div class="stats-grid">
|
||||
<div v-for="stat in stats" :key="stat.label" class="stat-card">
|
||||
<div class="stat-icon">{{ stat.icon }}</div>
|
||||
<div class="stat-content">
|
||||
<p class="stat-label">{{ stat.label }}</p>
|
||||
<p class="stat-value">
|
||||
{{ stat.prefix }}{{ stat.value.toLocaleString() }}{{ stat.suffix }}
|
||||
</p>
|
||||
<p v-if="stat.change" class="stat-change">
|
||||
{{ stat.change }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dues Management Section -->
|
||||
<div class="dues-section">
|
||||
<h2 class="section-title">Member Dues Overview</h2>
|
||||
|
||||
<div class="dues-grid">
|
||||
<div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
|
||||
<div class="member-header">
|
||||
<div class="member-avatar">
|
||||
<span>{{ member.initials }}</span>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<h3 class="member-name">{{ member.name }}</h3>
|
||||
<p class="member-id">Member #{{ member.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dues-info">
|
||||
<span class="dues-label">Amount Due</span>
|
||||
<span class="dues-amount">${{ member.dueAmount }}</span>
|
||||
</div>
|
||||
|
||||
<button class="btn-pay">
|
||||
Mark Paid
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view-all-container">
|
||||
<button class="btn-view-all">
|
||||
View All Members →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -78,141 +156,515 @@ export default {
|
|||
</script>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
// Current date
|
||||
const currentDate = computed(() => {
|
||||
return new Date().toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})
|
||||
})
|
||||
|
||||
// Statistics data
|
||||
const stats = ref([
|
||||
{
|
||||
icon: '👥',
|
||||
label: 'Total Members',
|
||||
label: 'TOTAL MEMBERS',
|
||||
value: 1234,
|
||||
change: '+12%',
|
||||
},
|
||||
{
|
||||
icon: '💰',
|
||||
label: 'Dues Collected',
|
||||
label: 'DUES COLLECTED',
|
||||
value: 45678,
|
||||
prefix: '$',
|
||||
change: '+8%',
|
||||
},
|
||||
{
|
||||
icon: '📅',
|
||||
label: 'Upcoming Events',
|
||||
label: 'UPCOMING EVENTS',
|
||||
value: 5,
|
||||
change: '2 this week',
|
||||
},
|
||||
{
|
||||
icon: '📈',
|
||||
label: 'Growth Rate',
|
||||
label: 'GROWTH RATE',
|
||||
value: 23,
|
||||
suffix: '%',
|
||||
change: '+3%',
|
||||
}
|
||||
])
|
||||
|
||||
// Sample dues members data - LIMITED TO 4
|
||||
// Sample dues members data
|
||||
const visibleDuesMembers = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: 'John Smith',
|
||||
initials: 'JS',
|
||||
dueAmount: 250,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Marie Dubois',
|
||||
initials: 'MD',
|
||||
dueAmount: 250,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Alessandro Rossi',
|
||||
initials: 'AR',
|
||||
dueAmount: 250,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Emma Wilson',
|
||||
initials: 'EW',
|
||||
dueAmount: 250,
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Animations */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(10deg); }
|
||||
}
|
||||
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes bounce-slow {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
from { opacity: 0; transform: translateX(-20px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
.glass-dashboard {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
|
||||
padding: 1.5rem;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.dashboard-container {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
/* Hero Header */
|
||||
.hero-header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Welcome Section */
|
||||
.welcome-card {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
.hero-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #991b1b 50%, #7f1d1d 100%);
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
|
||||
}
|
||||
|
||||
/* Floating Orbs */
|
||||
.floating-orb {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.orb-1 {
|
||||
top: 40px;
|
||||
right: 80px;
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.orb-2 {
|
||||
bottom: 40px;
|
||||
left: 80px;
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
animation: pulse-slow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.orb-3 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: bounce-slow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.mesh-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0.2;
|
||||
background: radial-gradient(circle at 20% 50%, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
padding: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-inner {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* User Section */
|
||||
.user-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
animation: slide-in 0.6s ease-out;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
group: true;
|
||||
}
|
||||
|
||||
.avatar-glow {
|
||||
position: absolute;
|
||||
inset: -8px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(254,202,202,0.3));
|
||||
border-radius: 50%;
|
||||
filter: blur(12px);
|
||||
transition: filter 0.3s;
|
||||
}
|
||||
|
||||
.avatar-wrapper:hover .avatar-glow {
|
||||
filter: blur(16px);
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, #fff, #fef2f2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(255,255,255,0.4),
|
||||
0 10px 40px rgba(0,0,0,0.2);
|
||||
border: 2px solid rgba(255,255,255,0.2);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.avatar:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
right: -8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #10b981, #059669);
|
||||
border-radius: 50%;
|
||||
border: 4px solid white;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
animation: pulse-slow 2s infinite;
|
||||
}
|
||||
|
||||
.crown-badge {
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: -4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, #fbbf24, #f59e0b);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
animation: bounce-slow 3s infinite;
|
||||
}
|
||||
|
||||
/* User Info */
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
color: #1f2937;
|
||||
font-size: 3rem;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
color: #4b5563;
|
||||
.name-gradient {
|
||||
display: block;
|
||||
background: linear-gradient(90deg, #fff, #fee2e2, #fff);
|
||||
background-size: 300% 100%;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: gradient 3s ease infinite;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
background: rgba(255,255,255,0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 9999px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.role-text {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1.5rem;
|
||||
width: 1px;
|
||||
background: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.org-name {
|
||||
color: #fecaca;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Actions Section */
|
||||
.actions-section {
|
||||
animation: slide-up 0.6s ease-out;
|
||||
animation-delay: 200ms;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.date-card {
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
transition: background 0.3s;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.date-card:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.date-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
color: #fecaca;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.date-progress {
|
||||
margin-top: 0.75rem;
|
||||
height: 4px;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
width: 75%;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));
|
||||
border-radius: 9999px;
|
||||
animation: pulse-slow 2s infinite;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-alerts {
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-alerts:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.action-primary {
|
||||
background: white;
|
||||
color: #dc2626;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.action-primary:hover {
|
||||
background: #fee2e2;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.action-text {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-divider {
|
||||
margin-top: 2rem;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.stats-section {
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Statistics Grid */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
background: white;
|
||||
border-radius: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.stat-icon-wrapper {
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
font-size: 2rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
background: linear-gradient(135deg, #fee2e2, #fecaca);
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
|
|
@ -221,73 +673,78 @@ const visibleDuesMembers = ref([
|
|||
|
||||
.stat-value {
|
||||
font-size: 1.875rem;
|
||||
font-weight: bold;
|
||||
font-weight: 900;
|
||||
color: #1f2937;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-change {
|
||||
font-size: 0.875rem;
|
||||
color: #10b981;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Dues Section */
|
||||
.dues-section {
|
||||
margin-top: 1.5rem;
|
||||
padding: 0 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.dues-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.dues-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
.section-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dues-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.dues-card {
|
||||
background: white;
|
||||
border-radius: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.08);
|
||||
border: 1px solid rgba(0,0,0,0.05);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.dues-card:hover {
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
.member-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.dues-card {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 1rem;
|
||||
padding: 1.25rem;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dues-card:hover {
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.member-info {
|
||||
.member-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, #e5e7eb, #d1d5db);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
.member-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.member-id {
|
||||
|
|
@ -295,39 +752,44 @@ const visibleDuesMembers = ref([
|
|||
color: #6b7280;
|
||||
}
|
||||
|
||||
.amount-row {
|
||||
.dues-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: #f9fafb;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.amount-label {
|
||||
.dues-label {
|
||||
font-size: 0.875rem;
|
||||
color: #4b5563;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.amount-value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
.dues-amount {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.btn-mark-paid {
|
||||
.btn-pay {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(135deg, #fee2e2, #fecaca);
|
||||
color: #dc2626;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-mark-paid:hover {
|
||||
background: rgba(254, 226, 226, 0.5);
|
||||
.btn-pay:hover {
|
||||
background: linear-gradient(135deg, #dc2626, #b91c1c);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
|
||||
.view-all-container {
|
||||
|
|
@ -335,19 +797,22 @@ const visibleDuesMembers = ref([
|
|||
}
|
||||
|
||||
.btn-view-all {
|
||||
padding: 0.625rem 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
padding: 0.875rem 2rem;
|
||||
background: white;
|
||||
color: #dc2626;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
border: 2px solid #dc2626;
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: all 0.3s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-view-all:hover {
|
||||
background: rgba(254, 226, 226, 0.5);
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue