Files
thrillwiki_django_no_react/templates/partials/homepage/recent_activity.html
pacnpal a5fd56b117 Add homepage templates for featured parks, rides, recent activity, search results, and statistics
- 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.
2025-09-19 15:29:22 -04:00

183 lines
11 KiB
HTML

<!-- Recent Activity Feed -->
{% for activity in recent_activities %}
<div class="flex items-start space-x-4 p-6 bg-background rounded-xl border border-border/50 hover:shadow-md transition-all duration-200">
<!-- Activity Icon/Avatar -->
<div class="flex-shrink-0">
{% if activity.type == 'review' %}
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
</div>
{% elif activity.type == 'photo' %}
<div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
{% elif activity.type == 'park_update' %}
<div class="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-accent" 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>
{% elif activity.type == 'ride_update' %}
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
</svg>
</div>
{% else %}
<div class="w-12 h-12 bg-muted rounded-full flex items-center justify-center">
<svg class="w-6 h-6 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
{% endif %}
</div>
<!-- Activity Content -->
<div class="flex-1 min-w-0">
<!-- Activity Header -->
<div class="flex items-center justify-between mb-2">
<div class="flex items-center gap-2">
{% if activity.user %}
<span class="font-medium text-foreground">{{ activity.user.username }}</span>
{% else %}
<span class="font-medium text-foreground">ThrillWiki</span>
{% endif %}
<!-- Activity Type Badge -->
<span class="px-2 py-1 rounded-full text-xs font-medium
{% if activity.type == 'review' %}bg-primary/10 text-primary
{% elif activity.type == 'photo' %}bg-secondary/10 text-secondary
{% elif activity.type == 'park_update' %}bg-accent/10 text-accent
{% elif activity.type == 'ride_update' %}bg-primary/10 text-primary
{% else %}bg-muted text-muted-foreground{% endif %}">
{% if activity.type == 'review' %}Review
{% elif activity.type == 'photo' %}Photo
{% elif activity.type == 'park_update' %}Park Update
{% elif activity.type == 'ride_update' %}Ride Update
{% else %}Update{% endif %}
</span>
</div>
<!-- Timestamp -->
<time class="text-sm text-muted-foreground" datetime="{{ activity.created_at|date:'c' }}">
{{ activity.created_at|timesince }} ago
</time>
</div>
<!-- Activity Description -->
<div class="mb-3">
{% if activity.type == 'review' %}
<p class="text-foreground">
{% if activity.rating %}
Rated
<span class="inline-flex items-center gap-1">
<svg class="w-4 h-4 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>
{{ activity.rating }}/5
</span>
{% else %}
Reviewed
{% endif %}
{% if activity.content_object %}
<a href="{{ activity.content_object.get_absolute_url }}" class="font-medium text-primary hover:text-primary/80 transition-colors">
{{ activity.content_object.name }}
</a>
{% if activity.content_object.park and activity.content_object.park != activity.content_object %}
at <a href="{{ activity.content_object.park.get_absolute_url }}" class="text-muted-foreground hover:text-primary transition-colors">{{ activity.content_object.park.name }}</a>
{% endif %}
{% endif %}
</p>
{% if activity.comment %}
<blockquote class="mt-2 pl-4 border-l-2 border-border text-muted-foreground italic">
"{{ activity.comment|truncatewords:20 }}"
</blockquote>
{% endif %}
{% elif activity.type == 'photo' %}
<p class="text-foreground">
Added a new photo to
{% if activity.content_object %}
<a href="{{ activity.content_object.get_absolute_url }}" class="font-medium text-primary hover:text-primary/80 transition-colors">
{{ activity.content_object.name }}
</a>
{% endif %}
</p>
{% elif activity.type == 'park_update' %}
<p class="text-foreground">
{% if activity.content_object %}
<a href="{{ activity.content_object.get_absolute_url }}" class="font-medium text-primary hover:text-primary/80 transition-colors">
{{ activity.content_object.name }}
</a>
{% endif %}
{{ activity.description|default:"was updated" }}
</p>
{% elif activity.type == 'ride_update' %}
<p class="text-foreground">
{% if activity.content_object %}
<a href="{{ activity.content_object.get_absolute_url }}" class="font-medium text-primary hover:text-primary/80 transition-colors">
{{ activity.content_object.name }}
</a>
{% if activity.content_object.park %}
at <a href="{{ activity.content_object.park.get_absolute_url }}" class="text-muted-foreground hover:text-primary transition-colors">{{ activity.content_object.park.name }}</a>
{% endif %}
{% endif %}
{{ activity.description|default:"was updated" }}
</p>
{% else %}
<p class="text-foreground">{{ activity.description }}</p>
{% endif %}
</div>
<!-- Activity Image (if applicable) -->
{% if activity.image %}
<div class="mt-3">
<img src="{{ activity.image.url }}"
alt="Activity image"
class="w-full max-w-sm h-32 object-cover rounded-lg border border-border/50"
loading="lazy">
</div>
{% endif %}
<!-- Activity Actions -->
<div class="flex items-center gap-4 mt-3 text-sm text-muted-foreground">
{% if activity.content_object %}
<a href="{{ activity.content_object.get_absolute_url }}"
class="inline-flex items-center gap-1 hover:text-primary 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
View Details
</a>
{% endif %}
{% if activity.type == 'review' and activity.helpful_count %}
<span class="inline-flex items-center gap-1">
<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="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"></path>
</svg>
{{ activity.helpful_count }} helpful
</span>
{% endif %}
</div>
</div>
</div>
{% empty %}
<div class="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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-lg font-semibold mb-2">No Recent Activity</h3>
<p class="text-muted-foreground">Be the first to add a review or photo!</p>
</div>
{% endfor %}