..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125 | {% for anime in data %}
<div class="w-full max-w-full px-2 mb-2">
<a href="{% url 'watch:watch' anime.id %}">
<div class="flex flex-row bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4 items-center">
<img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-16 lg:w-12 h-24 lg:h-16 object-cover"/>
<div class="flex flex-col lg:flex-row gap-2 max-w-[calc(100%-6rem)] lg:items-center">
<h2 class="max-w-full text-xl font-bold text-transparent bg-clip-text truncate overflow-hidden text-ellipsis whitespace-nowrap" style="background: linear-gradient(-45deg, {% if anime.color %}{{ anime.color }}{% else %}white{% endif %}, white); -webkit-background-clip: text; background-clip: text;">
{% if user.preferences.title_language == "english" and anime.title.english %}
{{ anime.title.english }}
{% elif user.preferences.title_language == "native" and anime.title.native %}
{{ anime.title.native }}
{% else %}
{{ anime.title.romaji }}
{% endif %}
</h2>
<div class="flex flex-row gap-2 flex-wrap lg:flex-nowrap">
{% if anime.status == "Ongoing" %}
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<span class="text-green-500 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
Ongoing
</span>
{% elif anime.status == "Not yet aired" %}
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<span class="text-yellow-500 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
Not yet aired
</span>
{% else %}
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<span class="text-blue-500 pt-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
<circle cx="12" cy="12" r="12" />
</svg>
</span>
Finished
</span>
{% endif %}
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
<path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
<path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
<path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
</svg>
{{ anime.type }}
</span>
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
</svg>
{{ anime.releaseDate }}
</span>
{% if anime.rating %}
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
</svg>
{{ anime.rating }}
</span>
{% endif %}
{% if anime.totalEpisodes %}
<span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/>
</svg>
{{ anime.totalEpisodes }}
</span>
{% endif %}
</div>
<div class="flex flex-row gap-2 flex-wrap lg:flex-nowrap">
{% for genre in anime.genres %}
{% if genre == "Action" %}
<span class="text-xs font-bold bg-green-100 bg-opacity-10 text-green-300 py-1 px-2 rounded-full">
{% elif genre == "Adventure" %}
<span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
{% elif genre == "Cars" %}
<span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
{% elif genre == "Comedy" %}
<span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
{% elif genre == "Drama" %}
<span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
{% elif genre == "Fantasy" %}
<span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
{% elif genre == "Horror" %}
<span class="text-xs font-bold bg-red-100 bg-opacity-10 text-red-300 py-1 px-2 rounded-full">
{% elif genre == "Mahou Shoujo" %}
<span class="text-xs font-bold bg-teal-100 bg-opacity-10 text-teal-300 py-1 px-2 rounded-full">
{% elif genre == "Mecha" %}
<span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
{% elif genre == "Music" %}
<span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
{% elif genre == "Mystery" %}
<span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
{% elif genre == "Psychological" %}
<span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
{% elif genre == "Romance" %}
<span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
{% elif genre == "Sci-Fi" %}
<span class="text-xs font-bold bg-red-100 bg-opacity-10 text-red-300 py-1 px-2 rounded-full">
{% elif genre == "Slice of Life" %}
<span class="text-xs font-bold bg-teal-100 bg-opacity-10 text-teal-300 py-1 px-2 rounded-full">
{% elif genre == "Sports" %}
<span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
{% elif genre == "Supernatural" %}
<span class="text-xs font-bold bg-green-100 bg-opacity-10 text-green-300 py-1 px-2 rounded-full">
{% elif genre == "Thriller" %}
<span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
{% else %}
<span class="text-xs font-bold bg-white bg-opacity-10 text-white py-1 px-2 rounded-full">
{% endif %}
{{ genre }}
</span>
{% endfor %}
</div>
</div>
</div>
</a>
</div>
{% endfor %}
|
|
