-
Notifications
You must be signed in to change notification settings - Fork 0
/
MAL2.html
187 lines (164 loc) · 4.53 KB
/
MAL2.html
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/sakura-vader.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>My Anime List</title>
<style>
body {
font-family: Arial, sans-serif;
}
.anime-table {
width: 100%;
border-collapse: collapse;
}
.anime-table th, .anime-table td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
.anime-table th {
background-color: #f4f4f4;
}
.status-check {
text-align: center;
}
.status-check input {
pointer-events: none;
}
/* Table styling */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
/* Make the header sticky */
thead th {
position: sticky;
top: 0;
background-color: #120c0e;
z-index: 2;
}
/* Optional: Add a shadow effect for better visibility */
thead th::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 3px;
background-color: #ddd;
z-index: 1;
}
/* Table row hover effect */
tr:hover {
background-color: #1f0c0f;
}
</style>
</head>
<body>
<h1>My Anime List</h1>
<table>
<thead>
<tr>
<th>Anime Name</th>
<th>Status</th>
<th>Episodes</th>
<th>Watching</th>
<th>Completed</th>
<th>Paused</th>
<th>Dropped</th>
<th>Planning</th>
</tr>
</thead>
<tbody id="anime-list">
<!-- Anime rows will be dynamically inserted here -->
</tbody>
</table>
<script>
async function fetchAnimeList() {
const query = `
query ($userId: Int) {
MediaListCollection(userId: $userId, type: ANIME) {
lists {
name
entries {
media {
title {
romaji
}
episodes
coverImage {
large
}
siteUrl
}
status # Fetch the user's specific status for this anime
}
}
}
}
`;
const variables = {
userId: 154492 // Replace with your AniList user ID
};
try {
const response = await fetch('https://graphql.anilist.co', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: query,
variables: variables
})
});
const result = await response.json();
displayAnimeList(result.data.MediaListCollection.lists);
} catch (error) {
console.error('Error fetching the anime list:', error);
}
}
function displayAnimeList(lists) {
const animeListElement = document.getElementById('anime-list');
animeListElement.innerHTML = ''; // Clear previous list
lists.forEach(list => {
list.entries.forEach(entry => {
console.log(entry.media.title.romaji, entry.status); // Log the title and user-specific status
const animeRow = document.createElement('tr');
// Anime title and link
const animeTitleCell = `<td><a href="${entry.media.siteUrl}" target="_blank">${entry.media.title.romaji}</a></td>`;
// User-specific status text
const statusTextCell = `<td>${entry.status}</td>`;
// Number of episodes
const episodesCell = `<td>${entry.media.episodes || "N/A"}</td>`;
// Checkmark cells for statuses
const statusCheckCell = (status) => `
<td class="status-check">
<input type="checkbox" ${entry.status === status ? 'checked' : ''}>
</td>
`;
// Create row with all the data
animeRow.innerHTML = `
${animeTitleCell}
${statusTextCell}
${episodesCell}
${statusCheckCell('CURRENT')}
${statusCheckCell('COMPLETED')}
${statusCheckCell('PAUSED')}
${statusCheckCell('DROPPED')}
${statusCheckCell('PLANNING')}
`;
animeListElement.appendChild(animeRow);
});
});
}
fetchAnimeList();
</script>
</body>
</html>