blob: 1ce3f5781c50d6991f1f8f6cd237d7f6b8806713 (
plain)
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
|
{% load color_to_rgb %}
{% load static %}
<div class="anime-list-section">
{% if title %}
<div class="section-title-area">
<h2 class="section-title">{{ title }}</h2>
{% if title == "Most Popular Among Folks" %}
<a href="{% url 'anime:search' %}?sort=popularity" class="section-view-all">All Popular Titles →</a>
{% elif title == "Highly Rated Stuff" %}
<a href="{% url 'anime:search' %}?sort=score" class="section-view-all">All Top Rated Titles →</a>
{% elif title == "The Trending Section" %}
<a href="{% url 'anime:search' %}?sort=trending" class="section-view-all">All Trending Titles →</a>
{% endif %}
</div>
{% endif %}
<div class="anime-grid">
{% for anime in anime_list %}
<a href="{% url "anime:anime" anime.id %}" class="anime-card" style="--anime-color: {{ anime.color|default:'#8d8dff' }};--anime-color-rgb: {{ anime.color|default:'141, 141, 255'|color_to_rgb }};">
<div class="anime-poster">
<img src="{{ anime.image }}" alt="{{ anime.title.english }}">
</div>
<div class="anime-basic-info">
<h3 class="anime-title" style="color:{{anime.color}}">{{ anime.title.english|default:anime.title.romaji }}</h3>
<div class="anime-meta">
<span class="anime-status">{{ anime.status }}</span>
{% if anime.totalEpisodes %}
<span>{{ anime.totalEpisodes }} eps</span>
{% endif %}
</div>
</div>
<div class="anime-hover-card">
<div class="hover-card-cover">
{% if anime.cover %}
<img src="{{ anime.cover }}" alt="Cover">
{% else %}
<div class="hover-card-color" style="background-color: {{ anime.color|default:'#1a1f29' }}"></div>
{% endif %}
<div class="hover-card-title-area">
<h3>{{ anime.title.english|default:anime.title.romaji }}</h3>
</div>
</div>
<div class="hover-card-content">
<div class="hover-card-poster">
<img src="{{ anime.image }}" alt="{{ anime.title.english }}">
</div>
<div class="hover-card-details">
<div class="hover-card-meta">
<span>{{ anime.type }}</span>
<span>{{ anime.status }}</span>
{% if anime.totalEpisodes %}
<span>{{ anime.totalEpisodes }} Episodes</span>
{% endif %}
{% if anime.rating %}
<span>★ {{ anime.rating }}%</span>
{% endif %}
</div>
<div class="hover-card-description">
{{ anime.description|truncatewords:50 }}
</div>
<div class="hover-card-genres">
{% for genre in anime.genres %}
<span class="genre-tag">{{ genre }}</span>
{% endfor %}
</div>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
</div>
{% block scripts %}
<script src="{% static 'js/shared/animeList.js' %}"></script>
{% endblock scripts %}
|
