fix: replace non-standard color classes with theme system
Replace teal-brand→primary, teal-dark→primary-dark, teal-light→primary-light, gray-soft→gray-200, gray-brand→gray-900 across 53 files. Fixes theming not applying — colors now use CSS custom properties from org_config. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -22,7 +22,7 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden bg-gradient-to-br from-teal-dark via-teal-brand to-teal-dark">
|
||||
<section class="relative overflow-hidden bg-gradient-to-br from-primary-dark via-primary to-primary-dark">
|
||||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
|
||||
<div class="max-w-3xl">
|
||||
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-white leading-tight">
|
||||
@@ -34,7 +34,7 @@
|
||||
<div class="mt-10 flex flex-wrap gap-3">
|
||||
<a
|
||||
href="/pets?species=dog"
|
||||
class="inline-flex items-center px-7 py-3.5 text-base font-semibold rounded-full bg-white text-teal-brand hover:bg-gray-soft transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||
class="inline-flex items-center px-7 py-3.5 text-base font-semibold rounded-full bg-white text-primary hover:bg-gray-200 transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Meet Our Dogs
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 ml-2">
|
||||
@@ -43,7 +43,7 @@
|
||||
</a>
|
||||
<a
|
||||
href="/pets?species=cat"
|
||||
class="inline-flex items-center px-7 py-3.5 text-base font-semibold rounded-full bg-white text-teal-brand hover:bg-gray-soft transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||
class="inline-flex items-center px-7 py-3.5 text-base font-semibold rounded-full bg-white text-primary hover:bg-gray-200 transition-colors duration-200 shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Meet Our Cats
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 ml-2">
|
||||
@@ -75,7 +75,7 @@
|
||||
<section class="py-16 md:py-24">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-brand">Pets Looking for Homes</h2>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">Pets Looking for Homes</h2>
|
||||
<p class="mt-3 text-gray-mid text-lg max-w-2xl mx-auto">
|
||||
Meet some of our wonderful animals waiting for their forever families.
|
||||
</p>
|
||||
@@ -96,7 +96,7 @@
|
||||
<div class="mt-12 text-center">
|
||||
<a
|
||||
href="/pets"
|
||||
class="inline-flex items-center gap-2 px-8 py-3 text-base font-semibold text-teal-brand border-2 border-teal-brand rounded-full hover:bg-teal-brand hover:text-white transition-all duration-200"
|
||||
class="inline-flex items-center gap-2 px-8 py-3 text-base font-semibold text-primary border-2 border-primary rounded-full hover:bg-primary hover:text-white transition-all duration-200"
|
||||
>
|
||||
View All Available Pets
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
@@ -111,7 +111,7 @@
|
||||
<section class="py-16 md:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-brand">How You Can Help</h2>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">How You Can Help</h2>
|
||||
<p class="mt-3 text-gray-mid text-lg max-w-2xl mx-auto">
|
||||
There are many ways to make a difference in the life of a rescue pet.
|
||||
</p>
|
||||
@@ -119,16 +119,16 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="bg-warm-bg rounded-2xl p-8 text-center hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="w-16 h-16 mx-auto mb-6 bg-teal-light rounded-2xl flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-teal-brand">
|
||||
<div class="w-16 h-16 mx-auto mb-6 bg-primary-light rounded-2xl flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-primary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 21v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21m0 0h4.5V3.545M12.75 21h7.5V10.75M2.25 21h1.5m18 0h-18M2.25 9l4.5-1.636M18.75 3l-1.5.545m0 6.205l3 1m1.5.5l-1.5-.5M6.75 7.364V3h-3v18m3-13.636l10.5-3.819" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-brand mb-3">Adopt</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Adopt</h3>
|
||||
<p class="text-gray-mid text-sm leading-relaxed mb-6">
|
||||
Open your heart and home to a rescue pet. Our adoption process is thorough, and we will help you find the perfect match for your family.
|
||||
</p>
|
||||
<a href="/pets" class="inline-flex items-center gap-1 text-teal-brand font-semibold hover:text-teal-dark transition-colors">
|
||||
<a href="/pets" class="inline-flex items-center gap-1 text-primary font-semibold hover:text-primary-dark transition-colors">
|
||||
Browse Pets
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
@@ -137,16 +137,16 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-warm-bg rounded-2xl p-8 text-center hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="w-16 h-16 mx-auto mb-6 bg-teal-light rounded-2xl flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-teal-brand">
|
||||
<div class="w-16 h-16 mx-auto mb-6 bg-primary-light rounded-2xl flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-primary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-brand mb-3">Foster</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Foster</h3>
|
||||
<p class="text-gray-mid text-sm leading-relaxed mb-6">
|
||||
Provide a temporary safe haven for a pet in need. Fostering saves lives and helps pets prepare for their forever homes.
|
||||
</p>
|
||||
<a href="/become-a-foster" class="inline-flex items-center gap-1 text-teal-brand font-semibold hover:text-teal-dark transition-colors">
|
||||
<a href="/become-a-foster" class="inline-flex items-center gap-1 text-primary font-semibold hover:text-primary-dark transition-colors">
|
||||
Learn More
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
@@ -155,16 +155,16 @@
|
||||
</div>
|
||||
|
||||
<div class="bg-warm-bg rounded-2xl p-8 text-center hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="w-16 h-16 mx-auto mb-6 bg-teal-light rounded-2xl flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-teal-brand">
|
||||
<div class="w-16 h-16 mx-auto mb-6 bg-primary-light rounded-2xl flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-primary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-brand mb-3">Donate</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-3">Donate</h3>
|
||||
<p class="text-gray-mid text-sm leading-relaxed mb-6">
|
||||
Your generous donations help cover veterinary care, food, and supplies for our rescue pets. Every dollar makes a difference.
|
||||
</p>
|
||||
<a href="/donate" class="inline-flex items-center gap-1 text-teal-brand font-semibold hover:text-teal-dark transition-colors">
|
||||
<a href="/donate" class="inline-flex items-center gap-1 text-primary font-semibold hover:text-primary-dark transition-colors">
|
||||
Give Now
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
@@ -176,7 +176,7 @@
|
||||
</section>
|
||||
|
||||
<!-- Newsletter Signup Banner -->
|
||||
<section class="py-12 md:py-16 bg-gradient-to-r from-teal-dark via-teal-brand to-teal-dark">
|
||||
<section class="py-12 md:py-16 bg-gradient-to-r from-primary-dark via-primary to-primary-dark">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col md:flex-row items-center gap-6 md:gap-10">
|
||||
<div class="flex-1 text-center md:text-left">
|
||||
@@ -196,7 +196,7 @@
|
||||
<section class="py-16 md:py-24">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-brand">Upcoming Events</h2>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">Upcoming Events</h2>
|
||||
<p class="mt-3 text-gray-mid text-lg max-w-2xl mx-auto">
|
||||
Join us at an upcoming event to meet our pets and support our mission.
|
||||
</p>
|
||||
@@ -211,14 +211,14 @@
|
||||
<img src={event.imageUrl} alt={event.title} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="aspect-[16/9] bg-teal-light flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-teal-brand/30">
|
||||
<div class="aspect-[16/9] bg-primary-light flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-primary/30">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-2 text-sm text-teal-brand font-medium mb-2">
|
||||
<div class="flex items-center gap-2 text-sm text-primary font-medium mb-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
|
||||
</svg>
|
||||
@@ -229,7 +229,7 @@
|
||||
year: 'numeric'
|
||||
})}
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-brand mb-2">{event.title}</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-2">{event.title}</h3>
|
||||
{#if event.location}
|
||||
<div class="flex items-center gap-1.5 text-sm text-gray-mid mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
@@ -248,7 +248,7 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<a href="/events" class="inline-flex items-center gap-2 text-teal-brand font-semibold hover:text-teal-dark transition-colors">
|
||||
<a href="/events" class="inline-flex items-center gap-2 text-primary font-semibold hover:text-primary-dark transition-colors">
|
||||
View All Events
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
|
||||
@@ -257,7 +257,7 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-center py-12 bg-white rounded-2xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 mx-auto text-gray-soft mb-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 mx-auto text-gray-200 mb-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
|
||||
</svg>
|
||||
<p class="text-gray-mid text-lg">No upcoming events at this time.</p>
|
||||
@@ -273,7 +273,7 @@
|
||||
{#if facebookUrl}
|
||||
<section class="py-16 md:py-24 bg-warm-bg">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-brand">Follow Us</h2>
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">Follow Us</h2>
|
||||
<p class="mt-3 text-gray-mid text-lg max-w-2xl mx-auto">
|
||||
Stay up to date with our latest rescue stories, adoption news, and event announcements.
|
||||
</p>
|
||||
@@ -283,7 +283,7 @@
|
||||
href={facebookUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-2 text-teal-brand font-semibold hover:text-teal-dark transition-colors"
|
||||
class="inline-flex items-center gap-2 text-primary font-semibold hover:text-primary-dark transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
|
||||
|
||||
@@ -12,10 +12,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">{blocks?.intro?.heading ?? `About ${orgName}`}</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
{blocks?.intro?.text ?? 'Every pet deserves a second chance at a happy life.'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -25,8 +25,8 @@
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<h2 class="text-3xl font-bold text-gray-brand text-center">{blocks?.mission?.heading ?? 'Our Mission'}</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 text-center">{blocks?.mission?.heading ?? 'Our Mission'}</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<p class="mt-8 text-lg leading-relaxed text-gray-mid text-center">
|
||||
{blocks?.mission?.text ?? `${orgName} is a foster-based rescue dedicated to saving animals in need and finding them loving forever homes. We believe every pet deserves safety, compassion, and a family to call their own.`}
|
||||
</p>
|
||||
@@ -37,41 +37,41 @@
|
||||
<!-- How We Work -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">{blocks?.how_we_work?.heading ?? 'How We Work'}</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-3xl font-bold text-gray-900">{blocks?.how_we_work?.heading ?? 'How We Work'}</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-3">
|
||||
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="rounded-xl border border-gray-200 bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Foster-Based Model</h3>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900">Foster-Based Model</h3>
|
||||
<p class="mt-3 text-gray-mid">
|
||||
Every pet lives in a loving foster home where they receive personalized attention, socialization, and care while waiting for their forever family.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="rounded-xl border border-gray-200 bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Complete Vetting</h3>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900">Complete Vetting</h3>
|
||||
<p class="mt-3 text-gray-mid">
|
||||
Every pet in our care receives a full veterinary workup, vaccinations, spay/neuter surgery, microchipping, and any additional medical treatment they need.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="rounded-xl border border-gray-200 bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Thoughtful Matching</h3>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900">Thoughtful Matching</h3>
|
||||
<p class="mt-3 text-gray-mid">
|
||||
We carefully match each pet with the right family through our application and screening process — for a fit that lasts a lifetime.
|
||||
</p>
|
||||
@@ -84,8 +84,8 @@
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">Our Story</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-3xl font-bold text-gray-900">Our Story</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
{#if blocks?.story?.text}
|
||||
<div class="mt-8 prose prose-gray max-w-none text-gray-mid">{@html blocks.story.text}</div>
|
||||
{:else}
|
||||
@@ -108,36 +108,36 @@
|
||||
<!-- Team & Volunteers -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4 text-center">
|
||||
<h2 class="text-3xl font-bold text-gray-brand">Our Team & Volunteers</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">Our Team & Volunteers</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<p class="mx-auto mt-6 max-w-2xl text-lg text-gray-mid">
|
||||
{orgName} runs on the dedication of our volunteers — from foster families opening their homes to transport drivers, event coordinators, and behind-the-scenes helpers.
|
||||
</p>
|
||||
<div class="mt-10 grid gap-6 sm:grid-cols-3">
|
||||
<div class="rounded-lg bg-teal-light/50 p-6">
|
||||
<p class="text-4xl font-bold text-teal-brand">100%</p>
|
||||
<p class="mt-2 font-medium text-gray-brand">Volunteer Run</p>
|
||||
<div class="rounded-lg bg-primary-light/50 p-6">
|
||||
<p class="text-4xl font-bold text-primary">100%</p>
|
||||
<p class="mt-2 font-medium text-gray-900">Volunteer Run</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-teal-light/50 p-6">
|
||||
<p class="text-4xl font-bold text-teal-brand">Foster</p>
|
||||
<p class="mt-2 font-medium text-gray-brand">Based Network</p>
|
||||
<div class="rounded-lg bg-primary-light/50 p-6">
|
||||
<p class="text-4xl font-bold text-primary">Foster</p>
|
||||
<p class="mt-2 font-medium text-gray-900">Based Network</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-teal-light/50 p-6">
|
||||
<p class="text-4xl font-bold text-teal-brand">Hundreds</p>
|
||||
<p class="mt-2 font-medium text-gray-brand">Of Pets Saved</p>
|
||||
<div class="rounded-lg bg-primary-light/50 p-6">
|
||||
<p class="text-4xl font-bold text-primary">Hundreds</p>
|
||||
<p class="mt-2 font-medium text-gray-900">Of Pets Saved</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-3xl font-bold">Want to Help?</h2>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
See how you can make a difference in the lives of pets who need it most.
|
||||
</p>
|
||||
<a href="/how-to-help" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||
<a href="/how-to-help" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl">
|
||||
How to Help
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Adoption Process</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">Everything you need to know about adopting from us.</p>
|
||||
<p class="mt-4 text-lg text-primary-light/90">Everything you need to know about adopting from us.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
Thank you for your interest in adopting a pet from {orgName}!
|
||||
{#if orgEmail}
|
||||
Please email us at
|
||||
<a href="mailto:{orgEmail}" class="font-semibold text-teal-brand hover:text-teal-dark underline">{orgEmail}</a>
|
||||
<a href="mailto:{orgEmail}" class="font-semibold text-primary hover:text-primary-dark underline">{orgEmail}</a>
|
||||
with any questions or concerns.
|
||||
{/if}
|
||||
</p>
|
||||
@@ -40,43 +40,43 @@
|
||||
<!-- FAQ Accordion -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-3xl px-4">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">Frequently Asked Questions</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-3xl font-bold text-gray-900">Frequently Asked Questions</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
|
||||
<div class="mt-12 space-y-4">
|
||||
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm" open>
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||
<details class="group rounded-xl border border-gray-200 bg-warm-bg shadow-sm" open>
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-900 transition hover:text-primary [&::-webkit-details-marker]:hidden">
|
||||
<span>What is the adoption process?</span>
|
||||
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<svg class="h-5 w-5 shrink-0 text-primary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-mid leading-relaxed">
|
||||
<p class="mb-4">Submit an adoption application and complete each question thoroughly. Once submitted, the following steps will take place:</p>
|
||||
<ul class="space-y-4">
|
||||
<li><strong class="text-gray-brand">Reference Check</strong> — We may contact your vet, landlord, and personal references.</li>
|
||||
<li><strong class="text-gray-brand">Pre-Adoption Home Visit</strong> — We will schedule a visit to ensure the home is safe for the pet.</li>
|
||||
<li><strong class="text-gray-brand">Meet & Greet</strong> — Once approved, we coordinate a time for you to meet the pet.</li>
|
||||
<li><strong class="text-gray-brand">Adoption is Final</strong> — Adoption fees are non-refundable if the pet needs to be returned.</li>
|
||||
<li><strong class="text-gray-900">Reference Check</strong> — We may contact your vet, landlord, and personal references.</li>
|
||||
<li><strong class="text-gray-900">Pre-Adoption Home Visit</strong> — We will schedule a visit to ensure the home is safe for the pet.</li>
|
||||
<li><strong class="text-gray-900">Meet & Greet</strong> — Once approved, we coordinate a time for you to meet the pet.</li>
|
||||
<li><strong class="text-gray-900">Adoption is Final</strong> — Adoption fees are non-refundable if the pet needs to be returned.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm">
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||
<details class="group rounded-xl border border-gray-200 bg-warm-bg shadow-sm">
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-900 transition hover:text-primary [&::-webkit-details-marker]:hidden">
|
||||
<span>What are the adoption fees?</span>
|
||||
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<svg class="h-5 w-5 shrink-0 text-primary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="px-6 pb-6 text-gray-mid leading-relaxed">
|
||||
{#if adoptionFee}
|
||||
<p>The standard adoption fee is <strong class="text-gray-brand">${adoptionFee}</strong>. Fees help cover veterinary care, vaccinations, spay/neuter, and microchipping.</p>
|
||||
<p>The standard adoption fee is <strong class="text-gray-900">${adoptionFee}</strong>. Fees help cover veterinary care, vaccinations, spay/neuter, and microchipping.</p>
|
||||
{:else}
|
||||
<p>
|
||||
Adoption fees vary. Contact us
|
||||
{#if orgEmail}
|
||||
at <a href="mailto:{orgEmail}" class="font-semibold text-teal-brand hover:text-teal-dark underline">{orgEmail}</a>
|
||||
at <a href="mailto:{orgEmail}" class="font-semibold text-primary hover:text-primary-dark underline">{orgEmail}</a>
|
||||
{/if}
|
||||
for current fee information.
|
||||
</p>
|
||||
@@ -84,10 +84,10 @@
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm">
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||
<details class="group rounded-xl border border-gray-200 bg-warm-bg shadow-sm">
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-900 transition hover:text-primary [&::-webkit-details-marker]:hidden">
|
||||
<span>What happens after my application is approved?</span>
|
||||
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<svg class="h-5 w-5 shrink-0 text-primary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</summary>
|
||||
@@ -96,10 +96,10 @@
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="group rounded-xl border border-gray-soft bg-warm-bg shadow-sm">
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-brand transition hover:text-teal-brand [&::-webkit-details-marker]:hidden">
|
||||
<details class="group rounded-xl border border-gray-200 bg-warm-bg shadow-sm">
|
||||
<summary class="flex cursor-pointer items-center justify-between gap-4 px-6 py-5 text-lg font-semibold text-gray-900 transition hover:text-primary [&::-webkit-details-marker]:hidden">
|
||||
<span>Have more questions?</span>
|
||||
<svg class="h-5 w-5 shrink-0 text-teal-brand transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<svg class="h-5 w-5 shrink-0 text-primary transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</summary>
|
||||
@@ -107,7 +107,7 @@
|
||||
<p>
|
||||
Contact us
|
||||
{#if orgEmail}
|
||||
at <a href="mailto:{orgEmail}" class="font-semibold text-teal-brand hover:text-teal-dark underline">{orgEmail}</a>
|
||||
at <a href="mailto:{orgEmail}" class="font-semibold text-primary hover:text-primary-dark underline">{orgEmail}</a>
|
||||
{/if}
|
||||
and we will be happy to answer any questions.
|
||||
</p>
|
||||
@@ -119,17 +119,17 @@
|
||||
|
||||
<!-- CTA -->
|
||||
{#if data.orgConfig.applications.adoptionEnabled}
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-3xl font-bold">Ready to Apply?</h2>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
Start the process today and take the first step toward welcoming a rescue pet into your family.
|
||||
</p>
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-4">
|
||||
<a href="/pets" class="inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||
<a href="/pets" class="inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl">
|
||||
Browse Available Pets
|
||||
</a>
|
||||
<a href="/apply/adopt" class="inline-block rounded-lg border-2 border-white px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-white hover:text-teal-brand">
|
||||
<a href="/apply/adopt" class="inline-block rounded-lg border-2 border-white px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-white hover:text-primary">
|
||||
Submit an Application
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Become a Foster</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">Open your heart and home to a pet in need.</p>
|
||||
<p class="mt-4 text-lg text-primary-light/90">Open your heart and home to a pet in need.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<h2 class="text-3xl font-bold text-gray-brand text-center">What Does Fostering Entail?</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 text-center">What Does Fostering Entail?</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<div class="mt-8 space-y-4 text-lg leading-relaxed text-gray-mid">
|
||||
<p>
|
||||
Fostering means taking in a pet and providing them with a safe, loving environment while they wait for their forever home. You are giving them the gift of a normal home life.
|
||||
@@ -52,8 +52,8 @@
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<h2 class="text-3xl font-bold text-gray-brand text-center">What If I Want to Adopt My Foster Pet?</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-900 text-center">What If I Want to Adopt My Foster Pet?</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<div class="mt-8 space-y-4 text-lg leading-relaxed text-gray-mid">
|
||||
<p>
|
||||
We completely understand that you may fall in love with your foster pet — it happens more often than you might think! Foster families always get first consideration for adopting the animal in their care.
|
||||
@@ -67,20 +67,20 @@
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-3xl font-bold">Ready to Foster?</h2>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
Fill out our foster application or reach out with any questions.
|
||||
</p>
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-4">
|
||||
{#if fosterEnabled}
|
||||
<a href="/apply/foster" class="inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||
<a href="/apply/foster" class="inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl">
|
||||
Apply to Foster
|
||||
</a>
|
||||
{/if}
|
||||
{#if orgEmail}
|
||||
<a href="mailto:{orgEmail}" class="inline-block rounded-lg border-2 border-white px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-white hover:text-teal-brand">
|
||||
<a href="mailto:{orgEmail}" class="inline-block rounded-lg border-2 border-white px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-white hover:text-primary">
|
||||
Email Us
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
@@ -17,10 +17,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">{blocks?.intro?.heading ?? 'Contact Us'}</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
{blocks?.intro?.text ?? 'We would love to hear from you.'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -35,28 +35,28 @@
|
||||
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-2">
|
||||
{#if orgEmail}
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="mt-4 text-xl font-semibold text-gray-brand">Email</h2>
|
||||
<a href="mailto:{orgEmail}" class="mt-3 inline-block text-lg font-medium text-teal-brand hover:text-teal-dark underline">
|
||||
<h2 class="mt-4 text-xl font-semibold text-gray-900">Email</h2>
|
||||
<a href="mailto:{orgEmail}" class="mt-3 inline-block text-lg font-medium text-primary hover:text-primary-dark underline">
|
||||
{orgEmail}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if blocks?.info?.address}
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="mt-4 text-xl font-semibold text-gray-brand">Mailing Address</h2>
|
||||
<h2 class="mt-4 text-xl font-semibold text-gray-900">Mailing Address</h2>
|
||||
<p class="mt-3 text-lg text-gray-mid">{blocks.info.address}</p>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -65,23 +65,23 @@
|
||||
<!-- Social Links -->
|
||||
{#if facebookUrl || instagramUrl}
|
||||
<div class="mt-12">
|
||||
<h2 class="text-center text-2xl font-bold text-gray-brand">Follow Us</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-2xl font-bold text-gray-900">Follow Us</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-6">
|
||||
{#if facebookUrl}
|
||||
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 rounded-lg border border-gray-soft bg-white px-6 py-4 shadow-sm transition hover:shadow-md hover:border-teal-brand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6 text-teal-brand">
|
||||
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-6 py-4 shadow-sm transition hover:shadow-md hover:border-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6 text-primary">
|
||||
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" />
|
||||
</svg>
|
||||
<span class="font-medium text-gray-brand">Facebook</span>
|
||||
<span class="font-medium text-gray-900">Facebook</span>
|
||||
</a>
|
||||
{/if}
|
||||
{#if instagramUrl}
|
||||
<a href={instagramUrl} target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 rounded-lg border border-gray-soft bg-white px-6 py-4 shadow-sm transition hover:shadow-md hover:border-teal-brand">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6 text-teal-brand">
|
||||
<a href={instagramUrl} target="_blank" rel="noopener noreferrer" class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-6 py-4 shadow-sm transition hover:shadow-md hover:border-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6 text-primary">
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />
|
||||
</svg>
|
||||
<span class="font-medium text-gray-brand">Instagram</span>
|
||||
<span class="font-medium text-gray-900">Instagram</span>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -93,8 +93,8 @@
|
||||
<!-- Contact Form -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-2xl px-4">
|
||||
<h2 class="text-center text-2xl font-bold text-gray-brand">Send Us a Message</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-2xl font-bold text-gray-900">Send Us a Message</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
|
||||
{#if form?.success}
|
||||
<div class="mt-8 rounded-xl border border-green-200 bg-green-50 p-8 text-center">
|
||||
@@ -112,7 +112,7 @@
|
||||
<form method="POST" use:enhance class="mt-8 space-y-6">
|
||||
<div class="grid gap-6 sm:grid-cols-2">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-brand">
|
||||
<label for="name" class="block text-sm font-medium text-gray-900">
|
||||
Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -121,7 +121,7 @@
|
||||
name="name"
|
||||
required
|
||||
value={form?.values?.name ?? ''}
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition {form?.errors?.name ? 'border-red-400' : ''}"
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition {form?.errors?.name ? 'border-red-400' : ''}"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
{#if form?.errors?.name}
|
||||
@@ -130,7 +130,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-brand">
|
||||
<label for="email" class="block text-sm font-medium text-gray-900">
|
||||
Email <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
@@ -139,7 +139,7 @@
|
||||
name="email"
|
||||
required
|
||||
value={form?.values?.email ?? ''}
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition {form?.errors?.email ? 'border-red-400' : ''}"
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition {form?.errors?.email ? 'border-red-400' : ''}"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
{#if form?.errors?.email}
|
||||
@@ -149,19 +149,19 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="subject" class="block text-sm font-medium text-gray-brand">Subject</label>
|
||||
<label for="subject" class="block text-sm font-medium text-gray-900">Subject</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={form?.values?.subject ?? ''}
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition"
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition"
|
||||
placeholder="How can we help?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-medium text-gray-brand">
|
||||
<label for="message" class="block text-sm font-medium text-gray-900">
|
||||
Message <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
@@ -169,7 +169,7 @@
|
||||
name="message"
|
||||
required
|
||||
rows="5"
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 transition resize-y {form?.errors?.message ? 'border-red-400' : ''}"
|
||||
class="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-3 text-gray-900 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition resize-y {form?.errors?.message ? 'border-red-400' : ''}"
|
||||
placeholder="Tell us what's on your mind..."
|
||||
>{form?.values?.message ?? ''}</textarea>
|
||||
{#if form?.errors?.message}
|
||||
@@ -184,7 +184,7 @@
|
||||
<input type="hidden" name="_t" value={Date.now()} />
|
||||
|
||||
<div class="text-center">
|
||||
<button type="submit" class="rounded-lg bg-teal-brand px-8 py-3 text-lg font-semibold text-white shadow-sm transition hover:bg-teal-dark focus:ring-2 focus:ring-teal-brand/50 focus:ring-offset-2">
|
||||
<button type="submit" class="rounded-lg bg-primary px-8 py-3 text-lg font-semibold text-white shadow-sm transition hover:bg-primary-dark focus:ring-2 focus:ring-primary/50 focus:ring-offset-2">
|
||||
Send Message
|
||||
</button>
|
||||
</div>
|
||||
@@ -197,16 +197,16 @@
|
||||
{#if data.orgConfig.applications.adoptionEnabled}
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-3xl px-4 text-center">
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 shadow-sm">
|
||||
<h2 class="text-2xl font-bold text-gray-brand">Interested in Adopting?</h2>
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Interested in Adopting?</h2>
|
||||
<p class="mt-4 text-lg text-gray-mid">
|
||||
If you are inquiring about an adoptable pet, please fill out our adoption application first.
|
||||
</p>
|
||||
<div class="mt-6 flex flex-wrap items-center justify-center gap-4">
|
||||
<a href="/pets" class="rounded-lg bg-teal-brand px-6 py-3 font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/pets" class="rounded-lg bg-primary px-6 py-3 font-semibold text-white transition hover:bg-primary-dark">
|
||||
View Available Pets
|
||||
</a>
|
||||
<a href="/apply/adopt" class="rounded-lg border-2 border-teal-brand px-6 py-3 font-semibold text-teal-brand transition hover:bg-teal-light">
|
||||
<a href="/apply/adopt" class="rounded-lg border-2 border-primary px-6 py-3 font-semibold text-primary transition hover:bg-primary-light">
|
||||
Apply to Adopt
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -34,12 +34,12 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">
|
||||
{(data.content as Record<string, Record<string, string>>)?.intro?.heading ?? 'Support Our Mission'}
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
{(data.content as Record<string, Record<string, string>>)?.intro?.text ??
|
||||
'Your generosity saves lives. Every donation directly supports the animals in our care.'}
|
||||
</p>
|
||||
@@ -84,13 +84,13 @@
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<div class="text-center">
|
||||
<h2 class="text-3xl font-bold text-gray-brand">Donate with Card</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">Donate with Card</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<p class="mt-4 text-gray-mid">Make a secure one-time donation with your credit or debit card.</p>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto mt-8 max-w-md">
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-6 shadow-sm">
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
|
||||
<form method="POST" action="?/donate" use:enhance={handleDonateEnhance}>
|
||||
<!-- Preset amounts -->
|
||||
<div class="mb-4">
|
||||
@@ -102,8 +102,8 @@
|
||||
onclick={() => selectPreset(amount)}
|
||||
class="cursor-pointer rounded-lg border-2 px-3 py-2.5 text-sm font-semibold transition {donationAmount ===
|
||||
String(amount)
|
||||
? 'border-teal-brand bg-teal-brand text-white'
|
||||
: 'border-gray-soft bg-white text-gray-brand hover:border-teal-brand'}"
|
||||
? 'border-primary bg-primary text-white'
|
||||
: 'border-gray-200 bg-white text-gray-900 hover:border-primary'}"
|
||||
>
|
||||
${amount}
|
||||
</button>
|
||||
@@ -129,7 +129,7 @@
|
||||
step="0.01"
|
||||
placeholder="0.00"
|
||||
required
|
||||
class="w-full rounded-lg border border-gray-soft bg-white py-2.5 pl-8 pr-3 text-sm text-gray-brand placeholder-gray-400 focus:border-teal-brand focus:outline-none focus:ring-2 focus:ring-teal-brand"
|
||||
class="w-full rounded-lg border border-gray-200 bg-white py-2.5 pl-8 pr-3 text-sm text-gray-900 placeholder-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -144,7 +144,7 @@
|
||||
id="donation-email"
|
||||
name="email"
|
||||
placeholder="your@email.com"
|
||||
class="w-full rounded-lg border border-gray-soft bg-white px-3 py-2.5 text-sm text-gray-brand placeholder-gray-400 focus:border-teal-brand focus:outline-none focus:ring-2 focus:ring-teal-brand"
|
||||
class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -159,7 +159,7 @@
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting || !donationAmount}
|
||||
class="w-full cursor-pointer rounded-xl bg-teal-brand px-8 py-3.5 text-lg font-bold text-white shadow-lg transition hover:bg-teal-dark hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-teal-brand focus:ring-offset-2 disabled:opacity-50"
|
||||
class="w-full cursor-pointer rounded-xl bg-primary px-8 py-3.5 text-lg font-bold text-white shadow-lg transition hover:bg-primary-dark hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50"
|
||||
>
|
||||
{#if submitting}
|
||||
Processing...
|
||||
@@ -181,22 +181,22 @@
|
||||
<!-- No Stripe — simple CTA -->
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-4xl px-4 text-center">
|
||||
<h2 class="text-3xl font-bold text-gray-brand">Make a Donation</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-900">Make a Donation</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<p class="mt-4 text-gray-mid">
|
||||
Ready to make a difference? Get in touch with us to learn how you can donate.
|
||||
</p>
|
||||
{#if orgEmail}
|
||||
<a
|
||||
href="mailto:{orgEmail}?subject=Donation%20Inquiry"
|
||||
class="mt-6 inline-block rounded-lg bg-teal-brand px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-teal-dark hover:shadow-xl"
|
||||
class="mt-6 inline-block rounded-lg bg-primary px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-dark hover:shadow-xl"
|
||||
>
|
||||
Contact Us to Donate
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href="/contact"
|
||||
class="mt-6 inline-block rounded-lg bg-teal-brand px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-teal-dark hover:shadow-xl"
|
||||
class="mt-6 inline-block rounded-lg bg-primary px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-dark hover:shadow-xl"
|
||||
>
|
||||
Contact Us to Donate
|
||||
</a>
|
||||
@@ -208,15 +208,15 @@
|
||||
<!-- Other Ways to Give -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">Other Ways to Give</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-3xl font-bold text-gray-900">Other Ways to Give</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Volunteer -->
|
||||
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<div class="rounded-xl border border-gray-200 bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg
|
||||
class="h-8 w-8 text-teal-brand"
|
||||
class="h-8 w-8 text-primary"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -229,23 +229,23 @@
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Volunteer Your Time</h3>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900">Volunteer Your Time</h3>
|
||||
<p class="mt-3 text-gray-mid">
|
||||
Your time is just as valuable as money. Help with fostering, events, transport, and more.
|
||||
</p>
|
||||
<a
|
||||
href="/volunteer"
|
||||
class="mt-5 inline-block rounded-lg bg-teal-brand px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark"
|
||||
class="mt-5 inline-block rounded-lg bg-primary px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark"
|
||||
>
|
||||
Learn How to Help
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Foster -->
|
||||
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<div class="rounded-xl border border-gray-200 bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg
|
||||
class="h-8 w-8 text-teal-brand"
|
||||
class="h-8 w-8 text-primary"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -258,31 +258,31 @@
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Become a Foster</h3>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900">Become a Foster</h3>
|
||||
<p class="mt-3 text-gray-mid">
|
||||
Open your home to an animal in need. Fosters provide the care and love that makes all the
|
||||
difference.
|
||||
</p>
|
||||
<a
|
||||
href="/become-a-foster"
|
||||
class="mt-5 inline-block rounded-lg bg-teal-brand px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark"
|
||||
class="mt-5 inline-block rounded-lg bg-primary px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark"
|
||||
>
|
||||
Learn About Fostering
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Spread the Word -->
|
||||
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light">
|
||||
<div class="rounded-xl border border-gray-200 bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light">
|
||||
{#if facebookUrl}
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="currentColor" viewBox="0 0 24 24">
|
||||
<svg class="h-8 w-8 text-primary" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
class="h-8 w-8 text-teal-brand"
|
||||
class="h-8 w-8 text-primary"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -296,7 +296,7 @@
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">Spread the Word</h3>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900">Spread the Word</h3>
|
||||
<p class="mt-3 text-gray-mid">
|
||||
Share our animals on social media, tell friends and family, and help us find forever homes.
|
||||
</p>
|
||||
@@ -305,14 +305,14 @@
|
||||
href={facebookUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="mt-5 inline-block rounded-lg bg-teal-brand px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark"
|
||||
class="mt-5 inline-block rounded-lg bg-primary px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark"
|
||||
>
|
||||
Follow on Facebook
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href="/pets"
|
||||
class="mt-5 inline-block rounded-lg bg-teal-brand px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark"
|
||||
class="mt-5 inline-block rounded-lg bg-primary px-6 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark"
|
||||
>
|
||||
Share Our Animals
|
||||
</a>
|
||||
@@ -325,13 +325,13 @@
|
||||
<!-- Donate by Mail -->
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 md:p-12">
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-8 md:p-12">
|
||||
<div class="flex flex-col items-center gap-8 md:flex-row md:items-start">
|
||||
<div
|
||||
class="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-teal-light"
|
||||
class="flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-primary-light"
|
||||
>
|
||||
<svg
|
||||
class="h-8 w-8 text-teal-brand"
|
||||
class="h-8 w-8 text-primary"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
@@ -345,7 +345,7 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-gray-brand">Donate by Mail</h3>
|
||||
<h3 class="text-xl font-semibold text-gray-900">Donate by Mail</h3>
|
||||
<p class="mt-3 text-gray-mid">
|
||||
Prefer to send a check? Make it payable to <strong>{orgName}</strong> and contact us for
|
||||
mailing details.
|
||||
@@ -353,7 +353,7 @@
|
||||
{#if orgEmail}
|
||||
<a
|
||||
href="mailto:{orgEmail}?subject=Donation%20by%20Mail"
|
||||
class="mt-4 inline-block font-medium text-teal-brand underline hover:text-teal-dark"
|
||||
class="mt-4 inline-block font-medium text-primary underline hover:text-primary-dark"
|
||||
>
|
||||
{orgEmail}
|
||||
</a>
|
||||
@@ -367,9 +367,9 @@
|
||||
<!-- Tax Info -->
|
||||
<section class="bg-white py-12">
|
||||
<div class="mx-auto max-w-4xl px-4 text-center">
|
||||
<div class="rounded-lg border border-teal-light bg-teal-light/30 p-6">
|
||||
<div class="rounded-lg border border-primary-light bg-primary-light/30 p-6">
|
||||
<p class="text-gray-mid">
|
||||
<strong class="text-gray-brand">Tax-Deductible Giving:</strong>
|
||||
<strong class="text-gray-900">Tax-Deductible Giving:</strong>
|
||||
{orgName} is a registered 501(c)(3) nonprofit organization. All donations are tax-deductible to
|
||||
the extent allowed by law. You will receive a receipt for your records.
|
||||
</p>
|
||||
@@ -378,21 +378,21 @@
|
||||
</section>
|
||||
|
||||
<!-- Bottom CTA -->
|
||||
<section class="bg-teal-brand py-12 text-center text-white">
|
||||
<section class="bg-primary py-12 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-2xl font-bold">Questions About Donating?</h2>
|
||||
<p class="mt-3 text-teal-light/90">We're happy to help. Reach out to us anytime.</p>
|
||||
<p class="mt-3 text-primary-light/90">We're happy to help. Reach out to us anytime.</p>
|
||||
{#if orgEmail}
|
||||
<a
|
||||
href="mailto:{orgEmail}?subject=Donation%20Question"
|
||||
class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl"
|
||||
class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
{:else}
|
||||
<a
|
||||
href="/contact"
|
||||
class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl"
|
||||
class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
|
||||
@@ -38,10 +38,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Events</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
Join us at adoption events, fundraisers, and community gatherings.
|
||||
</p>
|
||||
</div>
|
||||
@@ -50,26 +50,26 @@
|
||||
<!-- Upcoming Events -->
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">Upcoming Events</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-3xl font-bold text-gray-900">Upcoming Events</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
|
||||
{#if data.upcomingEvents.length > 0}
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each data.upcomingEvents as event}
|
||||
<article class="flex flex-col overflow-hidden rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md">
|
||||
<article class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md">
|
||||
{#if event.imageUrl}
|
||||
<div class="aspect-video overflow-hidden bg-teal-light">
|
||||
<div class="aspect-video overflow-hidden bg-primary-light">
|
||||
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex aspect-video items-center justify-center bg-teal-light">
|
||||
<svg class="h-16 w-16 text-teal-brand/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<div class="flex aspect-video items-center justify-center bg-primary-light">
|
||||
<svg class="h-16 w-16 text-primary/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-1 flex-col p-6">
|
||||
<div class="flex items-center gap-2 text-sm text-teal-brand">
|
||||
<div class="flex items-center gap-2 text-sm text-primary">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
@@ -81,7 +81,7 @@
|
||||
</svg>
|
||||
<span>{formatTime(event.startDate)}</span>
|
||||
</div>
|
||||
<h3 class="mt-3 text-xl font-bold text-gray-brand">{event.title}</h3>
|
||||
<h3 class="mt-3 text-xl font-bold text-gray-900">{event.title}</h3>
|
||||
{#if event.location}
|
||||
<div class="mt-2 flex items-start gap-2 text-sm text-gray-mid">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
@@ -99,18 +99,18 @@
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-12 rounded-xl border border-gray-soft bg-white p-12 text-center">
|
||||
<div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-10 w-10 text-teal-brand/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<div class="mt-12 rounded-xl border border-gray-200 bg-white p-12 text-center">
|
||||
<div class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-10 w-10 text-primary/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-brand">No Upcoming Events</h3>
|
||||
<h3 class="mt-4 text-xl font-semibold text-gray-900">No Upcoming Events</h3>
|
||||
<p class="mt-2 text-gray-mid">
|
||||
Check back soon! {#if facebookUrl}Follow us on Facebook for the latest updates.{/if}
|
||||
</p>
|
||||
{#if facebookUrl}
|
||||
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="mt-6 inline-block rounded-lg bg-teal-brand px-6 py-2.5 font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href={facebookUrl} target="_blank" rel="noopener noreferrer" class="mt-6 inline-block rounded-lg bg-primary px-6 py-2.5 font-semibold text-white transition hover:bg-primary-dark">
|
||||
Follow Us on Facebook
|
||||
</a>
|
||||
{/if}
|
||||
@@ -123,26 +123,26 @@
|
||||
{#if data.pastEvents.length > 0}
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-2xl font-bold text-gray-brand">Past Events</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-2xl font-bold text-gray-900">Past Events</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
|
||||
<div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each data.pastEvents as event}
|
||||
<div class="flex items-start gap-4 rounded-lg border border-gray-soft bg-warm-bg p-4">
|
||||
<div class="flex items-start gap-4 rounded-lg border border-gray-200 bg-warm-bg p-4">
|
||||
{#if event.imageUrl}
|
||||
<div class="h-16 w-16 shrink-0 overflow-hidden rounded-lg">
|
||||
<img src={event.imageUrl} alt={event.title} class="h-full w-full object-cover" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg bg-teal-light">
|
||||
<svg class="h-6 w-6 text-teal-brand/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<div class="flex h-16 w-16 shrink-0 items-center justify-center rounded-lg bg-primary-light">
|
||||
<svg class="h-6 w-6 text-primary/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-xs font-medium text-teal-brand">{formatShortDate(event.startDate)}</p>
|
||||
<h3 class="mt-0.5 truncate font-semibold text-gray-brand">{event.title}</h3>
|
||||
<p class="text-xs font-medium text-primary">{formatShortDate(event.startDate)}</p>
|
||||
<h3 class="mt-0.5 truncate font-semibold text-gray-900">{event.title}</h3>
|
||||
{#if event.location}
|
||||
<p class="mt-0.5 truncate text-sm text-gray-mid">{event.location}</p>
|
||||
{/if}
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Foster Resources</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">Resources and documents for our foster families.</p>
|
||||
<p class="mt-4 text-lg text-primary-light/90">Resources and documents for our foster families.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
{#if !data.authed && !form?.success}
|
||||
<!-- Password Gate -->
|
||||
<div class="mx-auto max-w-md rounded-xl border border-gray-soft bg-white p-8 shadow-sm">
|
||||
<h2 class="text-xl font-bold text-gray-brand text-center">This page is password-protected</h2>
|
||||
<div class="mx-auto max-w-md rounded-xl border border-gray-200 bg-white p-8 shadow-sm">
|
||||
<h2 class="text-xl font-bold text-gray-900 text-center">This page is password-protected</h2>
|
||||
<p class="mt-2 text-center text-gray-mid text-sm">Enter the foster resources password to view this content.</p>
|
||||
|
||||
{#if form?.error}
|
||||
@@ -39,9 +39,9 @@
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-teal-brand focus:ring-2 focus:ring-teal-brand/20 outline-none"
|
||||
class="w-full rounded-lg border border-gray-300 px-4 py-2 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none"
|
||||
/>
|
||||
<button type="submit" class="mt-4 w-full rounded-lg bg-teal-brand px-6 py-2.5 font-semibold text-white transition hover:bg-teal-dark">
|
||||
<button type="submit" class="mt-4 w-full rounded-lg bg-primary px-6 py-2.5 font-semibold text-white transition hover:bg-primary-dark">
|
||||
Enter
|
||||
</button>
|
||||
</form>
|
||||
@@ -52,17 +52,17 @@
|
||||
{#if blocks && Object.keys(blocks).length > 0}
|
||||
{#each Object.entries(blocks) as [key, content]}
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-brand capitalize">{key.replace(/-/g, ' ')}</h2>
|
||||
<div class="mt-2 h-1 w-12 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 capitalize">{key.replace(/-/g, ' ')}</h2>
|
||||
<div class="mt-2 h-1 w-12 rounded bg-primary"></div>
|
||||
<div class="mt-4 prose prose-gray max-w-none text-gray-mid">{@html content}</div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="rounded-xl border border-gray-soft bg-white p-8 text-center">
|
||||
<div class="rounded-xl border border-gray-200 bg-white p-8 text-center">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-300 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-semibold text-gray-brand">Resources Coming Soon</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Resources Coming Soon</h3>
|
||||
<p class="mt-2 text-gray-mid">Foster resource documents will be published here. Contact us for current resources.</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-teal-dark via-teal-brand to-teal-dark py-16 md:py-20">
|
||||
<section class="bg-gradient-to-br from-primary-dark via-primary to-primary-dark py-16 md:py-20">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-extrabold text-white">Happy Tails</h1>
|
||||
<p class="mt-4 text-lg text-white/80 max-w-2xl mx-auto">
|
||||
@@ -44,15 +44,15 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 mx-auto text-gray-300 mb-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
<h2 class="text-xl font-bold text-gray-brand mb-2">No stories yet</h2>
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-2">No stories yet</h2>
|
||||
<p class="text-gray-500">Check back soon for heartwarming adoption stories!</p>
|
||||
<a href="/happy-tails/submit" class="mt-6 inline-block text-teal-brand font-semibold hover:text-teal-dark">Share Your Story</a>
|
||||
<a href="/happy-tails/submit" class="mt-6 inline-block text-primary font-semibold hover:text-primary-dark">Share Your Story</a>
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Featured Stories -->
|
||||
{#if featuredStories.length > 0}
|
||||
<div class="mb-16">
|
||||
<h2 class="text-2xl font-bold text-gray-brand mb-8 text-center">Featured Stories</h2>
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-8 text-center">Featured Stories</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{#each featuredStories as story}
|
||||
<div class="bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-shadow duration-300">
|
||||
@@ -61,29 +61,29 @@
|
||||
<img src={getPhoto(story)} alt={story.title} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="aspect-[16/9] bg-teal-light flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 text-teal-brand/30">
|
||||
<div class="aspect-[16/9] bg-primary-light flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-16 h-16 text-primary/30">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="p-6 md:p-8">
|
||||
<h3 class="text-xl font-bold text-gray-brand mb-1">{story.title}</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900 mb-1">{story.title}</h3>
|
||||
{#if story.adopterName}
|
||||
<p class="text-sm text-teal-brand font-medium mb-3">The {story.adopterName} Family</p>
|
||||
<p class="text-sm text-primary font-medium mb-3">The {story.adopterName} Family</p>
|
||||
{/if}
|
||||
{#if story.petName}
|
||||
<p class="text-xs text-gray-400 mb-3">Pet: {story.petName}</p>
|
||||
{/if}
|
||||
{#if expandedId === story.id}
|
||||
<p class="text-gray-600 leading-relaxed whitespace-pre-line">{story.story}</p>
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-4 text-sm font-semibold text-teal-brand hover:text-teal-dark transition-colors">
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-4 text-sm font-semibold text-primary hover:text-primary-dark transition-colors">
|
||||
Read less
|
||||
</button>
|
||||
{:else}
|
||||
<p class="text-gray-600 leading-relaxed">{truncate(story.story, 250)}</p>
|
||||
{#if story.story.length > 250}
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-4 text-sm font-semibold text-teal-brand hover:text-teal-dark transition-colors">
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-4 text-sm font-semibold text-primary hover:text-primary-dark transition-colors">
|
||||
Read more
|
||||
</button>
|
||||
{/if}
|
||||
@@ -105,29 +105,29 @@
|
||||
<img src={getPhoto(story)} alt={story.title} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="aspect-[4/3] bg-teal-light flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-teal-brand/30">
|
||||
<div class="aspect-[4/3] bg-primary-light flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-primary/30">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="p-5">
|
||||
<h3 class="text-lg font-bold text-gray-brand mb-1">{story.title}</h3>
|
||||
<h3 class="text-lg font-bold text-gray-900 mb-1">{story.title}</h3>
|
||||
{#if story.adopterName}
|
||||
<p class="text-sm text-teal-brand font-medium mb-2">The {story.adopterName} Family</p>
|
||||
<p class="text-sm text-primary font-medium mb-2">The {story.adopterName} Family</p>
|
||||
{/if}
|
||||
{#if story.petName}
|
||||
<p class="text-xs text-gray-400 mb-2">Pet: {story.petName}</p>
|
||||
{/if}
|
||||
{#if expandedId === story.id}
|
||||
<p class="text-sm text-gray-600 leading-relaxed whitespace-pre-line">{story.story}</p>
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-3 text-sm font-semibold text-teal-brand hover:text-teal-dark transition-colors">
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-3 text-sm font-semibold text-primary hover:text-primary-dark transition-colors">
|
||||
Read less
|
||||
</button>
|
||||
{:else}
|
||||
<p class="text-sm text-gray-600 leading-relaxed">{truncate(story.story)}</p>
|
||||
{#if story.story.length > 150}
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-3 text-sm font-semibold text-teal-brand hover:text-teal-dark transition-colors">
|
||||
<button onclick={() => toggleStory(story.id)} class="mt-3 text-sm font-semibold text-primary hover:text-primary-dark transition-colors">
|
||||
Read more
|
||||
</button>
|
||||
{/if}
|
||||
@@ -141,7 +141,7 @@
|
||||
|
||||
<!-- Submit CTA -->
|
||||
<div class="mt-16 text-center">
|
||||
<a href="/happy-tails/submit" class="inline-flex items-center gap-2 px-8 py-3 bg-teal-brand text-white rounded-lg font-semibold hover:bg-teal-dark transition">
|
||||
<a href="/happy-tails/submit" class="inline-flex items-center gap-2 px-8 py-3 bg-primary text-white rounded-lg font-semibold hover:bg-primary-dark transition">
|
||||
Share Your Happy Tail
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
<meta name="description" content="Adopted from {orgName}? Share your happy tail story with us!" />
|
||||
</svelte:head>
|
||||
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Share Your Happy Tail</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
Adopted from {orgName}? We'd love to hear how your new family member is doing!
|
||||
</p>
|
||||
</div>
|
||||
@@ -23,20 +23,20 @@
|
||||
<section class="bg-warm-bg py-16">
|
||||
<div class="mx-auto max-w-2xl px-4">
|
||||
{#if form?.success}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-soft p-8 text-center">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 text-center">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-brand">Thank You!</h2>
|
||||
<h2 class="text-2xl font-bold text-gray-900">Thank You!</h2>
|
||||
<p class="mt-2 text-gray-mid">Your story has been submitted and will be reviewed by our team. Once approved, it'll appear on our Happy Tails page!</p>
|
||||
<a href="/happy-tails" class="mt-6 inline-block text-teal-brand font-semibold hover:text-teal-dark">
|
||||
<a href="/happy-tails" class="mt-6 inline-block text-primary font-semibold hover:text-primary-dark">
|
||||
← Back to Happy Tails
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-soft p-6 sm:p-8">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 sm:p-8">
|
||||
{#if form?.error}
|
||||
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
|
||||
{/if}
|
||||
@@ -51,7 +51,7 @@
|
||||
required
|
||||
value={form?.adopterName ?? ''}
|
||||
placeholder="Your name or family name"
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-brand/20 focus:border-teal-brand outline-none text-sm"
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="your@email.com"
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-brand/20 focus:border-teal-brand outline-none text-sm"
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
required
|
||||
value={form?.title ?? ''}
|
||||
placeholder="Our life with Buddy"
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-brand/20 focus:border-teal-brand outline-none text-sm"
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -87,11 +87,11 @@
|
||||
required
|
||||
rows="8"
|
||||
placeholder="Tell us about your experience adopting and how your pet is doing..."
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-teal-brand/20 focus:border-teal-brand outline-none text-sm resize-y"
|
||||
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none text-sm resize-y"
|
||||
>{form?.story ?? ''}</textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full py-3 rounded-lg bg-teal-brand text-white font-semibold hover:bg-teal-dark transition cursor-pointer">
|
||||
<button type="submit" class="w-full py-3 rounded-lg bg-primary text-white font-semibold hover:bg-primary-dark transition cursor-pointer">
|
||||
Submit Your Story
|
||||
</button>
|
||||
|
||||
|
||||
@@ -10,10 +10,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Make a Difference</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
There are so many ways to support our rescue pets on their journey home.
|
||||
</p>
|
||||
</div>
|
||||
@@ -23,8 +23,8 @@
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Adopt -->
|
||||
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||
<div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-primary px-6">
|
||||
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
@@ -35,11 +35,11 @@
|
||||
Give a rescue pet their forever home. Our adoption process includes an application, meet-and-greet, and a trial period to ensure a great match. All pets come fully vetted, spayed/neutered, and microchipped.
|
||||
</p>
|
||||
<div class="mt-6 flex flex-wrap gap-3">
|
||||
<a href="/pets" class="rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/pets" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark">
|
||||
View Available Pets
|
||||
</a>
|
||||
{#if data.orgConfig.applications.adoptionEnabled}
|
||||
<a href="/apply/adopt" class="rounded-lg border-2 border-teal-brand px-5 py-2.5 text-sm font-semibold text-teal-brand transition hover:bg-teal-light">
|
||||
<a href="/apply/adopt" class="rounded-lg border-2 border-primary px-5 py-2.5 text-sm font-semibold text-primary transition hover:bg-primary-light">
|
||||
Apply to Adopt
|
||||
</a>
|
||||
{/if}
|
||||
@@ -48,8 +48,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Foster -->
|
||||
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||
<div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-primary px-6">
|
||||
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4" />
|
||||
</svg>
|
||||
@@ -61,11 +61,11 @@
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
{#if data.orgConfig.applications.fosterEnabled}
|
||||
<a href="/apply/foster" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/apply/foster" class="inline-block rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark">
|
||||
Apply to Foster
|
||||
</a>
|
||||
{:else}
|
||||
<a href="/become-a-foster" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/become-a-foster" class="inline-block rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark">
|
||||
Learn More
|
||||
</a>
|
||||
{/if}
|
||||
@@ -74,8 +74,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Volunteer -->
|
||||
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||
<div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-primary px-6">
|
||||
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
@@ -87,11 +87,11 @@
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
{#if data.orgConfig.applications.volunteerEnabled}
|
||||
<a href="/apply/volunteer" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/apply/volunteer" class="inline-block rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark">
|
||||
Apply to Volunteer
|
||||
</a>
|
||||
{:else}
|
||||
<a href="/volunteer" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/volunteer" class="inline-block rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark">
|
||||
Learn More
|
||||
</a>
|
||||
{/if}
|
||||
@@ -100,8 +100,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Donate -->
|
||||
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||
<div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-primary px-6">
|
||||
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
@@ -112,7 +112,7 @@
|
||||
Your financial support directly funds veterinary care, food, and supplies for our pets. Every dollar makes a difference.
|
||||
</p>
|
||||
<div class="mt-6">
|
||||
<a href="/donate" class="inline-block rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/donate" class="inline-block rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark">
|
||||
Donate Now
|
||||
</a>
|
||||
</div>
|
||||
@@ -120,8 +120,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Sponsor -->
|
||||
<div class="flex flex-col rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-teal-brand px-6">
|
||||
<div class="flex flex-col rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md overflow-hidden">
|
||||
<div class="flex h-14 items-center gap-3 bg-primary px-6">
|
||||
<svg class="h-7 w-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
@@ -132,11 +132,11 @@
|
||||
Become a business sponsor and support our mission while gaining visibility in the community. We offer multiple sponsorship tiers.
|
||||
</p>
|
||||
<div class="mt-6 flex flex-wrap gap-3">
|
||||
<a href="/sponsors" class="rounded-lg bg-teal-brand px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-teal-dark">
|
||||
<a href="/sponsors" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-primary-dark">
|
||||
View Sponsors
|
||||
</a>
|
||||
{#if orgEmail}
|
||||
<a href="mailto:{orgEmail}?subject=Sponsorship%20Inquiry" class="rounded-lg border-2 border-teal-brand px-5 py-2.5 text-sm font-semibold text-teal-brand transition hover:bg-teal-light">
|
||||
<a href="mailto:{orgEmail}?subject=Sponsorship%20Inquiry" class="rounded-lg border-2 border-primary px-5 py-2.5 text-sm font-semibold text-primary transition hover:bg-primary-light">
|
||||
Contact Us
|
||||
</a>
|
||||
{/if}
|
||||
@@ -148,16 +148,16 @@
|
||||
</section>
|
||||
|
||||
<!-- Bottom CTA -->
|
||||
<section class="bg-teal-brand py-12 text-center text-white">
|
||||
<section class="bg-primary py-12 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-2xl font-bold">Not Sure Where to Start?</h2>
|
||||
<p class="mt-3 text-teal-light/90">Reach out and we'll help you find the best way to get involved.</p>
|
||||
<p class="mt-3 text-primary-light/90">Reach out and we'll help you find the best way to get involved.</p>
|
||||
{#if orgEmail}
|
||||
<a href="mailto:{orgEmail}" class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||
<a href="mailto:{orgEmail}" class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl">
|
||||
Email Us
|
||||
</a>
|
||||
{:else}
|
||||
<a href="/contact" class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||
<a href="/contact" class="mt-6 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl">
|
||||
Contact Us
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
@@ -145,17 +145,17 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-gradient-to-br from-teal-brand to-teal-dark py-12 sm:py-16">
|
||||
<section class="bg-gradient-to-br from-primary to-primary-dark py-12 sm:py-16">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white">Available Pets</h1>
|
||||
<p class="mt-3 text-lg text-teal-light max-w-2xl mx-auto">
|
||||
<p class="mt-3 text-lg text-primary-light max-w-2xl mx-auto">
|
||||
Every one of these pets is looking for a loving forever home. Could you be the one?
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Search & Filters -->
|
||||
<section class="bg-white border-b border-gray-soft shadow-sm sticky top-0 z-20">
|
||||
<section class="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-20">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-4">
|
||||
<form onsubmit={handleSearch} class="flex flex-col sm:flex-row gap-3">
|
||||
<div class="relative flex-1">
|
||||
@@ -167,24 +167,24 @@
|
||||
bind:value={q}
|
||||
oninput={onSearchInput}
|
||||
placeholder="Search by name..."
|
||||
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-soft bg-warm-bg text-gray-brand placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand/40 focus:border-teal-brand transition"
|
||||
class="w-full pl-10 pr-4 py-2.5 rounded-lg border border-gray-200 bg-warm-bg text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary transition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<select bind:value={species} onchange={onFilterChange} class="px-4 py-2.5 rounded-lg border border-gray-soft bg-warm-bg text-gray-brand focus:outline-none focus:ring-2 focus:ring-teal-brand/40 focus:border-teal-brand transition">
|
||||
<select bind:value={species} onchange={onFilterChange} class="px-4 py-2.5 rounded-lg border border-gray-200 bg-warm-bg text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary transition">
|
||||
<option value="">All Species</option>
|
||||
<option value="dog">Dogs</option>
|
||||
<option value="cat">Cats</option>
|
||||
</select>
|
||||
|
||||
<select bind:value={sex} onchange={onFilterChange} class="px-4 py-2.5 rounded-lg border border-gray-soft bg-warm-bg text-gray-brand focus:outline-none focus:ring-2 focus:ring-teal-brand/40 focus:border-teal-brand transition">
|
||||
<select bind:value={sex} onchange={onFilterChange} class="px-4 py-2.5 rounded-lg border border-gray-200 bg-warm-bg text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary transition">
|
||||
<option value="">Any Sex</option>
|
||||
<option value="male">Male</option>
|
||||
<option value="female">Female</option>
|
||||
</select>
|
||||
|
||||
<button type="submit" class="px-6 py-2.5 bg-teal-brand text-white rounded-lg font-semibold hover:bg-teal-dark transition focus:outline-none focus:ring-2 focus:ring-teal-brand/40">
|
||||
<button type="submit" class="px-6 py-2.5 bg-primary text-white rounded-lg font-semibold hover:bg-primary-dark transition focus:outline-none focus:ring-2 focus:ring-primary/40">
|
||||
Search
|
||||
</button>
|
||||
</div>
|
||||
@@ -193,8 +193,8 @@
|
||||
{#if hasActiveFilters}
|
||||
<div class="mt-3 flex items-center gap-2 text-sm text-gray-mid">
|
||||
<span>Showing {totalCount} result{totalCount === 1 ? '' : 's'}</span>
|
||||
<span class="text-gray-soft">|</span>
|
||||
<button type="button" onclick={clearFilters} class="text-teal-brand hover:text-teal-dark font-medium underline underline-offset-2 transition">
|
||||
<span class="text-gray-200">|</span>
|
||||
<button type="button" onclick={clearFilters} class="text-primary hover:text-primary-dark font-medium underline underline-offset-2 transition">
|
||||
Clear All Filters
|
||||
</button>
|
||||
</div>
|
||||
@@ -206,16 +206,16 @@
|
||||
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
|
||||
{#if allPets.length === 0 && !loading}
|
||||
<div class="text-center py-20">
|
||||
<div class="mx-auto w-24 h-24 rounded-full bg-teal-light flex items-center justify-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-12 h-12 text-teal-brand">
|
||||
<div class="mx-auto w-24 h-24 rounded-full bg-primary-light flex items-center justify-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-12 h-12 text-primary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-brand mb-2">No pets found</h2>
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">No pets found</h2>
|
||||
<p class="text-gray-mid mb-6 max-w-md mx-auto">
|
||||
No pets match your current criteria. Try adjusting your filters or check back soon — new pets arrive regularly!
|
||||
</p>
|
||||
<a href="/pets" class="inline-flex items-center gap-2 px-6 py-3 bg-teal-brand text-white rounded-lg font-semibold hover:bg-teal-dark transition">
|
||||
<a href="/pets" class="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-lg font-semibold hover:bg-primary-dark transition">
|
||||
Clear Filters
|
||||
</a>
|
||||
</div>
|
||||
@@ -232,7 +232,7 @@
|
||||
|
||||
{#if loading}
|
||||
<div class="flex items-center justify-center py-10 gap-3">
|
||||
<svg class="animate-spin h-6 w-6 text-teal-brand" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<svg class="animate-spin h-6 w-6 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
|
||||
@@ -119,18 +119,18 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
<div class="bg-white border-b border-gray-soft">
|
||||
<div class="bg-white border-b border-gray-200">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3">
|
||||
<nav class="flex items-center gap-2 text-sm text-gray-mid">
|
||||
<a href="/" class="hover:text-teal-brand transition">Home</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-soft">
|
||||
<a href="/" class="hover:text-primary transition">Home</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-200">
|
||||
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<a href="/pets" class="hover:text-teal-brand transition">Available Pets</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-soft">
|
||||
<a href="/pets" class="hover:text-primary transition">Available Pets</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-200">
|
||||
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 0 1 .02-1.06L11.168 10 7.23 6.29a.75.75 0 1 1 1.04-1.08l4.5 4.25a.75.75 0 0 1 0 1.08l-4.5 4.25a.75.75 0 0 1-1.06-.02Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span class="text-gray-brand font-medium">{pet.name}</span>
|
||||
<span class="text-gray-900 font-medium">{pet.name}</span>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@@ -139,7 +139,7 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
||||
<!-- Photo Gallery -->
|
||||
<div>
|
||||
<div class="aspect-[4/3] rounded-2xl overflow-hidden bg-teal-light shadow-md {currentPhoto ? 'cursor-zoom-in' : ''}">
|
||||
<div class="aspect-[4/3] rounded-2xl overflow-hidden bg-primary-light shadow-md {currentPhoto ? 'cursor-zoom-in' : ''}">
|
||||
{#if currentPhoto}
|
||||
<img
|
||||
src={currentPhoto.url}
|
||||
@@ -152,10 +152,10 @@
|
||||
/>
|
||||
{:else}
|
||||
<div class="w-full h-full flex flex-col items-center justify-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="w-28 h-28 text-teal-brand/25">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="w-28 h-28 text-primary/25">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3.744c-.066.028-.132.058-.195.092a7.486 7.486 0 0 0-3.43 5.13 4.323 4.323 0 0 0 1.058 3.79 3.724 3.724 0 0 0 1.14.865c.28.14.437.45.372.756a6.04 6.04 0 0 0-.14.871c-.036.532.04 1.108.288 1.632.249.524.671.964 1.247 1.202.554.23 1.11.247 1.619.126a3.25 3.25 0 0 0 .825-.347c.214-.13.49-.127.7.01a5.015 5.015 0 0 0 2.766.827 5.015 5.015 0 0 0 2.766-.828c.21-.136.486-.14.7-.009.244.151.53.268.825.347.51.121 1.065.104 1.619-.126.576-.238.998-.678 1.247-1.202.248-.524.324-1.1.288-1.632a6.04 6.04 0 0 0-.14-.87c-.065-.307.092-.617.372-.757a3.72 3.72 0 0 0 1.14-.865 4.323 4.323 0 0 0 1.058-3.79 7.486 7.486 0 0 0-3.43-5.13 2.258 2.258 0 0 0-.195-.092" />
|
||||
</svg>
|
||||
<p class="text-teal-brand/40 text-sm font-medium">Photo coming soon</p>
|
||||
<p class="text-primary/40 text-sm font-medium">Photo coming soon</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -166,7 +166,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => (selectedPhotoIndex = i)}
|
||||
class="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-all {i === selectedPhotoIndex ? 'border-teal-brand ring-2 ring-teal-brand/30 shadow-md' : 'border-transparent opacity-70 hover:opacity-100'}"
|
||||
class="flex-shrink-0 w-20 h-20 rounded-lg overflow-hidden border-2 transition-all {i === selectedPhotoIndex ? 'border-primary ring-2 ring-primary/30 shadow-md' : 'border-transparent opacity-70 hover:opacity-100'}"
|
||||
>
|
||||
<img src={photo.url} alt="{pet.name} thumbnail {i + 1}" class="w-full h-full object-cover" />
|
||||
</button>
|
||||
@@ -183,7 +183,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-brand mt-2">{pet.name}</h1>
|
||||
<h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 mt-2">{pet.name}</h1>
|
||||
|
||||
{#if pet.breed}
|
||||
<p class="text-lg text-gray-mid mt-1">{pet.breed}</p>
|
||||
@@ -206,7 +206,7 @@
|
||||
<button
|
||||
type="button"
|
||||
onclick={copyLink}
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-gray-soft text-gray-600 hover:bg-gray-50 transition cursor-pointer"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 transition cursor-pointer"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
||||
@@ -220,25 +220,25 @@
|
||||
{#if pet.species}
|
||||
<div class="bg-warm-bg rounded-xl p-4 text-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-mid mb-1">Species</p>
|
||||
<p class="text-lg font-bold text-gray-brand capitalize">{pet.species}</p>
|
||||
<p class="text-lg font-bold text-gray-900 capitalize">{pet.species}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if pet.age}
|
||||
<div class="bg-warm-bg rounded-xl p-4 text-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-mid mb-1">Age</p>
|
||||
<p class="text-lg font-bold text-gray-brand">{pet.age}</p>
|
||||
<p class="text-lg font-bold text-gray-900">{pet.age}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if pet.sex && pet.sex !== 'unknown'}
|
||||
<div class="bg-warm-bg rounded-xl p-4 text-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-mid mb-1">Sex</p>
|
||||
<p class="text-lg font-bold text-gray-brand capitalize">{pet.sex}</p>
|
||||
<p class="text-lg font-bold text-gray-900 capitalize">{pet.sex}</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if pet.weight}
|
||||
<div class="bg-warm-bg rounded-xl p-4 text-center">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-mid mb-1">Weight</p>
|
||||
<p class="text-lg font-bold text-gray-brand">{pet.weight}</p>
|
||||
<p class="text-lg font-bold text-gray-900">{pet.weight}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -276,7 +276,7 @@
|
||||
<!-- Description -->
|
||||
{#if pet.description}
|
||||
<div class="mt-8">
|
||||
<h2 class="text-xl font-bold text-gray-brand mb-3">About {pet.name}</h2>
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-3">About {pet.name}</h2>
|
||||
<div class="prose prose-gray max-w-none text-gray-mid leading-relaxed whitespace-pre-line">
|
||||
{pet.description}
|
||||
</div>
|
||||
@@ -288,7 +288,7 @@
|
||||
<div class="mt-8">
|
||||
<a
|
||||
href="/apply/adopt?pet={pet.slug}"
|
||||
class="inline-flex items-center gap-2 px-8 py-4 bg-teal-brand text-white text-lg font-bold rounded-xl hover:bg-teal-dark shadow-lg hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-teal-brand/30"
|
||||
class="inline-flex items-center gap-2 px-8 py-4 bg-primary text-white text-lg font-bold rounded-xl hover:bg-primary-dark shadow-lg hover:shadow-xl transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-primary/30"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
|
||||
@@ -308,7 +308,7 @@
|
||||
|
||||
{#if pet.adoptionFee}
|
||||
<p class="mt-3 text-sm text-gray-mid">
|
||||
Adoption fee: <span class="font-semibold text-gray-brand">${(pet.adoptionFee / 100).toFixed(2)}</span>
|
||||
Adoption fee: <span class="font-semibold text-gray-900">${(pet.adoptionFee / 100).toFixed(2)}</span>
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -316,25 +316,25 @@
|
||||
|
||||
<!-- Details Card -->
|
||||
{#if pet.intakeDate || pet.microchipId || pet.birthday}
|
||||
<div class="mt-12 bg-white rounded-2xl shadow-sm border border-gray-soft p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-brand mb-4">Details</h2>
|
||||
<div class="mt-12 bg-white rounded-2xl shadow-sm border border-gray-200 p-6 sm:p-8">
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-4">Details</h2>
|
||||
<dl class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-4">
|
||||
{#if pet.intakeDate}
|
||||
<div>
|
||||
<dt class="text-xs font-semibold uppercase tracking-wide text-gray-mid">Intake Date</dt>
|
||||
<dd class="mt-1 text-gray-brand font-medium">{formatDate(pet.intakeDate)}</dd>
|
||||
<dd class="mt-1 text-gray-900 font-medium">{formatDate(pet.intakeDate)}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
{#if pet.birthday}
|
||||
<div>
|
||||
<dt class="text-xs font-semibold uppercase tracking-wide text-gray-mid">Date of Birth</dt>
|
||||
<dd class="mt-1 text-gray-brand font-medium">{formatDate(pet.birthday)}</dd>
|
||||
<dd class="mt-1 text-gray-900 font-medium">{formatDate(pet.birthday)}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
{#if pet.microchipId}
|
||||
<div>
|
||||
<dt class="text-xs font-semibold uppercase tracking-wide text-gray-mid">Microchip</dt>
|
||||
<dd class="mt-1 text-gray-brand font-medium">{pet.microchipId}</dd>
|
||||
<dd class="mt-1 text-gray-900 font-medium">{pet.microchipId}</dd>
|
||||
</div>
|
||||
{/if}
|
||||
</dl>
|
||||
@@ -352,7 +352,7 @@
|
||||
<!-- Related Pets -->
|
||||
{#if relatedPets.length > 0}
|
||||
<section class="mt-16">
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-brand mb-6 text-center">You Might Also Like</h2>
|
||||
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 mb-6 text-center">You Might Also Like</h2>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{#each relatedPets as rp (rp.id)}
|
||||
<PetCard pet={rp} />
|
||||
|
||||
@@ -35,10 +35,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Our Sponsors</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
We're grateful for the businesses and organizations that support our mission.
|
||||
</p>
|
||||
</div>
|
||||
@@ -52,8 +52,8 @@
|
||||
{#if tierSponsors && tierSponsors.length > 0}
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-gray-brand">{config.label}</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-2xl font-bold text-gray-900">{config.label}</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<p class="mt-3 text-gray-mid">{config.description}</p>
|
||||
</div>
|
||||
<div class="mt-8 grid {config.gridCols} gap-6">
|
||||
@@ -62,13 +62,13 @@
|
||||
href={sponsor.websiteUrl || '#'}
|
||||
target={sponsor.websiteUrl ? '_blank' : undefined}
|
||||
rel={sponsor.websiteUrl ? 'noopener noreferrer' : undefined}
|
||||
class="flex flex-col items-center justify-center rounded-xl border border-gray-soft bg-white shadow-sm transition hover:shadow-md {config.cardPadding}"
|
||||
class="flex flex-col items-center justify-center rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md {config.cardPadding}"
|
||||
>
|
||||
{#if sponsor.logoUrl}
|
||||
<img src={sponsor.logoUrl} alt={sponsor.name} class="{config.logoSize} object-contain" />
|
||||
<span class="mt-3 text-sm font-medium text-gray-mid">{sponsor.name}</span>
|
||||
{:else}
|
||||
<span class="text-lg font-semibold text-gray-brand">{sponsor.name}</span>
|
||||
<span class="text-lg font-semibold text-gray-900">{sponsor.name}</span>
|
||||
{/if}
|
||||
</a>
|
||||
{/each}
|
||||
@@ -90,77 +90,77 @@
|
||||
<!-- Become a Sponsor -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">Become a Sponsor</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-3xl font-bold text-gray-900">Become a Sponsor</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
<p class="mx-auto mt-4 max-w-2xl text-center text-gray-mid">
|
||||
Support our rescue while gaining visibility in the community. Your sponsorship directly funds the care of animals in our program.
|
||||
</p>
|
||||
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-3">
|
||||
<div class="flex flex-col rounded-xl border-2 border-teal-brand bg-warm-bg p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-teal-brand">
|
||||
<div class="flex flex-col rounded-xl border-2 border-primary bg-warm-bg p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary">
|
||||
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-bold text-gray-brand">Top Tier</h3>
|
||||
<h3 class="mt-4 text-xl font-bold text-gray-900">Top Tier</h3>
|
||||
<ul class="mt-4 flex-1 space-y-2 text-left text-sm text-gray-mid">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Proud Sponsor certificate for your business
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Logo on our sponsor page
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Social media shout-out
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Logo displayed at events
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-xl border border-gray-soft bg-warm-bg p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-6 w-6 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="flex flex-col rounded-xl border border-gray-200 bg-warm-bg p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-bold text-gray-brand">Premier</h3>
|
||||
<h3 class="mt-4 text-xl font-bold text-gray-900">Premier</h3>
|
||||
<ul class="mt-4 flex-1 space-y-2 text-left text-sm text-gray-mid">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Proud Sponsor certificate for your business
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Logo on our sponsor page
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Social media shout-out
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col rounded-xl border border-gray-soft bg-warm-bg p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-teal-light">
|
||||
<svg class="h-6 w-6 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="flex flex-col rounded-xl border border-gray-200 bg-warm-bg p-8 text-center shadow-sm">
|
||||
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary-light">
|
||||
<svg class="h-6 w-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="mt-4 text-xl font-bold text-gray-brand">Supporting</h3>
|
||||
<h3 class="mt-4 text-xl font-bold text-gray-900">Supporting</h3>
|
||||
<ul class="mt-4 flex-1 space-y-2 text-left text-sm text-gray-mid">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Sponsor recognition at your business
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
<svg class="mt-0.5 h-4 w-4 shrink-0 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
|
||||
Logo on our sponsor page
|
||||
</li>
|
||||
</ul>
|
||||
@@ -170,11 +170,11 @@
|
||||
<div class="mt-12 text-center">
|
||||
<p class="text-gray-mid">Interested in becoming a sponsor? We'd love to hear from you.</p>
|
||||
{#if orgEmail}
|
||||
<a href="mailto:{orgEmail}?subject=Sponsorship%20Inquiry" class="mt-4 inline-block rounded-lg bg-teal-brand px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-teal-dark hover:shadow-xl">
|
||||
<a href="mailto:{orgEmail}?subject=Sponsorship%20Inquiry" class="mt-4 inline-block rounded-lg bg-primary px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-dark hover:shadow-xl">
|
||||
Contact Us About Sponsorship
|
||||
</a>
|
||||
{:else}
|
||||
<a href="/contact" class="mt-4 inline-block rounded-lg bg-teal-brand px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-teal-dark hover:shadow-xl">
|
||||
<a href="/contact" class="mt-4 inline-block rounded-lg bg-primary px-8 py-3 font-semibold text-white shadow-lg transition hover:bg-primary-dark hover:shadow-xl">
|
||||
Contact Us About Sponsorship
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">Volunteer Opportunities</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">Every skill set has a place here. Find out how you can help.</p>
|
||||
<p class="mt-4 text-lg text-primary-light/90">Every skill set has a place here. Find out how you can help.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -28,8 +28,8 @@
|
||||
<!-- Volunteer Roles -->
|
||||
<section class="bg-white py-16">
|
||||
<div class="mx-auto max-w-6xl px-4">
|
||||
<h2 class="text-center text-3xl font-bold text-gray-brand">Ways to Volunteer</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-teal-brand"></div>
|
||||
<h2 class="text-center text-3xl font-bold text-gray-900">Ways to Volunteer</h2>
|
||||
<div class="mx-auto mt-3 h-1 w-16 rounded bg-primary"></div>
|
||||
|
||||
<div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each [
|
||||
@@ -40,9 +40,9 @@
|
||||
{ icon: 'doc', title: 'Administrative Support', desc: 'Assist with data entry, application processing, email communication, and other behind-the-scenes tasks.' },
|
||||
{ icon: 'star', title: 'Fundraising & Mentoring', desc: 'Organize fundraising campaigns or mentor new foster families as they learn the ropes.' }
|
||||
] as role}
|
||||
<div class="rounded-xl border border-gray-soft bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-teal-light mb-4">
|
||||
<svg class="h-8 w-8 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="rounded-xl border border-gray-200 bg-warm-bg p-8 text-center">
|
||||
<div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-light mb-4">
|
||||
<svg class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
{#if role.icon === 'calendar'}
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
{:else if role.icon === 'truck'}
|
||||
@@ -58,7 +58,7 @@
|
||||
{/if}
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-brand">{role.title}</h3>
|
||||
<h3 class="text-xl font-semibold text-gray-900">{role.title}</h3>
|
||||
<p class="mt-3 text-gray-mid">{role.desc}</p>
|
||||
</div>
|
||||
{/each}
|
||||
@@ -68,13 +68,13 @@
|
||||
|
||||
<!-- CTA -->
|
||||
{#if data.orgConfig.applications.volunteerEnabled}
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-3xl font-bold">Ready to Get Involved?</h2>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
Fill out our volunteer application and we will find the perfect role for you.
|
||||
</p>
|
||||
<a href="/apply/volunteer" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||
<a href="/apply/volunteer" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl">
|
||||
Apply to Volunteer
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
</svelte:head>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h1 class="text-4xl font-bold sm:text-5xl">{blocks?.intro?.heading ?? 'Why Adopt?'}</h1>
|
||||
<p class="mt-4 text-lg text-teal-light/90">
|
||||
<p class="mt-4 text-lg text-primary-light/90">
|
||||
{blocks?.intro?.text ?? 'Adopting a rescue pet is one of the most rewarding decisions you can make.'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -34,13 +34,13 @@
|
||||
{ title: 'Feel Good About It', desc: 'Adoption means you are not supporting puppy mills or irresponsible breeding. You are changing the world, one pet at a time.' }
|
||||
] as reason}
|
||||
<div class="flex gap-6 items-start">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-teal-light flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-teal-brand" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-primary-light flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-brand">{reason.title}</h3>
|
||||
<h3 class="text-xl font-bold text-gray-900">{reason.title}</h3>
|
||||
<p class="mt-2 text-gray-mid">{reason.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -52,11 +52,11 @@
|
||||
|
||||
<!-- CTA -->
|
||||
{#if data.orgConfig.applications.adoptionEnabled}
|
||||
<section class="bg-teal-brand py-16 text-center text-white">
|
||||
<section class="bg-primary py-16 text-center text-white">
|
||||
<div class="mx-auto max-w-4xl px-4">
|
||||
<h2 class="text-3xl font-bold">Ready to Meet Your New Best Friend?</h2>
|
||||
<p class="mt-4 text-lg text-teal-light/90">Browse our available pets and start your adoption journey today.</p>
|
||||
<a href="/pets" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-teal-brand shadow-lg transition hover:bg-teal-light hover:shadow-xl">
|
||||
<p class="mt-4 text-lg text-primary-light/90">Browse our available pets and start your adoption journey today.</p>
|
||||
<a href="/pets" class="mt-8 inline-block rounded-lg bg-white px-8 py-3 font-semibold text-primary shadow-lg transition hover:bg-primary-light hover:shadow-xl">
|
||||
Browse Available Pets
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -14,43 +14,43 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-8">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Total Pets</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">{s.totalPets}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Available</p>
|
||||
<p class="text-3xl font-bold text-teal-brand mt-1">{s.availablePets}</p>
|
||||
<p class="text-3xl font-bold text-primary mt-1">{s.availablePets}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">In Foster</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">{s.fosterPets}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Adopted (30d)</p>
|
||||
<p class="text-3xl font-bold text-green-600 mt-1">{s.adoptedThisMonth}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Active Fosters</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">{s.activeFosters}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Pending Applications</p>
|
||||
<p class="text-3xl font-bold {s.pendingApplications > 0 ? 'text-amber-600' : 'text-gray-900'} mt-1">{s.pendingApplications}</p>
|
||||
<p class="text-xs text-gray-400 mt-1">{s.newApplications} new this month</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Donations (30d)</p>
|
||||
<p class="text-3xl font-bold text-green-600 mt-1">{fmt.format(s.donationsThisMonth / 100)}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Active Users</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">{s.activeUsers}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Page Views (30d)</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">{s.pageViewsThisMonth.toLocaleString()}</p>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
return type.charAt(0).toUpperCase() + type.slice(1);
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const selectClass = inputClass;
|
||||
|
||||
const currentUrl = $derived(pageState.url.pathname + pageState.url.search);
|
||||
@@ -56,7 +56,7 @@
|
||||
<span class="text-sm text-gray-500">{data.total} total</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
|
||||
<form method="GET" class="flex flex-wrap gap-3">
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<input
|
||||
@@ -83,14 +83,14 @@
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
class="px-5 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors whitespace-nowrap cursor-pointer"
|
||||
class="px-5 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors whitespace-nowrap cursor-pointer"
|
||||
>
|
||||
Filter
|
||||
</button>
|
||||
{#if data.q || data.type || data.status}
|
||||
<a
|
||||
href="/admin/applications"
|
||||
class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap"
|
||||
>
|
||||
Clear
|
||||
</a>
|
||||
@@ -106,11 +106,11 @@
|
||||
<p class="text-sm font-medium">{data.q || data.type || data.status ? 'No applications match your filters' : 'No applications yet'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Applicant</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Type</th>
|
||||
@@ -122,14 +122,14 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each apps as app}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<a href="/admin/applications/{app.id}" class="font-medium text-teal-brand hover:text-teal-dark">
|
||||
<a href="/admin/applications/{app.id}" class="font-medium text-primary hover:text-primary-dark">
|
||||
{app.applicantName}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-600">
|
||||
<a href="mailto:{app.email}" class="hover:text-teal-brand">{app.email}</a>
|
||||
<a href="mailto:{app.email}" class="hover:text-primary">{app.email}</a>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold {typeColorMap[app.type] ?? 'bg-gray-100 text-gray-800'}">
|
||||
@@ -141,7 +141,7 @@
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-600">
|
||||
{#if app.petName}
|
||||
<a href="/admin/pets/{app.petId}" class="hover:text-teal-brand">{app.petName}</a>
|
||||
<a href="/admin/pets/{app.petId}" class="hover:text-primary">{app.petName}</a>
|
||||
{:else}
|
||||
<span class="text-gray-400">—</span>
|
||||
{/if}
|
||||
@@ -150,7 +150,7 @@
|
||||
{formatDate(app.createdAt)}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<a href="/admin/applications/{app.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">
|
||||
<a href="/admin/applications/{app.id}" class="text-sm font-medium text-primary hover:text-primary-dark">
|
||||
View
|
||||
</a>
|
||||
</td>
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
);
|
||||
});
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const selectClass = inputClass;
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
@@ -118,7 +118,7 @@
|
||||
<!-- Main Content -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Applicant Info -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Applicant Information</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -128,14 +128,14 @@
|
||||
<div>
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Email</p>
|
||||
<p class="text-sm mt-1">
|
||||
<a href="mailto:{app.applicantEmail}" class="text-teal-brand hover:text-teal-dark">{app.applicantEmail}</a>
|
||||
<a href="mailto:{app.applicantEmail}" class="text-primary hover:text-primary-dark">{app.applicantEmail}</a>
|
||||
</p>
|
||||
</div>
|
||||
{#if app.applicantPhone}
|
||||
<div>
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Phone</p>
|
||||
<p class="text-sm mt-1">
|
||||
<a href="tel:{app.applicantPhone}" class="text-teal-brand hover:text-teal-dark">{app.applicantPhone}</a>
|
||||
<a href="tel:{app.applicantPhone}" class="text-primary hover:text-primary-dark">{app.applicantPhone}</a>
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -147,14 +147,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Form Data -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Application Details</h2>
|
||||
{#if formDataEntries.length === 0}
|
||||
<p class="text-sm text-gray-400">No form data available.</p>
|
||||
{:else}
|
||||
<dl class="space-y-4">
|
||||
{#each formDataEntries as [key, value]}
|
||||
<div class="border-b border-gray-soft pb-3 last:border-0 last:pb-0">
|
||||
<div class="border-b border-gray-200 pb-3 last:border-0 last:pb-0">
|
||||
<dt class="text-xs text-gray-400 uppercase tracking-wide">{formatFieldLabel(key)}</dt>
|
||||
<dd class="text-sm text-gray-900 mt-1 whitespace-pre-wrap">
|
||||
{#if typeof value === 'boolean'}
|
||||
@@ -171,9 +171,9 @@
|
||||
|
||||
{@const fd = typeof app.formData === 'string' ? JSON.parse(app.formData as string) : app.formData}
|
||||
{#if (fd as Record<string, unknown>)?.signature}
|
||||
<div class="mt-6 pt-4 border-t border-gray-soft">
|
||||
<div class="mt-6 pt-4 border-t border-gray-200">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide mb-2">Signature</p>
|
||||
<div class="border border-gray-soft rounded-lg p-3 bg-gray-50 inline-block">
|
||||
<div class="border border-gray-200 rounded-lg p-3 bg-gray-50 inline-block">
|
||||
<img src={(fd as Record<string, unknown>).signature as string} alt="Applicant signature" class="max-h-24" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,7 +182,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Review Notes -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Review Notes</h2>
|
||||
|
||||
{#if showNoteSuccess}
|
||||
@@ -195,7 +195,7 @@
|
||||
{/if}
|
||||
|
||||
{#if app.reviewNotes}
|
||||
<div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-soft">
|
||||
<div class="mb-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
|
||||
<pre class="text-sm text-gray-700 whitespace-pre-wrap font-sans leading-relaxed">{app.reviewNotes}</pre>
|
||||
</div>
|
||||
{:else}
|
||||
@@ -211,7 +211,7 @@
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submittingNote}
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer"
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{submittingNote ? 'Adding...' : 'Add Note'}
|
||||
</button>
|
||||
@@ -220,7 +220,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Homevisit Notes -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Homevisit Notes</h2>
|
||||
|
||||
{#if showHomevisitNoteSuccess}
|
||||
@@ -235,7 +235,7 @@
|
||||
{#if homevisitNotes.length > 0}
|
||||
<div class="space-y-4 mb-6">
|
||||
{#each homevisitNotes as note}
|
||||
<div class="border-l-4 border-teal-brand pl-4 py-2">
|
||||
<div class="border-l-4 border-primary pl-4 py-2">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-sm font-medium text-gray-900">{note.userName}</span>
|
||||
<span class="text-xs text-gray-400">{formatDate(note.createdAt)}</span>
|
||||
@@ -266,7 +266,7 @@
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submittingHomevisitNote}
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer"
|
||||
class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{submittingHomevisitNote ? 'Adding...' : 'Add Homevisit Note'}
|
||||
</button>
|
||||
@@ -278,7 +278,7 @@
|
||||
<!-- Sidebar -->
|
||||
<div class="space-y-6">
|
||||
<!-- Status Update -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Update Status</h2>
|
||||
|
||||
{#if showStatusSuccess}
|
||||
@@ -304,7 +304,7 @@
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submittingStatus}
|
||||
class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer"
|
||||
class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
{submittingStatus ? 'Saving...' : 'Save Status'}
|
||||
</button>
|
||||
@@ -313,7 +313,7 @@
|
||||
|
||||
<!-- Linked Pet -->
|
||||
{#if pet}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Linked Pet</h2>
|
||||
<a href="/admin/pets/{pet.id}" class="block p-4 rounded-lg bg-teal-50 border border-teal-200 hover:bg-teal-100 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -338,7 +338,7 @@
|
||||
|
||||
<!-- Contract Link -->
|
||||
{#if app.type === 'adoption'}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Adoption Contract</h2>
|
||||
<a
|
||||
href="/admin/applications/{app.id}/contract"
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<!-- Add new block -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Add / Update Content Block</h2>
|
||||
<form method="POST" action="?/save" use:enhance={() => handleEnhance('new')}>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
@@ -79,7 +79,7 @@
|
||||
<label for="content" class={labelClass}>Content (JSON or plain text)</label>
|
||||
<textarea id="content" name="content" rows="6" bind:value={newContent} class={inputClass} placeholder='{"title": "Welcome", "body": "..."}'></textarea>
|
||||
</div>
|
||||
<button type="submit" disabled={submitting === 'new'} class="px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting === 'new'} class="px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'new' ? 'Saving...' : 'Save Block'}
|
||||
</button>
|
||||
</form>
|
||||
@@ -87,15 +87,15 @@
|
||||
|
||||
<!-- Existing blocks grouped by page -->
|
||||
{#each [...blocksByPage.entries()] as [pageName, blocks]}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Page: <span class="font-mono text-teal-brand">{pageName}</span></h2>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Page: <span class="font-mono text-primary">{pageName}</span></h2>
|
||||
<div class="space-y-4">
|
||||
{#each blocks as block}
|
||||
{@const key = `${block.page}:${block.sectionKey}`}
|
||||
<div class="border border-gray-soft rounded-lg p-4">
|
||||
<div class="border border-gray-200 rounded-lg p-4">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<code class="text-xs text-gray-500">{block.sectionKey}</code>
|
||||
<button onclick={() => editingKey = editingKey === key ? null : key} class="text-xs text-teal-brand hover:text-teal-dark cursor-pointer">
|
||||
<button onclick={() => editingKey = editingKey === key ? null : key} class="text-xs text-primary hover:text-primary-dark cursor-pointer">
|
||||
{editingKey === key ? 'Cancel' : 'Edit'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@
|
||||
<input type="hidden" name="page" value={block.page} />
|
||||
<input type="hidden" name="sectionKey" value={block.sectionKey} />
|
||||
<textarea name="content" rows="6" class="{inputClass} font-mono text-xs mb-3">{getContentDisplay(block.content)}</textarea>
|
||||
<button type="submit" disabled={submitting === key} class="px-3 py-1.5 text-xs font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting === key} class="px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary-dark disabled:opacity-50 cursor-pointer">
|
||||
{submitting === key ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<h1 class="text-2xl font-bold text-gray-900">Donations</h1>
|
||||
<a
|
||||
href="/admin/donations/new"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 bg-teal-brand text-white text-sm font-medium rounded-lg hover:bg-teal-dark transition-colors"
|
||||
class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-dark transition-colors"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
@@ -59,25 +59,25 @@
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-sm text-gray-500">This Month</p>
|
||||
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format(data.monthTotal / 100)}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-sm text-gray-500">This Year</p>
|
||||
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format(data.yearTotal / 100)}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-sm text-gray-500">Filtered Total</p>
|
||||
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format(data.filteredTotal / 100)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<select
|
||||
class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm text-gray-brand focus:outline-none focus:ring-2 focus:ring-teal-brand"
|
||||
class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
value={data.source}
|
||||
onchange={(e) => handleFilterChange('source', e.currentTarget.value)}
|
||||
>
|
||||
@@ -88,11 +88,11 @@
|
||||
</select>
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="startDate" class="text-sm text-gray-500 whitespace-nowrap">From</label>
|
||||
<input type="date" id="startDate" value={data.startDate} onchange={(e) => handleFilterChange('startDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand" />
|
||||
<input type="date" id="startDate" value={data.startDate} onchange={(e) => handleFilterChange('startDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="endDate" class="text-sm text-gray-500 whitespace-nowrap">To</label>
|
||||
<input type="date" id="endDate" value={data.endDate} onchange={(e) => handleFilterChange('endDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand" />
|
||||
<input type="date" id="endDate" value={data.endDate} onchange={(e) => handleFilterChange('endDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,7 +102,7 @@
|
||||
<DataTable {columns} rows={data.donations}>
|
||||
{#snippet row(donation)}
|
||||
<td class="px-4 py-3">
|
||||
<a href="/admin/donations/{donation.id}" class="font-medium text-teal-brand hover:text-teal-dark hover:underline">
|
||||
<a href="/admin/donations/{donation.id}" class="font-medium text-primary hover:text-primary-dark hover:underline">
|
||||
{donation.donorName ?? 'Anonymous'}
|
||||
</a>
|
||||
{#if donation.donorEmail}
|
||||
@@ -127,7 +127,7 @@
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<a href="/admin/donations/{donation.id}" class="text-teal-brand hover:text-teal-dark text-sm font-medium transition-colors">Edit</a>
|
||||
<a href="/admin/donations/{donation.id}" class="text-primary hover:text-primary-dark text-sm font-medium transition-colors">Edit</a>
|
||||
</td>
|
||||
{/snippet}
|
||||
</DataTable>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -68,7 +68,7 @@
|
||||
{/if}
|
||||
|
||||
<form method="POST" action="?/update" use:enhance={handleEnhance} class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Donation Details</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -113,7 +113,7 @@
|
||||
|
||||
<div class="flex items-center pt-6">
|
||||
<label class="inline-flex items-center gap-3 cursor-pointer">
|
||||
<input type="checkbox" name="isRecurring" checked={donation.isRecurring} class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input type="checkbox" name="isRecurring" checked={donation.isRecurring} class="w-5 h-5 rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm font-medium text-gray-700">Recurring donation</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -130,8 +130,8 @@
|
||||
Delete Donation
|
||||
</button>
|
||||
<div class="flex gap-3">
|
||||
<a href="/admin/donations" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/donations" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
let submitting = $state(false);
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
}}
|
||||
class="space-y-6"
|
||||
>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Donation Details</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -93,7 +93,7 @@
|
||||
|
||||
<div class="flex items-center pt-6">
|
||||
<label class="inline-flex items-center gap-3 cursor-pointer">
|
||||
<input type="checkbox" name="isRecurring" checked={form?.values?.isRecurring === 'on'} class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input type="checkbox" name="isRecurring" checked={form?.values?.isRecurring === 'on'} class="w-5 h-5 rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm font-medium text-gray-700">Recurring donation</span>
|
||||
</label>
|
||||
</div>
|
||||
@@ -106,8 +106,8 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="/admin/donations" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/donations" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Adding...' : 'Add Donation'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Events</h1>
|
||||
<a href="/admin/events/new" class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">
|
||||
<a href="/admin/events/new" class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors">
|
||||
Add Event
|
||||
</a>
|
||||
</div>
|
||||
@@ -21,10 +21,10 @@
|
||||
<p class="text-sm font-medium">No events yet.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Title</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Location</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Date</th>
|
||||
@@ -34,7 +34,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.events as event}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-medium text-gray-900">{event.title}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{event.location ?? '—'}</td>
|
||||
<td class="px-6 py-4 text-gray-600 text-xs">{formatDate(event.startDate)}</td>
|
||||
@@ -46,7 +46,7 @@
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<a href="/admin/events/{event.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a>
|
||||
<a href="/admin/events/{event.id}" class="text-sm font-medium text-primary hover:text-primary-dark">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<form method="POST" action="?/update" use:enhance={() => handleEnhance('update')}>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
@@ -87,12 +87,12 @@
|
||||
<input id="facebookEventId" name="facebookEventId" type="text" value={event.facebookEventId ?? ''} class={inputClass} />
|
||||
</div>
|
||||
<label class="flex items-center gap-2">
|
||||
<input name="published" type="checkbox" checked={event.published} class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input name="published" type="checkbox" checked={event.published} class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm text-gray-700">Published</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button type="submit" disabled={submitting === 'update'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting === 'update'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'update' ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -108,7 +108,7 @@
|
||||
<button type="submit" disabled={submitting === 'delete'} class="px-4 py-2 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'delete' ? 'Deleting...' : 'Yes, Delete'}
|
||||
</button>
|
||||
<button type="button" onclick={() => confirmDelete = false} class="px-4 py-2 text-sm rounded-lg border border-gray-soft text-gray-700 hover:bg-gray-50 cursor-pointer">Cancel</button>
|
||||
<button type="button" onclick={() => confirmDelete = false} class="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 cursor-pointer">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
let { form } = $props();
|
||||
let submitting = $state(false);
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<form method="POST" use:enhance={() => {
|
||||
submitting = true;
|
||||
return async ({ update }) => { submitting = false; await update(); };
|
||||
@@ -59,15 +59,15 @@
|
||||
<input id="facebookEventId" name="facebookEventId" type="text" class={inputClass} placeholder="123456789" />
|
||||
</div>
|
||||
<label class="flex items-center gap-2">
|
||||
<input name="published" type="checkbox" checked class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input name="published" type="checkbox" checked class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm text-gray-700">Published</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Creating...' : 'Create Event'}
|
||||
</button>
|
||||
<a href="/admin/events" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-700 hover:bg-gray-50 transition-colors">Cancel</a>
|
||||
<a href="/admin/events" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Expenses</h1>
|
||||
<a href="/admin/expenses/new" class="inline-flex items-center gap-2 px-4 py-2.5 bg-teal-brand text-white text-sm font-medium rounded-lg hover:bg-teal-dark transition-colors">
|
||||
<a href="/admin/expenses/new" class="inline-flex items-center gap-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-dark transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
@@ -50,21 +50,21 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-sm text-gray-500">This Month</p>
|
||||
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format((data.monthTotal ?? 0) / 100)}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-sm text-gray-500">This Year</p>
|
||||
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format((data.yearTotal ?? 0) / 100)}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-sm text-gray-500">Filtered Total</p>
|
||||
<p class="text-2xl font-bold text-gray-900 mt-1">{fmt.format((data.filteredTotal ?? 0) / 100)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="flex-1">
|
||||
<input
|
||||
@@ -72,16 +72,16 @@
|
||||
placeholder="Filter by category..."
|
||||
value={data.category}
|
||||
onchange={(e) => handleFilterChange('category', e.currentTarget.value)}
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand"
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="startDate" class="text-sm text-gray-500 whitespace-nowrap">From</label>
|
||||
<input type="date" id="startDate" value={data.startDate} onchange={(e) => handleFilterChange('startDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand" />
|
||||
<input type="date" id="startDate" value={data.startDate} onchange={(e) => handleFilterChange('startDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="endDate" class="text-sm text-gray-500 whitespace-nowrap">To</label>
|
||||
<input type="date" id="endDate" value={data.endDate} onchange={(e) => handleFilterChange('endDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand" />
|
||||
<input type="date" id="endDate" value={data.endDate} onchange={(e) => handleFilterChange('endDate', e.currentTarget.value)} class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,7 +91,7 @@
|
||||
<DataTable {columns} rows={data.expenses}>
|
||||
{#snippet row(expense)}
|
||||
<td class="px-4 py-3">
|
||||
<a href="/admin/expenses/{expense.id}" class="font-medium text-teal-brand hover:text-teal-dark hover:underline">
|
||||
<a href="/admin/expenses/{expense.id}" class="font-medium text-primary hover:text-primary-dark hover:underline">
|
||||
{expense.description || 'No description'}
|
||||
</a>
|
||||
</td>
|
||||
@@ -109,7 +109,7 @@
|
||||
<td class="px-4 py-3 text-gray-600">{expense.vetName ?? '—'}</td>
|
||||
<td class="px-4 py-3 text-gray-600">{formatDate(expense.date)}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<a href="/admin/expenses/{expense.id}" class="text-teal-brand hover:text-teal-dark text-sm font-medium transition-colors">Edit</a>
|
||||
<a href="/admin/expenses/{expense.id}" class="text-primary hover:text-primary-dark text-sm font-medium transition-colors">Edit</a>
|
||||
</td>
|
||||
{/snippet}
|
||||
</DataTable>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
return date.toISOString().split('T')[0];
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -61,7 +61,7 @@
|
||||
{/if}
|
||||
|
||||
<form method="POST" action="?/update" use:enhance={handleEnhance} class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Expense Details</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="md:col-span-2">
|
||||
@@ -109,7 +109,7 @@
|
||||
{#if expense.receiptUrl}
|
||||
<div class="md:col-span-2">
|
||||
<p class={labelClass}>Receipt</p>
|
||||
<a href={expense.receiptUrl} target="_blank" class="text-sm text-teal-brand hover:text-teal-dark">View receipt</a>
|
||||
<a href={expense.receiptUrl} target="_blank" class="text-sm text-primary hover:text-primary-dark">View receipt</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -125,8 +125,8 @@
|
||||
Delete Expense
|
||||
</button>
|
||||
<div class="flex gap-3">
|
||||
<a href="/admin/expenses" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/expenses" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
let submitting = $state(false);
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
use:enhance={() => { submitting = true; return async ({ update }) => { submitting = false; await update(); }; }}
|
||||
class="space-y-6"
|
||||
>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Expense Details</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="md:col-span-2">
|
||||
@@ -85,8 +85,8 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="/admin/expenses" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/expenses" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Adding...' : 'Add Expense'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -21,34 +21,34 @@
|
||||
|
||||
<!-- Summary stats -->
|
||||
<div class="grid grid-cols-3 gap-4 mb-8">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Active Fosters</p>
|
||||
<p class="text-3xl font-bold text-teal-brand mt-1">{data.activeFosters.length}</p>
|
||||
<p class="text-3xl font-bold text-primary mt-1">{data.activeFosters.length}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Supply Requests</p>
|
||||
<p class="text-3xl font-bold {data.pendingSupplyRequests.length > 0 ? 'text-amber-600' : 'text-gray-900'} mt-1">{data.pendingSupplyRequests.length}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Pending Posts</p>
|
||||
<p class="text-3xl font-bold {data.pendingSubmissionsCount > 0 ? 'text-amber-600' : 'text-gray-900'} mt-1">{data.pendingSubmissionsCount}</p>
|
||||
<a href="/admin/moderation" class="text-xs text-teal-brand hover:text-teal-dark mt-1 block">Review</a>
|
||||
<a href="/admin/moderation" class="text-xs text-primary hover:text-primary-dark mt-1 block">Review</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Active fosters -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Active Foster Assignments</h2>
|
||||
{#if data.activeFosters.length === 0}
|
||||
<p class="text-sm text-gray-400">No active fosters.</p>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each data.activeFosters as foster}
|
||||
<div class="flex items-center justify-between border-b border-gray-soft pb-3 last:border-0">
|
||||
<div class="flex items-center justify-between border-b border-gray-200 pb-3 last:border-0">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">
|
||||
<a href="/admin/pets/{foster.petId}" class="hover:text-teal-brand">{foster.petName ?? '—'}</a>
|
||||
<a href="/admin/pets/{foster.petId}" class="hover:text-primary">{foster.petName ?? '—'}</a>
|
||||
</p>
|
||||
<p class="text-xs text-gray-500">{foster.fostererName ?? foster.fostererEmail ?? '—'}</p>
|
||||
</div>
|
||||
@@ -60,14 +60,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Pending supply requests -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Pending Supply Requests</h2>
|
||||
{#if data.pendingSupplyRequests.length === 0}
|
||||
<p class="text-sm text-gray-400">No pending requests.</p>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each data.pendingSupplyRequests as req}
|
||||
<div class="border-b border-gray-soft pb-3 last:border-0">
|
||||
<div class="border-b border-gray-200 pb-3 last:border-0">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<p class="text-sm font-medium text-gray-900">{req.requesterName ?? '—'}</p>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {urgencyColors[req.urgency] ?? 'bg-gray-100 text-gray-600'}">
|
||||
|
||||
@@ -27,10 +27,10 @@
|
||||
|
||||
{#if active.length > 0}
|
||||
<h2 class="text-base font-semibold text-gray-700 mb-3">Active</h2>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden mb-8">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-8">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Pet</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Foster</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Since</th>
|
||||
@@ -39,9 +39,9 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each active as a}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-medium text-gray-900">
|
||||
<a href="/admin/pets/{a.petId}" class="hover:text-teal-brand">{a.petName ?? '—'}</a>
|
||||
<a href="/admin/pets/{a.petId}" class="hover:text-primary">{a.petName ?? '—'}</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-600">
|
||||
<p>{a.fostererName ?? '—'}</p>
|
||||
@@ -65,12 +65,12 @@
|
||||
{/if}
|
||||
|
||||
{#if past.length > 0}
|
||||
<details class="bg-white rounded-xl shadow-sm border border-gray-soft p-4">
|
||||
<details class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
|
||||
<summary class="text-sm font-medium text-gray-600 cursor-pointer">Past Assignments ({past.length})</summary>
|
||||
<div class="mt-4">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft">
|
||||
<tr class="border-b border-gray-200">
|
||||
<th class="py-2 font-semibold text-gray-600">Pet</th>
|
||||
<th class="py-2 font-semibold text-gray-600">Foster</th>
|
||||
<th class="py-2 font-semibold text-gray-600">Period</th>
|
||||
@@ -78,7 +78,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each past as a}
|
||||
<tr class="border-b border-gray-soft last:border-0">
|
||||
<tr class="border-b border-gray-200 last:border-0">
|
||||
<td class="py-3 text-gray-900">{a.petName ?? '—'}</td>
|
||||
<td class="py-3 text-gray-600">{a.fostererName ?? '—'}</td>
|
||||
<td class="py-3 text-gray-500 text-xs">{formatDate(a.startDate)} – {formatDate(a.endDate)}</td>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Happy Tails</h1>
|
||||
<a href="/admin/happy-tails/new" class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">
|
||||
<a href="/admin/happy-tails/new" class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors">
|
||||
Add Story
|
||||
</a>
|
||||
</div>
|
||||
@@ -21,10 +21,10 @@
|
||||
<p class="text-sm font-medium">No happy tails stories yet.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Title</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Adopter</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Pet</th>
|
||||
@@ -35,7 +35,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.stories as story}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-medium text-gray-900">{story.title}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{story.adopterName ?? '—'}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{story.petName ?? '—'}</td>
|
||||
@@ -53,7 +53,7 @@
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-500 text-xs">{formatDate(story.createdAt)}</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<a href="/admin/happy-tails/{story.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a>
|
||||
<a href="/admin/happy-tails/{story.id}" class="text-sm font-medium text-primary hover:text-primary-dark">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<form method="POST" action="?/update" use:enhance={() => handleEnhance('update')}>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
@@ -78,17 +78,17 @@
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<label class="flex items-center gap-2">
|
||||
<input name="published" type="checkbox" checked={story.published} class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input name="published" type="checkbox" checked={story.published} class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm text-gray-700">Published</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input name="featured" type="checkbox" checked={story.featured} class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input name="featured" type="checkbox" checked={story.featured} class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm text-gray-700">Featured</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button type="submit" disabled={submitting === 'update'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting === 'update'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'update' ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -104,7 +104,7 @@
|
||||
<button type="submit" disabled={submitting === 'delete'} class="px-4 py-2 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'delete' ? 'Deleting...' : 'Yes, Delete'}
|
||||
</button>
|
||||
<button type="button" onclick={() => confirmDelete = false} class="px-4 py-2 text-sm rounded-lg border border-gray-soft text-gray-700 hover:bg-gray-50 cursor-pointer">Cancel</button>
|
||||
<button type="button" onclick={() => confirmDelete = false} class="px-4 py-2 text-sm rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 cursor-pointer">Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
let { data, form } = $props();
|
||||
let submitting = $state(false);
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<form method="POST" use:enhance={() => {
|
||||
submitting = true;
|
||||
return async ({ update }) => { submitting = false; await update(); };
|
||||
@@ -67,20 +67,20 @@
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<label class="flex items-center gap-2">
|
||||
<input name="published" type="checkbox" class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input name="published" type="checkbox" class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm text-gray-700">Published</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2">
|
||||
<input name="featured" type="checkbox" class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input name="featured" type="checkbox" class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<span class="text-sm text-gray-700">Featured</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Creating...' : 'Create Story'}
|
||||
</button>
|
||||
<a href="/admin/happy-tails" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-700 hover:bg-gray-50 transition-colors">Cancel</a>
|
||||
<a href="/admin/happy-tails" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -18,10 +18,10 @@
|
||||
<p class="text-sm font-medium">No mentors yet. Assign a user the mentor role to create one.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Pets Mentoring</th>
|
||||
@@ -31,10 +31,10 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.mentors as mentor}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-medium text-gray-900">{mentor.userName}</td>
|
||||
<td class="px-6 py-4 text-gray-600">
|
||||
<a href="mailto:{mentor.userEmail}" class="hover:text-teal-brand">{mentor.userEmail}</a>
|
||||
<a href="mailto:{mentor.userEmail}" class="hover:text-primary">{mentor.userEmail}</a>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-gray-600">{mentor.petCount}</td>
|
||||
<td class="px-6 py-4">
|
||||
@@ -43,7 +43,7 @@
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<a href="/admin/mentors/{mentor.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a>
|
||||
<a href="/admin/mentors/{mentor.id}" class="text-sm font-medium text-primary hover:text-primary-dark">Edit</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -42,20 +42,20 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-2">
|
||||
<form method="POST" use:enhance={handleEnhance} class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 space-y-4">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Mentor Details</h2>
|
||||
<div>
|
||||
<label for="bio" class={labelClass}>Bio</label>
|
||||
<textarea id="bio" name="bio" rows="5" class="{inputClass} resize-y">{mentor.bio ?? ''}</textarea>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" id="active" name="active" checked={mentor.active} class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input type="checkbox" id="active" name="active" checked={mentor.active} class="w-5 h-5 rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<label for="active" class="text-sm font-medium text-gray-700">Active mentor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="/admin/mentors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/mentors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -63,7 +63,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Assigned Pets ({data.assignedPets.length})</h2>
|
||||
{#if data.assignedPets.length === 0}
|
||||
<p class="text-sm text-gray-400">No pets assigned.</p>
|
||||
@@ -71,7 +71,7 @@
|
||||
<ul class="space-y-2">
|
||||
{#each data.assignedPets as pet}
|
||||
<li class="flex items-center justify-between">
|
||||
<a href="/admin/pets/{pet.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">{pet.name}</a>
|
||||
<a href="/admin/pets/{pet.id}" class="text-sm font-medium text-primary hover:text-primary-dark">{pet.name}</a>
|
||||
<StatusBadge status={pet.status} />
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
@@ -36,11 +36,11 @@
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each data.messages as msg}
|
||||
<div class="bg-white rounded-xl shadow-sm border {msg.read ? 'border-gray-soft' : 'border-teal-brand'} overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border {msg.read ? 'border-gray-200' : 'border-primary'} overflow-hidden">
|
||||
<div class="flex items-center justify-between p-4 cursor-pointer" onclick={() => toggleExpand(msg.id)} role="button" tabindex="0" onkeydown={(e) => e.key === 'Enter' && toggleExpand(msg.id)}>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
{#if !msg.read}
|
||||
<span class="flex-shrink-0 w-2 h-2 rounded-full bg-teal-brand"></span>
|
||||
<span class="flex-shrink-0 w-2 h-2 rounded-full bg-primary"></span>
|
||||
{:else}
|
||||
<span class="flex-shrink-0 w-2 h-2"></span>
|
||||
{/if}
|
||||
@@ -56,17 +56,17 @@
|
||||
</div>
|
||||
|
||||
{#if expanded.has(msg.id)}
|
||||
<div class="px-6 pb-4 border-t border-gray-soft">
|
||||
<div class="px-6 pb-4 border-t border-gray-200">
|
||||
<div class="py-4 text-sm text-gray-700 whitespace-pre-wrap">{msg.message}</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<a href="mailto:{msg.email}" class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-soft text-teal-brand hover:bg-gray-50">Reply</a>
|
||||
<a href="mailto:{msg.email}" class="px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-200 text-primary hover:bg-gray-50">Reply</a>
|
||||
{#if msg.read}
|
||||
<form method="POST" action="?/markUnread" use:enhance={() => {
|
||||
submitting = `unread-${msg.id}`;
|
||||
return async ({ update }) => { submitting = null; await update(); };
|
||||
}}>
|
||||
<input type="hidden" name="id" value={msg.id} />
|
||||
<button type="submit" disabled={submitting === `unread-${msg.id}`} class="px-3 py-1.5 text-xs rounded-lg border border-gray-soft text-gray-600 hover:bg-gray-50 cursor-pointer disabled:opacity-50">Mark Unread</button>
|
||||
<button type="submit" disabled={submitting === `unread-${msg.id}`} class="px-3 py-1.5 text-xs rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 cursor-pointer disabled:opacity-50">Mark Unread</button>
|
||||
</form>
|
||||
{:else}
|
||||
<form method="POST" action="?/markRead" use:enhance={() => {
|
||||
@@ -74,7 +74,7 @@
|
||||
return async ({ update }) => { submitting = null; await update(); };
|
||||
}}>
|
||||
<input type="hidden" name="id" value={msg.id} />
|
||||
<button type="submit" disabled={submitting === `read-${msg.id}`} class="px-3 py-1.5 text-xs rounded-lg border border-gray-soft text-gray-600 hover:bg-gray-50 cursor-pointer disabled:opacity-50">Mark Read</button>
|
||||
<button type="submit" disabled={submitting === `read-${msg.id}`} class="px-3 py-1.5 text-xs rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 cursor-pointer disabled:opacity-50">Mark Read</button>
|
||||
</form>
|
||||
{/if}
|
||||
<form method="POST" action="?/delete" use:enhance={() => {
|
||||
|
||||
@@ -68,11 +68,11 @@
|
||||
{/if}
|
||||
|
||||
{#if data.reviewed.length > 0}
|
||||
<details class="bg-white rounded-xl shadow-sm border border-gray-soft p-4">
|
||||
<details class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
|
||||
<summary class="text-sm font-medium text-gray-600 cursor-pointer">Reviewed ({data.reviewed.length})</summary>
|
||||
<div class="mt-4 space-y-3">
|
||||
{#each data.reviewed as sub}
|
||||
<div class="flex items-center justify-between text-sm border-b border-gray-soft pb-3 last:border-0">
|
||||
<div class="flex items-center justify-between text-sm border-b border-gray-200 pb-3 last:border-0">
|
||||
<div>
|
||||
<span class="font-medium text-gray-900">{sub.petName ?? '—'}</span>
|
||||
<span class="text-gray-400 mx-2">·</span>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
const activeSubscribers = $derived(data.subscribers.filter(s => !s.unsubscribedAt));
|
||||
const unsubscribed = $derived(data.subscribers.filter(s => s.unsubscribedAt));
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<h1 class="text-2xl font-bold text-gray-900">Newsletter Subscribers</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">{data.activeCount} active subscribers</p>
|
||||
</div>
|
||||
<button onclick={() => showAddForm = !showAddForm} class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors cursor-pointer">
|
||||
<button onclick={() => showAddForm = !showAddForm} class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors cursor-pointer">
|
||||
{showAddForm ? 'Cancel' : 'Add Subscriber'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -34,7 +34,7 @@
|
||||
{/if}
|
||||
|
||||
{#if showAddForm}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<form method="POST" action="?/add" use:enhance={() => {
|
||||
submitting = 'add';
|
||||
return async ({ update, result }) => {
|
||||
@@ -53,7 +53,7 @@
|
||||
<input id="name" name="name" type="text" class={inputClass} placeholder="Jane Smith" />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" disabled={submitting === 'add'} class="px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting === 'add'} class="px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'add' ? 'Adding...' : 'Add Subscriber'}
|
||||
</button>
|
||||
</form>
|
||||
@@ -65,10 +65,10 @@
|
||||
<p class="text-sm font-medium">No active subscribers.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Subscribed</th>
|
||||
@@ -77,7 +77,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each activeSubscribers as sub}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 text-gray-900">{sub.email}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{sub.name ?? '—'}</td>
|
||||
<td class="px-6 py-4 text-gray-500 text-xs">{formatDate(sub.subscribedAt)}</td>
|
||||
@@ -98,7 +98,7 @@
|
||||
{/if}
|
||||
|
||||
{#if unsubscribed.length > 0}
|
||||
<details class="bg-white rounded-xl shadow-sm border border-gray-soft p-4">
|
||||
<details class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
|
||||
<summary class="text-sm font-medium text-gray-600 cursor-pointer">Unsubscribed ({unsubscribed.length})</summary>
|
||||
<div class="mt-4 space-y-2">
|
||||
{#each unsubscribed as sub}
|
||||
|
||||
@@ -72,12 +72,12 @@
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Financial Reports</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<select value={data.year} onchange={changeYear} class="px-3 py-2 rounded-lg border border-gray-300 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand">
|
||||
<select value={data.year} onchange={changeYear} class="px-3 py-2 rounded-lg border border-gray-300 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary">
|
||||
{#each yearOptions as y}
|
||||
<option value={y}>{y}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<button onclick={exportCsv} class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors cursor-pointer">Export CSV</button>
|
||||
<button onclick={exportCsv} class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors cursor-pointer">Export CSV</button>
|
||||
<button onclick={() => window.print()} class="px-4 py-2 text-sm font-medium rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer">Print</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Sponsor Management</h1>
|
||||
<a href="/admin/sponsors/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">+ Add Sponsor</a>
|
||||
<a href="/admin/sponsors/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors">+ Add Sponsor</a>
|
||||
</div>
|
||||
|
||||
{#each ['top_dog', 'wagging_tails', 'wet_noses'] as tier}
|
||||
@@ -37,7 +37,7 @@
|
||||
<div class="bg-white rounded-xl shadow-sm border-2 {sponsor.active ? tierColors[tier] : 'border-gray-200 bg-gray-50 opacity-60'} p-5">
|
||||
<div class="flex items-start gap-4">
|
||||
{#if sponsor.logoUrl}
|
||||
<img src={sponsor.logoUrl} alt="{sponsor.name} logo" class="w-16 h-16 rounded-lg object-contain bg-white border border-gray-soft flex-shrink-0" />
|
||||
<img src={sponsor.logoUrl} alt="{sponsor.name} logo" class="w-16 h-16 rounded-lg object-contain bg-white border border-gray-200 flex-shrink-0" />
|
||||
{:else}
|
||||
<div class="w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -48,12 +48,12 @@
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-sm font-semibold text-gray-900 truncate">{sponsor.name}</h3>
|
||||
{#if sponsor.websiteUrl}
|
||||
<a href={sponsor.websiteUrl} target="_blank" rel="noopener noreferrer" class="text-xs text-teal-brand hover:text-teal-dark truncate block">{sponsor.websiteUrl}</a>
|
||||
<a href={sponsor.websiteUrl} target="_blank" rel="noopener noreferrer" class="text-xs text-primary hover:text-primary-dark truncate block">{sponsor.websiteUrl}</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-soft">
|
||||
<div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-200">
|
||||
<form method="POST" action="?/toggleActive" use:enhance={() => async ({ update }) => { await update({ reset: false }); }}>
|
||||
<input type="hidden" name="sponsorId" value={sponsor.id} />
|
||||
<input type="hidden" name="active" value={sponsor.active ? 'false' : 'true'} />
|
||||
@@ -62,7 +62,7 @@
|
||||
{sponsor.active ? 'Active' : 'Inactive'}
|
||||
</button>
|
||||
</form>
|
||||
<a href="/admin/sponsors/{sponsor.id}" class="text-xs font-medium text-teal-brand hover:text-teal-dark">Edit</a>
|
||||
<a href="/admin/sponsors/{sponsor.id}" class="text-xs font-medium text-primary hover:text-primary-dark">Edit</a>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
{/if}
|
||||
|
||||
<form method="POST" use:enhance={handleEnhance} class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 space-y-4">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<label for="name" class={labelClass}>Name <span class="text-red-500">*</span></label>
|
||||
<input type="text" id="name" name="name" required value={sponsor.name} class={inputClass} />
|
||||
@@ -73,13 +73,13 @@
|
||||
<input type="number" id="sortOrder" name="sortOrder" value={sponsor.sortOrder} min="0" class={inputClass} />
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" id="active" name="active" checked={sponsor.active} class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input type="checkbox" id="active" name="active" checked={sponsor.active} class="w-5 h-5 rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<label for="active" class="text-sm font-medium text-gray-700">Active (visible on website)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="/admin/sponsors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/sponsors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { enhance } from '$app/forms';
|
||||
let { form } = $props();
|
||||
let submitting = $state(false);
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
{/if}
|
||||
|
||||
<form method="POST" use:enhance={() => { submitting = true; return async ({ update }) => { submitting = false; await update(); }; }} class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6 space-y-4">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<label for="name" class={labelClass}>Name <span class="text-red-500">*</span></label>
|
||||
<input type="text" id="name" name="name" required class={inputClass} />
|
||||
@@ -51,13 +51,13 @@
|
||||
<input type="number" id="sortOrder" name="sortOrder" value="0" min="0" class={inputClass} />
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="checkbox" id="active" name="active" checked class="w-5 h-5 rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input type="checkbox" id="active" name="active" checked class="w-5 h-5 rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<label for="active" class="text-sm font-medium text-gray-700">Active (visible on website)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="/admin/sponsors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/sponsors" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Adding...' : 'Add Sponsor'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
return JSON.stringify(val, null, 2);
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||||
<!-- Site Settings -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Site Settings</h2>
|
||||
|
||||
<form method="POST" action="?/saveSetting" use:enhance={() => handleEnhance('new-setting')} class="mb-6 p-4 bg-gray-50 rounded-lg">
|
||||
@@ -72,7 +72,7 @@
|
||||
<input id="setting-value" name="value" type="text" bind:value={newSettingValue} class={inputClass} />
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" disabled={submitting === 'new-setting'} class="mt-3 px-4 py-2 text-xs font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting === 'new-setting'} class="mt-3 px-4 py-2 text-xs font-medium rounded-lg bg-primary text-white hover:bg-primary-dark disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'new-setting' ? 'Saving...' : 'Save'}
|
||||
</button>
|
||||
</form>
|
||||
@@ -82,10 +82,10 @@
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each data.settings as setting}
|
||||
<div class="border border-gray-soft rounded-lg p-3">
|
||||
<div class="border border-gray-200 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<code class="text-xs font-semibold text-gray-700">{setting.key}</code>
|
||||
<button onclick={() => editingSetting = editingSetting === setting.key ? null : setting.key} class="text-xs text-teal-brand hover:text-teal-dark cursor-pointer">
|
||||
<button onclick={() => editingSetting = editingSetting === setting.key ? null : setting.key} class="text-xs text-primary hover:text-primary-dark cursor-pointer">
|
||||
{editingSetting === setting.key ? 'Cancel' : 'Edit'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -93,7 +93,7 @@
|
||||
<form method="POST" action="?/saveSetting" use:enhance={() => handleEnhance(`setting-${setting.key}`)}>
|
||||
<input type="hidden" name="key" value={setting.key} />
|
||||
<input name="value" type="text" value={setting.value} class="{inputClass} mb-2" />
|
||||
<button type="submit" disabled={submitting === `setting-${setting.key}`} class="px-3 py-1.5 text-xs font-medium rounded bg-teal-brand text-white hover:bg-teal-dark disabled:opacity-50 cursor-pointer">Save</button>
|
||||
<button type="submit" disabled={submitting === `setting-${setting.key}`} class="px-3 py-1.5 text-xs font-medium rounded bg-primary text-white hover:bg-primary-dark disabled:opacity-50 cursor-pointer">Save</button>
|
||||
</form>
|
||||
{:else}
|
||||
<p class="text-xs text-gray-600 truncate">{setting.value}</p>
|
||||
@@ -105,7 +105,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Org Config -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Org Config</h2>
|
||||
|
||||
{#if data.configs.length === 0}
|
||||
@@ -113,10 +113,10 @@
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each data.configs as cfg}
|
||||
<div class="border border-gray-soft rounded-lg p-3">
|
||||
<div class="border border-gray-200 rounded-lg p-3">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<code class="text-xs font-semibold text-gray-700">{cfg.key}</code>
|
||||
<button onclick={() => editingConfig = editingConfig === cfg.key ? null : cfg.key} class="text-xs text-teal-brand hover:text-teal-dark cursor-pointer">
|
||||
<button onclick={() => editingConfig = editingConfig === cfg.key ? null : cfg.key} class="text-xs text-primary hover:text-primary-dark cursor-pointer">
|
||||
{editingConfig === cfg.key ? 'Cancel' : 'Edit'}
|
||||
</button>
|
||||
</div>
|
||||
@@ -124,7 +124,7 @@
|
||||
<form method="POST" action="?/saveConfig" use:enhance={() => handleEnhance(`config-${cfg.key}`)}>
|
||||
<input type="hidden" name="key" value={cfg.key} />
|
||||
<textarea name="value" rows="4" class="{inputClass} font-mono text-xs mb-2">{configDisplay(cfg.value)}</textarea>
|
||||
<button type="submit" disabled={submitting === `config-${cfg.key}`} class="px-3 py-1.5 text-xs font-medium rounded bg-teal-brand text-white hover:bg-teal-dark disabled:opacity-50 cursor-pointer">Save</button>
|
||||
<button type="submit" disabled={submitting === `config-${cfg.key}`} class="px-3 py-1.5 text-xs font-medium rounded bg-primary text-white hover:bg-primary-dark disabled:opacity-50 cursor-pointer">Save</button>
|
||||
</form>
|
||||
{:else}
|
||||
<pre class="text-xs text-gray-600 bg-gray-50 rounded p-2 overflow-auto max-h-24">{configDisplay(cfg.value)}</pre>
|
||||
@@ -137,7 +137,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Audit Log -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Recent Audit Log</h2>
|
||||
{#if data.recentAudit.length === 0}
|
||||
<p class="text-sm text-gray-400">No audit entries.</p>
|
||||
@@ -145,7 +145,7 @@
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft">
|
||||
<tr class="border-b border-gray-200">
|
||||
<th class="pb-2 font-semibold text-gray-600">Time</th>
|
||||
<th class="pb-2 font-semibold text-gray-600">User</th>
|
||||
<th class="pb-2 font-semibold text-gray-600">Action</th>
|
||||
@@ -154,7 +154,7 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.recentAudit as entry}
|
||||
<tr class="border-b border-gray-soft last:border-0">
|
||||
<tr class="border-b border-gray-200 last:border-0">
|
||||
<td class="py-2 text-gray-400 whitespace-nowrap">{formatDate(entry.createdAt)}</td>
|
||||
<td class="py-2 text-gray-600">{entry.userName ?? entry.userEmail ?? 'System'}</td>
|
||||
<td class="py-2 font-mono text-gray-700">{entry.action}</td>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<select
|
||||
value={String(data.days)}
|
||||
onchange={(e) => handleDaysChange(e.currentTarget.value)}
|
||||
class="px-3 py-2 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand"
|
||||
class="px-3 py-2 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
<option value="7">Last 7 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
@@ -28,18 +28,18 @@
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 mb-8">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Human Page Views</p>
|
||||
<p class="text-3xl font-bold text-gray-900 mt-1">{(data.totalViews - data.botViews).toLocaleString()}</p>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-5">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Bot Requests</p>
|
||||
<p class="text-3xl font-bold text-gray-400 mt-1">{data.botViews.toLocaleString()}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Top Pages</h2>
|
||||
{#if data.topPaths.length === 0}
|
||||
<p class="text-sm text-gray-400">No data yet.</p>
|
||||
@@ -55,7 +55,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Top Referrers</h2>
|
||||
{#if data.topReferrers.length === 0}
|
||||
<p class="text-sm text-gray-400">No referrer data yet.</p>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
<p class="text-sm text-amber-600 mt-1">{data.pendingCount} pending approval</p>
|
||||
{/if}
|
||||
</div>
|
||||
<a href="/admin/users/new" class="px-4 py-2 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">
|
||||
<a href="/admin/users/new" class="px-4 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors">
|
||||
Add User
|
||||
</a>
|
||||
</div>
|
||||
@@ -52,10 +52,10 @@
|
||||
<p class="text-sm font-medium">No users found.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Role</th>
|
||||
@@ -66,9 +66,9 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.users as user}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors {!user.active ? 'bg-amber-50' : ''}">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors {!user.active ? 'bg-amber-50' : ''}">
|
||||
<td class="px-6 py-4 font-medium text-gray-900">{user.name}</td>
|
||||
<td class="px-6 py-4 text-gray-600"><a href="mailto:{user.email}" class="hover:text-teal-brand">{user.email}</a></td>
|
||||
<td class="px-6 py-4 text-gray-600"><a href="mailto:{user.email}" class="hover:text-primary">{user.email}</a></td>
|
||||
<td class="px-6 py-4 text-gray-600">{roleLabel(user.role)}</td>
|
||||
<td class="px-6 py-4">
|
||||
{#if user.active}
|
||||
@@ -86,7 +86,7 @@
|
||||
return async ({ update }) => { submitting = null; await update(); };
|
||||
}}>
|
||||
<input type="hidden" name="userId" value={user.id} />
|
||||
<select name="role" class="px-2 py-1.5 rounded border border-gray-soft text-xs bg-white">
|
||||
<select name="role" class="px-2 py-1.5 rounded border border-gray-200 text-xs bg-white">
|
||||
{#each roleOptions as opt}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
@@ -105,13 +105,13 @@
|
||||
Confirm Deny
|
||||
</button>
|
||||
</form>
|
||||
<button onclick={() => confirmDeny = null} class="px-3 py-1.5 text-xs rounded border border-gray-soft text-gray-600 hover:bg-gray-100 cursor-pointer">Cancel</button>
|
||||
<button onclick={() => confirmDeny = null} class="px-3 py-1.5 text-xs rounded border border-gray-200 text-gray-600 hover:bg-gray-100 cursor-pointer">Cancel</button>
|
||||
{:else}
|
||||
<button onclick={() => confirmDeny = user.id} class="px-3 py-1.5 text-xs font-medium rounded border border-red-300 text-red-600 hover:bg-red-50 cursor-pointer">Deny</button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<a href="/admin/users/{user.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a>
|
||||
<a href="/admin/users/{user.id}" class="text-sm font-medium text-primary hover:text-primary-dark">Edit</a>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
{ value: 'sysadmin', label: 'Sysadmin' }
|
||||
];
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
{/if}
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Edit User</h2>
|
||||
<form method="POST" action="?/update" use:enhance={() => handleEnhance('update')}>
|
||||
<div class="space-y-4">
|
||||
@@ -76,22 +76,22 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="active" name="active" type="checkbox" checked={user.active} class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input id="active" name="active" type="checkbox" checked={user.active} class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<label for="active" class="text-sm text-gray-700">Active (can log in)</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6">
|
||||
<button type="submit" disabled={submitting === 'update'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting === 'update'} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting === 'update' ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Password</h2>
|
||||
<button onclick={() => showPasswordForm = !showPasswordForm} class="text-sm text-teal-brand hover:text-teal-dark cursor-pointer">
|
||||
<button onclick={() => showPasswordForm = !showPasswordForm} class="text-sm text-primary hover:text-primary-dark cursor-pointer">
|
||||
{showPasswordForm ? 'Cancel' : 'Reset Password'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
{ value: 'sysadmin', label: 'Sysadmin' }
|
||||
];
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">{form.error}</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<form method="POST" use:enhance={() => {
|
||||
submitting = true;
|
||||
return async ({ update }) => { submitting = false; await update(); };
|
||||
@@ -62,15 +62,15 @@
|
||||
<p class="mt-1 text-xs text-gray-400">User will be prompted to change this on first login.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input id="sendWelcome" name="sendWelcome" type="checkbox" class="rounded border-gray-soft text-teal-brand focus:ring-teal-brand" />
|
||||
<input id="sendWelcome" name="sendWelcome" type="checkbox" class="rounded border-gray-200 text-primary focus:ring-primary" />
|
||||
<label for="sendWelcome" class="text-sm text-gray-700">Send welcome email with login link</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex gap-3">
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Creating...' : 'Create User'}
|
||||
</button>
|
||||
<a href="/admin/users" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-700 hover:bg-gray-50 transition-colors">Cancel</a>
|
||||
<a href="/admin/users" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-700 hover:bg-gray-50 transition-colors">Cancel</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
const vetList = $derived(data.vets);
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Vets — Admin</title></svelte:head>
|
||||
@@ -9,15 +9,15 @@
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Vet Management</h1>
|
||||
<a href="/admin/vets/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors">+ Add Vet</a>
|
||||
<a href="/admin/vets/new" class="px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors">+ Add Vet</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
|
||||
<form method="GET" class="flex gap-3">
|
||||
<input type="text" name="q" value={data.q} placeholder="Search by name or clinic..." class={inputClass} />
|
||||
<button type="submit" class="px-5 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors whitespace-nowrap cursor-pointer">Search</button>
|
||||
<button type="submit" class="px-5 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors whitespace-nowrap cursor-pointer">Search</button>
|
||||
{#if data.q}
|
||||
<a href="/admin/vets" class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors whitespace-nowrap">Clear</a>
|
||||
<a href="/admin/vets" class="px-5 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors whitespace-nowrap">Clear</a>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
@@ -30,10 +30,10 @@
|
||||
<p class="text-sm font-medium">{data.q ? 'No vets match your search' : 'No vets yet'}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Clinic</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Phone</th>
|
||||
@@ -43,12 +43,12 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each vetList as vet}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4"><a href="/admin/vets/{vet.id}" class="font-medium text-teal-brand hover:text-teal-dark">{vet.name}</a></td>
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4"><a href="/admin/vets/{vet.id}" class="font-medium text-primary hover:text-primary-dark">{vet.name}</a></td>
|
||||
<td class="px-6 py-4 text-gray-600">{vet.clinic ?? '—'}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{#if vet.phone}<a href="tel:{vet.phone}" class="hover:text-teal-brand">{vet.phone}</a>{:else}—{/if}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{#if vet.email}<a href="mailto:{vet.email}" class="hover:text-teal-brand">{vet.email}</a>{:else}—{/if}</td>
|
||||
<td class="px-6 py-4 text-right"><a href="/admin/vets/{vet.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">Edit</a></td>
|
||||
<td class="px-6 py-4 text-gray-600">{#if vet.phone}<a href="tel:{vet.phone}" class="hover:text-primary">{vet.phone}</a>{:else}—{/if}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{#if vet.email}<a href="mailto:{vet.email}" class="hover:text-primary">{vet.email}</a>{:else}—{/if}</td>
|
||||
<td class="px-6 py-4 text-right"><a href="/admin/vets/{vet.id}" class="text-sm font-medium text-primary hover:text-primary-dark">Edit</a></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
};
|
||||
}
|
||||
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
{/if}
|
||||
|
||||
<form method="POST" use:enhance={handleEnhance} class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Vet Information</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -78,8 +78,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="/admin/vets" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/vets" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { enhance } from '$app/forms';
|
||||
let { form } = $props();
|
||||
let submitting = $state(false);
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
{/if}
|
||||
|
||||
<form method="POST" use:enhance={() => { submitting = true; return async ({ update }) => { submitting = false; await update(); }; }} class="space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Vet Information</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -51,8 +51,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-3">
|
||||
<a href="/admin/vets" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-soft text-gray-brand hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<a href="/admin/vets" class="px-6 py-2.5 text-sm font-medium rounded-lg border border-gray-200 text-gray-900 hover:bg-gray-100 transition-colors">Cancel</a>
|
||||
<button type="submit" disabled={submitting} class="px-6 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Adding...' : 'Add Vet'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -39,11 +39,11 @@
|
||||
<span class="text-sm text-gray-500">{data.total} total</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
|
||||
<select
|
||||
value={data.status}
|
||||
onchange={(e) => handleFilterChange(e.currentTarget.value)}
|
||||
class="px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-sm focus:outline-none focus:ring-2 focus:ring-teal-brand"
|
||||
class="px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-sm focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
>
|
||||
{#each statusOptions as opt}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
@@ -56,10 +56,10 @@
|
||||
<p class="text-sm font-medium">No volunteer applications found.</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft overflow-hidden">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<table class="w-full text-sm text-left">
|
||||
<thead>
|
||||
<tr class="border-b border-gray-soft bg-gray-50">
|
||||
<tr class="border-b border-gray-200 bg-gray-50">
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Name</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Email</th>
|
||||
<th class="px-6 py-3 font-semibold text-gray-600">Phone</th>
|
||||
@@ -70,14 +70,14 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data.volunteers as vol}
|
||||
<tr class="border-b border-gray-soft last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<tr class="border-b border-gray-200 last:border-0 hover:bg-gray-50 transition-colors">
|
||||
<td class="px-6 py-4 font-medium text-gray-900">{vol.applicantName}</td>
|
||||
<td class="px-6 py-4 text-gray-600"><a href="mailto:{vol.email}" class="hover:text-teal-brand">{vol.email}</a></td>
|
||||
<td class="px-6 py-4 text-gray-600"><a href="mailto:{vol.email}" class="hover:text-primary">{vol.email}</a></td>
|
||||
<td class="px-6 py-4 text-gray-600">{vol.phone ?? '—'}</td>
|
||||
<td class="px-6 py-4"><StatusBadge status={vol.status} /></td>
|
||||
<td class="px-6 py-4 text-gray-500 text-xs">{formatDate(vol.createdAt)}</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<a href="/admin/volunteers/{vol.id}" class="text-sm font-medium text-teal-brand hover:text-teal-dark">View</a>
|
||||
<a href="/admin/volunteers/{vol.id}" class="text-sm font-medium text-primary hover:text-primary-dark">View</a>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
});
|
||||
|
||||
const statusOptions = ['pending', 'reviewing', 'approved', 'denied', 'withdrawn'];
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-soft bg-white text-gray-brand placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-brand focus:border-teal-brand text-sm';
|
||||
const inputClass = 'w-full px-3 py-2.5 rounded-lg border border-gray-200 bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm';
|
||||
const labelClass = 'block text-sm font-medium text-gray-700 mb-1';
|
||||
</script>
|
||||
|
||||
@@ -57,17 +57,17 @@
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Applicant Information</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Email</p>
|
||||
<p class="text-sm mt-1"><a href="mailto:{app.applicantEmail}" class="text-teal-brand hover:text-teal-dark">{app.applicantEmail}</a></p>
|
||||
<p class="text-sm mt-1"><a href="mailto:{app.applicantEmail}" class="text-primary hover:text-primary-dark">{app.applicantEmail}</a></p>
|
||||
</div>
|
||||
{#if app.applicantPhone}
|
||||
<div>
|
||||
<p class="text-xs text-gray-400 uppercase tracking-wide">Phone</p>
|
||||
<p class="text-sm mt-1"><a href="tel:{app.applicantPhone}" class="text-teal-brand hover:text-teal-dark">{app.applicantPhone}</a></p>
|
||||
<p class="text-sm mt-1"><a href="tel:{app.applicantPhone}" class="text-primary hover:text-primary-dark">{app.applicantPhone}</a></p>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
@@ -78,11 +78,11 @@
|
||||
</div>
|
||||
|
||||
{#if formDataEntries.length > 0}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Application Details</h2>
|
||||
<dl class="space-y-4">
|
||||
{#each formDataEntries as [key, value]}
|
||||
<div class="border-b border-gray-soft pb-3 last:border-0 last:pb-0">
|
||||
<div class="border-b border-gray-200 pb-3 last:border-0 last:pb-0">
|
||||
<dt class="text-xs text-gray-400 uppercase tracking-wide">{formatFieldLabel(key)}</dt>
|
||||
<dd class="text-sm text-gray-900 mt-1 whitespace-pre-wrap">
|
||||
{#if typeof value === 'boolean'}{value ? 'Yes' : 'No'}
|
||||
@@ -97,7 +97,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-soft p-6">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 mb-4">Update Status</h2>
|
||||
{#if showSuccess}
|
||||
<div class="mb-4 p-3 bg-green-50 border border-green-200 rounded-lg text-sm text-green-700 flex items-center gap-2">
|
||||
@@ -114,7 +114,7 @@
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" disabled={submitting} class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-teal-brand text-white hover:bg-teal-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
<button type="submit" disabled={submitting} class="w-full px-4 py-2.5 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors disabled:opacity-50 cursor-pointer">
|
||||
{submitting ? 'Saving...' : 'Save Status'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user