..
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 | {% extends "partials/base.html" %}
{% block content %}
<div class="bg-white bg-opacity-10 rounded-lg bg-center bg-cover h-96 relative mt-4" {% if request.user.discord_banner %} style="background-image: url('https://cdn.discordapp.com/banners/{{ request.user.discord_id }}/{{ request.user.discord_banner }}?size=1024')" {% else %} style="background-image: url('https://giffiles.alphacoders.com/132/13250.gif')" {% endif %}>
<div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
<div class="flex flex-col items-center gap-2 absolute bottom-0 left-10">
<img loading="lazy" src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=256" alt="avatar" class="rounded-full w-24 h-24">
<h1 class="text-2xl font-bold">
{% if request.user.preferences.display_guild_name_instead_of_username and request.user.discord_guild_name %}
{{ request.user.discord_guild_name }}
{% elif request.user.discord_global_name%}
{{ request.user.discord_global_name }}
{% else %}
{{ request.user.username }}
{% endif %}
</h1>
</div>
<a href="{% url "auth:logout" %}" class="bg-white bg-opacity-10 text-white text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 absolute bottom-10 right-10">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
<path fill-rule="evenodd" d="M14.47 2.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 1 1-1.06-1.06l4.72-4.72H9a5.25 5.25 0 1 0 0 10.5h3a.75.75 0 0 1 0 1.5H9a6.75 6.75 0 0 1 0-13.5h10.19l-4.72-4.72a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
Logout
</a>
</div>
<section class="w-full flex flex-col max-w-7xl mx-auto my-4 p-2">
<section class="inline-flex w-max flex-row rounded-full bg-white bg-opacity-10 mx-auto">
<a class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full {% if req_category == "preferences" %}bg-{{ user.preferences.accent_colour }}-600{% endif %}" href="{% url "user_profile:user_profile" %}?category=preferences">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" />
</svg>
<span>Preferences</span>
</a>
<a class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full {% if req_category == "anime_list" %}bg-{{ user.preferences.accent_colour }}-600{% endif %}" href="{% url "user_profile:user_profile" %}?category=anime_list">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
<path d="M19.5 6h-15v9h15V6Z" />
<path fill-rule="evenodd" d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v11.25C1.5 17.16 2.34 18 3.375 18H9.75v1.5H6A.75.75 0 0 0 6 21h12a.75.75 0 0 0 0-1.5h-3.75V18h6.375c1.035 0 1.875-.84 1.875-1.875V4.875C22.5 3.839 21.66 3 20.625 3H3.375Zm0 13.5h17.25a.375.375 0 0 0 .375-.375V4.875a.375.375 0 0 0-.375-.375H3.375A.375.375 0 0 0 3 4.875v11.25c0 .207.168.375.375.375Z" clip-rule="evenodd" />
</svg>
<span>Anime List</span>
</a>
</section>
{% if req_category == "anime_list" %}
{% include "user_profile/user_anime_list.html" %}
{% elif req_category == "update" %}
{% include "user_profile/single_anime_update.html" %}
{% else %}
{% include "user_profile/user_preferences.html" %}
{% endif %}
</section>
{% endblock content %}
{% block scripts %}
<script>
function showToast(message, isSuccess) {
const toast = document.createElement('div');
toast.className = `flex items-center p-4 rounded-md shadow-lg transition-opacity duration-500 ease-in-out animate__animated ${
isSuccess ? 'bg-green-100 text-green-700 animate__fadeInUp' : 'bg-red-100 text-red-700 animate__fadeInUp'
}`;
const checkSVG = `<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="m4.5 12.75 6 6 9-13.5" /></svg>`
const errorSVG = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>`
toast.innerHTML = `
<div class="flex items-center">
${isSuccess ? checkSVG : errorSVG}
<span class="ml-2">${message}</span>
</div>
`;
// Append the toast to the container
toastContainer.appendChild(toast);
// Remove the toast after 3 seconds
setTimeout(() => {
toast.classList.add('animate__fadeOutDown');
setTimeout(() => {
toastContainer.removeChild(toast);
}, 500);
}, 3000);
}
const customSelects = document.querySelectorAll('.custom-select')
customSelects.forEach(customSelect => {
const selectId = customSelect.getAttribute('data-select')
const customSelectDisplay = document.getElementById(selectId)
const customSelectOptions = document.getElementById(`${selectId}_options`)
let selectedValue = '';
customSelectDisplay.addEventListener('click', function() {
customSelectOptions.classList.toggle('hidden');
});
customSelectOptions.addEventListener('click', function(e) {
if (e.target.hasAttribute('data-value')) {
selectedValue = e.target.getAttribute('data-value');
customSelectDisplay.textContent = selectedValue;
customSelectOptions.classList.add('hidden');
}
});
// Close the dropdown when clicking outside
document.addEventListener('click', function(e) {
if (!customSelectDisplay.contains(e.target) && !customSelectOptions.contains(e.target)) {
customSelectOptions.classList.add('hidden');
}
});
});
</script>
{% endblock scripts %}
|
|
