mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 14:31:08 -05:00
d0cfe61af3
Update the home page template (backend/templates/home.html) to replace default text placeholders with visually appealing, styled divs for empty states. This includes adding gradient backgrounds to park and ride sections when no images are present, and displaying custom messages and emojis for "No Parks Yet", "No Rides Yet", and "No Ratings Yet" with improved styling and layout. Replit-Commit-Author: Agent Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/8pkVaei
212 lines
11 KiB
HTML
212 lines
11 KiB
HTML
{% extends 'base/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}ThrillWiki - Theme Parks & Attractions Guide{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<div class="mb-12 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-gray-800 dark:border-gray-700">
|
|
<div class="px-4 py-12 text-center">
|
|
<h1 class="mb-6 text-4xl font-bold text-gray-900 md:text-5xl lg:text-6xl dark:text-white">
|
|
Welcome to ThrillWiki
|
|
</h1>
|
|
<p class="max-w-3xl mx-auto mb-8 text-xl text-gray-600 md:text-2xl dark:text-gray-300">
|
|
Your ultimate guide to theme parks and attractions worldwide
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a href="{% url 'parks:park_list' %}"
|
|
class="px-8 py-3 text-lg btn-primary">
|
|
Explore Parks
|
|
</a>
|
|
<a href="{% url 'rides:global_ride_list' %}"
|
|
class="px-8 py-3 text-lg btn-secondary">
|
|
View Rides
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats Section -->
|
|
<div class="grid-adaptive-sm mb-12">
|
|
<!-- Total Parks -->
|
|
<a href="{% url 'parks:park_list' %}"
|
|
class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
|
|
{{ stats.total_parks }}
|
|
</div>
|
|
<div class="text-xl text-gray-600 dark:text-gray-300">
|
|
Theme Parks
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Total Attractions -->
|
|
<a href="{% url 'rides:global_ride_list' %}"
|
|
class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
|
|
{{ stats.ride_count }}
|
|
</div>
|
|
<div class="text-xl text-gray-600 dark:text-gray-300">
|
|
Attractions
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Total Roller Coasters -->
|
|
<a href="{% url 'rides:global_roller_coasters' %}"
|
|
class="flex flex-col items-center justify-center p-6 text-center transition-transform transform bg-white rounded-lg shadow-lg dark:bg-gray-800 hover:-translate-y-1 hover:shadow-xl">
|
|
<div class="mb-2 text-4xl font-bold text-blue-600 dark:text-blue-400">
|
|
{{ stats.coaster_count }}
|
|
</div>
|
|
<div class="text-xl text-gray-600 dark:text-gray-300">
|
|
Roller Coasters
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Featured Content -->
|
|
<div class="grid-adaptive">
|
|
<!-- Trending Parks -->
|
|
<div class="p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
|
|
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
|
|
Trending Parks
|
|
</h2>
|
|
<div class="space-y-4">
|
|
{% for park in popular_parks %}
|
|
<a href="{% url 'parks:park_detail' park.slug %}"
|
|
class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
|
|
{% if park.photos.first %}
|
|
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ park.photos.first.image.url }}') center/cover no-repeat;"
|
|
{% else %}
|
|
style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"
|
|
{% endif %}>
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
|
|
<div class="text-lg font-semibold">
|
|
{{ park.name }}
|
|
</div>
|
|
<div class="text-sm text-gray-200">
|
|
{{ park.ride_count }} rides, {{ park.coaster_count }} coasters
|
|
</div>
|
|
{% if park.average_rating %}
|
|
<div class="absolute top-0 right-0 p-2 text-yellow-400">
|
|
<span class="mr-1">★</span>
|
|
<span>{{ park.average_rating|floatformat:1 }}/10</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-sm text-gray-400">Rating not available</div>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
{% empty %}
|
|
<div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
|
|
<div class="mb-4 text-4xl">🎢</div>
|
|
<div class="text-lg font-medium text-gray-900 dark:text-white">No Parks Yet</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Parks will appear here once they're added to the database</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trending Rides -->
|
|
<div class="p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
|
|
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
|
|
Trending Rides
|
|
</h2>
|
|
<div class="space-y-4">
|
|
{% for ride in popular_rides %}
|
|
<a href="{% url 'parks:rides:ride_detail' ride.park.slug ride.slug %}"
|
|
class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
|
|
{% if ride.photos.first %}
|
|
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ ride.photos.first.image.url }}') center/cover no-repeat;"
|
|
{% else %}
|
|
style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"
|
|
{% endif %}>
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
|
|
<div class="text-lg font-semibold">
|
|
{{ ride.name }}
|
|
</div>
|
|
<div class="text-sm text-gray-200">
|
|
at {{ ride.park.name }}
|
|
</div>
|
|
{% if ride.average_rating %}
|
|
<div class="flex items-center mt-1 text-yellow-400">
|
|
<span class="mr-1">★</span>
|
|
<span>{{ ride.average_rating|floatformat:1 }}/10</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-sm text-gray-400">Rating not available</div>
|
|
{% endif %}
|
|
</div>
|
|
</a>
|
|
{% empty %}
|
|
<div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
|
|
<div class="mb-4 text-4xl">🎠</div>
|
|
<div class="text-lg font-medium text-gray-900 dark:text-white">No Rides Yet</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Rides will appear here once they're added to the database</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Highest Rated -->
|
|
<div class="p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800">
|
|
<h2 class="mb-6 text-2xl font-bold text-gray-900 dark:text-white">
|
|
Highest Rated
|
|
</h2>
|
|
<div class="space-y-4">
|
|
{% for item in highest_rated %}
|
|
{% if item.park %}
|
|
<!-- This is a ride -->
|
|
<a href="{% url 'parks:rides:ride_detail' item.park.slug item.slug %}"
|
|
class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
|
|
{% if item.photos.first %}
|
|
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ item.photos.first.image.url }}') center/cover no-repeat;"
|
|
{% else %}
|
|
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));"
|
|
{% endif %}>
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
|
|
<div class="text-lg font-semibold">
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="text-sm text-gray-200">
|
|
at {{ item.park.name }}
|
|
</div>
|
|
<div class="flex items-center mt-1 text-yellow-400">
|
|
<span class="mr-1">★</span>
|
|
<span>{{ item.average_rating|floatformat:1 }}/10</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% else %}
|
|
<!-- This is a park -->
|
|
<a href="{% url 'parks:park_detail' item.slug %}"
|
|
class="relative block h-48 overflow-hidden transition-all rounded-lg group hover:-translate-y-1 hover:shadow-xl"
|
|
{% if item.photos.first %}
|
|
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), url('{{ item.photos.first.image.url }}') center/cover no-repeat;"
|
|
{% else %}
|
|
style="background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));"
|
|
{% endif %}>
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 text-white">
|
|
<div class="text-lg font-semibold">
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="text-sm text-gray-200">
|
|
{{ item.ride_count }} rides, {{ item.coaster_count }} coasters
|
|
</div>
|
|
<div class="absolute top-0 right-0 p-2 text-yellow-400">
|
|
<span class="mr-1">★</span>
|
|
<span>{{ item.average_rating|floatformat:1 }}/10</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% empty %}
|
|
<div class="flex flex-col items-center justify-center h-48 p-8 text-center bg-gray-50 rounded-lg dark:bg-gray-800/50">
|
|
<div class="mb-4 text-4xl">⭐</div>
|
|
<div class="text-lg font-medium text-gray-900 dark:text-white">No Ratings Yet</div>
|
|
<div class="text-sm text-gray-600 dark:text-gray-400">Highest rated content will appear here once users start rating</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|