Kwaku Danso
3f8bc58ca9
Phase 1 — Core API (Go): - Events, guests, tokens, RSVPs CRUD on PostgreSQL via pgx/v5 - HMAC-signed per-guest tokens with format validation - Health endpoint with DB ping, slog JSON logging, graceful shutdown Phase 2 — NATS + Fraud Engine: - NATS JetStream pub/sub with explicit-ack consumers - Python/FastAPI fraud engine with heuristic risk scoring (fingerprint mismatch, IP change, missing signals, repeated access) - gRPC sync scoring with 250ms fail-open timeout - Per-guest baseline tracking; risk bands low/medium/high/block Phase 3 — Notifications + Frontend: - Notification worker scaffolding (Twilio/SES stubs, retry/backoff) - Nuxt 3 frontend with Tailwind dark theme + brand green - Live monitor via WebSocket with auto-reconnect - Activity history endpoint backfills monitor with RSVPs + scored access checks (including blocked attempts) UX polish: - Marketing-friendly landing page (hero mockup, how-it-works, features, use cases, testimonials, FAQ, final CTA) - Animated layered card mockups on landing + new-event page - Plus-ones stepper, RSVP status badges, filter buttons - Friendly access-check labels (Verified/Review/Suspicious/Blocked) - Dashboard hydration fix via ClientOnly wrapper Infrastructure: - docker-compose for full local dev (postgres, nats, api, fraud-engine, notifier, frontend) - Multi-stage Dockerfiles, non-root UID 1000 - Integration tests with testcontainers-go Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
68 lines
2.1 KiB
CSS
68 lines
2.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background-color: #09090b; /* zinc-950 */
|
|
color: #fafafa; /* zinc-50 */
|
|
min-height: 100vh;
|
|
}
|
|
|
|
@layer components {
|
|
.btn {
|
|
@apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition;
|
|
}
|
|
.btn-primary {
|
|
@apply btn bg-brand-500 text-zinc-950 hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-400;
|
|
}
|
|
.btn-ghost {
|
|
@apply btn text-zinc-300 hover:bg-zinc-800;
|
|
}
|
|
.input {
|
|
@apply block w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm
|
|
text-zinc-100 placeholder-zinc-500 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500;
|
|
}
|
|
.card {
|
|
@apply rounded-lg border border-zinc-800 bg-zinc-900 p-5 shadow-sm;
|
|
}
|
|
.label {
|
|
@apply mb-1 block text-xs font-medium uppercase tracking-wide text-zinc-400;
|
|
}
|
|
.badge {
|
|
@apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
|
|
}
|
|
.badge-low { @apply badge bg-brand-900/40 text-brand-300; }
|
|
.badge-medium { @apply badge bg-yellow-900/40 text-yellow-300; }
|
|
.badge-high { @apply badge bg-orange-900/40 text-orange-300; }
|
|
.badge-block { @apply badge bg-red-900/50 text-red-300; }
|
|
}
|
|
|
|
/* Shared float animations for mockup cards (rotation baked in so the cards
|
|
keep their tilt while gently bobbing). */
|
|
@keyframes gg-float-cw {
|
|
0%, 100% { transform: translateY(0) rotate(3deg); }
|
|
50% { transform: translateY(-7px) rotate(3deg); }
|
|
}
|
|
@keyframes gg-float-cw-sm {
|
|
0%, 100% { transform: translateY(0) rotate(2deg); }
|
|
50% { transform: translateY(-5px) rotate(2deg); }
|
|
}
|
|
@keyframes gg-float-ccw {
|
|
0%, 100% { transform: translateY(0) rotate(-2deg); }
|
|
50% { transform: translateY(-9px) rotate(-2deg); }
|
|
}
|
|
@keyframes gg-float-ccw-sm {
|
|
0%, 100% { transform: translateY(0) rotate(-3deg); }
|
|
50% { transform: translateY(-6px) rotate(-3deg); }
|
|
}
|
|
|
|
@keyframes gg-ping {
|
|
0%, 100% { transform: scale(1); opacity: 0.7; }
|
|
50% { transform: scale(1.6); opacity: 0.3; }
|
|
}
|