-
- Home
-
-
- {isAuthenticated && (
-
- Admin
+ <>
+
+
+
+
+
🌈
+
Rainbow, Cupcakes & Unicorns
+
🧁
- )}
-
- {isAuthenticated ? (
-
-
-
- ) : (
-
- Login
-
- )}
-
-
-
-
-
-
+ Home
+
-
+ {isAuthenticated && (
+
+ Admin
+
+ )}
- {hasFilters && (
-
+ ) : (
+
+ Login
+
)}
+
+ {isVideoApp && (
+
+
+
+
+
+
+
+
+
+
+ {hasFilters && (
+
+ )}
+
+
+
+
)}
-
+
);
}
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
new file mode 100644
index 0000000..a8abb0a
--- /dev/null
+++ b/frontend/src/globals.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ /* Clean, bright colors for kids */
+ --background: #fef8f3;
+ --foreground: #2d2d2d;
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: #ff6b9d;
+ --primary-foreground: #fff;
+ --secondary: #ffa500;
+ --secondary-foreground: #fff;
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: #7c3aed;
+ --accent-foreground: #fff;
+ --destructive: oklch(0.577 0.245 27.325);
+ --destructive-foreground: oklch(0.577 0.245 27.325);
+ --border: #e0e0e0;
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --radius: 1.5rem;
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+ --background: #1a1a1a;
+ --foreground: #f5f5f5;
+ --card: oklch(0.145 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.145 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: #ff6b9d;
+ --primary-foreground: #fff;
+ --secondary: #ffa500;
+ --secondary-foreground: #fff;
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: #a78bfa;
+ --accent-foreground: #1a1a1a;
+ --destructive: oklch(0.396 0.141 25.723);
+ --destructive-foreground: oklch(0.637 0.237 25.331);
+ --border: #e0e0e0;
+ --input: oklch(0.269 0 0);
+ --ring: oklch(0.439 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(0.269 0 0);
+ --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+ /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-destructive-foreground: var(--destructive-foreground);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index ec3020a..dbeb946 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -1,26 +1,57 @@
import { Link } from 'react-router-dom';
import { APPS } from '../config/apps';
-import './LandingPage.css';
+
+const categoryEmojis: { [key: string]: string } = {
+ videos: '📺',
+ speechsounds: '🗣️',
+ all: '🎮',
+};
+
+const categoryColors: { [key: string]: string } = {
+ videos: 'pink',
+ speechsounds: 'purple',
+};
+
+const colorMap: { [key: string]: string } = {
+ pink: 'bg-pink-100 hover:bg-pink-200',
+ purple: 'bg-purple-100 hover:bg-purple-200',
+ blue: 'bg-blue-100 hover:bg-blue-200',
+ green: 'bg-green-100 hover:bg-green-200',
+ indigo: 'bg-indigo-100 hover:bg-indigo-200',
+ amber: 'bg-amber-100 hover:bg-amber-200',
+};
export function LandingPage() {
return (
-
-
- {APPS.map(app => (
-
-
- {app.description}
-
- {app.disabled ? (
-
- ) : (
- {app.cta}
- )}
-
-
- ))}
+
+
+
+
+ {APPS.map(app => {
+ const color = categoryColors[app.id] || 'pink';
+ const emoji = categoryEmojis[app.id] || '🎮';
+
+ return (
+
{
+ if (app.disabled) {
+ e.preventDefault();
+ }
+ }}
+ >
+
{emoji}
+
{app.name}
+
{app.description}
+
+ );
+ })}
+
+
-
-
-
Admin Login
-
Sign in to manage channels
+
+
+
+
Admin Login
+
Sign in to manage channels
-