| {% extends "base.html" %}
|
|
|
| {% block title %}Binge - Watch Movies Online{% endblock %}
|
|
|
| {% block content %}
|
| <div class="space-y-8">
|
|
|
| <div class="max-w-2xl mx-auto mb-12">
|
| <form action="/" method="get" class="relative">
|
| <input
|
| type="search"
|
| name="search"
|
| placeholder="Search movies..."
|
| value="{{ search or '' }}"
|
| class="w-full bg-dark-lighter border border-dark-accent rounded-lg px-4 py-3 pl-12 focus:outline-none focus:border-gray-500 transition-colors"
|
| >
|
| <svg class="w-6 h-6 text-gray-400 absolute left-3 top-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
| </svg>
|
| </form>
|
| </div>
|
|
|
| {% if not movies %}
|
| <div class="text-center py-12">
|
| <p class="text-gray-400">No movies found. Try a different search.</p>
|
| </div>
|
| {% else %}
|
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
| {% for movie in movies %}
|
| <div class="bg-dark-lighter rounded-lg overflow-hidden shadow-lg transform hover:scale-105 transition-transform duration-200">
|
| <a href="/movie/{{ loop.index0 }}" class="block">
|
| <div class="aspect-w-16 aspect-h-9 bg-dark-accent">
|
| <img
|
| src="https://via.placeholder.com/300x450"
|
| alt="{{ movie.title }}"
|
| class="w-full h-full object-cover opacity-90 hover:opacity-100 transition-opacity"
|
| >
|
| </div>
|
| <div class="p-4 space-y-2">
|
| <h2 class="text-lg font-semibold line-clamp-1">{{ movie.title }}</h2>
|
| {% if movie.release_year %}
|
| <p class="text-sm text-gray-400">{{ movie.release_year }}</p>
|
| {% endif %}
|
| {% if movie.rating %}
|
| <div class="flex items-center">
|
| <svg class="w-5 h-5 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>
|
| <span class="ml-1 text-sm">{{ movie.rating }}/10</span>
|
| </div>
|
| {% endif %}
|
| </div>
|
| </a>
|
| </div>
|
| {% endfor %}
|
| </div>
|
| {% endif %}
|
| </div>
|
| {% endblock %} |
