mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 11:11:10 -05:00
b570cb6848
- Added operator/owner priority card implementation to enhance visibility on smaller screens. - Completed adaptive grid system to eliminate white space issues and improve responsiveness across all card layouts. - Verified card layout fixes through extensive testing, confirming balanced layouts across various screen sizes and content scenarios. - Conducted investigation into layout inconsistencies, identifying critical issues and recommending immediate fixes. - Assessed white space issues and confirmed no critical problems in current implementations. - Documented comprehensive testing plan and results, ensuring all layouts are functioning as intended.
200 lines
9.7 KiB
HTML
200 lines
9.7 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(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">
|
|
{{ 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 %}
|
|
<p class="text-gray-600 dark:text-gray-400">No trending parks found.</p>
|
|
{% 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(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">
|
|
{{ 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 %}
|
|
<p class="text-gray-600 dark:text-gray-400">No trending rides found.</p>
|
|
{% 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 %}
|
|
<p class="text-gray-600 dark:text-gray-400">No rated items found.</p>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|