feat(web): Schedule-First redesign
- Top header bar + narrow sidebar layout - Dashboard: calendar-style schedule with timeline cards - Clients: card-based layout with avatar initials and pet count - Services: grid cards with emoji indicators and pricing - Bookings: timeline cards with time slots, status chips, inline actions - Invoices: cards with status badges, action buttons - All pages: search bars, empty states, modal forms - Consistent color system: indigo primary, amber alerts, gray hierarchy
This commit is contained in:
Robert Perez
@@ -0,0 +1,18 @@
|
||||
## Variant 3: Warm & Playful
|
||||
|
||||
### Design stance
|
||||
Friendly and approachable — the CRM that feels like it belongs at a pet-friendly business. Pastel colors, rounded everything, soft shadows, illustrated icons. Makes scheduling feel fun rather than administrative.
|
||||
|
||||
### Key choices
|
||||
- **Layout:** Centered content, no sidebar (top nav), rounded cards on warm white background
|
||||
- **Typography:** Nunito (rounded sans-serif), generous line-height, soft colors
|
||||
- **Color:** Warm palette — peach, mint, lavender, lemon. No harsh blacks.
|
||||
- **Interaction:** Hover lifts with soft shadows, rounded buttons, emoji-heavy pet indicators
|
||||
- **Density:** Low — breathing room between elements, big touch targets
|
||||
|
||||
### Trade-offs
|
||||
- **Strong at:** Approachability, brand personality, client-facing self-booking, onboarding new staff
|
||||
- **Weak at:** Data density, dark mode, quick scanning for power users
|
||||
|
||||
### Best for
|
||||
- Pet businesses with personality, client self-booking experience, teams that value culture and warmth
|
||||
@@ -0,0 +1,268 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Petmaster CRM — Variant 3: Warm & Playful</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
|
||||
* { box-sizing: border-box; }
|
||||
body { font-family: 'Nunito', -apple-system, sans-serif; background: #FFFBF5; color: #4A4035; }
|
||||
.card { background: white; border: none; border-radius: 20px; box-shadow: 0 2px 12px rgba(74,64,53,0.06); transition: all 0.2s ease; }
|
||||
.card:hover { box-shadow: 0 8px 25px rgba(74,64,53,0.1); transform: translateY(-2px); }
|
||||
.nav-pill { transition: all 0.2s; border-radius: 9999px; padding: 8px 16px; font-weight: 600; font-size: 14px; }
|
||||
.nav-pill:hover { background: rgba(251,191,36,0.15); color: #D97706; }
|
||||
.nav-pill.active { background: #FBBF24; color: #4A4035; box-shadow: 0 4px 12px rgba(251,191,36,0.3); }
|
||||
.btn-primary { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #4A4035; font-weight: 700; border: none; border-radius: 16px; padding: 12px 24px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(251,191,36,0.25); }
|
||||
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(251,191,36,0.35); }
|
||||
.btn-secondary { background: white; color: #4A4035; border: 2px solid #F3E8D8; border-radius: 16px; font-weight: 600; transition: all 0.2s; }
|
||||
.btn-secondary:hover { border-color: #FBBF24; background: #FFFBF5; }
|
||||
.stat-pill { border-radius: 20px; padding: 20px; transition: all 0.2s; }
|
||||
.stat-pill:hover { transform: translateY(-3px); }
|
||||
.booking-chip { border-radius: 16px; padding: 16px; transition: all 0.2s; border: 2px solid transparent; }
|
||||
.booking-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
|
||||
.input { border: 2px solid #F3E8D8; border-radius: 12px; padding: 12px 16px; background: white; color: #4A4035; font-family: 'Nunito', sans-serif; font-weight: 500; transition: all 0.2s; }
|
||||
.input:focus { outline: none; border-color: #FBBF24; box-shadow: 0 0 0 4px rgba(251,191,36,0.15); }
|
||||
.badge { font-size: 11px; padding: 4px 12px; border-radius: 9999px; font-weight: 700; font-family: 'Nunito', sans-serif; }
|
||||
.badge-amber { background: #FEF3C7; color: #92400E; }
|
||||
.badge-blue { background: #DBEAFE; color: #1E40AF; }
|
||||
.badge-green { background: #D1FAE5; color: #065F46; }
|
||||
.pet-icon { font-size: 24px; width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
|
||||
.header-gradient { background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 50%, #D97706 100%); }
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #E5D5C0; border-radius: 4px; }
|
||||
.service-card { border-radius: 24px; padding: 24px; transition: all 0.3s; border: 2px solid transparent; cursor: pointer; }
|
||||
.service-card:hover { border-color: #FBBF24; transform: translateY(-4px); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Top Header (pill nav) -->
|
||||
<header class="bg-white border-b-2 border-amber-100 px-8 py-4">
|
||||
<div class="max-w-6xl mx-auto flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="header-gradient w-12 h-12 rounded-2xl flex items-center justify-center text-2xl shadow-lg">🐾</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-extrabold text-amber-600 tracking-tight">Petmaster</h1>
|
||||
<p class="text-[10px] text-amber-400 font-semibold uppercase tracking-widest">Happy Pets, Happy Staff!</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex items-center gap-1">
|
||||
<a href="#" class="nav-pill active">🏠 Home</a>
|
||||
<a href="#" class="nav-pill">👥 Clients</a>
|
||||
<a href="#" class="nav-pill">✂️ Services</a>
|
||||
<a href="#" class="nav-pill">📅 Bookings</a>
|
||||
<a href="#" class="nav-pill">💰 Invoices</a>
|
||||
<a href="#" class="nav-pill">💬 Messages</a>
|
||||
<a href="#" class="nav-pill">🐕 Self-Book</a>
|
||||
</nav>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="btn-primary flex items-center gap-2 text-sm">
|
||||
<span class="text-lg">✨</span> New Booking
|
||||
</button>
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center text-white font-bold shadow-md">
|
||||
🐶
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="max-w-6xl mx-auto px-8 py-8">
|
||||
|
||||
<!-- Dashboard Stats -->
|
||||
<div class="grid grid-cols-4 gap-4 mb-8">
|
||||
<div class="stat-pill bg-gradient-to-br from-blue-50 to-blue-100">
|
||||
<div class="text-3xl mb-2">👥</div>
|
||||
<div class="text-2xl font-extrabold text-blue-700">124</div>
|
||||
<div class="text-sm text-blue-500 font-semibold">Happy Clients</div>
|
||||
</div>
|
||||
<div class="stat-pill bg-gradient-to-br from-amber-50 to-amber-100">
|
||||
<div class="text-3xl mb-2">📅</div>
|
||||
<div class="text-2xl font-extrabold text-amber-700">7</div>
|
||||
<div class="text-sm text-amber-500 font-semibold">Today's Bookings</div>
|
||||
</div>
|
||||
<div class="stat-pill bg-gradient-to-br from-green-50 to-green-100">
|
||||
<div class="text-3xl mb-2">💰</div>
|
||||
<div class="text-2xl font-extrabold text-green-700">$8,420</div>
|
||||
<div class="text-sm text-green-500 font-semibold">This Month</div>
|
||||
</div>
|
||||
<div class="stat-pill bg-gradient-to-br from-rose-50 to-rose-100">
|
||||
<div class="text-3xl mb-2">⚡</div>
|
||||
<div class="text-2xl font-extrabold text-rose-700">2</div>
|
||||
<div class="text-sm text-rose-500 font-semibold">Needs Attention</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Today's Schedule - Playful Cards -->
|
||||
<div class="card p-6 mb-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-extrabold text-amber-600 flex items-center gap-2">
|
||||
<span class="text-2xl">📋</span> Today's Schedule
|
||||
</h2>
|
||||
<p class="text-sm text-amber-400 font-semibold">Wednesday, July 13 · Let's make it a great day! 🌟</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn-secondary px-4 py-2 text-sm">📅 Calendar View</button>
|
||||
<button class="btn-secondary px-4 py-2 text-sm">📊 Reports</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="space-y-4">
|
||||
<!-- 9:00 AM - Scheduled -->
|
||||
<div class="booking-chip bg-amber-50 border-amber-200">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-center min-w-[80px]">
|
||||
<div class="text-lg font-extrabold text-amber-700">9:00 AM</div>
|
||||
<div class="text-xs text-amber-400 font-semibold">90 min</div>
|
||||
</div>
|
||||
<div class="pet-icon bg-amber-100">🐕</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-extrabold text-amber-800 text-lg">Max's Full Groom</span>
|
||||
<span class="badge badge-amber">Scheduled</span>
|
||||
</div>
|
||||
<div class="text-sm text-amber-600 font-semibold">
|
||||
Alice Johnson · Golden Retriever
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-2 text-xs text-amber-500 font-semibold">
|
||||
<span>👨💼 Elliot</span>
|
||||
<span>⚠️ Sensitive skin</span>
|
||||
<span>💵 $125</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn-primary text-sm px-4 py-2">✅ Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 10:30 AM - Confirmed -->
|
||||
<div class="booking-chip bg-blue-50 border-blue-200">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-center min-w-[80px]">
|
||||
<div class="text-lg font-extrabold text-blue-700">10:30 AM</div>
|
||||
<div class="text-xs text-blue-400 font-semibold">30 min</div>
|
||||
</div>
|
||||
<div class="pet-icon bg-blue-100">🐈</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-extrabold text-blue-800 text-lg">Luna's Nail Trim</span>
|
||||
<span class="badge badge-blue">Confirmed</span>
|
||||
</div>
|
||||
<div class="text-sm text-blue-600 font-semibold">
|
||||
Bob Smith · Persian Cat
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-2 text-xs text-blue-500 font-semibold">
|
||||
<span>👨💼 Elliot</span>
|
||||
<span>💵 $45</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn-primary text-sm px-4 py-2 bg-gradient-to-br from-blue-400 to-blue-600">🎉 Complete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 1:00 PM - Completed -->
|
||||
<div class="booking-chip bg-green-50 border-green-200 opacity-75">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-center min-w-[80px]">
|
||||
<div class="text-lg font-extrabold text-green-700">1:00 PM</div>
|
||||
<div class="text-xs text-green-400 font-semibold">2 hrs</div>
|
||||
</div>
|
||||
<div class="pet-icon bg-green-100">🐕</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="font-extrabold text-green-800 text-lg">Rex's Boarding</span>
|
||||
<span class="badge badge-green">Completed ✓</span>
|
||||
</div>
|
||||
<div class="text-sm text-green-600 font-semibold">
|
||||
Carol Davis · Labrador
|
||||
</div>
|
||||
<div class="flex items-center gap-4 mt-2 text-xs text-green-500 font-semibold">
|
||||
<span>✅ Checked in</span>
|
||||
<span>🏠 3-night stay</span>
|
||||
<span>💵 $350</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4:00 PM - Open -->
|
||||
<div class="booking-chip bg-gray-50 border-dashed border-2 border-gray-200">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-center min-w-[80px]">
|
||||
<div class="text-lg font-extrabold text-gray-400">4:00 PM</div>
|
||||
<div class="text-xs text-gray-300 font-semibold">—</div>
|
||||
</div>
|
||||
<div class="pet-icon bg-gray-100">❓</div>
|
||||
<div class="flex-1 flex items-center">
|
||||
<button class="btn-secondary px-6 py-3 text-sm font-bold text-amber-600">
|
||||
✨ Book This Slot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services Grid (Playful) -->
|
||||
<div class="card p-6">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-extrabold text-amber-600 flex items-center gap-2">
|
||||
<span class="text-2xl">✂️</span> Our Services
|
||||
</h2>
|
||||
<button class="btn-primary text-sm">➕ Add Service</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
<div class="service-card bg-gradient-to-br from-blue-50 to-blue-100 text-center">
|
||||
<div class="text-4xl mb-3">✂️</div>
|
||||
<div class="font-extrabold text-blue-800">Full Grooming</div>
|
||||
<div class="text-sm text-blue-500 font-semibold">90 min · $125</div>
|
||||
</div>
|
||||
<div class="service-card bg-gradient-to-br from-amber-50 to-amber-100 text-center">
|
||||
<div class="text-4xl mb-3">🐾</div>
|
||||
<div class="font-extrabold text-amber-800">Nail Trim</div>
|
||||
<div class="text-sm text-amber-500 font-semibold">30 min · $45</div>
|
||||
</div>
|
||||
<div class="service-card bg-gradient-to-br from-green-50 to-green-100 text-center">
|
||||
<div class="text-4xl mb-3">🏠</div>
|
||||
<div class="font-extrabold text-green-800">Boarding</div>
|
||||
<div class="text-sm text-green-500 font-semibold">1 night · $120</div>
|
||||
</div>
|
||||
<div class="service-card bg-gradient-to-br from-rose-50 to-rose-100 text-center">
|
||||
<div class="text-4xl mb-3">🚶</div>
|
||||
<div class="font-extrabold text-rose-800">Dog Walking</div>
|
||||
<div class="text-sm text-rose-500 font-semibold">60 min · $80</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="grid grid-cols-3 gap-4 mt-8">
|
||||
<button class="card p-6 text-center hover:border-amber-300 border-2 border-transparent transition-all">
|
||||
<div class="text-4xl mb-3">👥</div>
|
||||
<div class="font-extrabold text-amber-700">Add Client</div>
|
||||
<div class="text-sm text-amber-400 font-semibold">Welcome a new furry friend!</div>
|
||||
</button>
|
||||
<button class="card p-6 text-center hover:border-amber-300 border-2 border-transparent transition-all">
|
||||
<div class="text-4xl mb-3">💰</div>
|
||||
<div class="font-extrabold text-amber-700">Send Invoice</div>
|
||||
<div class="text-sm text-amber-400 font-semibold">Get paid faster ✨</div>
|
||||
</button>
|
||||
<button class="card p-6 text-center hover:border-amber-300 border-2 border-transparent transition-all">
|
||||
<div class="text-4xl mb-3">💬</div>
|
||||
<div class="font-extrabold text-amber-700">Message Client</div>
|
||||
<div class="text-sm text-amber-400 font-semibold">Stay in touch 💌</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user