tyler/blackcanyontickets
1
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

feat: enhance admin dashboard with glassmorphism design system

Browse Source 
- Updated central container with semi-transparent glass effects
- Added subtle inner glow with gradient overlay
- Enhanced quick action buttons with hover animations and blue-purple highlights
- Improved recent activity cards with glassmorphism styling
- Updated modal styling with deeper shadows and glass effects
- Added smooth transitions and scaling animations throughout
- Maintained excellent text legibility with white text on dark backgrounds
- Harmonized visual design with deep purple gradient theme

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
dzinesco
2025-07-15 08:48:10 -06:00
parent dbf4b11e81
commit 1474202a25
1 changed files with 25 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/pages/admin/dashboard.astro
View File

@@ -158,7 +158,10 @@ const auth = {
</div> </div>
<!-- Tab Content --> <!-- Tab Content -->
<div class="bg-white/10 backdrop-blur-xl border border-white/20 shadow-lg rounded-2xl"> <div class="bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl rounded-2xl backdrop-saturate-150 hover:bg-white/10 transition-all duration-300 relative overflow-hidden" style="box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.1), 0 25px 50px -12px rgba(0,0,0,0.5);">
<!-- Inner glow effect -->
<div class="absolute inset-0 rounded-2xl bg-gradient-to-r from-blue-500/5 to-purple-500/5 pointer-events-none"></div>
<div class="relative z-10">
<!-- Overview Tab --> <!-- Overview Tab -->
<div id="content-overview" class="tab-content p-6"> <div id="content-overview" class="tab-content p-6">
<h3 class="text-lg font-medium text-white mb-6">Platform Overview</h3> <h3 class="text-lg font-medium text-white mb-6">Platform Overview</h3>
@@ -179,34 +182,34 @@ const auth = {
<button <button
id="create-test-event-btn" id="create-test-event-btn"
onclick="createTestEvent()" onclick="createTestEvent()"
class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200" class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
> >
<div class="text-sm font-medium text-white">Create Test Event</div> <div class="text-sm font-medium text-white group-hover:text-blue-200">Create Test Event</div>
<div class="text-xs text-white/80">Setup demo event with sample data</div> <div class="text-xs text-white/70 group-hover:text-purple-200">Setup demo event with sample data</div>
</button> </button>
<button <button
id="create-admin-user-btn" id="create-admin-user-btn"
onclick="createAdminUser()" onclick="createAdminUser()"
class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200" class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
> >
<div class="text-sm font-medium text-white">Create Admin User</div> <div class="text-sm font-medium text-white group-hover:text-blue-200">Create Admin User</div>
<div class="text-xs text-white/80">Add new administrator account</div> <div class="text-xs text-white/70 group-hover:text-purple-200">Add new administrator account</div>
</button> </button>
<button <button
id="quick-settings-btn" id="quick-settings-btn"
onclick="goToSettings()" onclick="goToSettings()"
class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200" class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
> >
<div class="text-sm font-medium text-white">Platform Settings</div> <div class="text-sm font-medium text-white group-hover:text-blue-200">Platform Settings</div>
<div class="text-xs text-white/80">Configure platform-wide settings</div> <div class="text-xs text-white/70 group-hover:text-purple-200">Configure platform-wide settings</div>
</button> </button>
<button <button
id="export-data-btn" id="export-data-btn"
onclick="exportPlatformData()" onclick="exportPlatformData()"
class="w-full text-left px-4 py-3 bg-white/10 backdrop-blur-xl rounded-lg hover:bg-gray-100 transition-colors duration-200" class="w-full text-left px-4 py-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300 group"
> >
<div class="text-sm font-medium text-white">Export Data</div> <div class="text-sm font-medium text-white group-hover:text-blue-200">Export Data</div>
<div class="text-xs text-white/80">Download platform reports</div> <div class="text-xs text-white/70 group-hover:text-purple-200">Download platform reports</div>
</button> </button>
</div> </div>
</div> </div>
@@ -270,6 +273,7 @@ const auth = {
</div> </div>
</div> </div>
</div> </div>
</div>
</main> </main>
</div> </div>
</Layout> </Layout>
@@ -471,16 +475,16 @@ const auth = {
const activities = await adminApi.getRecentActivity(); const activities = await adminApi.getRecentActivity();
const activityHtml = activities.length > 0 ? activities.map(activity => ` const activityHtml = activities.length > 0 ? activities.map(activity => `
<div class="flex items-start space-x-3 p-3 bg-white/10 backdrop-blur-xl rounded-lg"> <div class="flex items-start space-x-3 p-3 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg hover:bg-white/10 hover:border-white/20 hover:shadow-xl hover:scale-[1.02] transition-all duration-300">
<div class="text-lg">${activity.icon}</div> <div class="text-lg">${activity.icon}</div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<p class="text-sm font-medium text-white">${activity.title}</p> <p class="text-sm font-medium text-white">${activity.title}</p>
<p class="text-xs text-white/80">${activity.subtitle}</p> <p class="text-xs text-white/70">${activity.subtitle}</p>
<p class="text-xs text-white/60 mt-1">${activity.time.toLocaleString()}</p> <p class="text-xs text-blue-200/60 mt-1">${activity.time.toLocaleString()}</p>
</div> </div>
</div> </div>
`).join('') : ` `).join('') : `
<div class="text-center py-8"> <div class="text-center py-8 bg-white/5 backdrop-blur-xl rounded-xl border border-white/10 shadow-lg">
<div class="text-4xl mb-2">📊</div> <div class="text-4xl mb-2">📊</div>
<p class="text-white/80">No recent activity</p> <p class="text-white/80">No recent activity</p>
<p class="text-white/60 text-sm">Activity will appear here as users interact with the platform</p> <p class="text-white/60 text-sm">Activity will appear here as users interact with the platform</p>
@@ -556,9 +560,9 @@ const auth = {
</div> </div>
<!-- Fee Edit Modal --> <!-- Fee Edit Modal -->
<div id="fee-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden z-50"> <div id="fee-modal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="inline-block align-bottom bg-white/10 backdrop-blur-xl border border-white/20 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> <div class="inline-block align-bottom bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full backdrop-saturate-150">
<form id="fee-form" class="bg-white/5 backdrop-blur-xl px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> <form id="fee-form" class="bg-white/5 backdrop-blur-xl px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start"> <div class="sm:flex sm:items-start">
<div class="w-full"> <div class="w-full">
@@ -636,14 +640,14 @@ const auth = {
<div class="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse"> <div class="mt-5 sm:mt-6 sm:flex sm:flex-row-reverse">
<button <button
type="submit" type="submit"
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm" class="w-full inline-flex justify-center rounded-xl border border-transparent shadow-lg px-4 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 text-base font-medium text-white hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm transition-all duration-200"
> >
Save Changes Save Changes
</button> </button>
<button <button
type="button" type="button"
onclick="closeFeeModal()" onclick="closeFeeModal()"
class="mt-3 w-full inline-flex justify-center rounded-md border border-white/20 shadow-sm px-4 py-2 bg-white text-base font-medium text-white/80 hover:bg-white/10 backdrop-blur-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm" class="mt-3 w-full inline-flex justify-center rounded-xl border border-white/20 shadow-lg px-4 py-2 bg-white/5 text-base font-medium text-white hover:bg-white/10 hover:border-white/30 backdrop-blur-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm transition-all duration-200"
> >
Cancel Cancel
</button> </button>