mirror of
https://github.com/barkeser2002/offline-db.git
synced 2026-09-25 01:40:07 +03:00
Barış Keserandgoogle-labs-jules[bot]
d32f89b45b
Added `focus-visible:ring-2 focus-visible:ring-brand` classes to the episode links in `templates/home.html` and the footer links in `templates/base.html`. This ensures users navigating with a keyboard have clear, accessible focus states, resolving the issue noted in the Palette journal without affecting mouse users. Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
31 lines
1.7 KiB
HTML
31 lines
1.7 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{% for episode in latest_episodes %}
|
|
<div class="bg-gray-800 rounded-lg overflow-hidden hover:scale-105 transition transform shadow-lg border border-gray-700 focus-within:ring-2 focus-within:ring-brand focus-within:ring-offset-2 focus-within:ring-offset-darkbg">
|
|
<a href="{% url 'watch' episode.id %}" class="focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-gray-900 block w-full h-full rounded-lg">
|
|
<div class="relative">
|
|
{% if episode.thumbnail %}
|
|
<img src="{{ episode.thumbnail }}" alt="{{ episode.title }}" class="w-full h-48 object-cover">
|
|
{% else %}
|
|
<div class="w-full h-48 bg-gray-900 flex items-center justify-center text-gray-600">No Image</div>
|
|
{% endif %}
|
|
<div class="absolute bottom-0 left-0 bg-black bg-opacity-70 px-2 py-1 text-xs text-white">
|
|
{{ episode.season.anime.title }}
|
|
</div>
|
|
</div>
|
|
<div class="p-4">
|
|
<h3 class="text-lg font-bold text-white mb-1 truncate">
|
|
{% if episode.title %}{{ episode.title }}{% else %}Episode {{ episode.number }}{% endif %}
|
|
</h3>
|
|
<p class="text-gray-400 text-sm">Season {{ episode.season.number }} | Ep {{ episode.number }}</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% empty %}
|
|
<p class="text-gray-400 col-span-4 text-center">No episodes available yet.</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|