feat: Add detailed park and ride pages with HTMX integration

- Implemented park detail page with dynamic content loading for rides and weather.
- Created park list page with filters and search functionality.
- Developed ride detail page showcasing ride stats, reviews, and similar rides.
- Added ride list page with filtering options and dynamic loading.
- Introduced search results page with tabs for parks, rides, and users.
- Added HTMX tests for global search functionality.
This commit is contained in:
pacnpal
2025-12-19 19:53:20 -05:00
parent bf04e4d854
commit b9063ff4f8
154 changed files with 4536 additions and 2570 deletions

View File

@@ -6,21 +6,117 @@ module.exports = {
content: [
'./templates/**/*.html',
'./static/css/src/**/*.css',
'./parks/templates/**/*.html',
'./rides/templates/**/*.html',
'./core/templates/**/*.html',
'./accounts/templates/**/*.html',
'./**/static/**/*.js',
'./backend/apps/**/templates/**/*.html',
'./backend/static/**/*.js',
'./static/js/**/*.js',
],
theme: {
extend: {
colors: {
primary: '#4f46e5', // Vibrant indigo
secondary: '#e11d48', // Vibrant rose
accent: '#8b5cf6'
border: "var(--color-border)",
input: "var(--color-input)",
ring: "var(--color-ring)",
background: "var(--color-background)",
foreground: "var(--color-foreground)",
primary: {
DEFAULT: "var(--color-primary)",
foreground: "var(--color-primary-foreground)",
50: "var(--color-primary-50)",
100: "var(--color-primary-100)",
200: "var(--color-primary-200)",
300: "var(--color-primary-300)",
400: "var(--color-primary-400)",
500: "var(--color-primary-500)",
600: "var(--color-primary-600)",
700: "var(--color-primary-700)",
800: "var(--color-primary-800)",
900: "var(--color-primary-900)",
950: "var(--color-primary-950)",
},
secondary: {
DEFAULT: "var(--color-secondary)",
foreground: "var(--color-secondary-foreground)",
50: "var(--color-secondary-50)",
100: "var(--color-secondary-100)",
200: "var(--color-secondary-200)",
300: "var(--color-secondary-300)",
400: "var(--color-secondary-400)",
500: "var(--color-secondary-500)",
600: "var(--color-secondary-600)",
700: "var(--color-secondary-700)",
800: "var(--color-secondary-800)",
900: "var(--color-secondary-900)",
950: "var(--color-secondary-950)",
},
accent: {
DEFAULT: "var(--color-accent)",
foreground: "var(--color-accent-foreground)",
},
destructive: {
DEFAULT: "var(--color-destructive)",
foreground: "var(--color-destructive-foreground)",
},
muted: {
DEFAULT: "var(--color-muted)",
foreground: "var(--color-muted-foreground)",
},
popover: {
DEFAULT: "var(--color-popover)",
foreground: "var(--color-popover-foreground)",
},
card: {
DEFAULT: "var(--color-card)",
foreground: "var(--color-card-foreground)",
},
success: {
50: "var(--color-success-50)",
100: "var(--color-success-100)",
200: "var(--color-success-200)",
300: "var(--color-success-300)",
400: "var(--color-success-400)",
500: "var(--color-success-500)",
600: "var(--color-success-600)",
700: "var(--color-success-700)",
800: "var(--color-success-800)",
900: "var(--color-success-900)",
950: "var(--color-success-950)",
},
warning: {
50: "var(--color-warning-50)",
100: "var(--color-warning-100)",
200: "var(--color-warning-200)",
300: "var(--color-warning-300)",
400: "var(--color-warning-400)",
500: "var(--color-warning-500)",
600: "var(--color-warning-600)",
700: "var(--color-warning-700)",
800: "var(--color-warning-800)",
900: "var(--color-warning-900)",
950: "var(--color-warning-950)",
},
error: {
50: "var(--color-error-50)",
100: "var(--color-error-100)",
200: "var(--color-error-200)",
300: "var(--color-error-300)",
400: "var(--color-error-400)",
500: "var(--color-error-500)",
600: "var(--color-error-600)",
700: "var(--color-error-700)",
800: "var(--color-error-800)",
900: "var(--color-error-900)",
950: "var(--color-error-950)",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
'sans': ['Poppins', 'sans-serif'],
sans: ["var(--font-family-sans)"],
serif: ["var(--font-family-serif)"],
mono: ["var(--font-family-mono)"],
},
},
},
@@ -29,6 +125,7 @@ module.exports = {
require("@tailwindcss/forms"),
require("@tailwindcss/aspect-ratio"),
require("@tailwindcss/container-queries"),
require("tailwindcss-animate"),
plugin(function ({ addVariant }) {
addVariant("htmx-settling", ["&.htmx-settling", ".htmx-settling &"]);
addVariant("htmx-request", ["&.htmx-request", ".htmx-request &"]);