mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 06:51:08 -05:00
a5fd56b117
- Implemented featured parks and rides sections with responsive design and hover effects. - Created a recent activity feed to display user interactions with parks and rides. - Developed a search results template to show relevant results with icons and descriptions. - Added a statistics dashboard to showcase total parks, rides, reviews, and countries.
96 lines
5.6 KiB
HTML
96 lines
5.6 KiB
HTML
<!-- Featured Parks Grid -->
|
|
{% for park in featured_parks %}
|
|
<div class="group relative overflow-hidden rounded-xl bg-background border border-border/50 shadow-sm hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1">
|
|
<!-- Park Image -->
|
|
<div class="aspect-video relative overflow-hidden">
|
|
{% if park.card_image %}
|
|
<img src="{{ park.card_image.url }}"
|
|
alt="{{ park.name }}"
|
|
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
|
loading="lazy">
|
|
{% else %}
|
|
<div class="w-full h-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
|
|
<svg class="w-16 h-16 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
|
|
</svg>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Overlay -->
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
|
|
|
<!-- Quick Stats Overlay -->
|
|
<div class="absolute top-4 right-4 flex gap-2">
|
|
{% if park.average_rating %}
|
|
<div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium flex items-center gap-1">
|
|
<svg class="w-3 h-3 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
|
|
</svg>
|
|
{{ park.average_rating|floatformat:1 }}
|
|
</div>
|
|
{% endif %}
|
|
{% if park.ride_count %}
|
|
<div class="bg-background/90 backdrop-blur-sm px-2 py-1 rounded-full text-xs font-medium">
|
|
{{ park.ride_count }} rides
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Park Info -->
|
|
<div class="p-6">
|
|
<h3 class="text-xl font-bold mb-2 group-hover:text-primary transition-colors">
|
|
<a href="/parks/{{ park.slug }}/" class="stretched-link">
|
|
{{ park.name }}
|
|
</a>
|
|
</h3>
|
|
|
|
<p class="text-muted-foreground text-sm mb-4 line-clamp-2">
|
|
{{ park.description|truncatewords:20 }}
|
|
</p>
|
|
|
|
<!-- Park Details -->
|
|
<div class="flex items-center justify-between text-sm">
|
|
<div class="flex items-center gap-4">
|
|
{% if park.location %}
|
|
<div class="flex items-center gap-1 text-muted-foreground">
|
|
<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="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>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
|
</svg>
|
|
{{ park.location.city }}, {{ park.location.country }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if park.opening_year %}
|
|
<div class="flex items-center gap-1 text-muted-foreground">
|
|
<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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>
|
|
{{ park.opening_year }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Status Badge -->
|
|
{% if park.status %}
|
|
<span class="px-2 py-1 rounded-full text-xs font-medium
|
|
{% if park.status == 'operating' %}bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
|
|
{% elif park.status == 'closed' %}bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400
|
|
{% elif park.status == 'seasonal' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400
|
|
{% else %}bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400{% endif %}">
|
|
{{ park.get_status_display }}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-span-full text-center py-12">
|
|
<svg class="w-16 h-16 text-muted-foreground mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"></path>
|
|
</svg>
|
|
<h3 class="text-lg font-semibold mb-2">No Featured Parks</h3>
|
|
<p class="text-muted-foreground">Check back soon for featured theme parks!</p>
|
|
</div>
|
|
{% endfor %} |