matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create properly styled glass dashboard with inline CSS
Build And Push Image / docker (push) Successful in 1m52s Details

This commit is contained in:
Matt 2025-09-06 15:52:33 +02:00
parent a8a12ef12a
commit 245c3571c7
2 changed files with 241 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.playwright-mcp/glass-dashboard-styled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

280
pages/board/dashboard/glass.vue
View File

@ -1,78 +1,67 @@
<template>
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-white">
<div class="glass-dashboard">
<!-- Dashboard Content -->
<div class="p-6 space-y-6">
<div class="dashboard-container">
<!-- Welcome Section -->
<div class="relative overflow-hidden rounded-3xl p-8 text-center shadow-lg border border-white/20"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
<h2 class="text-3xl font-bold text-gray-800 mb-2">
Welcome back!
</h2>
<p class="text-gray-600">
<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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div v-for="stat in stats" :key="stat.label"
class="relative overflow-hidden rounded-2xl p-6 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
<div class="flex items-center justify-between mb-4">
<div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
<span class="text-red-600 text-xl">{{ stat.icon }}</span>
</div>
<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="text-sm font-medium text-gray-500 uppercase tracking-wider mb-1">
<p class="stat-label">
{{ stat.label }}
</p>
<p class="text-3xl font-bold text-gray-800">
<p class="stat-value">
{{ stat.prefix }}{{ stat.value }}{{ stat.suffix }}
</p>
<p v-if="stat.change" class="text-sm text-green-600 mt-2">
<p v-if="stat.change" class="stat-change">
{{ stat.change }}
</p>
</div>
</div>
<!-- Dues Management Section -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h3 class="text-xl font-semibold text-gray-800">Member Dues Overview</h3>
<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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div v-for="member in visibleDuesMembers" :key="member.id"
class="relative overflow-hidden rounded-2xl p-5 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
<div class="dues-grid">
<div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
<!-- Member Info -->
<div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 rounded-full bg-gray-200"></div>
<div class="member-info">
<div class="member-avatar"></div>
<div>
<h4 class="font-semibold text-gray-800">{{ member.name }}</h4>
<p class="text-sm text-gray-500">Member #{{ member.id }}</p>
<h4 class="member-name">{{ member.name }}</h4>
<p class="member-id">Member #{{ member.id }}</p>
</div>
</div>
<!-- Amount -->
<div class="flex items-center justify-between mb-3">
<span class="text-sm text-gray-600">Amount Due</span>
<span class="text-lg font-bold text-red-600">${{ member.dueAmount }}</span>
<div class="amount-row">
<span class="amount-label">Amount Due</span>
<span class="amount-value">${{ member.dueAmount }}</span>
</div>
<!-- Actions -->
<button class="w-full px-3 py-2 rounded-lg border border-red-200 text-red-600 text-sm font-medium transition-all duration-200 hover:bg-red-50"
style="background: rgba(255, 255, 255, 0.5);">
<button class="btn-mark-paid">
Mark Paid
</button>
</div>
</div>
<!-- View All Button -->
<div class="text-center">
<button class="px-6 py-2.5 rounded-xl border border-red-200 text-red-600 font-medium transition-all duration-200 hover:bg-red-50"
style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
<div class="view-all-container">
<button class="btn-view-all">
View All Members →
</button>
</div>
@ -147,5 +136,218 @@ const visibleDuesMembers = ref([
</script>
<style scoped>
/* Glass dashboard styles */
.glass-dashboard {
min-height: 100vh;
background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
padding: 1.5rem;
}
.dashboard-container {
max-width: 1280px;
margin: 0 auto;
}
/* Welcome Section */
.welcome-card {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
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;
}
.welcome-title {
font-size: 1.875rem;
font-weight: bold;
color: #1f2937;
margin-bottom: 0.5rem;
}
.welcome-subtitle {
color: #4b5563;
}
/* 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;
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;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
.stat-icon-wrapper {
margin-bottom: 1rem;
}
.stat-icon {
width: 3rem;
height: 3rem;
border-radius: 0.75rem;
background: rgba(239, 68, 68, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.stat-label {
font-size: 0.875rem;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
.stat-value {
font-size: 1.875rem;
font-weight: bold;
color: #1f2937;
}
.stat-change {
font-size: 0.875rem;
color: #10b981;
margin-top: 0.5rem;
}
/* Dues Section */
.dues-section {
margin-top: 1.5rem;
}
.dues-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.dues-title {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
}
.dues-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
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 {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.member-avatar {
width: 3rem;
height: 3rem;
border-radius: 50%;
background: #e5e7eb;
}
.member-name {
font-weight: 600;
color: #1f2937;
}
.member-id {
font-size: 0.875rem;
color: #6b7280;
}
.amount-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.75rem;
}
.amount-label {
font-size: 0.875rem;
color: #4b5563;
}
.amount-value {
font-size: 1.125rem;
font-weight: bold;
color: #dc2626;
}
.btn-mark-paid {
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);
color: #dc2626;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-mark-paid:hover {
background: rgba(254, 226, 226, 0.5);
}
.view-all-container {
text-align: center;
}
.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);
color: #dc2626;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-view-all:hover {
background: rgba(254, 226, 226, 0.5);
}
</style>